diff --git a/frontend/client-portal/pnpm-lock.yaml b/frontend/client-portal/pnpm-lock.yaml index c8339f97..f4c3bca4 100755 --- a/frontend/client-portal/pnpm-lock.yaml +++ b/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'} diff --git a/frontend/client-portal/src/sections/dashboard/TableList.tsx b/frontend/client-portal/src/sections/dashboard/TableList.tsx index 4b06149f..c1100464 100755 --- a/frontend/client-portal/src/sections/dashboard/TableList.tsx +++ b/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; - start_date: string; - end_date: string; + division: string; + limit: 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) => { event.preventDefault(); setIsLoading(true); - const params = Object.fromEntries([ - ...customSearchParams.entries(), - ['page', 0], - ['search', searchText], - ]); + const params = Object.fromEntries([...customSearchParams.entries(), ['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([ - ...customSearchParams.entries(), - ['page', newPage + 1], - ['order', order], - ['orderBy', orderBy], - ]); + const params = Object.fromEntries([...customSearchParams.entries(), ['page', newPage + 1]]); 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], - // ['orderBy', orderBy], + ['order', order], + ['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 ( @@ -310,19 +294,18 @@ export default function TableList() { {row.member_id} {row.name} - {row.service} - {row.start_date} + {row.division} + {row.limit} {row.status.toLowerCase() === 'active' ? (