@wealthx/shadcn 1.4.1 → 1.5.0

package/src/components/ui/file-preview-dialog.tsx

@@ -0,0 +1,292 @@
+import * as React from "react";
+import { AlertCircleIcon, FileTextIcon, GripVerticalIcon } from "lucide-react";
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+  DialogFooter,
+} from "@/components/ui/dialog";
+import { Button } from "@/components/ui/button";
+import { Progress } from "@/components/ui/progress";
+import { Skeleton } from "@/components/ui/skeleton";
+import { Spinner } from "@/components/ui/spinner";
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "@/components/ui/table";
+import { cn } from "@/lib/utils";
+
+// ---------------------------------------------------------------------------
+// Types
+// ---------------------------------------------------------------------------
+
+export type FilePreviewState =
+  | "loading"
+  | "preview"
+  | "empty"
+  | "error"
+  | "importing";
+
+export interface CsvPreviewColumn {
+  key: string;
+  /** Display label shown in the column header. */
+  label: string;
+}
+
+export interface FilePreviewDialogProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  /** Name of the file being previewed. */
+  fileName?: string;
+  state?: FilePreviewState;
+  errorMessage?: string;
+  /** Ordered list of columns to display. */
+  columns?: CsvPreviewColumn[];
+  /** Data rows — keys match CsvPreviewColumn.key. */
+  rows?: Record<string, string>[];
+  /**
+   * Called when the user reorders a column via drag-and-drop.
+   * sourceIndex and targetIndex refer to positions in the columns array.
+   */
+  onColumnReorder?: (sourceIndex: number, targetIndex: number) => void;
+  /** Called when the user edits a cell inline. */
+  onRowChange?: (rowIndex: number, key: string, value: string) => void;
+  /** Called when the user clicks "Import". */
+  onImport?: () => void;
+  /** 0–100 progress value shown in the importing state. */
+  importProgress?: number;
+  /** Total rows in the file (shown in the preview header). */
+  totalRows?: number;
+  /** Rows that passed validation (shown in the preview header). */
+  validRows?: number;
+  className?: string;
+}
+
+// ---------------------------------------------------------------------------
+// Sub-components
+// ---------------------------------------------------------------------------
+
+function LoadingState({ columnCount }: { columnCount: number }) {
+  const cols = Math.max(columnCount, 3);
+  return (
+    <Table>
+      <TableHeader>
+        <TableRow>
+          {Array.from({ length: cols }).map((_, i) => (
+            <TableHead key={i}>
+              <Skeleton className="h-4 w-24" />
+            </TableHead>
+          ))}
+        </TableRow>
+      </TableHeader>
+      <TableBody>
+        {Array.from({ length: 4 }).map((_, rowIdx) => (
+          <TableRow key={rowIdx}>
+            {Array.from({ length: cols }).map((_, colIdx) => (
+              <TableCell key={colIdx}>
+                <Skeleton className="h-4 w-full" />
+              </TableCell>
+            ))}
+          </TableRow>
+        ))}
+      </TableBody>
+    </Table>
+  );
+}
+
+function EmptyState() {
+  return (
+    <div className="flex flex-col items-center gap-3 py-12 text-center">
+      <FileTextIcon className="size-10 text-muted-foreground/40" />
+      <p className="text-sm font-medium text-foreground">No data found</p>
+      <p className="text-xs text-muted-foreground">
+        The CSV file appears to be empty or contains only headers.
+      </p>
+    </div>
+  );
+}
+
+function ErrorState({ message }: { message?: string }) {
+  return (
+    <div className="flex flex-col items-center gap-3 py-12 text-center">
+      <AlertCircleIcon className="size-10 text-destructive/60" />
+      <p className="text-sm font-medium text-foreground">
+        Unable to parse file
+      </p>
+      <p className="text-xs text-muted-foreground">
+        {message ??
+          "The file could not be read. Please check the format and try again."}
+      </p>
+    </div>
+  );
+}
+
+function ImportingState({ progress }: { progress: number }) {
+  return (
+    <div className="flex flex-col items-center gap-4 py-12">
+      <Spinner className="size-6" />
+      <div className="w-full max-w-sm space-y-2">
+        <Progress value={progress} className="h-1.5" />
+        <p className="text-center text-xs text-muted-foreground">
+          Importing… {progress}%
+        </p>
+      </div>
+    </div>
+  );
+}
+
+// ---------------------------------------------------------------------------
+// Main component
+// ---------------------------------------------------------------------------
+
+export function FilePreviewDialog({
+  open,
+  onOpenChange,
+  fileName,
+  state = "preview",
+  errorMessage,
+  columns = [],
+  rows = [],
+  onColumnReorder,
+  onRowChange,
+  onImport,
+  importProgress = 0,
+  totalRows,
+  validRows,
+  className,
+}: FilePreviewDialogProps) {
+  // Drag-and-drop state for column reordering
+  const dragSourceRef = React.useRef<number | null>(null);
+  const [dragOverIndex, setDragOverIndex] = React.useState<number | null>(null);
+
+  function handleDragStart(index: number) {
+    dragSourceRef.current = index;
+  }
+
+  function handleDragOver(e: React.DragEvent, index: number) {
+    e.preventDefault();
+    setDragOverIndex(index);
+  }
+
+  function handleDrop(targetIndex: number) {
+    const source = dragSourceRef.current;
+    if (source !== null && source !== targetIndex) {
+      onColumnReorder?.(source, targetIndex);
+    }
+    dragSourceRef.current = null;
+    setDragOverIndex(null);
+  }
+
+  function handleDragEnd() {
+    dragSourceRef.current = null;
+    setDragOverIndex(null);
+  }
+
+  const isImporting = state === "importing";
+  const canImport = state === "preview" && rows.length > 0;
+
+  return (
+    <Dialog open={open} onOpenChange={isImporting ? undefined : onOpenChange}>
+      <DialogContent size="3xl" className={className}>
+        <DialogHeader>
+          <DialogTitle>Preview Import</DialogTitle>
+        </DialogHeader>
+
+        {/* File name + row counts */}
+        {fileName && state !== "error" && (
+          <div className="flex items-center justify-between text-xs text-muted-foreground">
+            <span className="font-medium text-foreground">{fileName}</span>
+            {state === "preview" && totalRows !== undefined && (
+              <span>
+                {validRows ?? rows.length} valid row
+                {(validRows ?? rows.length) !== 1 ? "s" : ""} / {totalRows}{" "}
+                total
+              </span>
+            )}
+          </div>
+        )}
+
+        {/* Content by state */}
+        {state === "loading" && <LoadingState columnCount={columns.length} />}
+
+        {state === "empty" && <EmptyState />}
+
+        {state === "error" && <ErrorState message={errorMessage} />}
+
+        {state === "importing" && <ImportingState progress={importProgress} />}
+
+        {state === "preview" && (
+          <div className="max-h-[400px] overflow-auto border border-border">
+            <Table>
+              <TableHeader className="sticky top-0 z-10 bg-muted/80 backdrop-blur-sm">
+                <TableRow>
+                  {columns.map((col, colIdx) => (
+                    <TableHead
+                      key={col.key}
+                      draggable
+                      onDragStart={() => handleDragStart(colIdx)}
+                      onDragOver={(e) => handleDragOver(e, colIdx)}
+                      onDrop={() => handleDrop(colIdx)}
+                      onDragEnd={handleDragEnd}
+                      className={cn(
+                        "cursor-grab select-none transition-colors",
+                        dragOverIndex === colIdx &&
+                          dragSourceRef.current !== colIdx &&
+                          "bg-primary/10",
+                      )}
+                    >
+                      <div className="flex items-center gap-1.5">
+                        <GripVerticalIcon className="size-3.5 shrink-0 text-muted-foreground" />
+                        <span>{col.label}</span>
+                      </div>
+                    </TableHead>
+                  ))}
+                </TableRow>
+              </TableHeader>
+
+              <TableBody>
+                {rows.map((row, rowIdx) => (
+                  <TableRow key={rowIdx}>
+                    {columns.map((col) => (
+                      <TableCell key={col.key} className="p-0">
+                        <input
+                          type="text"
+                          value={row[col.key] ?? ""}
+                          onChange={(e) =>
+                            onRowChange?.(rowIdx, col.key, e.target.value)
+                          }
+                          className={cn(
+                            "w-full bg-transparent px-4 py-3 text-sm text-foreground",
+                            "focus:outline-none focus:ring-1 focus:ring-inset focus:ring-primary",
+                          )}
+                        />
+                      </TableCell>
+                    ))}
+                  </TableRow>
+                ))}
+              </TableBody>
+            </Table>
+          </div>
+        )}
+
+        <DialogFooter>
+          <Button
+            variant="outline"
+            onClick={() => onOpenChange(false)}
+            disabled={isImporting}
+          >
+            Cancel
+          </Button>
+          <Button disabled={!canImport} onClick={onImport}>
+            Import
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+}

package/src/components/ui/financial-drawers.tsx

@@ -194,7 +194,7 @@ export function SummaryReportDrawer({
           </div>
 
           {/* ── Scrollable content viewport ── */}
-          <div className="min-h-0 flex-1 overflow-y-auto overflow-x-hidden overscroll-contain [-ms-overflow-style:none] [scrollbar-width:none] [&::-webkit-scrollbar]:hidden">
+          <div className="min-h-0 flex-1 overflow-y-auto overscroll-contain [-ms-overflow-style:none] [scrollbar-width:none] [&::-webkit-scrollbar]:hidden">
             {isLoading ? (
               <div className="flex h-full min-h-[200px] items-center justify-center py-12">
                 <Spinner size="xl" className="text-primary" />