Touch up

frontend/src/app/(authenticated)/dashboard/page.tsx

@@ -1,30 +1,25 @@
 "use client";
 
 import React, { useState, useEffect } from "react";
-import AnalyticsCards from "@/components/AnalyticsCards";
-import ActivityFeed from "@/components/ActivityFeed";
+
 import DashboardSkeleton from "@/components/DashboardSkeleton";
 import Link from "next/link";
 import {
   useMerchantHydrated,
   useHydrateMerchantStore,
   useMerchantApiKey,
-  useMerchantMetadata,
 } from "@/lib/merchant-store";
-import { useTranslations } from "next-intl";
 import FirstApiKeyModal from "@/components/FirstApiKeyModal";
 import PaymentMetrics from "@/components/PaymentMetrics";
 import RecentPayments from "@/components/RecentPayments";
 import WithdrawModal from "@/components/WithdrawModal";
 import FirstPaymentCelebration from "@/components/FirstPaymentCelebration";
 
 export default function DashboardPage() {
-  const t = useTranslations("dashboardPage");
   const [isFirstKeyModalOpen, setIsFirstKeyModalOpen] = useState(false);
   const [isWithdrawOpen, setIsWithdrawOpen] = useState(false);
   const hydrated = useMerchantHydrated();
   const apiKey = useMerchantApiKey();
-  const merchant = useMerchantMetadata();
   const [loading, setLoading] = useState(true);
 
   useHydrateMerchantStore();
@@ -138,7 +133,7 @@ export default function DashboardPage() {
 
       <FirstApiKeyModal isOpen={isFirstKeyModalOpen} onClose={() => setIsFirstKeyModalOpen(false)} />
       <FirstPaymentCelebration />
-      <WithdrawalModal isOpen={isWithdrawOpen} onClose={() => setIsWithdrawOpen(false)} />
+      <WithdrawModal isOpen={isWithdrawOpen} onClose={() => setIsWithdrawOpen(false)} />
     </div>
   );
 }

frontend/src/components/PaymentMetrics.tsx

@@ -26,7 +26,6 @@ import {
   DropdownMenuTrigger,
 } from "@/components/ui/dropdown-menu";
 import { localeToLanguageTag } from "@/i18n/config";
-import MetricsSkeleton from "@/components/MetricsSkeleton";
 import DensityGrid from "@/components/DensityGrid";
 
 type TimeRange = "7D" | "30D" | "1Y";
@@ -268,6 +267,18 @@ export default function PaymentMetrics({
   const hydrated = useMerchantHydrated();
   const chartContainerRef = useRef<HTMLDivElement>(null);
 
+  const handleExport = async (format: ExportFormat) => {
+    if (!chartContainerRef.current) return;
+    try {
+      setExporting(true);
+      await exportChart(chartContainerRef, format, `metrics-export-${new Date().getTime()}`);
+    } catch (err) {
+      toast.error(err instanceof Error ? err.message : t("exportFailed"));
+    } finally {
+      setExporting(false);
+    }
+  };
+
   useHydrateMerchantStore();
 
   useEffect(() => {
@@ -343,7 +354,7 @@ export default function PaymentMetrics({
     });
   };
 
-  if (loading || !hydrated) {
+  if (showSkeleton || loading || !hydrated) {
     return (
       <div className="animate-pulse space-y-4">
         <div className="grid gap-4 sm:grid-cols-3">