Almost all sections with mock data

src/components/reportes/ReportCard.tsx

@@ -0,0 +1,62 @@
+'use client'
+
+import { cn } from '@/lib/utils'
+import { FileText, FileSpreadsheet } from 'lucide-react'
+
+interface ReportCardProps {
+  title: string
+  description: string
+  onExportPdf: () => void
+  onExportExcel: () => void
+  loading?: boolean
+}
+
+export default function ReportCard({
+  title,
+  description,
+  onExportPdf,
+  onExportExcel,
+  loading = false,
+}: ReportCardProps) {
+  const btnBase =
+    'inline-flex items-center gap-2 rounded-lg px-4 py-2 text-sm font-medium transition-colors disabled:cursor-not-allowed disabled:opacity-50'
+  const btnPrimary =
+    'bg-cyan-600 text-white hover:bg-cyan-500'
+  const btnOutlined =
+    'border border-white/10 text-gray-300 hover:bg-white/5 hover:text-gray-200'
+
+  return (
+    <div
+      className={cn(
+        'rounded-xl border border-white/10 overflow-hidden',
+        'bg-gradient-to-b from-dark-300/90 to-dark-400/90',
+        'flex flex-col'
+      )}
+    >
+      <div className="border-b border-white/10 px-4 py-4">
+        <h3 className="text-lg font-semibold text-white">{title}</h3>
+        <p className="mt-2 text-sm text-gray-400">{description}</p>
+      </div>
+      <div className="flex flex-wrap items-center gap-2 p-4">
+        <button
+          type="button"
+          onClick={onExportPdf}
+          disabled={loading}
+          className={cn(btnBase, btnPrimary)}
+        >
+          <FileText className="h-4 w-4" />
+          Exportar PDF
+        </button>
+        <button
+          type="button"
+          onClick={onExportExcel}
+          disabled={loading}
+          className={cn(btnBase, btnOutlined)}
+        >
+          <FileSpreadsheet className="h-4 w-4" />
+          Excel
+        </button>
+      </div>
+    </div>
+  )
+}