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

12
src/components/app-sidebar.tsx
View File

@@ -1,6 +1,6 @@
'use client';
import * as React from 'react';
import { LayoutDashboard, Plus, Layers, Package, Milestone } from 'lucide-react';
import { LayoutDashboard, Plus, Layers, Package, Milestone, ShieldCheck, Users } from 'lucide-react';
import { NavUser } from '@/components/nav-user';
import { ROUTES } from '@/utils/routes';
import {
@@ -47,6 +47,16 @@ const data = {
url: ROUTES.CHAINAGE,
icon: Milestone,
},
{
title: 'Roles',
url: ROUTES.ROLES,
icon: ShieldCheck,
},
{
title: 'Users',
url: ROUTES.USERS,
icon: Users,
},
],
};

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>
);

53
src/components/data-table/Header/index.tsx
View File

@@ -1,45 +1,40 @@
'use client';
import React from 'react';
import { Button } from '@/components/ui/button';
import SearchBar from './SearchBar';
import { FolderPlus, Settings2, SlidersHorizontal } from 'lucide-react';
import { Badge } from '@/components/ui/badge';
import { Plus } from 'lucide-react';
interface TopHeaderProps {
title?: string;
itemCount?: number;
onAddNew?: () => void;
addButtonText?: string;
toolbar?: React.ReactNode;
}
const TopHeader = ({ title, itemCount, onAddNew, addButtonText = 'Add New' }: TopHeaderProps) => {
const TopHeader = ({
title,
itemCount,
onAddNew,
addButtonText = 'Add New',
toolbar,
}: TopHeaderProps) => {
return (
<div className="flex flex-col gap-1 p-3 w-full">
{/* Connected Summary Block */}
<div className="w-full bg-muted/10 border border-border/50 rounded-lg p-4 flex items-center">
<div className="flex items-center gap-2 text-muted-foreground font-semibold tracking-tight">
<span className="text-base text-foreground/80">Total {title || 'Items'} :</span>
<span className="text-primary font-bold text-lg">{itemCount || 0}</span>
<div className="space-y-4">
{(title || onAddNew) && (
<div className="flex flex-col gap-3 md:flex-row md:items-center md:justify-between">
<div>
{title ? <h2 className="text-base font-semibold">{title}</h2> : null}
<p className="text-sm text-muted-foreground">Total {itemCount ?? 0}</p>
</div>
{onAddNew ? (
<Button onClick={onAddNew}>
<Plus className="mr-2 size-4" />
{addButtonText}
</Button>
) : null}
</div>
</div>
<div className="flex items-center justify-between gap-4">
{/* Search Bar Hidden for now as per requirement */}
{/* <div className="flex w-full max-w-sm">
<SearchBar />
</div> */}
{/* Add New Button moved to PageHeader */}
{/* {onAddNew && (
<Button
onClick={onAddNew}
className="h-11 px-6 rounded-xl bg-primary hover:bg-primary/90 text-primary-foreground font-bold text-sm shadow-md shadow-primary/20 transition-all hover:-translate-y-0.5"
>
<FolderPlus className="mr-2 h-5 w-5" />
{addButtonText}
</Button>
)} */}
</div>
)}
{toolbar ? <div>{toolbar}</div> : null}
</div>
);
};

7
src/components/data-table/TableHeader.tsx
View File

@@ -2,21 +2,20 @@
import { flexRender } from '@tanstack/react-table';
import { TableHead, TableHeader as ShadTableHeader, TableRow } from '@/components/ui/table';
import { Table } from '@tanstack/react-table';
import { ChevronDown, ChevronsUpDown } from 'lucide-react';
const TableHeader = <TData, _>({ table }: { table: Table<TData> }) => {
return (
<ShadTableHeader>
{table.getHeaderGroups().map((headerGroup) => (
<TableRow key={headerGroup.id} className="hover:bg-transparent border-b border-border/30">
<TableRow key={headerGroup.id}>
{headerGroup.headers.map((header) => {
return (
<TableHead
key={header.id}
className="h-14 px-6 text-muted-foreground border-b border-border/30 font-medium text-sm"
className="h-10 px-2 text-foreground"
>
{header.isPlaceholder ? null : (
<div className="flex items-center gap-2 group cursor-pointer select-none">
<div className="flex items-center gap-2">
{flexRender(header.column.columnDef.header, header.getContext())}
</div>
)}

69
src/components/data-table/index.tsx
View File

@@ -13,12 +13,11 @@ import {
import { Table, TableBody, TableCell, TableRow } from '@/components/ui/table';
import { Skeleton } from '@/components/ui/skeleton';
import { Button } from '@/components/ui/button';
import { Edit3, MoreHorizontal, Trash2 } from 'lucide-react';
import { Edit3, Trash2 } from 'lucide-react';
import TopHeader from './Header';
import TableHeader from './TableHeader';
import { TableFooter } from './Footer';
import { cn } from '@/lib/utils';
export interface DataTableProps<TData, TValue> {
columns: ColumnDef<TData, TValue>[];
@@ -29,6 +28,9 @@ export interface DataTableProps<TData, TValue> {
isLoading?: boolean;
onEdit?: (item: TData) => void;
onDelete?: (item: TData) => void;
toolbar?: React.ReactNode;
emptyTitle?: string;
emptyDescription?: string;
pagination?: {
skip: number;
limit: number;
@@ -47,6 +49,9 @@ export function DataTable<TData, TValue>({
isLoading = false,
onEdit,
onDelete,
toolbar,
emptyTitle = 'No results found.',
emptyDescription = 'Try adjusting your filters or search terms.',
pagination,
}: DataTableProps<TData, TValue>) {
const [rowSelection, setRowSelection] = React.useState({});
@@ -58,32 +63,34 @@ export function DataTable<TData, TValue>({
if (onEdit || onDelete) {
cols.push({
id: 'actions',
header: () => <div className="text-right px-4">Action</div>,
header: () => <div className="text-right">Actions</div>,
cell: ({ row }) => {
const item = row.original;
return (
<div className="flex justify-end gap-3 px-4">
<div className="flex justify-end gap-2">
{onEdit && (
<button
<Button
variant="outline"
size="sm"
onClick={(e) => {
e.stopPropagation();
onEdit(item);
}}
className="flex items-center justify-center h-8 w-8 rounded-md text-primary hover:bg-foreground/10 transition-all duration-200"
>
<Edit3 className="h-4.5 w-4.5" />
</button>
<Edit3 className="size-4" />
</Button>
)}
{onDelete && (
<button
<Button
variant="outline"
size="sm"
onClick={(e) => {
e.stopPropagation();
onDelete(item);
}}
className="flex items-center justify-center h-8 w-8 rounded-md text-red-500 hover:bg-foreground/10 transition-all duration-200"
>
<Trash2 className="h-4.5 w-4.5" />
</button>
<Trash2 className="size-4 text-destructive" />
</Button>
)}
</div>
);
@@ -126,31 +133,28 @@ export function DataTable<TData, TValue>({
});
return (
<div className="rounded-xl border border-border/50 bg-muted/10 p-1 space-y-6">
<div className="bg-background/40 dark:bg-background/60 backdrop-blur-xl rounded-xl border border-border/50 overflow-hidden transition-all duration-300">
<section className="space-y-4 rounded-lg border bg-card p-4">
<TopHeader
title={title}
itemCount={data.length}
itemCount={pagination?.totalItems ?? data.length}
onAddNew={onAddNew}
addButtonText={addButtonText}
toolbar={toolbar}
/>
<div className="px-6 py-2">
<div>
<Table
containerClassName="max-h-[calc(100vh-300px)] overflow-y-auto scrollbar-thin"
containerClassName="max-h-[calc(100vh-300px)] overflow-y-auto"
className="border-separate border-spacing-0"
>
<TableHeader table={table} />
<TableBody>
{isLoading ? (
Array.from({ length: 5 }).map((_, idx) => (
<TableRow
key={idx}
className="border-b border-border/30 last:border-0 hover:bg-muted/5"
>
<TableRow key={idx}>
{columns.map((_, colIdx) => (
<TableCell key={colIdx} className="px-6 py-6 border-b border-border/30">
<Skeleton className="h-4 w-full max-w-[140px] opacity-20" />
<TableCell key={colIdx}>
<Skeleton className="h-4 w-full max-w-[140px]" />
</TableCell>
))}
</TableRow>
@@ -160,13 +164,9 @@ export function DataTable<TData, TValue>({
<TableRow
key={row.id}
data-state={row.getIsSelected() && 'selected'}
className="group hover:bg-muted/10 transition-colors"
>
{row.getVisibleCells().map((cell) => (
<TableCell
key={cell.id}
className="px-4 py-3 border-b border-border/50 align-middle text-muted-foreground text-sm font-medium group-hover:text-foreground"
>
<TableCell key={cell.id}>
{flexRender(cell.column.columnDef.cell, cell.getContext())}
</TableCell>
))}
@@ -174,12 +174,10 @@ export function DataTable<TData, TValue>({
))
) : (
<TableRow>
<TableCell colSpan={columns.length} className="h-48 text-center">
<TableCell colSpan={columns.length} className="h-28 text-center">
<div className="flex flex-col items-center justify-center text-muted-foreground gap-1">
<p className="font-bold text-sm tracking-tight">No results found.</p>
<p className="text-xs opacity-60 font-medium">
Try adjusting your filters or search terms.
</p>
<p className="text-sm font-medium">{emptyTitle}</p>
<p className="text-xs">{emptyDescription}</p>
</div>
</TableCell>
</TableRow>
@@ -187,8 +185,7 @@ export function DataTable<TData, TValue>({
</TableBody>
</Table>
</div>
<TableFooter table={table} />
</div>
</div>
<TableFooter table={table} totalItems={pagination?.totalItems ?? data.length} />
</section>
);
}