Implemented data export

2026-09-26 13:45:42 +02:00
parent 15a8d8f449
commit 2949d6218b
12 changed files with 10939 additions and 359 deletions
@@ -0,0 +1,139 @@
+import React, { useState, useRef, useEffect } from 'react';
+import { Download, FileSpreadsheet, FileText, ChevronDown } from 'lucide-react';
+import { ExportColumn, exportToSpreadsheet, exportToPdf } from '../../utils/exportUtils';
+import { useAuth } from '../../auth/AuthProvider';
+
+export interface ExportButtonProps<T = any> {
+  title: string;
+  subtitle?: string;
+  filename: string;
+  columns: ExportColumn<T>[];
+  data: T[];
+  label?: string;
+  size?: 'sm' | 'md';
+  className?: string;
+}
+
+export function ExportButton<T>({
+  title,
+  subtitle,
+  filename,
+  columns,
+  data,
+  label = 'Export',
+  size = 'md',
+  className = '',
+}: ExportButtonProps<T>) {
+  const [isOpen, setIsOpen] = useState(false);
+  const dropdownRef = useRef<HTMLDivElement>(null);
+  const { user, claims, tenantId } = useAuth();
+
+  const isDisabled = !data || data.length === 0;
+
+  useEffect(() => {
+    function handleClickOutside(event: MouseEvent) {
+      if (dropdownRef.current && !dropdownRef.current.contains(event.target as Node)) {
+        setIsOpen(false);
+      }
+    }
+    if (isOpen) {
+      document.addEventListener('mousedown', handleClickOutside);
+    }
+    return () => {
+      document.removeEventListener('mousedown', handleClickOutside);
+    };
+  }, [isOpen]);
+
+  const handleExportSpreadsheet = () => {
+    if (isDisabled) return;
+    setIsOpen(false);
+    exportToSpreadsheet({
+      title,
+      subtitle,
+      filename,
+      columns,
+      data,
+      tenantName: (claims as any)?.tenant_name || (claims as any)?.tenant || `Tenant #${tenantId || 1}`,
+      userEmail: user?.profile?.email || (claims as any)?.email || '',
+    });
+  };
+
+  const handleExportPdf = () => {
+    if (isDisabled) return;
+    setIsOpen(false);
+    exportToPdf({
+      title,
+      subtitle,
+      filename,
+      columns,
+      data,
+      tenantName: (claims as any)?.tenant_name || (claims as any)?.tenant || `Tenant #${tenantId || 1}`,
+      userEmail: user?.profile?.email || (claims as any)?.email || '',
+    });
+  };
+
+  return (
+    <div className={`relative inline-block ${className}`} ref={dropdownRef}>
+      <button
+        type="button"
+        onClick={() => !isDisabled && setIsOpen(!isOpen)}
+        disabled={isDisabled}
+        title={
+          isDisabled
+            ? 'No data available to export in current view'
+            : `Export ${data.length} records to Spreadsheet or PDF`
+        }
+        className={`inline-flex items-center justify-center gap-1.5 font-semibold rounded-xl border transition cursor-pointer shadow-xs ${
+          size === 'sm' ? 'px-3 py-1.5 text-xs' : 'px-3.5 py-2 text-xs'
+        } ${
+          isDisabled
+            ? 'text-slate-600 bg-slate-900/40 border-slate-800/80 cursor-not-allowed opacity-60'
+            : 'text-slate-300 bg-[#0d121f] hover:bg-slate-800 border-slate-700/80 hover:text-white'
+        }`}
+      >
+        <Download className={`w-3.5 h-3.5 ${isDisabled ? 'text-slate-600' : 'text-emerald-400'}`} />
+        <span>{label}</span>
+        <ChevronDown className={`w-3 h-3 transition-transform ${isOpen ? 'rotate-180' : ''}`} />
+      </button>
+
+      {isOpen && !isDisabled && (
+        <div className="absolute right-0 mt-1.5 w-52 bg-[#0d121f] border border-slate-700/90 rounded-xl shadow-2xl z-50 overflow-hidden backdrop-blur-md animate-in fade-in-50 zoom-in-95">
+          <div className="p-2 border-b border-slate-800/80">
+            <span className="text-[10px] font-semibold uppercase tracking-wider text-slate-400 px-2 block">
+              Export Format ({data.length} items)
+            </span>
+          </div>
+          <div className="p-1 space-y-0.5">
+            <button
+              type="button"
+              onClick={handleExportSpreadsheet}
+              className="w-full flex items-center gap-2.5 px-3 py-2 text-xs text-left text-slate-200 hover:text-white hover:bg-emerald-500/15 rounded-lg transition-colors cursor-pointer group"
+            >
+              <div className="w-6 h-6 rounded-md bg-emerald-500/10 border border-emerald-500/20 flex items-center justify-center shrink-0 group-hover:bg-emerald-500/20">
+                <FileSpreadsheet className="w-3.5 h-3.5 text-emerald-400" />
+              </div>
+              <div>
+                <span className="font-semibold block leading-tight">Spreadsheet (.xlsx)</span>
+                <span className="text-[10px] text-slate-400">Excel / Google Sheets</span>
+              </div>
+            </button>
+
+            <button
+              type="button"
+              onClick={handleExportPdf}
+              className="w-full flex items-center gap-2.5 px-3 py-2 text-xs text-left text-slate-200 hover:text-white hover:bg-blue-500/15 rounded-lg transition-colors cursor-pointer group"
+            >
+              <div className="w-6 h-6 rounded-md bg-blue-500/10 border border-blue-500/20 flex items-center justify-center shrink-0 group-hover:bg-blue-500/20">
+                <FileText className="w-3.5 h-3.5 text-blue-400" />
+              </div>
+              <div>
+                <span className="font-semibold block leading-tight">PDF Document (.pdf)</span>
+                <span className="text-[10px] text-slate-400">Landscape with PFM Logo</span>
+              </div>
+            </button>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}