mobigrid-module 1.1.31 → 1.1.36

package/README.md

@@ -17,16 +17,17 @@ import MobigridModule from 'mobigrid-module';
 import 'mobigrid-module/dist/index.css'; // Import styles if necessary
 
 function App() {
-  const handleEdit = (row) => {
-    console.log('Edit row:', row);
+  const handlePrint = (row) => {
+    console.log('Print ticket:', row.ticket_numbers);
   };
 
-  const handleDelete = (row) => {
-    console.log('Delete row:', row);
+  const handleRefund = (row) => {
+    console.log('Refund transaction:', row.request_id);
   };
 
-  const checkEditPermission = (row) => {
-    return row.status !== 'LOCKED';
+  // Callback to determine if print button should be shown
+  const canPrintTicket = (row) => {
+    return row.status === 'PAID' && row.canPrint === true;
   };
 
   return (
@@ -34,11 +35,11 @@ function App() {
       configUrl="https://api.example.com/config"
       // OR provide configJson directly
       // configJson={myConfigObject}
-      dataUrl="https://api.example.com/data"
+      dataUrl="https://api.example.com/transactions"
       callbacks={{
-        onEdit: handleEdit,
-        onDelete: handleDelete,
-        canEdit: checkEditPermission
+        onPrint: handlePrint,
+        onRefund: handleRefund,
+        checkPrint: canPrintTicket
       }}
       customHeaders={{
         'Authorization': 'Bearer token123'
@@ -69,22 +70,27 @@ The `MobigridModule` accepts the following props:
 
 The configuration object defines the structure of the table, filters, and columns. You can provide this via the `configUrl` endpoint or directly via the `configJson` prop.
 
+### Example Configuration (Payment History)
+
 ```json
 {
-  "title": "User Management",
-  "data_url": "https://api.example.com/users",
+  "title": "Payment History",
+  "data_url": "https://api.example.com/payments",
   "Filters": [
     [
       {
         "type": "Text",
-        "name": "search",
-        "label": "Search Users"
+        "name": "request_id",
+        "label": "Request ID"
       },
       {
         "type": "Select",
-        "name": "role",
-        "label": "Role",
-        "urlSource": "https://api.example.com/roles" // Dynamic options
+        "name": "status",
+        "label": "Status",
+        "options": [
+          { "label": "Paid", "value": "PAID" },
+          { "label": "Failed", "value": "FAILED" }
+        ]
       }
     ],
     [
@@ -100,32 +106,43 @@ The configuration object defines the structure of the table, filters, and column
       }
     ]
   ],
-  "colomns": [ // Note: spelling is 'colomns' in current version
+  "colomns": [
     {
-      "title": "Name",
-      "key": "fullName",
+      "title": "Request ID",
+      "key": "request_id",
       "type": "text"
     },
+    {
+      "title": "Date",
+      "key": "created_date",
+      "type": "date",
+      "pattern": "dd/MM/yyyy HH:mm"
+    },
+    {
+      "title": "POS Code",
+      "key": "pos_code",
+      "type": "text"
+    },
+    {
+      "title": "Amount",
+      "key": "amount",
+      "type": "money",
+      "currency": "MAD"
+    },
     {
       "title": "Status",
       "key": "status",
       "type": "status"
     },
-    {
-      "title": "Created At",
-      "key": "createdAt",
-      "type": "date",
-      "pattern": "dd/MM/yyyy"
-    },
     {
       "title": "Actions",
       "key": "ACTIONS_BUTTONS",
       "actions": [
         {
-          "label": "Edit",
-          "icon": "icon-edit",
-          "action": "onEdit",
-          "condition": "canEdit"
+          "label": "Print",
+          "icon": "icon-printer",
+          "action": "onPrint",
+          "condition": "checkPrint"
         }
       ]
     }
@@ -151,15 +168,38 @@ Filters are defined as an array of arrays (rows of filters).
 Defines the table columns.
 
 - **`title`**: Header text for the column.
-- **`key`**: The key in the data object to display.
+- **`key`**: The key in the data object to display (e.g., `request_id`, `amount`).
 - **`type`**: formatting type.
     - `"text"`: Default display.
     - `"date"`: Formats date using `pattern` (default: `dd-MM-yyyy`).
-    - `"money"`: Formats as currency. Usage: `currency` prop required.
+    - `"money"`: Formats as currency. Usage: `currency` prop required (e.g., "MAD").
     - `"status"`: Displays a colored badge based on status value (PENDING, PAID, CANCELLED, etc.).
     - `"ACTIONS_BUTTONS"`: Special column for action buttons.
 - **`scroll`**: If true, limits height and adds scrollbar for long content.
 
+### Extra Metrics Configuration (`extra`)
+
+Aggregates the API returns alongside the rows, under an `EXTRA` array in the
+response (`{ "DATA": [...], "EXTRA": [{ "sumamounts": 50502 }], "PAGESNUM": 2379 }`).
+The first `EXTRA` object is read; each configured metric is displayed as a badge
+next to the row count in the page header.
+
+```json
+"extra": [
+  {
+    "title": "Volume",
+    "key": "sumamounts",
+    "type": "money",
+    "currency": "DH"
+  }
+]
+```
+
+- **`key`**: The key in the `EXTRA` object. Keys missing from the response are skipped.
+- **`title`**: (Optional) Shown as the badge tooltip.
+- **`type`**: `"money"` and `"number"` are grouped by thousands (`50502` -> `50 502`);
+  `"money"` appends `currency`. Anything else is displayed as-is.
+
 ### Actions Configuration
 
 For columns with `key: "ACTIONS_BUTTONS"`, you can define an `actions` array.

package/dist/components/Layout/PageHeader.d.ts

@@ -6,10 +6,17 @@ interface PageHeaderProps {
     setFilters: (filters: any) => void;
     onSearch: () => void;
     count: number;
+    extra?: Record<string, any> | null;
+    extraConfig?: Array<{
+        title?: string;
+        key: string;
+        type?: string;
+        currency?: string;
+    }>;
     isLoading: boolean;
     setCurrentPage: (page: number) => void;
     handleOptionsSearch: (filter: any, search: string) => void;
     optionsLoading: boolean;
 }
-export declare function PageHeader({ title, filters, setFilters, configFilters, onSearch, count, isLoading, setCurrentPage, handleOptionsSearch, optionsLoading, }: PageHeaderProps): React.JSX.Element;
+export declare function PageHeader({ title, filters, setFilters, configFilters, onSearch, count, extra, extraConfig, isLoading, setCurrentPage, handleOptionsSearch, optionsLoading, }: PageHeaderProps): React.JSX.Element;
 export {};