+
No data available to display.
) : (
diff --git a/src/components/shared/table-entity-delete-dialog.tsx b/src/components/shared/table-entity-delete-dialog.tsx
deleted file mode 100644
index f6afd13..0000000
--- a/src/components/shared/table-entity-delete-dialog.tsx
+++ /dev/null
@@ -1,170 +0,0 @@
-"use client";
-
-import { TrashIcon } from "@radix-ui/react-icons";
-import { type Row } from "@tanstack/react-table";
-import * as React from "react";
-import { toast } from "sonner";
-
-import { Icons } from "@/components/icons";
-import { Button } from "@/components/ui/button";
-import {
- Dialog,
- DialogClose,
- DialogContent,
- DialogDescription,
- DialogFooter,
- DialogHeader,
- DialogTitle,
- DialogTrigger,
-} from "@/components/ui/dialog";
-import {
- Drawer,
- DrawerClose,
- DrawerContent,
- DrawerDescription,
- DrawerFooter,
- DrawerHeader,
- DrawerTitle,
- DrawerTrigger,
-} from "@/components/ui/drawer";
-import { useMediaQuery } from "@/hooks/use-media-query";
-
-export interface RowEntitiesDeleteDialogProps<
- TEntity extends Record
,
-> extends React.ComponentPropsWithoutRef {
- entities: Row["original"][];
- showTrigger?: boolean;
- onSuccess?: () => void;
- deleteEntitiesFn: (ids: number[]) => Promise; // Pass a function to delete entities
- entityName: string; // Pass the entity name for the UI text
-}
-
-export function EntitiesDeleteDialog>({
- entities,
- showTrigger = true,
- onSuccess,
- deleteEntitiesFn,
- entityName,
- ...props
-}: RowEntitiesDeleteDialogProps) {
- const [isDeletePending, startDeleteTransition] = React.useTransition();
- const isDesktop = useMediaQuery("(min-width: 640px)");
-
- function onDelete() {
- startDeleteTransition(async () => {
- // Perform a runtime check to ensure each entity has an "id" field
- const ids = entities.map((entity) => {
- if ("id" in entity && typeof entity.id === "number") {
- return entity.id; // Return the ID if it exists and is a string
- } else {
- throw new Error(`Entity does not have a valid "id" field`);
- }
- });
-
- try {
- await deleteEntitiesFn(ids);
- } catch (error) {
- toast.error(
- `Cannot delete ${entityName}${entities.length > 1 ? "s" : ""}`,
- );
- return;
- }
-
- props.onOpenChange?.(false);
- toast.success(
- `${entityName}${entities.length > 1 ? "s are" : " is"} deleted`,
- );
- onSuccess?.();
- });
- }
-
- if (isDesktop) {
- return (
-
- );
- }
-
- return (
-
- {showTrigger ? (
-
-
-
- ) : null}
-
-
- Are you absolutely sure?
-
- This action cannot be undone. This will permanently delete your{" "}
- {entities.length}
- {entities.length === 1 ? ` ${entityName}` : ` ${entityName}s`} from
- our servers.
-
-
-
-
-
-
-
-
-
-
- );
-}
diff --git a/src/components/teams/team-dashboard-kpis.tsx b/src/components/teams/team-dashboard-kpis.tsx
index 9c49bf5..ce2ed04 100644
--- a/src/components/teams/team-dashboard-kpis.tsx
+++ b/src/components/teams/team-dashboard-kpis.tsx
@@ -45,7 +45,7 @@ const TeamDashboardTopSection = ({ teamId }: { teamId: number }) => {
{
title: "Total Tickets",
description: "All tickets received",
- value: totalTickets,
+ value: totalTickets ?? 0,
color: "text-gray-700 dark:text-gray-300",
link: "#",
tooltip: "View all team tickets.",
@@ -53,7 +53,7 @@ const TeamDashboardTopSection = ({ teamId }: { teamId: number }) => {
{
title: "Pending Tickets",
description: "Tickets yet to be addressed",
- value: pendingTickets,
+ value: pendingTickets ?? 0,
color: "text-yellow-500",
link: "#",
tooltip: "View tickets that are still pending.",
@@ -61,7 +61,7 @@ const TeamDashboardTopSection = ({ teamId }: { teamId: number }) => {
{
title: "Completed Tickets",
description: "Successfully resolved tickets",
- value: completedTickets,
+ value: completedTickets ?? 0,
color: "text-green-500",
link: "#",
tooltip: "View tickets that have been resolved.",
@@ -69,7 +69,7 @@ const TeamDashboardTopSection = ({ teamId }: { teamId: number }) => {
{
title: "Overdue Tickets",
description: "Tickets past their deadline",
- value: overDueTickets,
+ value: overDueTickets ?? 0,
color: "text-red-500",
link: "#",
tooltip: "View overdue tickets that need attention.",
diff --git a/src/components/ui/table/data-table-advanced-toolbar.tsx b/src/components/ui/table/data-table-advanced-toolbar.tsx
deleted file mode 100644
index 9368247..0000000
--- a/src/components/ui/table/data-table-advanced-toolbar.tsx
+++ /dev/null
@@ -1,94 +0,0 @@
-"use client";
-
-import { type Table } from "@tanstack/react-table";
-import * as React from "react";
-
-import { DataTableFilterList } from "@/components/ui/table/data-table-filter-list";
-import { DataTableSortList } from "@/components/ui/table/data-table-sort-list";
-import { DataTableViewOptions } from "@/components/ui/table/data-table-view-options";
-import { cn } from "@/lib/utils";
-import { DataTableAdvancedFilterField } from "@/types/table";
-
-interface DataTableAdvancedToolbarProps
- extends React.HTMLAttributes {
- /**
- * The table instance returned from useDataTable hook with pagination, sorting, filtering, etc.
- * @type Table
- */
- table: Table;
-
- /**
- * An array of filter field configurations for the data table.
- * @type DataTableAdvancedFilterField[]
- * @example
- * const filterFields = [
- * {
- * id: 'name',
- * label: 'Name',
- * type: 'text',
- * placeholder: 'Filter by name...'
- * },
- * {
- * id: 'status',
- * label: 'Status',
- * type: 'select',
- * options: [
- * { label: 'Active', value: 'active', count: 10 },
- * { label: 'Inactive', value: 'inactive', count: 5 }
- * ]
- * }
- * ]
- */
- filterFields: DataTableAdvancedFilterField[];
-
- /**
- * Debounce time (ms) for filter updates to enhance performance during rapid input.
- * @default 300
- */
- debounceMs?: number;
-
- /**
- * Shallow mode keeps query states client-side, avoiding server calls.
- * Setting to `false` triggers a network request with the updated querystring.
- * @default true
- */
- shallow?: boolean;
-}
-
-export function DataTableAdvancedToolbar({
- table,
- filterFields = [],
- debounceMs = 300,
- shallow = true,
- children,
- className,
- ...props
-}: DataTableAdvancedToolbarProps) {
- return (
-
-
-
-
-
-
- {children}
-
-
-
{title}
;
- }
-
- const ascValue = `${column.id}-asc`;
- const descValue = `${column.id}-desc`;
- const hideValue = `${column.id}-hide`;
-
- return (
-
-
-
-
-
- {option.icon && (
-
- )}
- {option.label}
- {option.count && (
-
- {option.count}
-
- )}
-
- );
- })}
-
- {selectedValues.size > 0 && (
- <>
-
-
- column?.setFilterValue(undefined)}
- className="justify-center text-center"
- >
- Clear filters
-
-
-
- )}
-
-
-
-
- );
-}
diff --git a/src/components/ui/table/data-table-filter-list.tsx b/src/components/ui/table/data-table-filter-list.tsx
deleted file mode 100644
index 6df83da..0000000
--- a/src/components/ui/table/data-table-filter-list.tsx
+++ /dev/null
@@ -1,767 +0,0 @@
-"use client";
-
-import { type Table } from "@tanstack/react-table";
-import {
- CalendarIcon,
- Check,
- ChevronsUpDown,
- GripVertical,
- ListFilter,
- Trash2,
-} from "lucide-react";
-import { customAlphabet } from "nanoid";
-import { parseAsStringEnum, useQueryState } from "nuqs";
-import * as React from "react";
-
-import { Badge } from "@/components/ui/badge";
-import { Button } from "@/components/ui/button";
-import { Calendar } from "@/components/ui/calendar";
-import {
- Command,
- CommandEmpty,
- CommandGroup,
- CommandInput,
- CommandItem,
- CommandList,
-} from "@/components/ui/command";
-import {
- FacetedFilter,
- FacetedFilterContent,
- FacetedFilterEmpty,
- FacetedFilterGroup,
- FacetedFilterInput,
- FacetedFilterItem,
- FacetedFilterList,
- FacetedFilterTrigger,
-} from "@/components/ui/faceted-filter";
-import { Input } from "@/components/ui/input";
-import {
- Popover,
- PopoverContent,
- PopoverTrigger,
-} from "@/components/ui/popover";
-import {
- Select,
- SelectContent,
- SelectItem,
- SelectTrigger,
- SelectValue,
-} from "@/components/ui/select";
-import {
- Sortable,
- SortableDragHandle,
- SortableItem,
-} from "@/components/ui/sortable";
-import { dataTableConfig } from "@/config/data-table";
-import { useDebouncedCallback } from "@/hooks/use-debounced-callback";
-import { getDefaultFilterOperator, getFilterOperators } from "@/lib/data-table";
-import { getFiltersStateParser } from "@/lib/parsers";
-import { cn, formatDate } from "@/lib/utils";
-import {
- DataTableAdvancedFilterField,
- Filter,
- FilterOperator,
- JoinOperator,
- StringKeyOf,
-} from "@/types/table";
-
-interface DataTableFilterListProps {
- table: Table;
- filterFields: DataTableAdvancedFilterField[];
- debounceMs: number;
- shallow?: boolean;
-}
-
-export function DataTableFilterList({
- table,
- filterFields,
- debounceMs,
- shallow,
-}: DataTableFilterListProps) {
- const id = React.useId();
- const [filters, setFilters] = useQueryState(
- "filters",
- getFiltersStateParser(table.getRowModel().rows[0]?.original)
- .withDefault([])
- .withOptions({
- clearOnDefault: true,
- shallow,
- }),
- );
-
- const [joinOperator, setJoinOperator] = useQueryState(
- "joinOperator",
- parseAsStringEnum(["and", "or"]).withDefault("and").withOptions({
- clearOnDefault: true,
- shallow,
- }),
- );
-
- const debouncedSetFilters = useDebouncedCallback(setFilters, debounceMs);
-
- function addFilter() {
- const filterField = filterFields[0];
-
- if (!filterField) return;
-
- void setFilters([
- ...filters,
- {
- id: filterField.id,
- value: "",
- type: filterField.type,
- operator: getDefaultFilterOperator(filterField.type),
- rowId: customAlphabet(
- "0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz",
- 6,
- )(),
- },
- ]);
- }
-
- function updateFilter({
- rowId,
- field,
- debounced = false,
- }: {
- rowId: string;
- field: Partial>;
- debounced?: boolean;
- }) {
- const updateFunction = debounced ? debouncedSetFilters : setFilters;
- updateFunction((prevFilters) => {
- const updatedFilters = prevFilters.map((filter) => {
- if (filter.rowId === rowId) {
- const updatedFilter = { ...filter, ...field };
- if ("type" in field) {
- updatedFilter.value = "";
- }
- if (field.operator === "isEmpty" || field.operator === "isNotEmpty") {
- updatedFilter.value = "";
- }
- return updatedFilter;
- }
- return filter;
- });
-
- return updatedFilters;
- });
- }
-
- function removeFilter(rowId: string) {
- const updatedFilters = filters.filter((filter) => filter.rowId !== rowId);
- void setFilters(updatedFilters);
- }
-
- function moveFilter(activeIndex: number, overIndex: number) {
- void setFilters((prevFilters) => {
- const newFilters = [...prevFilters];
- const [removed] = newFilters.splice(activeIndex, 1);
- if (!removed) return prevFilters;
- newFilters.splice(overIndex, 0, removed);
- return newFilters;
- });
- }
-
- function renderFilterInput({
- filter,
- inputId,
- }: {
- filter: Filter;
- inputId: string;
- }) {
- const filterField = filterFields.find((f) => f.id === filter.id);
-
- if (!filterField) return null;
-
- if (filter.operator === "isEmpty" || filter.operator === "isNotEmpty") {
- return (
-
- );
- }
-
- switch (filter.type) {
- case "text":
- case "number":
- return (
-
- updateFilter({
- rowId: filter.rowId,
- field: { value: event.target.value },
- debounced: true,
- })
- }
- />
- );
- case "select":
- return (
-
-
-
-
-
-
-
- No options found.
-
- {filterField?.options?.map((option) => (
- {
- updateFilter({ rowId: filter.rowId, field: { value } });
- setTimeout(() => {
- document.getElementById(inputId)?.click();
- }, 0);
- }}
- >
- {option.icon && (
-
- )}
- {option.label}
- {option.count && (
-
- {option.count}
-
- )}
-
- ))}
-
-
-
-
- );
- case "multi-select":
- const selectedValues = new Set(
- Array.isArray(filter.value) ? filter.value : [],
- );
-
- return (
-
-
-
-
-
-
-
- No options found.
-
- {filterField?.options?.map((option) => (
- {
- const currentValue = Array.isArray(filter.value)
- ? filter.value
- : [];
- const newValue = currentValue.includes(value)
- ? currentValue.filter((v) => v !== value)
- : [...currentValue, value];
- updateFilter({
- rowId: filter.rowId,
- field: { value: newValue },
- });
- }}
- >
- {option.icon && (
-
- )}
- {option.label}
- {option.count && (
-
- {option.count}
-
- )}
-
- ))}
-
-
-
-
- );
- case "date":
- const dateValue = Array.isArray(filter.value)
- ? filter.value.filter(Boolean)
- : [filter.value, filter.value].filter(Boolean);
-
- const displayValue =
- filter.operator === "isBetween" && dateValue.length === 2
- ? `${formatDate(dateValue[0] ?? new Date())} - ${formatDate(
- dateValue[1] ?? new Date(),
- )}`
- : dateValue[0]
- ? formatDate(dateValue[0])
- : "Pick a date";
-
- return (
-
-
-
-
-
- {filter.operator === "isBetween" ? (
- {
- updateFilter({
- rowId: filter.rowId,
- field: {
- value: date
- ? [
- date.from?.toISOString() ?? "",
- date.to?.toISOString() ?? "",
- ]
- : [],
- },
- });
- }}
- initialFocus
- numberOfMonths={1}
- />
- ) : (
- {
- updateFilter({
- rowId: filter.rowId,
- field: { value: date?.toISOString() ?? "" },
- });
-
- setTimeout(() => {
- document.getElementById(inputId)?.click();
- }, 0);
- }}
- initialFocus
- />
- )}
-
-
- );
- case "boolean": {
- if (Array.isArray(filter.value)) return null;
-
- return (
-
- );
- }
- default:
- return null;
- }
- }
-
- return (
- ({ id: item.rowId }))}
- onMove={({ activeIndex, overIndex }) =>
- moveFilter(activeIndex, overIndex)
- }
- overlay={
-
- }
- >
-
-
-
-
- 0 ? "gap-3.5" : "gap-2",
- )}
- >
- {filters.length > 0 ? (
- Filters
- ) : (
-
-
No filters applied
-
- Add filters to refine your results.
-
-
- {filters.map((filter, index) => {
- const filterId = `${id}-filter-${filter.rowId}`;
- const joinOperatorListboxId = `${filterId}-join-operator-listbox`;
- const fieldListboxId = `${filterId}-field-listbox`;
- const fieldTriggerId = `${filterId}-field-trigger`;
- const operatorListboxId = `${filterId}-operator-listbox`;
- const inputId = `${filterId}-input`;
-
- return (
-
-
-
- {index === 0 ? (
-
- Where
-
- ) : index === 1 ? (
-
- ) : (
-
- {joinOperator}
-
- )}
-
-
-
-
-
-
- document.getElementById(fieldTriggerId)?.focus()
- }
- >
-
-
-
- No fields found.
-
- {filterFields.map((field) => (
- {
- const column = filterFields.find(
- (col) => col.id === value,
- );
- if (column) {
- updateFilter({
- rowId: filter.rowId,
- field: {
- id: value as StringKeyOf,
- type: column.type,
- operator: getDefaultFilterOperator(
- column.type,
- ),
- },
- });
- }
- }}
- >
-
- {field.label}
-
-
-
- ))}
-
-
-
-
-
-
-
- {renderFilterInput({ filter, inputId })}
-
-
-
-
-
-
- );
- })}
-
-
- {filters.length > 0 ? (
-
- ) : null}
-
-
-
-
- );
-}
diff --git a/src/components/ui/table/data-table-pagination.tsx b/src/components/ui/table/data-table-pagination.tsx
deleted file mode 100644
index b28f1da..0000000
--- a/src/components/ui/table/data-table-pagination.tsx
+++ /dev/null
@@ -1,102 +0,0 @@
-import { type Table } from "@tanstack/react-table";
-import {
- ChevronLeft,
- ChevronRight,
- ChevronsLeft,
- ChevronsRight,
-} from "lucide-react";
-
-import { Button } from "@/components/ui/button";
-import {
- Select,
- SelectContent,
- SelectItem,
- SelectTrigger,
- SelectValue,
-} from "@/components/ui/select";
-
-interface DataTablePaginationProps {
- table: Table;
- pageSizeOptions?: number[];
-}
-
-export function DataTablePagination({
- table,
- pageSizeOptions = [10, 20, 30, 40, 50],
-}: DataTablePaginationProps) {
- return (
-
-
- {table.getFilteredSelectedRowModel().rows.length} of{" "}
- {table.getFilteredRowModel().rows.length} row(s) selected.
-
-
-
-
Rows per page
-
-
-
- Page {table.getState().pagination.pageIndex + 1} of{" "}
- {table.getPageCount()}
-
-
-
-
-
-
-
-
-
-
-
- {searchableColumnCount > 0
- ? Array.from({ length: searchableColumnCount }).map((_, i) => (
-
- ))
- : null}
- {filterableColumnCount > 0
- ? Array.from({ length: filterableColumnCount }).map((_, i) => (
-
- ))
- : null}
-
- {showViewOptions ? (
-
- ) : null}
-
-
-
-
- {Array.from({ length: 1 }).map((_, i) => (
-
- {Array.from({ length: columnCount }).map((_, j) => (
-
-
-
- ))}
-
- ))}
-
-
- {Array.from({ length: rowCount }).map((_, i) => (
-
- {Array.from({ length: columnCount }).map((_, j) => (
-
-
-
- ))}
-
- ))}
-
-
-
- {withPagination ? (
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- ) : null}
-
-
- );
-}
diff --git a/src/components/ui/table/data-table-toolbar.tsx b/src/components/ui/table/data-table-toolbar.tsx
deleted file mode 100644
index 031daa6..0000000
--- a/src/components/ui/table/data-table-toolbar.tsx
+++ /dev/null
@@ -1,119 +0,0 @@
-"use client";
-
-import type { Table } from "@tanstack/react-table";
-import { X } from "lucide-react";
-import * as React from "react";
-
-import { Button } from "@/components/ui/button";
-import { Input } from "@/components/ui/input";
-import { DataTableFacetedFilter } from "@/components/ui/table/data-table-faceted-filter";
-import { DataTableViewOptions } from "@/components/ui/table/data-table-view-options";
-import { cn } from "@/lib/utils";
-import { DataTableFilterField } from "@/types/table";
-
-interface DataTableToolbarProps