fix(09): refine export UI buttons and fix 404

frontend/components/admin/ExportPanel.tsx

@@ -31,8 +31,8 @@ export function ExportPanel() {
   return (
     <div data-testid="admin-tab-exports" className="p-4 md:p-6 bg-surface border border-slate-800 rounded-3xl space-y-4 md:space-y-6">
       <header className="flex items-center gap-3">
-        <div className="p-2 md:p-3 bg-emerald-500/10 rounded-2xl text-emerald-400 border border-emerald-500/20 shadow-inner">
-          <FileDown size={24} className="md:w-7 md:h-7" />
+        <div className="p-3 md:p-4 bg-indigo-500/10 rounded-2xl text-indigo-400 border border-indigo-500/20 shadow-xl shadow-indigo-500/5">
+          <FileDown size={28} className="md:w-8 md:h-8" />
         </div>
         <div>
           <h2 className="text-xl md:text-2xl font-normal text-white">Export & Reports</h2>
@@ -44,7 +44,7 @@ export function ExportPanel() {
 
       <div className="grid md:grid-cols-2 gap-4">
         {/* Inventory Snapshot Section */}
-        <div className="p-4 bg-slate-800/30 border border-slate-800 rounded-2xl space-y-4">
+        <div className="p-4 bg-slate-800/40 border border-slate-800 rounded-2xl space-y-4">
           <div>
             <h3 className="text-sm font-normal text-secondary">Inventory Snapshot</h3>
             <p className="text-xs text-muted mt-0.5">
@@ -56,34 +56,34 @@ export function ExportPanel() {
             <button
               onClick={() => handleExportSnapshot("csv")}
               disabled={isLoading}
-              className="bg-surface border border-slate-800 hover:bg-slate-800/50 text-white font-normal py-2 px-3 rounded-xl transition-all active:scale-[0.98] disabled:opacity-50 disabled:pointer-events-none flex items-center justify-center gap-2 text-xs focus-visible:ring-2 focus-visible:ring-primary focus-visible:outline-none"
+              className="bg-surface border border-slate-800 hover:border-primary/50 hover:bg-slate-800/50 text-white font-normal py-2.5 px-3 rounded-xl transition-all active:scale-[0.98] disabled:opacity-50 disabled:pointer-events-none flex items-center justify-center gap-2 text-xs focus-visible:ring-2 focus-visible:ring-primary focus-visible:outline-none group"
               aria-label="Export inventory snapshot as CSV"
             >
               {isLoading ? (
-                <Loader2 size={14} className="animate-spin" />
+                <Loader2 size={16} className="animate-spin text-primary" />
               ) : (
-                <FileText size={14} />
+                <FileText size={16} className="text-blue-400 group-hover:text-blue-300 transition-colors" />
               )}
-              CSV
+              <span>CSV</span>
             </button>
             <button
               onClick={() => handleExportSnapshot("xlsx")}
               disabled={isLoading}
-              className="bg-surface border border-slate-800 hover:bg-slate-800/50 text-white font-normal py-2 px-3 rounded-xl transition-all active:scale-[0.98] disabled:opacity-50 disabled:pointer-events-none flex items-center justify-center gap-2 text-xs focus-visible:ring-2 focus-visible:ring-primary focus-visible:outline-none"
+              className="bg-surface border border-slate-800 hover:border-primary/50 hover:bg-slate-800/50 text-white font-normal py-2.5 px-3 rounded-xl transition-all active:scale-[0.98] disabled:opacity-50 disabled:pointer-events-none flex items-center justify-center gap-2 text-xs focus-visible:ring-2 focus-visible:ring-primary focus-visible:outline-none group"
               aria-label="Export inventory snapshot as Excel"
             >
               {isLoading ? (
-                <Loader2 size={14} className="animate-spin" />
+                <Loader2 size={16} className="animate-spin text-primary" />
               ) : (
-                <FileSpreadsheet size={14} />
+                <FileSpreadsheet size={16} className="text-emerald-400 group-hover:text-emerald-300 transition-colors" />
               )}
-              Excel
+              <span>Excel</span>
             </button>
           </div>
         </div>
 
         {/* Audit Trail Section */}
-        <div className="p-4 bg-slate-800/30 border border-slate-800 rounded-2xl space-y-4">
+        <div className="p-4 bg-slate-800/40 border border-slate-800 rounded-2xl space-y-4">
           <div>
             <h3 className="text-sm font-normal text-secondary">Audit Trail</h3>
             <p className="text-xs text-muted mt-0.5">
@@ -95,36 +95,37 @@ export function ExportPanel() {
             <button
               onClick={() => handleExportAuditTrail("csv")}
               disabled={isLoading}
-              className="bg-surface border border-slate-800 hover:bg-slate-800/50 text-white font-normal py-2 px-3 rounded-xl transition-all active:scale-[0.98] disabled:opacity-50 disabled:pointer-events-none flex items-center justify-center gap-2 text-xs focus-visible:ring-2 focus-visible:ring-primary focus-visible:outline-none"
+              className="bg-surface border border-slate-800 hover:border-primary/50 hover:bg-slate-800/50 text-white font-normal py-2.5 px-3 rounded-xl transition-all active:scale-[0.98] disabled:opacity-50 disabled:pointer-events-none flex items-center justify-center gap-2 text-xs focus-visible:ring-2 focus-visible:ring-primary focus-visible:outline-none group"
               aria-label="Export audit trail as CSV"
             >
               {isLoading ? (
-                <Loader2 size={14} className="animate-spin" />
+                <Loader2 size={16} className="animate-spin text-primary" />
               ) : (
-                <FileText size={14} />
+                <FileText size={16} className="text-blue-400 group-hover:text-blue-300 transition-colors" />
               )}
-              CSV
+              <span>CSV</span>
             </button>
             <button
               onClick={() => handleExportAuditTrail("xlsx")}
               disabled={isLoading}
-              className="bg-surface border border-slate-800 hover:bg-slate-800/50 text-white font-normal py-2 px-3 rounded-xl transition-all active:scale-[0.98] disabled:opacity-50 disabled:pointer-events-none flex items-center justify-center gap-2 text-xs focus-visible:ring-2 focus-visible:ring-primary focus-visible:outline-none"
+              className="bg-surface border border-slate-800 hover:border-primary/50 hover:bg-slate-800/50 text-white font-normal py-2.5 px-3 rounded-xl transition-all active:scale-[0.98] disabled:opacity-50 disabled:pointer-events-none flex items-center justify-center gap-2 text-xs focus-visible:ring-2 focus-visible:ring-primary focus-visible:outline-none group"
               aria-label="Export audit trail as Excel"
             >
               {isLoading ? (
-                <Loader2 size={14} className="animate-spin" />
+                <Loader2 size={16} className="animate-spin text-primary" />
               ) : (
-                <FileSpreadsheet size={14} />
+                <FileSpreadsheet size={16} className="text-emerald-400 group-hover:text-emerald-300 transition-colors" />
               )}
-              Excel
+              <span>Excel</span>
             </button>
           </div>
         </div>
       </div>
 
       {error && (
-        <div className="p-3 bg-rose-500/10 border border-rose-500/20 rounded-xl text-rose-500 text-xs flex items-center gap-2">
-          <span>Error: {error}</span>
+        <div className="p-3 bg-rose-500/10 border border-rose-500/20 rounded-xl text-rose-500 text-[10px] flex items-center gap-2 animate-in fade-in zoom-in duration-300">
+          <div className="w-1.5 h-1.5 bg-rose-500 rounded-full animate-pulse" />
+          <span className="font-normal">Error: {error}</span>
         </div>
       )}
     </div>