@dashadmin/dash-admin 1.3.24 → 1.3.26

package/dist/components/subscription/PlanAuditLog.js

@@ -1 +1,345 @@
-import{Fragment as q,jsx as e,jsxs as o}from"react/jsx-runtime";import{useState as b,useMemo as T,useCallback as v}from"react";import{useRecordContext as C,useGetList as L,Loading as _}from"react-admin";import{Box as d,Typography as i,Paper as l,Button as I,Dialog as R,DialogTitle as k,DialogContent as B,DialogActions as F,IconButton as w,Chip as G,Tooltip as N}from"@mui/material";import{DataGrid as M,GridToolbarContainer as z,GridToolbarExport as E}from"@mui/x-data-grid";import O from"@mui/icons-material/Visibility";import J from"@mui/icons-material/Close";import g from"@mui/icons-material/History";const W=()=>e(z,{children:e(E,{csvOptions:{fileName:"audit-logs-export",delimiter:",",utf8WithBom:!0},printOptions:{hideFooter:!0,hideToolbar:!0}})}),V=({open:r,log:t,onClose:a})=>{if(!t)return null;const c=s=>{try{return JSON.stringify(s,null,2)}catch{return String(s)}};return o(R,{open:r,onClose:a,maxWidth:"md",fullWidth:!0,"aria-labelledby":"audit-log-dialog-title",children:[e(k,{id:"audit-log-dialog-title",children:o(d,{display:"flex",justifyContent:"space-between",alignItems:"center",children:[o(i,{variant:"h6",children:["Audit Log Details - ",t.event||t.description]}),e(w,{edge:"end",color:"inherit",onClick:a,"aria-label":"close",children:e(J,{})})]})}),o(B,{dividers:!0,children:[o(d,{mb:2,children:[e(i,{variant:"subtitle2",color:"textSecondary",children:"Event Information"}),o(l,{variant:"outlined",sx:{p:2,mt:1},children:[o(i,{variant:"body2",children:[e("strong",{children:"ID:"})," ",t.id]}),o(i,{variant:"body2",children:[e("strong",{children:"Event:"})," ",t.event||"N/A"]}),o(i,{variant:"body2",children:[e("strong",{children:"Description:"})," ",t.description]}),o(i,{variant:"body2",children:[e("strong",{children:"Log Name:"})," ",t.log_name]}),o(i,{variant:"body2",children:[e("strong",{children:"Created At:"})," ",new Date(t.created_at).toLocaleString()]}),t.causer_name&&o(i,{variant:"body2",children:[e("strong",{children:"Changed By:"})," ",t.causer_name]})]})]}),o(d,{children:[e(i,{variant:"subtitle2",color:"textSecondary",children:"Properties (JSON)"}),e(l,{variant:"outlined",sx:{p:2,mt:1,bgcolor:"grey.900",color:"grey.100",maxHeight:400,overflow:"auto"},children:e("pre",{style:{margin:0,whiteSpace:"pre-wrap",wordBreak:"break-word"},children:c(t.properties)})})]})]}),e(F,{children:e(I,{onClick:a,color:"primary",children:"Close"})})]})},H=r=>{const t=(r||"").toLowerCase();let a="default";switch(t){case"created":a="success";break;case"updated":a="warning";break;case"deleted":a="error";break;case"restored":a="info";break;default:a="default"}return e(G,{label:r||"N/A",color:a,size:"small",variant:"outlined"})},p=({resourceConfig:r})=>{const t=C(),[a,c]=b({page:0,pageSize:10}),[s,m]=b({open:!1,log:null}),x=`${r?.model||"system/subscription-plan"}/audit`,{data:u,total:D,isLoading:y,error:h}=L(x,{pagination:{page:a.page+1,perPage:a.pageSize},sort:{field:"created_at",order:"DESC"},filter:{subject_id:t?.id}},{enabled:!!t?.id,refetchOnWindowFocus:!1}),f=v(n=>{m({open:!0,log:n})},[]),A=v(()=>{m({open:!1,log:null})},[]),S=T(()=>[{field:"id",headerName:"ID",type:"number",width:80},{field:"event",headerName:"Event",width:120,renderCell:n=>H(n.value)},{field:"description",headerName:"Description",flex:1,minWidth:200},{field:"causer_name",headerName:"Changed By",width:150,valueGetter:(n,P)=>P.causer_name||"System"},{field:"created_at",headerName:"Date",width:180,valueFormatter:n=>n?new Date(n).toLocaleString():""},{field:"actions",headerName:"Actions",type:"actions",width:100,getActions:n=>[e(N,{title:"View Details",children:e(w,{size:"small",onClick:()=>f(n.row),color:"primary",children:e(O,{fontSize:"small"})})},"view")]}],[f]);return t?.id?y?e(_,{}):h?e(l,{variant:"outlined",sx:{p:2},children:o(i,{color:"error",children:["Error loading audit logs: ",h.message||"Unknown error"]})}):!u||u.length===0?o(l,{variant:"outlined",sx:{p:3,textAlign:"center"},children:[e(g,{sx:{fontSize:48,color:"text.secondary",mb:1}}),e(i,{variant:"body1",color:"text.secondary",children:"No audit logs available for this record"})]}):o(q,{children:[e(d,{sx:{width:"100%"},children:e(l,{variant:"outlined",children:e(M,{rows:u,columns:S,rowCount:D||0,loading:y,pageSizeOptions:[5,10,25,50],paginationModel:a,paginationMode:"server",onPaginationModelChange:c,disableRowSelectionOnClick:!0,autoHeight:!0,slots:{toolbar:W},sx:{"& .MuiDataGrid-cell:focus":{outline:"none"}}})})}),e(V,{open:s.open,log:s.log,onClose:A})]}):o(l,{variant:"outlined",sx:{p:3,textAlign:"center"},children:[e(g,{sx:{fontSize:48,color:"text.secondary",mb:1}}),e(i,{variant:"body1",color:"text.secondary",children:"Save the record first to view audit logs"})]})},j=r=>e(p,{...r}),U=()=>{const r=C();return e(i,{variant:"body2",color:"text.secondary",children:"\u2014"})},$=r=>{const{method:t}=r;switch(t){case"view":return e(p,{...r});case"edit":return e(j,{...r});case"list":return e(U,{...r});case"create":return o(l,{variant:"outlined",sx:{p:3,textAlign:"center"},children:[e(g,{sx:{fontSize:48,color:"text.secondary",mb:1}}),e(i,{variant:"body1",color:"text.secondary",children:"Audit logs will be available after the record is created"})]});default:return e(p,{...r})}};var de=$;export{de as default};
+var __defProp = Object.defineProperty;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useState, useMemo, useCallback } from "react";
+import { useRecordContext, useGetList, Loading } from "react-admin";
+import {
+  Box,
+  Typography,
+  Paper,
+  Button,
+  Dialog,
+  DialogTitle,
+  DialogContent,
+  DialogActions,
+  IconButton,
+  Chip,
+  Tooltip
+} from "@mui/material";
+import {
+  DataGrid as MUIGrid,
+  GridToolbarContainer,
+  GridToolbarExport
+} from "@mui/x-data-grid";
+import VisibilityIcon from "@mui/icons-material/Visibility";
+import CloseIcon from "@mui/icons-material/Close";
+import HistoryIcon from "@mui/icons-material/History";
+const CustomToolbar = () => {
+  return /* @__PURE__ */ jsx(GridToolbarContainer, { children: /* @__PURE__ */ jsx(
+    GridToolbarExport,
+    {
+      csvOptions: {
+        fileName: "audit-logs-export",
+        delimiter: ",",
+        utf8WithBom: true
+      },
+      printOptions: {
+        hideFooter: true,
+        hideToolbar: true
+      }
+    }
+  ) });
+};
+const JsonDialog = ({ open, log, onClose }) => {
+  if (!log) return null;
+  const formatJson = (obj) => {
+    try {
+      return JSON.stringify(obj, null, 2);
+    } catch (e) {
+      return String(obj);
+    }
+  };
+  return /* @__PURE__ */ jsxs(
+    Dialog,
+    {
+      open,
+      onClose,
+      maxWidth: "md",
+      fullWidth: true,
+      "aria-labelledby": "audit-log-dialog-title",
+      children: [
+        /* @__PURE__ */ jsx(DialogTitle, { id: "audit-log-dialog-title", children: /* @__PURE__ */ jsxs(Box, { display: "flex", justifyContent: "space-between", alignItems: "center", children: [
+          /* @__PURE__ */ jsxs(Typography, { variant: "h6", children: [
+            "Audit Log Details - ",
+            log.event || log.description
+          ] }),
+          /* @__PURE__ */ jsx(
+            IconButton,
+            {
+              edge: "end",
+              color: "inherit",
+              onClick: onClose,
+              "aria-label": "close",
+              children: /* @__PURE__ */ jsx(CloseIcon, {})
+            }
+          )
+        ] }) }),
+        /* @__PURE__ */ jsxs(DialogContent, { dividers: true, children: [
+          /* @__PURE__ */ jsxs(Box, { mb: 2, children: [
+            /* @__PURE__ */ jsx(Typography, { variant: "subtitle2", color: "textSecondary", children: "Event Information" }),
+            /* @__PURE__ */ jsxs(Paper, { variant: "outlined", sx: { p: 2, mt: 1 }, children: [
+              /* @__PURE__ */ jsxs(Typography, { variant: "body2", children: [
+                /* @__PURE__ */ jsx("strong", { children: "ID:" }),
+                " ",
+                log.id
+              ] }),
+              /* @__PURE__ */ jsxs(Typography, { variant: "body2", children: [
+                /* @__PURE__ */ jsx("strong", { children: "Event:" }),
+                " ",
+                log.event || "N/A"
+              ] }),
+              /* @__PURE__ */ jsxs(Typography, { variant: "body2", children: [
+                /* @__PURE__ */ jsx("strong", { children: "Description:" }),
+                " ",
+                log.description
+              ] }),
+              /* @__PURE__ */ jsxs(Typography, { variant: "body2", children: [
+                /* @__PURE__ */ jsx("strong", { children: "Log Name:" }),
+                " ",
+                log.log_name
+              ] }),
+              /* @__PURE__ */ jsxs(Typography, { variant: "body2", children: [
+                /* @__PURE__ */ jsx("strong", { children: "Created At:" }),
+                " ",
+                new Date(log.created_at).toLocaleString()
+              ] }),
+              log.causer_name && /* @__PURE__ */ jsxs(Typography, { variant: "body2", children: [
+                /* @__PURE__ */ jsx("strong", { children: "Changed By:" }),
+                " ",
+                log.causer_name
+              ] })
+            ] })
+          ] }),
+          /* @__PURE__ */ jsxs(Box, { children: [
+            /* @__PURE__ */ jsx(Typography, { variant: "subtitle2", color: "textSecondary", children: "Properties (JSON)" }),
+            /* @__PURE__ */ jsx(
+              Paper,
+              {
+                variant: "outlined",
+                sx: {
+                  p: 2,
+                  mt: 1,
+                  bgcolor: "grey.900",
+                  color: "grey.100",
+                  maxHeight: 400,
+                  overflow: "auto"
+                },
+                children: /* @__PURE__ */ jsx("pre", { style: { margin: 0, whiteSpace: "pre-wrap", wordBreak: "break-word" }, children: formatJson(log.properties) })
+              }
+            )
+          ] })
+        ] }),
+        /* @__PURE__ */ jsx(DialogActions, { children: /* @__PURE__ */ jsx(Button, { onClick: onClose, color: "primary", children: "Close" }) })
+      ]
+    }
+  );
+};
+const getEventChip = (event) => {
+  const eventLower = (event || "").toLowerCase();
+  let color = "default";
+  switch (eventLower) {
+    case "created":
+      color = "success";
+      break;
+    case "updated":
+      color = "warning";
+      break;
+    case "deleted":
+      color = "error";
+      break;
+    case "restored":
+      color = "info";
+      break;
+    default:
+      color = "default";
+  }
+  return /* @__PURE__ */ jsx(
+    Chip,
+    {
+      label: event || "N/A",
+      color,
+      size: "small",
+      variant: "outlined"
+    }
+  );
+};
+const PlanAuditLogView = ({ resourceConfig }) => {
+  const record = useRecordContext();
+  const [paginationModel, setPaginationModel] = useState({
+    page: 0,
+    pageSize: 10
+  });
+  const [dialogState, setDialogState] = useState({
+    open: false,
+    log: null
+  });
+  const resource = (resourceConfig == null ? void 0 : resourceConfig.model) || "system/subscription-plan";
+  const auditResource = `${resource}/audit`;
+  const { data, total, isLoading, error } = useGetList(
+    auditResource,
+    {
+      pagination: {
+        page: paginationModel.page + 1,
+        perPage: paginationModel.pageSize
+      },
+      sort: { field: "created_at", order: "DESC" },
+      filter: { subject_id: record == null ? void 0 : record.id }
+    },
+    { enabled: !!(record == null ? void 0 : record.id), refetchOnWindowFocus: false }
+  );
+  const handleViewLog = useCallback((log) => {
+    setDialogState({ open: true, log });
+  }, []);
+  const handleCloseDialog = useCallback(() => {
+    setDialogState({ open: false, log: null });
+  }, []);
+  const columns = useMemo(
+    () => [
+      {
+        field: "id",
+        headerName: "ID",
+        type: "number",
+        width: 80
+      },
+      {
+        field: "event",
+        headerName: "Event",
+        width: 120,
+        renderCell: (params) => getEventChip(params.value)
+      },
+      {
+        field: "description",
+        headerName: "Description",
+        flex: 1,
+        minWidth: 200
+      },
+      {
+        field: "causer_name",
+        headerName: "Changed By",
+        width: 150,
+        valueGetter: (value, row) => row.causer_name || "System"
+      },
+      {
+        field: "created_at",
+        headerName: "Date",
+        width: 180,
+        valueFormatter: (value) => value ? new Date(value).toLocaleString() : ""
+      },
+      {
+        field: "actions",
+        headerName: "Actions",
+        type: "actions",
+        width: 100,
+        getActions: (params) => [
+          /* @__PURE__ */ jsx(Tooltip, { title: "View Details", children: /* @__PURE__ */ jsx(
+            IconButton,
+            {
+              size: "small",
+              onClick: () => handleViewLog(params.row),
+              color: "primary",
+              children: /* @__PURE__ */ jsx(VisibilityIcon, { fontSize: "small" })
+            }
+          ) }, "view")
+        ]
+      }
+    ],
+    [handleViewLog]
+  );
+  if (!(record == null ? void 0 : record.id)) {
+    return /* @__PURE__ */ jsxs(Paper, { variant: "outlined", sx: { p: 3, textAlign: "center" }, children: [
+      /* @__PURE__ */ jsx(HistoryIcon, { sx: { fontSize: 48, color: "text.secondary", mb: 1 } }),
+      /* @__PURE__ */ jsx(Typography, { variant: "body1", color: "text.secondary", children: "Save the record first to view audit logs" })
+    ] });
+  }
+  if (isLoading) {
+    return /* @__PURE__ */ jsx(Loading, {});
+  }
+  if (error) {
+    return /* @__PURE__ */ jsx(Paper, { variant: "outlined", sx: { p: 2 }, children: /* @__PURE__ */ jsxs(Typography, { color: "error", children: [
+      "Error loading audit logs: ",
+      error.message || "Unknown error"
+    ] }) });
+  }
+  if (!data || data.length === 0) {
+    return /* @__PURE__ */ jsxs(Paper, { variant: "outlined", sx: { p: 3, textAlign: "center" }, children: [
+      /* @__PURE__ */ jsx(HistoryIcon, { sx: { fontSize: 48, color: "text.secondary", mb: 1 } }),
+      /* @__PURE__ */ jsx(Typography, { variant: "body1", color: "text.secondary", children: "No audit logs available for this record" })
+    ] });
+  }
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(Box, { sx: { width: "100%" }, children: /* @__PURE__ */ jsx(Paper, { variant: "outlined", children: /* @__PURE__ */ jsx(
+      MUIGrid,
+      {
+        rows: data,
+        columns,
+        rowCount: total || 0,
+        loading: isLoading,
+        pageSizeOptions: [5, 10, 25, 50],
+        paginationModel,
+        paginationMode: "server",
+        onPaginationModelChange: setPaginationModel,
+        disableRowSelectionOnClick: true,
+        autoHeight: true,
+        slots: {
+          toolbar: CustomToolbar
+        },
+        sx: {
+          "& .MuiDataGrid-cell:focus": {
+            outline: "none"
+          }
+        }
+      }
+    ) }) }),
+    /* @__PURE__ */ jsx(
+      JsonDialog,
+      {
+        open: dialogState.open,
+        log: dialogState.log,
+        onClose: handleCloseDialog
+      }
+    )
+  ] });
+};
+const PlanAuditLogEdit = (props) => {
+  return /* @__PURE__ */ jsx(PlanAuditLogView, __spreadValues({}, props));
+};
+const PlanAuditLogList = () => {
+  const record = useRecordContext();
+  return /* @__PURE__ */ jsx(Typography, { variant: "body2", color: "text.secondary", children: "\u2014" });
+};
+const PlanAuditLog = (props) => {
+  const { method } = props;
+  switch (method) {
+    case "view":
+      return /* @__PURE__ */ jsx(PlanAuditLogView, __spreadValues({}, props));
+    case "edit":
+      return /* @__PURE__ */ jsx(PlanAuditLogEdit, __spreadValues({}, props));
+    case "list":
+      return /* @__PURE__ */ jsx(PlanAuditLogList, __spreadValues({}, props));
+    case "create":
+      return /* @__PURE__ */ jsxs(Paper, { variant: "outlined", sx: { p: 3, textAlign: "center" }, children: [
+        /* @__PURE__ */ jsx(HistoryIcon, { sx: { fontSize: 48, color: "text.secondary", mb: 1 } }),
+        /* @__PURE__ */ jsx(Typography, { variant: "body1", color: "text.secondary", children: "Audit logs will be available after the record is created" })
+      ] });
+    default:
+      return /* @__PURE__ */ jsx(PlanAuditLogView, __spreadValues({}, props));
+  }
+};
+var PlanAuditLog_default = PlanAuditLog;
+export {
+  PlanAuditLog_default as default
+};

package/dist/components/subscription/PlanFeaturesSettings.js

@@ -1 +1,151 @@
-import{jsx as e,jsxs as p}from"react/jsx-runtime";import{useState as g,useEffect as x}from"react";import{useRecordContext as u}from"react-admin";import{useFormContext as T}from"react-hook-form";import{Box as v,Chip as l,TextField as A,IconButton as P,Typography as i,Paper as F,Stack as d,Table as k,TableBody as w,TableCell as I,TableContainer as R,TableRow as S}from"@mui/material";import D from"@mui/icons-material/Add";import B from"@mui/icons-material/Delete";const z=()=>{const a=u()?.features||[];return a.length?e(R,{component:F,variant:"outlined",children:e(k,{size:"small",children:e(w,{children:a.map((o,n)=>e(S,{children:e(I,{children:e(l,{label:o,size:"small",color:"primary",variant:"outlined"})})},n))})})}):e(i,{variant:"body2",color:"text.secondary",sx:{py:2},children:"No features configured"})},E=()=>{const a=u()?.features||[];return a.length?p(d,{direction:"row",spacing:.5,flexWrap:"wrap",useFlexGap:!0,children:[a.slice(0,3).map((o,n)=>e(l,{label:o,size:"small",variant:"outlined"},n)),a.length>3&&e(l,{label:`+${a.length-3}`,size:"small",color:"default"})]}):e(i,{variant:"body2",color:"text.secondary",children:"\u2014"})},K=()=>{const r=u(),{setValue:a,watch:o}=T(),[n,m]=g(""),[s,y]=g([]),f=o("features");x(()=>{const t=f||r?.features||[];y(Array.isArray(t)?t:[])},[r,f]);const b=t=>{y(t),a("features",t,{shouldDirty:!0})},h=()=>{const t=n.trim();t&&!s.includes(t)&&(b([...s,t]),m(""))},C=t=>{b(s.filter(c=>c!==t))};return p(v,{children:[e(i,{variant:"subtitle2",gutterBottom:!0,children:"Plan Features"}),e(i,{variant:"caption",color:"text.secondary",display:"block",sx:{mb:2},children:'Add feature keys that are enabled for this plan (e.g., "api_access", "custom_branding")'}),p(d,{direction:"row",spacing:1,sx:{mb:2},children:[e(A,{value:n,onChange:t=>m(t.target.value),onKeyPress:t=>{t.key==="Enter"&&(t.preventDefault(),h())},placeholder:"Enter feature key...",size:"small",fullWidth:!0}),e(P,{onClick:h,color:"primary",disabled:!n.trim(),children:e(D,{})})]}),s.length>0?e(F,{variant:"outlined",sx:{p:1},children:e(d,{direction:"row",spacing:1,flexWrap:"wrap",useFlexGap:!0,children:s.map((t,c)=>e(l,{label:t,onDelete:()=>C(t),deleteIcon:e(B,{}),color:"primary",variant:"outlined"},c))})}):e(i,{variant:"body2",color:"text.secondary",children:"No features added yet"})]})},N=({method:r,attribute:a,resourceConfig:o})=>{switch(r){case"edit":case"create":return e(K,{method:r,attribute:a,resourceConfig:o});case"view":return e(z,{method:r,attribute:a,resourceConfig:o});case"list":return e(E,{method:r,attribute:a,resourceConfig:o});default:return null}};var O=N;export{O as default};
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useState, useEffect } from "react";
+import { useRecordContext } from "react-admin";
+import { useFormContext } from "react-hook-form";
+import {
+  Box,
+  Chip,
+  TextField,
+  IconButton,
+  Typography,
+  Paper,
+  Stack,
+  Table,
+  TableBody,
+  TableCell,
+  TableContainer,
+  TableRow
+} from "@mui/material";
+import AddIcon from "@mui/icons-material/Add";
+import DeleteIcon from "@mui/icons-material/Delete";
+const PlanFeaturesView = () => {
+  const record = useRecordContext();
+  const features = (record == null ? void 0 : record.features) || [];
+  if (!features.length) {
+    return /* @__PURE__ */ jsx(Typography, { variant: "body2", color: "text.secondary", sx: { py: 2 }, children: "No features configured" });
+  }
+  return /* @__PURE__ */ jsx(TableContainer, { component: Paper, variant: "outlined", children: /* @__PURE__ */ jsx(Table, { size: "small", children: /* @__PURE__ */ jsx(TableBody, { children: features.map((feature, index) => /* @__PURE__ */ jsx(TableRow, { children: /* @__PURE__ */ jsx(TableCell, { children: /* @__PURE__ */ jsx(
+    Chip,
+    {
+      label: feature,
+      size: "small",
+      color: "primary",
+      variant: "outlined"
+    }
+  ) }) }, index)) }) }) });
+};
+const PlanFeaturesList = () => {
+  const record = useRecordContext();
+  const features = (record == null ? void 0 : record.features) || [];
+  if (!features.length) {
+    return /* @__PURE__ */ jsx(Typography, { variant: "body2", color: "text.secondary", children: "\u2014" });
+  }
+  return /* @__PURE__ */ jsxs(Stack, { direction: "row", spacing: 0.5, flexWrap: "wrap", useFlexGap: true, children: [
+    features.slice(0, 3).map((feature, index) => /* @__PURE__ */ jsx(
+      Chip,
+      {
+        label: feature,
+        size: "small",
+        variant: "outlined"
+      },
+      index
+    )),
+    features.length > 3 && /* @__PURE__ */ jsx(
+      Chip,
+      {
+        label: `+${features.length - 3}`,
+        size: "small",
+        color: "default"
+      }
+    )
+  ] });
+};
+const PlanFeaturesEdit = () => {
+  const record = useRecordContext();
+  const { setValue, watch } = useFormContext();
+  const [newFeature, setNewFeature] = useState("");
+  const [features, setFeatures] = useState([]);
+  const watchedFeatures = watch("features");
+  useEffect(() => {
+    const initialFeatures = watchedFeatures || (record == null ? void 0 : record.features) || [];
+    setFeatures(Array.isArray(initialFeatures) ? initialFeatures : []);
+  }, [record, watchedFeatures]);
+  const updateFeatures = (newFeatures) => {
+    setFeatures(newFeatures);
+    setValue("features", newFeatures, { shouldDirty: true });
+  };
+  const handleAddFeature = () => {
+    const trimmedFeature = newFeature.trim();
+    if (trimmedFeature && !features.includes(trimmedFeature)) {
+      updateFeatures([...features, trimmedFeature]);
+      setNewFeature("");
+    }
+  };
+  const handleRemoveFeature = (featureToRemove) => {
+    updateFeatures(features.filter((f) => f !== featureToRemove));
+  };
+  const handleKeyPress = (e) => {
+    if (e.key === "Enter") {
+      e.preventDefault();
+      handleAddFeature();
+    }
+  };
+  return /* @__PURE__ */ jsxs(Box, { children: [
+    /* @__PURE__ */ jsx(Typography, { variant: "subtitle2", gutterBottom: true, children: "Plan Features" }),
+    /* @__PURE__ */ jsx(Typography, { variant: "caption", color: "text.secondary", display: "block", sx: { mb: 2 }, children: 'Add feature keys that are enabled for this plan (e.g., "api_access", "custom_branding")' }),
+    /* @__PURE__ */ jsxs(Stack, { direction: "row", spacing: 1, sx: { mb: 2 }, children: [
+      /* @__PURE__ */ jsx(
+        TextField,
+        {
+          value: newFeature,
+          onChange: (e) => setNewFeature(e.target.value),
+          onKeyPress: handleKeyPress,
+          placeholder: "Enter feature key...",
+          size: "small",
+          fullWidth: true
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        IconButton,
+        {
+          onClick: handleAddFeature,
+          color: "primary",
+          disabled: !newFeature.trim(),
+          children: /* @__PURE__ */ jsx(AddIcon, {})
+        }
+      )
+    ] }),
+    features.length > 0 ? /* @__PURE__ */ jsx(Paper, { variant: "outlined", sx: { p: 1 }, children: /* @__PURE__ */ jsx(Stack, { direction: "row", spacing: 1, flexWrap: "wrap", useFlexGap: true, children: features.map((feature, index) => /* @__PURE__ */ jsx(
+      Chip,
+      {
+        label: feature,
+        onDelete: () => handleRemoveFeature(feature),
+        deleteIcon: /* @__PURE__ */ jsx(DeleteIcon, {}),
+        color: "primary",
+        variant: "outlined"
+      },
+      index
+    )) }) }) : /* @__PURE__ */ jsx(Typography, { variant: "body2", color: "text.secondary", children: "No features added yet" })
+  ] });
+};
+const PlanFeaturesSettings = ({
+  method,
+  attribute,
+  resourceConfig
+}) => {
+  switch (method) {
+    case "edit":
+    case "create":
+      return /* @__PURE__ */ jsx(PlanFeaturesEdit, { method, attribute, resourceConfig });
+    case "view":
+      return /* @__PURE__ */ jsx(PlanFeaturesView, { method, attribute, resourceConfig });
+    case "list":
+      return /* @__PURE__ */ jsx(PlanFeaturesList, { method, attribute, resourceConfig });
+    default:
+      return null;
+  }
+};
+var PlanFeaturesSettings_default = PlanFeaturesSettings;
+export {
+  PlanFeaturesSettings_default as default
+};

package/dist/components/subscription/PlanLimitsSettings.js

@@ -1 +1,168 @@
-import{Fragment as V,jsx as o}from"react/jsx-runtime";import{DashAutoFormTabs as C}from"@dashadmin/dash-auto-admin";import{useState as p,useEffect as b}from"react";import{Loading as c,useRecordContext as h}from"react-admin";import{useFormContext as S,useWatch as F}from"react-hook-form";import L from"../misc/MuiSimpleJsonTable";import{useSubscriptionPlanFormats as g}from"../../contexts/SubscriptionPlanFormatsProvider";const A=({method:n,attribute:r})=>{const[i,l]=p(null),m=h(),a=S();F({control:a.control});const{formats:s,loading:u}=g();return b(()=>{if(s&&s.formats){const t=s.formats.filter(e=>e.visible!==!1).map(e=>{const f=e.attribute?e.attribute.replace("limits.",""):e.id,d=m?.limits?.[f]??e.default_value;return{...e,fieldOptions:{defaultValue:d,fullWidth:!0,helperText:e.description},...n==="view"&&{readOnly:!0}}});console.log("PlanLimitsSettings SCHEMA",t),l(t)}},[s,m]),u?o(c,{}):o("section",{children:i?C({schema:i,resourceConfig:null,options:{mode:n,label:"Plan Limits Configuration"}}):null})},P=({method:n,attribute:r})=>{const[i,l]=p(null),m=S();F({control:m.control});const{formats:a,loading:s}=g();return b(()=>{if(!s&&a&&a.formats){const u=a.formats.filter(t=>t.visible!==!1).map(t=>({...t,fieldOptions:{defaultValue:t.default_value,fullWidth:!0,helperText:t.description}}));l(u)}},[a,s]),s?o(c,{}):o("section",{children:i?C({schema:i,resourceConfig:null,options:{mode:n,label:"Plan Limits Configuration"}}):null})},D=({method:n,attribute:r})=>{const i=h(),[l,m]=p(null),{formats:a,loading:s}=g(),u=(t,e)=>{if(t==null||t===-1)return"Unlimited";switch(e){case"boolean":return t?"\u2713 Enabled":"\u2717 Disabled";case"integer":return typeof t=="number"?t.toLocaleString():t;default:return t}};return b(()=>{if(a?.formats&&i){const t={};a.formats.filter(e=>e.visible!==!1).forEach(e=>{const f=e.attribute?e.attribute.replace("limits.",""):e.id,d=i.limits?.[f]??e.default_value;t[e.label]=o(V,{children:u(d,e.type)})}),m(t)}},[a,i]),s?o(c,{}):l?o(L,{tableData:l,vertical:!0}):o(c,{})},R=({method:n,attribute:r,resourceConfig:i})=>{switch(n){case"edit":return o(A,{attribute:r,method:n,resourceConfig:i});case"view":return o(D,{attribute:r,method:n,resourceConfig:i});case"create":return o(P,{attribute:r,method:n,resourceConfig:i});case"list":return null;default:return null}};var O=R;export{O as default};
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+import { Fragment, jsx } from "react/jsx-runtime";
+import { DashAutoFormTabs } from "dash-auto-admin";
+import { useState, useEffect } from "react";
+import { Loading, useRecordContext } from "react-admin";
+import { useFormContext, useWatch } from "react-hook-form";
+import MUISimpleJsonTable from "../misc/MuiSimpleJsonTable";
+import { useSubscriptionPlanFormats } from "../../contexts/SubscriptionPlanFormatsProvider";
+const PlanLimitsSettingsEdit = ({ method, attribute }) => {
+  const [limitsSchema, setLimitsSchema] = useState(null);
+  const plan = useRecordContext();
+  const formContext = useFormContext();
+  useWatch({
+    control: formContext.control
+  });
+  const { formats: formatsData, loading } = useSubscriptionPlanFormats();
+  useEffect(() => {
+    if (formatsData && formatsData.formats) {
+      const parsedSchema = formatsData.formats.filter((entry) => entry.visible !== false).map((entry) => {
+        var _a, _b;
+        const limitName = entry.attribute ? entry.attribute.replace("limits.", "") : entry.id;
+        const currentValue = (_b = (_a = plan == null ? void 0 : plan.limits) == null ? void 0 : _a[limitName]) != null ? _b : entry.default_value;
+        return __spreadValues(__spreadProps(__spreadValues({}, entry), {
+          fieldOptions: {
+            defaultValue: currentValue,
+            fullWidth: true,
+            helperText: entry.description
+          }
+        }), method === "view" && {
+          readOnly: true
+        });
+      });
+      console.log("PlanLimitsSettings SCHEMA", parsedSchema);
+      setLimitsSchema(parsedSchema);
+    }
+  }, [formatsData, plan]);
+  if (loading) return /* @__PURE__ */ jsx(Loading, {});
+  return /* @__PURE__ */ jsx("section", { children: limitsSchema ? DashAutoFormTabs({
+    schema: limitsSchema,
+    resourceConfig: null,
+    options: {
+      mode: method,
+      label: "Plan Limits Configuration"
+    }
+  }) : null });
+};
+const PlanLimitsSettingsCreate = ({ method, attribute }) => {
+  const [limitsSchema, setLimitsSchema] = useState(null);
+  const formContext = useFormContext();
+  useWatch({
+    control: formContext.control
+  });
+  const { formats: formatsData, loading } = useSubscriptionPlanFormats();
+  useEffect(() => {
+    if (!loading && formatsData && formatsData.formats) {
+      const parsedSchema = formatsData.formats.filter((entry) => entry.visible !== false).map((entry) => __spreadProps(__spreadValues({}, entry), {
+        fieldOptions: {
+          defaultValue: entry.default_value,
+          fullWidth: true,
+          helperText: entry.description
+        }
+      }));
+      setLimitsSchema(parsedSchema);
+    }
+  }, [formatsData, loading]);
+  if (loading) return /* @__PURE__ */ jsx(Loading, {});
+  return /* @__PURE__ */ jsx("section", { children: limitsSchema ? DashAutoFormTabs({
+    schema: limitsSchema,
+    resourceConfig: null,
+    options: {
+      mode: method,
+      label: "Plan Limits Configuration"
+    }
+  }) : null });
+};
+const PlanLimitsSettingsView = ({ method, attribute }) => {
+  const plan = useRecordContext();
+  const [parsedValues, setParsedValues] = useState(null);
+  const { formats: formatsData, loading } = useSubscriptionPlanFormats();
+  const parseValue = (value, type) => {
+    if (value === null || value === void 0 || value === -1) {
+      return "Unlimited";
+    }
+    switch (type) {
+      case "boolean":
+        return value ? "\u2713 Enabled" : "\u2717 Disabled";
+      case "integer":
+        return typeof value === "number" ? value.toLocaleString() : value;
+      default:
+        return value;
+    }
+  };
+  useEffect(() => {
+    if ((formatsData == null ? void 0 : formatsData.formats) && plan) {
+      const object = {};
+      formatsData.formats.filter((entry) => entry.visible !== false).forEach((entry) => {
+        var _a, _b;
+        const limitName = entry.attribute ? entry.attribute.replace("limits.", "") : entry.id;
+        const value = (_b = (_a = plan.limits) == null ? void 0 : _a[limitName]) != null ? _b : entry.default_value;
+        object[entry.label] = /* @__PURE__ */ jsx(Fragment, { children: parseValue(value, entry.type) });
+      });
+      setParsedValues(object);
+    }
+  }, [formatsData, plan]);
+  if (loading) return /* @__PURE__ */ jsx(Loading, {});
+  return parsedValues ? /* @__PURE__ */ jsx(MUISimpleJsonTable, { tableData: parsedValues, vertical: true }) : /* @__PURE__ */ jsx(Loading, {});
+};
+const PlanLimitsSettings = ({
+  method,
+  attribute,
+  resourceConfig
+}) => {
+  switch (method) {
+    case "edit":
+      return /* @__PURE__ */ jsx(
+        PlanLimitsSettingsEdit,
+        {
+          attribute,
+          method,
+          resourceConfig
+        }
+      );
+    case "view":
+      return /* @__PURE__ */ jsx(
+        PlanLimitsSettingsView,
+        {
+          attribute,
+          method,
+          resourceConfig
+        }
+      );
+    case "create":
+      return /* @__PURE__ */ jsx(
+        PlanLimitsSettingsCreate,
+        {
+          attribute,
+          method,
+          resourceConfig
+        }
+      );
+    case "list":
+      return null;
+    default:
+      return null;
+  }
+};
+var PlanLimitsSettings_default = PlanLimitsSettings;
+export {
+  PlanLimitsSettings_default as default
+};