feat: add deals, tasks, and organizations pages with CRUD functionality

- Implemented DealsPage with deal creation, updating, and filtering features. - Added OrganizationsPage to manage and switch between organizations. - Created TasksPage for task management, including task creation and filtering. - Updated router to include new pages for navigation.
2025-12-01 13:46:56 +05:00
parent 4fe3d0480e
commit 8718df9686
21 changed files with 1917 additions and 1 deletions
@@ -0,0 +1,84 @@
+import { type ColumnDef, type SortingState, flexRender, getCoreRowModel, getSortedRowModel, useReactTable } from '@tanstack/react-table'
+import { Loader2 } from 'lucide-react'
+import { useMemo, useState } from 'react'
+
+import { Card } from '@/components/ui/card'
+import { Skeleton } from '@/components/ui/skeleton'
+import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/components/ui/table'
+
+interface DataTableProps<TData> {
+  columns: ColumnDef<TData, any>[]
+  data: TData[]
+  isLoading?: boolean
+  renderToolbar?: React.ReactNode
+  emptyState?: React.ReactNode
+  skeletonRows?: number
+}
+
+export const DataTable = <TData,>({ columns, data, isLoading = false, renderToolbar, emptyState, skeletonRows = 5 }: DataTableProps<TData>) => {
+  const [sorting, setSorting] = useState<SortingState>([])
+  const memoizedData = useMemo(() => data, [data])
+
+  const table = useReactTable({
+    data: memoizedData,
+    columns,
+    state: { sorting },
+    onSortingChange: setSorting,
+    getCoreRowModel: getCoreRowModel(),
+    getSortedRowModel: getSortedRowModel(),
+  })
+  const leafColumns = table.getAllLeafColumns()
+
+  return (
+    <Card className="space-y-4 border bg-card">
+      {renderToolbar}
+      <div className="overflow-hidden rounded-xl border bg-background">
+        <Table>
+          <TableHeader>
+            {table.getHeaderGroups().map((headerGroup) => (
+              <TableRow key={headerGroup.id} className="bg-muted/50">
+                {headerGroup.headers.map((header) => (
+                  <TableHead key={header.id} className="whitespace-nowrap">
+                    {header.isPlaceholder ? null : flexRender(header.column.columnDef.header, header.getContext())}
+                  </TableHead>
+                ))}
+              </TableRow>
+            ))}
+          </TableHeader>
+          <TableBody>
+            {isLoading ? (
+              [...Array(skeletonRows)].map((_, index) => (
+                <TableRow key={`skeleton-${index}`}>
+                  {leafColumns.map((column) => (
+                    <TableCell key={`${column.id}-${index}`}>
+                      <Skeleton className="h-4 w-full" />
+                    </TableCell>
+                  ))}
+                </TableRow>
+              ))
+            ) : table.getRowModel().rows.length ? (
+              table.getRowModel().rows.map((row) => (
+                <TableRow key={row.id} data-state={row.getIsSelected() && 'selected'}>
+                  {row.getVisibleCells().map((cell) => (
+                    <TableCell key={cell.id}>{flexRender(cell.column.columnDef.cell, cell.getContext())}</TableCell>
+                  ))}
+                </TableRow>
+              ))
+            ) : (
+              <TableRow>
+                <TableCell colSpan={columns.length} className="h-32 text-center text-sm text-muted-foreground">
+                  {emptyState ?? (
+                    <div className="flex flex-col items-center gap-2">
+                      <Loader2 className="h-5 w-5" />
+                      <p>Нет данных для отображения</p>
+                    </div>
+                  )}
+                </TableCell>
+              </TableRow>
+            )}
+          </TableBody>
+        </Table>
+      </div>
+    </Card>
+  )
+}