diff --git a/src/components/BoxDisplay.tsx b/src/components/BoxDisplay.tsx new file mode 100644 index 0000000..2a423cb --- /dev/null +++ b/src/components/BoxDisplay.tsx @@ -0,0 +1,170 @@ +import { cn } from '@/lib/utils'; +import { m } from '@/paraglide/messages'; +import { + CirclesThreeIcon, + HourglassIcon, + TagIcon, +} from '@phosphor-icons/react'; +import { + ColumnDef, + flexRender, + getCoreRowModel, + useReactTable, +} from '@tanstack/react-table'; +import { Label } from '@ui/label'; +import { + Select, + SelectContent, + SelectItem, + SelectTrigger, + SelectValue, +} from '@ui/select'; +import BoxIcon from './boxes/box-icon'; +import Pagination from './Pagination'; + +interface BoxDisplayProps { + columns: ColumnDef[]; + data: TData[]; + page: number; + setPage: (page: number) => void; + limit: number; + setLimit: (page: number) => void; + pagination: { + currentPage: number; + totalPage: number; + totalItem: number; + }; +} + +const BoxDisplay = ({ + columns, + data, + page, + setPage, + limit, + setLimit, + pagination, +}: BoxDisplayProps) => { + const table = useReactTable({ + data, + columns, + getCoreRowModel: getCoreRowModel(), + }); + + return ( + <> +
+ {table.getRowModel().rows?.length ? ( + table.getRowModel().rows.map((row) => ( +
+
+ +
+
+ {row.getVisibleCells().map((cell) => { + if (cell.column.columnDef.id === 'actions') { + return ( +
+ {flexRender( + cell.column.columnDef.cell, + cell.getContext(), + )} +
+ ); + } + return ( +
+ {cell.column.columnDef.id === 'name' && ( + + )} + {cell.column.columnDef.id === 'quantity' && ( + + )} + {cell.column.columnDef.id === 'time' && ( + + )} + {flexRender( + cell.column.columnDef.cell, + cell.getContext(), + )} +
+ ); + })} +
+
+ )) + ) : ( +
No Results
+ )} +
+
+
+ + {m.common_page_show({ + count: pagination.totalItem, + start: (pagination.currentPage - 1) * 10 + 1, + end: Math.min(pagination.currentPage * 10, pagination.totalItem), + })} + +
+
+
+ + +
+ setPage(newPage)} + /> +
+
+ + ); +}; + +export default BoxDisplay; diff --git a/src/components/boxes/box-columns.tsx b/src/components/boxes/box-columns.tsx index 9ccf043..c4d781a 100644 --- a/src/components/boxes/box-columns.tsx +++ b/src/components/boxes/box-columns.tsx @@ -7,6 +7,7 @@ export const boxColumns: ColumnDef[] = [ { accessorKey: 'name', header: m.boxes_page_ui_table_header_name(), + id: 'name', meta: { thClass: 'w-1/6', mLabel: m.boxes_page_ui_table_header_name(), @@ -15,6 +16,7 @@ export const boxColumns: ColumnDef[] = [ { accessorFn: (row) => row._count.items, header: m.boxes_page_ui_table_header_item_count(), + id: 'quantity', meta: { thClass: 'w-1/6', mLabel: m.boxes_page_ui_table_header_item_count(), @@ -23,6 +25,7 @@ export const boxColumns: ColumnDef[] = [ { accessorKey: 'createdAt', header: m.boxes_page_ui_table_header_create_at(), + id: 'time', meta: { thClass: 'w-2/6', mLabel: m.boxes_page_ui_table_header_create_at(), diff --git a/src/components/boxes/box-icon.tsx b/src/components/boxes/box-icon.tsx new file mode 100644 index 0000000..1a25e66 --- /dev/null +++ b/src/components/boxes/box-icon.tsx @@ -0,0 +1,90 @@ +const BoxIcon = () => { + return ( + + + + + + + + + + + + + + + + + + + + + + + + + + + ); +}; + +export default BoxIcon; diff --git a/src/routes/(app)/(auth)/kanri/boxes.tsx b/src/routes/(app)/(auth)/kanri/boxes.tsx index bccd987..577f64f 100644 --- a/src/routes/(app)/(auth)/kanri/boxes.tsx +++ b/src/routes/(app)/(auth)/kanri/boxes.tsx @@ -1,6 +1,6 @@ +import BoxDisplay from '@/components/BoxDisplay'; import { boxColumns } from '@/components/boxes/box-columns'; import CreateBoxAction from '@/components/boxes/create-box-dialog'; -import DataTable from '@/components/DataTable'; import SearchInput from '@/components/ui/search-input'; import { Skeleton } from '@/components/ui/skeleton'; import useDebounced from '@/hooks/use-debounced'; @@ -65,7 +65,7 @@ function RouteComponent() { {data && ( - Hello "/(app)/(auth)/kanri/items"! + return ( +
+
+ Hello "/(app)/(auth)/kanri/items"! +
+
+ ); }