@wealthx/shadcn 1.5.1 → 1.5.2

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

@@ -1,5 +1,11 @@
 import * as React from "react";
-import { AlertCircleIcon, FileTextIcon, GripVerticalIcon } from "lucide-react";
+import {
+  AlertCircleIcon,
+  CheckCircle2Icon,
+  CircleAlertIcon,
+  FileTextIcon,
+  Trash2Icon,
+} from "lucide-react";
 import {
   Dialog,
   DialogContent,
@@ -19,6 +25,19 @@ import {
   TableHeader,
   TableRow,
 } from "@/components/ui/table";
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+} from "@/components/ui/tooltip";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
 import { cn } from "@/lib/utils";
 
 // ---------------------------------------------------------------------------
@@ -32,12 +51,25 @@ export type FilePreviewState =
   | "error"
   | "importing";
 
+export type CsvRowStatus = "pending" | "success" | "failed";
+
 export interface CsvPreviewColumn {
   key: string;
   /** Display label shown in the column header. */
   label: string;
 }
 
+export interface CsvPreviewRow extends Record<string, string | undefined> {
+  _status?: CsvRowStatus;
+  /** Shown in a tooltip when status is "failed". */
+  _statusMessage?: string;
+}
+
+export interface StaffOption {
+  id: string;
+  name: string;
+}
+
 export interface FilePreviewDialogProps {
   open: boolean;
   onOpenChange: (open: boolean) => void;
@@ -48,22 +80,33 @@ export interface FilePreviewDialogProps {
   /** 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;
+  rows?: CsvPreviewRow[];
   /** Called when the user edits a cell inline. */
   onRowChange?: (rowIndex: number, key: string, value: string) => void;
+  /** Called when the user clicks the delete icon on a row. */
+  onRowDelete?: (rowIndex: number) => void;
   /** Called when the user clicks "Import". */
   onImport?: () => void;
+  /** Called when the user clicks "Cancel" during import. */
+  onCancelImport?: () => 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;
+  /** Rows per page for the preview table. Defaults to 10. */
+  pageSize?: number;
+  /**
+   * List of staff members available for assignment.
+   * When provided, a staff selector is rendered above the table.
+   * Import is blocked until a staff member is selected.
+   */
+  staffOptions?: StaffOption[];
+  /** Currently selected staff ID. */
+  selectedStaffId?: string;
+  /** Called when the user picks a staff member. */
+  onStaffSelect?: (staffId: string) => void;
   className?: string;
 }
 
@@ -126,20 +169,64 @@ function ErrorState({ message }: { message?: string }) {
   );
 }
 
-function ImportingState({ progress }: { progress: number }) {
+function ImportingState({
+  progress,
+  successCount,
+  failedCount,
+}: {
+  progress: number;
+  successCount: number;
+  failedCount: number;
+}) {
   return (
-    <div className="flex flex-col items-center gap-4 py-12">
+    <div className="flex flex-col items-center gap-4 py-8">
       <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 className="flex items-center justify-between text-xs text-muted-foreground">
+          <span>Importing… {progress}%</span>
+          {(successCount > 0 || failedCount > 0) && (
+            <span>
+              {successCount} success · {failedCount} failed
+            </span>
+          )}
+        </div>
       </div>
     </div>
   );
 }
 
+function RowStatusCell({ row }: { row: CsvPreviewRow }) {
+  const { _status, _statusMessage } = row;
+
+  if (_status === "success") {
+    return (
+      <div className="flex items-center justify-center h-full px-2">
+        <CheckCircle2Icon className="size-4 text-success" />
+      </div>
+    );
+  }
+
+  if (_status === "failed") {
+    return (
+      <TooltipProvider>
+        <Tooltip>
+          <TooltipTrigger asChild>
+            <div className="flex items-center justify-center h-full px-2 cursor-default">
+              <CircleAlertIcon className="size-4 text-destructive" />
+            </div>
+          </TooltipTrigger>
+          {_statusMessage && (
+            <TooltipContent side="top">{_statusMessage}</TooltipContent>
+          )}
+        </Tooltip>
+      </TooltipProvider>
+    );
+  }
+
+  return null;
+}
+
 // ---------------------------------------------------------------------------
 // Main component
 // ---------------------------------------------------------------------------
@@ -152,43 +239,41 @@ export function FilePreviewDialog({
   errorMessage,
   columns = [],
   rows = [],
-  onColumnReorder,
   onRowChange,
+  onRowDelete,
   onImport,
+  onCancelImport,
   importProgress = 0,
   totalRows,
   validRows,
+  pageSize = 10,
+  staffOptions,
+  selectedStaffId,
+  onStaffSelect,
   className,
 }: FilePreviewDialogProps) {
-  // Drag-and-drop state for column reordering
-  const dragSourceRef = React.useRef<number | null>(null);
-  const [dragOverIndex, setDragOverIndex] = React.useState<number | null>(null);
+  const [page, setPage] = React.useState(0);
 
-  function handleDragStart(index: number) {
-    dragSourceRef.current = index;
-  }
+  // Reset page when rows change
+  React.useEffect(() => {
+    setPage(0);
+  }, [rows.length]);
 
-  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 totalPages = Math.ceil(rows.length / pageSize);
+  const pagedRows = rows.slice(page * pageSize, (page + 1) * pageSize);
+  const pageStart = page * pageSize; // used for row index display
 
   const isImporting = state === "importing";
-  const canImport = state === "preview" && rows.length > 0;
+  const hasStaffSelector = !!staffOptions && staffOptions.length > 0;
+  // Import is blocked when staff selection is required but none is chosen yet
+  const canImport =
+    state === "preview" &&
+    rows.length > 0 &&
+    (!hasStaffSelector || !!selectedStaffId);
+
+  const successCount = rows.filter((r) => r._status === "success").length;
+  const failedCount = rows.filter((r) => r._status === "failed").length;
+  const hasStatus = rows.some((r) => r._status !== undefined);
 
   return (
     <Dialog open={open} onOpenChange={isImporting ? undefined : onOpenChange}>
@@ -208,83 +293,198 @@ export function FilePreviewDialog({
                 total
               </span>
             )}
+            {hasStatus && (
+              <span>
+                {successCount} success · {failedCount} failed
+              </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 === "importing" && (
+          <ImportingState
+            progress={importProgress}
+            successCount={successCount}
+            failedCount={failedCount}
+          />
+        )}
 
         {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>
+          <>
+            {/* Staff assignment — shown when caller provides staffOptions */}
+            {hasStaffSelector && (
+              <div className="flex flex-col gap-1">
+                <label className="text-label-medium text-foreground">
+                  Assign staff{" "}
+                  <span className="text-destructive" aria-hidden="true">
+                    *
+                  </span>
+                </label>
+                <Select
+                  value={selectedStaffId ?? ""}
+                  onValueChange={(id) => onStaffSelect?.(id)}
+                >
+                  <SelectTrigger className="w-full">
+                    <SelectValue placeholder="Select a staff member" />
+                  </SelectTrigger>
+                  <SelectContent>
+                    {staffOptions!.map((s) => (
+                      <SelectItem key={s.id} value={s.id}>
+                        {s.name}
+                      </SelectItem>
+                    ))}
+                  </SelectContent>
+                </Select>
+                <p className="text-xs text-muted-foreground">
+                  All contacts in this import will be assigned to the selected
+                  staff member.
+                </p>
+              </div>
+            )}
 
-              <TableBody>
-                {rows.map((row, rowIdx) => (
-                  <TableRow key={rowIdx}>
+            <div className="max-h-[360px] overflow-auto border border-border">
+              <Table>
+                <TableHeader className="sticky top-0 z-10 bg-muted/80 backdrop-blur-sm">
+                  <TableRow>
+                    {/* Index column */}
+                    <TableHead className="w-10 text-center select-none">
+                      #
+                    </TableHead>
                     {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>
+                      <TableHead key={col.key} className="select-none">
+                        {col.label}
+                      </TableHead>
                     ))}
+                    {/* Status column — only shown when any row has status */}
+                    {hasStatus && (
+                      <TableHead className="w-16 text-center select-none">
+                        Status
+                      </TableHead>
+                    )}
+                    {/* Delete column */}
+                    {onRowDelete && <TableHead className="w-10 select-none" />}
                   </TableRow>
-                ))}
-              </TableBody>
-            </Table>
-          </div>
+                </TableHeader>
+
+                <TableBody>
+                  {pagedRows.map((row, pageRowIdx) => {
+                    const absoluteIdx = pageStart + pageRowIdx;
+                    return (
+                      <TableRow
+                        key={absoluteIdx}
+                        className={cn(
+                          row._status === "failed" && "bg-destructive/5",
+                          row._status === "success" && "bg-success/5",
+                        )}
+                      >
+                        {/* Index cell */}
+                        <TableCell className="text-center text-xs text-muted-foreground select-none w-10">
+                          {absoluteIdx + 1}
+                        </TableCell>
+
+                        {/* Data cells */}
+                        {columns.map((col) => (
+                          <TableCell key={col.key} className="p-0">
+                            <input
+                              type="text"
+                              value={row[col.key] ?? ""}
+                              onChange={(e) =>
+                                onRowChange?.(
+                                  absoluteIdx,
+                                  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>
+                        ))}
+
+                        {/* Status cell */}
+                        {hasStatus && (
+                          <TableCell className="text-center w-16 p-0">
+                            <RowStatusCell row={row} />
+                          </TableCell>
+                        )}
+
+                        {/* Delete cell */}
+                        {onRowDelete && (
+                          <TableCell className="w-10 p-0 text-center">
+                            <Button
+                              variant="ghost"
+                              size="icon-sm"
+                              aria-label={`Delete row ${absoluteIdx + 1}`}
+                              onClick={() => onRowDelete(absoluteIdx)}
+                              className="text-muted-foreground hover:text-destructive"
+                            >
+                              <Trash2Icon className="size-3.5" />
+                            </Button>
+                          </TableCell>
+                        )}
+                      </TableRow>
+                    );
+                  })}
+                </TableBody>
+              </Table>
+            </div>
+
+            {/* Pagination */}
+            {totalPages > 1 && (
+              <div className="flex items-center justify-between text-xs text-muted-foreground pt-1">
+                <span>
+                  Showing {pageStart + 1}–
+                  {Math.min(pageStart + pageSize, rows.length)} of {rows.length}
+                </span>
+                <div className="flex items-center gap-1">
+                  <Button
+                    variant="outline"
+                    size="sm"
+                    onClick={() => setPage((p) => Math.max(0, p - 1))}
+                    disabled={page === 0}
+                  >
+                    Previous
+                  </Button>
+                  <span className="px-2">
+                    {page + 1} / {totalPages}
+                  </span>
+                  <Button
+                    variant="outline"
+                    size="sm"
+                    onClick={() =>
+                      setPage((p) => Math.min(totalPages - 1, p + 1))
+                    }
+                    disabled={page >= totalPages - 1}
+                  >
+                    Next
+                  </Button>
+                </div>
+              </div>
+            )}
+          </>
         )}
 
         <DialogFooter>
-          <Button
-            variant="outline"
-            onClick={() => onOpenChange(false)}
-            disabled={isImporting}
-          >
-            Cancel
-          </Button>
-          <Button disabled={!canImport} onClick={onImport}>
-            Import
-          </Button>
+          {isImporting ? (
+            <Button variant="outline" onClick={onCancelImport}>
+              Cancel Import
+            </Button>
+          ) : (
+            <>
+              <Button variant="outline" onClick={() => onOpenChange(false)}>
+                Cancel
+              </Button>
+              <Button disabled={!canImport} onClick={onImport}>
+                Import
+              </Button>
+            </>
+          )}
         </DialogFooter>
       </DialogContent>
     </Dialog>