create-zhx-monorepo 0.2.2 → 2.0.0

package/templates/monorepo-starter/apps/dashboard/src/components/shared/GenericFormTable.tsx

@@ -0,0 +1,189 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import React from "react";
+import { Edit, MoreHorizontal, Trash2 } from "lucide-react";
+
+import { cn } from "@workspace/ui/lib/utils";
+import { Badge } from "@workspace/ui/components/badge";
+import { Button } from "@workspace/ui/components/button";
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "@workspace/ui/components/table";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from "@workspace/ui/components/dropdown-menu";
+
+export interface ColumnConfig<TData> {
+  header: string;
+  accessor: keyof TData | ((item: TData) => React.ReactNode);
+  className?: string;
+  mobileLabel?: string;
+}
+
+interface GenericFormTableProps<TData> {
+  items: TData[];
+  columns: ColumnConfig<TData>[];
+  compact?: boolean;
+  entityTitle: string;
+  onEdit?: (index: number, row: TData) => Promise<void> | void;
+  onRemove?: (index: number) => Promise<void> | void;
+}
+
+const GenericFormTable = <TData extends BaseResponse>({
+  items,
+  columns,
+  compact,
+  entityTitle,
+  onEdit,
+  onRemove,
+}: GenericFormTableProps<TData>) => {
+  return !items.length ? (
+    <div className="p-8 text-center">
+      <p className="text-muted-foreground">No {entityTitle} added yet</p>
+    </div>
+  ) : compact ? (
+    // Mobile-friendly card view
+    <div className="divide-y">
+      {items.map((item, index: number) => {
+        const isDraft = !(item as any).id;
+        return (
+          <div key={index} className="p-4 hover:bg-muted/50">
+            <div className="flex items-start justify-between">
+              <div className="space-y-2">
+                <div className="flex items-center gap-2">
+                  <span className="font-mono text-sm text-muted-foreground">
+                    #{index + 1}
+                  </span>
+                  {isDraft ? (
+                    <Badge variant="outline" className="bg-yellow-50">
+                      Draft
+                    </Badge>
+                  ) : (
+                    <Badge variant="outline" className="bg-green-50">
+                      Saved
+                    </Badge>
+                  )}
+                </div>
+
+                <div className="grid grid-cols-2 gap-4">
+                  {columns.map((col) => (
+                    <div key={col.header} className="space-y-1">
+                      <p className="text-xs font-medium text-muted-foreground">
+                        {col.mobileLabel || col.header}
+                      </p>
+                      <p className="text-sm">
+                        {typeof col.accessor === "function"
+                          ? col.accessor(item)
+                          : String((item as any)[col.accessor] || "—")}
+                      </p>
+                    </div>
+                  ))}
+                </div>
+              </div>
+
+              {isDraft && (
+                <Button
+                  size="icon"
+                  variant="ghost"
+                  onClick={() => onRemove?.(index)}
+                  className="h-8 w-8 hover:bg-destructive/10 hover:text-destructive"
+                >
+                  <Trash2 className="h-4 w-4" />
+                </Button>
+              )}
+            </div>
+          </div>
+        );
+      })}
+    </div>
+  ) : (
+    // Desktop table view
+    <div className="overflow-x-auto">
+      <Table>
+        <TableHeader className="bg-muted/50">
+          <TableRow>
+            <TableHead className="w-12">#</TableHead>
+            {columns.map((col) => (
+              <TableHead key={col.header} className={col.className}>
+                {col.header}
+              </TableHead>
+            ))}
+            <TableHead className="w-24">Status</TableHead>
+            <TableHead className="w-16 text-right">Actions</TableHead>
+          </TableRow>
+        </TableHeader>
+        <TableBody>
+          {items.map((item, index: number) => {
+            const isDraft = !(item as any).id;
+            return (
+              <TableRow key={index} className="hover:bg-muted/50">
+                <TableCell className="font-medium">{index + 1}</TableCell>
+                {columns.map((col) => (
+                  <TableCell
+                    key={col.header}
+                    className={cn("max-w-30 truncate", col.className)}
+                  >
+                    {typeof col.accessor === "function"
+                      ? col.accessor(item)
+                      : String((item as any)[col.accessor] || "—")}
+                  </TableCell>
+                ))}
+                <TableCell>
+                  {isDraft ? (
+                    <Badge
+                      variant="outline"
+                      className="bg-yellow-700/10 text-yellow-700"
+                    >
+                      Draft
+                    </Badge>
+                  ) : (
+                    <Badge
+                      variant="outline"
+                      className="bg-green-700/10 text-green-700"
+                    >
+                      Saved
+                    </Badge>
+                  )}
+                </TableCell>
+                <TableCell className="text-right">
+                  <DropdownMenu>
+                    <DropdownMenuTrigger asChild>
+                      <Button size="icon" variant="ghost">
+                        <MoreHorizontal />
+                      </Button>
+                    </DropdownMenuTrigger>
+                    <DropdownMenuContent align="end">
+                      <DropdownMenuLabel>Actions</DropdownMenuLabel>
+                      <DropdownMenuSeparator />
+                      <DropdownMenuItem onClick={() => onEdit?.(index, item)}>
+                        <Edit /> Edit
+                      </DropdownMenuItem>
+
+                      <DropdownMenuItem
+                        onClick={() => onRemove?.(index)}
+                        className="text-destructive"
+                      >
+                        <Trash2 /> Delete
+                      </DropdownMenuItem>
+                    </DropdownMenuContent>
+                  </DropdownMenu>
+                </TableCell>
+              </TableRow>
+            );
+          })}
+        </TableBody>
+      </Table>
+    </div>
+  );
+};
+
+export default GenericFormTable;

package/templates/monorepo-starter/apps/dashboard/src/components/shared/GenericTable.tsx

@@ -0,0 +1,244 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+"use client";
+
+import * as React from "react";
+import Link from "next/link";
+import { MoreHorizontal, ArrowUpDown, Trash2, Eye, Edit } from "lucide-react";
+
+import { cn } from "@workspace/ui/lib/utils";
+import { Button } from "@workspace/ui/components/button";
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "@workspace/ui/components/table";
+
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from "@workspace/ui/components/dropdown-menu";
+import Pagination from "@/components/shared/Pagination";
+import SearchToolbar from "@/components/shared/SearchToolbar";
+import TableSkeleton from "@/components/skeleton/TableSkeleton";
+import type { PaginationProps } from "@/components/shared/Pagination";
+import type { SearchToolbarProps } from "@/components/shared/SearchToolbar";
+
+export interface ColumnConfig<TData, TQuery extends BaseQueryType = never> {
+  header: string;
+  accessor: keyof TData | ((row: TData) => React.ReactNode);
+  sortKey?: TQuery["sortBy"];
+  className?: string;
+}
+
+interface GenericTableProps<
+  TData extends BaseResponse,
+  TQuery extends BaseQueryType,
+>
+  extends Omit<SearchToolbarProps<TQuery>, "setPage">, PaginationProps {
+  data: TData[];
+  entityId?: (d: TData) => string;
+  isLoading?: boolean;
+  columns: ColumnConfig<TData, TQuery>[];
+  onDelete?: (row: TData) => Promise<void> | void;
+  canEdit?: boolean;
+}
+
+function GenericTable<
+  TData extends BaseResponse,
+  TQuery extends BaseQueryType,
+>({
+  data,
+  total,
+  limit,
+  entityId = (row) => row.id,
+  entityType,
+  currentPage,
+  totalPages,
+  columns,
+  search,
+  setSearch,
+  searchBy,
+  setSearchBy,
+  sortBy,
+  setSortBy,
+  sortOrder,
+  setSortOrder,
+  setPage,
+  setLimit,
+  canEdit = true,
+  onDelete,
+  filter,
+  setFilter,
+  filterConfig,
+  searchByOptions,
+  isLoading = false,
+}: GenericTableProps<TData, TQuery>) {
+  const [deletingId, setDeletingId] = React.useState<string | null>(null);
+
+  const hasActions = columns.find((c) => c.header === "Actions");
+
+  const handleSort = (col: ColumnConfig<TData, TQuery>) => {
+    if (!col.sortKey) return;
+
+    if (sortBy === col.sortKey) {
+      setSortOrder?.(sortOrder === "asc" ? "desc" : "asc");
+    } else {
+      setSortBy?.(col.sortKey);
+      setSortOrder?.("desc");
+    }
+  };
+
+  const handleDelete = async (row: TData) => {
+    if (!onDelete) return;
+    try {
+      setDeletingId(row.id);
+      await onDelete(row);
+    } finally {
+      setDeletingId(null);
+    }
+  };
+
+  if (isLoading) {
+    return <TableSkeleton columnCount={columns.length} rowCount={limit} />;
+  }
+
+  return (
+    <section className="space-y-4">
+      {/* FILTER BAR */}
+      <SearchToolbar
+        entityType={entityType}
+        search={search}
+        setSearch={setSearch}
+        searchBy={searchBy}
+        setSearchBy={setSearchBy}
+        setPage={setPage}
+        searchByOptions={searchByOptions}
+        filter={filter}
+        setFilter={setFilter}
+        filterConfig={filterConfig}
+      />
+
+      {/* TABLE */}
+      <div className="overflow-hidden rounded-lg border">
+        <Table>
+          <TableHeader className="bg-muted sticky top-0 z-10">
+            <TableRow>
+              {columns.map((c, i) => (
+                <TableHead key={i} className={c.className}>
+                  {c.sortKey ? (
+                    <Button
+                      variant="ghost"
+                      onClick={() => handleSort(c)}
+                      className="px-0"
+                    >
+                      {c.header}
+                      <ArrowUpDown className="ml-1 size-4" />
+                    </Button>
+                  ) : (
+                    c.header
+                  )}
+                </TableHead>
+              ))}
+              {!hasActions && (
+                <TableHead className="w-20 sticky right-0 bg-muted z-20">
+                  Actions
+                </TableHead>
+              )}
+            </TableRow>
+          </TableHeader>
+
+          <TableBody className="**:data-[slot=table-cell]:first:w-8">
+            {data.length ? (
+              data.map((row, idx) => (
+                <TableRow key={row.id}>
+                  {columns.map((c, i) => (
+                    <TableCell
+                      key={i}
+                      className={cn(
+                        c.className,
+                        hasActions &&
+                          idx === data.length - 1 &&
+                          "sticky right-0 bg-background z-20",
+                      )}
+                    >
+                      {typeof c.accessor === "function"
+                        ? c.accessor(row)
+                        : ((row as any)[c.accessor] ?? "N/A")}
+                    </TableCell>
+                  ))}
+
+                  {!hasActions && (
+                    <TableCell className="sticky right-0 bg-background z-20">
+                      <DropdownMenu>
+                        <DropdownMenuTrigger asChild>
+                          <Button size="icon" variant="ghost">
+                            <MoreHorizontal />
+                          </Button>
+                        </DropdownMenuTrigger>
+                        <DropdownMenuContent align="end">
+                          <DropdownMenuLabel>Actions</DropdownMenuLabel>
+                          <DropdownMenuSeparator />
+                          <DropdownMenuItem asChild>
+                            <Link href={`${entityType}/${entityId(row)}`}>
+                              <Eye className="mr-2 size-4" /> View
+                            </Link>
+                          </DropdownMenuItem>
+                          {canEdit && (
+                            <DropdownMenuItem asChild>
+                              <Link
+                                href={`${entityType}/${entityId(row)}/edit`}
+                              >
+                                <Edit className="mr-2 size-4" /> Edit
+                              </Link>
+                            </DropdownMenuItem>
+                          )}
+                          {onDelete && (
+                            <DropdownMenuItem
+                              onClick={() => handleDelete(row)}
+                              disabled={deletingId === row.id}
+                              className="text-destructive"
+                            >
+                              <Trash2 className="mr-2 size-4" />
+                              {deletingId === row.id ? "Deleting..." : "Delete"}
+                            </DropdownMenuItem>
+                          )}
+                        </DropdownMenuContent>
+                      </DropdownMenu>
+                    </TableCell>
+                  )}
+                </TableRow>
+              ))
+            ) : (
+              <TableRow>
+                <TableCell
+                  colSpan={columns.length}
+                  className="h-24 text-center"
+                >
+                  No results.
+                </TableCell>
+              </TableRow>
+            )}
+          </TableBody>
+        </Table>
+      </div>
+      {/* PAGINATION */}
+      <Pagination
+        total={total}
+        limit={limit}
+        currentPage={currentPage}
+        totalPages={totalPages}
+        setPage={setPage}
+        setLimit={setLimit}
+      />
+    </section>
+  );
+}
+
+export default GenericTable;

package/templates/monorepo-starter/apps/dashboard/src/components/shared/ListPage.tsx

@@ -0,0 +1,134 @@
+"use client";
+
+import * as React from "react";
+import type { ApiException } from "@workspace/sdk";
+import { useConfirm } from "@workspace/ui/hooks/use-confirm";
+import GenericTable, { type ColumnConfig } from "./GenericTable";
+import type { ListFilterConfig, SearchByOption } from "./SearchToolbar";
+
+interface UseListResult<TKey extends string, TData> {
+  data?: BaseQueryResponse & {
+    [K in TKey]: TData[];
+  };
+
+  isLoading?: boolean;
+  fetchError?: unknown;
+}
+
+interface ListPageConfig<
+  TData extends BaseResponse,
+  TQuery extends BaseQueryType,
+  TKey extends string,
+> {
+  entityKey: TKey;
+  canEdit?: boolean;
+  columns: ColumnConfig<TData, TQuery>[];
+  searchByOptions: SearchByOption<TQuery>[];
+
+  defaultParams?: TQuery;
+  useListHook: (params: TQuery) => UseListResult<TKey, TData>;
+  useDeleteHook?: () => {
+    deleteAsync: (args: { id: string; force?: boolean }) => Promise<unknown>;
+    isDeleting: boolean;
+    deleteError: ApiException | null;
+  };
+
+  defaultSortBy: TQuery["sortBy"];
+  defaultSearchBy: TQuery["searchBy"];
+
+  filterConfig?: ListFilterConfig<TQuery>;
+}
+
+function ListPage<
+  TData extends BaseResponse,
+  TQuery extends BaseQueryType,
+  TKey extends string,
+>({
+  entityKey,
+  canEdit,
+  columns,
+  defaultSearchBy,
+  defaultSortBy,
+  searchByOptions,
+  useListHook,
+  useDeleteHook,
+  defaultParams,
+  filterConfig,
+}: ListPageConfig<TData, TQuery, TKey>) {
+  const [page, setPage] = React.useState(1);
+  const [limit, setLimit] = React.useState(10);
+  const [search, setSearch] = React.useState("");
+  const [searchBy, setSearchBy] =
+    React.useState<TQuery["searchBy"]>(defaultSearchBy);
+  const [sortBy, setSortBy] = React.useState<TQuery["sortBy"]>(defaultSortBy);
+  const [sortOrder, setSortOrder] = React.useState<"asc" | "desc">("desc");
+  const [filter, setFilter] = React.useState<string>();
+
+  const query = {
+    ...defaultParams,
+    page,
+    limit,
+    search,
+    searchBy,
+    sortBy,
+    sortOrder,
+    ...(filterConfig
+      ? { [filterConfig.key]: filter ?? filterConfig.default }
+      : {}),
+  } as unknown as TQuery;
+
+  const { data, isLoading } = useListHook(query);
+  const deleteHook = useDeleteHook?.();
+  const { confirm } = useConfirm();
+
+  const handleDelete = async (row: TData) => {
+    if (!deleteHook) return;
+    const ok = await confirm();
+    if (!ok) return;
+    await deleteHook.deleteAsync({ id: row.id, force: false });
+  };
+
+  const entityTitle = entityKey.split("/").pop();
+
+  return (
+    <div className="container mx-auto p-6">
+      <div className="mb-6">
+        <h1 className="text-3xl font-bold capitalize">
+          {entityTitle} Management
+        </h1>
+        <p className="text-muted-foreground">
+          Manage your {entityTitle} here. View, edit, or delete existing
+          records.
+        </p>
+      </div>
+      <GenericTable
+        entityType={entityKey}
+        canEdit={canEdit}
+        data={data?.[entityKey] || []}
+        total={data?.total || 0}
+        limit={data?.limit || 10}
+        currentPage={data?.page || 1}
+        totalPages={data?.totalPages || 1}
+        isLoading={isLoading}
+        search={search}
+        setSearch={setSearch}
+        searchBy={searchBy}
+        setSearchBy={setSearchBy}
+        sortBy={sortBy}
+        setSortBy={setSortBy}
+        sortOrder={sortOrder}
+        setSortOrder={setSortOrder}
+        setPage={setPage}
+        setLimit={setLimit}
+        onDelete={deleteHook ? handleDelete : undefined}
+        filter={filter}
+        setFilter={setFilter}
+        filterConfig={filterConfig}
+        columns={columns}
+        searchByOptions={searchByOptions}
+      />
+    </div>
+  );
+}
+
+export default ListPage;

package/templates/monorepo-starter/apps/dashboard/src/components/shared/Pagination.tsx

@@ -0,0 +1,120 @@
+import {
+  IconChevronLeft,
+  IconChevronRight,
+  IconChevronsLeft,
+  IconChevronsRight,
+} from "@tabler/icons-react";
+import type { Dispatch, SetStateAction } from "react";
+
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@workspace/ui/components/select";
+import { Label } from "@workspace/ui/components/label";
+import { Button } from "@workspace/ui/components/button";
+
+export interface PaginationProps {
+  total: number;
+  currentPage: number;
+  totalPages: number;
+  limit: number;
+  setPage: Dispatch<SetStateAction<number>>;
+  setLimit: Dispatch<SetStateAction<number>>;
+}
+
+const Pagination = ({
+  total,
+  limit,
+  currentPage,
+  totalPages,
+  setLimit,
+  setPage,
+}: PaginationProps) => {
+  const start = total === 0 ? 0 : (currentPage - 1) * limit + 1;
+  const end = Math.min(currentPage * limit, total);
+
+  return (
+    <div className="flex items-center justify-between px-4">
+      <div className="text-muted-foreground hidden text-sm lg:flex">
+        Results: {start}–{end} of {total}
+      </div>
+
+      <div className="flex w-full items-center gap-8 lg:w-fit">
+        <div className="hidden items-center gap-2 lg:flex ">
+          <Label
+            htmlFor="rows-per-page"
+            className="text-sm text-muted-foreground"
+          >
+            Limit Per Page
+          </Label>
+          <Select
+            value={limit.toString()}
+            onValueChange={(limit: string) => {
+              setLimit(Number(limit));
+            }}
+          >
+            <SelectTrigger size="sm" className="w-20" id="rows-per-page">
+              <SelectValue placeholder={limit} />
+            </SelectTrigger>
+            <SelectContent side="top">
+              {[5, 10, 15, 20, 25].map((limit) => (
+                <SelectItem key={limit} value={limit.toString()}>
+                  {limit}
+                </SelectItem>
+              ))}
+            </SelectContent>
+          </Select>
+        </div>
+        <div className="flex w-fit items-center justify-center text-sm font-medium">
+          Page {currentPage} of {totalPages}
+        </div>
+        <div className="ml-auto flex items-center gap-2 lg:ml-0">
+          <Button
+            variant="outline"
+            className="hidden h-8 w-8 p-0 lg:flex"
+            onClick={() => setPage(1)}
+            disabled={currentPage === 1}
+          >
+            <span className="sr-only">Go to first page</span>
+            <IconChevronsLeft />
+          </Button>
+          <Button
+            variant="outline"
+            className="size-8"
+            size="icon"
+            onClick={() => setPage(currentPage - 1)}
+            disabled={currentPage === 1}
+          >
+            <span className="sr-only">Go to previous page</span>
+            <IconChevronLeft />
+          </Button>
+          <Button
+            variant="outline"
+            className="size-8"
+            size="icon"
+            onClick={() => setPage(currentPage + 1)}
+            disabled={currentPage === totalPages}
+          >
+            <span className="sr-only">Go to next page</span>
+            <IconChevronRight />
+          </Button>
+          <Button
+            variant="outline"
+            className="hidden size-8 lg:flex"
+            size="icon"
+            onClick={() => setPage(totalPages)}
+            disabled={currentPage === totalPages}
+          >
+            <span className="sr-only">Go to last page</span>
+            <IconChevronsRight />
+          </Button>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default Pagination;