David/JEISA-WEBAPP
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

[dyad] Improving mobile responsiveness of Book Out Items screen - wrote 2 file(s)

Browse source
This commit is contained in:
[dyad] 2025-09-21 21:17:41 +02:00
parent 36bfc1c599
commit 21a79ca525
2 changed files with 100 additions and 49 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

147
src/components/book-out/BookOutDataTable.tsx
View file

@ -6,6 +6,7 @@ import {
flexRender,
getCoreRowModel,
useReactTable,
VisibilityState,
} from "@tanstack/react-table"
import {
@ -17,6 +18,13 @@ import {
TableRow,
} from "@/components/ui/table"
import { Button } from "@/components/ui/button"
import {
DropdownMenu,
DropdownMenuCheckboxItem,
DropdownMenuContent,
DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu"
import { Columns } from "lucide-react"
interface BookOutRecord {
id: string
@ -36,65 +44,108 @@ export function BookOutDataTable<TData, TValue>({
columns,
data,
}: BookOutDataTableProps<TData, TValue>) {
const [columnVisibility, setColumnVisibility] = React.useState<VisibilityState>(() => {
if (typeof window !== 'undefined' && window.innerWidth < 768) {
return {
sku: false,
quantity: false,
};
}
return {};
});
const table = useReactTable({
data,
columns,
getCoreRowModel: getCoreRowModel(),
state: {
columnVisibility,
},
onColumnVisibilityChange: setColumnVisibility,
})
return (
<div className="rounded-md border bg-white">
<Table>
<TableHeader>
{table.getHeaderGroups().map((headerGroup) => (
<TableRow key={headerGroup.id}>
{headerGroup.headers.map((header) => (
<TableHead key={header.id}>
{header.isPlaceholder
? null
: flexRender(header.column.columnDef.header, header.getContext())}
</TableHead>
))}
</TableRow>
))}
</TableHeader>
<TableBody>
{table.getRowModel().rows.length ? (
table.getRowModel().rows.map((row) => {
const record = row.original as BookOutRecord
// Calculate total quantity if quantity is array
const totalQuantity = Array.isArray(record.quantity)
? record.quantity.reduce((sum, q) => sum + q, 0)
: record.quantity
<div>
<div className="rounded-md border bg-white">
<Table>
<TableHeader>
{table.getHeaderGroups().map((headerGroup) => (
<TableRow key={headerGroup.id}>
{headerGroup.headers.map((header) => (
<TableHead key={header.id}>
{header.isPlaceholder
? null
: flexRender(header.column.columnDef.header, header.getContext())}
</TableHead>
))}
</TableRow>
))}
</TableHeader>
<TableBody>
{table.getRowModel().rows.length ? (
table.getRowModel().rows.map((row) => {
const record = row.original as BookOutRecord
// Calculate total quantity if quantity is array
const totalQuantity = Array.isArray(record.quantity)
? record.quantity.reduce((sum, q) => sum + q, 0)
: record.quantity
return (
<TableRow key={row.id} className="hover:bg-gray-50">
{row.getVisibleCells().map((cell) => {
if (cell.column.id === "quantity") {
return (
<TableRow key={row.id} className="hover:bg-gray-50">
{row.getVisibleCells().map((cell) => {
if (cell.column.id === "quantity") {
return (
<TableCell key={cell.id} className="text-sm">
{totalQuantity}
</TableCell>
)
}
return (
<TableCell key={cell.id}>
{totalQuantity}
<TableCell key={cell.id} className="text-sm">
{flexRender(cell.column.columnDef.cell, cell.getContext())}
</TableCell>
)
}
return (
<TableCell key={cell.id}>
{flexRender(cell.column.columnDef.cell, cell.getContext())}
</TableCell>
)
})}
</TableRow>
)
})
) : (
<TableRow>
<TableCell colSpan={columns.length} className="h-24 text-center">
No results.
</TableCell>
</TableRow>
)}
</TableBody>
</Table>
})}
</TableRow>
)
})
) : (
<TableRow>
<TableCell colSpan={columns.length} className="h-24 text-center">
No results.
</TableCell>
</TableRow>
)}
</TableBody>
</Table>
</div>
<div className="flex items-center justify-end space-x-2 py-4">
<DropdownMenu>
<DropdownMenuTrigger asChild>
<Button variant="outline" size="sm">
Toggle Columns
<Columns className="ml-2 h-4 w-4" />
</Button>
</DropdownMenuTrigger>
<DropdownMenuContent align="end">
{table
.getAllColumns()
.filter(column => column.getCanHide())
.map(column => {
return (
<DropdownMenuCheckboxItem
key={column.id}
className="capitalize"
checked={column.getIsVisible()}
onCheckedChange={column.toggleVisibility}
>
{column.id}
</DropdownMenuCheckboxItem>
)
})}
</DropdownMenuContent>
</DropdownMenu>
</div>
</div>
)
}

2
src/components/book-out/BookOutForm.tsx
View file

@ -219,7 +219,7 @@ export function BookOutForm({ setOpen, refreshData }: BookOutFormProps) {
<div className="border p-4 rounded-md">
<h3 className="text-lg font-semibold mb-4">Items to Book Out</h3>
{form.getValues("items").map((item, index) => (
<div key={index} className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4 mb-4 items-center">
<div key={index} className="grid grid-cols-1 sm:grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4 mb-4 items-center">
<FormField
control={form.control}
name={`items.${index}.itemName`}