134 lines
6.3 KiB
TypeScript
134 lines
6.3 KiB
TypeScript
"use client";
|
|
|
|
import { useState } from "react";
|
|
import { FileDown, Loader2, FileSpreadsheet, FileText } from "lucide-react";
|
|
import { useExport } from "@/hooks/useExport";
|
|
import { toast } from "react-hot-toast";
|
|
|
|
export function ExportPanel() {
|
|
const { exportSnapshot, exportAuditTrail, isLoading, error } = useExport();
|
|
|
|
const handleExportSnapshot = async (format: "csv" | "xlsx") => {
|
|
try {
|
|
await exportSnapshot(format);
|
|
const formatName = format === "csv" ? "CSV" : "Excel";
|
|
toast.success(`Inventory snapshot exported as ${formatName}`);
|
|
} catch (err) {
|
|
// Error handled by hook
|
|
}
|
|
};
|
|
|
|
const handleExportAuditTrail = async (format: "csv" | "xlsx") => {
|
|
try {
|
|
await exportAuditTrail(format);
|
|
const formatName = format === "csv" ? "CSV" : "Excel";
|
|
toast.success(`Audit trail exported as ${formatName}`);
|
|
} catch (err) {
|
|
// Error handled by hook
|
|
}
|
|
};
|
|
|
|
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-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>
|
|
<p className="text-[10px] md:text-xs text-muted font-normal tracking-tight mt-0.5">
|
|
Download inventory snapshots and audit trails
|
|
</p>
|
|
</div>
|
|
</header>
|
|
|
|
<div className="grid md:grid-cols-2 gap-4">
|
|
{/* Inventory Snapshot Section */}
|
|
<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">
|
|
Export current inventory state with all item details
|
|
</p>
|
|
</div>
|
|
|
|
<div className="grid grid-cols-2 gap-2">
|
|
<button
|
|
onClick={() => handleExportSnapshot("csv")}
|
|
disabled={isLoading}
|
|
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={16} className="animate-spin text-primary" />
|
|
) : (
|
|
<FileText size={16} className="text-blue-400 group-hover:text-blue-300 transition-colors" />
|
|
)}
|
|
<span>CSV</span>
|
|
</button>
|
|
<button
|
|
onClick={() => handleExportSnapshot("xlsx")}
|
|
disabled={isLoading}
|
|
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={16} className="animate-spin text-primary" />
|
|
) : (
|
|
<FileSpreadsheet size={16} className="text-emerald-400 group-hover:text-emerald-300 transition-colors" />
|
|
)}
|
|
<span>Excel</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Audit Trail Section */}
|
|
<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">
|
|
Complete log of system actions and changes
|
|
</p>
|
|
</div>
|
|
|
|
<div className="grid grid-cols-2 gap-2">
|
|
<button
|
|
onClick={() => handleExportAuditTrail("csv")}
|
|
disabled={isLoading}
|
|
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={16} className="animate-spin text-primary" />
|
|
) : (
|
|
<FileText size={16} className="text-blue-400 group-hover:text-blue-300 transition-colors" />
|
|
)}
|
|
<span>CSV</span>
|
|
</button>
|
|
<button
|
|
onClick={() => handleExportAuditTrail("xlsx")}
|
|
disabled={isLoading}
|
|
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={16} className="animate-spin text-primary" />
|
|
) : (
|
|
<FileSpreadsheet size={16} className="text-emerald-400 group-hover:text-emerald-300 transition-colors" />
|
|
)}
|
|
<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-[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>
|
|
);
|
|
}
|