@gtcx/templates 0.1.0

package/dist/index.mjs

@@ -0,0 +1,1386 @@
+// src/types.ts
+function templateActionsToPageHeaderActions(actions) {
+  return actions.map((action) => ({
+    key: action.key,
+    label: action.label,
+    onClick: action.onAction,
+    kind: action.kind,
+    disabled: action.disabled,
+    ariaLabel: action.ariaLabel,
+    icon: action.icon
+  }));
+}
+
+// src/template-frame.tsx
+import { Card, Typography as Typography2, Space as Space2, theme as theme2 } from "antd";
+
+// src/components/page-header.tsx
+import { Typography, Space, Button, Breadcrumb, theme } from "antd";
+import { jsx, jsxs } from "react/jsx-runtime";
+var { Title, Text } = Typography;
+function PageHeader({ title, subtitle, breadcrumbs, actions }) {
+  const { token } = theme.useToken();
+  return /* @__PURE__ */ jsxs("header", { style: { marginBottom: token.marginLG }, children: [
+    breadcrumbs && breadcrumbs.length > 0 && /* @__PURE__ */ jsx(
+      Breadcrumb,
+      {
+        style: { marginBottom: token.marginSM },
+        items: breadcrumbs.map((item) => ({
+          title: item.href ? /* @__PURE__ */ jsx("a", { href: item.href, style: { color: token.colorText }, children: item.label }) : item.label
+        }))
+      }
+    ),
+    /* @__PURE__ */ jsxs("div", { style: { display: "flex", justifyContent: "space-between", alignItems: "flex-start" }, children: [
+      /* @__PURE__ */ jsxs("div", { children: [
+        /* @__PURE__ */ jsx(Title, { level: 3, style: { margin: 0 }, children: title }),
+        subtitle && /* @__PURE__ */ jsx(Text, { style: { marginTop: token.marginXXS, color: token.colorTextSecondary }, children: subtitle })
+      ] }),
+      actions && actions.length > 0 && /* @__PURE__ */ jsx(Space, { children: actions.map((action) => /* @__PURE__ */ jsx(
+        Button,
+        {
+          type: action.kind === "primary" ? "primary" : action.kind === "link" ? "link" : "default",
+          danger: action.kind === "danger",
+          disabled: action.disabled,
+          icon: action.icon,
+          onClick: action.onClick,
+          "aria-label": action.ariaLabel,
+          children: action.label
+        },
+        action.key
+      )) })
+    ] })
+  ] });
+}
+
+// src/template-frame.tsx
+import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+var { Text: Text2 } = Typography2;
+function TemplateFrame({
+  title,
+  subtitle,
+  breadcrumbs,
+  data: _data,
+  actions,
+  filters,
+  audit,
+  layout,
+  children
+}) {
+  const { token } = theme2.useToken();
+  const showBreadcrumbs = layout?.showBreadcrumbs ?? true;
+  const contentPadding = layout?.contentPadding ?? void 0;
+  const pageHeaderActions = actions ? templateActionsToPageHeaderActions(actions) : void 0;
+  return /* @__PURE__ */ jsxs2("div", { style: { padding: contentPadding }, children: [
+    /* @__PURE__ */ jsx2(
+      PageHeader,
+      {
+        title,
+        subtitle,
+        breadcrumbs: showBreadcrumbs ? breadcrumbs : void 0,
+        actions: pageHeaderActions
+      }
+    ),
+    filters?.content && /* @__PURE__ */ jsx2("div", { style: { marginBottom: token.marginLG }, children: filters.content }),
+    /* @__PURE__ */ jsx2("main", { children }),
+    audit && /* @__PURE__ */ jsx2(
+      Card,
+      {
+        size: "small",
+        style: { marginTop: token.marginXL },
+        styles: { body: { padding: token.paddingSM } },
+        children: /* @__PURE__ */ jsxs2(Space2, { direction: "vertical", size: 4, children: [
+          audit.summary && /* @__PURE__ */ jsx2(Text2, { style: { color: token.colorTextSecondary }, children: audit.summary }),
+          /* @__PURE__ */ jsxs2(Space2, { size: "large", wrap: true, children: [
+            audit.lastUpdatedAt && /* @__PURE__ */ jsxs2(Text2, { style: { fontSize: token.fontSizeSM, color: token.colorTextSecondary }, children: [
+              "Updated: ",
+              /* @__PURE__ */ jsx2("time", { dateTime: audit.lastUpdatedAt, children: audit.lastUpdatedAt })
+            ] }),
+            audit.lastUpdatedBy && /* @__PURE__ */ jsxs2(Text2, { style: { fontSize: token.fontSizeSM, color: token.colorTextSecondary }, children: [
+              "By: ",
+              audit.lastUpdatedBy
+            ] }),
+            audit.sourceSystem && /* @__PURE__ */ jsxs2(Text2, { style: { fontSize: token.fontSizeSM, color: token.colorTextSecondary }, children: [
+              "Source: ",
+              audit.sourceSystem
+            ] }),
+            audit.evidenceUrl && /* @__PURE__ */ jsx2(
+              "a",
+              {
+                href: audit.evidenceUrl,
+                target: "_blank",
+                rel: "noopener noreferrer",
+                style: { fontSize: token.fontSizeSM, color: token.colorPrimary },
+                children: "View Evidence"
+              }
+            )
+          ] })
+        ] })
+      }
+    )
+  ] });
+}
+
+// src/components/kpi-card.tsx
+import { ArrowUpOutlined, ArrowDownOutlined, MinusOutlined } from "@ant-design/icons";
+import { Card as Card2, Typography as Typography3, Space as Space3, theme as theme3 } from "antd";
+import { jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
+var { Text: Text3, Title: Title2 } = Typography3;
+function KpiCard({
+  label,
+  value,
+  delta,
+  trend,
+  helpText,
+  icon,
+  onClick,
+  "aria-label": ariaLabel
+}) {
+  const { token } = theme3.useToken();
+  const trendColor = trend === "up" ? token.colorSuccess : trend === "down" ? token.colorError : token.colorTextSecondary;
+  const TrendIcon = trend === "up" ? ArrowUpOutlined : trend === "down" ? ArrowDownOutlined : MinusOutlined;
+  const isInteractive = !!onClick;
+  const handleKeyDown = (e) => {
+    if (isInteractive && (e.key === "Enter" || e.key === " ")) {
+      e.preventDefault();
+      onClick?.();
+    }
+  };
+  return /* @__PURE__ */ jsx3(
+    Card2,
+    {
+      size: "small",
+      hoverable: isInteractive,
+      onClick,
+      tabIndex: isInteractive ? 0 : void 0,
+      role: isInteractive ? "button" : void 0,
+      onKeyDown: isInteractive ? handleKeyDown : void 0,
+      "aria-label": ariaLabel ?? label,
+      styles: { body: { padding: token.paddingMD } },
+      children: /* @__PURE__ */ jsxs3(Space3, { direction: "vertical", size: 4, style: { width: "100%" }, children: [
+        /* @__PURE__ */ jsxs3(Space3, { size: "small", children: [
+          icon && /* @__PURE__ */ jsx3("span", { style: { color: token.colorTextSecondary }, children: icon }),
+          /* @__PURE__ */ jsx3(Text3, { type: "secondary", style: { fontSize: token.fontSizeSM }, children: label })
+        ] }),
+        /* @__PURE__ */ jsx3(Title2, { level: 3, style: { margin: 0 }, children: value }),
+        (delta || helpText) && /* @__PURE__ */ jsxs3(Space3, { size: "small", children: [
+          delta && trend && /* @__PURE__ */ jsxs3(Text3, { style: { color: trendColor, fontSize: token.fontSizeSM }, children: [
+            /* @__PURE__ */ jsx3(TrendIcon, { style: { marginRight: 4 } }),
+            delta
+          ] }),
+          helpText && /* @__PURE__ */ jsx3(Text3, { type: "secondary", style: { fontSize: token.fontSizeSM }, children: helpText })
+        ] })
+      ] })
+    }
+  );
+}
+
+// src/components/section-card.tsx
+import { Card as Card3, Typography as Typography4, theme as theme4 } from "antd";
+import { jsx as jsx4, jsxs as jsxs4 } from "react/jsx-runtime";
+var { Title: Title3 } = Typography4;
+function SectionCard({ title, subtitle, extra, children, noPadding }) {
+  const { token } = theme4.useToken();
+  return /* @__PURE__ */ jsxs4(
+    Card3,
+    {
+      role: "region",
+      "aria-label": title,
+      styles: { body: noPadding ? { padding: 0 } : void 0 },
+      children: [
+        (title || extra) && /* @__PURE__ */ jsxs4(
+          "div",
+          {
+            style: {
+              display: "flex",
+              justifyContent: "space-between",
+              alignItems: "flex-start",
+              marginBottom: token.marginMD
+            },
+            children: [
+              /* @__PURE__ */ jsxs4("div", { children: [
+                title && /* @__PURE__ */ jsx4(Title3, { level: 4, style: { margin: 0 }, children: title }),
+                subtitle && /* @__PURE__ */ jsx4("span", { style: { color: token.colorTextSecondary, fontSize: token.fontSizeSM }, children: subtitle })
+              ] }),
+              extra && /* @__PURE__ */ jsx4("div", { children: extra })
+            ]
+          }
+        ),
+        children
+      ]
+    }
+  );
+}
+
+// src/components/bulk-actions.tsx
+import { Button as Button2, Space as Space4, Typography as Typography5, theme as theme5 } from "antd";
+import { jsx as jsx5, jsxs as jsxs5 } from "react/jsx-runtime";
+var { Text: Text4 } = Typography5;
+function BulkActionsBar({
+  selectedCount,
+  selectedRowKeys,
+  actions,
+  onClear
+}) {
+  const { token } = theme5.useToken();
+  if (selectedCount === 0) return null;
+  return /* @__PURE__ */ jsxs5(
+    "div",
+    {
+      role: "toolbar",
+      "aria-label": "Bulk actions",
+      style: {
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "space-between",
+        padding: `${token.paddingSM}px ${token.paddingMD}px`,
+        background: token.colorBgContainer,
+        border: `1px solid ${token.colorPrimaryBorder ?? token.colorPrimary}`,
+        borderRadius: token.borderRadius,
+        marginBottom: token.marginMD
+      },
+      children: [
+        /* @__PURE__ */ jsxs5(Space4, { children: [
+          /* @__PURE__ */ jsxs5(Text4, { strong: true, "aria-live": "polite", children: [
+            selectedCount,
+            " selected"
+          ] }),
+          onClear && /* @__PURE__ */ jsx5(Button2, { type: "text", size: "small", onClick: onClear, children: "Clear" })
+        ] }),
+        /* @__PURE__ */ jsx5(Space4, { children: actions.map((action) => {
+          const isDanger = action.kind === "danger";
+          return /* @__PURE__ */ jsx5(
+            Button2,
+            {
+              type: isDanger ? "default" : action.kind === "primary" ? "primary" : action.kind === "link" ? "link" : "default",
+              danger: isDanger,
+              size: "small",
+              disabled: action.disabled,
+              onClick: () => action.onAction(selectedRowKeys),
+              children: action.label
+            },
+            action.key
+          );
+        }) })
+      ]
+    }
+  );
+}
+
+// src/components/audit-trail.tsx
+import { ClockCircleOutlined } from "@ant-design/icons";
+import { Timeline, Card as Card4, Typography as Typography6, Space as Space5, Button as Button3, Spin, theme as theme6 } from "antd";
+import { jsx as jsx6, jsxs as jsxs6 } from "react/jsx-runtime";
+var { Text: Text5, Title: Title4 } = Typography6;
+function AuditTrail({
+  title = "Audit Trail",
+  events,
+  loading,
+  onLoadMore
+}) {
+  const { token } = theme6.useToken();
+  const timelineItems = events.map((event) => ({
+    key: event.key,
+    dot: /* @__PURE__ */ jsx6(ClockCircleOutlined, { style: { fontSize: 14 } }),
+    children: /* @__PURE__ */ jsxs6(Space5, { direction: "vertical", size: 2, children: [
+      /* @__PURE__ */ jsxs6(Space5, { size: "small", wrap: true, children: [
+        /* @__PURE__ */ jsx6(Text5, { strong: true, children: event.action }),
+        event.by && /* @__PURE__ */ jsxs6(Text5, { type: "secondary", children: [
+          "by ",
+          event.by
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxs6(Text5, { type: "secondary", style: { fontSize: token.fontSizeSM }, children: [
+        /* @__PURE__ */ jsx6("time", { dateTime: event.at, children: event.at }),
+        event.sourceSystem && ` \xB7 ${event.sourceSystem}`
+      ] }),
+      event.description && /* @__PURE__ */ jsx6("div", { children: event.description }),
+      event.evidenceUrl && /* @__PURE__ */ jsx6(
+        "a",
+        {
+          href: event.evidenceUrl,
+          target: "_blank",
+          rel: "noopener noreferrer",
+          style: { fontSize: token.fontSizeSM },
+          children: "View Evidence"
+        }
+      )
+    ] })
+  }));
+  return /* @__PURE__ */ jsxs6(Card4, { children: [
+    /* @__PURE__ */ jsx6(Title4, { level: 5, style: { marginBottom: token.marginMD }, children: title }),
+    loading && events.length === 0 ? /* @__PURE__ */ jsx6("div", { style: { textAlign: "center", padding: token.paddingLG }, children: /* @__PURE__ */ jsx6(Spin, {}) }) : /* @__PURE__ */ jsxs6("div", { role: "log", "aria-label": title, children: [
+      /* @__PURE__ */ jsx6(Timeline, { items: timelineItems }),
+      onLoadMore && /* @__PURE__ */ jsx6("div", { style: { textAlign: "center" }, children: /* @__PURE__ */ jsx6(Button3, { type: "link", onClick: onLoadMore, loading, children: "Load more" }) })
+    ] })
+  ] });
+}
+
+// src/templates/dashboard.tsx
+import { Row, Col, Space as Space6, theme as theme7 } from "antd";
+import { jsx as jsx7, jsxs as jsxs7 } from "react/jsx-runtime";
+function DashboardTemplate({
+  title,
+  subtitle,
+  breadcrumbs,
+  data,
+  actions,
+  filters,
+  audit,
+  layout
+}) {
+  const { token } = theme7.useToken();
+  const kpis = data?.kpis ?? [];
+  const panels = data?.panels ?? [];
+  return /* @__PURE__ */ jsx7(
+    TemplateFrame,
+    {
+      title,
+      subtitle,
+      breadcrumbs,
+      data,
+      actions,
+      filters,
+      audit,
+      layout,
+      children: /* @__PURE__ */ jsxs7(Space6, { direction: "vertical", size: "large", style: { width: "100%" }, children: [
+        kpis.length > 0 && /* @__PURE__ */ jsx7(Row, { gutter: [token.marginMD, token.marginMD], children: kpis.map((kpi) => /* @__PURE__ */ jsx7(Col, { xs: 24, sm: 12, lg: 6, children: /* @__PURE__ */ jsx7(
+          KpiCard,
+          {
+            label: kpi.label,
+            value: kpi.value,
+            delta: kpi.delta,
+            trend: kpi.trend,
+            helpText: kpi.helpText,
+            icon: kpi.icon,
+            onClick: kpi.onClick
+          }
+        ) }, kpi.key)) }),
+        panels.length > 0 && /* @__PURE__ */ jsx7(Row, { gutter: [token.marginMD, token.marginMD], children: panels.map((panel) => /* @__PURE__ */ jsx7(Col, { xs: 24, lg: panel.span ?? 12, children: /* @__PURE__ */ jsx7(SectionCard, { title: panel.title, subtitle: panel.subtitle, extra: panel.extra, children: panel.content }) }, panel.key)) })
+      ] })
+    }
+  );
+}
+
+// src/templates/list.tsx
+import { DownloadOutlined } from "@ant-design/icons";
+import { Table, Button as Button4, Space as Space7, Card as Card5, theme as theme8 } from "antd";
+import { jsx as jsx8, jsxs as jsxs8 } from "react/jsx-runtime";
+function ListTemplate({
+  title,
+  subtitle,
+  breadcrumbs,
+  data,
+  actions,
+  filters,
+  audit,
+  layout,
+  table,
+  selection,
+  exports: exportSpecs,
+  tools
+}) {
+  const { token } = theme8.useToken();
+  const items = data?.items ?? [];
+  const loading = data?.loading ?? false;
+  const selectedRowKeys = selection?.selectedRowKeys;
+  const selectedCount = selectedRowKeys?.length ?? 0;
+  const bulkActions = selection?.bulkActions?.map((action) => ({
+    key: action.key,
+    label: action.label,
+    kind: action.kind,
+    disabled: action.disabled,
+    onAction: (keys) => action.onAction(keys)
+  })) ?? [];
+  const rowSelection = selection?.enabled ? {
+    ...selectedRowKeys !== void 0 ? { selectedRowKeys } : {},
+    onChange: (keys) => selection.onSelectionChange?.(keys),
+    getCheckboxProps: (record, index) => {
+      if (selection.getAriaLabel) {
+        const label = selection.getAriaLabel(record, index);
+        return { name: label, "aria-label": `Select ${label}` };
+      }
+      const fallback = record?.name ?? record?.title ?? record?.key ?? "row";
+      return {
+        name: String(fallback),
+        "aria-label": `Select ${fallback}`
+      };
+    }
+  } : void 0;
+  const hasToolbar = exportSpecs && exportSpecs.length > 0 || tools;
+  return /* @__PURE__ */ jsx8(
+    TemplateFrame,
+    {
+      title,
+      subtitle,
+      breadcrumbs,
+      data,
+      actions,
+      filters,
+      audit,
+      layout,
+      children: /* @__PURE__ */ jsxs8(Space7, { direction: "vertical", size: "middle", style: { width: "100%" }, children: [
+        hasToolbar && /* @__PURE__ */ jsxs8(
+          "div",
+          {
+            style: {
+              display: "flex",
+              justifyContent: "flex-end",
+              gap: token.marginSM,
+              flexWrap: "wrap"
+            },
+            children: [
+              exportSpecs?.map((exp) => /* @__PURE__ */ jsx8(
+                Button4,
+                {
+                  icon: exp.icon ?? /* @__PURE__ */ jsx8(DownloadOutlined, {}),
+                  onClick: exp.onExport,
+                  disabled: exp.disabled,
+                  children: exp.label
+                },
+                exp.key
+              )),
+              tools
+            ]
+          }
+        ),
+        selection?.enabled && selectedCount > 0 && /* @__PURE__ */ jsx8(
+          BulkActionsBar,
+          {
+            selectedCount,
+            selectedRowKeys: selectedRowKeys ?? [],
+            actions: bulkActions,
+            onClear: () => selection.onSelectionChange?.([])
+          }
+        ),
+        /* @__PURE__ */ jsx8(Card5, { styles: { body: { padding: 0 } }, children: /* @__PURE__ */ jsx8(Table, { ...table, dataSource: items, loading, rowSelection }) })
+      ] })
+    }
+  );
+}
+
+// src/templates/detail.tsx
+import { Descriptions, Space as Space8 } from "antd";
+import { jsx as jsx9, jsxs as jsxs9 } from "react/jsx-runtime";
+function DetailTemplate({
+  title,
+  subtitle,
+  breadcrumbs,
+  data,
+  actions,
+  audit,
+  layout
+}) {
+  const summary = data?.summary;
+  const sections = data?.sections ?? [];
+  const auditTrail = data?.auditTrail;
+  return /* @__PURE__ */ jsx9(
+    TemplateFrame,
+    {
+      title,
+      subtitle,
+      breadcrumbs,
+      data,
+      actions,
+      audit,
+      layout,
+      children: /* @__PURE__ */ jsxs9(Space8, { direction: "vertical", size: "large", style: { width: "100%" }, children: [
+        summary && /* @__PURE__ */ jsx9(SectionCard, { children: /* @__PURE__ */ jsx9(
+          Descriptions,
+          {
+            items: summary.items,
+            column: summary.columns ?? { xs: 1, sm: 2, lg: 3 },
+            size: "small",
+            bordered: true
+          }
+        ) }),
+        sections.map((section) => /* @__PURE__ */ jsx9(SectionCard, { title: section.title, extra: section.extra, children: section.content }, section.key)),
+        auditTrail && (auditTrail.events.length > 0 || auditTrail.loading) && /* @__PURE__ */ jsx9(
+          AuditTrail,
+          {
+            title: auditTrail.title,
+            events: auditTrail.events,
+            loading: auditTrail.loading,
+            onLoadMore: auditTrail.onLoadMore
+          }
+        )
+      ] })
+    }
+  );
+}
+
+// src/templates/error.tsx
+import { Result, Button as Button5, Space as Space9, theme as theme9 } from "antd";
+import { jsx as jsx10, jsxs as jsxs10 } from "react/jsx-runtime";
+var defaultTitles = {
+  401: "Unauthorized",
+  403: "Access Denied",
+  404: "Page Not Found",
+  500: "Server Error"
+};
+var defaultMessages = {
+  401: "You need to sign in to access this page.",
+  403: "You don't have permission to access this resource.",
+  404: "The page you're looking for doesn't exist or has been moved.",
+  500: "Something went wrong on our end. Please try again later."
+};
+var statusToResultStatus = {
+  401: "warning",
+  403: "error",
+  404: "404",
+  500: "500"
+};
+function ErrorPageTemplate({
+  status,
+  title,
+  message,
+  actions,
+  extra
+}) {
+  const { token } = theme9.useToken();
+  const resolvedTitle = title ?? defaultTitles[status];
+  const resolvedMessage = message ?? defaultMessages[status];
+  return /* @__PURE__ */ jsx10(
+    "div",
+    {
+      style: {
+        minHeight: "100vh",
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+        padding: token.paddingLG,
+        background: token.colorBgLayout
+      },
+      children: /* @__PURE__ */ jsx10(
+        Result,
+        {
+          status: statusToResultStatus[status],
+          title: resolvedTitle,
+          subTitle: resolvedMessage,
+          extra: /* @__PURE__ */ jsxs10(Space9, { direction: "vertical", size: "middle", align: "center", children: [
+            actions && actions.length > 0 && /* @__PURE__ */ jsx10(Space9, { children: actions.map((action) => /* @__PURE__ */ jsx10(
+              Button5,
+              {
+                type: action.kind === "primary" ? "primary" : action.kind === "link" ? "link" : "default",
+                danger: action.kind === "danger",
+                disabled: action.disabled,
+                icon: action.icon,
+                onClick: action.onAction,
+                "aria-label": action.ariaLabel,
+                children: action.label
+              },
+              action.key
+            )) }),
+            extra
+          ] })
+        }
+      )
+    }
+  );
+}
+
+// src/templates/wizard.tsx
+import { Steps, Space as Space10, Empty } from "antd";
+import { jsx as jsx11, jsxs as jsxs11 } from "react/jsx-runtime";
+function WizardTemplate({
+  title,
+  subtitle,
+  breadcrumbs,
+  actions,
+  data,
+  filters,
+  audit,
+  layout,
+  onStepChange
+}) {
+  const steps = data?.steps ?? [];
+  const currentStep = data?.currentStep ?? 0;
+  const activeStep = steps[currentStep];
+  return /* @__PURE__ */ jsx11(
+    TemplateFrame,
+    {
+      title,
+      subtitle,
+      breadcrumbs,
+      actions,
+      data,
+      filters,
+      audit,
+      layout,
+      children: steps.length === 0 ? /* @__PURE__ */ jsx11(Empty, { description: "No steps configured" }) : /* @__PURE__ */ jsxs11(Space10, { direction: "vertical", size: "large", style: { width: "100%" }, children: [
+        /* @__PURE__ */ jsx11(
+          Steps,
+          {
+            current: currentStep,
+            onChange: onStepChange,
+            items: steps.map((step) => ({
+              key: step.key,
+              title: step.title,
+              description: step.description
+            }))
+          }
+        ),
+        activeStep && /* @__PURE__ */ jsx11(SectionCard, { title: activeStep.title, subtitle: activeStep.description, children: activeStep.content })
+      ] })
+    }
+  );
+}
+
+// src/templates/settings.tsx
+import { Space as Space11 } from "antd";
+import { jsx as jsx12 } from "react/jsx-runtime";
+function SettingsTemplate({
+  title,
+  subtitle,
+  breadcrumbs,
+  actions,
+  data,
+  filters,
+  audit,
+  layout
+}) {
+  const sections = data?.sections ?? [];
+  return /* @__PURE__ */ jsx12(
+    TemplateFrame,
+    {
+      title,
+      subtitle,
+      breadcrumbs,
+      actions,
+      data,
+      filters,
+      audit,
+      layout,
+      children: /* @__PURE__ */ jsx12(Space11, { direction: "vertical", size: "large", style: { width: "100%" }, children: sections.map((section) => /* @__PURE__ */ jsx12(SectionCard, { title: section.title, subtitle: section.subtitle, children: section.content }, section.key)) })
+    }
+  );
+}
+
+// src/templates/auth-shell.tsx
+import { Card as Card6, Typography as Typography7, theme as theme10 } from "antd";
+import { jsx as jsx13, jsxs as jsxs12 } from "react/jsx-runtime";
+var { Title: Title5, Text: Text6 } = Typography7;
+function AuthShell({
+  brand,
+  title,
+  subtitle,
+  footer,
+  children,
+  maxWidth = 420
+}) {
+  const { token } = theme10.useToken();
+  return /* @__PURE__ */ jsx13(
+    "div",
+    {
+      style: {
+        minHeight: "100vh",
+        display: "flex",
+        flexDirection: "column",
+        alignItems: "center",
+        justifyContent: "center",
+        padding: token.paddingLG,
+        background: token.colorBgLayout
+      },
+      children: /* @__PURE__ */ jsxs12("div", { style: { width: "100%", maxWidth }, children: [
+        brand && /* @__PURE__ */ jsx13("div", { style: { textAlign: "center", marginBottom: token.marginLG }, children: brand }),
+        /* @__PURE__ */ jsxs12(Card6, { styles: { body: { padding: token.paddingXL } }, children: [
+          (title || subtitle) && /* @__PURE__ */ jsxs12("div", { style: { textAlign: "center", marginBottom: token.marginLG }, children: [
+            title && /* @__PURE__ */ jsx13(Title5, { level: 3, style: { margin: 0 }, children: title }),
+            subtitle && /* @__PURE__ */ jsx13(
+              Text6,
+              {
+                style: {
+                  marginTop: token.marginXS,
+                  display: "block",
+                  color: token.colorTextSecondary
+                },
+                children: subtitle
+              }
+            )
+          ] }),
+          children
+        ] }),
+        footer && /* @__PURE__ */ jsx13(
+          "div",
+          {
+            style: {
+              textAlign: "center",
+              marginTop: token.marginLG,
+              color: token.colorTextSecondary,
+              fontSize: token.fontSizeSM
+            },
+            children: footer
+          }
+        )
+      ] })
+    }
+  );
+}
+
+// src/templates/profile.tsx
+import { Avatar, Descriptions as Descriptions2, Space as Space12, Tabs, Tag, Typography as Typography8, theme as theme11 } from "antd";
+import { jsx as jsx14, jsxs as jsxs13 } from "react/jsx-runtime";
+function ProfileTemplate({
+  title,
+  breadcrumbs,
+  actions,
+  data,
+  filters: _filters,
+  audit,
+  layout
+}) {
+  const { token } = theme11.useToken();
+  const profile = data ?? {};
+  return /* @__PURE__ */ jsxs13(
+    TemplateFrame,
+    {
+      title: title ?? profile.name ?? "Profile",
+      breadcrumbs,
+      actions,
+      audit,
+      layout,
+      children: [
+        /* @__PURE__ */ jsxs13("div", { style: { display: "flex", gap: 24, flexWrap: "wrap", marginBottom: 24 }, children: [
+          /* @__PURE__ */ jsx14(
+            Avatar,
+            {
+              size: 96,
+              src: profile.avatar ? /* @__PURE__ */ jsx14("img", { src: profile.avatar, alt: profile.name ?? "Profile avatar" }) : void 0,
+              children: profile.name?.[0]
+            }
+          ),
+          /* @__PURE__ */ jsxs13("div", { style: { flex: 1 }, children: [
+            /* @__PURE__ */ jsx14(Typography8.Title, { level: 3, style: { margin: 0 }, children: profile.name }),
+            profile.role && /* @__PURE__ */ jsx14(Typography8.Text, { style: { color: token.colorTextSecondary }, children: profile.role }),
+            profile.bio && /* @__PURE__ */ jsx14(Typography8.Paragraph, { style: { marginTop: 8 }, children: profile.bio }),
+            profile.tags && /* @__PURE__ */ jsx14(Space12, { wrap: true, children: profile.tags.map((tag) => /* @__PURE__ */ jsx14(Tag, { children: tag }, tag)) })
+          ] })
+        ] }),
+        profile.stats && profile.stats.length > 0 && /* @__PURE__ */ jsx14(
+          "div",
+          {
+            style: {
+              display: "flex",
+              gap: 32,
+              padding: "16px 0",
+              borderTop: `1px solid ${token.colorBorderSecondary}`,
+              borderBottom: `1px solid ${token.colorBorderSecondary}`,
+              marginBottom: 24
+            },
+            children: profile.stats.map((stat) => /* @__PURE__ */ jsxs13("div", { style: { textAlign: "center" }, children: [
+              /* @__PURE__ */ jsx14("div", { style: { fontSize: 24, fontWeight: 600 }, children: stat.value }),
+              /* @__PURE__ */ jsx14("div", { style: { fontSize: 13, color: token.colorTextSecondary }, children: stat.label })
+            ] }, stat.label))
+          }
+        ),
+        profile.details && /* @__PURE__ */ jsx14(Descriptions2, { column: 2, style: { marginBottom: 24 }, children: profile.details.map((d) => /* @__PURE__ */ jsx14(Descriptions2.Item, { label: d.label, children: d.value }, d.label)) }),
+        profile.tabs && profile.tabs.length > 0 && /* @__PURE__ */ jsx14(
+          Tabs,
+          {
+            items: profile.tabs.map((tab) => ({
+              key: tab.key,
+              label: tab.label,
+              children: tab.content
+            }))
+          }
+        )
+      ]
+    }
+  );
+}
+
+// src/templates/billing.tsx
+import { Descriptions as Descriptions3, Space as Space13, Table as Table2, Tag as Tag2, Typography as Typography9, theme as theme12 } from "antd";
+import { jsx as jsx15, jsxs as jsxs14 } from "react/jsx-runtime";
+function BillingTemplate({
+  title = "Billing",
+  breadcrumbs,
+  actions,
+  data,
+  audit,
+  layout,
+  onChangePlan: _onChangePlan,
+  onAddPaymentMethod: _onAddPaymentMethod
+}) {
+  const { token } = theme12.useToken();
+  const billing = data ?? {};
+  const invoiceColumns = [
+    { title: "Invoice", dataIndex: "id", key: "id" },
+    { title: "Date", dataIndex: "date", key: "date" },
+    { title: "Amount", dataIndex: "amount", key: "amount" },
+    {
+      title: "Status",
+      dataIndex: "status",
+      key: "status",
+      render: (status) => /* @__PURE__ */ jsx15(
+        Tag2,
+        {
+          color: status === "paid" ? "#166534" : status === "pending" ? "#92400e" : "#991b1b",
+          style: { color: "#ffffff", borderColor: "transparent" },
+          children: status
+        }
+      )
+    }
+  ];
+  return /* @__PURE__ */ jsx15(
+    TemplateFrame,
+    {
+      title,
+      breadcrumbs,
+      actions,
+      audit,
+      layout,
+      children: /* @__PURE__ */ jsxs14(Space13, { direction: "vertical", size: "large", style: { width: "100%" }, children: [
+        billing.currentPlan && /* @__PURE__ */ jsx15(SectionCard, { title: "Current Plan", children: /* @__PURE__ */ jsxs14(Descriptions3, { column: 2, children: [
+          /* @__PURE__ */ jsx15(Descriptions3.Item, { label: "Plan", children: billing.currentPlan.name }),
+          /* @__PURE__ */ jsxs14(Descriptions3.Item, { label: "Price", children: [
+            billing.currentPlan.price,
+            billing.currentPlan.interval && ` / ${billing.currentPlan.interval}`
+          ] })
+        ] }) }),
+        billing.paymentMethods && billing.paymentMethods.length > 0 && /* @__PURE__ */ jsx15(SectionCard, { title: "Payment Methods", children: billing.paymentMethods.map((pm, i) => /* @__PURE__ */ jsxs14(
+          "div",
+          {
+            style: {
+              display: "flex",
+              justifyContent: "space-between",
+              padding: "8px 0",
+              borderBottom: `1px solid ${token.colorBorderSecondary}`
+            },
+            children: [
+              /* @__PURE__ */ jsxs14("span", { children: [
+                pm.type,
+                " ending in ",
+                pm.last4
+              ] }),
+              /* @__PURE__ */ jsxs14("span", { children: [
+                pm.expiry && /* @__PURE__ */ jsxs14(Typography9.Text, { style: { color: token.colorTextSecondary }, children: [
+                  "Expires ",
+                  pm.expiry
+                ] }),
+                pm.isDefault && /* @__PURE__ */ jsx15(
+                  Tag2,
+                  {
+                    color: "#1d4ed8",
+                    style: { marginLeft: 8, color: "#ffffff", borderColor: "transparent" },
+                    children: "Default"
+                  }
+                )
+              ] })
+            ]
+          },
+          i
+        )) }),
+        billing.invoices && billing.invoices.length > 0 && /* @__PURE__ */ jsx15(SectionCard, { title: "Invoice History", children: /* @__PURE__ */ jsx15(
+          Table2,
+          {
+            dataSource: billing.invoices,
+            columns: invoiceColumns,
+            rowKey: "id",
+            pagination: false,
+            size: "small"
+          }
+        ) })
+      ] })
+    }
+  );
+}
+
+// src/templates/security.tsx
+import { Descriptions as Descriptions4, Space as Space14, Table as Table3, Tag as Tag3 } from "antd";
+import { jsx as jsx16, jsxs as jsxs15 } from "react/jsx-runtime";
+function SecurityTemplate({
+  title = "Security",
+  breadcrumbs,
+  actions,
+  data,
+  audit,
+  layout
+}) {
+  const security = data ?? {};
+  const sessionColumns = [
+    { title: "Device", dataIndex: "device", key: "device" },
+    { title: "Location", dataIndex: "location", key: "location" },
+    { title: "Last Active", dataIndex: "lastActive", key: "lastActive" },
+    {
+      title: "Current Session",
+      key: "current",
+      render: (_, record) => record.isCurrent ? /* @__PURE__ */ jsx16(Tag3, { color: "#166534", style: { color: "#ffffff", borderColor: "transparent" }, children: "Current" }) : null
+    }
+  ];
+  const logColumns = [
+    { title: "Time", dataIndex: "timestamp", key: "timestamp" },
+    { title: "Action", dataIndex: "action", key: "action" },
+    { title: "IP", dataIndex: "ip", key: "ip" },
+    {
+      title: "Status",
+      dataIndex: "status",
+      key: "status",
+      render: (status) => /* @__PURE__ */ jsx16(
+        Tag3,
+        {
+          color: status === "success" ? "#166534" : status === "warning" ? "#92400e" : "#991b1b",
+          style: { color: "#ffffff", borderColor: "transparent" },
+          children: status
+        }
+      )
+    }
+  ];
+  return /* @__PURE__ */ jsx16(
+    TemplateFrame,
+    {
+      title,
+      breadcrumbs,
+      actions,
+      audit,
+      layout,
+      children: /* @__PURE__ */ jsxs15(Space14, { direction: "vertical", size: "large", style: { width: "100%" }, children: [
+        /* @__PURE__ */ jsx16(SectionCard, { title: "Overview", children: /* @__PURE__ */ jsxs15(Descriptions4, { column: 2, children: [
+          /* @__PURE__ */ jsx16(Descriptions4.Item, { label: "Two-Factor Authentication", children: /* @__PURE__ */ jsx16(
+            Tag3,
+            {
+              color: security.twoFactorEnabled ? "#166534" : "#525252",
+              style: { color: "#ffffff", borderColor: "transparent" },
+              children: security.twoFactorEnabled ? "Enabled" : "Disabled"
+            }
+          ) }),
+          security.passwordLastChanged && /* @__PURE__ */ jsx16(Descriptions4.Item, { label: "Password Last Changed", children: security.passwordLastChanged })
+        ] }) }),
+        security.sessions && security.sessions.length > 0 && /* @__PURE__ */ jsx16(SectionCard, { title: "Active Sessions", children: /* @__PURE__ */ jsx16(
+          Table3,
+          {
+            dataSource: security.sessions,
+            columns: sessionColumns,
+            rowKey: "id",
+            pagination: false,
+            size: "small"
+          }
+        ) }),
+        security.securityLog && security.securityLog.length > 0 && /* @__PURE__ */ jsx16(SectionCard, { title: "Security Log", children: /* @__PURE__ */ jsx16(
+          Table3,
+          {
+            dataSource: security.securityLog,
+            columns: logColumns,
+            rowKey: "timestamp",
+            pagination: { pageSize: 10 },
+            size: "small"
+          }
+        ) })
+      ] })
+    }
+  );
+}
+
+// src/templates/members.tsx
+import { Avatar as Avatar2, Space as Space15, Table as Table4, Tag as Tag4, Typography as Typography10, theme as theme13 } from "antd";
+import { jsx as jsx17, jsxs as jsxs16 } from "react/jsx-runtime";
+function MembersTemplate({
+  title = "Team Members",
+  breadcrumbs,
+  actions,
+  data,
+  audit,
+  layout
+}) {
+  const { token } = theme13.useToken();
+  const members = data ?? {};
+  const memberColumns = [
+    {
+      title: "Member",
+      key: "member",
+      render: (_, record) => /* @__PURE__ */ jsxs16(Space15, { children: [
+        /* @__PURE__ */ jsx17(Avatar2, { size: "small", src: record.avatar, children: record.name[0] }),
+        /* @__PURE__ */ jsxs16("div", { children: [
+          /* @__PURE__ */ jsx17("div", { style: { fontWeight: 500 }, children: record.name }),
+          /* @__PURE__ */ jsx17(Typography10.Text, { style: { fontSize: 12, color: token.colorTextSecondary }, children: record.email })
+        ] })
+      ] })
+    },
+    { title: "Role", dataIndex: "role", key: "role", render: (role) => /* @__PURE__ */ jsx17(Tag4, { children: role }) },
+    {
+      title: "Status",
+      dataIndex: "status",
+      key: "status",
+      render: (status) => /* @__PURE__ */ jsx17(
+        Tag4,
+        {
+          color: status === "active" ? "#166534" : status === "invited" ? "#92400e" : "#525252",
+          style: { color: "#ffffff", borderColor: "transparent" },
+          children: status
+        }
+      )
+    },
+    { title: "Joined", dataIndex: "joinedAt", key: "joinedAt" }
+  ];
+  return /* @__PURE__ */ jsx17(
+    TemplateFrame,
+    {
+      title,
+      breadcrumbs,
+      actions,
+      audit,
+      layout,
+      children: /* @__PURE__ */ jsxs16(Space15, { direction: "vertical", size: "large", style: { width: "100%" }, children: [
+        members.roles && members.roles.length > 0 && /* @__PURE__ */ jsx17(SectionCard, { title: "Roles", children: /* @__PURE__ */ jsx17("div", { style: { display: "flex", gap: 16, flexWrap: "wrap" }, children: members.roles.map((role) => /* @__PURE__ */ jsxs16(
+          "div",
+          {
+            style: {
+              padding: "12px 16px",
+              border: `1px solid ${token.colorBorderSecondary}`,
+              borderRadius: 8,
+              minWidth: 150
+            },
+            children: [
+              /* @__PURE__ */ jsx17("div", { style: { fontWeight: 600 }, children: role.name }),
+              role.description && /* @__PURE__ */ jsx17("div", { style: { fontSize: 12, color: token.colorTextSecondary }, children: role.description }),
+              /* @__PURE__ */ jsxs16("div", { style: { fontSize: 13, marginTop: 4 }, children: [
+                role.memberCount,
+                " members"
+              ] })
+            ]
+          },
+          role.name
+        )) }) }),
+        members.members && members.members.length > 0 && /* @__PURE__ */ jsx17(SectionCard, { title: `Members${members.totalMembers ? ` (${members.totalMembers})` : ""}`, children: /* @__PURE__ */ jsx17(
+          Table4,
+          {
+            dataSource: members.members,
+            columns: memberColumns,
+            rowKey: "id",
+            pagination: { pageSize: 10 },
+            size: "small"
+          }
+        ) })
+      ] })
+    }
+  );
+}
+
+// src/templates/notifications.tsx
+import { Space as Space16, Switch, Typography as Typography11, theme as theme14 } from "antd";
+import { jsx as jsx18, jsxs as jsxs17 } from "react/jsx-runtime";
+function NotificationsTemplate({
+  title = "Notifications",
+  breadcrumbs,
+  actions,
+  data,
+  audit,
+  layout,
+  onToggle
+}) {
+  const { token } = theme14.useToken();
+  const notifications = data ?? {};
+  return /* @__PURE__ */ jsx18(
+    TemplateFrame,
+    {
+      title,
+      breadcrumbs,
+      actions,
+      audit,
+      layout,
+      children: /* @__PURE__ */ jsx18(Space16, { direction: "vertical", size: "large", style: { width: "100%" }, children: notifications.groups?.map((group) => /* @__PURE__ */ jsx18(SectionCard, { title: group.title, children: group.channels.map((channel) => /* @__PURE__ */ jsxs17(
+        "div",
+        {
+          style: {
+            display: "flex",
+            justifyContent: "space-between",
+            alignItems: "center",
+            padding: "12px 0",
+            borderBottom: `1px solid ${token.colorBorderSecondary}`
+          },
+          children: [
+            /* @__PURE__ */ jsxs17("div", { children: [
+              /* @__PURE__ */ jsx18("div", { style: { fontWeight: 500, color: token.colorText }, children: channel.label }),
+              channel.description && /* @__PURE__ */ jsx18(Typography11.Text, { style: { fontSize: 12, color: token.colorTextSecondary }, children: channel.description })
+            ] }),
+            /* @__PURE__ */ jsxs17(Space16, { size: "large", children: [
+              /* @__PURE__ */ jsxs17(Space16, { direction: "vertical", align: "center", size: 0, children: [
+                /* @__PURE__ */ jsx18(Typography11.Text, { style: { fontSize: 12, color: token.colorTextSecondary }, children: "Email" }),
+                /* @__PURE__ */ jsx18(
+                  Switch,
+                  {
+                    size: "small",
+                    checked: channel.email,
+                    "aria-label": `${channel.label}: email notifications`,
+                    onChange: (v) => onToggle?.(channel.key, "email", v)
+                  }
+                )
+              ] }),
+              /* @__PURE__ */ jsxs17(Space16, { direction: "vertical", align: "center", size: 0, children: [
+                /* @__PURE__ */ jsx18(Typography11.Text, { style: { fontSize: 12, color: token.colorTextSecondary }, children: "Push" }),
+                /* @__PURE__ */ jsx18(
+                  Switch,
+                  {
+                    size: "small",
+                    checked: channel.push,
+                    "aria-label": `${channel.label}: push notifications`,
+                    onChange: (v) => onToggle?.(channel.key, "push", v)
+                  }
+                )
+              ] }),
+              /* @__PURE__ */ jsxs17(Space16, { direction: "vertical", align: "center", size: 0, children: [
+                /* @__PURE__ */ jsx18(Typography11.Text, { style: { fontSize: 12, color: token.colorTextSecondary }, children: "SMS" }),
+                /* @__PURE__ */ jsx18(
+                  Switch,
+                  {
+                    size: "small",
+                    checked: channel.sms,
+                    "aria-label": `${channel.label}: sms notifications`,
+                    onChange: (v) => onToggle?.(channel.key, "sms", v)
+                  }
+                )
+              ] })
+            ] })
+          ]
+        },
+        channel.key
+      )) }, group.title)) })
+    }
+  );
+}
+
+// src/templates/activity.tsx
+import { Avatar as Avatar3, Space as Space17, Timeline as Timeline2, Typography as Typography12, theme as theme15 } from "antd";
+import { jsx as jsx19, jsxs as jsxs18 } from "react/jsx-runtime";
+var colorMap = {
+  info: "#1d4ed8",
+  success: "#166534",
+  warning: "#92400e",
+  error: "#991b1b"
+};
+function ActivityTemplate({
+  title = "Activity",
+  breadcrumbs,
+  actions,
+  data,
+  audit,
+  layout
+}) {
+  const { token } = theme15.useToken();
+  const activity = data ?? {};
+  return /* @__PURE__ */ jsx19(
+    TemplateFrame,
+    {
+      title,
+      breadcrumbs,
+      actions,
+      audit,
+      layout,
+      children: /* @__PURE__ */ jsx19(
+        Timeline2,
+        {
+          items: activity.events?.map((event) => ({
+            color: colorMap[event.type ?? "info"],
+            children: /* @__PURE__ */ jsx19("div", { children: /* @__PURE__ */ jsxs18(Space17, { align: "start", children: [
+              /* @__PURE__ */ jsx19(Avatar3, { size: "small", src: event.actor.avatar, children: event.actor.name[0] }),
+              /* @__PURE__ */ jsxs18("div", { children: [
+                /* @__PURE__ */ jsxs18("div", { children: [
+                  /* @__PURE__ */ jsx19(Typography12.Text, { strong: true, children: event.actor.name }),
+                  " ",
+                  /* @__PURE__ */ jsx19(Typography12.Text, { children: event.action }),
+                  event.target && /* @__PURE__ */ jsxs18(Typography12.Text, { strong: true, children: [
+                    " ",
+                    event.target
+                  ] })
+                ] }),
+                /* @__PURE__ */ jsx19(Typography12.Text, { style: { fontSize: 12, color: token.colorTextSecondary }, children: event.timestamp }),
+                event.detail && /* @__PURE__ */ jsx19("div", { style: { marginTop: 4 }, children: event.detail })
+              ] })
+            ] }) }, event.id)
+          }))
+        }
+      )
+    }
+  );
+}
+
+// src/templates/invite.tsx
+import { Card as Card7, Input, Space as Space18, Typography as Typography13, theme as theme16 } from "antd";
+import { jsx as jsx20, jsxs as jsxs19 } from "react/jsx-runtime";
+function InviteTemplate({
+  title = "Invite a Friend",
+  breadcrumbs,
+  actions,
+  data,
+  audit,
+  layout,
+  onCopyLink
+}) {
+  const { token } = theme16.useToken();
+  const invite = data ?? {};
+  return /* @__PURE__ */ jsx20(
+    TemplateFrame,
+    {
+      title,
+      breadcrumbs,
+      actions,
+      audit,
+      layout,
+      children: /* @__PURE__ */ jsxs19(Space18, { direction: "vertical", size: "large", style: { width: "100%" }, children: [
+        /* @__PURE__ */ jsx20(SectionCard, { title: "Your Referral Link", children: /* @__PURE__ */ jsxs19(Space18, { direction: "vertical", style: { width: "100%" }, children: [
+          invite.referralLink && /* @__PURE__ */ jsx20(
+            Input.Search,
+            {
+              value: invite.referralLink,
+              readOnly: true,
+              enterButton: "Copy",
+              "aria-label": "Referral link",
+              onSearch: onCopyLink
+            }
+          ),
+          invite.referralCode && /* @__PURE__ */ jsxs19(Typography13.Text, { style: { color: token.colorTextSecondary }, children: [
+            "Referral code: ",
+            /* @__PURE__ */ jsx20(Typography13.Text, { code: true, children: invite.referralCode })
+          ] })
+        ] }) }),
+        /* @__PURE__ */ jsxs19("div", { style: { display: "flex", gap: 16, flexWrap: "wrap" }, children: [
+          /* @__PURE__ */ jsxs19(Card7, { size: "small", style: { flex: 1, minWidth: 150, textAlign: "center" }, children: [
+            /* @__PURE__ */ jsx20("div", { style: { fontSize: 28, fontWeight: 700 }, children: invite.totalInvites ?? 0 }),
+            /* @__PURE__ */ jsx20("div", { style: { color: token.colorTextSecondary, fontSize: 13 }, children: "Invites Sent" })
+          ] }),
+          /* @__PURE__ */ jsxs19(Card7, { size: "small", style: { flex: 1, minWidth: 150, textAlign: "center" }, children: [
+            /* @__PURE__ */ jsx20("div", { style: { fontSize: 28, fontWeight: 700 }, children: invite.acceptedInvites ?? 0 }),
+            /* @__PURE__ */ jsx20("div", { style: { color: token.colorTextSecondary, fontSize: 13 }, children: "Accepted" })
+          ] })
+        ] }),
+        invite.rewards && invite.rewards.length > 0 && /* @__PURE__ */ jsx20(SectionCard, { title: "Rewards", children: invite.rewards.map((reward) => /* @__PURE__ */ jsxs19(
+          "div",
+          {
+            style: {
+              display: "flex",
+              alignItems: "center",
+              gap: 12,
+              padding: "12px 0",
+              borderBottom: `1px solid ${token.colorBorderSecondary}`
+            },
+            children: [
+              reward.icon && /* @__PURE__ */ jsx20("div", { children: reward.icon }),
+              /* @__PURE__ */ jsxs19("div", { children: [
+                /* @__PURE__ */ jsx20("div", { style: { fontWeight: 500 }, children: reward.label }),
+                reward.description && /* @__PURE__ */ jsx20(Typography13.Text, { style: { fontSize: 12, color: token.colorTextSecondary }, children: reward.description })
+              ] })
+            ]
+          },
+          reward.label
+        )) })
+      ] })
+    }
+  );
+}
+
+// src/templates/projects.tsx
+import { Avatar as Avatar4, Card as Card8, Progress, Space as Space19, Tag as Tag5, Typography as Typography14, theme as theme17 } from "antd";
+import { jsx as jsx21, jsxs as jsxs20 } from "react/jsx-runtime";
+var statusColor = {
+  active: "#1d4ed8",
+  completed: "#166534",
+  "on-hold": "#92400e",
+  archived: "#525252"
+};
+function ProjectsTemplate({
+  title = "Projects",
+  breadcrumbs,
+  actions,
+  data,
+  audit,
+  layout,
+  onProjectClick
+}) {
+  const { token } = theme17.useToken();
+  const projects = data ?? {};
+  const cols = projects.columns ?? 3;
+  return /* @__PURE__ */ jsx21(
+    TemplateFrame,
+    {
+      title,
+      breadcrumbs,
+      actions,
+      audit,
+      layout,
+      children: /* @__PURE__ */ jsx21(
+        "div",
+        {
+          style: {
+            display: "grid",
+            gridTemplateColumns: `repeat(${cols}, 1fr)`,
+            gap: 16
+          },
+          children: projects.projects?.map((project) => /* @__PURE__ */ jsx21(
+            Card8,
+            {
+              hoverable: true,
+              size: "small",
+              onClick: () => onProjectClick?.(project),
+              style: { cursor: "pointer" },
+              children: /* @__PURE__ */ jsxs20(Space19, { direction: "vertical", style: { width: "100%" }, children: [
+                /* @__PURE__ */ jsxs20(
+                  "div",
+                  {
+                    style: { display: "flex", justifyContent: "space-between", alignItems: "start" },
+                    children: [
+                      /* @__PURE__ */ jsx21(Typography14.Text, { strong: true, children: project.title }),
+                      project.status && /* @__PURE__ */ jsx21(
+                        Tag5,
+                        {
+                          color: statusColor[project.status],
+                          style: { color: "#ffffff", borderColor: "transparent" },
+                          children: project.status
+                        }
+                      )
+                    ]
+                  }
+                ),
+                project.description && /* @__PURE__ */ jsx21(Typography14.Text, { style: { fontSize: 13, color: token.colorTextSecondary }, children: project.description }),
+                project.progress !== void 0 && /* @__PURE__ */ jsx21(
+                  Progress,
+                  {
+                    percent: project.progress,
+                    size: "small",
+                    "aria-label": `${project.title} completion ${project.progress}%`
+                  }
+                ),
+                project.tags && /* @__PURE__ */ jsx21(Space19, { wrap: true, size: 4, children: project.tags.map((tag) => /* @__PURE__ */ jsx21(Tag5, { style: { fontSize: 11 }, children: tag }, tag)) }),
+                /* @__PURE__ */ jsxs20(
+                  "div",
+                  {
+                    style: { display: "flex", justifyContent: "space-between", alignItems: "center" },
+                    children: [
+                      project.members && /* @__PURE__ */ jsx21(Avatar4.Group, { size: "small", max: { count: 3 }, children: project.members.map((m, i) => /* @__PURE__ */ jsx21(Avatar4, { size: "small", src: m.avatar, alt: m.name, children: m.name[0] }, i)) }),
+                      project.dueDate && /* @__PURE__ */ jsxs20(Typography14.Text, { style: { fontSize: 12, color: token.colorTextSecondary }, children: [
+                        "Due ",
+                        project.dueDate
+                      ] })
+                    ]
+                  }
+                )
+              ] })
+            },
+            project.id
+          ))
+        }
+      )
+    }
+  );
+}
+export {
+  ActivityTemplate,
+  AuditTrail,
+  AuthShell,
+  BillingTemplate,
+  BulkActionsBar,
+  DashboardTemplate,
+  DetailTemplate,
+  ErrorPageTemplate,
+  InviteTemplate,
+  KpiCard,
+  ListTemplate,
+  MembersTemplate,
+  NotificationsTemplate,
+  ProfileTemplate,
+  ProjectsTemplate,
+  SectionCard,
+  SecurityTemplate,
+  SettingsTemplate,
+  TemplateFrame,
+  WizardTemplate,
+  templateActionsToPageHeaderActions
+};