santasri.pachhal/road-monitoring-ui
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: add role user modules and shared table updates

Browse Source
This commit is contained in:
santasri.pachhal
2026-06-15 20:07:06 +05:30
parent 8d4ff49633
commit bea47d29d5
21 changed files with 1245 additions and 133 deletions
Download Patch File Download Diff File Expand all files Collapse all files

68
src/components/data-table/Footer/index.tsx
View File

@@ -1,70 +1,38 @@
'use client';
import { Table } from '@tanstack/react-table';
import {
Select,
SelectContent,
SelectItem,
SelectTrigger,
SelectValue,
} from '@/components/ui/select';
import { Button } from '@/components/ui/button';
import { ChevronLeft, ChevronRight } from 'lucide-react';
export function TableFooter<TData>({ table }: { table: Table<TData> }) {
export function TableFooter<TData>({
table,
totalItems,
}: {
table: Table<TData>;
totalItems: number;
}) {
const rows = table.getRowModel().rows.length;
return (
<div className="flex items-center justify-between px-6 py-4 border-t border-border/40 bg-muted/5">
<div className="flex items-center gap-6">
<div className="flex items-center space-x-2">
<p className="text-[11px] font-bold text-muted-foreground uppercase tracking-wider">
Rows per page
</p>
<Select
value={`${table.getState().pagination.pageSize}`}
onValueChange={(value) => {
table.setPageSize(Number(value));
}}
>
<SelectTrigger className="h-8 w-[70px] bg-transparent border-border/40 text-xs font-semibold">
<SelectValue placeholder={table.getState().pagination.pageSize} />
</SelectTrigger>
<SelectContent side="top" className="min-w-[70px]">
{[10, 20, 30, 40, 50].map((pageSize) => (
<SelectItem key={pageSize} value={`${pageSize}`} className="text-xs">
{pageSize}
</SelectItem>
))}
</SelectContent>
</Select>
</div>
</div>
<div className="flex items-center gap-8">
<div className="flex items-center text-[11px] font-bold text-muted-foreground uppercase tracking-widest gap-1">
<span className="text-foreground">Page {table.getState().pagination.pageIndex + 1}</span>
<span className="opacity-40">/</span>
<span>{table.getPageCount() || 1}</span>
</div>
<div className="flex items-center space-x-2">
<div className="flex items-center justify-between gap-3 text-sm text-muted-foreground">
<span>
Showing {rows} of {totalItems}
</span>
<div className="flex gap-2">
<Button
variant="outline"
className="h-8 w-8 p-0 border-border/40 bg-transparent hover:bg-muted/50 transition-colors"
size="sm"
onClick={() => table.previousPage()}
disabled={!table.getCanPreviousPage()}
>
<span className="sr-only">Go to previous page</span>
<ChevronLeft className="h-4 w-4 opacity-70" />
Previous
</Button>
<Button
variant="outline"
className="h-8 w-8 p-0 border-border/40 bg-transparent hover:bg-muted/50 transition-colors"
size="sm"
onClick={() => table.nextPage()}
disabled={!table.getCanNextPage()}
>
<span className="sr-only">Go to next page</span>
<ChevronRight className="h-4 w-4 opacity-70" />
Next
</Button>
</div>
</div>
</div>
);