@carlonicora/nextjs-jsonapi 2.5.0 → 3.0.1

package/src/features/billing/stripe-price/components/forms/index.ts

@@ -1 +1,3 @@
-export * from "./PriceEditor";
+export * from "./PriceArchiver";
+export { default as PriceEditor } from "./PriceEditor";
+export type { PriceEditorProps } from "./PriceEditor";

package/src/features/billing/stripe-price/components/index.ts

@@ -1,2 +1,4 @@
+export * from "./containers";
+export * from "./details";
 export * from "./forms";
 export * from "./lists";

package/src/features/billing/stripe-price/components/lists/PricesList.tsx

@@ -1,284 +1,66 @@
 "use client";
 
-import { Archive, DollarSign, Edit, RotateCcw } from "lucide-react";
-import { useEffect, useState } from "react";
-import {
-  AlertDialog,
-  AlertDialogAction,
-  AlertDialogCancel,
-  AlertDialogContent,
-  AlertDialogDescription,
-  AlertDialogFooter,
-  AlertDialogHeader,
-  AlertDialogTitle,
-  Badge,
-  Button,
-} from "../../../../../shadcnui";
-import { formatCurrency } from "../../../components/utils/currency";
-import { StripePriceService } from "../../data";
+import { DollarSignIcon } from "lucide-react";
+import { useTranslations } from "next-intl";
+import { ReactNode, useEffect } from "react";
+import { ContentListTable } from "../../../../../components";
+import { Modules } from "../../../../../core";
+import { DataListRetriever, useDataListRetriever } from "../../../../../hooks";
+import { EmptyState } from "../../../../../shadcnui";
+import { usePriceContext } from "../../../contexts/PriceContext";
+import { StripePriceFields } from "../../data/stripe-price.fields";
 import { StripePriceInterface } from "../../data/stripe-price.interface";
-import { PriceEditor } from "../forms/PriceEditor";
+import { StripePriceService } from "../../data/stripe-price.service";
+import PriceEditor from "../forms/PriceEditor";
 
 type PricesListProps = {
   productId: string;
-  onPricesChange: () => void;
+  /**
+   * Only when the list IS the page's own content inside a `RoundPageContainer
+   * fullWidth`. Inside a tab panel leave it unset, or ContentListTable drops its
+   * own `rounded-md border` and the table floats borderless in the panel.
+   * Mirrors ThreatList, which is rendered both ways.
+   */
+  fullWidth?: boolean;
 };
 
-export function PricesList({ productId, onPricesChange }: PricesListProps) {
-  const [prices, setPrices] = useState<StripePriceInterface[]>([]);
-  const [loading, setLoading] = useState<boolean>(true);
-  const [showCreatePrice, setShowCreatePrice] = useState<boolean>(false);
-  const [editingPrice, setEditingPrice] = useState<StripePriceInterface | null>(null);
-  const [priceToArchive, setPriceToArchive] = useState<StripePriceInterface | null>(null);
-  const [priceToReactivate, setPriceToReactivate] = useState<StripePriceInterface | null>(null);
-  const [archivingPriceId, setArchivingPriceId] = useState<string | null>(null);
-  const [reactivatingPriceId, setReactivatingPriceId] = useState<string | null>(null);
+export function PricesList({ productId, fullWidth }: PricesListProps) {
+  const t = useTranslations();
+  const { priceVersion } = usePriceContext();
 
-  const loadPrices = async () => {
-    setLoading(true);
-    try {
-      const fetchedPrices = await StripePriceService.listPrices({ productId });
-      setPrices(fetchedPrices);
-    } catch (error) {
-      console.error("[PricesList] Failed to load prices:", error);
-    } finally {
-      setLoading(false);
-    }
-  };
+  const data: DataListRetriever<StripePriceInterface> = useDataListRetriever({
+    retriever: (params) => StripePriceService.listPrices({ ...params, productId }),
+    retrieverParams: {},
+    module: Modules.StripePrice,
+  });
 
   useEffect(() => {
-    loadPrices();
-  }, [productId]);
+    if (priceVersion > 0) void data.refresh();
+  }, [priceVersion]);
 
-  const handleArchive = async () => {
-    if (!priceToArchive) {
-      return;
-    }
-
-    setArchivingPriceId(priceToArchive.id);
-    try {
-      await StripePriceService.archivePrice({ id: priceToArchive.id });
-      setPriceToArchive(null); // Close dialog on success
-      await loadPrices();
-      onPricesChange();
-    } catch (error) {
-      console.error("[PricesList] Failed to archive price:", error);
-      // Keep dialog open on error so user can retry or cancel
-    } finally {
-      setArchivingPriceId(null);
-    }
-  };
-
-  const handleReactivate = async () => {
-    if (!priceToReactivate) {
-      return;
-    }
-
-    setReactivatingPriceId(priceToReactivate.id);
-    try {
-      await StripePriceService.reactivatePrice({ id: priceToReactivate.id });
-      setPriceToReactivate(null); // Close dialog on success
-      await loadPrices();
-      onPricesChange();
-    } catch (error) {
-      console.error("[PricesList] Failed to reactivate price:", error);
-      // Keep dialog open on error so user can retry or cancel
-    } finally {
-      setReactivatingPriceId(null);
-    }
-  };
-
-  const formatInterval = (price: StripePriceInterface): string => {
-    if (price.priceType === "one_time") {
-      return "one-time";
-    }
-
-    if (price.recurring) {
-      const count = price.recurring.intervalCount;
-      const interval = price.recurring.interval;
-
-      if (count === 1) {
-        return `/ ${interval}`;
-      } else {
-        return `/ ${count} ${interval}s`;
-      }
-    }
-
-    return "";
-  };
-
-  if (loading) {
-    return (
-      <div className="flex items-center justify-center py-8">
-        <p className="text-muted-foreground">Loading prices...</p>
-      </div>
-    );
-  }
+  const functions: ReactNode[] = [<PriceEditor key="create-price" productId={productId} />];
 
   return (
-    <div className="flex flex-col gap-y-4">
-      <div className="flex items-center justify-between mb-4">
-        <h4 className="text-lg font-semibold">Prices</h4>
-        <Button size="sm" onClick={() => setShowCreatePrice(true)}>
-          Add Price
-        </Button>
-      </div>
-
-      {/* Empty State */}
-      {prices.length === 0 && (
-        <div className="bg-background flex flex-col items-center justify-center gap-y-3 rounded-lg border border-dashed p-8">
-          <DollarSign className="text-muted-foreground h-12 w-12" />
-          <p className="text-muted-foreground text-sm">No prices yet. Add a price to enable subscriptions.</p>
-          <Button size="sm" onClick={() => setShowCreatePrice(true)}>
-            Add Price
-          </Button>
-        </div>
-      )}
-
-      {/* Prices Grid */}
-      {prices.length > 0 && (
-        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
-          {prices.map((price) => {
-            const isArchiving = archivingPriceId === price.id;
-            const isReactivating = reactivatingPriceId === price.id;
-
-            return (
-              <div key={price.id} className="border rounded-lg bg-white p-4 hover:shadow-sm transition-shadow">
-                <div className="flex items-start justify-between mb-3">
-                  <DollarSign className="h-5 w-5 text-primary" />
-                  <div className="flex gap-1">
-                    <Button variant="ghost" size="sm" onClick={() => setEditingPrice(price)} className="h-8 w-8 p-0">
-                      <Edit className="h-4 w-4" />
-                    </Button>
-                    {price.active ? (
-                      <Button
-                        variant="ghost"
-                        size="sm"
-                        onClick={() => setPriceToArchive(price)}
-                        className="h-8 w-8 p-0"
-                        disabled={isArchiving}
-                      >
-                        <Archive className="h-4 w-4" />
-                      </Button>
-                    ) : (
-                      <Button
-                        variant="ghost"
-                        size="sm"
-                        onClick={() => setPriceToReactivate(price)}
-                        className="h-8 w-8 p-0"
-                        disabled={isReactivating}
-                      >
-                        <RotateCcw className="h-4 w-4" />
-                      </Button>
-                    )}
-                  </div>
-                </div>
-
-                <div className="mb-2">
-                  <div className="text-2xl font-bold">
-                    {formatCurrency(price.unitAmount, price.currency)}{" "}
-                    <span className="text-muted-foreground text-sm font-normal">{formatInterval(price)}</span>
-                  </div>
-                </div>
-
-                {price.metadata?.nickname && <p className="text-sm font-medium mb-2">{price.metadata.nickname}</p>}
-
-                <div className="flex flex-wrap gap-2">
-                  {price.active ? (
-                    <Badge variant="softGreen">Active</Badge>
-                  ) : (
-                    <Badge variant="softGray">Inactive</Badge>
-                  )}
-
-                  {price.recurring?.usageType === "metered" && <Badge variant="softBlue">Metered</Badge>}
-
-                  <Badge variant="softGray" className="uppercase">
-                    {price.currency}
-                  </Badge>
-                </div>
-              </div>
-            );
-          })}
-        </div>
-      )}
-
-      {/* Create Price Modal */}
-      {showCreatePrice && (
-        <PriceEditor
-          productId={productId}
-          open={showCreatePrice}
-          onOpenChange={setShowCreatePrice}
-          onSuccess={() => {
-            loadPrices();
-            onPricesChange();
-          }}
+    <ContentListTable
+      data={data}
+      fields={[
+        StripePriceFields.nickname,
+        StripePriceFields.amount,
+        StripePriceFields.interval,
+        StripePriceFields.token,
+        StripePriceFields.status,
+      ]}
+      tableGeneratorType={Modules.StripePrice}
+      functions={functions}
+      fullWidth={fullWidth}
+      title={t("billing.admin.prices.title")}
+      emptyState={
+        <EmptyState
+          icon={DollarSignIcon}
+          title={t("billing.admin.prices.empty.title")}
+          description={t("billing.admin.prices.empty.description")}
         />
-      )}
-
-      {/* Edit Price Modal */}
-      {editingPrice && (
-        <PriceEditor
-          productId={productId}
-          price={editingPrice}
-          open={!!editingPrice}
-          onOpenChange={(open) => !open && setEditingPrice(null)}
-          onSuccess={() => {
-            loadPrices();
-            onPricesChange();
-            setEditingPrice(null);
-          }}
-        />
-      )}
-
-      {/* Archive Price Confirmation Dialog */}
-      <AlertDialog open={!!priceToArchive} onOpenChange={(open) => !open && setPriceToArchive(null)}>
-        <AlertDialogContent>
-          <AlertDialogHeader>
-            <AlertDialogTitle>Archive Price</AlertDialogTitle>
-            <AlertDialogDescription>
-              Are you sure you want to archive the price for{" "}
-              {priceToArchive &&
-                `${formatCurrency(priceToArchive.unitAmount, priceToArchive.currency)} ${formatInterval(priceToArchive)}`}
-              ? This will prevent new subscriptions but existing ones will continue.
-            </AlertDialogDescription>
-          </AlertDialogHeader>
-          <AlertDialogFooter>
-            <AlertDialogCancel disabled={!!archivingPriceId}>Cancel</AlertDialogCancel>
-            <AlertDialogAction
-              onClick={handleArchive}
-              disabled={!!archivingPriceId}
-              className="bg-red-600 hover:bg-red-700"
-            >
-              {archivingPriceId ? "Archiving..." : "Archive"}
-            </AlertDialogAction>
-          </AlertDialogFooter>
-        </AlertDialogContent>
-      </AlertDialog>
-
-      {/* Reactivate Price Confirmation Dialog */}
-      <AlertDialog open={!!priceToReactivate} onOpenChange={(open) => !open && setPriceToReactivate(null)}>
-        <AlertDialogContent>
-          <AlertDialogHeader>
-            <AlertDialogTitle>Reactivate Price</AlertDialogTitle>
-            <AlertDialogDescription>
-              Are you sure you want to reactivate the price for{" "}
-              {priceToReactivate &&
-                `${formatCurrency(priceToReactivate.unitAmount, priceToReactivate.currency)} ${formatInterval(priceToReactivate)}`}
-              ? This will allow new subscriptions again.
-            </AlertDialogDescription>
-          </AlertDialogHeader>
-          <AlertDialogFooter>
-            <AlertDialogCancel disabled={!!reactivatingPriceId}>Cancel</AlertDialogCancel>
-            <AlertDialogAction
-              onClick={handleReactivate}
-              disabled={!!reactivatingPriceId}
-              className="bg-green-600 hover:bg-green-700"
-            >
-              {reactivatingPriceId ? "Reactivating..." : "Reactivate"}
-            </AlertDialogAction>
-          </AlertDialogFooter>
-        </AlertDialogContent>
-      </AlertDialog>
-    </div>
+      }
+    />
   );
 }

package/src/features/billing/stripe-price/data/index.ts

@@ -1,3 +1,4 @@
 export * from "./stripe-price";
+export * from "./stripe-price.fields";
 export * from "./stripe-price.interface";
 export * from "./stripe-price.service";

package/src/features/billing/stripe-price/data/stripe-price.fields.ts

@@ -0,0 +1,8 @@
+export enum StripePriceFields {
+  stripePriceId = "stripePriceId",
+  nickname = "nickname",
+  amount = "amount",
+  interval = "interval",
+  token = "token",
+  status = "status",
+}

package/src/features/billing/stripe-price/hooks/useStripePriceTableStructure.tsx

@@ -0,0 +1,119 @@
+"use client";
+
+import { ColumnDef } from "@tanstack/react-table";
+import { useTranslations } from "next-intl";
+import { useMemo } from "react";
+import { Modules } from "../../../../core";
+import { registerTableGenerator, TableContent, usePageUrlGenerator, UseTableStructureHook } from "../../../../hooks";
+import { Badge, Link } from "../../../../shadcnui";
+import { formatCurrency, formatInterval } from "../../components/utils/currency";
+import { StripePriceFields } from "../data/stripe-price.fields";
+import { StripePriceInterface } from "../data/stripe-price.interface";
+
+export const useStripePriceTableStructure: UseTableStructureHook<StripePriceInterface, StripePriceFields> = (
+  params,
+) => {
+  const t = useTranslations();
+  const generateUrl = usePageUrlGenerator();
+
+  const tableData = useMemo(() => {
+    return params.data.map((price: StripePriceInterface) => {
+      const entry: TableContent<StripePriceInterface> = { jsonApiData: price };
+      entry[StripePriceFields.stripePriceId] = price.id;
+      params.fields.forEach((field) => {
+        entry[field] = (price as any)[field as keyof StripePriceInterface];
+      });
+      return entry;
+    });
+  }, [params.data, params.fields]);
+
+  const fieldColumnMap: Partial<Record<StripePriceFields, () => any>> = {
+    [StripePriceFields.nickname]: () => ({
+      id: "nickname",
+      accessorKey: "nickname",
+      header: t("billing.admin.prices.fields.nickname"),
+      cell: ({ row }: { row: TableContent<StripePriceInterface> }) => {
+        const price: StripePriceInterface = row.original.jsonApiData;
+        return (
+          <Link href={generateUrl({ page: Modules.StripePrice, id: price.id })}>
+            {price.nickname ?? formatCurrency(price.unitAmount, price.currency)}
+          </Link>
+        );
+      },
+      enableSorting: false,
+      enableHiding: false,
+    }),
+    [StripePriceFields.amount]: () => ({
+      id: "amount",
+      accessorKey: "amount",
+      header: t("billing.admin.prices.fields.amount"),
+      cell: ({ row }: { row: TableContent<StripePriceInterface> }) => {
+        const price: StripePriceInterface = row.original.jsonApiData;
+        // Typography role 15 (numeric): tabular-nums, right-aligned. NEVER font-mono.
+        return (
+          <span className="block text-xs tabular-nums text-right">
+            {formatCurrency(price.unitAmount, price.currency)}
+          </span>
+        );
+      },
+      enableSorting: false,
+      enableHiding: false,
+    }),
+    [StripePriceFields.interval]: () => ({
+      id: "interval",
+      accessorKey: "interval",
+      header: t("billing.admin.prices.fields.billing"),
+      cell: ({ row }: { row: TableContent<StripePriceInterface> }) => {
+        const price: StripePriceInterface = row.original.jsonApiData;
+        // Typography role 8 (UI chrome): single-line, plain text-xs.
+        return <span className="text-xs">{formatInterval(price)}</span>;
+      },
+      enableSorting: false,
+      enableHiding: false,
+    }),
+    [StripePriceFields.token]: () => ({
+      id: "token",
+      accessorKey: "token",
+      header: t("billing.admin.prices.fields.token"),
+      cell: ({ row }: { row: TableContent<StripePriceInterface> }) => {
+        const price: StripePriceInterface = row.original.jsonApiData;
+        return <span className="block text-xs tabular-nums text-right">{price.token ?? ""}</span>;
+      },
+      enableSorting: false,
+      enableHiding: false,
+    }),
+    [StripePriceFields.status]: () => ({
+      id: "status",
+      accessorKey: "status",
+      header: t("billing.admin.prices.fields.status"),
+      cell: ({ row }: { row: TableContent<StripePriceInterface> }) => {
+        const price: StripePriceInterface = row.original.jsonApiData;
+        return (
+          <span className="flex flex-wrap items-center gap-1">
+            {price.active ? (
+              <Badge variant="softGreen">{t("billing.admin.prices.status.active")}</Badge>
+            ) : (
+              <Badge variant="softGray">{t("billing.admin.prices.status.archived")}</Badge>
+            )}
+            {price.isTrial && <Badge variant="softBlue">{t("billing.admin.prices.badge.trial")}</Badge>}
+            {price.recurring?.usageType === "metered" && (
+              <Badge variant="softBlue">{t("billing.admin.prices.badge.metered")}</Badge>
+            )}
+          </span>
+        );
+      },
+      enableSorting: false,
+      enableHiding: false,
+    }),
+  };
+
+  const columns = useMemo(() => {
+    return params.fields.map((field) => fieldColumnMap[field]?.()).filter((col) => col !== undefined) as ColumnDef<
+      TableContent<StripePriceInterface>
+    >[];
+  }, [params.fields, fieldColumnMap, t, generateUrl]);
+
+  return useMemo(() => ({ data: tableData, columns: columns }), [tableData, columns]);
+};
+
+registerTableGenerator("stripe-prices", useStripePriceTableStructure);

package/src/features/billing/stripe-price/stripe-price.module.ts

@@ -4,7 +4,11 @@ import { StripePrice } from "./data/stripe-price";
 export const StripePriceModule = (factory: ModuleFactory) =>
   factory({
     name: "stripe-prices",
-    pageUrl: "/stripe-prices",
+    // The administration route this entity is served at. `name` above stays the
+    // API endpoint; this drives generateUrl / rewriteUrl / EditorSheet
+    // navigation, so it must match the real Next.js route or RoundPageContainer
+    // rewrites the URL to a 404 on the first tab change.
+    pageUrl: "/administration/prices",
     model: StripePrice,
     moduleId: "a7d3e5f1-8c9b-4a2e-b6d7-3f1c8e9a4b5d",
   });

package/src/features/billing/stripe-product/components/containers/ProductContainer.tsx

@@ -0,0 +1,45 @@
+"use client";
+
+import { useTranslations } from "next-intl";
+import { RoundPageContainer } from "../../../../../components";
+import { Modules } from "../../../../../core";
+import { PriceProvider } from "../../../contexts/PriceContext";
+import { useProductContext } from "../../../contexts/ProductContext";
+import { PricesList } from "../../../stripe-price/components/lists/PricesList";
+import { ProductDetails } from "../details/ProductDetails";
+
+export function ProductContainer() {
+  const t = useTranslations();
+  const { product } = useProductContext();
+
+  if (!product) return null;
+
+  return (
+    <RoundPageContainer
+      module={Modules.StripeProduct}
+      id={product.id}
+      tabs={[
+        {
+          sectionKey: "details",
+          label: t("billing.admin.products.tabs.details"),
+          content: <ProductDetails />,
+        },
+        {
+          key: Modules.StripePrice,
+          label: t("billing.admin.prices.title"),
+          // publishChrome={false}: SharedProvider REPLACES its value for the
+          // subtree (SharedContext.tsx:35-37), so a nested provider publishing
+          // chrome here would blank this page's own title.
+          // No `fillHeight` and no `fullWidth` on the list: a ContentListTable in
+          // a tab keeps its own bordered card and flows with the panel, exactly
+          // as ThreatList does inside GoalContainer.
+          content: (
+            <PriceProvider productId={product.id} publishChrome={false}>
+              <PricesList productId={product.id} />
+            </PriceProvider>
+          ),
+        },
+      ]}
+    />
+  );
+}

package/src/features/billing/stripe-product/components/containers/ProductsListContainer.tsx

@@ -0,0 +1,27 @@
+"use client";
+
+import { RoundPageContainer } from "../../../../../components";
+import { Modules } from "../../../../../core";
+import { ProductProvider } from "../../../contexts/ProductContext";
+import { ProductsList } from "../lists/ProductsList";
+
+/**
+ * Page container for the administrative product list.
+ *
+ * Client component by necessity: `module={Modules.StripeProduct}` is a registry
+ * entry carrying an icon component and methods, which a Server Component cannot
+ * pass across the boundary. Routes mount this container instead — the same
+ * shape as every other list page.
+ *
+ * No `forceHeader`: ContentListTable draws its own header row with the title
+ * and the create action, exactly as the company and user list pages do.
+ */
+export function ProductsListContainer() {
+  return (
+    <ProductProvider>
+      <RoundPageContainer module={Modules.StripeProduct} fullWidth>
+        <ProductsList fullWidth />
+      </RoundPageContainer>
+    </ProductProvider>
+  );
+}

package/src/features/billing/stripe-product/components/containers/index.ts

@@ -1,2 +1,2 @@
-export * from "./ProductsAdminContainer";
-export * from "./ProductsAdminPageContainer";
+export * from "./ProductContainer";
+export * from "./ProductsListContainer";

package/src/features/billing/stripe-product/components/details/ProductDetails.tsx

@@ -0,0 +1,45 @@
+"use client";
+
+import { useTranslations } from "next-intl";
+import { DetailField, SectionHeader } from "../../../../../components";
+import { Badge } from "../../../../../shadcnui";
+import { useProductContext } from "../../../contexts/ProductContext";
+
+export function ProductDetails() {
+  const t = useTranslations();
+  const { product } = useProductContext();
+
+  if (!product) return null;
+
+  return (
+    <div className="flex w-full flex-col gap-y-4">
+      <SectionHeader>{t("billing.admin.products.tabs.details")}</SectionHeader>
+      <div className="grid grid-cols-1 gap-4 md:grid-cols-2">
+        <DetailField label={t("billing.admin.products.fields.name")} value={product.name} />
+        <DetailField
+          label={t("billing.admin.products.fields.status")}
+          value={
+            product.active ? (
+              <Badge variant="softGreen">{t("billing.admin.products.status.active")}</Badge>
+            ) : (
+              <Badge variant="softGray">{t("billing.admin.products.status.archived")}</Badge>
+            )
+          }
+        />
+        <DetailField
+          label={t("billing.admin.products.fields.description")}
+          value={product.description ?? "—"}
+          className="md:col-span-2"
+        />
+        <DetailField
+          label={t("billing.admin.products.fields.prices")}
+          value={<span className="tabular-nums">{product.stripePrices.length}</span>}
+        />
+        <DetailField
+          label={t("billing.admin.products.fields.stripeId")}
+          value={<span className="tabular-nums">{product.stripeProductId}</span>}
+        />
+      </div>
+    </div>
+  );
+}

package/src/features/billing/stripe-product/components/details/index.ts

@@ -0,0 +1 @@
+export * from "./ProductDetails";