@ammarkhalidfarooq/dashboard-package 0.6.107 → 0.6.109

package/dist/index.es.js

@@ -7043,6 +7043,7 @@ var RefundsChargebacksCard = function RefundsChargebacksCard(_ref) {
 };
 
 var BORDER$1 = "1px solid #e0e0e0";
+var ROWS_PER_PAGE = 10;
 var headerCellSx$1 = {
   fontWeight: 700,
   fontSize: "0.78rem",
@@ -7099,11 +7100,74 @@ var MOCK_ROWS = [{
   date: "Jun 7, 2026",
   campaignName: "Food Security - Sudan",
   raised: "$760.00"
+}, {
+  date: "Jun 8, 2026",
+  campaignName: "Winter Relief - Afghanistan",
+  raised: "$2,140.00"
+}, {
+  date: "Jun 9, 2026",
+  campaignName: "Clean Water - Bangladesh",
+  raised: "$890.00"
+}, {
+  date: "Jun 10, 2026",
+  campaignName: "Shelter Fund - Lebanon",
+  raised: "$1,675.00"
+}, {
+  date: "Jun 11, 2026",
+  campaignName: "Qurbani 2026 - Global",
+  raised: "$5,230.00"
+}, {
+  date: "Jun 12, 2026",
+  campaignName: "Maternal Health - Somalia",
+  raised: "$1,120.00"
+}, {
+  date: "Jun 13, 2026",
+  campaignName: "School Supplies - Pakistan",
+  raised: "$640.00"
+}, {
+  date: "Jun 14, 2026",
+  campaignName: "Disaster Response - Turkey",
+  raised: "$3,890.00"
+}, {
+  date: "Jun 15, 2026",
+  campaignName: "Zakat Distribution - UK",
+  raised: "$2,450.00"
+}, {
+  date: "Jun 16, 2026",
+  campaignName: "Eye Care - Morocco",
+  raised: "$780.00"
+}, {
+  date: "Jun 17, 2026",
+  campaignName: "Livelihood Support - Iraq",
+  raised: "$1,960.00"
+}, {
+  date: "Jun 18, 2026",
+  campaignName: "Ramadan Iftar - Jordan",
+  raised: "$2,310.00"
+}, {
+  date: "Jun 19, 2026",
+  campaignName: "Children's Fund - Nigeria",
+  raised: "$1,430.00"
+}, {
+  date: "Jun 20, 2026",
+  campaignName: "Housing Rebuild - Libya",
+  raised: "$3,050.00"
 }];
 var OverallDetailModal = function OverallDetailModal(_ref) {
   var open = _ref.open,
     title = _ref.title,
     onClose = _ref.onClose;
+  var _useState = useState(1),
+    _useState2 = _slicedToArray(_useState, 2),
+    page = _useState2[0],
+    setPage = _useState2[1];
+  var totalPages = Math.ceil(MOCK_ROWS.length / ROWS_PER_PAGE);
+  useEffect(function () {
+    if (open) {
+      setPage(1);
+    }
+  }, [open, title]);
+  var paginatedRows = MOCK_ROWS.slice((page - 1) * ROWS_PER_PAGE, page * ROWS_PER_PAGE);
   return /*#__PURE__*/jsxs(Dialog, {
     open: open,
     onClose: onClose,
@@ -7143,48 +7207,120 @@ var OverallDetailModal = function OverallDetailModal(_ref) {
       sx: {
         pt: 0
       },
-      children: /*#__PURE__*/jsx(TableContainer, {
+      children: /*#__PURE__*/jsxs(Box, {
         sx: {
           border: BORDER$1,
           borderRadius: "12px",
           overflow: "hidden"
         },
-        children: /*#__PURE__*/jsxs(Table, {
-          children: [/*#__PURE__*/jsx(TableHead, {
-            children: /*#__PURE__*/jsxs(TableRow, {
-              children: [/*#__PURE__*/jsx(TableCell, {
-                sx: headerCellSx$1,
-                children: "Date"
-              }), /*#__PURE__*/jsx(TableCell, {
-                sx: headerCellSx$1,
-                children: "Campaign Name"
-              }), /*#__PURE__*/jsx(TableCell, {
-                sx: _objectSpread2(_objectSpread2({}, headerCellSx$1), {}, {
-                  textAlign: "right"
-                }),
-                children: "Raised"
-              })]
-            })
-          }), /*#__PURE__*/jsx(TableBody, {
-            children: MOCK_ROWS.map(function (row) {
-              return /*#__PURE__*/jsxs(TableRow, {
+        children: [/*#__PURE__*/jsx(TableContainer, {
+          children: /*#__PURE__*/jsxs(Table, {
+            children: [/*#__PURE__*/jsx(TableHead, {
+              children: /*#__PURE__*/jsxs(TableRow, {
                 children: [/*#__PURE__*/jsx(TableCell, {
-                  sx: cellSx$1,
-                  children: row.date
+                  sx: headerCellSx$1,
+                  children: "Date"
                 }), /*#__PURE__*/jsx(TableCell, {
-                  sx: cellSx$1,
-                  children: row.campaignName
+                  sx: headerCellSx$1,
+                  children: "Campaign Name"
                 }), /*#__PURE__*/jsx(TableCell, {
-                  sx: _objectSpread2(_objectSpread2({}, cellSx$1), {}, {
-                    textAlign: "right",
-                    fontWeight: 600
+                  sx: _objectSpread2(_objectSpread2({}, headerCellSx$1), {}, {
+                    textAlign: "right"
                   }),
-                  children: row.raised
+                  children: "Raised"
                 })]
-              }, "".concat(row.date, "-").concat(row.campaignName));
-            })
+              })
+            }), /*#__PURE__*/jsx(TableBody, {
+              children: paginatedRows.map(function (row) {
+                return /*#__PURE__*/jsxs(TableRow, {
+                  children: [/*#__PURE__*/jsx(TableCell, {
+                    sx: cellSx$1,
+                    children: row.date
+                  }), /*#__PURE__*/jsx(TableCell, {
+                    sx: cellSx$1,
+                    children: row.campaignName
+                  }), /*#__PURE__*/jsx(TableCell, {
+                    sx: _objectSpread2(_objectSpread2({}, cellSx$1), {}, {
+                      textAlign: "right",
+                      fontWeight: 600
+                    }),
+                    children: row.raised
+                  })]
+                }, "".concat(row.date, "-").concat(row.campaignName));
+              })
+            })]
+          })
+        }), /*#__PURE__*/jsxs(Box, {
+          sx: {
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "space-between",
+            px: 2,
+            py: 1.5,
+            borderTop: BORDER$1
+          },
+          children: [/*#__PURE__*/jsxs(Box, {
+            sx: {
+              display: "flex",
+              gap: 0.5
+            },
+            children: [Array.from({
+              length: totalPages
+            }, function (_, index) {
+              return index + 1;
+            }).map(function (pageNumber) {
+              return /*#__PURE__*/jsx(Box, {
+                onClick: function onClick() {
+                  return setPage(pageNumber);
+                },
+                sx: {
+                  width: 32,
+                  height: 32,
+                  display: "flex",
+                  alignItems: "center",
+                  justifyContent: "center",
+                  borderRadius: "6px",
+                  cursor: "pointer",
+                  fontSize: "13px",
+                  fontWeight: page === pageNumber ? 700 : 400,
+                  bgcolor: page === pageNumber ? "primary.main" : "transparent",
+                  color: page === pageNumber ? "#fff" : "#333",
+                  border: page === pageNumber ? "none" : "1px solid ".concat(BORDER$1),
+                  "&:hover": {
+                    bgcolor: page === pageNumber ? "primary.main" : "#f5f5f5"
+                  }
+                },
+                children: pageNumber
+              }, pageNumber);
+            }), page < totalPages && /*#__PURE__*/jsx(Box, {
+              onClick: function onClick() {
+                return setPage(function (current) {
+                  return Math.min(current + 1, totalPages);
+                });
+              },
+              sx: {
+                px: 1.5,
+                height: 32,
+                display: "flex",
+                alignItems: "center",
+                gap: 0.5,
+                borderRadius: "6px",
+                cursor: "pointer",
+                fontSize: "13px",
+                color: "#333",
+                border: "1px solid ".concat(BORDER$1),
+                "&:hover": {
+                  bgcolor: "#f5f5f5"
+                }
+              },
+              children: "Next \u203A"
+            })]
+          }), /*#__PURE__*/jsxs(Typography, {
+            variant: "caption",
+            color: "text.secondary",
+            children: [MOCK_ROWS.length, " records"]
           })]
-        })
+        })]
       })
     })]
   });
@@ -7256,7 +7392,7 @@ var OverallDetailsGrid = function OverallDetailsGrid(_ref) {
         return openDetailModal(title);
       },
       sx: {
-        height: "100%"
+        display: "contents"
       },
       children: card
     });