Shadcn conversion, select header

inventory/src/lib/react-spreadsheet-import/src/steps/SelectHeaderStep/SelectHeaderStep.tsx

@@ -1,10 +1,8 @@
 import { useCallback, useState } from "react"
-import { Heading, ModalBody, useStyleConfig, Box } from "@chakra-ui/react"
 import { SelectHeaderTable } from "./components/SelectHeaderTable"
-import { ContinueButton } from "../../components/ContinueButton"
 import { useRsi } from "../../hooks/useRsi"
-import type { themeOverrides } from "../../theme"
 import type { RawData } from "../../types"
+import { Button } from "@/components/ui/button"
 
 type SelectHeaderProps = {
   data: RawData[]
@@ -13,9 +11,6 @@ type SelectHeaderProps = {
 }
 
 export const SelectHeaderStep = ({ data, onContinue, onBack }: SelectHeaderProps) => {
-  const styles = useStyleConfig(
-    "SelectHeaderStep",
-  ) as (typeof themeOverrides)["components"]["SelectHeaderStep"]["baseStyle"]
   const { translations } = useRsi()
   const [selectedRows, setSelectedRows] = useState<ReadonlySet<number>>(new Set([0]))
   const [isLoading, setIsLoading] = useState(false)
@@ -30,18 +25,37 @@ export const SelectHeaderStep = ({ data, onContinue, onBack }: SelectHeaderProps
   }, [onContinue, data, selectedRows])
 
   return (
-    <>
-      <ModalBody pb={0}>
-        <Heading {...styles.heading}>{translations.selectHeaderStep.title}</Heading>
-        <SelectHeaderTable data={data} selectedRows={selectedRows} setSelectedRows={setSelectedRows} />
-      </ModalBody>
-      <ContinueButton
-        onContinue={handleContinue}
-        onBack={onBack}
-        title={translations.selectHeaderStep.nextButtonTitle}
-        backTitle={translations.selectHeaderStep.backButtonTitle}
-        isLoading={isLoading}
+    <div className="flex h-full flex-col">
+      <div className="flex-1 overflow-hidden">
+        <div className="px-8 py-6">
+          <div className="mb-8">
+            <h2 className="text-3xl font-semibold text-foreground">
+              {translations.selectHeaderStep.title}
+            </h2>
+          </div>
+          <SelectHeaderTable 
+            data={data} 
+            selectedRows={selectedRows} 
+            setSelectedRows={setSelectedRows} 
           />
-    </>
+        </div>
+      </div>
+      <div className="border-t bg-muted px-8 py-4 mt-5">
+        <div className="flex items-center justify-between">
+          {onBack && (
+            <Button variant="outline" onClick={onBack}>
+              {translations.selectHeaderStep.backButtonTitle}
+            </Button>
+          )}
+          <Button 
+            className="ml-auto"
+            disabled={isLoading}
+            onClick={handleContinue}
+          >
+            {translations.selectHeaderStep.nextButtonTitle}
+          </Button>
+        </div>
+      </div>
+    </div>
   )
 }

inventory/src/lib/react-spreadsheet-import/src/steps/SelectHeaderStep/components/SelectHeaderTable.tsx

@@ -1,7 +1,15 @@
 import { useMemo } from "react"
-import { Table as DataTable, type Column } from "../../../components/Table"
-import { generateSelectionColumns } from "./columns"
 import type { RawData } from "../../../types"
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "@/components/ui/table"
+import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group"
+import { Label } from "@/components/ui/label"
 import { cn } from "@/lib/utils"
 
 interface Props {
@@ -10,51 +18,88 @@ interface Props {
   setSelectedRows: (rows: ReadonlySet<number>) => void
 }
 
-type TableRow = string[];
-
 export const SelectHeaderTable = ({ data, selectedRows, setSelectedRows }: Props) => {
-  const columns = useMemo(() => generateSelectionColumns(data), [data])
+  const columns = useMemo(() => {
+    const longestRowLength = data.reduce((acc, curr) => (acc > curr.length ? acc : curr.length), 0)
+    return Array.from(Array(longestRowLength), (_, index) => ({
+      key: index.toString(),
+      name: `Column ${index + 1}`,
+    }))
+  }, [data])
 
   if (!data || data.length === 0) {
     return (
       <div className="p-4">
         <p className="text-sm text-muted-foreground">No data available to select headers from.</p>
       </div>
-    );
+    )
   }
 
+  const selectedRowIndex = Array.from(selectedRows)[0]
+  const gridTemplateColumns = `60px repeat(${columns.length}, minmax(150px, 300px))`
+
   return (
-    <div className={cn(
-      "relative h-[400px] rounded-md border",
-    )}>
+    <div className="rounded-md border p-3">
       <p className="mb-2 p-2 text-sm text-muted-foreground">
         Select the row that contains your column headers
       </p>
-      <div className="absolute inset-x-0 top-10 bottom-0">
-        <DataTable<TableRow>
-          rows={data as TableRow[]}
-          columns={columns as Column<TableRow>[]}
-          selectedRows={selectedRows}
-          rowKeyGetter={(row: TableRow) => data.indexOf(row)}
-          onSelectedRowsChange={(newRows: Set<number>) => {
-            console.log('Row selection changed:', newRows);
-            // allow selecting only one row
-            newRows.forEach((value: number) => {
-              if (!selectedRows.has(value)) {
-                setSelectedRows(new Set([value]))
-                return
-              }
-            })
-          }}
-          onRowClick={(row: TableRow) => {
-            console.log('Row clicked:', row);
-            setSelectedRows(new Set([data.indexOf(row)]))
-          }}
-          className="rdg-static"
-          rowHeight={45}
-          headerRowHeight={45}
-          style={{ height: '100%' }}
-        />
+      <div className="h-[calc(100vh-27rem)] overflow-auto">
+        <Table className="relative w-full" style={{ tableLayout: 'fixed' }}>
+          <TableHeader>
+            <TableRow className="grid" style={{ gridTemplateColumns }}>
+              <TableHead className="sticky top-0 z-20 bg-background overflow-hidden">
+                <div className="truncate">Select</div>
+              </TableHead>
+              {columns.map((column) => (
+                <TableHead 
+                  key={column.key}
+                  className="sticky top-0 z-20 bg-background overflow-hidden"
+                >
+                  <div className="truncate">
+                    {column.name}
+                  </div>
+                </TableHead>
+              ))}
+            </TableRow>
+          </TableHeader>
+          <TableBody>
+            <RadioGroup
+              value={selectedRowIndex?.toString()}
+              onValueChange={(value) => setSelectedRows(new Set([parseInt(value)]))}
+            >
+              {data.map((row, rowIndex) => (
+                <TableRow 
+                  key={rowIndex}
+                  className={cn(
+                    "grid",
+                    selectedRowIndex === rowIndex && "bg-muted",
+                    "group hover:bg-muted/50"
+                  )}
+                  style={{ gridTemplateColumns }}
+                >
+                  <TableCell className="overflow-hidden">
+                    <div className="flex items-center">
+                      <RadioGroupItem value={rowIndex.toString()} id={`row-${rowIndex}`} />
+                      <Label htmlFor={`row-${rowIndex}`} className="sr-only">
+                        Select as header row
+                      </Label>
+                    </div>
+                  </TableCell>
+                  {columns.map((column, colIndex) => (
+                    <TableCell 
+                      key={`${rowIndex}-${column.key}`}
+                      className="overflow-hidden"
+                    >
+                      <div className="truncate">
+                        {row[colIndex] || ""}
+                      </div>
+                    </TableCell>
+                  ))}
+                </TableRow>
+              ))}
+            </RadioGroup>
+          </TableBody>
+        </Table>
       </div>
     </div>
   )

inventory/src/lib/react-spreadsheet-import/src/steps/ValidationStep/ValidationStep.tsx

@@ -17,7 +17,6 @@ import {
   getCoreRowModel,
   type ColumnDef,
   flexRender,
-  type Row,
   type RowSelectionState,
 } from "@tanstack/react-table"
 import { Checkbox } from "@/components/ui/checkbox"
@@ -255,7 +254,7 @@ export const ValidationStep = <T extends string>({ initialData, file, onBack }:
   }
 
   return (
-    <div className="flex h-full flex-col">
+    <div className="flex h-[calc(100vh-9.5rem)] flex-col">
       <AlertDialog open={showSubmitAlert} onOpenChange={setShowSubmitAlert}>
         <AlertDialogPortal>
           <AlertDialogOverlay className="z-[1400]" />
@@ -355,7 +354,7 @@ export const ValidationStep = <T extends string>({ initialData, file, onBack }:
           </div>
         </div>
       </div>
-      <div className="mt-auto border-t bg-muted px-8 py-4">
+      <div className="border-t bg-muted px-8 py-4 mt-5">
         <div className="flex items-center justify-between">
           {onBack && (
             <Button variant="outline" onClick={onBack}>