Merge branch 'master' of https://git.shiblysolution.id/TPAY/dashboard

.gitignore

@@ -33,3 +33,4 @@ package-lock.json
 package.json
 yarn.lock
 package-lock.json
+package-lock.json

.woodpecker.yml

@@ -0,0 +1,46 @@
+steps:
+    - name: setup
+      image: node:22-alpine
+      commands:
+          - apk update && apk add git
+          - npm i typescript -g
+          - npm install
+          - echo '✅ success setup project'
+      when:
+          branch:
+              - main
+
+    - name: build-swagger
+      image: node:22-alpine
+      environment:
+          NODE_ENV: prod
+      commands:
+          - npm run swagger
+      when:
+          branch:
+              - main
+
+    - name: build-src
+      image: node:22-alpine
+      environment:
+          NODE_ENV: prod
+      commands:
+          - npm i typescript -g
+          - npm run build:production
+          - echo '✅ success compile typescript and ready to deploy'
+      when:
+          branch:
+              - main
+
+    - name: deploy
+      image: docker
+      commands:
+          - docker builder prune -f
+          - docker container prune -f
+          - docker-compose build
+          - docker-compose up -d --no-deps --build --remove-orphans
+      volumes:
+          - /var/run/docker.sock:/var/run/docker.sock
+      when:
+          branch:
+              - main

Dockerfile

@@ -0,0 +1,39 @@
+FROM node:22-alpine AS base
+
+RUN apk update && apk add git
+
+COPY package.json ./
+
+RUN npm install
+RUN npm install typescript -g
+
+# add folder if needs more
+COPY src ./src
+COPY public ./public
+
+COPY tsconfig.json ./tsconfig.json
+COPY tsconfig.node.json ./tsconfig.node.json
+COPY vite.config.ts ./vite.config.ts
+COPY tailwind.config.js ./tailwind.config.js
+COPY postcss.config.js ./postcss.config.js
+COPY eslint.config.mjs ./eslint.config.mjs
+COPY .env.production ./.env.production
+COPY .prettierrc ./.prettierrc
+COPY index.html ./index.html
+
+RUN npm run build:production
+
+FROM node:22-alpine
+
+# Copy node modules and build directory from base image to new image
+COPY --from=base ./node_modules ./node_modules
+COPY --from=base ./package.json ./package.json
+COPY --from=base /dist /dist
+COPY --from=base /src /src
+COPY --from=base /public /public
+
+# Expose required port
+FROM nginx:alpine
+COPY --from=base /dist /usr/share/nginx/html
+
+CMD ["nginx", "-g", "daemon off;"]

docker-compose.yml

@@ -0,0 +1,11 @@
+version: '3.9'
+
+services:
+  api:
+    image: app-dashboard:1.0.1
+    restart: always
+    container_name: app-dashboard
+    build: .
+    ports:
+      - '4040:80' # Specify the exposed port, we will need this to access the app from local machine
+

package.json

@@ -80,7 +80,7 @@
     "styled-components": "^6.1.13",
     "stylis": "^4.3.4",
     "stylis-plugin-rtl": "^2.1.1",
-    "sweetalert2": "^11.19.1",
+    "sweetalert2": "^11.21.0",
     "tabs": "^0.2.0",
     "tailwind-merge": "^2.5.4",
     "tailwindcss-animate": "^1.0.7",

src/pages/members/manage-members/ManageMembers.tsx

@@ -1,7 +1,7 @@
 import { DataTable } from '@/components/ui/DataTable';
 import { apiConfig } from '@/config/api.config';
 import { getColumns, Members, initialMember } from './Columns';
-import { useState, useEffect } from 'react';
+import { useState, useEffect, useCallback } from 'react';
 import axios from 'axios';
 import DetailMember from './blocks/DetailMember';
 import ConfirmDialog from '@/components/confirm';
@@ -29,7 +29,7 @@ const ManageMembers = () => {
   const [groups, setGroups] = useState([]);
   const [isReloading, setIsReloading] = useState(false);
   const [currentPage, setCurrentPage] = useState(0);
-  const [totalItems, setTotalItems] = useState(10);
+  const [pageSize, setPageSize] = useState(10);
   
   const closeDialog = () => {
     setIsDialogOpen(false);
@@ -38,40 +38,129 @@ const ManageMembers = () => {
   const { getUser } = useAuthContext();
 
   useEffect(() => {
-    fetchCustomers();
+    // fetchCustomers();
     fetchMasters();
   }, []);
   
-  async function fetchCustomers(): Promise<void> {
+  // async function fetchCustomers(): Promise<any> {
-    setIsReloading(true);
+  //   setIsReloading(true);
-    try {
+  //   try {
-      let customers = await axios.get(`${BASE_URL}/customer/list`, {
+  //     let customers = await axios.get(`${BASE_URL}/customer/list`, {
+  //       params: {
+  //         limit: pageSize,
+  //         page: 1 + currentPage,
+  //         with_deleted: false,
+  //         order_field: 'created_at',
+  //         order_direction: 'DESC'
+  //       }
+  //     });
+  //     let temp = 1;
+  //     let resMembers = customers.data.data.list.map((el: any) => {
+  //       el.no = temp++;
+  //       if (el.date_birth) {
+  //         const d = new Date(el.date_birth);
+  //         el.date_birth = d.toLocaleString('sv-SE');
+  //       }
+  //       el.name = el.fullname;
+  //       return el;
+  //     });
+  //     setMembers(resMembers);
+  //     return {
+  //       data: resMembers,
+  //       totalCount: customers.data.data.total_count,
+  //     }
+  //   } catch (error: any) {
+  //     toast.error(error.message);
+  //     console.log(error);
+  //   } finally {
+  //     setIsReloading(false);
+  //   }
+  // }
+
+  // const fetchCustomers = useCallback(
+  //   async ({ pageIndex, pageSize }:any) => {
+  //     setIsReloading(true);
+  //     try {
+  //       const res = await axios.get(`${BASE_URL}/customer/list`, {
+  //         params: {
+  //           limit: pageSize,
+  //           page: pageIndex + 1, // +1 because your API uses 1-based pages
+  //           with_deleted: false,
+  //           order_field: 'created_at',
+  //           order_direction: 'DESC',
+  //         },
+  //       });
+
+  //       const customers = res.data.data.list.map((el: any, index: number) => ({
+  //         ...el,
+  //         no: pageIndex * pageSize + index + 1,
+  //         date_birth: el.date_birth
+  //           ? new Date(el.date_birth).toLocaleString('sv-SE')
+  //           : null,
+  //         name: el.fullname,
+  //       }));
+
+  //       return {
+  //         data: customers,
+  //         totalCount: res.data.data.total_count,
+  //       };
+  //     } catch (error: any) {
+  //       toast.error(error.message);
+  //       console.error(error);
+  //       return { data: [], totalCount: 0 };
+  //     } finally {
+  //       setIsReloading(false);
+  //     }
+  //   },
+  //   []
+  // );
+
+  const fetchCustomers = async (
+    page: number,
+    limit: number,
+    sorting: any,
+    filter: any
+  ) => {
+    // [ SAMPLE
+    //     {
+    //         "id": "username",
+    //         "value": "d"
+    //     },
+    //     {
+    //         "id": "group_name",
+    //         "value": "Bank"
+    //     },
+    //     {
+    //         "id": "msisdn",
+    //         "value": "88"
+    //     }
+    // ]
+    sorting = sorting.length == 0 ? [{ id: 'name', desc: true }] : sorting;
+    // filter = filter.length ? { any: filter[0].value?.toLowerCase() } : {};
+    filter = filter.length ? filter : {};
+    
+    const res = await axios.get(`${BASE_URL}/customer/list`, {
       params: {
-          limit: 30,
+        limit: limit,
-          page: 1 + currentPage,
+        page: page + 1, // +1 because your API uses 1-based pages
         with_deleted: false,
         order_field: 'created_at',
-          order_direction: 'DESC'
+        order_direction: 'DESC',
-        }
+        filter: JSON.stringify(filter),
+        specialFilter: true
+      },
     });
-      let temp = 1;
+
-      let resMembers = customers.data.data.list.map((el: any) => {
+    const customers = res.data.data.list.map((el: any, index: number) => ({
-        el.no = temp++;
+      ...el,
-        if (el.date_birth) {
+      no: page * pageSize + index + 1,
-          const d = new Date(el.date_birth);
+      date_birth: el.date_birth
-          el.date_birth = d.toLocaleString('sv-SE');
+        ? new Date(el.date_birth).toLocaleString('sv-SE')
-        }
+        : null,
-        el.name = el.fullname;
+      name: el.fullname,
-        return el;
+    }));
-      });
+    return { data: customers, totalCount: res?.data.data.total_count };
-      setMembers(resMembers);
+  };
-    } catch (error: any) {
-      toast.error(error.message);
-      console.log(error);
-    } finally {
-      setIsReloading(false);
-    }
-  }
 
   async function fetchMasters(): Promise<void> {
     setIsReloading(true);
@@ -123,9 +212,10 @@ const ManageMembers = () => {
     setDialogOpen(true);
   }
 
-  const handleReload = () => {
+  const handleReload = async () => {
     setIsReloading(true);
-    fetchCustomers();
+    await fetchCustomers(currentPage, pageSize, '','');
+    setIsReloading(false);
   };
 
   const handleYes = async () => {
@@ -213,7 +303,6 @@ const ManageMembers = () => {
     } finally {
       setDialogOpen(false);
       closeDialog();
-      await fetchCustomers();
       // setLoading(false);
       setIsReloading(false);
     }
@@ -222,7 +311,6 @@ const ManageMembers = () => {
   function setShowAddDialog(el: any) {
     setIsDialogOpen(el);
   }
-  // if (isReloading) return <DataGridLoader />;
 
   return (
     <>
@@ -245,7 +333,7 @@ const ManageMembers = () => {
             handleClose={closeDialog}
             handleSubmit={handleSubmit}
             initialData={member}
-            fetchCustomers={fetchCustomers}
+            fetchCustomers={handleReload}
             profession={profession}
             dialogType={dialogType}
           />
@@ -265,26 +353,22 @@ const ManageMembers = () => {
             <span className="text-sm">Manage Members</span>
           </Link>
         </Breadcrumbs>
-        {/* <div className="w-full overflow-x-auto px-4"> */}
 
         <div className="grid gap-5 lg:gap-7.5 mt-5 relative">
           {isReloading && (
             <DataGridLoader />
-            // <div className="fixed inset-0 bg-transparent flex items-center justify-center z-50 text-muted-foreground px-4 py-2">
-            //   <div className="bg-card flex items-center border shadow-sm rounded-md">
-            //     <div className="flex flex-col items-center">
-            //       <RefreshCw className="animate-spin h-8 w-8 text-slate-500 mb-2" />
-            //       <span className="text-slate-500 font-medium">Refreshing data...</span>
-            //     </div>
-            //   </div>
-            // </div>
           )}
+          {!isReloading && (
             <DataGridProvider
-            data={members}
+            // data={members}
-            pagination={{ size: totalItems }}
+            pagination={{ size: pageSize }}
             columns={getColumns(handleUpdate)}
             layout={{ card: true }}
-            serverSide={false}
+            serverSide={true}
+            // onFetchData={fetchCustomers}
+            onFetchData={({ pageIndex, pageSize, sorting, columnFilters }) =>
+              fetchCustomers(pageIndex, pageSize, sorting, columnFilters)
+            }
             toolbar={
               <ListToolbar
                 createMember={createMember}
@@ -298,6 +382,7 @@ const ManageMembers = () => {
               if (selectedRow) handleUpdate(selectedRow.original);
             }}
           ></DataGridProvider>
+          )}
         </div>
         {/* </div> */}
       </Container>

src/pages/members/manage-members/blocks/DetailMember.tsx

@@ -186,7 +186,7 @@ const DetailMember = ({ showAddDialog, setShowAddDialog, handleSubmit, initialDa
         if (formData.destinationGroup === "Premium" && !formData.approval_description_premium) return toast.warning(`Approval Premium Description needed!`)
         if (formData.destinationGroup === "Agent" && !formData.approval_description_premium) return toast.warning(`Approval Agent Description needed!`)
         handleReject(formData);
-        handleClose();
+        // handleClose();
     }
 
     return (

src/pages/transaction/history-transaction/blocks/DetailTransaction.tsx

@@ -501,6 +501,11 @@ const DetailTransaction = () => {
                                     <div>
                                         <p className="text-sm text-gray-500">Phone Number</p>
                                         <p className="font-medium">{transactionDetails?.origin_msisdn}</p>
+                                        <p className="font-medium">{transactionDetails?.origin_customer?.fullname ?? transactionDetails?.origin_customer?.origin_name}</p>
+                                    </div>
+                                    <div>
+                                        <p className="text-sm text-gray-500">Phone Number</p>
+                                        <p className="font-medium">{transactionDetails?.origin_customer?.msisdn ?? transactionDetails?.origin_msisdn}</p>
                                     </div>
                                     <div>
                                         <p className="text-sm text-gray-500">Email</p>

src/pages/transfer/transfertype/blocks/AddDialog.tsx

@@ -560,6 +560,7 @@ const AddDialog = () => {
                           <SelectItem value="U">Top Up</SelectItem>
                           <SelectItem value="N">Top Up Patner</SelectItem>
                           <SelectItem value="E">Reward</SelectItem>
+                          <SelectItem value="L">Purchase Loja</SelectItem>
                         </SelectContent>
                       </Select>
                       {errors.status_kind && (

src/pages/transfer/transfertype/blocks/EditDialog.tsx

@@ -758,6 +758,7 @@ const EditDialog = () => {
                               <SelectItem value="U">Top Up</SelectItem>
                               <SelectItem value="N">Top Up Patner</SelectItem>
                               <SelectItem value="E">Reward</SelectItem>
+                              <SelectItem value="L">Purchase Loja</SelectItem>
                             </SelectContent>
                           </Select>
                           {errors.status_kind && (

src/pages/transfer/transfertype/blocks/ListToolBar.tsx

@@ -52,7 +52,7 @@ const ListToolbar = () => {
   const { handleAddDialog } = useManageTransferTypeContext();
   const [transferTypes, setTransferTypes] = useState<TransferType[]>([]);
   const { GetData } = useCallApi();
-
+  const [statusKind, setStatusKind] = useState('');
   const [searchValue, setSearchValue] = useState('');
   const [statusTypes, setStatusTypes] = useState('');
   const [approval, setApproval] = useState('');
@@ -83,6 +83,10 @@ const ListToolbar = () => {
     table.getColumn('status_approval')?.setFilterValue(approval);
   }, [approval, table]);
 
+  useEffect(() => {
+    table.getColumn('status_kind')?.setFilterValue(statusKind);
+  }, [statusKind, table]);
+
   const fetchTransferTypes = async () => {
     try {
       const response = await GetData(`${API_URL}/transactiontype/list`, {
@@ -106,7 +110,9 @@ const ListToolbar = () => {
     setSearchValue('');
     setStatusTypes('');
     setApproval('');
+    setStatusKind('');
 
+    table.getColumn('status_kind')?.setFilterValue('');
     table.getColumn('name')?.setFilterValue('');
     table.getColumn('type')?.setFilterValue('');
     table.getColumn('status_approval')?.setFilterValue('');
@@ -122,7 +128,6 @@ const ListToolbar = () => {
       <div className="flex flex-wrap gap-1 w-full">
         <div className="flex justify-between w-full items-center mb-3">
           <div className="flex flex-nowrap items-end gap-3 w-full overflow-x-auto">
-            {/* Fixed Search Input dengan icon yang selalu terlihat */}
             <div className="relative w-48 shrink-0">
               <div className="absolute left-3 top-1/2 transform -translate-y-1/2 pointer-events-none ">
                 <KeenIcon icon="magnifier" />
@@ -144,7 +149,10 @@ const ListToolbar = () => {
                 onValueChange={setStatusTypes}
               >
                 <SelectTrigger className="h-8">
-                  <SelectValue placeholder="Select Status Transaction Type" className="text-ellipsis overflow-hidden" />
+                  <SelectValue
+                    placeholder="Select Status Transaction Type"
+                    className="text-ellipsis overflow-hidden"
+                  />
                 </SelectTrigger>
                 <SelectContent className="max-h-64 overflow-y-auto">
                   {types.map((opt) => (
@@ -163,7 +171,10 @@ const ListToolbar = () => {
                 onValueChange={setApproval}
               >
                 <SelectTrigger className="h-8">
-                  <SelectValue placeholder="Select Status Approval" className="text-ellipsis overflow-hidden" />
+                  <SelectValue
+                    placeholder="Select Status Approval"
+                    className="text-ellipsis overflow-hidden"
+                  />
                 </SelectTrigger>
                 <SelectContent className="max-h-64 overflow-y-auto">
                   <SelectItem value="Y" className="truncate">
@@ -175,6 +186,31 @@ const ListToolbar = () => {
                 </SelectContent>
               </Select>
             </div>
+            <div className="min-w-[220px] shrink-0">
+              <Select
+                key={`status-kind-filter-${statusKind}`}
+                value={statusKind}
+                onValueChange={setStatusKind}
+              >
+                <SelectTrigger className="h-8">
+                  <SelectValue
+                    placeholder="Select Status Kind"
+                    className="text-ellipsis overflow-hidden"
+                  />
+                </SelectTrigger>
+                <SelectContent className="max-h-64 overflow-y-auto">
+                  <SelectItem value="R">Return</SelectItem>
+                  <SelectItem value="T">Transfer</SelectItem>
+                  <SelectItem value="P">Purchase</SelectItem>
+                  <SelectItem value="W">Withdraw</SelectItem>
+                  <SelectItem value="U">Top Up</SelectItem>
+                  <SelectItem value="N">Top Up Patner</SelectItem>
+                  <SelectItem value="E">Reward</SelectItem>
+                  <SelectItem value="L">Purchase Loja</SelectItem>
+                </SelectContent>
+              </Select>
+            </div>
+
             <DefaultTooltip title={'Reset Filter'} placement={'top'}>
               <Button
                 variant="outline"
@@ -201,7 +237,6 @@ const ListToolbar = () => {
             </DefaultTooltip>
           </div>
         </div>
-
       </div>
     </div>
   );

src/pages/transfer/transfertype/hooks/ManageTransferTypeContext.tsx

@@ -277,7 +277,8 @@ const ManageTransferTypeContextProvider = ({ children }: { children: React.React
             W: { label: 'Withdraw', className: 'bg-fuchsia-100 text-fuchsia-600' },
             U: { label: 'Top Up', className: 'bg-yellow-100 text-yellow-600' },
             N: { label: 'Top Up Patner', className: 'bg-purple-100 text-purple-600' },
-            E: {label: 'Reward', className: 'bg-rose-100 text-rose-600'}
+            E: { label: 'Reward', className: 'bg-rose-100 text-rose-600' },
+            L: { label: 'Purchase Loja', className: 'bg-rose-100 text-rose-600' }
           };
 
           const kindInfo = mapping[kind] || {
@@ -365,10 +366,17 @@ const ManageTransferTypeContextProvider = ({ children }: { children: React.React
           if (filter.id === 'name') {
             filterObject['any'] = filter.value.toLowerCase();
           } else if (filter.id === 'wallet_origin') {
-            filterObject['wallet_origin.name'] = filter.value.toLowerCase();
+            filterObject['wallet_origin.name'] = filter;
           } else if (filter.id === 'wallet_destination') {
-            filterObject['wallet_destination.name'] = filter.value.toLowerCase();
+            filterObject['wallet_destination.name'] = filter.value;
-          } else {
+          } else if (filter.id === 'status_kind') {
+            filterObject[filter.id] = filter.value;
+          } else if(filter.id === 'status_approval'){
+            filterObject[filter.id] = filter.value;
+          } else if (filter.id === 'type') {
+            filterObject[filter.id] = filter.value;
+          } 
+          else {
             filterObject[filter.id] = filter.value.toLowerCase();
           }
         }

src/pages/wallet/wallet-history/hooks/ManageWalletHistoryContext.tsx

@@ -182,16 +182,16 @@ const ManageWalletContextProvider = ({ children }: { children: React.ReactNode }
           headerClassName: 'w-[200px]'
         }
       },
-      {
+      // {
-        accessorFn: (row) => row.group?.is_bank,
+      //   accessorFn: (row) => row.group?.is_bank,
-        id: 'is_bank',
+      //   id: 'is_bank',
-        header: ({ column }) => <DataGridColumnHeader title="Is Bank" column={column} />,
+      //   header: ({ column }) => <DataGridColumnHeader title="Is Bank" column={column} />,
-        enableSorting: false,
+      //   enableSorting: false,
-        enableHiding: false,
+      //   enableHiding: false,
-        meta: {
+      //   meta: {
-          headerClassName: 'w-[200px]'
+      //     headerClassName: 'w-[200px]'
-        }
+      //   }
-      }
+      // }
     ],
     []
   );