fix params

frontend/client-portal/pnpm-lock.yaml

@@ -26,6 +26,7 @@ specifiers:
   '@typescript-eslint/eslint-plugin': ^5.35.1
   '@typescript-eslint/parser': ^5.35.1
   '@vitejs/plugin-react': ^1.3.2
+  apexcharts: ^3.36.3
   axios: ^0.27.2
   change-case: ^4.1.2
   csstype: ^3.1.0
@@ -52,12 +53,14 @@ specifiers:
   numeral: ^2.0.6
   prettier: ^2.7.1
   react: ^17.0.2
+  react-apexcharts: ^1.4.0
   react-dom: ^17.0.2
   react-dropzone: ^14.2.2
   react-helmet-async: ^1.3.0
   react-hook-form: ^7.34.2
   react-intersection-observer: ^8.34.0
   react-lazy-load-image-component: ^1.5.5
+  react-number-format: ^5.1.1
   react-quill: 2.0.0-beta.4
   react-router: ^6.3.0
   react-router-dom: ^6.3.0
@@ -85,6 +88,7 @@ dependencies:
   '@mui/x-data-grid': 5.16.0_r4jqxufjb3aftjrjm24vhpn4hm
   '@mui/x-date-pickers': 5.0.0-beta.2_y3fv7pzpxqpbmxcbzsros3kjnu
   '@vitejs/plugin-react': 1.3.2
+  apexcharts: 3.36.3
   axios: 0.27.2
   change-case: 4.1.2
   csstype: 3.1.0
@@ -98,12 +102,14 @@ dependencies:
   nprogress: 0.2.0
   numeral: 2.0.6
   react: 17.0.2
+  react-apexcharts: 1.4.0_rurziszfowucu2gmkqclv6xeru
   react-dom: 17.0.2_react@17.0.2
   react-dropzone: 14.2.2_react@17.0.2
   react-helmet-async: 1.3.0_sfoxds7t5ydpegc3knd667wn6m
   react-hook-form: 7.34.2_react@17.0.2
   react-intersection-observer: 8.34.0_react@17.0.2
   react-lazy-load-image-component: 1.5.5_sfoxds7t5ydpegc3knd667wn6m
+  react-number-format: 5.1.2_sfoxds7t5ydpegc3knd667wn6m
   react-quill: 2.0.0-beta.4_sfoxds7t5ydpegc3knd667wn6m
   react-router: 6.3.0_react@17.0.2
   react-router-dom: 6.3.0_sfoxds7t5ydpegc3knd667wn6m
@@ -2683,6 +2689,17 @@ packages:
       color-convert: 2.0.1
     dev: true
 
+  /apexcharts/3.36.3:
+    resolution: {integrity: sha512-8/FXEs0ohXMff07Gv28XjhPwEJphIUdq2/wii/pcvi54Tw6z1mjrV8ydN8rlWi/ve8BAPBefJkLmRWv7UOBsLw==}
+    dependencies:
+      svg.draggable.js: 2.2.2
+      svg.easing.js: 2.0.0
+      svg.filter.js: 2.0.2
+      svg.pathmorphing.js: 0.1.3
+      svg.resize.js: 1.4.3
+      svg.select.js: 3.0.1
+    dev: false
+
   /argparse/2.0.1:
     resolution: {integrity: sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q==}
     dev: true
@@ -4934,6 +4951,17 @@ packages:
       safe-buffer: 5.2.1
     dev: true
 
+  /react-apexcharts/1.4.0_rurziszfowucu2gmkqclv6xeru:
+    resolution: {integrity: sha512-DrcMV4aAMrUG+n6412yzyATWEyCDWlpPBBhVbpzBC4PDeuYU6iF84SmExbck+jx5MUm4U5PM3/T307Mc3kzc9Q==}
+    peerDependencies:
+      apexcharts: ^3.18.0
+      react: '>=0.13'
+    dependencies:
+      apexcharts: 3.36.3
+      prop-types: 15.8.1
+      react: 17.0.2
+    dev: false
+
   /react-dom/17.0.2_react@17.0.2:
     resolution: {integrity: sha512-s4h96KtLDUQlsENhMn1ar8t2bEa+q/YAtj8pPPdIjPDGBDIVNsrD9aXNWqspUe6AzKCIG0C1HZZLqLV7qpOBGA==}
     peerDependencies:
@@ -5016,6 +5044,17 @@ packages:
       react-dom: 17.0.2_react@17.0.2
     dev: false
 
+  /react-number-format/5.1.2_sfoxds7t5ydpegc3knd667wn6m:
+    resolution: {integrity: sha512-NXm/MvZVjmPqrFbjAut/prCyBZ+pA+O+C12rDkWZrwS3JXz1J42RC1kpclkdnkx2KDjRCNFLb21FlwGcNBZddw==}
+    peerDependencies:
+      react: ^0.14 || ^15.0.0 || ^16.0.0 || ^17.0.0 || ^18.0.0 || ^18.0.0
+      react-dom: ^0.14 || ^15.0.0 || ^16.0.0 || ^17.0.0 || ^18.0.0 || ^18.0.0
+    dependencies:
+      prop-types: 15.8.1
+      react: 17.0.2
+      react-dom: 17.0.2_react@17.0.2
+    dev: false
+
   /react-quill/2.0.0-beta.4_sfoxds7t5ydpegc3knd667wn6m:
     resolution: {integrity: sha512-KyAHvAlPjP4xLElKZJefMth91Z6FbbXRvq9OSu6xN3KBaoasLP9p+3dcxg4Ywr4tBlpMGXcPszYSAgd5CpJ45Q==}
     peerDependencies:
@@ -5461,6 +5500,60 @@ packages:
     resolution: {integrity: sha512-e4hG1hRwoOdRb37cIMSgzNsxyzKfayW6VOflrwvR+/bzrkyxY/31WkbgnQpgtrNp1SdpJvpUAGTa/ZoiPNDuRQ==}
     dev: false
 
+  /svg.draggable.js/2.2.2:
+    resolution: {integrity: sha512-JzNHBc2fLQMzYCZ90KZHN2ohXL0BQJGQimK1kGk6AvSeibuKcIdDX9Kr0dT9+UJ5O8nYA0RB839Lhvk4CY4MZw==}
+    engines: {node: '>= 0.8.0'}
+    dependencies:
+      svg.js: 2.7.1
+    dev: false
+
+  /svg.easing.js/2.0.0:
+    resolution: {integrity: sha512-//ctPdJMGy22YoYGV+3HEfHbm6/69LJUTAqI2/5qBvaNHZ9uUFVC82B0Pl299HzgH13rKrBgi4+XyXXyVWWthA==}
+    engines: {node: '>= 0.8.0'}
+    dependencies:
+      svg.js: 2.7.1
+    dev: false
+
+  /svg.filter.js/2.0.2:
+    resolution: {integrity: sha512-xkGBwU+dKBzqg5PtilaTb0EYPqPfJ9Q6saVldX+5vCRy31P6TlRCP3U9NxH3HEufkKkpNgdTLBJnmhDHeTqAkw==}
+    engines: {node: '>= 0.8.0'}
+    dependencies:
+      svg.js: 2.7.1
+    dev: false
+
+  /svg.js/2.7.1:
+    resolution: {integrity: sha512-ycbxpizEQktk3FYvn/8BH+6/EuWXg7ZpQREJvgacqn46gIddG24tNNe4Son6omdXCnSOaApnpZw6MPCBA1dODA==}
+    dev: false
+
+  /svg.pathmorphing.js/0.1.3:
+    resolution: {integrity: sha512-49HWI9X4XQR/JG1qXkSDV8xViuTLIWm/B/7YuQELV5KMOPtXjiwH4XPJvr/ghEDibmLQ9Oc22dpWpG0vUDDNww==}
+    engines: {node: '>= 0.8.0'}
+    dependencies:
+      svg.js: 2.7.1
+    dev: false
+
+  /svg.resize.js/1.4.3:
+    resolution: {integrity: sha512-9k5sXJuPKp+mVzXNvxz7U0uC9oVMQrrf7cFsETznzUDDm0x8+77dtZkWdMfRlmbkEEYvUn9btKuZ3n41oNA+uw==}
+    engines: {node: '>= 0.8.0'}
+    dependencies:
+      svg.js: 2.7.1
+      svg.select.js: 2.1.2
+    dev: false
+
+  /svg.select.js/2.1.2:
+    resolution: {integrity: sha512-tH6ABEyJsAOVAhwcCjF8mw4crjXSI1aa7j2VQR8ZuJ37H2MBUbyeqYr5nEO7sSN3cy9AR9DUwNg0t/962HlDbQ==}
+    engines: {node: '>= 0.8.0'}
+    dependencies:
+      svg.js: 2.7.1
+    dev: false
+
+  /svg.select.js/3.0.1:
+    resolution: {integrity: sha512-h5IS/hKkuVCbKSieR9uQCj9w+zLHoPh+ce19bBYyqF53g6mnPB8sAtIbe1s9dh2S2fCmYX2xel1Ln3PJBbK4kw==}
+    engines: {node: '>= 0.8.0'}
+    dependencies:
+      svg.js: 2.7.1
+    dev: false
+
   /temp-dir/2.0.0:
     resolution: {integrity: sha512-aoBAniQmmwtcKp/7BzsH8Cxzv8OL736p7v1ihGb5e9DJ9kTwGWHrQrVB5+lfVDzfGrdRzXch+ig7LHaY1JTOrg==}
     engines: {node: '>=8'}

frontend/client-portal/src/sections/dashboard/TableList.tsx

@@ -14,7 +14,6 @@ import {
   IconButton,
   Card,
   Grid,
-  Autocomplete,
 } from '@mui/material';
 import { visuallyHidden } from '@mui/utils';
 /* ---------------------------------- axios --------------------------------- */
@@ -24,8 +23,6 @@ import { useEffect, useState } from 'react';
 /* -------------------------------- component ------------------------------- */
 import Iconify from '../../components/Iconify';
 import BaseTablePagination from '../../components/BaseTablePagination';
-/* ---------------------------------- hooks --------------------------------- */
-import useMap from '../../hooks/useMap';
 /* ---------------------------------- theme --------------------------------- */
 import palette from '../../theme/palette';
 import { useSearchParams } from 'react-router-dom';
@@ -46,9 +43,8 @@ type PaginationTableProps = {
 type DataTableProps = {
   name: string;
   member_id: string;
-  service: string;
+  division: string;
-  start_date: string;
+  limit: string;
-  end_date: string;
   status: string;
 };
 
@@ -76,31 +72,31 @@ const headCells: readonly HeadCell[] = [
     id: 'member_id',
     align: 'left',
     label: 'Member ID',
-    isSort: false,
+    isSort: true,
   },
   {
     id: 'name',
     align: 'center',
     label: 'Name',
-    isSort: false,
+    isSort: true,
   },
   {
     id: 'division',
     align: 'center',
     label: 'Divisi',
-    isSort: false,
+    isSort: true,
   },
   {
     id: 'limit',
     align: 'center',
     label: 'Limit',
-    isSort: false,
+    isSort: true,
   },
   {
     id: 'status',
     align: 'center',
     label: 'Status',
-    isSort: false,
+    isSort: true,
   },
 ];
 
@@ -191,11 +187,7 @@ export default function TableList() {
   const handleSearchSubmit = async (event: React.FormEvent<HTMLFormElement>) => {
     event.preventDefault();
     setIsLoading(true);
-    const params = Object.fromEntries([
+    const params = Object.fromEntries([...customSearchParams.entries(), ['search', searchText]]);
-      ...customSearchParams.entries(),
-      ['page', 0],
-      ['search', searchText],
-    ]);
     await new Promise((resolve) => setTimeout(resolve, 500));
     setAppliedParams(params);
     setIsLoading(false);
@@ -210,12 +202,7 @@ export default function TableList() {
     newPage: number
   ) => {
     setIsLoading(true);
-    const params = Object.fromEntries([
+    const params = Object.fromEntries([...customSearchParams.entries(), ['page', newPage + 1]]);
-      ...customSearchParams.entries(),
-      ['page', newPage + 1],
-      ['order', order],
-      ['orderBy', orderBy],
-    ]);
     setPage(newPage);
     await new Promise((resolve) => setTimeout(resolve, 500));
     setAppliedParams(params);
@@ -230,16 +217,12 @@ export default function TableList() {
     setPage(0);
     const params = Object.fromEntries([
       ...customSearchParams.entries(),
-      ['page', 0],
-      ['order', order],
-      ['orderBy', orderBy],
       ['per_page', parseInt(event.target.value, 10)],
     ]);
     setRowsPerPage(parseInt(event.target.value, 10));
     await new Promise((resolve) => setTimeout(resolve, 500));
     setAppliedParams(params);
     setIsLoading(false);
-    // setCustomSearchParams.set('per_page', parseInt(event.target.value, 10));
   };
   /* -------------------------------------------------------------------------- */
 
@@ -254,8 +237,8 @@ export default function TableList() {
           ? appliedParams
           : Object.fromEntries([
               ...customSearchParams.entries(),
-              // ['order', order],
+              ['order', order],
-              // ['orderBy', orderBy],
+              ['orderBy', orderBy],
             ]);
 
       const response = await axios.get('http://localhost:8001/api/dashboard', {
@@ -265,12 +248,13 @@ export default function TableList() {
       const division = await axios.get('http://localhost:8001/api/division');
       setDataDivision(division.data);
 
+      setCustomSearchParams(params);
       setDataTable(response.data.data);
       setPaginationTable(response.data.meta);
       setRowsPerPage(response.data.meta.per_page);
       setIsLoading(false);
     })();
-  }, [appliedParams, customSearchParams, order, orderBy]);
+  }, [appliedParams, customSearchParams, order, orderBy, setCustomSearchParams]);
 
   return (
     <Card>
@@ -310,19 +294,18 @@ export default function TableList() {
                     <TableRow key={index}>
                       <TableCell align="left">{row.member_id}</TableCell>
                       <TableCell align="center">{row.name}</TableCell>
-                      <TableCell align="center">{row.service}</TableCell>
+                      <TableCell align="center">{row.division}</TableCell>
-                      <TableCell align="center">{row.start_date}</TableCell>
+                      <TableCell align="center">{row.limit}</TableCell>
                       <TableCell align="center">
                         {row.status.toLowerCase() === 'active' ? (
                           <Button
                             sx={{
                               backgroundColor: 'rgba(84, 214, 44, 0.16)',
                               color: palette.dark.success.dark,
-                              paddingX: 1.5,
+                              paddingY: 0,
-                              paddingY: 1,
                               '&:hover': {
-                                backgroundColor: palette.light.grey[400],
+                                backgroundColor: 'rgba(84, 214, 44, 0.32)',
-                                color: palette.light.grey[800],
+                                color: palette.dark.success.darker,
                               },
                             }}
                           >
@@ -331,13 +314,12 @@ export default function TableList() {
                         ) : (
                           <Button
                             sx={{
-                              backgroundColor: '#CD7B2E',
+                              backgroundColor: 'rgba(255, 72, 66, 0.16)',
-                              color: '#FFFF',
+                              color: palette.dark.error.dark,
-                              paddingX: 1.5,
+                              paddingY: 0,
-                              paddingY: 1,
                               '&:hover': {
-                                backgroundColor: '#BF6919',
+                                backgroundColor: 'rgba(255, 72, 66, 0.32)',
-                                color: '#FFFF',
+                                color: palette.dark.error.darker,
                               },
                             }}
                           >