@dashadmin/dash-components 1.3.25 → 1.3.28

package/README.md

@@ -0,0 +1,35 @@
+# @dashadmin/dash-components
+
+> Shared React component library for Dash UIs.
+
+## Overview
+
+Reusable presentational and interactive components used across Dash apps, including the drag-and-drop `SortableDataGrid` (powered by `@hello-pangea/dnd`), the notifications centre and the `useDraggable` hook.
+
+## Key exports & features
+
+- `SortableDataGrid` (drag-and-drop reordering via `@hello-pangea/dnd`)
+- Notifications centre
+- `useDraggable` hook and assorted shared widgets
+
+## Installation
+
+```bash
+# From the public npm registry
+npm install @dashadmin/dash-components
+
+# Or the local Verdaccio registry (unscoped)
+npm install dash-components --registry http://localhost:4873
+```
+
+## Internal Dash dependencies
+
+`@dashadmin/dash-auto-admin`, `@dashadmin/dash-dialog`, `@dashadmin/dash-modal`, `@dashadmin/dash-utils`, `@dashadmin/dash-auth`, `@dashadmin/dash-admin-state`, `@dashadmin/dash-axios-hook`, `@dashadmin/dash-interfaces`, `@dashadmin/dash-styles`
+
+## Development & publishing
+
+This package is part of the **dash-frontend-core** monorepo. See [`DEVELOPMENT.md`](../../DEVELOPMENT.md) for the source-modification workflow, local Verdaccio publishing, npm publishing and version-bump policy.
+
+---
+
+_Part of the [Dash Framework](https://www.npmjs.com/org/dashadmin) · `@dashadmin` scope._

package/dist/components/AuditLog/AuditLog.js

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

package/dist/components/AuditLog/index.js

@@ -1 +1,4 @@
-import{default as r}from"./AuditLog";export{r as AuditLog};
+import { default as default2 } from "./AuditLog";
+export {
+  default2 as AuditLog
+};