Merge pull request #396 from RaymondAbiola/feat/improv

Feat/improv

Author: 0xSlink

app/(merchant)/dashboard/page.tsx

@@ -48,7 +48,6 @@ const mockPaymentLinks = [
   { id: 'link_02', label: 'E-commerce Checkout', url: 'betta.pay/pay/link_02', clicks: 112, converted: 47 },
   { id: 'link_03', label: 'Donation Campaign', url: 'betta.pay/pay/link_03', clicks: 58, converted: 19 },
 ];
-import RevenueChart from '@/components/charts/RevenueChart';
 
 const PERIOD_OPTIONS = ['7D', '30D', '90D'] as const;
 type Period = typeof PERIOD_OPTIONS[number];
@@ -202,7 +201,6 @@ export default function DashboardPage() {
             </div>
           </CardHeader>
           <CardContent className="pt-0">
-            <RevenueChart height={260} />
             {chartError ? (
               <div className="h-[260px] flex items-center justify-center">
                 <ErrorDisplay
@@ -211,7 +209,7 @@ export default function DashboardPage() {
                 />
               </div>
             ) : (
-              <RevenueChart height={260} />
+              <RevenueChart height={260} data={payments} />
             )}
             {/* Summary row */}
             <div className="flex items-center gap-6 pt-4 border-t border-border mt-2">

app/(merchant)/fx/page.tsx

@@ -1,15 +1,5 @@
 "use client";
 
-import { useState } from 'react';
-import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
-import { Button } from '@/components/ui/button';
-import { RefreshCcw, TrendingUp, TrendingDown, Info } from 'lucide-react';
-import dynamic from 'next/dynamic';
-
-const FxRateChart = dynamic(() => import('@/components/charts/FxRateChart'), {
-  ssr: false,
-  loading: () => <div className="h-[240px] bg-slate-50 animate-pulse rounded-xl w-full" />
-});
 import { useState, useEffect } from 'react';
 import dynamic from 'next/dynamic';
 import { Card, CardContent, CardHeader, CardTitle, CardDescription } from '@/components/ui';
@@ -220,7 +210,11 @@ export default function FxRatesPage() {
                 <CardTitle className="text-base font-semibold text-foreground">USDC/NGN — 7 Day Chart</CardTitle>
               </CardHeader>
               <CardContent>
-                <FxRateChart height={240} />
+                <FxRateChart
+                  height={240}
+                  error={fxError ? 'Failed to load FX rate history' : ratesError}
+                  onRetry={refetch}
+                />
               </CardContent>
             </Card>
 
@@ -265,8 +259,6 @@ export default function FxRatesPage() {
               <Bell className="w-4 h-4 text-primary" /> Create Rate Alert
             </CardTitle>
           </CardHeader>
-          <CardContent>
-            <FxRateChart height={240} />
           <CardContent className="space-y-4">
             <div className="grid grid-cols-2 gap-4">
               <div className="space-y-2">

components/charts/FxRateChart.tsx

@@ -1,38 +1,26 @@
 "use client";
 
-import React from 'react';
-import { ResponsiveContainer, LineChart, Line, XAxis, YAxis, Tooltip, CartesianGrid } from 'recharts';
-
-const fxHistory = [
-  { date: 'Jan 7', rate: 1480 },
-  { date: 'Jan 8', rate: 1495 },
-  { date: 'Jan 9', rate: 1510 },
-  { date: 'Jan 10', rate: 1505 },
-  { date: 'Jan 11', rate: 1520 },
-  { date: 'Jan 12', rate: 1545 },
-  { date: 'Jan 13', rate: 1550 },
-];
-
-export interface FxTooltipProps { active?: boolean; payload?: { value: number }[]; label?: string; }
-export const FxTooltip = ({ active, payload, label }: FxTooltipProps) => {
-  if (active && payload && payload.length) {
-    return (
-      <div className="bg-white border border-slate-200 rounded-xl p-3 shadow-lg text-sm">
-        <p className="font-semibold text-slate-700 mb-1">{label}</p>
-        <p className="text-amber-600 font-bold">₦{payload[0]?.value?.toLocaleString()}</p>
 import { useState, useEffect } from "react";
 import { useTheme } from "next-themes";
 import {
   ResponsiveContainer,
-  LineChart,
-  Line,
+  AreaChart,
+  Area,
   XAxis,
   YAxis,
   Tooltip,
   CartesianGrid,
 } from "recharts";
+// Imported directly (not via the barrel) to keep this lazy-loaded chunk lean.
+import { ErrorDisplay } from "@/components/shared/ErrorDisplay";
 
-const fxHistory = [
+export interface FxRatePoint {
+  date: string;
+  rate: number;
+}
+
+/** 7 days of USDC/NGN rates — used when the caller does not supply live data. */
+const fxHistory: FxRatePoint[] = [
   { date: "Jan 7", rate: 1480 },
   { date: "Jan 8", rate: 1495 },
   { date: "Jan 9", rate: 1510 },
@@ -42,51 +30,54 @@ const fxHistory = [
   { date: "Jan 13", rate: 1550 },
 ];
 
-interface FxTooltipProps {
+const formatNgn = (value: number) => `₦${value.toLocaleString()}`;
+
+export interface FxTooltipProps {
   active?: boolean;
   payload?: { value: number }[];
   label?: string;
 }
 
-const FxTooltip = ({ active, payload, label }: FxTooltipProps) => {
-  const { resolvedTheme } = useTheme();
-  const isDark = resolvedTheme === "dark";
-
+export const FxTooltip = ({ active, payload, label }: FxTooltipProps) => {
   if (active && payload && payload.length) {
     return (
-      <div 
+      <div
         className="border rounded-xl p-3 shadow-lg text-sm"
-        style={{ 
-          backgroundColor: isDark ? "var(--card)" : "var(--card)",
-          borderColor: isDark ? "var(--border)" : "var(--border)",
+        style={{
+          backgroundColor: "var(--card)",
+          borderColor: "var(--border)",
         }}
       >
-        <p className="font-semibold mb-1" style={{ color: isDark ? "var(--foreground)" : "var(--foreground)" }}>{label}</p>
-        <p className="font-bold" style={{ color: isDark ? "var(--primary)" : "var(--primary)" }}>
-          ₦{payload[0]?.value?.toLocaleString()}
+        <p className="font-semibold mb-1" style={{ color: "var(--foreground)" }}>
+          {label}
+        </p>
+        <p className="font-bold" style={{ color: "var(--primary)" }}>
+          {formatNgn(payload[0]?.value ?? 0)}
         </p>
       </div>
     );
   }
   return null;
 };
 
-export default function FxRateChart({ height = 240 }: { height?: number }) {
-  return (
-    <div style={{ height, width: '100%' }}>
-      <ResponsiveContainer width="100%" height="100%">
-        <LineChart data={fxHistory} margin={{ top: 4, right: 4, bottom: 0, left: -10 }}>
-          <CartesianGrid strokeDasharray="3 3" stroke="#F1F5F9" vertical={false} />
-          <XAxis dataKey="date" fontSize={11} tickLine={false} axisLine={false} tick={{ fill: '#94A3B8' }} />
-          <YAxis fontSize={11} tickLine={false} axisLine={false} tickFormatter={(v) => `₦${v}`} tick={{ fill: '#94A3B8' }} domain={['auto', 'auto']} />
-          <Tooltip content={<FxTooltip />} />
-          <Line type="monotone" dataKey="rate" stroke="#F0A500" strokeWidth={2.5} dot={false} activeDot={{ r: 5, fill: '#F0A500', stroke: '#fff', strokeWidth: 2 }} />
 interface FxRateChartProps {
   height?: number;
+  /** Live rate history. Falls back to 7 days of mock data when omitted. */
+  data?: FxRatePoint[];
+  /** Set when the caller's rate fetch failed — renders an in-chart error state. */
+  error?: string | Error | null;
+  onRetry?: () => void;
 }
 
-export default function FxRateChart({ height = 240 }: FxRateChartProps) {
+export default function FxRateChart({
+  height = 240,
+  data,
+  error = null,
+  onRetry,
+}: FxRateChartProps) {
   const [isMobile, setIsMobile] = useState(false);
+  const { resolvedTheme } = useTheme();
+  const isDark = resolvedTheme === "dark";
 
   useEffect(() => {
     const mq = window.matchMedia("(max-width: 639px)");
@@ -96,13 +87,37 @@ export default function FxRateChart({ height = 240 }: FxRateChartProps) {
     return () => mq.removeEventListener("change", handler);
   }, []);
 
+  const chartData = data && data.length > 0 ? data : fxHistory;
+  const hasError = Boolean(error) || (data !== undefined && data.length === 0);
+
+  if (hasError) {
+    return (
+      <div className="w-full flex items-center justify-center" style={{ height }}>
+        <ErrorDisplay
+          message={
+            typeof error === "string"
+              ? error
+              : "Unable to load FX rate history."
+          }
+          onRetry={onRetry}
+        />
+      </div>
+    );
+  }
+
   return (
     <div className="w-full" style={{ height }}>
       <ResponsiveContainer width="100%" height="100%">
-        <LineChart
-          data={fxHistory}
+        <AreaChart
+          data={chartData}
           margin={{ top: 4, right: 4, bottom: 0, left: isMobile ? 0 : -10 }}
         >
+          <defs>
+            <linearGradient id="colorFxRate" x1="0" y1="0" x2="0" y2="1">
+              <stop offset="5%" stopColor="var(--primary)" stopOpacity={isDark ? 0.4 : 0.25} />
+              <stop offset="95%" stopColor="var(--primary)" stopOpacity={isDark ? 0.05 : 0} />
+            </linearGradient>
+          </defs>
           <CartesianGrid
             strokeDasharray="3 3"
             stroke="var(--border)"
@@ -119,16 +134,19 @@ export default function FxRateChart({ height = 240 }: FxRateChartProps) {
             fontSize={11}
             tickLine={false}
             axisLine={false}
-            tickFormatter={(v) => `₦${v}`}
+            tickFormatter={formatNgn}
             tick={{ fill: "var(--muted-foreground)" }}
             domain={["auto", "auto"]}
+            width={isMobile ? 52 : 64}
           />
           <Tooltip content={<FxTooltip />} />
-          <Line
+          <Area
             type="monotone"
             dataKey="rate"
             stroke="var(--primary)"
             strokeWidth={2.5}
+            fillOpacity={1}
+            fill="url(#colorFxRate)"
             dot={false}
             activeDot={{
               r: 5,
@@ -137,7 +155,7 @@ export default function FxRateChart({ height = 240 }: FxRateChartProps) {
               strokeWidth: 2,
             }}
           />
-        </LineChart>
+        </AreaChart>
       </ResponsiveContainer>
     </div>
   );