react-admin-crud-manager 1.0.6 → 1.0.8

package/README.md

@@ -55,7 +55,204 @@ function App() {
 - `Table`, `Modal`, `Form`, etc.: Available for advanced use
 
 ## Props
-See the source or future documentation for full prop details.
+Below is a complete reference of the public props accepted by this package (types, accepted values and defaults). The library exposes a single primary component (`Crud`) that receives a single `config` prop — most configuration lives inside that object.
+
+---
+
+### Crud (default export)
+`<Crud config={config} />`
+- `config` (object) — required. Top-level configuration object used by the CRUD page.
+
+Key properties of `config` (types & accepted values):
+
+- `title` — string (required)
+- `description` — string (optional)
+- `buttonText` — string (optional)
+- `fetchData` — function (required)
+  - Signature: async ({ search, rows_per_page, current_page, ...filters }) => Promise<{ data: Array, pagination?: { current_page: number, rows_per_page: number, total_pages: number, total_records: number } }>
+  - The component expects `resp.data` (array) and optional `resp.pagination` when server-side pagination is used.
+- `isStaticData` — boolean (default: false)
+  - If true, add/edit/delete are applied client-side on local state instead of re-fetching.
+- `tableConfig` — object (required) — see "Table / tableConfig" below.
+- `modalConfig` — object — see "Modal / modalConfig" below.
+- `filterConfig` — object — used by the filter drawer (see Form field schema below).
+
+---
+
+### Table / `tableConfig` (inside `config`)
+Type: object
+
+Common keys:
+- `table_head` — array of column objects (required)
+- `data` — array — rows shown in the table
+- `loading` — boolean — show skeleton when true
+- `search` — object: { enabled?: boolean, placeholder?: string, useServerSideSearch?: boolean, searchKeys?: string[] }
+- `filter` — object: { enabled?: boolean, useServerSideFilters?: boolean }
+- `pagination` — object: { enabled?: boolean, rows_per_page?: number, useServerSidePagination?: boolean, current_page?: number, total_pages?: number, total_records?: number }
+- `emptyMessage` — string — message when no rows
+- `onMenuAction` — function(actionType: string, item: object)
+- `setServerSidePaginationData` — function — used to update server-side pagination/search state
+- `onFilterApply` — function(filters: object)
+- `filterConfig` — object (fields array) — rendered in the FilterDrawer
+
+Table column object (`table_head[]`) — accepted keys:
+- `key` — string (required) — property name in row objects
+- `title` — string — column header
+- `type` — string — accepted values: (plain default) | `index` | `group` | `chip` | `date` | `avatar` | `menu_actions`
+- `imageKey`, `titleKey`, `subtitleKey` — string — used by `group`/`avatar` types
+- `onClickDetails` — boolean — if true clicking the cell triggers a view action
+- `variant` — string — used for chips (`contained` | `outline` | `soft`)
+- `chipOptions` — array of { value: string|number|boolean, label: string, color?: string }
+- `defaultColor` — string — default chip color key (e.g., `green`)
+- `className` — string — custom class for cell
+- `format` — string — date format (e.g. `DD MMM YYYY`)
+- `menuList` — array of menu action objects: { title: string, type: string, variant?: string, icon?: ReactNode }
+- `render` — function(row, rowIndex) — custom renderer; if present it overrides built-in renderers
+
+---
+
+### Modal / `modalConfig`
+`modalConfig` groups modal definitions used by the CRUD page.
+
+Common modal shapes:
+- `addModal`, `editModal` (object)
+  - `title` — string (required)
+  - `size` — string (`sm` | `md` | `lg` | `xl` | `full`) (default `md`)
+  - `formClass` — string (optional)
+  - `formFields` — array of form-field objects (see Form schema)
+  - `handleSubmit` — function(formData) — required; should perform API call and return an object used by the parent (see notes)
+  - `actionButtons` — array of actionButton objects ({ type, label, color, variant, onClick, disabled, className })
+
+- `deleteModal` (object)
+  - `title` — string
+  - `size` — string
+  - `confirmText` — string
+  - `referenceKey` — string — key of selectedItem to show as reference in delete dialog
+  - `action` — function(selectedItem) — function called to perform delete (should return a response used by the parent)
+  - `actionButtons` — array of actionButton objects
+
+- `viewModal` (object)
+  - `title` — string (required)
+  - `size` — string
+  - `component` — React component (elementType) — optional, receives `data` prop when provided
+  - `fields` — array of view-field objects (see View fields below)
+  - `footer` — { cancelButton?: boolean, cancelText?: string }
+
+Notes on modal handlers (expected response shapes):
+- `addModal.handleSubmit` should return an object containing `newObject` (the created row) so Crud can insert it into the list when `isStaticData` is true or refresh server-side listing.
+- `editModal.handleSubmit` should return `{ newObject, targetObject }` where `targetObject` identifies which row was updated.
+- `deleteModal.action` should return an object containing `targetObject` (the deleted row) or an appropriate success response.
+
+---
+
+### Form / Form fields (used by `modalConfig.*.formFields` and `filterConfig.fields`)
+Form fields follow the `formFieldType` shape used throughout the UI. Each field is an object with these keys:
+
+Common field keys (all field types):
+- `key` — string (required) — the property name for form data
+- `label` — string — human-readable label
+- `type` — string (required) — accepted values:
+  - `text` (default input), `number`, `email`, `password`, `select`, `checkbox`, `switch`, `phone`, `textarea`, `image`, `tinyEditor`
+- `required` — boolean
+- `minLength` — number
+- `parentClass` — string — grid class (e.g. `col-span-6`)
+- `placeholder` — string
+- `disabled` — boolean
+
+Type-specific keys:
+- select
+  - `options` — array of { value: string|number|boolean, label: string }
+  - `multiple` — boolean — allow multiple selection
+  - `search` — boolean — show search inside dropdown
+  - `dropdownMaxHeight` — string (CSS height value)
+- checkbox
+  - `options` — array of { value, label }
+  - `multiple` — boolean — when true allows selecting multiple values (component prop `multiSelect`)
+- switch
+  - `options` — optional array of radio-like options [{ label, value }]
+  - `text` — optional description text shown next to the switch
+- phone
+  - `countriesList` — boolean — show country selector
+  - `defaultCountry` — string (ISO country code like `US`)
+  - `search` — boolean — enable searching countries
+  - `placeholder` — string
+- textarea
+  - `rows` — number
+- image
+  - `accept` — string (default: `image/*`)
+  - `dragDrop` — boolean
+- tinyEditor
+  - `editorKey` — string (TinyMCE api key)
+  - `fontFamily` — string
+  - `height` — number
+  - `imageUploadHandler` — function(blobInfo) => Promise<string> (returns URL)
+
+Return values / onSubmit handlers
+- `onSubmit(formData)` receives an object keyed by `field.key` values.
+
+---
+
+### Small/UI components (props summary)
+- `Button` props
+  - `variant` — `contained` | `outlined` | `text` (default `contained`)
+  - `color` — `primary` | `success` | `error` | `default`
+  - `size` — `sm` | `md` | `lg` | `xl` | `default`
+  - `fullWidth` — boolean
+  - `className`, `onClick`, `type`, `disabled` (standard button props)
+
+- `Chip` props
+  - `label` — string (required)
+  - `variant` — `contained` | `outline` | `soft` (default `contained`)
+  - `color` — `blue` | `teal` | `purple` | `yellow` | `green` | `red` | `gray`
+
+- `Modal` props (when used directly)
+  - `isOpen` — boolean
+  - `onClose` — function
+  - `icon` — React node
+  - `title` — string
+  - `size` — `sm` | `md` | `lg` | `xl` | `full`
+  - `actionButtons` — array of { type, label, color, variant, onClick, disabled }
+  - `loadingBtn` — boolean
+
+- `FilterDrawer` props
+  - `isOpen` — boolean
+  - `onClose` — function
+  - `config` — object (fields array — same `formFieldType`)
+  - `onApply` — function(filters: object)
+
+---
+
+### Examples
+Minimal CRUD config (client-side):
+
+```js
+const config = {
+  title: 'Users',
+  fetchData: async () => ({ data: users, pagination: null }),
+  isStaticData: true,
+  tableConfig: {
+    table_head: [ { key: 'id', title: 'ID', type: 'index' }, { key: 'name', title: 'Name' } ],
+    pagination: { enabled: true }
+  },
+  modalConfig: {
+    addModal: { title: 'Add user', handleSubmit: async (formData)=>({ newObject: formData }), formFields: [ { key: 'name', label: 'Name', type: 'text', required: true } ] }
+  }
+};
+```
+
+Server-side listing (fetchData must return { data, pagination }):
+
+```js
+const fetchData = async ({ search, rows_per_page, current_page }) => {
+  const resp = await api.get('/users', { params: { q: search, limit: rows_per_page, page: current_page } });
+  return { data: resp.items, pagination: { current_page: resp.page, rows_per_page: resp.limit, total_pages: resp.totalPages, total_records: resp.total } };
+};
+```
+
+---
+
+If you want me to add a TypeScript declaration snippet or a props table per component (or to document `table_head` examples), tell me which parts to expand and I will add them. ✅
+
 
 ## License
 MIT

package/dist/index.cjs.js

@@ -55,5 +55,5 @@ React keys must be passed directly to JSX without using spread:
                      hover:bg-gray-100 dark:hover:bg-gray-700 rounded-full p-2 shadow-lg transition`,children:e.jsx(H.X,{size:20})}),e.jsx("div",{className:"max-w-5xl w-full px-4 transform transition-all duration-200 scale-95 animate-in zoom-in-95",onClick:r=>r.stopPropagation(),children:e.jsx("img",{src:c,alt:d,className:"w-full max-h-[90vh] object-contain rounded-xl"})})]})})},Je=({config:c})=>{const{data:d=[],table_head:s=[],loading:i=!1,search:l={enabled:!1,placeholder:"Search...",useServerSideSearch:!1},filter:r={enabled:!1,useServerSideFilters:!1},pagination:n={enabled:!1,rows_per_page:10,useServerSidePagination:!1},emptyMessage:w="No data available",onMenuAction:C,setServerSidePaginationData:x=()=>{},onFilterApply:f,filterConfig:u=null}=c,[g,j]=h.useState(""),[b,N]=h.useState(null),[k,M]=h.useState([]),[E,P]=h.useState({}),[B,Y]=h.useState(!1),[z,O]=h.useState(null),[m,_]=h.useState(!1),F=h.useMemo(()=>!l.enabled||!g.trim()||l.useServerSideSearch?d:Ge(d,g,l.searchKeys||[]),[d,g,l]),[R,y]=h.useState(1),[A,q]=h.useState((n==null?void 0:n.rows_per_page)||50),[V,X]=h.useState(F.length||0),ae=n!=null&&n.useServerSidePagination?n.total_pages:Math.ceil(F.length/A),oe=h.useMemo(()=>{if(n.useServerSidePagination)return F;const o=(R-1)*A;return F.slice(o,o+A)},[F,R,A]),re=h.useRef(null),ie=h.useRef({}),t=h.useRef(null),v=o=>{j(o),y(1),l.useServerSideSearch&&(t.current&&clearTimeout(t.current),t.current=setTimeout(async()=>{try{await x(p=>({...p,search:o,current_page:1}))}catch(p){console.error("Search error:",p)}},800))},I=(o,p,D)=>{D.stopPropagation(),N(null),C==null||C(o.type,p)},G=(o,p,D)=>{p.stopPropagation(),M(D);const U=p.currentTarget;ie.current[o]=U;const K=U.getBoundingClientRect(),Q=192,Z=D.length*40,de=window.innerWidth,he=window.innerHeight,T=de-K.right<Q?K.left-Q+K.width:K.left,se=he-K.bottom<Z&&K.top>Z?K.top-Z-2:K.bottom+2;P({top:Math.max(8,Math.min(se,he-Z-8)),left:Math.max(8,Math.min(T,de-Q-8))}),N(b===o?null:o)},te=o=>(R-1)*A+o+1,ne=o=>{O(o),_(!0)},L=(o,p,D,U=null)=>e.jsx(e.Fragment,{children:o?e.jsx("img",{src:o,alt:p||"Avatar",onClick:K=>{K.stopPropagation(),K.preventDefault(),ne({src:o,alt:p})},className:`w-10 h-10 cursor-pointer rounded-full object-cover border border-gray-200 dark:border-gray-700 ${D||""}`}):e.jsx(e.Fragment,{children:U||e.jsx("div",{className:`w-10 h-10 flex items-center justify-center rounded-full border border-gray-300 dark:border-gray-700 bg-gray-200 dark:bg-gray-600 ${D||""}`,children:e.jsx(H.User,{className:"w-6 h-6 text-gray-400 dark:text-gray-400"})})})}),J=(o,p)=>e.jsxs("div",{className:`flex items-center space-x-4 ${p.className||""}`,children:[p.imageKey?L(o[p.imageKey],o[p.titleKey],"group-avatar"):"",e.jsxs("div",{children:[e.jsx("p",{className:"font-medium text-gray-900 dark:text-white group-title",children:o[p.titleKey]||""}),e.jsx("p",{className:"text-sm text-gray-500 dark:text-gray-400 group-sub-title",children:o[p.subtitleKey]||""})]})]}),le=(o,p)=>{var Q;let D=String(o);const U=p.variant||"contained";let K=p.defaultColor;if(((Q=p==null?void 0:p.chipOptions)==null?void 0:Q.length)>0){let Z=p==null?void 0:p.chipOptions.find(de=>de.value==o);Z&&(D=Z.label,K=Z.color)}return e.jsx(Oe,{label:D,variant:U,color:K,className:p.className||""})},ce=(o,p,D)=>{const U=p[o.key];return o.type==="menu_actions"?e.jsx("div",{className:`text-center ${o.className||""}`,children:e.jsx("button",{ref:K=>ie.current[p.id]=K,onClick:K=>G(p.id,K,o.menuList),className:"p-2 bg-gray-100 dark:bg-gray-700 hover:bg-gray-200 dark:hover:bg-gray-600 rounded-full transition text-gray-700 dark:text-gray-300",children:e.jsx(H.EllipsisVertical,{className:"h-4 w-4"})})}):o.type==="index"?e.jsx("span",{className:o.className||"",children:te(D)}):o.type==="group"?J(p,o):o.type==="chip"?e.jsx(e.Fragment,{children:le(U,o)}):o.type==="date"?e.jsx("span",{className:o.className||"",children:Te(U,o.format||"DD MMM YYYY")}):o.type==="avatar"?e.jsx(e.Fragment,{children:L(U,o.alt,o.className,o.fallback_icon)}):e.jsx("span",{className:o.className||"",children:U||"N/A"})},pe=(o,p)=>{if(o.onClickDetails)return C==null?void 0:C("view",p);if(typeof o.handleClick=="function")return o.handleClick(p)},me=o=>o.onClickDetails||typeof o.handleClick=="function";return h.useEffect(()=>{const o=()=>{b&&N(null)};return window.addEventListener("scroll",o,!0),()=>{window.removeEventListener("scroll",o,!0)}},[b]),h.useEffect(()=>{const o=p=>{re.current&&!re.current.contains(p.target)&&N(null)};return document.addEventListener("click",o),()=>document.removeEventListener("click",o)},[]),h.useEffect(()=>{n!=null&&n.rows_per_page&&(n!=null&&n.useServerSidePagination)&&q((n==null?void 0:n.rows_per_page)||50),n.current_page&&y(n.current_page)},[n.rows_per_page,n==null?void 0:n.useServerSidePagination,n.current_page]),h.useEffect(()=>{X(n!=null&&n.useServerSidePagination?n.total_records:F.length),F.length<=A*(R-1)&&!(n!=null&&n.useServerSidePagination)&&y(o=>o-1||1)},[F.length,n.total_records,n==null?void 0:n.useServerSidePagination]),i?e.jsx(We,{rows:6,columns:6}):e.jsxs(e.Fragment,{children:[e.jsxs("div",{className:"flex justify-end items-center mb-6 gap-2",children:[l.enabled&&e.jsx("div",{className:"",children:e.jsxs("div",{className:"relative min-w-[300px]",children:[e.jsx(H.Search,{className:"absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-gray-400 dark:text-gray-300"}),e.jsx("input",{type:"text",placeholder:l.placeholder||"Search...",value:g,onChange:o=>v(o.target.value),className:"w-full h-[36px] pl-9 pr-4 py-3 text-sm border border-gray-300 dark:border-gray-600 rounded-md bg-gray-50 dark:bg-gray-700 text-gray-900 dark:text-white placeholder-gray-500 dark:placeholder-gray-400 focus:outline-none focus:ring-1 focus:ring-blue-300 dark:ring-blue-200 disabled:opacity-50"})]})}),u&&r.enabled&&e.jsxs(ue,{onClick:()=>Y(!0),variant:"contained",children:[e.jsx(H.Filter,{className:"w-4 h-4 mr-2"}),"Filters"]})]}),e.jsxs("div",{className:"bg-white dark:bg-gray-800 rounded-lg shadow overflow-hidden border border-gray-200 dark:border-gray-700",children:[e.jsx("div",{className:"overflow-x-auto",children:e.jsxs("table",{className:"min-w-full divide-y divide-gray-200 dark:divide-gray-700",children:[e.jsx("thead",{className:"bg-gray-50 dark:bg-gray-700/60",children:e.jsx("tr",{children:s.map(o=>e.jsx("th",{className:"px-6 py-4 text-left text-xs font-medium text-black dark:text-white uppercase tracking-wider min-w-max max-w-[180px] truncate",children:o.title},o.key))})}),e.jsx("tbody",{className:"bg-white dark:bg-gray-800 divide-y divide-gray-200 dark:divide-gray-700",children:oe.length===0?e.jsx("tr",{children:e.jsx("td",{colSpan:s.length,className:"text-center py-10 text-gray-500 dark:text-gray-400",children:w})}):oe.map((o,p)=>e.jsx("tr",{className:"hover:bg-gray-50 dark:hover:bg-blue-800/10 transition",children:s.map(D=>e.jsx("td",{className:`px-6 py-4 text-sm text-gray-900 dark:text-gray-100 min-w-max max-w-[300px] truncate ${me(D)?"cursor-pointer":""}`,title:String(o[D.key]??""),onClick:()=>pe(D,o),children:D.render?D.render(o,p):ce(D,o,p)},D.key))},o.id||p))})]})}),(n==null?void 0:n.enabled)&&F.length>0&&e.jsxs("div",{className:" bg-gray-50 dark:bg-gray-700/60 px-6 py-3 flex flex-wrap items-center justify-between border-t border-gray-200 dark:border-gray-600 gap-3",children:[e.jsxs("div",{className:"text-sm text-gray-700 dark:text-gray-300",children:["Showing ",(R-1)*A+1," to"," ",Math.min(R*A,V)," of ",V," ","results"]}),e.jsxs("div",{className:"flex items-center gap-4",children:[e.jsxs("div",{className:"flex items-center gap-2",children:[e.jsx("span",{className:"text-sm text-gray-700 dark:text-gray-300",children:"Rows per page:"}),e.jsx("select",{value:A,onChange:o=>{const p=Number(o.target.value);q(p),y(1),n.useServerSidePagination&&x(D=>({...D,current_page:1,rows_per_page:p}))},className:"border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800 text-sm rounded-md px-2 py-1 focus:outline-none focus:ring-1 focus:ring-blue-500",children:[2,10,25,50,100].map(o=>e.jsx("option",{value:o,children:o},o))})]}),e.jsxs("div",{className:"flex items-center gap-2",children:[e.jsx("button",{onClick:()=>{if(R>1){const o=R-1;y(o),n.useServerSidePagination&&x(p=>({...p,current_page:o}))}},disabled:R===1,className:"p-2 hover:bg-gray-200 dark:hover:bg-gray-600 rounded-md transition text-gray-500 dark:text-gray-300 disabled:opacity-50",children:e.jsx(H.ChevronLeft,{className:"h-4 w-4"})}),e.jsxs("span",{className:"text-sm text-gray-800 dark:text-gray-200",children:["Page ",R," of ",ae]}),e.jsx("button",{onClick:()=>{if(R<ae){const o=R+1;y(o),n.useServerSidePagination&&x(p=>({...p,current_page:o}))}},disabled:R===ae,className:"p-2 hover:bg-gray-200 dark:hover:bg-gray-600 rounded-md transition text-gray-500 dark:text-gray-300 disabled:opacity-50",children:e.jsx(H.ChevronRight,{className:"h-4 w-4"})})]})]})]})]}),b&&Ie.createPortal(e.jsx("div",{ref:re,style:{position:"fixed",top:`${E.top}px`,left:`${E.left}px`,zIndex:9999},className:"w-48 bg-white dark:bg-gray-700 rounded-md shadow-lg border border-gray-200 dark:border-gray-600",children:k.map((o,p)=>e.jsxs("button",{onClick:D=>I(o,d.find(U=>U.id===b),D),className:`w-full flex items-center gap-2 px-4 py-2 text-sm text-left hover:bg-gray-100 dark:hover:bg-gray-600 ${o.variant==="danger"?"text-red-600 dark:text-red-500":"text-gray-700 dark:text-gray-200"}`,children:[o.icon&&e.jsx("span",{className:"shrink-0",children:o.icon}),o.title]},p))}),document.body),u&&e.jsx(Ve,{isOpen:B,onClose:()=>Y(!1),config:u,onApply:f}),m&&e.jsx(Fe,{src:z.src,alt:z.alt,isOpen:m,setIsOpen:_})]})},ye=({isOpen:c,onClose:d,icon:s,title:i,children:l,size:r="md",actionButtons:n=[],actions:w,showDefaultClose:C=!0,footerConfig:x=null,hideFooter:f=!1,onFormSubmit:u=()=>{},onCancel:g,loadingBtn:j=!1,executeFunction:b=()=>{},selectedItem:N=null})=>{if(!c)return null;const k={sm:"max-w-md",md:"max-w-lg",lg:"max-w-2xl",xl:"max-w-4xl",full:"max-w-full"};return e.jsxs("div",{className:"fixed inset-0 z-50 flex items-center justify-center p-4",children:[e.jsx("div",{className:"fixed inset-0 bg-gray-500 opacity-75",onClick:()=>d()}),e.jsxs("div",{className:`relative bg-white rounded-lg shadow-xl w-full ${k[r]||k.md} max-h-[90vh] flex flex-col dark:bg-gray-800`,children:[e.jsxs("div",{className:"flex items-center justify-between p-4 border-b border-gray-200 dark:border-gray-700 flex-shrink-0",children:[e.jsxs("div",{className:"flex items-center gap-1",children:[s&&e.jsx("span",{children:s}),e.jsx("h3",{className:"text-lg font-medium text-gray-900 dark:text-white",children:i})]}),e.jsx("button",{onClick:()=>d(),className:"text-gray-400 hover:text-gray-600 dark:hover:text-gray-300",children:e.jsx(H.X,{className:"w-6 h-6"})})]}),e.jsx("div",{className:"flex-1 overflow-y-auto p-4",children:l}),n.length>0&&e.jsx("div",{className:"px-4 py-3 flex justify-end gap-3 border-t border-gray-200 dark:border-gray-700 sm:px-6",children:n.map(M=>e.jsx(ue,{onClick:E=>{M.type=="submit"?u(E):b(()=>{var P;return(P=M==null?void 0:M.onClick)==null?void 0:P.call(M,E,N)},P=>d==null?void 0:d(P))},disabled:j||M.disabled,variant:M.variant||"contained",color:M.color||"primary",className:`min-w-[100px] ${M.className}`,type:M.type||"button",children:j?e.jsxs("div",{className:"flex items-center",children:[e.jsx("div",{className:"animate-spin rounded-full h-4 w-4 border-2 border-white/30 border-t-2 border-t-white mr-2"}),M.label||"Submit","..."]}):M.label||"Submit"}))})]})]})},Ee=({config:c,onSubmit:d,initialData:s={}})=>{var x;const{formClass:i="grid grid-cols-12 gap-4",formFields:l=[]}=c||{},[r,n]=h.useState(s);h.useEffect(()=>{n(s)},[]);const w=(f,u)=>{n(g=>({...g,[f]:u}))},C=f=>{f.preventDefault();const u=f.target;if(!u.checkValidity()){u.reportValidity();return}d(r)};return e.jsx("form",{id:(x=c.title)!=null&&x.toLowerCase().includes("edit")?"editForm":"addForm",onSubmit:C,className:i,noValidate:!1,children:l.map(f=>e.jsx(e.Fragment,{children:e.jsx(Pe,{field:f,formData:r,handleChange:w},f.key)}))})};function Ze({data:c,config:d}){const{fields:s,containerClass:i}=d,[l,r]=h.useState(null),[n,w]=h.useState(!1),C=u=>{r(u),w(!0)},x=({col:u})=>{let g=u==null?void 0:u.icon,j=u.label,b=c[u.key],N=u.type,k=u.variant||"outline",M=u.defaultColor;if(N=="chip"&&u.chipOptions.length>0){let E=u==null?void 0:u.chipOptions.find(P=>P.value==b);E&&(b=E.label,M=E.color)}return e.jsxs("div",{className:`col-span-12 flex items-center space-x-4 p-4 rounded-xl 
                     bg-gray-100 dark:bg-gray-900 ${u.blockClass}`,children:[g&&e.jsx("div",{className:"flex-shrink-0",children:g}),e.jsxs("div",{className:"flex-1 min-w-0",children:[e.jsx("p",{className:"text-sm font-medium text-gray-500 dark:text-gray-400",children:j}),N=="chip"?e.jsx(e.Fragment,{children:e.jsx(Oe,{label:b,variant:k,color:M,className:"mt-1"})}):N=="tinyEditor"?e.jsx("p",{className:"mt-1 text-sm text-gray-900 dark:text-white break-words",dangerouslySetInnerHTML:{__html:b}}):e.jsx("p",{className:"mt-1 text-sm text-gray-900 dark:text-white break-words",children:N=="date"?e.jsx("span",{children:Te(b,u.format||"DD MMM YYYY")}):b||"N/A"})]})]})},f=({col:u})=>{let g=c[u.titleKey],j=c[u.subtitleKey],b=c[u.imageKey],N=c[u.fallback_icon];return e.jsxs("div",{className:`col-span-12 flex items-center space-x-4 p-4 rounded-xl 
       bg-gray-100 dark:bg-gray-900 
-      ${u.blockClass}`,children:[b?e.jsx("img",{src:b,alt:g,onClick:()=>C({src:b,alt:g}),className:"w-16 h-16 cursor-pointer rounded-full object-cover border-2 border-gray-200 dark:border-gray-700"}):N||e.jsx("div",{className:"w-16 h-16 flex items-center justify-center rounded-full border-2 border-gray-300 dark:border-gray-700 bg-gray-200 dark:bg-gray-600",children:e.jsx(H.User,{className:"w-8 h-8 text-gray-400"})}),e.jsxs("div",{children:[e.jsx("h3",{className:"text-xl font-semibold text-gray-900 dark:text-white",children:g}),e.jsx("p",{className:"text-sm text-gray-500 dark:text-gray-400",children:j})]})]})};return e.jsxs(e.Fragment,{children:[n&&e.jsx(Fe,{src:l.src,alt:l.alt,isOpen:n,setIsOpen:w}),e.jsx("div",{className:`grid grid-cols-12 gap-4 ${i||""}`,children:s.map(u=>u.type=="group"?e.jsx(f,{col:u}):e.jsx(x,{col:u}))})]})}const De=({config:c})=>{var ne,L,J,le,ce,pe,me,o,p,D,U,K,Q,Z,de,he;const{title:d,fetchData:s=async()=>{},isStaticData:i=!1,tableConfig:l={},modalConfig:r={},filterConfig:n}=c,[w,C]=h.useState(!0),[x,f]=h.useState(!1),[u,g]=h.useState([]),[j,b]=h.useState(null),[N,k]=h.useState({search:"",rows_per_page:50,current_page:1}),[M,E]=h.useState({}),[P,B]=h.useState(!1),[Y,z]=h.useState(!1),[O,m]=h.useState(!1),[_,F]=h.useState(!1),[R,y]=h.useState(!1),[A,q]=h.useState(null),V=(S,T)=>{S==="edit"?(q(T),m(!0)):S==="view"?(q(T),y(!0)):S==="delete"&&(q(T),F(!0))},X=async(S,T,$="",se="")=>{f(!0);try{const W=await(S==null?void 0:S());($||W.message)&&fe.enqueueSnackbar($||W.message,{variant:"success"}),T==null||T(W)}catch(W){(se||W.message)&&fe.enqueueSnackbar(se||W.message,{variant:"error"})}finally{f(!1)}},ae=S=>{let T=S.newObject;i?(g($=>[T,...$]),b($=>({...$,current_page:1}))):(k($=>({...$,current_page:1})),N.current_page==1&&v()),z(!1)},oe=S=>{let T=S.newObject,$=S.targetObject;i?g(se=>se.map(W=>W.id===$.id?{...W,...T}:W)):v(),m(!1)},re=S=>{if(!S){F(!1),q(null);return}i?g(T=>T.filter($=>$.id!==S.targetObject.id)):u.length==1&&N.current_page>1?k(T=>({...T,current_page:T.current_page-1})):v(),F(!1),q(null)},ie=S=>X(()=>{var T,$;return($=(T=r==null?void 0:r.addModal)==null?void 0:T.handleSubmit)==null?void 0:$.call(T,S)},ae),t=S=>X(()=>{var T,$;return($=(T=r==null?void 0:r.editModal)==null?void 0:T.handleSubmit)==null?void 0:$.call(T,S,A)},oe),v=async()=>{C(!0),s==null||s({...N,...M}).then(S=>{g(S.data),b(S.pagination)}).catch(S=>{fe.enqueueSnackbar(S.message,{variant:"error"})}).finally(()=>{C(!1)})},I=S=>{var T;E($=>({...S})),(T=l==null?void 0:l.filter)!=null&&T.useServerSideFilters&&B($=>!$)},G=(S,T)=>S.filter($=>Object.entries(T).every(([se,W])=>$[se]===W)),te=h.useMemo(()=>{var S;return(S=l==null?void 0:l.filter)!=null&&S.useServerSideFilters?data:G(u,M)},[u,M]);return h.useEffect(()=>{v()},[N.search,N.rows_per_page,N.current_page,P]),e.jsx(fe.SnackbarProvider,{maxSnack:3,anchorOrigin:{vertical:"bottom",horizontal:"right"},autoHideDuration:3e3,action:S=>e.jsx("button",{onClick:()=>{window.dispatchEvent(new CustomEvent("closeSnackbar",{detail:S}))},className:"p-1 hover:bg-white/20 rounded-full transition-colors duration-200 text-white flex items-center justify-center",children:e.jsx(H.X,{className:"h-4 w-4"})}),children:e.jsxs("div",{children:[e.jsxs("div",{className:"flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4 mb-6",children:[e.jsxs("div",{children:[e.jsx("h1",{className:"text-2xl font-bold text-gray-900 dark:text-white",children:d}),e.jsx("p",{className:"text-md text-gray-600 dark:text-gray-400 mt-2",children:c==null?void 0:c.description})]}),e.jsx("div",{className:"flex items-center space-x-3",children:e.jsxs(ue,{onClick:()=>z(!0),variant:"contained",color:"primary",children:[e.jsx(H.Plus,{className:"w-4 h-4 mr-2"}),c.buttonText||"Add New"]})})]}),e.jsx(Je,{config:{...l,pagination:{...l.pagination,...j},data:te,setServerSidePaginationData:k,onMenuAction:V,filterConfig:n,onFilterApply:I,loading:w}}),e.jsx(ye,{isOpen:Y,onClose:()=>z(!1),icon:(ne=r.addModal)==null?void 0:ne.icon,title:((L=r.addModal)==null?void 0:L.title)||"Add New",size:((J=r.addModal)==null?void 0:J.size)||"md",onFormSubmit:()=>{var S;return(S=document.querySelector("#addForm"))==null?void 0:S.requestSubmit()},loadingBtn:x,actionButtons:r.addModal.actionButtons,children:e.jsx(Ee,{config:(r==null?void 0:r.addModal)||[],onSubmit:ie,initialData:{},loading:x})}),e.jsx(ye,{isOpen:O,onClose:()=>m(!1),icon:(le=r.editModal)==null?void 0:le.icon,title:((ce=r.editModal)==null?void 0:ce.title)||"Edit",size:((pe=r.editModal)==null?void 0:pe.size)||"md",onFormSubmit:()=>{var S;return(S=document.querySelector("#editForm"))==null?void 0:S.requestSubmit()},actionButtons:r.editModal.actionButtons,loadingBtn:x,children:e.jsx(Ee,{config:r.editModal||[],onSubmit:t,initialData:A,loading:x})}),_&&e.jsx(ye,{isOpen:_,onClose:S=>{re(S)},icon:((me=r.deleteModal)==null?void 0:me.icon)||e.jsx(we.Icon,{icon:"ph:warning-bold",className:"w-6 h-6 text-red-500"}),title:((o=r.deleteModal)==null?void 0:o.title)||"Confirm Delete",size:((p=r.deleteModal)==null?void 0:p.size)||"md",loading:x,actionButtons:r.deleteModal.actionButtons,executeFunction:X,selectedItem:A,children:e.jsx("div",{className:"flex items-center space-x-2 py-3",children:e.jsxs("div",{children:[e.jsx("p",{className:"text-md text-gray-700 dark:text-white",children:((D=r.deleteModal)==null?void 0:D.confirmText)||"Are you sure you want to delete this item?"}),((U=r.deleteModal)==null?void 0:U.referenceKey)&&e.jsx("p",{className:"text-md font-semibold text-gray-700 dark:text-white",children:A[(K=r.deleteModal)==null?void 0:K.referenceKey]})]})})}),r.viewModal&&e.jsx(ye,{isOpen:R,onClose:()=>{y(!1),q(null)},icon:(Q=r.viewModal)==null?void 0:Q.icon,title:((Z=r.viewModal)==null?void 0:Z.title)||"View Details",size:((de=r.viewModal)==null?void 0:de.size)||"lg",footerConfig:r==null?void 0:r.viewModal.footer,children:(he=r.viewModal)!=null&&he.component?e.jsx(r.viewModal.component,{data:A}):e.jsx(Ze,{data:A,config:r.viewModal||{}})})]})})},Se=a.shape({value:a.oneOfType([a.string,a.number,a.bool]).isRequired,label:a.string.isRequired,color:a.string}),ve=a.shape({type:a.string.isRequired,label:a.string.isRequired,color:a.string,variant:a.string,onClick:a.func}),Xe=a.shape({title:a.string.isRequired,type:a.string.isRequired,variant:a.string,icon:a.node}),Qe=a.shape({key:a.string.isRequired,title:a.string,type:a.string,imageKey:a.string,titleKey:a.string,subtitleKey:a.string,onClickDetails:a.bool,variant:a.string,chipOptions:a.arrayOf(Se),defaultColor:a.string,className:a.string,format:a.string,menuList:a.arrayOf(Xe)}),je=a.shape({key:a.string.isRequired,label:a.string,type:a.string.isRequired,required:a.bool,minLength:a.number,parentClass:a.string,search:a.bool,multiple:a.bool,dropdownMaxHeight:a.string,dragDrop:a.bool,countriesList:a.bool,defaultCountry:a.string,placeholder:a.string,rows:a.number,text:a.string,editorKey:a.string,options:a.arrayOf(Se)}),ea=a.shape({key:a.string,label:a.string,type:a.string,imageKey:a.string,titleKey:a.string,subtitleKey:a.string,blockClass:a.string,icon:a.node,variant:a.string,chipOptions:a.arrayOf(Se),defaultColor:a.string,className:a.string,format:a.string});De.propTypes={config:a.shape({title:a.string.isRequired,description:a.string,buttonText:a.string,fetchData:a.func.isRequired,isStaticData:a.bool,tableConfig:a.shape({table_head:a.arrayOf(Qe).isRequired,search:a.shape({enabled:a.bool,useServerSideSearch:a.bool,searchKeys:a.arrayOf(a.string)}),pagination:a.shape({enabled:a.bool,useServerSidePagination:a.bool}),filter:a.shape({enabled:a.bool,useServerSideFilters:a.bool})}).isRequired,modalConfig:a.shape({addModal:a.shape({title:a.string.isRequired,size:a.string,formClass:a.string,formFields:a.arrayOf(je),handleSubmit:a.func.isRequired,actionButtons:a.arrayOf(ve)}),editModal:a.shape({title:a.string.isRequired,size:a.string,formClass:a.string,formFields:a.arrayOf(je),handleSubmit:a.func.isRequired,actionButtons:a.arrayOf(ve)}),deleteModal:a.shape({title:a.string.isRequired,size:a.string,confirmText:a.string,referenceKey:a.string,actionButtons:a.arrayOf(ve)}),viewModal:a.shape({title:a.string.isRequired,size:a.string,component:a.elementType,fields:a.arrayOf(ea),footer:a.shape({cancelButton:a.bool,cancelText:a.string})})}),filterConfig:a.shape({fields:a.arrayOf(je)})}).isRequired};function aa(c){return console.info(c,"props passed"),e.jsx(e.Fragment,{children:e.jsx(De,{config:c.config})})}module.exports=aa;
+      ${u.blockClass}`,children:[b?e.jsx("img",{src:b,alt:g,onClick:()=>C({src:b,alt:g}),className:"w-16 h-16 cursor-pointer rounded-full object-cover border-2 border-gray-200 dark:border-gray-700"}):N||e.jsx("div",{className:"w-16 h-16 flex items-center justify-center rounded-full border-2 border-gray-300 dark:border-gray-700 bg-gray-200 dark:bg-gray-600",children:e.jsx(H.User,{className:"w-8 h-8 text-gray-400"})}),e.jsxs("div",{children:[e.jsx("h3",{className:"text-xl font-semibold text-gray-900 dark:text-white",children:g}),e.jsx("p",{className:"text-sm text-gray-500 dark:text-gray-400",children:j})]})]})};return e.jsxs(e.Fragment,{children:[n&&e.jsx(Fe,{src:l.src,alt:l.alt,isOpen:n,setIsOpen:w}),e.jsx("div",{className:`grid grid-cols-12 gap-4 ${i||""}`,children:s.map(u=>u.type=="group"?e.jsx(f,{col:u}):e.jsx(x,{col:u}))})]})}const De=({config:c})=>{var ne,L,J,le,ce,pe,me,o,p,D,U,K,Q,Z,de,he;const{title:d,fetchData:s=async()=>{},isStaticData:i=!1,tableConfig:l={},modalConfig:r={},filterConfig:n}=c,[w,C]=h.useState(!0),[x,f]=h.useState(!1),[u,g]=h.useState([]),[j,b]=h.useState(null),[N,k]=h.useState({search:"",rows_per_page:50,current_page:1}),[M,E]=h.useState({}),[P,B]=h.useState(!1),[Y,z]=h.useState(!1),[O,m]=h.useState(!1),[_,F]=h.useState(!1),[R,y]=h.useState(!1),[A,q]=h.useState(null),V=(S,T)=>{S==="edit"?(q(T),m(!0)):S==="view"?(q(T),y(!0)):S==="delete"&&(q(T),F(!0))},X=async(S,T,$="",se="")=>{f(!0);try{const W=await(S==null?void 0:S());($||W.message)&&fe.enqueueSnackbar($||W.message,{variant:"success"}),T==null||T(W)}catch(W){(se||W.message)&&fe.enqueueSnackbar(se||W.message,{variant:"error"})}finally{f(!1)}},ae=S=>{let T=S.newObject;i?(g($=>[T,...$]),b($=>({...$,current_page:1}))):(k($=>({...$,current_page:1})),N.current_page==1&&v()),z(!1)},oe=S=>{let T=S.newObject,$=S.targetObject;i?g(se=>se.map(W=>W.id===$.id?{...W,...T}:W)):v(),m(!1)},re=S=>{if(!S){F(!1),q(null);return}i?g(T=>T.filter($=>$.id!==S.targetObject.id)):u.length==1&&N.current_page>1?k(T=>({...T,current_page:T.current_page-1})):v(),F(!1),q(null)},ie=S=>X(()=>{var T,$;return($=(T=r==null?void 0:r.addModal)==null?void 0:T.handleSubmit)==null?void 0:$.call(T,S)},ae),t=S=>X(()=>{var T,$;return($=(T=r==null?void 0:r.editModal)==null?void 0:T.handleSubmit)==null?void 0:$.call(T,S,A)},oe),v=async()=>{C(!0),s==null||s({...N,...M}).then(S=>{g(S.data),b(S.pagination)}).catch(S=>{fe.enqueueSnackbar(S.message,{variant:"error"})}).finally(()=>{C(!1)})},I=S=>{var T;E($=>({...S})),(T=l==null?void 0:l.filter)!=null&&T.useServerSideFilters&&B($=>!$)},G=(S,T)=>S.filter($=>Object.entries(T).every(([se,W])=>$[se]===W)),te=h.useMemo(()=>{var S;return(S=l==null?void 0:l.filter)!=null&&S.useServerSideFilters?data:G(u,M)},[u,M]);return h.useEffect(()=>{v()},[N.search,N.rows_per_page,N.current_page,P]),e.jsx(fe.SnackbarProvider,{maxSnack:3,anchorOrigin:{vertical:"bottom",horizontal:"right"},autoHideDuration:3e3,action:S=>e.jsx("button",{onClick:()=>{window.dispatchEvent(new CustomEvent("closeSnackbar",{detail:S}))},className:"p-1 hover:bg-white/20 rounded-full transition-colors duration-200 text-white flex items-center justify-center",children:e.jsx(H.X,{className:"h-4 w-4"})}),children:e.jsxs("div",{children:[e.jsxs("div",{className:"flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4 mb-6",children:[e.jsxs("div",{children:[e.jsx("h1",{className:"text-2xl font-bold text-gray-900 dark:text-white",children:d}),e.jsx("p",{className:"text-md text-gray-600 dark:text-gray-400 mt-2",children:c==null?void 0:c.description})]}),e.jsx("div",{className:"flex items-center space-x-3",children:e.jsxs(ue,{onClick:()=>z(!0),variant:"contained",color:"primary",children:[e.jsx(H.Plus,{className:"w-4 h-4 mr-2"}),c.buttonText||"Add New"]})})]}),e.jsx(Je,{config:{...l,pagination:{...l.pagination,...j},data:te,setServerSidePaginationData:k,onMenuAction:V,filterConfig:n,onFilterApply:I,loading:w}}),e.jsx(ye,{isOpen:Y,onClose:()=>z(!1),icon:(ne=r.addModal)==null?void 0:ne.icon,title:((L=r.addModal)==null?void 0:L.title)||"Add New",size:((J=r.addModal)==null?void 0:J.size)||"md",onFormSubmit:()=>{var S;return(S=document.querySelector("#addForm"))==null?void 0:S.requestSubmit()},loadingBtn:x,actionButtons:r.addModal.actionButtons,children:e.jsx(Ee,{config:(r==null?void 0:r.addModal)||[],onSubmit:ie,initialData:{},loading:x})}),e.jsx(ye,{isOpen:O,onClose:()=>m(!1),icon:(le=r.editModal)==null?void 0:le.icon,title:((ce=r.editModal)==null?void 0:ce.title)||"Edit",size:((pe=r.editModal)==null?void 0:pe.size)||"md",onFormSubmit:()=>{var S;return(S=document.querySelector("#editForm"))==null?void 0:S.requestSubmit()},actionButtons:r.editModal.actionButtons,loadingBtn:x,children:e.jsx(Ee,{config:r.editModal||[],onSubmit:t,initialData:A,loading:x})}),_&&e.jsx(ye,{isOpen:_,onClose:S=>{re(S)},icon:((me=r.deleteModal)==null?void 0:me.icon)||e.jsx(we.Icon,{icon:"ph:warning-bold",className:"w-6 h-6 text-red-500"}),title:((o=r.deleteModal)==null?void 0:o.title)||"Confirm Delete",size:((p=r.deleteModal)==null?void 0:p.size)||"md",loading:x,actionButtons:r.deleteModal.actionButtons,executeFunction:X,selectedItem:A,children:e.jsx("div",{className:"flex items-center space-x-2 py-3",children:e.jsxs("div",{children:[e.jsx("p",{className:"text-md text-gray-700 dark:text-white",children:((D=r.deleteModal)==null?void 0:D.confirmText)||"Are you sure you want to delete this item?"}),((U=r.deleteModal)==null?void 0:U.referenceKey)&&e.jsx("p",{className:"text-md font-semibold text-gray-700 dark:text-white",children:A[(K=r.deleteModal)==null?void 0:K.referenceKey]})]})})}),r.viewModal&&e.jsx(ye,{isOpen:R,onClose:()=>{y(!1),q(null)},icon:(Q=r.viewModal)==null?void 0:Q.icon,title:((Z=r.viewModal)==null?void 0:Z.title)||"View Details",size:((de=r.viewModal)==null?void 0:de.size)||"lg",footerConfig:r==null?void 0:r.viewModal.footer,children:(he=r.viewModal)!=null&&he.component?e.jsx(r.viewModal.component,{data:A}):e.jsx(Ze,{data:A,config:r.viewModal||{}})})]})})},Se=a.shape({value:a.oneOfType([a.string,a.number,a.bool]).isRequired,label:a.string.isRequired,color:a.string}),ve=a.shape({type:a.string.isRequired,label:a.string.isRequired,color:a.string,variant:a.string,onClick:a.func}),Xe=a.shape({title:a.string.isRequired,type:a.string.isRequired,variant:a.string,icon:a.node}),Qe=a.shape({key:a.string.isRequired,title:a.string,type:a.string,imageKey:a.string,titleKey:a.string,subtitleKey:a.string,onClickDetails:a.bool,variant:a.string,chipOptions:a.arrayOf(Se),defaultColor:a.string,className:a.string,format:a.string,menuList:a.arrayOf(Xe)}),je=a.shape({key:a.string.isRequired,label:a.string,type:a.string.isRequired,required:a.bool,minLength:a.number,parentClass:a.string,search:a.bool,multiple:a.bool,dropdownMaxHeight:a.string,dragDrop:a.bool,countriesList:a.bool,defaultCountry:a.string,placeholder:a.string,rows:a.number,text:a.string,editorKey:a.string,options:a.arrayOf(Se)}),ea=a.shape({key:a.string,label:a.string,type:a.string,imageKey:a.string,titleKey:a.string,subtitleKey:a.string,blockClass:a.string,icon:a.node,variant:a.string,chipOptions:a.arrayOf(Se),defaultColor:a.string,className:a.string,format:a.string});De.propTypes={config:a.shape({title:a.string.isRequired,description:a.string,buttonText:a.string,fetchData:a.func.isRequired,isStaticData:a.bool,tableConfig:a.shape({table_head:a.arrayOf(Qe).isRequired,search:a.shape({enabled:a.bool,useServerSideSearch:a.bool,searchKeys:a.arrayOf(a.string)}),pagination:a.shape({enabled:a.bool,useServerSidePagination:a.bool}),filter:a.shape({enabled:a.bool,useServerSideFilters:a.bool})}).isRequired,modalConfig:a.shape({addModal:a.shape({title:a.string.isRequired,size:a.string,formClass:a.string,formFields:a.arrayOf(je),handleSubmit:a.func.isRequired,actionButtons:a.arrayOf(ve)}),editModal:a.shape({title:a.string.isRequired,size:a.string,formClass:a.string,formFields:a.arrayOf(je),handleSubmit:a.func.isRequired,actionButtons:a.arrayOf(ve)}),deleteModal:a.shape({title:a.string.isRequired,size:a.string,confirmText:a.string,referenceKey:a.string,actionButtons:a.arrayOf(ve)}),viewModal:a.shape({title:a.string.isRequired,size:a.string,component:a.elementType,fields:a.arrayOf(ea),footer:a.shape({cancelButton:a.bool,cancelText:a.string})})}),filterConfig:a.shape({fields:a.arrayOf(je)})}).isRequired};function aa(c){return e.jsx(e.Fragment,{children:e.jsx(De,{config:c.config})})}module.exports=aa;
 //# sourceMappingURL=index.cjs.js.map