@carlonicora/nextjs-jsonapi 3.24.2 → 3.25.0

package/src/features/analytics/server-entry.ts

@@ -0,0 +1,8 @@
+// Server-safe public barrel for the analytics feature.
+// Consumed via `@carlonicora/nextjs-jsonapi/analytics/server`. Must NOT receive a
+// "use client" directive — these are async server components that read the
+// session cookie before rendering the client containers from
+// `@carlonicora/nextjs-jsonapi/analytics`.
+
+export { AnalyticsAdminPage } from "./components/server/AnalyticsAdminPage";
+export { AnalyticsJourneyPage } from "./components/server/AnalyticsJourneyPage";

package/src/features/waitlist/components/lists/WaitlistList.tsx

@@ -1,68 +1,52 @@
 "use client";
 
-import { flexRender, getCoreRowModel, useReactTable } from "@tanstack/react-table";
-import { RefreshCw, Users } from "lucide-react";
+import { RefreshCw } from "lucide-react";
 import { useTranslations } from "next-intl";
-import { useCallback, useEffect, useMemo, useState } from "react";
-import { errorToast } from "../../../../components";
-import { SectionHeader } from "../../../../components/typography";
-import {
-  Button,
-  Select,
-  SelectContent,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
-  Table,
-  TableBody,
-  TableCell,
-  TableHead,
-  TableHeader,
-  TableRow,
-} from "../../../../shadcnui";
+import { useMemo, useState } from "react";
+import { ContentListTable, errorToast } from "../../../../components";
+import { Modules } from "../../../../core";
+import { DataListRetriever, useDataListRetriever } from "../../../../hooks";
+import { Button, Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "../../../../shadcnui";
 import { showToast } from "../../../../utils/toast";
+import { WaitlistFields } from "../../data/waitlist.fields";
 import { WaitlistInterface } from "../../data/WaitlistInterface";
 import { WaitlistService } from "../../data/WaitlistService";
-import { useWaitlistTableStructure } from "../../hooks/useWaitlistTableStructure";
 
-export function WaitlistList() {
+type WaitlistListProps = {
+  /**
+   * Pass this whenever the list is the page's own content inside a
+   * `RoundPageContainer fullWidth`. Without it ContentListTable wraps itself in
+   * `rounded-md border`, drawing a second bordered card inside the page's
+   * rounded shell.
+   */
+  fullWidth?: boolean;
+};
+
+export function WaitlistList({ fullWidth }: WaitlistListProps = {}) {
   const t = useTranslations();
-  const [entries, setEntries] = useState<WaitlistInterface[]>([]);
-  const [total, setTotal] = useState(0);
-  const [isLoading, setIsLoading] = useState(true);
   const [statusFilter, setStatusFilter] = useState<string>("all");
 
-  const loadEntries = useCallback(async () => {
-    setIsLoading(true);
-    try {
-      const result = await WaitlistService.findMany({
-        status: statusFilter === "all" ? undefined : statusFilter,
-        fetchAll: true,
-      });
-      setEntries(result);
-      setTotal(result.length);
-    } catch (error) {
-      errorToast({ error });
-    } finally {
-      setIsLoading(false);
-    }
-  }, [statusFilter]);
-
-  useEffect(() => {
-    loadEntries();
-  }, [loadEntries]);
+  const data: DataListRetriever<WaitlistInterface> = useDataListRetriever({
+    retriever: (params) => WaitlistService.findMany(params),
+    retrieverParams: {},
+    module: Modules.Waitlist,
+  });
 
   const handleInvite = async (entry: WaitlistInterface) => {
     try {
       await WaitlistService.invite(entry.id);
       showToast(t("waitlist.admin.invite_sent", { email: entry.email }));
-      loadEntries();
+      void data.refresh();
     } catch (error) {
       errorToast({ error });
     }
   };
 
-  const columns = useWaitlistTableStructure({ onInvite: handleInvite });
+  const handleStatusChange = (value: string | null) => {
+    const status = value ?? "all";
+    setStatusFilter(status);
+    data.addAdditionalParameter("status", status === "all" ? null : status);
+  };
 
   const statusItems = useMemo(
     () => ({
@@ -75,83 +59,46 @@ export function WaitlistList() {
     [t],
   );
 
-  const table = useReactTable({
-    data: entries,
-    columns,
-    getCoreRowModel: getCoreRowModel(),
-  });
-
-  return (
-    <div className="space-y-4">
-      {/* Header */}
-      <div className="flex items-center justify-between">
-        <div className="flex items-center gap-2">
-          <Users className="h-5 w-5" />
-          <SectionHeader level={2}>{t("waitlist.admin.title")}</SectionHeader>
-          <span className="text-muted-foreground">({t("waitlist.admin.entries_count", { count: total })})</span>
-        </div>
-
-        <div className="flex items-center gap-4">
-          {/* Status Filter */}
-          <Select items={statusItems} value={statusFilter} onValueChange={(value) => setStatusFilter(value ?? "all")}>
-            <SelectTrigger className="w-40">
-              <SelectValue placeholder={t("waitlist.admin.filter_placeholder")} />
-            </SelectTrigger>
-            <SelectContent>
-              <SelectItem value="all">{t("waitlist.admin.all_statuses")}</SelectItem>
-              <SelectItem value="pending">{t("waitlist.admin.status.pending")}</SelectItem>
-              <SelectItem value="confirmed">{t("waitlist.admin.status.confirmed")}</SelectItem>
-              <SelectItem value="invited">{t("waitlist.admin.status.invited")}</SelectItem>
-              <SelectItem value="registered">{t("waitlist.admin.status.registered")}</SelectItem>
-            </SelectContent>
-          </Select>
+  const filters = (
+    <div className="flex items-center gap-4">
+      <Select items={statusItems} value={statusFilter} onValueChange={handleStatusChange}>
+        <SelectTrigger className="w-40">
+          <SelectValue placeholder={t("waitlist.admin.filter_placeholder")} />
+        </SelectTrigger>
+        <SelectContent>
+          <SelectItem value="all">{t("waitlist.admin.all_statuses")}</SelectItem>
+          <SelectItem value="pending">{t("waitlist.admin.status.pending")}</SelectItem>
+          <SelectItem value="confirmed">{t("waitlist.admin.status.confirmed")}</SelectItem>
+          <SelectItem value="invited">{t("waitlist.admin.status.invited")}</SelectItem>
+          <SelectItem value="registered">{t("waitlist.admin.status.registered")}</SelectItem>
+        </SelectContent>
+      </Select>
 
-          {/* Refresh Button */}
-          <Button variant="outline" size="icon" onClick={loadEntries} disabled={isLoading}>
-            <RefreshCw className={`h-4 w-4 ${isLoading ? "animate-spin" : ""}`} />
-          </Button>
-        </div>
-      </div>
-
-      {/* Table */}
-      <div className="rounded-md border">
-        <Table>
-          <TableHeader>
-            {table.getHeaderGroups().map((headerGroup) => (
-              <TableRow key={headerGroup.id}>
-                {headerGroup.headers.map((header) => (
-                  <TableHead key={header.id}>
-                    {header.isPlaceholder ? null : flexRender(header.column.columnDef.header, header.getContext())}
-                  </TableHead>
-                ))}
-              </TableRow>
-            ))}
-          </TableHeader>
-          <TableBody>
-            {isLoading ? (
-              <TableRow>
-                <TableCell colSpan={columns.length} className="h-24 text-center">
-                  {t("waitlist.admin.loading")}
-                </TableCell>
-              </TableRow>
-            ) : entries.length === 0 ? (
-              <TableRow>
-                <TableCell colSpan={columns.length} className="h-24 text-center">
-                  {t("waitlist.admin.empty")}
-                </TableCell>
-              </TableRow>
-            ) : (
-              table.getRowModel().rows.map((row) => (
-                <TableRow key={row.id}>
-                  {row.getVisibleCells().map((cell) => (
-                    <TableCell key={cell.id}>{flexRender(cell.column.columnDef.cell, cell.getContext())}</TableCell>
-                  ))}
-                </TableRow>
-              ))
-            )}
-          </TableBody>
-        </Table>
-      </div>
+      <Button variant="outline" size="icon" onClick={() => void data.refresh()} disabled={!data.isLoaded}>
+        <RefreshCw className={`h-4 w-4 ${!data.isLoaded ? "animate-spin" : ""}`} />
+      </Button>
     </div>
   );
+
+  return (
+    <ContentListTable
+      data={data}
+      fields={[
+        WaitlistFields.email,
+        WaitlistFields.status,
+        WaitlistFields.createdAt,
+        WaitlistFields.questionnaire,
+        WaitlistFields.actions,
+      ]}
+      tableGeneratorType={Modules.Waitlist}
+      title={t("waitlist.admin.title")}
+      filters={filters}
+      /* The waitlist endpoint takes no search term, so rendering the box would
+         give the page a control that silently does nothing. */
+      allowSearch={false}
+      context={{ onInvite: handleInvite }}
+      fullWidth={fullWidth}
+      emptyState={t("waitlist.admin.empty")}
+    />
+  );
 }

package/src/features/waitlist/data/WaitlistService.ts

@@ -42,7 +42,7 @@ export class WaitlistService extends AbstractService {
     search?: string;
     fetchAll?: boolean;
     next?: NextRef;
-    prev?: PreviousRef;
+    previous?: PreviousRef;
   }): Promise<WaitlistInterface[]> {
     const endpoint = new EndpointCreator({ endpoint: Modules.Waitlist });
 
@@ -55,7 +55,7 @@ export class WaitlistService extends AbstractService {
       method: HttpMethod.GET,
       endpoint: endpoint.generate(),
       next: params?.next,
-      previous: params?.prev,
+      previous: params?.previous,
     });
   }
 

package/src/features/waitlist/data/index.ts

@@ -3,3 +3,4 @@ export * from "./Waitlist";
 export * from "./WaitlistService";
 export * from "./waitlist-stats.interface";
 export * from "./waitlist-stats";
+export * from "./waitlist.fields";

package/src/features/waitlist/data/waitlist.fields.ts

@@ -0,0 +1,8 @@
+export enum WaitlistFields {
+  waitlistId = "waitlistId",
+  email = "email",
+  status = "status",
+  createdAt = "createdAt",
+  questionnaire = "questionnaire",
+  actions = "actions",
+}

package/src/features/waitlist/hooks/useWaitlistTableStructure.tsx

@@ -3,13 +3,12 @@
 import { ColumnDef } from "@tanstack/react-table";
 import { Send } from "lucide-react";
 import { useTranslations } from "next-intl";
+import { useMemo } from "react";
+import { TableContent, UseTableStructureHook } from "../../../hooks";
 import { Badge, Button } from "../../../shadcnui";
+import { WaitlistFields } from "../data/waitlist.fields";
 import { WaitlistInterface, WaitlistStatus } from "../data/WaitlistInterface";
 
-interface UseWaitlistTableStructureProps {
-  onInvite: (entry: WaitlistInterface) => void;
-}
-
 /**
  * Parse questionnaire JSON string safely
  */
@@ -22,10 +21,25 @@ function parseQuestionnaire(questionnaire: string | undefined): Record<string, a
   }
 }
 
-export function useWaitlistTableStructure({
-  onInvite,
-}: UseWaitlistTableStructureProps): ColumnDef<WaitlistInterface>[] {
+/**
+ * Columns for the administrative waitlist. The invite action needs the list's
+ * own handler, so WaitlistList passes it through ContentListTable's `context`
+ * as `onInvite`.
+ */
+export const useWaitlistTableStructure: UseTableStructureHook<WaitlistInterface, WaitlistFields> = (params) => {
   const t = useTranslations();
+  const onInvite: ((entry: WaitlistInterface) => void) | undefined = params.context?.onInvite;
+
+  const tableData = useMemo(() => {
+    return params.data.map((entry: WaitlistInterface) => {
+      const row: TableContent<WaitlistInterface> = { jsonApiData: entry };
+      row[WaitlistFields.waitlistId] = entry.id;
+      params.fields.forEach((field) => {
+        row[field] = (entry as any)[field as keyof WaitlistInterface];
+      });
+      return row;
+    });
+  }, [params.data, params.fields]);
 
   const getStatusBadge = (status: WaitlistStatus) => {
     const variants: Record<WaitlistStatus, { variant: "default" | "secondary" | "outline" | "destructive" }> = {
@@ -39,31 +53,44 @@ export function useWaitlistTableStructure({
     return <Badge variant={config.variant}>{t(`waitlist.admin.status.${status}`)}</Badge>;
   };
 
-  return [
-    {
+  const fieldColumnMap: Partial<Record<WaitlistFields, () => any>> = {
+    [WaitlistFields.email]: () => ({
+      id: "email",
       accessorKey: "email",
       header: t("waitlist.admin.columns.email"),
-      cell: ({ row }) => <span className="font-medium">{row.original.email}</span>,
-    },
-    {
+      cell: ({ row }: { row: TableContent<WaitlistInterface> }) => (
+        <span className="font-medium">{row.original.jsonApiData.email}</span>
+      ),
+      enableSorting: false,
+      enableHiding: false,
+    }),
+    [WaitlistFields.status]: () => ({
+      id: "status",
       accessorKey: "status",
       header: t("waitlist.admin.columns.status"),
-      cell: ({ row }) => getStatusBadge(row.original.status),
-    },
-    {
+      cell: ({ row }: { row: TableContent<WaitlistInterface> }) => getStatusBadge(row.original.jsonApiData.status),
+      enableSorting: false,
+      enableHiding: false,
+    }),
+    [WaitlistFields.createdAt]: () => ({
+      id: "createdAt",
       accessorKey: "createdAt",
       header: t("waitlist.admin.columns.submitted"),
-      cell: ({ row }) => {
-        if (!row.original.createdAt) return "-";
-        return new Date(row.original.createdAt).toLocaleDateString();
+      cell: ({ row }: { row: TableContent<WaitlistInterface> }) => {
+        const entry: WaitlistInterface = row.original.jsonApiData;
+        if (!entry.createdAt) return "-";
+        return new Date(entry.createdAt).toLocaleDateString();
       },
-    },
-    {
+      enableSorting: false,
+      enableHiding: false,
+    }),
+    [WaitlistFields.questionnaire]: () => ({
+      id: "questionnaire",
       accessorKey: "questionnaire",
       header: t("waitlist.admin.columns.questionnaire"),
-      cell: ({ row }) => {
+      cell: ({ row }: { row: TableContent<WaitlistInterface> }) => {
         // IMPORTANT: Parse JSON string from backend
-        const questionnaire = parseQuestionnaire(row.original.questionnaire);
+        const questionnaire = parseQuestionnaire(row.original.jsonApiData.questionnaire);
         if (!questionnaire || Object.keys(questionnaire).length === 0) {
           return <span className="text-muted-foreground">-</span>;
         }
@@ -84,16 +111,18 @@ export function useWaitlistTableStructure({
           </details>
         );
       },
-    },
-    {
+      enableSorting: false,
+      enableHiding: false,
+    }),
+    [WaitlistFields.actions]: () => ({
       id: "actions",
       header: t("waitlist.admin.columns.actions"),
-      cell: ({ row }) => {
-        const entry = row.original;
+      cell: ({ row }: { row: TableContent<WaitlistInterface> }) => {
+        const entry: WaitlistInterface = row.original.jsonApiData;
 
         if (entry.status === "confirmed") {
           return (
-            <Button size="sm" variant="outline" onClick={() => onInvite(entry)}>
+            <Button size="sm" variant="outline" onClick={() => onInvite?.(entry)}>
               <Send className="me-2 h-4 w-4" />
               {t("waitlist.admin.actions.invite")}
             </Button>
@@ -116,6 +145,16 @@ export function useWaitlistTableStructure({
           <span className="text-muted-foreground text-sm">{t("waitlist.admin.actions.awaiting_confirmation")}</span>
         );
       },
-    },
-  ];
-}
+      enableSorting: false,
+      enableHiding: false,
+    }),
+  };
+
+  const columns = useMemo(() => {
+    return params.fields.map((field) => fieldColumnMap[field]?.()).filter((col) => col !== undefined) as ColumnDef<
+      TableContent<WaitlistInterface>
+    >[];
+  }, [params.fields, fieldColumnMap, t]);
+
+  return useMemo(() => ({ data: tableData, columns: columns }), [tableData, columns]);
+};

package/dist/JsonApiRequest-G625QAH5.js

@@ -1,26 +0,0 @@
-"use strict";Object.defineProperty(exports, "__esModule", {value: true});
-
-
-
-
-
-
-
-
-
-
-var _chunkYXRVPEEJjs = require('./chunk-YXRVPEEJ.js');
-require('./chunk-7QVYU63E.js');
-
-
-
-
-
-
-
-
-
-
-
-exports.JsonApiDelete = _chunkYXRVPEEJjs.JsonApiDelete; exports.JsonApiGet = _chunkYXRVPEEJjs.JsonApiGet; exports.JsonApiPatch = _chunkYXRVPEEJjs.JsonApiPatch; exports.JsonApiPost = _chunkYXRVPEEJjs.JsonApiPost; exports.JsonApiPut = _chunkYXRVPEEJjs.JsonApiPut; exports.buildUrl = _chunkYXRVPEEJjs.buildUrl; exports.configureJsonApi = _chunkYXRVPEEJjs.configureJsonApi; exports.getApiUrl = _chunkYXRVPEEJjs.getApiUrl; exports.getAppUrl = _chunkYXRVPEEJjs.getAppUrl; exports.getTrackablePages = _chunkYXRVPEEJjs.getTrackablePages;
-//# sourceMappingURL=JsonApiRequest-G625QAH5.js.map