TIMOR-TELECOM/revenue-fe
5
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
Raja Oktafrianto
2025-05-17 13:57:40 +07:00
parent 248e41d4a8 939aa638d7
commit 6bcbe6ef72
14 changed files with 306 additions and 74 deletions
Download Patch File Download Diff File Expand all files Collapse all files

0
.dockerignore Normal file
View File

1
.gitignore vendored
View File

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

46
.woodpecker.yml Normal file
View File

@ -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

39
Dockerfile Normal file
View File

@ -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;"]

11
docker-compose.yml Normal file
View File

@ -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

2
package.json
View File

@ -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",

187
src/pages/members/manage-members/ManageMembers.tsx
View File

@ -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> {
setIsReloading(true);
try {
let customers = await axios.get(`${BASE_URL}/customer/list`, {
params: {
limit: 30,
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);
} catch (error: any) {
toast.error(error.message);
console.log(error);
} finally {
setIsReloading(false);
}
}
// async function fetchCustomers(): Promise<any> {
// setIsReloading(true);
// try {
// 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: limit,
page: page + 1, // +1 because your API uses 1-based pages
with_deleted: false,
order_field: 'created_at',
order_direction: 'DESC',
filter: JSON.stringify(filter),
specialFilter: true
},
});
const customers = res.data.data.list.map((el: any, index: number) => ({
...el,
no: page * 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 };
};
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>
)}
<DataGridProvider
data={members}
pagination={{ size: totalItems }}
{!isReloading && (
<DataGridProvider
// data={members}
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>

2
src/pages/members/manage-members/blocks/DetailMember.tsx
View File

@ -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 (

5
src/pages/transaction/history-transaction/blocks/DetailTransaction.tsx
View File

@ -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>

1
src/pages/transfer/transfertype/blocks/AddDialog.tsx
View File

@ -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 && (

1
src/pages/transfer/transfertype/blocks/EditDialog.tsx
View File

@ -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 && (

45
src/pages/transfer/transfertype/blocks/ListToolBar.tsx
View File

@ -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>
);

16
src/pages/transfer/transfertype/hooks/ManageTransferTypeContext.tsx
View File

@ -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();
} else {
filterObject['wallet_destination.name'] = filter.value;
} 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();
}
}

20
src/pages/wallet/wallet-history/hooks/ManageWalletHistoryContext.tsx
View File

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