231 lines
12 KiB
TypeScript
231 lines
12 KiB
TypeScript
"use client"
|
|
|
|
import { Plus, Edit2, Trash2, ChevronLeft, ChevronRight } from "lucide-react"
|
|
import { Button } from "@/components/ui/button"
|
|
import {
|
|
Tooltip,
|
|
TooltipContent,
|
|
TooltipProvider,
|
|
TooltipTrigger,
|
|
} from "@/components/ui/tooltip"
|
|
import { Skeleton } from "@/components/ui/skeleton"
|
|
|
|
interface Column<T> {
|
|
key: string
|
|
header: string
|
|
render?: (item: T) => React.ReactNode
|
|
}
|
|
|
|
interface DataTableProps<T> {
|
|
title: string
|
|
data: T[]
|
|
columns: Column<T>[]
|
|
onAddNew: () => void
|
|
addButtonText: string
|
|
isLoading?: boolean
|
|
onEdit?: (item: T) => void
|
|
onDelete?: (item: T) => void
|
|
pagination?: {
|
|
skip: number
|
|
limit: number
|
|
totalItems?: number
|
|
onPageChange: (newSkip: number) => void
|
|
onLimitChange: (newLimit: number) => void
|
|
}
|
|
}
|
|
|
|
export function DataTable<T extends Record<string, any>>({
|
|
title,
|
|
data,
|
|
columns,
|
|
onAddNew,
|
|
addButtonText,
|
|
isLoading = false,
|
|
onEdit,
|
|
onDelete,
|
|
pagination
|
|
}: DataTableProps<T>) {
|
|
const showActions = !!onEdit || !!onDelete;
|
|
const totalCols = columns.length + (showActions ? 1 : 0);
|
|
|
|
return (
|
|
<div>
|
|
{/* Header with Title and Add Button */}
|
|
<div className="flex justify-between items-center p-3 ">
|
|
<div className="flex items-center gap-3">
|
|
<h2 className="text-2xl font-bold tracking-tight heading-blue-gradient">{title}</h2>
|
|
<span className="badge-blue min-w-[28px] h-[28px] px-2">
|
|
{data.length}
|
|
</span>
|
|
</div>
|
|
<Button
|
|
onClick={onAddNew}
|
|
className="btn-blue-gradient rounded-full text-sm px-4 py-2.5 h-auto flex items-center gap-2"
|
|
>
|
|
<Plus className="h-4 w-4" />
|
|
{addButtonText}
|
|
</Button>
|
|
</div>
|
|
|
|
{/* Table */}
|
|
<div className="rounded-lg overflow-hidden">
|
|
<div className="overflow-auto max-h-[450px]">
|
|
<table className="min-w-full rounded-lg!">
|
|
<thead className="bg-white/40 backdrop-blur-md rounded-lg! sticky top-0 z-10">
|
|
<tr>
|
|
{columns.map((col) => (
|
|
<th
|
|
key={col.key}
|
|
className="px-4 py-3 text-slate-500 text-left font-bold"
|
|
>
|
|
{col.header}
|
|
</th>
|
|
))}
|
|
{showActions && (
|
|
<th className="px-4 py-3 text-slate-500 text-left font-bold">
|
|
Actions
|
|
</th>
|
|
)}
|
|
</tr>
|
|
</thead>
|
|
<tbody className="divide-y divide-gray-300 backdrop-blur-lg bg-white/70">
|
|
{isLoading ? (
|
|
Array.from({ length: 5 }).map((_, idx) => (
|
|
<tr key={idx} className="border-b border-gray-100 dark:border-gray-800">
|
|
{columns.map((col) => (
|
|
<td key={col.key} className="px-4 py-4">
|
|
<Skeleton className="h-4 w-full max-w-[120px]" />
|
|
</td>
|
|
))}
|
|
{showActions && (
|
|
<td className="px-4 py-4 text-right">
|
|
<div className="flex justify-end gap-2">
|
|
<Skeleton className="h-8 w-8 rounded-sm" />
|
|
<Skeleton className="h-8 w-8 rounded-sm" />
|
|
</div>
|
|
</td>
|
|
)}
|
|
</tr>
|
|
))
|
|
) : data.length === 0 ? (
|
|
<tr>
|
|
<td colSpan={totalCols} className="px-4 py-12 text-center">
|
|
<div className="flex flex-col items-center justify-center gap-2">
|
|
<div className="w-12 h-12 bg-gray-100 dark:bg-gray-800 rounded-full flex items-center justify-center mb-2">
|
|
<Plus className="w-6 h-6 text-gray-400" />
|
|
</div>
|
|
<p className="text-gray-500 dark:text-gray-400 font-medium">No data available</p>
|
|
<p className="text-xs text-gray-400 dark:text-gray-500">Click "{addButtonText}" to get started</p>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
) : (
|
|
data.map((item, idx) => (
|
|
<tr
|
|
key={idx}
|
|
className="hover:bg-blue-50/30 dark:hover:bg-blue-900/10 transition-colors duration-200"
|
|
>
|
|
{columns.map((col) => (
|
|
<td key={col.key} className="px-4 py-3 text-[13px] text-gray-700 dark:text-gray-300 font-medium">
|
|
{col.render ? col.render(item) : (item[col.key as keyof T] !== null && item[col.key as keyof T] !== undefined ? String(item[col.key as keyof T]) : "—")}
|
|
</td>
|
|
))}
|
|
{showActions && (
|
|
<td className="px-4 py-3 text-right">
|
|
<div className="flex justify-end gap-2">
|
|
<TooltipProvider>
|
|
{onEdit && (
|
|
<Tooltip>
|
|
<TooltipTrigger asChild>
|
|
<Button
|
|
variant="ghost"
|
|
size="icon"
|
|
onClick={() => onEdit(item)}
|
|
className="h-8 w-8 rounded-sm bg-white text-blue-500 border-slate-200! border hover:bg-blue-500 hover:text-white"
|
|
>
|
|
<Edit2 className="h-4 w-4" />
|
|
</Button>
|
|
</TooltipTrigger>
|
|
<TooltipContent side="top">
|
|
<p>Edit</p>
|
|
</TooltipContent>
|
|
</Tooltip>
|
|
)}
|
|
{onDelete && (
|
|
<Tooltip>
|
|
<TooltipTrigger asChild>
|
|
<Button
|
|
variant="ghost"
|
|
size="icon"
|
|
onClick={() => onDelete(item)}
|
|
className="h-8 w-8 rounded-sm border border-slate-200! bg-white text-red-400 hover:bg-red-400 hover:text-white"
|
|
>
|
|
<Trash2 className="h-4 w-4" />
|
|
</Button>
|
|
</TooltipTrigger>
|
|
<TooltipContent side="top">
|
|
<p>Delete</p>
|
|
</TooltipContent>
|
|
</Tooltip>
|
|
)}
|
|
</TooltipProvider>
|
|
</div>
|
|
</td>
|
|
)}
|
|
</tr>
|
|
))
|
|
)}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Pagination Controls */}
|
|
{pagination && (
|
|
<div className="flex items-center justify-between px-4 py-3 bg-white/40 backdrop-blur-md rounded-b-lg border-t border-gray-200 mt-1">
|
|
<div className="flex items-center gap-4">
|
|
<div className="flex items-center gap-2">
|
|
<span className="text-xs font-medium text-gray-500">Rows per page:</span>
|
|
<select
|
|
value={pagination.limit}
|
|
onChange={(e) => pagination.onLimitChange(Number(e.target.value))}
|
|
className="bg-transparent text-xs font-bold text-gray-700 outline-none cursor-pointer focus:ring-0"
|
|
>
|
|
{[10, 25, 50, 100].map((pageSize) => (
|
|
<option key={pageSize} value={pageSize}>
|
|
{pageSize}
|
|
</option>
|
|
))}
|
|
</select>
|
|
</div>
|
|
<span className="text-xs text-gray-500">
|
|
Showing {pagination.skip + 1} - {pagination.skip + data.length}
|
|
{pagination.totalItems !== undefined && ` of ${pagination.totalItems}`}
|
|
</span>
|
|
</div>
|
|
<div className="flex items-center gap-2">
|
|
<Button
|
|
variant="ghost"
|
|
size="icon"
|
|
disabled={pagination.skip === 0 || isLoading}
|
|
onClick={() => pagination.onPageChange(Math.max(0, pagination.skip - pagination.limit))}
|
|
className="h-8 w-8 p-0 rounded-md hover:bg-blue-50 text-gray-600 disabled:opacity-30"
|
|
>
|
|
<ChevronLeft className="h-4 w-4" />
|
|
</Button>
|
|
<Button
|
|
variant="ghost"
|
|
size="icon"
|
|
disabled={data.length < pagination.limit || isLoading}
|
|
onClick={() => pagination.onPageChange(pagination.skip + pagination.limit)}
|
|
className="h-8 w-8 p-0 rounded-md hover:bg-blue-50 text-gray-600 disabled:opacity-30"
|
|
>
|
|
<ChevronRight className="h-4 w-4" />
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
)
|
|
}
|