@m5kdev/web-ui 0.8.0 → 0.8.3

package/dist/src/modules/billing/components/BillingSinglePlanSelect.mjs

@@ -0,0 +1,167 @@
+import { cn } from "../../../lib/utils.mjs";
+import { Card as Card$1, CardContent, CardDescription, CardFooter, CardHeader as CardHeader$1, CardTitle } from "../../../components/ui/card.mjs";
+import { Tabs, TabsList, TabsTrigger } from "../../../components/ui/tabs.mjs";
+import { useState } from "react";
+import { Button } from "@heroui/react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Check, LogOut } from "lucide-react";
+import { useTranslation } from "react-i18next";
+import { Link as Link$1, useNavigate } from "react-router";
+import { authClient } from "@m5kdev/frontend/modules/auth/auth.lib";
+//#region src/modules/billing/components/BillingSinglePlanSelect.tsx
+function BillingSinglePlanSelect({ plan, termsOfServiceUrl, features = [
+	"Unlimited access to all features",
+	"Priority support",
+	"Early access to new features",
+	"Secure data storage",
+	"Cancel anytime"
+] }) {
+	const { t } = useTranslation("web-ui");
+	const navigate = useNavigate();
+	const [billingInterval, setBillingInterval] = useState("annually");
+	const handleLogout = async () => {
+		await authClient.signOut();
+		navigate("/login");
+	};
+	const isAnnual = billingInterval === "annually";
+	const currentPriceId = isAnnual ? plan.annualDiscountPriceId : plan.priceId;
+	const hasAnnualOption = !!plan.annualDiscountPriceId;
+	const priceUnitAmount = plan.priceUnitAmount ?? NaN;
+	const annualPriceUnitAmount = plan.annualPriceUnitAmount ?? NaN;
+	const priceDisplay = {
+		monthly: {
+			amount: `$${priceUnitAmount / 100}`,
+			label: "/ month"
+		},
+		annually: {
+			amount: `$${annualPriceUnitAmount / 100 / 12}`,
+			originalAmount: `$${priceUnitAmount / 100}`,
+			label: "/ month, billed annually",
+			discountLabel: plan.annualPriceUnitAmount ? `Save ${Math.floor((priceUnitAmount - annualPriceUnitAmount / 12) / priceUnitAmount * 100).toFixed(0)}%` : ""
+		}
+	};
+	return /* @__PURE__ */ jsxs("div", {
+		className: "w-full max-w-3xl mx-auto px-4 py-8",
+		children: [/* @__PURE__ */ jsxs("div", {
+			className: "flex flex-col items-center gap-8",
+			children: [
+				/* @__PURE__ */ jsxs("div", {
+					className: "text-center space-y-2",
+					children: [/* @__PURE__ */ jsx("h2", {
+						className: "text-3xl font-bold tracking-tight sm:text-4xl",
+						children: t("billing.plans.title", "Simple, transparent pricing")
+					}), /* @__PURE__ */ jsx("p", {
+						className: "text-muted-foreground text-lg",
+						children: t("billing.plans.subtitle", "Choose the plan that's right for you")
+					})]
+				}),
+				hasAnnualOption && /* @__PURE__ */ jsx(Tabs, {
+					defaultValue: "annually",
+					value: billingInterval,
+					onValueChange: (v) => setBillingInterval(v),
+					className: "w-full max-w-xs",
+					children: /* @__PURE__ */ jsxs(TabsList, {
+						className: "grid w-full grid-cols-2",
+						children: [/* @__PURE__ */ jsx(TabsTrigger, {
+							value: "monthly",
+							children: "Monthly"
+						}), /* @__PURE__ */ jsxs(TabsTrigger, {
+							value: "annually",
+							className: "relative",
+							children: ["Annually", priceDisplay.annually.discountLabel && /* @__PURE__ */ jsx("span", {
+								className: "absolute -top-3 -right-3 px-1.5 py-0.5 rounded-full bg-green-500 text-[10px] text-white font-medium transform rotate-12",
+								children: priceDisplay.annually.discountLabel
+							})]
+						})]
+					})
+				}),
+				/* @__PURE__ */ jsxs(Card$1, {
+					className: cn("w-full max-w-md border-2 border-primary"),
+					children: [
+						/* @__PURE__ */ jsxs(CardHeader$1, { children: [/* @__PURE__ */ jsx(CardTitle, {
+							className: "flex justify-between items-start",
+							children: /* @__PURE__ */ jsx("span", {
+								className: "text-xl font-bold",
+								children: plan.name
+							})
+						}), /* @__PURE__ */ jsx(CardDescription, { children: isAnnual ? "Perfect for long-term commitment" : "Flexible monthly billing" })] }),
+						/* @__PURE__ */ jsxs(CardContent, {
+							className: "space-y-6",
+							children: [
+								/* @__PURE__ */ jsxs("div", {
+									className: "flex items-baseline gap-1",
+									children: [/* @__PURE__ */ jsx("span", {
+										className: "text-4xl font-bold",
+										children: isAnnual ? priceDisplay.annually.amount : priceDisplay.monthly.amount
+									}), /* @__PURE__ */ jsx("span", {
+										className: "text-muted-foreground",
+										children: isAnnual ? priceDisplay.annually.label : priceDisplay.monthly.label
+									})]
+								}),
+								isAnnual && priceDisplay.annually.originalAmount && /* @__PURE__ */ jsxs("p", {
+									className: "text-sm text-green-500 line-through",
+									children: [
+										" ",
+										priceDisplay.annually.originalAmount,
+										" / month"
+									]
+								}),
+								/* @__PURE__ */ jsx("div", {
+									className: "space-y-3",
+									children: features.map((feature) => /* @__PURE__ */ jsxs("div", {
+										className: "flex items-center gap-2",
+										children: [/* @__PURE__ */ jsx("div", {
+											className: "h-5 w-5 rounded-full bg-primary/10 flex items-center justify-center shrink-0",
+											children: /* @__PURE__ */ jsx(Check, { className: "h-3 w-3 text-primary" })
+										}), /* @__PURE__ */ jsx("span", {
+											className: "text-sm text-muted-foreground",
+											children: feature
+										})]
+									}, feature))
+								})
+							]
+						}),
+						/* @__PURE__ */ jsx(CardFooter, { children: /* @__PURE__ */ jsx(Button, {
+							className: "w-full",
+							color: "primary",
+							size: "lg",
+							as: "a",
+							href: `${import.meta.env.VITE_SERVER_URL}/stripe/checkout/${currentPriceId}`,
+							children: isAnnual ? "Subscribe Annually" : "Subscribe Monthly"
+						}) })
+					]
+				}),
+				/* @__PURE__ */ jsxs("div", {
+					className: "text-balance text-center text-xs text-muted-foreground [&_a]:underline [&_a]:underline-offset-4 [&_a]:hover:text-primary",
+					children: [
+						/* @__PURE__ */ jsx("a", {
+							href: termsOfServiceUrl,
+							rel: "noopener noreferrer",
+							target: "_blank",
+							children: t("common.termsOfService", "Terms of Service")
+						}),
+						" ",
+						t("common.and", "and"),
+						" ",
+						/* @__PURE__ */ jsx(Link$1, {
+							to: "/privacy",
+							children: t("common.privacyPolicy", "Privacy Policy")
+						})
+					]
+				})
+			]
+		}), /* @__PURE__ */ jsx("div", {
+			className: "fixed bottom-4 left-4",
+			children: /* @__PURE__ */ jsxs(Button, {
+				variant: "light",
+				onPress: handleLogout,
+				className: "gap-2",
+				children: [/* @__PURE__ */ jsx(LogOut, { className: "h-4 w-4" }), t("sidebar.user.logout", "Log out")]
+			})
+		})]
+	});
+}
+//#endregion
+export { BillingSinglePlanSelect };
+
+//# sourceMappingURL=BillingSinglePlanSelect.mjs.map

package/dist/src/modules/billing/components/BillingSinglePlanSelect.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"BillingSinglePlanSelect.mjs","names":["Card","CardHeader","Link"],"sources":["../../../../../src/modules/billing/components/BillingSinglePlanSelect.tsx"],"sourcesContent":["import { Button } from \"@heroui/react\";\r\nimport type { StripePlan } from \"@m5kdev/commons/modules/billing/billing.types\";\r\nimport { authClient } from \"@m5kdev/frontend/modules/auth/auth.lib\";\r\nimport { Check, LogOut } from \"lucide-react\";\r\nimport { useState } from \"react\";\r\nimport { useTranslation } from \"react-i18next\";\r\nimport { Link, useNavigate } from \"react-router\";\r\nimport {\r\n  Card,\r\n  CardContent,\r\n  CardDescription,\r\n  CardFooter,\r\n  CardHeader,\r\n  CardTitle,\r\n} from \"../../../components/ui/card\";\r\nimport { Tabs, TabsList, TabsTrigger } from \"../../../components/ui/tabs\";\r\nimport { cn } from \"../../../lib/utils\";\r\n\r\nexport interface BillingSinglePlanSelectProps {\r\n  plan: StripePlan;\r\n  features?: string[];\r\n  /** URL for the Terms of Service link. Override for your app's legal page. */\r\n  termsOfServiceUrl?: string;\r\n}\r\n\r\nexport function BillingSinglePlanSelect({\r\n  plan,\r\n  termsOfServiceUrl,\r\n  features = [\r\n    \"Unlimited access to all features\",\r\n    \"Priority support\",\r\n    \"Early access to new features\",\r\n    \"Secure data storage\",\r\n    \"Cancel anytime\",\r\n  ],\r\n}: BillingSinglePlanSelectProps) {\r\n  const { t } = useTranslation(\"web-ui\");\r\n  const navigate = useNavigate();\r\n  const [billingInterval, setBillingInterval] = useState<\"monthly\" | \"annually\">(\"annually\");\r\n\r\n  const handleLogout = async () => {\r\n    await authClient.signOut();\r\n    navigate(\"/login\");\r\n  };\r\n\r\n  const isAnnual = billingInterval === \"annually\";\r\n  const currentPriceId = isAnnual ? plan.annualDiscountPriceId : plan.priceId;\r\n\r\n  // Fallback if no annual price ID exists\r\n  const hasAnnualOption = !!plan.annualDiscountPriceId;\r\n\r\n  const priceUnitAmount = plan.priceUnitAmount ?? Number.NaN;\r\n  const annualPriceUnitAmount = plan.annualPriceUnitAmount ?? Number.NaN;\r\n\r\n  const priceDisplay = {\r\n    monthly: {\r\n      amount: `$${priceUnitAmount / 100}`,\r\n      label: \"/ month\",\r\n    },\r\n    annually: {\r\n      amount: `$${annualPriceUnitAmount / 100 / 12}`,\r\n      originalAmount: `$${priceUnitAmount / 100}`,\r\n      label: \"/ month, billed annually\",\r\n      discountLabel: plan.annualPriceUnitAmount\r\n        ? `Save ${Math.floor(((priceUnitAmount - annualPriceUnitAmount / 12) / priceUnitAmount) * 100).toFixed(0)}%`\r\n        : \"\",\r\n    },\r\n  };\r\n\r\n  return (\r\n    <div className=\"w-full max-w-3xl mx-auto px-4 py-8\">\r\n      <div className=\"flex flex-col items-center gap-8\">\r\n        <div className=\"text-center space-y-2\">\r\n          <h2 className=\"text-3xl font-bold tracking-tight sm:text-4xl\">\r\n            {t(\"billing.plans.title\", \"Simple, transparent pricing\")}\r\n          </h2>\r\n          <p className=\"text-muted-foreground text-lg\">\r\n            {t(\"billing.plans.subtitle\", \"Choose the plan that's right for you\")}\r\n          </p>\r\n        </div>\r\n\r\n        {hasAnnualOption && (\r\n          <Tabs\r\n            defaultValue=\"annually\"\r\n            value={billingInterval}\r\n            onValueChange={(v) => setBillingInterval(v as \"monthly\" | \"annually\")}\r\n            className=\"w-full max-w-xs\"\r\n          >\r\n            <TabsList className=\"grid w-full grid-cols-2\">\r\n              <TabsTrigger value=\"monthly\">Monthly</TabsTrigger>\r\n              <TabsTrigger value=\"annually\" className=\"relative\">\r\n                Annually\r\n                {priceDisplay.annually.discountLabel && (\r\n                  <span className=\"absolute -top-3 -right-3 px-1.5 py-0.5 rounded-full bg-green-500 text-[10px] text-white font-medium transform rotate-12\">\r\n                    {priceDisplay.annually.discountLabel}\r\n                  </span>\r\n                )}\r\n              </TabsTrigger>\r\n            </TabsList>\r\n          </Tabs>\r\n        )}\r\n\r\n        <Card className={cn(\"w-full max-w-md border-2 border-primary\")}>\r\n          <CardHeader>\r\n            <CardTitle className=\"flex justify-between items-start\">\r\n              <span className=\"text-xl font-bold\">{plan.name}</span>\r\n            </CardTitle>\r\n            <CardDescription>\r\n              {isAnnual ? \"Perfect for long-term commitment\" : \"Flexible monthly billing\"}\r\n            </CardDescription>\r\n          </CardHeader>\r\n\r\n          <CardContent className=\"space-y-6\">\r\n            <div className=\"flex items-baseline gap-1\">\r\n              <span className=\"text-4xl font-bold\">\r\n                {isAnnual ? priceDisplay.annually.amount : priceDisplay.monthly.amount}\r\n              </span>\r\n              <span className=\"text-muted-foreground\">\r\n                {isAnnual ? priceDisplay.annually.label : priceDisplay.monthly.label}\r\n              </span>\r\n            </div>\r\n\r\n            {isAnnual && priceDisplay.annually.originalAmount && (\r\n              <p className=\"text-sm text-green-500 line-through\">\r\n                {\" \"}\r\n                {priceDisplay.annually.originalAmount} / month\r\n              </p>\r\n            )}\r\n\r\n            <div className=\"space-y-3\">\r\n              {features.map((feature) => (\r\n                <div key={feature} className=\"flex items-center gap-2\">\r\n                  <div className=\"h-5 w-5 rounded-full bg-primary/10 flex items-center justify-center shrink-0\">\r\n                    <Check className=\"h-3 w-3 text-primary\" />\r\n                  </div>\r\n                  <span className=\"text-sm text-muted-foreground\">{feature}</span>\r\n                </div>\r\n              ))}\r\n            </div>\r\n          </CardContent>\r\n\r\n          <CardFooter>\r\n            <Button\r\n              className=\"w-full\"\r\n              color=\"primary\"\r\n              size=\"lg\"\r\n              as=\"a\"\r\n              href={`${import.meta.env.VITE_SERVER_URL}/stripe/checkout/${currentPriceId}`}\r\n            >\r\n              {isAnnual ? \"Subscribe Annually\" : \"Subscribe Monthly\"}\r\n            </Button>\r\n          </CardFooter>\r\n        </Card>\r\n\r\n        <div className=\"text-balance text-center text-xs text-muted-foreground [&_a]:underline [&_a]:underline-offset-4 [&_a]:hover:text-primary\">\r\n          <a href={termsOfServiceUrl} rel=\"noopener noreferrer\" target=\"_blank\">\r\n            {t(\"common.termsOfService\", \"Terms of Service\")}\r\n          </a>{\" \"}\r\n          {t(\"common.and\", \"and\")}{\" \"}\r\n          <Link to=\"/privacy\">{t(\"common.privacyPolicy\", \"Privacy Policy\")}</Link>\r\n        </div>\r\n      </div>\r\n\r\n      <div className=\"fixed bottom-4 left-4\">\r\n        <Button variant=\"light\" onPress={handleLogout} className=\"gap-2\">\r\n          <LogOut className=\"h-4 w-4\" />\r\n          {t(\"sidebar.user.logout\", \"Log out\")}\r\n        </Button>\r\n      </div>\r\n    </div>\r\n  );\r\n}\r\n"],"mappings":"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"}

package/dist/src/modules/table/components/ColumnOrderAndVisibility.d.mts

@@ -0,0 +1,20 @@
+import { ColumnItem } from "./table.types.mjs";
+import * as _$react_jsx_runtime0 from "react/jsx-runtime";
+import { ColumnOrderState, VisibilityState } from "@tanstack/react-table";
+
+//#region src/modules/table/components/ColumnOrderAndVisibility.d.ts
+interface ColumnOrderAndVisibilityProps {
+  layout: ColumnItem[];
+  onChangeOrder: (order: ColumnOrderState) => void;
+  onChangeVisibility: (visibility: VisibilityState) => void;
+  onClose: () => void;
+}
+declare const ColumnOrderAndVisibility: ({
+  layout,
+  onChangeOrder,
+  onChangeVisibility,
+  onClose
+}: ColumnOrderAndVisibilityProps) => _$react_jsx_runtime0.JSX.Element;
+//#endregion
+export { ColumnOrderAndVisibility };
+//# sourceMappingURL=ColumnOrderAndVisibility.d.mts.map

package/dist/src/modules/table/components/ColumnOrderAndVisibility.mjs

@@ -0,0 +1,85 @@
+import { Button } from "../../../components/ui/button.mjs";
+import { useCallback, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { EyeIcon, EyeOffIcon, GripVertical } from "lucide-react";
+import { DndContext, KeyboardSensor, PointerSensor, useSensor, useSensors } from "@dnd-kit/core";
+import { SortableContext, arrayMove, sortableKeyboardCoordinates, useSortable, verticalListSortingStrategy } from "@dnd-kit/sortable";
+import { CSS } from "@dnd-kit/utilities";
+//#region src/modules/table/components/ColumnOrderAndVisibility.tsx
+const ColumnOrderAndVisibilityItem = ({ column, onChangeVisibilityState }) => {
+	const { attributes, listeners, setNodeRef, transform, transition } = useSortable({ id: column.id });
+	return /* @__PURE__ */ jsxs("div", {
+		ref: setNodeRef,
+		style: {
+			transform: CSS.Transform.toString(transform),
+			transition
+		},
+		className: "flex justify-between items-center gap-2",
+		children: [column.label, /* @__PURE__ */ jsxs("div", {
+			className: "flex items-center gap-2",
+			children: [/* @__PURE__ */ jsx("div", {
+				...attributes,
+				...listeners,
+				className: "cursor-grab active:cursor-grabbing touch-none",
+				children: /* @__PURE__ */ jsx(GripVertical, { className: "h-4 w-4" })
+			}), /* @__PURE__ */ jsx(Button, {
+				variant: "ghost",
+				size: "icon",
+				onClick: () => onChangeVisibilityState(String(column.id)),
+				children: column.visibility ? /* @__PURE__ */ jsx(EyeIcon, { className: "h-4 w-4" }) : /* @__PURE__ */ jsx(EyeOffIcon, { className: "h-4 w-4" })
+			})]
+		})]
+	});
+};
+const ColumnOrderAndVisibility = ({ layout, onChangeOrder, onChangeVisibility, onClose }) => {
+	const [activeLayout, setActiveLayout] = useState([...layout]);
+	const onChangeVisibilityState = useCallback((columnId) => {
+		setActiveLayout((prev) => {
+			const index = prev.findIndex((c) => c.id === columnId);
+			if (index !== -1) {
+				const newLayout = [...prev];
+				newLayout[index] = {
+					...prev[index],
+					visibility: !prev[index].visibility
+				};
+				return newLayout;
+			}
+			return prev;
+		});
+	}, []);
+	const sensors = useSensors(useSensor(PointerSensor), useSensor(KeyboardSensor, { coordinateGetter: sortableKeyboardCoordinates }));
+	const onSubmit = useCallback(() => {
+		onChangeOrder(activeLayout.map((column) => column.id));
+		onChangeVisibility(Object.fromEntries(activeLayout.map((column) => [column.id, column.visibility])));
+		onClose();
+	}, [
+		activeLayout,
+		onChangeOrder,
+		onChangeVisibility,
+		onClose
+	]);
+	return /* @__PURE__ */ jsxs("div", {
+		className: "flex flex-col gap-2 p-1 min-w-[200px]",
+		children: [/* @__PURE__ */ jsx(DndContext, {
+			onDragEnd: ({ active, over }) => {
+				if (over && active.id !== over?.id) setActiveLayout(arrayMove(activeLayout, activeLayout.findIndex(({ id }) => id === active.id), activeLayout.findIndex(({ id }) => id === over.id)));
+			},
+			sensors,
+			children: /* @__PURE__ */ jsx(SortableContext, {
+				items: activeLayout.map((column) => column.id),
+				strategy: verticalListSortingStrategy,
+				children: activeLayout.map((column) => /* @__PURE__ */ jsx(ColumnOrderAndVisibilityItem, {
+					column,
+					onChangeVisibilityState
+				}, column.id))
+			})
+		}), /* @__PURE__ */ jsx(Button, {
+			onClick: onSubmit,
+			children: "Apply"
+		})]
+	});
+};
+//#endregion
+export { ColumnOrderAndVisibility };
+
+//# sourceMappingURL=ColumnOrderAndVisibility.mjs.map

package/dist/src/modules/table/components/ColumnOrderAndVisibility.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"ColumnOrderAndVisibility.mjs","names":[],"sources":["../../../../../src/modules/table/components/ColumnOrderAndVisibility.tsx"],"sourcesContent":["import { DndContext, KeyboardSensor, PointerSensor, useSensor, useSensors } from \"@dnd-kit/core\";\r\nimport {\r\n  arrayMove,\r\n  SortableContext,\r\n  sortableKeyboardCoordinates,\r\n  useSortable,\r\n  verticalListSortingStrategy,\r\n} from \"@dnd-kit/sortable\";\r\nimport { CSS } from \"@dnd-kit/utilities\";\r\nimport { EyeIcon, EyeOffIcon, GripVertical } from \"lucide-react\";\r\nimport { useCallback, useState } from \"react\";\r\nimport type { ColumnOrderState, VisibilityState } from \"@tanstack/react-table\";\r\nimport { Button } from \"../../../components/ui/button\";\r\nimport type { ColumnItem } from \"./table.types\";\r\n\r\ninterface ColumnOrderAndVisibilityItemProps {\r\n  column: ColumnItem;\r\n  onChangeVisibilityState: (columnId: string) => void;\r\n}\r\n\r\nconst ColumnOrderAndVisibilityItem = ({\r\n  column,\r\n  onChangeVisibilityState,\r\n}: ColumnOrderAndVisibilityItemProps) => {\r\n  const { attributes, listeners, setNodeRef, transform, transition } = useSortable({\r\n    id: column.id,\r\n  });\r\n  return (\r\n    <div\r\n      ref={setNodeRef}\r\n      style={{ transform: CSS.Transform.toString(transform), transition }}\r\n      className=\"flex justify-between items-center gap-2\"\r\n    >\r\n      {column.label}\r\n      <div className=\"flex items-center gap-2\">\r\n        <div\r\n          {...attributes}\r\n          {...listeners}\r\n          className=\"cursor-grab active:cursor-grabbing touch-none\"\r\n        >\r\n          <GripVertical className=\"h-4 w-4\" />\r\n        </div>\r\n        <Button\r\n          variant=\"ghost\"\r\n          size=\"icon\"\r\n          onClick={() => onChangeVisibilityState(String(column.id))}\r\n        >\r\n          {column.visibility ? <EyeIcon className=\"h-4 w-4\" /> : <EyeOffIcon className=\"h-4 w-4\" />}\r\n        </Button>\r\n      </div>\r\n    </div>\r\n  );\r\n};\r\n\r\ninterface ColumnOrderAndVisibilityProps {\r\n  layout: ColumnItem[];\r\n  onChangeOrder: (order: ColumnOrderState) => void;\r\n  onChangeVisibility: (visibility: VisibilityState) => void;\r\n  onClose: () => void;\r\n}\r\n\r\nexport const ColumnOrderAndVisibility = ({\r\n  layout,\r\n  onChangeOrder,\r\n  onChangeVisibility,\r\n  onClose,\r\n}: ColumnOrderAndVisibilityProps) => {\r\n  const [activeLayout, setActiveLayout] = useState<ColumnItem[]>([...layout]);\r\n\r\n  const onChangeVisibilityState = useCallback((columnId: string) => {\r\n    setActiveLayout((prev) => {\r\n      const index = prev.findIndex((c) => c.id === columnId);\r\n      if (index !== -1) {\r\n        const newLayout = [...prev];\r\n        newLayout[index] = { ...prev[index], visibility: !prev[index].visibility };\r\n        return newLayout;\r\n      }\r\n      return prev;\r\n    });\r\n  }, []);\r\n\r\n  const sensors = useSensors(\r\n    useSensor(PointerSensor),\r\n    useSensor(KeyboardSensor, {\r\n      coordinateGetter: sortableKeyboardCoordinates,\r\n    })\r\n  );\r\n\r\n  const onSubmit = useCallback(() => {\r\n    onChangeOrder(activeLayout.map((column) => column.id));\r\n    onChangeVisibility(\r\n      Object.fromEntries(activeLayout.map((column) => [column.id, column.visibility]))\r\n    );\r\n    onClose();\r\n  }, [activeLayout, onChangeOrder, onChangeVisibility, onClose]);\r\n\r\n  return (\r\n    <div className=\"flex flex-col gap-2 p-1 min-w-[200px]\">\r\n      <DndContext\r\n        onDragEnd={({ active, over }) => {\r\n          if (over && active.id !== over?.id) {\r\n            const activeIndex = activeLayout.findIndex(({ id }) => id === active.id);\r\n            const overIndex = activeLayout.findIndex(({ id }) => id === over.id);\r\n\r\n            setActiveLayout(arrayMove(activeLayout, activeIndex, overIndex));\r\n          }\r\n        }}\r\n        sensors={sensors}\r\n      >\r\n        <SortableContext\r\n          items={activeLayout.map((column) => column.id)}\r\n          strategy={verticalListSortingStrategy}\r\n        >\r\n          {activeLayout.map((column) => (\r\n            <ColumnOrderAndVisibilityItem\r\n              key={column.id}\r\n              column={column}\r\n              onChangeVisibilityState={onChangeVisibilityState}\r\n            />\r\n          ))}\r\n        </SortableContext>\r\n      </DndContext>\r\n      <Button onClick={onSubmit}>Apply</Button>\r\n    </div>\r\n  );\r\n};\r\n\r\n"],"mappings":";;;;;;;;AAoBA,MAAM,gCAAgC,EACpC,QACA,8BACuC;CACvC,MAAM,EAAE,YAAY,WAAW,YAAY,WAAW,eAAe,YAAY,EAC/E,IAAI,OAAO,IACZ,CAAC;AACF,QACE,qBAAC,OAAD;EACE,KAAK;EACL,OAAO;GAAE,WAAW,IAAI,UAAU,SAAS,UAAU;GAAE;GAAY;EACnE,WAAU;YAHZ,CAKG,OAAO,OACR,qBAAC,OAAD;GAAK,WAAU;aAAf,CACE,oBAAC,OAAD;IACE,GAAI;IACJ,GAAI;IACJ,WAAU;cAEV,oBAAC,cAAD,EAAc,WAAU,WAAY,CAAA;IAChC,CAAA,EACN,oBAAC,QAAD;IACE,SAAQ;IACR,MAAK;IACL,eAAe,wBAAwB,OAAO,OAAO,GAAG,CAAC;cAExD,OAAO,aAAa,oBAAC,SAAD,EAAS,WAAU,WAAY,CAAA,GAAG,oBAAC,YAAD,EAAY,WAAU,WAAY,CAAA;IAClF,CAAA,CACL;KACF;;;AAWV,MAAa,4BAA4B,EACvC,QACA,eACA,oBACA,cACmC;CACnC,MAAM,CAAC,cAAc,mBAAmB,SAAuB,CAAC,GAAG,OAAO,CAAC;CAE3E,MAAM,0BAA0B,aAAa,aAAqB;AAChE,mBAAiB,SAAS;GACxB,MAAM,QAAQ,KAAK,WAAW,MAAM,EAAE,OAAO,SAAS;AACtD,OAAI,UAAU,IAAI;IAChB,MAAM,YAAY,CAAC,GAAG,KAAK;AAC3B,cAAU,SAAS;KAAE,GAAG,KAAK;KAAQ,YAAY,CAAC,KAAK,OAAO;KAAY;AAC1E,WAAO;;AAET,UAAO;IACP;IACD,EAAE,CAAC;CAEN,MAAM,UAAU,WACd,UAAU,cAAc,EACxB,UAAU,gBAAgB,EACxB,kBAAkB,6BACnB,CAAC,CACH;CAED,MAAM,WAAW,kBAAkB;AACjC,gBAAc,aAAa,KAAK,WAAW,OAAO,GAAG,CAAC;AACtD,qBACE,OAAO,YAAY,aAAa,KAAK,WAAW,CAAC,OAAO,IAAI,OAAO,WAAW,CAAC,CAAC,CACjF;AACD,WAAS;IACR;EAAC;EAAc;EAAe;EAAoB;EAAQ,CAAC;AAE9D,QACE,qBAAC,OAAD;EAAK,WAAU;YAAf,CACE,oBAAC,YAAD;GACE,YAAY,EAAE,QAAQ,WAAW;AAC/B,QAAI,QAAQ,OAAO,OAAO,MAAM,GAI9B,iBAAgB,UAAU,cAHN,aAAa,WAAW,EAAE,SAAS,OAAO,OAAO,GAAG,EACtD,aAAa,WAAW,EAAE,SAAS,OAAO,KAAK,GAAG,CAEL,CAAC;;GAG3D;aAET,oBAAC,iBAAD;IACE,OAAO,aAAa,KAAK,WAAW,OAAO,GAAG;IAC9C,UAAU;cAET,aAAa,KAAK,WACjB,oBAAC,8BAAD;KAEU;KACiB;KACzB,EAHK,OAAO,GAGZ,CACF;IACc,CAAA;GACP,CAAA,EACb,oBAAC,QAAD;GAAQ,SAAS;aAAU;GAAc,CAAA,CACrC"}

package/dist/src/modules/table/components/NuqsTable.d.mts

@@ -0,0 +1,36 @@
+import { ColumnDataType as ColumnDataType$1 } from "./table.types.mjs";
+import * as _$react_jsx_runtime0 from "react/jsx-runtime";
+import { ColumnDef } from "@tanstack/react-table";
+import { FilterMethods } from "@m5kdev/commons/modules/table/filter.types";
+import { TableParams } from "@m5kdev/frontend/modules/table/hooks/useNuqsTable";
+
+//#region src/modules/table/components/NuqsTable.d.ts
+type NuqsTableColumn<T> = ColumnDef<T> & {
+  visible?: boolean;
+  type?: ColumnDataType$1;
+  options?: {
+    label: string;
+    value: string;
+  }[];
+  endColumnId?: string;
+  groupable?: boolean;
+};
+type NuqsTableParams<T> = {
+  data: T[];
+  total?: number;
+  columns: NuqsTableColumn<T>[];
+  tableProps: TableParams;
+  singleFilter?: boolean;
+  filterMethods?: Partial<FilterMethods>;
+};
+declare const NuqsTable: <T>({
+  data,
+  total,
+  columns,
+  tableProps,
+  singleFilter,
+  filterMethods
+}: NuqsTableParams<T>) => _$react_jsx_runtime0.JSX.Element;
+//#endregion
+export { NuqsTable, NuqsTableColumn };
+//# sourceMappingURL=NuqsTable.d.mts.map

package/dist/src/modules/table/components/NuqsTable.mjs

@@ -0,0 +1,308 @@
+import { Button as Button$1 } from "../../../components/ui/button.mjs";
+import { Table as Table$1, TableBody as TableBody$1, TableCell as TableCell$1, TableHead, TableHeader as TableHeader$1, TableRow as TableRow$1 } from "../../../components/ui/table.mjs";
+import { ColumnOrderAndVisibility } from "./ColumnOrderAndVisibility.mjs";
+import { TableFiltering } from "./TableFiltering.mjs";
+import { TableGroupBy } from "./TableGroupBy.mjs";
+import { TablePagination } from "./TablePagination.mjs";
+import { useEffect, useMemo, useState } from "react";
+import { Checkbox, Popover, PopoverContent, PopoverTrigger } from "@heroui/react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+import { ChevronDown, ChevronRight, ChevronUp } from "lucide-react";
+import { flexRender, getCoreRowModel, getExpandedRowModel, getGroupedRowModel, getPaginationRowModel, useReactTable } from "@tanstack/react-table";
+//#region src/modules/table/components/NuqsTable.tsx
+function getStorageKey(columnIds) {
+	return `table-column-layout-${[...columnIds].sort().join(",")}`;
+}
+function loadLayoutFromStorage(columnIds) {
+	if (typeof window === "undefined") return null;
+	try {
+		const key = getStorageKey(columnIds);
+		const stored = localStorage.getItem(key);
+		if (!stored) return null;
+		return JSON.parse(stored);
+	} catch {
+		return null;
+	}
+}
+function saveLayoutToStorage(columnIds, order, visibility) {
+	if (typeof window === "undefined") return;
+	try {
+		const key = getStorageKey(columnIds);
+		localStorage.setItem(key, JSON.stringify({
+			order,
+			visibility
+		}));
+	} catch {}
+}
+function applyOrder(prev, nextOrder) {
+	const byId = new Map(prev.map((i) => [i.id, i]));
+	const ordered = nextOrder.map((id) => byId.get(id)).filter(Boolean);
+	for (const item of prev) if (!nextOrder.includes(item.id)) ordered.push(item);
+	return ordered;
+}
+function applyVisibility(prev, visibility) {
+	return prev.map((column) => ({
+		...column,
+		visibility: visibility[String(column.id)] ?? column.visibility
+	}));
+}
+const NuqsTable = ({ data, total, columns, tableProps, singleFilter = false, filterMethods }) => {
+	const columnIds = useMemo(() => columns.map((col) => String(col.id)), [columns]);
+	console.log("data", data);
+	const initialLayout = useMemo(() => {
+		const defaultLayout = columns.map((column) => ({
+			id: String(column.id),
+			label: column.header,
+			visibility: column.visible !== void 0 ? column.visible : true,
+			options: column.options ?? [],
+			type: column.type ?? void 0
+		}));
+		const saved = loadLayoutFromStorage(columnIds);
+		if (!saved) return defaultLayout;
+		const savedById = /* @__PURE__ */ new Map();
+		saved.order.forEach((id, index) => {
+			savedById.set(id, {
+				order: index,
+				visibility: saved.visibility[id] ?? true
+			});
+		});
+		const merged = [];
+		const processedIds = /* @__PURE__ */ new Set();
+		saved.order.forEach((id) => {
+			const defaultCol = defaultLayout.find((col) => col.id === id);
+			if (defaultCol) {
+				merged.push({
+					...defaultCol,
+					visibility: saved.visibility[id] ?? defaultCol.visibility
+				});
+				processedIds.add(id);
+			}
+		});
+		defaultLayout.forEach((col) => {
+			if (!processedIds.has(col.id)) merged.push(col);
+		});
+		return merged;
+	}, [columns, columnIds]);
+	const [layout, setLayout] = useState(initialLayout);
+	useEffect(() => {
+		setLayout(initialLayout);
+	}, [initialLayout]);
+	useEffect(() => {
+		saveLayoutToStorage(columnIds, layout.map((col) => col.id), Object.fromEntries(layout.map((col) => [col.id, col.visibility])));
+	}, [layout, columnIds]);
+	const columnOrder = useMemo(() => layout.map((column) => column.id), [layout]);
+	const columnVisibility = useMemo(() => Object.fromEntries(layout.map((column) => [column.id, column.visibility])), [layout]);
+	const { limit = 10, page = 1, sorting, setSorting, setPagination, pagination, rowSelection, setRowSelection, setFilters, filters, grouping, setGrouping } = tableProps;
+	const isGrouped = grouping.length > 0;
+	const [expanded, setExpanded] = useState({});
+	useEffect(() => {
+		if (!isGrouped && data.length === 0 && page > 1 && total !== void 0) setPagination?.({
+			pageIndex: page - 2,
+			pageSize: limit
+		});
+	}, [
+		data.length,
+		page,
+		limit,
+		total,
+		setPagination,
+		isGrouped
+	]);
+	const serverPageCount = total !== void 0 ? Math.ceil(total / limit) || 1 : data.length === limit ? page + 1 : Math.max(page, Math.ceil(data.length / limit));
+	const table = useReactTable({
+		data,
+		columns,
+		getRowId: (row) => String(row.id),
+		manualSorting: true,
+		manualPagination: !isGrouped,
+		state: {
+			pagination,
+			sorting,
+			rowSelection,
+			columnOrder,
+			columnVisibility,
+			grouping,
+			expanded
+		},
+		...isGrouped ? {} : { pageCount: serverPageCount },
+		manualFiltering: true,
+		enableGrouping: true,
+		groupedColumnMode: false,
+		autoResetExpanded: false,
+		onSortingChange: setSorting,
+		onPaginationChange: setPagination,
+		onRowSelectionChange: setRowSelection,
+		onGroupingChange: setGrouping,
+		onExpandedChange: setExpanded,
+		getCoreRowModel: getCoreRowModel(),
+		getGroupedRowModel: getGroupedRowModel(),
+		getExpandedRowModel: getExpandedRowModel(),
+		getPaginationRowModel: getPaginationRowModel(),
+		onColumnOrderChange: (updater) => {
+			setLayout((prev) => applyOrder(prev, typeof updater === "function" ? updater(prev.map((i) => i.id)) : updater));
+		},
+		onColumnVisibilityChange: (updater) => {
+			setLayout((prev) => applyVisibility(prev, typeof updater === "function" ? updater(Object.fromEntries(prev.map((i) => [i.id, i.visibility]))) : updater));
+		}
+	});
+	const onChangeOrder = (order) => {
+		setLayout((prev) => applyOrder(prev, order));
+	};
+	const onChangeVisibility = (visibility) => {
+		setLayout((prev) => applyVisibility(prev, visibility));
+	};
+	const onFiltersChange = (filters) => {
+		setFilters?.(filters);
+	};
+	const filterableColumns = useMemo(() => {
+		const baseColumns = columns.filter((column) => Boolean(column.type)).map((column) => ({
+			id: String(column.id),
+			label: String(column.header),
+			type: column.type,
+			options: column.options ?? [],
+			endColumnId: column.endColumnId,
+			periodStartColumnId: null,
+			periodEndColumnId: null
+		}));
+		const periodColumns = columns.filter((column) => column.type === "date" && column.endColumnId).map((column) => ({
+			id: `${String(column.id)}__period`,
+			label: "Period",
+			type: "date",
+			options: [],
+			endColumnId: null,
+			periodStartColumnId: String(column.id),
+			periodEndColumnId: column.endColumnId
+		}));
+		return [...baseColumns, ...periodColumns];
+	}, [columns]);
+	const groupableColumns = useMemo(() => columns.filter((col) => col.groupable).map((col) => ({
+		id: String(col.id),
+		label: String(col.header)
+	})), [columns]);
+	const hasGrouping = grouping.length > 0;
+	const [isFiltersOpen, setIsFiltersOpen] = useState(false);
+	const [isColumnsOpen, setIsColumnsOpen] = useState(false);
+	const [isGroupByOpen, setIsGroupByOpen] = useState(false);
+	return /* @__PURE__ */ jsxs(Fragment$1, { children: [
+		/* @__PURE__ */ jsxs("div", {
+			className: "flex w-full items-center gap-2 justify-end",
+			children: [
+				/* @__PURE__ */ jsxs(Popover, {
+					placement: "bottom",
+					isOpen: isFiltersOpen,
+					onOpenChange: setIsFiltersOpen,
+					portalContainer: document.body,
+					children: [/* @__PURE__ */ jsx(PopoverTrigger, { children: /* @__PURE__ */ jsx(Button$1, {
+						variant: "outline",
+						size: "sm",
+						children: /* @__PURE__ */ jsxs("div", {
+							className: "flex items-center gap-2",
+							children: ["Filters", /* @__PURE__ */ jsx(ChevronDown, { className: "h-4 w-4" })]
+						})
+					}) }), /* @__PURE__ */ jsx(PopoverContent, { children: /* @__PURE__ */ jsx(TableFiltering, {
+						columns: filterableColumns,
+						onFiltersChange,
+						filters: filters ?? [],
+						onClose: () => setIsFiltersOpen(false),
+						singleFilter,
+						filterMethods
+					}) })]
+				}),
+				groupableColumns.length > 0 && /* @__PURE__ */ jsxs(Popover, {
+					placement: "bottom",
+					isOpen: isGroupByOpen,
+					onOpenChange: setIsGroupByOpen,
+					portalContainer: document.body,
+					children: [/* @__PURE__ */ jsx(PopoverTrigger, { children: /* @__PURE__ */ jsx(Button$1, {
+						variant: hasGrouping ? "secondary" : "outline",
+						size: "sm",
+						children: /* @__PURE__ */ jsxs("div", {
+							className: "flex items-center gap-2",
+							children: [hasGrouping ? `Grouped by: ${grouping.map((id) => groupableColumns.find((c) => c.id === id)?.label ?? id).join(" → ")}` : "Group by", /* @__PURE__ */ jsx(ChevronDown, { className: "h-4 w-4" })]
+						})
+					}) }), /* @__PURE__ */ jsx(PopoverContent, { children: /* @__PURE__ */ jsx(TableGroupBy, {
+						columns: groupableColumns,
+						activeGrouping: grouping,
+						onGroupingChange: (columnIds) => {
+							setGrouping(columnIds);
+							setExpanded({});
+							setPagination?.({
+								pageIndex: 0,
+								pageSize: limit
+							});
+						},
+						onClose: () => setIsGroupByOpen(false)
+					}) })]
+				}),
+				/* @__PURE__ */ jsxs(Popover, {
+					placement: "bottom",
+					isOpen: isColumnsOpen,
+					onOpenChange: setIsColumnsOpen,
+					portalContainer: document.body,
+					children: [/* @__PURE__ */ jsx(PopoverTrigger, { children: /* @__PURE__ */ jsx(Button$1, {
+						variant: "outline",
+						size: "sm",
+						children: /* @__PURE__ */ jsxs("div", {
+							className: "flex items-center gap-2",
+							children: ["Columns", /* @__PURE__ */ jsx(ChevronDown, { className: "h-4 w-4" })]
+						})
+					}) }), /* @__PURE__ */ jsx(PopoverContent, { children: /* @__PURE__ */ jsx(ColumnOrderAndVisibility, {
+						layout,
+						onChangeOrder,
+						onChangeVisibility,
+						onClose: () => setIsColumnsOpen(false)
+					}) })]
+				})
+			]
+		}),
+		/* @__PURE__ */ jsxs(Table$1, { children: [/* @__PURE__ */ jsx(TableHeader$1, { children: /* @__PURE__ */ jsxs(TableRow$1, { children: [/* @__PURE__ */ jsx(TableHead, { children: /* @__PURE__ */ jsx(Checkbox, {
+			isSelected: table.getIsAllRowsSelected(),
+			onValueChange: (checked) => {
+				table.toggleAllRowsSelected(checked);
+			}
+		}) }), table.getHeaderGroups()[0].headers.map((header) => /* @__PURE__ */ jsxs(TableHead, {
+			onClick: header.column.getCanSort() ? header.column.getToggleSortingHandler() : void 0,
+			children: [flexRender(header.column.columnDef.header, header.getContext()), header.column.getCanSort() && /* @__PURE__ */ jsxs(Fragment$1, { children: [header.column.getIsSorted() === "asc" && /* @__PURE__ */ jsx(ChevronUp, { className: "h-4 w-4 inline ml-1" }), header.column.getIsSorted() === "desc" && /* @__PURE__ */ jsx(ChevronDown, { className: "h-4 w-4 inline ml-1" })] })]
+		}, header.id))] }) }), /* @__PURE__ */ jsx(TableBody$1, { children: table.getRowModel().rows.map((row) => {
+			if (row.getIsGrouped()) return /* @__PURE__ */ jsxs(TableRow$1, {
+				className: "bg-muted/40 font-medium cursor-pointer hover:bg-muted/60",
+				onClick: () => row.toggleExpanded(),
+				children: [/* @__PURE__ */ jsx(TableCell$1, {}), row.getVisibleCells().map((cell) => {
+					if (cell.getIsGrouped()) return /* @__PURE__ */ jsx(TableCell$1, { children: /* @__PURE__ */ jsxs("span", {
+						className: "flex items-center gap-1.5",
+						children: [
+							row.getIsExpanded() ? /* @__PURE__ */ jsx(ChevronDown, { className: "h-4 w-4 shrink-0" }) : /* @__PURE__ */ jsx(ChevronRight, { className: "h-4 w-4 shrink-0" }),
+							flexRender(cell.column.columnDef.cell, cell.getContext()),
+							/* @__PURE__ */ jsxs("span", {
+								className: "text-muted-foreground font-normal ml-1",
+								children: [
+									"(",
+									row.subRows.length,
+									")"
+								]
+							})
+						]
+					}) }, cell.id);
+					if (cell.getIsAggregated()) return /* @__PURE__ */ jsx(TableCell$1, { children: flexRender(cell.column.columnDef.aggregatedCell ?? cell.column.columnDef.cell, cell.getContext()) }, cell.id);
+					return /* @__PURE__ */ jsx(TableCell$1, {}, cell.id);
+				})]
+			}, row.id);
+			return /* @__PURE__ */ jsxs(TableRow$1, { children: [/* @__PURE__ */ jsx(TableCell$1, { children: /* @__PURE__ */ jsx(Checkbox, {
+				isSelected: row.getIsSelected(),
+				onValueChange: (checked) => {
+					row.toggleSelected(checked);
+				}
+			}) }), row.getVisibleCells().map((cell) => /* @__PURE__ */ jsx(TableCell$1, { children: flexRender(cell.column.columnDef.cell, cell.getContext()) }, cell.id))] }, row.id);
+		}) })] }),
+		/* @__PURE__ */ jsx(TablePagination, {
+			pageCount: isGrouped ? Math.ceil(table.getPrePaginationRowModel().rows.length / limit) || 1 : serverPageCount,
+			page: isGrouped ? table.getState().pagination.pageIndex + 1 : page,
+			limit,
+			setPagination
+		})
+	] });
+};
+//#endregion
+export { NuqsTable };
+
+//# sourceMappingURL=NuqsTable.mjs.map