Merge branch 'master' of https://git.shiblysolution.id/TPAY/dashboard
This commit is contained in:
Raja Oktafrianto
@ -3,8 +3,9 @@ VITE_APP_VERSION=1=9.1.1
|
||||
GENERATE_SOURCEMAP=false
|
||||
|
||||
# VITE_APP_API_URL=
|
||||
VITE_APP_API_URL=http://127.0.0.1:4003/apitest
|
||||
# VITE_APP_API_URL=http://127.0.0.1:4003/apitest
|
||||
VITE_APP_API_URL=https://tpay.shiblysolution.id/api
|
||||
# VITE_APP_API_URL=http://api-v2.tpay.tl/api
|
||||
# VITE_APP_URL_TRANSACTION=https://tpay.shiblysolution.id/test/x/api
|
||||
# VITE_APP_API_URL=http://127.0.0.1:4003/apitesting
|
||||
VITE_ENV=development
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
VITE_APP_NAME=tpay-dashboard-tl
|
||||
VITE_APP_VERSION=1=9.1.1
|
||||
GENERATE_SOURCEMAP=false
|
||||
|
||||
VITE_APP_API_URL=
|
||||
VITE_BASE_URL=
|
||||
VITE_APP_API_URL=https://api-v2.tpay.tl/api
|
||||
# VITE_APP_API_URL=
|
||||
VITE_BASE_URL=/
|
||||
VITE_ENV=production
|
||||
|
||||
@ -3,5 +3,6 @@ VITE_APP_VERSION=1=9.1.1
|
||||
GENERATE_SOURCEMAP=false
|
||||
|
||||
VITE_APP_API_URL=https://tpay.shiblysolution.id/api
|
||||
# VITE_APP_API_URL=http://api-v2.tpay.tl/api
|
||||
VITE_BASE_URL=/dashboard/
|
||||
VITE_ENV=staging
|
||||
159
.woodpecker.yml
159
.woodpecker.yml
@ -1,46 +1,121 @@
|
||||
when:
|
||||
commit:
|
||||
message:
|
||||
exclude:
|
||||
- '\[skip ci\]'
|
||||
- '\[ci skip\]'
|
||||
- '\[no ci\]'
|
||||
|
||||
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: telegram start notify
|
||||
image: appleboy/drone-telegram
|
||||
settings:
|
||||
token: 7616010754:AAGXMf8x-roKozdT0j-bOZ1y9dmbulbKPbM
|
||||
to: -4765409490
|
||||
message: |
|
||||
🚀 *Woodpecker CI Build Starting* 🚀
|
||||
|
||||
- name: build-swagger
|
||||
image: node:22-alpine
|
||||
environment:
|
||||
NODE_ENV: prod
|
||||
commands:
|
||||
- npm run swagger
|
||||
when:
|
||||
branch:
|
||||
- main
|
||||
*Repo:* ${CI_REPO_OWNER}/${CI_REPO_NAME}
|
||||
*Repo Link:* ${CI_REPO_URL}
|
||||
*Branch:* ${CI_COMMIT_BRANCH}
|
||||
|
||||
- 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
|
||||
*Build Status:* *starting*
|
||||
*Build Link:* ${CI_PIPELINE_URL}
|
||||
|
||||
- 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
|
||||
*Commit ID:* `${CI_COMMIT_SHA:0:8}`
|
||||
*Commit By:* {{commit.author}}
|
||||
*Commit Link:* {{commit.link}}
|
||||
*Commit Msg:* {{commit.message}}
|
||||
🙏 hopefully success {{commit.author}}
|
||||
when:
|
||||
branch:
|
||||
- master
|
||||
|
||||
- name: setup
|
||||
image: node:22-alpine
|
||||
commands:
|
||||
- apk update && apk add git
|
||||
- npm i typescript -g
|
||||
- npm install
|
||||
- echo '✅ success setup project'
|
||||
when:
|
||||
branch:
|
||||
- master
|
||||
|
||||
- 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:
|
||||
- master
|
||||
|
||||
- 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:
|
||||
- master
|
||||
|
||||
- name: telegram failed notify
|
||||
image: appleboy/drone-telegram
|
||||
settings:
|
||||
token: 7616010754:AAGXMf8x-roKozdT0j-bOZ1y9dmbulbKPbM
|
||||
to: -4765409490
|
||||
message: |
|
||||
🚀 *Woodpecker CI Build Finish* 🚀
|
||||
|
||||
*Repo:* ${CI_REPO_OWNER}/${CI_REPO_NAME}
|
||||
*Repo Link:* ${CI_REPO_URL}
|
||||
*Branch:* ${CI_COMMIT_BRANCH}
|
||||
|
||||
*Build Status:* *Failed*
|
||||
*Build Link:* ${CI_PIPELINE_URL}
|
||||
|
||||
*Commit ID:* `${CI_COMMIT_SHA:0:8}`
|
||||
*Commit By:* {{commit.author}}
|
||||
*Commit Link:* {{commit.link}}
|
||||
*Commit Msg:* {{commit.message}}
|
||||
🙈 build failed. Fix me please, before client is aware.
|
||||
when:
|
||||
status:
|
||||
- failure
|
||||
- cancel
|
||||
branch:
|
||||
- master
|
||||
|
||||
- name: telegram success notify
|
||||
image: appleboy/drone-telegram
|
||||
settings:
|
||||
token: 7616010754:AAGXMf8x-roKozdT0j-bOZ1y9dmbulbKPbM
|
||||
to: -4765409490
|
||||
message: |
|
||||
🚀 *Woodpecker CI Build Finish* 🚀
|
||||
|
||||
*Repo:* ${CI_REPO_OWNER}/${CI_REPO_NAME}
|
||||
*Repo Link:* ${CI_REPO_URL}
|
||||
*Branch:* ${CI_COMMIT_BRANCH}
|
||||
|
||||
*Build Status:* *Success*
|
||||
*Build Link:* ${CI_PIPELINE_URL}
|
||||
|
||||
*Commit ID:* `${CI_COMMIT_SHA:0:8}`
|
||||
*Commit By:* {{commit.author}}
|
||||
*Commit Link:* {{commit.link}}
|
||||
*Commit Msg:* {{commit.message}}
|
||||
😎 build succeeded. Good job {{commit.author}}
|
||||
when:
|
||||
status:
|
||||
- success
|
||||
branch:
|
||||
- master
|
||||
|
||||
14
Dockerfile
14
Dockerfile
@ -20,20 +20,22 @@ COPY eslint.config.mjs ./eslint.config.mjs
|
||||
COPY .env.production ./.env.production
|
||||
COPY .prettierrc ./.prettierrc
|
||||
COPY index.html ./index.html
|
||||
COPY vhosts.conf ./vhosts.conf
|
||||
|
||||
RUN npm run build:production
|
||||
|
||||
FROM node:22-alpine
|
||||
# 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
|
||||
# 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
|
||||
COPY --from=base /vhosts.conf /etc/nginx/conf.d/default.conf
|
||||
|
||||
CMD ["nginx", "-g", "daemon off;"]
|
||||
@ -52,6 +52,7 @@
|
||||
"date-fns": "^3.0.0",
|
||||
"formik": "^2.4.6",
|
||||
"helmet": "^8.1.0",
|
||||
"html2canvas": "^1.4.1",
|
||||
"https": "^1.0.0",
|
||||
"leaflet": "^1.9.4",
|
||||
"lucide-react": "^0.456.0",
|
||||
|
||||
BIN
public/media/images/card.png
Normal file
BIN
public/media/images/card.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 399 KiB |
@ -6,7 +6,7 @@ const AccountUserProfileContent = () => {
|
||||
return (
|
||||
<div className="grid gap-5 lg:gap-7.5 xl:w-[38.75rem] mx-auto">
|
||||
<AccountUserProfileContextProvider>
|
||||
<BasicSettings />
|
||||
{/* <BasicSettings /> */}
|
||||
<Password />
|
||||
<PinCode />
|
||||
{/* Uncomment the line below to enable the Delete Account feature */}
|
||||
|
||||
@ -63,7 +63,8 @@ const BasicSettings = () => {
|
||||
<input
|
||||
className="input"
|
||||
type="text"
|
||||
value={newName}
|
||||
placeholder='Name'
|
||||
// value={newName}
|
||||
onChange={(e) => setNewName(e.target.value)}
|
||||
disabled={isSubmitting}
|
||||
/>
|
||||
@ -73,7 +74,8 @@ const BasicSettings = () => {
|
||||
<input
|
||||
className="input"
|
||||
type="text"
|
||||
value={newUsername}
|
||||
placeholder='Username'
|
||||
// value={newUsername}
|
||||
onChange={(e) => setNewUsername(e.target.value)}
|
||||
disabled={isSubmitting}
|
||||
/>
|
||||
@ -84,7 +86,8 @@ const BasicSettings = () => {
|
||||
<input
|
||||
className="input"
|
||||
type="email"
|
||||
value={newEmail}
|
||||
placeholder='Email'
|
||||
// value={newEmail}
|
||||
onChange={(e) => setNewEmail(e.target.value)}
|
||||
disabled={isSubmitting}
|
||||
/>
|
||||
|
||||
@ -54,7 +54,7 @@ const initialProps: ContextProps = {
|
||||
detailLogData: null
|
||||
};
|
||||
|
||||
type StatusCode = 'W' | 'P' | 'F' | 'D' | 'Y';
|
||||
type StatusCode = 'W' | 'P' | 'F' | 'D' | 'Y' | 'O';
|
||||
|
||||
interface StatusInfo {
|
||||
label: string;
|
||||
@ -64,10 +64,11 @@ interface StatusInfo {
|
||||
|
||||
const statusMap: Record<StatusCode, StatusInfo> = {
|
||||
W: { label: 'Waiting', bg: 'bg-yellow-100', text: 'text-yellow-600' },
|
||||
P: { label: 'Pending', bg: 'bg-blue-100', text: 'text-blue-600' },
|
||||
P: { label: 'Pending', bg: 'bg-yellow-100', text: 'text-blue-600' },
|
||||
F: { label: 'Fail', bg: 'bg-red-100', text: 'text-red-600' },
|
||||
D: { label: 'Done', bg: 'bg-green-100', text: 'text-green-600' },
|
||||
Y: { label: 'Active', bg: 'bg-green-100', text: 'text-green-600' }
|
||||
Y: { label: 'Active', bg: 'bg-green-100', text: 'text-green-600' },
|
||||
O: { label: 'On Process', bg: 'bg-blue-100', text: 'text-blue-600' }
|
||||
};
|
||||
|
||||
const ManageTransactionContext = createContext<ContextProps>(initialProps);
|
||||
@ -172,7 +173,7 @@ const TransactionProvider = ({ children }: { children: React.ReactNode }) => {
|
||||
);
|
||||
},
|
||||
meta: {
|
||||
headerClassName: 'w-[100px]',
|
||||
headerClassName: 'w-[200px] text-center',
|
||||
cellClassName: 'text-center'
|
||||
}
|
||||
},
|
||||
|
||||
@ -2,6 +2,7 @@ import { DataTable } from '@/components/ui/DataTable';
|
||||
import { getColumns } from './Column';
|
||||
import { apiConfig } from '@/config/api.config';
|
||||
import axios, { AxiosResponse } from 'axios';
|
||||
import html2canvas from 'html2canvas';
|
||||
import { Helmet } from 'react-helmet';
|
||||
import {
|
||||
DialogContent,
|
||||
@ -18,15 +19,11 @@ import {
|
||||
Breadcrumbs,
|
||||
Link
|
||||
} from '@mui/material';
|
||||
import { useState, useEffect } from 'react';
|
||||
import CloseIcon from '@mui/icons-material/Close';
|
||||
import Divider from '@mui/material/Divider';
|
||||
import ConfirmDialog from '@/components/confirm';
|
||||
import { useState, useEffect, useRef } from 'react';
|
||||
import { toast } from 'sonner';
|
||||
import { Container, DataGridLoader, DataGridProvider, LoaderTransparant } from '@/components';
|
||||
import { ListToolBar } from './ListToolbar';
|
||||
import { RefreshCw } from 'lucide-react';
|
||||
import { setgroups } from 'process';
|
||||
import { toAbsoluteUrl } from '@/utils';
|
||||
const BASE_URL = apiConfig.service_customer;
|
||||
|
||||
let initBalance = {
|
||||
@ -51,6 +48,8 @@ const AgentBalance = () => {
|
||||
const [dialogType, setDialogType] = useState('');
|
||||
const [dialogOpen, setDialogOpen] = useState(false);
|
||||
const [isReloading, setIsReloading] = useState(false);
|
||||
const [barcode, setBarcode] = useState('');
|
||||
// const [selectedMember, setSelectedMember] = useState(initBalance);
|
||||
|
||||
useEffect(() => {
|
||||
fetchAgentBalance();
|
||||
@ -94,7 +93,9 @@ const AgentBalance = () => {
|
||||
openDialog();
|
||||
}
|
||||
|
||||
const handleUpdate = (group: any) => {
|
||||
const handleUpdate = async (data: any) => {
|
||||
await getQrCode(data.id);
|
||||
setFormData(data)
|
||||
setDialogType('update');
|
||||
setIsDialogOpen(true);
|
||||
};
|
||||
@ -104,6 +105,20 @@ const AgentBalance = () => {
|
||||
fetchAgentBalance();
|
||||
};
|
||||
|
||||
async function getQrCode(customerId:any): Promise<void> {
|
||||
try {
|
||||
setBarcode(``)
|
||||
let getToken = await axios.get(`${BASE_URL}/token/get`, { params: { id: customerId }});
|
||||
console.log(getToken.data.data);
|
||||
setBarcode(getToken.data.data.qrCode);
|
||||
} catch (error: any) {
|
||||
toast.warning(error.message)
|
||||
console.log(error);
|
||||
} finally {
|
||||
// setBarcode(`https://miro.medium.com/v2/resize:fit:250/1*DcceOyLkzU--EzP4PYKd_g.png`)
|
||||
}
|
||||
}
|
||||
|
||||
if (loading) return <LoaderTransparant />;
|
||||
|
||||
return (
|
||||
@ -160,78 +175,111 @@ const AgentBalance = () => {
|
||||
</div>
|
||||
{/* </div> */}
|
||||
|
||||
{/* <Dialog open={isDialogOpen} onClose={closeDialog}>
|
||||
<DialogContent className="w-full">
|
||||
<div className="flex justify-between">
|
||||
<DialogTitle>
|
||||
{dialogType === 'create' ? 'Create New Group' : 'Update Group'}
|
||||
</DialogTitle>
|
||||
<Box display="flex" justifyContent="flex-end">
|
||||
<Button
|
||||
variant="outlined"
|
||||
sx={{ borderColor: 'white', color: 'grey' }}
|
||||
onClick={closeDialog}
|
||||
>
|
||||
<CloseIcon />
|
||||
</Button>
|
||||
</Box>
|
||||
</div>
|
||||
<Divider />
|
||||
<div className="p-5 mt-5">
|
||||
<form onSubmit={handleSubmit} className="flex flex-col gap-4 w-full">
|
||||
<div className="grid grid-cols-4 items-center gap-4 w-full">
|
||||
<label className="form-label text-sm">
|
||||
<span className="text-red-500">*</span>Group Name:
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
name="groupName"
|
||||
className="input w-full col-span-3"
|
||||
value={formData.groupName}
|
||||
onChange={handleChange}
|
||||
/>
|
||||
</div>
|
||||
<div className="grid grid-cols-4 items-center gap-4 w-full">
|
||||
<label className="form-label text-sm">
|
||||
<span className="text-red-500">*</span>Active Status:
|
||||
</label>
|
||||
<FormControl>
|
||||
<RadioGroup name="status" row value={formData.status} onChange={handleChange}>
|
||||
<FormControlLabel
|
||||
value="Y"
|
||||
checked={formData.status === 'Y'}
|
||||
control={<Radio />}
|
||||
label="Yes"
|
||||
/>
|
||||
<FormControlLabel
|
||||
value="N"
|
||||
checked={formData.status === 'N'}
|
||||
control={<Radio />}
|
||||
label="No"
|
||||
/>
|
||||
</RadioGroup>
|
||||
</FormControl>
|
||||
</div>
|
||||
<div className="grid grid-cols-4 items-center gap-4 w-full">
|
||||
<label className="form-label text-sm">
|
||||
<span className="text-red-500">*</span>Description:
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
name="description"
|
||||
className="input w-full col-span-3"
|
||||
value={formData.description}
|
||||
onChange={handleChange}
|
||||
/>
|
||||
</div>
|
||||
<Button type="submit">Submit</Button>
|
||||
</form>
|
||||
<Dialog open={isDialogOpen} onClose={closeDialog}>
|
||||
<DialogContent className="w-full flex justify-center items-center">
|
||||
<div className="relative">
|
||||
<PaymentCard barcode={barcode} customerId={formData.id} agent_name={formData.agent_name}/>
|
||||
</div>
|
||||
</DialogContent>
|
||||
</Dialog> */}
|
||||
</Dialog>
|
||||
</Container>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
// ====================
|
||||
const PaymentCard = ({ barcode, agent_name, customerId }:any) => {
|
||||
const [token_legacy, setToken_legacy] = useState('');
|
||||
const cardRef:any = useRef(null);
|
||||
|
||||
const waitForImageLoad = (img: HTMLImageElement): Promise<void> => {
|
||||
return new Promise((resolve) => {
|
||||
if (img.complete && img.naturalHeight !== 0) {
|
||||
resolve();
|
||||
} else {
|
||||
toast.warning(`No QR Code`)
|
||||
img.onload = () => resolve();
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
const handleDownload = async () => {
|
||||
if (!cardRef.current) return;
|
||||
|
||||
const img = cardRef.current.querySelector('img');
|
||||
if (img) {
|
||||
await waitForImageLoad(img);
|
||||
} else {
|
||||
return toast.warning(`No QR Code`)
|
||||
}
|
||||
|
||||
const canvas = await html2canvas(cardRef.current, {
|
||||
useCORS: true,
|
||||
allowTaint: false,
|
||||
backgroundColor: 'white',
|
||||
scale: 2,
|
||||
});
|
||||
|
||||
const dataUrl = canvas.toDataURL('image/png');
|
||||
const link = document.createElement('a');
|
||||
link.href = dataUrl;
|
||||
link.download = `${agent_name}_barcode_card.png`;
|
||||
link.click();
|
||||
};
|
||||
|
||||
const updateTokenLegacy = async () => {
|
||||
try {
|
||||
if (!token_legacy) toast.warning(`Token Legacy can not be empty`)
|
||||
await axios.post(`${BASE_URL}/token/insert-token-legacy`, { customerid: customerId, token_legacy });
|
||||
toast.success(`Success Update Token Legacy`)
|
||||
} catch (error:any) {
|
||||
toast.error(error.message)
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="flex flex-col items-center">
|
||||
{/* Card content to render */}
|
||||
<div ref={cardRef} className="relative w-[400px] h-[550px] rounded-xl overflow-hidden shadow-xl bg-white mt-20">
|
||||
<div className="absolute inset-0 z-10 flex flex-col items-center justify-start pt-[100px] px-4 text-center">
|
||||
<p className="text-[24px] font-semibold text-[#5b0066] mb-5">
|
||||
{agent_name}
|
||||
</p>
|
||||
{barcode && (
|
||||
<img
|
||||
src={barcode}
|
||||
alt="Barcode"
|
||||
className="w-80 h-80 object-contain mb-2"
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="w-full pt-[20px]">
|
||||
<div className="flex items-baseline flex-wrap lg:flex-nowrap">
|
||||
<label className="form-label flex items-center">
|
||||
Token Legacy<span className="text-red-500"></span>
|
||||
</label>
|
||||
<textarea
|
||||
className="input"
|
||||
name="token_legacy"
|
||||
value={token_legacy}
|
||||
onChange={(e:any) => setToken_legacy(e.target.value)}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Download Button */}
|
||||
<div className="flex justify-between w-full mt-4 px-4">
|
||||
<button onClick={handleDownload} className="border border-red-400 text-red-500 px-4 py-1 rounded hover:bg-red-50 text-sm">
|
||||
Print QR
|
||||
</button>
|
||||
<button onClick={updateTokenLegacy} className="border border-blue-400 text-blue-500 px-4 py-1 rounded hover:bg-blue-50 text-sm">
|
||||
Update to Token Legacy
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default AgentBalance;
|
||||
|
||||
@ -143,4 +143,15 @@ export const getColumns = (handleUpdate: (data: any) => void): ColumnDef<AgentBa
|
||||
);
|
||||
}
|
||||
},
|
||||
{
|
||||
id: 'actions',
|
||||
cell: ({ row }) => {
|
||||
const dataMembers = row.original;
|
||||
return (
|
||||
<button className="btn btn-sm btn-icon btn-clear btn-light" onClick={() => handleUpdate(dataMembers)}>
|
||||
<KeenIcon icon="eye" />
|
||||
</button>
|
||||
);
|
||||
}
|
||||
}
|
||||
];
|
||||
|
||||
@ -121,22 +121,7 @@ const ManageMembers = () => {
|
||||
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`, {
|
||||
|
||||
@ -21,7 +21,7 @@ import ConfirmDialog from '@/components/confirm';
|
||||
const BASE_URL_CUSTOMER = apiConfig.service_customer;
|
||||
|
||||
// ACCESS ADM
|
||||
export default function AdmAccess({page,groups,formData,handleClose,fetchCustomers,viewOnly,setViewOnly}: any) {
|
||||
export default function AdmAccess({page,groups,formData,handleClose,fetchCustomers,viewOnly,setViewOnly,isAdmin}: any) {
|
||||
const [dialogOpen, setDialogOpen] = useState(false);
|
||||
const [dialogType, setDialogType] = useState('');
|
||||
const [changeGroup, setChangeGroup] = useState('');
|
||||
@ -112,15 +112,11 @@ export default function AdmAccess({page,groups,formData,handleClose,fetchCustome
|
||||
<div className="space-y-4">
|
||||
<div className="space-y-2">
|
||||
<p className="text-sm">Pin Status: {getPinStatus(formData.status).msg}</p>
|
||||
<Button variant="default" onClick={(e) => buttonStatus(e)}>
|
||||
{getPinStatus(formData.status).btn}
|
||||
</Button>
|
||||
<Button variant="default" onClick={(e) => buttonStatus(e)}>{getPinStatus(formData.status).btn}</Button>
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<p className="text-sm">Reset PIN</p>
|
||||
<Button variant="default" onClick={(e) => buttonResetPin(e)}>
|
||||
Reset PIN
|
||||
</Button>
|
||||
<Button variant="default" disabled={isAdmin} onClick={(e) => buttonResetPin(e)}>Reset PIN</Button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -128,15 +124,11 @@ export default function AdmAccess({page,groups,formData,handleClose,fetchCustome
|
||||
<div className="space-y-4">
|
||||
<div className="space-y-2">
|
||||
<p className="text-sm">Change Group</p>
|
||||
<Button variant="default" onClick={(e) => openChangeGroupDialog(e)}>
|
||||
Change Group
|
||||
</Button>
|
||||
<Button variant="default" disabled={isAdmin} onClick={(e) => openChangeGroupDialog(e)}>Change Group</Button>
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<p className="text-sm">Edit Member</p>
|
||||
<Button variant="default" onClick={() => setViewOnly(!viewOnly)}>
|
||||
{viewOnly ? 'Open Edit' : 'Close Edit'}
|
||||
</Button>
|
||||
<Button variant="default" disabled={isAdmin} onClick={() => setViewOnly(!viewOnly)}>{viewOnly ? 'Open Edit' : 'Close Edit'}</Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -1,6 +1,7 @@
|
||||
import { apiConfig } from '@/config/api.config';
|
||||
import { Alert, useDataGrid } from '@/components';
|
||||
import axios from 'axios';
|
||||
import { useAuthContext } from '@/auth';
|
||||
import React, { useCallback, useEffect, useRef, useState } from 'react';
|
||||
import { toast } from 'sonner';
|
||||
import {
|
||||
@ -38,6 +39,7 @@ const DetailMember = ({ showAddDialog, setShowAddDialog, handleSubmit, initialDa
|
||||
const [postoAdm, setPostoAdm] = useState([]);
|
||||
const [sucos, setSucos] = useState<any>([]);
|
||||
const [groups, setGroups] = useState([]);
|
||||
const [isAdmin, setisAdmin] = useState(false);
|
||||
const [identity_type] = useState([
|
||||
{ id: 'Eleitoral ID', name: 'Eleitoral ID' },
|
||||
{ id: 'Bihete de Identidade', name: 'Bihete de Identidade' },
|
||||
@ -49,13 +51,14 @@ const DetailMember = ({ showAddDialog, setShowAddDialog, handleSubmit, initialDa
|
||||
img: ''
|
||||
});
|
||||
const [banks] = useState([
|
||||
{ name: 'BNCTL',id: 'BNCTL' }, { name: 'BRI',id: 'BRI' }, { name: 'BNU',id: 'BNU' }, { name: 'Mandiri',id: 'Mandiri' }
|
||||
{ name: 'BNCTL',id: 'BNCTL' }, { name: 'BRI',id: 'BRI' }, { name: 'BNU',id: 'BNU' }, { name: 'MANDIRI',id: 'MANDIRI' }
|
||||
])
|
||||
const parentRef = useRef<any | null>(null);
|
||||
const [alert, setAlert] = useState({
|
||||
show: false,
|
||||
message: ''
|
||||
});
|
||||
const { getUser } = useAuthContext();
|
||||
|
||||
useEffect(() => {
|
||||
setFormData(initialData || {});
|
||||
@ -128,6 +131,13 @@ const DetailMember = ({ showAddDialog, setShowAddDialog, handleSubmit, initialDa
|
||||
|
||||
async function fetchMasterData() {
|
||||
try {
|
||||
let userlogin:any = await getUser();
|
||||
let userloginrole = userlogin?.data?.role?.name;
|
||||
if (userloginrole === 'Admin') {
|
||||
setisAdmin(true);
|
||||
setViewOnly(true)
|
||||
}
|
||||
|
||||
let getGroups = await axios.get(`${BASE_URL_CUSTOMER}/groups/list`, {
|
||||
params: {
|
||||
limit: 50,
|
||||
@ -214,7 +224,7 @@ const DetailMember = ({ showAddDialog, setShowAddDialog, handleSubmit, initialDa
|
||||
{(formData.id || dialogType === "create") ? generateImage(formData, handleChange, 'Photo', 'photouser', previewImg, setPreviewImg): ''}
|
||||
{(formData.id || dialogType === "create") ? generateList(formData, handleChange, genders, 'gender', 'Gender', true, false): ''}
|
||||
{(formData.id || dialogType === "create") ? generateInput(formData, handleChange, 'Date of Birth', 'date_birth', 'date', true, viewOnly): ''}
|
||||
{(formData.id || dialogType === "create") ? generateInput(formData, handleChange, 'Phone Number', 'msisdn', 'text', true, dialogType === "create"||false): ''}
|
||||
{(formData.id || dialogType === "create") ? generateInput(formData, handleChange, 'Phone Number', 'msisdn', 'text', true, dialogType === "create"?false:true): ''}
|
||||
{(formData.id || dialogType === "create") ? generateInput(formData, handleChange, 'Email', 'email', 'text', true, viewOnly): ''}
|
||||
{/* {generateList(formData, handleChange, status, 'status', 'Status', null, true)} */}
|
||||
{(formData.id || dialogType === "create") ? generateInput(formData, handleChange, 'Mother Fullname', 'mother_fullname', 'text', true, viewOnly): ''}
|
||||
@ -269,14 +279,14 @@ const DetailMember = ({ showAddDialog, setShowAddDialog, handleSubmit, initialDa
|
||||
{(formData.id&&(page==='kyc'&&formData.destinationGroup === "Agent")) ? generateInput(formData, handleChange, 'Approval Agent Description', 'approval_description_agent', 'text', false, viewOnly): ''}
|
||||
|
||||
{(formData.id && page!=='kyc') ? (
|
||||
<AdmAccess page={page}groups={groups}formData={formData}fetchCustomers={fetchCustomers}handleClose={handleClose}viewOnly={viewOnly}setViewOnly={setViewOnly}/>
|
||||
<AdmAccess isAdmin={isAdmin} page={page}groups={groups}formData={formData}fetchCustomers={fetchCustomers}handleClose={handleClose}viewOnly={viewOnly}setViewOnly={setViewOnly}/>
|
||||
): ""}
|
||||
{(formData.id && page!=='kyc') ? (
|
||||
<CustomerWallet customerid={formData.id}/>
|
||||
) : ""}
|
||||
|
||||
<div className="col-span-1 md:col-span-2 flex justify-end gap-5">
|
||||
<Button onClick={(e:any) => btnPrevDef(e)} color="secondary">{ viewOnly ? (`Open Edit`) : (`Close Edit`) }</Button>
|
||||
<Button disabled={isAdmin} onClick={(e:any) => btnPrevDef(e)} color="secondary">{ viewOnly ? (`Open Edit`) : (`Close Edit`) }</Button>
|
||||
<Button type="button" variant="outline" onClick={() => handleAddDialog(false)}>Cancel</Button>
|
||||
{/* <Button onClick={(e) => buttonOnSubmit(e, formData)} variant="default">Save Changes</Button> */}
|
||||
{
|
||||
@ -284,7 +294,7 @@ const DetailMember = ({ showAddDialog, setShowAddDialog, handleSubmit, initialDa
|
||||
<Button onClick={onReject} variant="destructive" color="warning">Reject</Button>
|
||||
) : ('')
|
||||
}
|
||||
<Button onClick={(e) => buttonOnSubmit(e)} color="primary" variant="default">
|
||||
<Button onClick={(e) => buttonOnSubmit(e)} color="primary" variant="default" disabled={isAdmin}>
|
||||
{ formData.id ? (formData.isneedapproval == 1 && page === 'kyc' ? (`Edit & Approve`) : (`Edit`)) : ("Create") }
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
@ -2,7 +2,7 @@ import { Button } from '@/components/ui/button';
|
||||
import { UserPlus } from 'lucide-react';
|
||||
import { KeenIcon, useDataGrid } from '@/components';
|
||||
import { DefaultTooltip } from '@/components';
|
||||
import { useState } from 'react';
|
||||
import { useState,useEffect } from 'react';
|
||||
import { toast } from 'sonner';
|
||||
import {
|
||||
Select,
|
||||
@ -13,7 +13,8 @@ import {
|
||||
} from '@/components/ui/select';
|
||||
import { getAuth } from '@/auth';
|
||||
import { apiConfig } from '@/config/api.config';
|
||||
const API_URL = apiConfig.service_customer;
|
||||
import { useAuthContext } from '@/auth';
|
||||
const API_URL = apiConfig.service_customer;
|
||||
|
||||
interface ListToolbarProps {
|
||||
createMember: () => void;
|
||||
@ -27,7 +28,20 @@ const ListToolbar = ({ createMember, onReload, isReloading, groups }: ListToolba
|
||||
const { table, reload } = useDataGrid();
|
||||
const [searchValue, setSearchValue] = useState<string>();
|
||||
const [typeSearchValue, setSearchTypeValue] = useState<string>();
|
||||
const [isAdmin, setisAdmin] = useState(false);
|
||||
const { getUser } = useAuthContext();
|
||||
|
||||
useEffect(() => {
|
||||
getUserData();
|
||||
}, []);
|
||||
|
||||
async function getUserData() {
|
||||
let userlogin:any = await getUser();
|
||||
let userloginrole = userlogin?.data?.role?.name;
|
||||
if (userloginrole === 'Admin') setisAdmin(true);
|
||||
}
|
||||
|
||||
|
||||
const handleSearch = (e: React.ChangeEvent<HTMLInputElement>) => {
|
||||
e.preventDefault()
|
||||
// setSearchValue(e.target.value)
|
||||
@ -127,30 +141,33 @@ const ListToolbar = ({ createMember, onReload, isReloading, groups }: ListToolba
|
||||
</form>
|
||||
|
||||
<div className="flex gap-3 items-center">
|
||||
<Button
|
||||
variant="outline"
|
||||
className="h-7.5"
|
||||
onClick={async () => {
|
||||
const filters = generateExportFilters(groupFilter, typeSearchValue, searchValue);
|
||||
const result = await exporDataToExcel(filters);
|
||||
|
||||
if (result) {
|
||||
const url = window.URL.createObjectURL(result.blob);
|
||||
const a = document.createElement('a');
|
||||
a.href = url;
|
||||
a.download = result.filename;
|
||||
a.click();
|
||||
window.URL.revokeObjectURL(url);
|
||||
} else {
|
||||
toast.error('Failed to export data');
|
||||
}
|
||||
}}
|
||||
>
|
||||
Export Data
|
||||
</Button>
|
||||
<Button variant="outline" className="h-7.5 text-[0.8rem]" onClick={createMember}>
|
||||
Add Data
|
||||
</Button>
|
||||
{ (!isAdmin) ? (
|
||||
<>
|
||||
<Button
|
||||
variant="outline"
|
||||
className="h-7.5"
|
||||
onClick={async () => {
|
||||
const filters = generateExportFilters(groupFilter, typeSearchValue, searchValue);
|
||||
const result = await exporDataToExcel(filters);
|
||||
|
||||
if (result) {
|
||||
const url = window.URL.createObjectURL(result.blob);
|
||||
const a = document.createElement('a');
|
||||
a.href = url;
|
||||
a.download = result.filename;
|
||||
a.click();
|
||||
window.URL.revokeObjectURL(url);
|
||||
} else {
|
||||
toast.error('Failed to export data');
|
||||
}
|
||||
}}
|
||||
>
|
||||
Export Data
|
||||
</Button>
|
||||
<Button variant="outline" className="h-7.5 text-[0.8rem]" onClick={createMember}>Add Data</Button>
|
||||
</>
|
||||
) : ('') }
|
||||
|
||||
<DefaultTooltip title={isReloading ? 'Refreshing...' : 'Refresh'} placement={'top'}>
|
||||
<Button
|
||||
variant="outline"
|
||||
|
||||
@ -56,7 +56,6 @@ export const validateFormCreateUser = (
|
||||
{ key: 'name', label: 'Name' },
|
||||
{ key: 'username', label: 'Username' },
|
||||
{ key: 'email', label: 'Email' },
|
||||
{ key: 'customerid', label: 'Customer ID' },
|
||||
{ key: 'id_role', label: 'Role' },
|
||||
{ key: 'status', label: 'Status' },
|
||||
{ key: 'password', label: 'Password' },
|
||||
@ -65,7 +64,6 @@ export const validateFormCreateUser = (
|
||||
: [
|
||||
{ key: 'name', label: 'Name' },
|
||||
{ key: 'username', label: 'Username' },
|
||||
{ key: 'customerid', label: 'Customer ID' },
|
||||
{ key: 'email', label: 'Email' },
|
||||
{ key: 'id_role', label: 'Role' },
|
||||
{ key: 'status', label: 'Status' }
|
||||
|
||||
@ -224,8 +224,7 @@ const DetailApprovalTransaction = () => {
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-sm text-gray-500">Full Name</p>
|
||||
<p className="font-medium">
|
||||
{transactionDetails?.origin_customer?.fullname ?? transactionDetails?.origin_customer?.origin_name} </p>
|
||||
<p className="font-medium">{transactionDetails?.origin_name ?? ""}</p>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
@ -299,7 +298,34 @@ const DetailApprovalTransaction = () => {
|
||||
kind = 'RETURN';
|
||||
} else if (transactionDetails?.kind === 'E') {
|
||||
kind = 'REWARD';
|
||||
} else if (transactionDetails?.kind === 'L') {
|
||||
kind = 'PURCHASE LOJA';
|
||||
} else if (transactionDetails?.kind === 'B') {
|
||||
kind = 'TOP UP P24';
|
||||
} else if (transactionDetails?.kind === 'A') {
|
||||
kind = 'TRANSFER AGENT';
|
||||
} else if (transactionDetails?.kind === 'M') {
|
||||
kind = 'WITHDRAWAL AGENT';
|
||||
} else if (transactionDetails?.kind === 'O') {
|
||||
kind = 'TOPUP AGENT';
|
||||
} else if (transactionDetails?.kind === 'S') {
|
||||
kind = 'TOPUP P24';
|
||||
} else if (transactionDetails?.kind === 'I') {
|
||||
kind = 'WITHDRAW MERCHANT';
|
||||
} else if (transactionDetails?.kind === 'D') {
|
||||
kind = 'DONATION';
|
||||
} else if (transactionDetails?.kind === 'F') {
|
||||
kind = 'FEE';
|
||||
} else if (transactionDetails?.kind === 'V') {
|
||||
kind = 'REVERSAL';
|
||||
} else if (transactionDetails?.kind === 'C') {
|
||||
kind = 'CASHBACK CASH';
|
||||
} else if (transactionDetails?.kind === 'H') {
|
||||
kind = 'CASHBACK POINT';
|
||||
} else if (transactionDetails?.kind === 'J') {
|
||||
kind = 'WITHDRAW ADMIN';
|
||||
}
|
||||
|
||||
return kind;
|
||||
})()}
|
||||
</p>
|
||||
@ -419,7 +445,7 @@ const DetailApprovalTransaction = () => {
|
||||
Info
|
||||
</span>
|
||||
</h3>
|
||||
<div className="grid grid-cols-2 gap-4">
|
||||
<div className="grid grid-cols-3 gap-4">
|
||||
<div>
|
||||
<p className="text-sm text-gray-500">Transaction Date</p>
|
||||
<p className="font-medium">{transactionDetails?.transaction_date
|
||||
@ -436,9 +462,7 @@ const DetailApprovalTransaction = () => {
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-sm text-gray-500">Full Name</p>
|
||||
<p className="font-medium">
|
||||
{transactionDetails?.origin_customer?.fullname ?? transactionDetails?.origin_customer?.origin_name}
|
||||
</p>
|
||||
<p className="font-medium">{transactionDetails?.origin_name ?? ""}</p>
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-sm text-gray-500">Amount</p>
|
||||
@ -502,7 +526,34 @@ const DetailApprovalTransaction = () => {
|
||||
kind = 'RETURN';
|
||||
} else if (transactionDetails?.kind === 'E') {
|
||||
kind = 'REWARD';
|
||||
} else if (transactionDetails?.kind === 'L') {
|
||||
kind = 'PURCHASE LOJA';
|
||||
} else if (transactionDetails?.kind === 'B') {
|
||||
kind = 'TOP UP P24';
|
||||
} else if (transactionDetails?.kind === 'A') {
|
||||
kind = 'TRANSFER AGENT';
|
||||
} else if (transactionDetails?.kind === 'M') {
|
||||
kind = 'WITHDRAWAL AGENT';
|
||||
} else if (transactionDetails?.kind === 'O') {
|
||||
kind = 'TOPUP AGENT';
|
||||
} else if (transactionDetails?.kind === 'S') {
|
||||
kind = 'TOPUP P24';
|
||||
} else if (transactionDetails?.kind === 'I') {
|
||||
kind = 'WITHDRAW MERCHANT';
|
||||
} else if (transactionDetails?.kind === 'D') {
|
||||
kind = 'DONATION';
|
||||
} else if (transactionDetails?.kind === 'F') {
|
||||
kind = 'FEE';
|
||||
} else if (transactionDetails?.kind === 'V') {
|
||||
kind = 'REVERSAL';
|
||||
} else if (transactionDetails?.kind === 'C') {
|
||||
kind = 'CASHBACK CASH';
|
||||
} else if (transactionDetails?.kind === 'H') {
|
||||
kind = 'CASHBACK POINT';
|
||||
} else if (transactionDetails?.kind === 'J') {
|
||||
kind = 'WITHDRAW ADMIN';
|
||||
}
|
||||
|
||||
return kind;
|
||||
})()}
|
||||
</p>
|
||||
@ -526,6 +577,30 @@ const DetailApprovalTransaction = () => {
|
||||
<p className="font-medium">{transactionDetails?.transfer.destination_iban}</p>
|
||||
</div>
|
||||
</div>
|
||||
<h3 className="font-semibold flex items-center">
|
||||
Transfer Type
|
||||
<span className="ml-2 bg-blue-100 text-blue-800 text-xs font-semibold mr-2 px-2.5 py-0.5 rounded">
|
||||
Transfer Type
|
||||
</span>
|
||||
</h3>
|
||||
<div className="grid grid-cols-3 gap-4">
|
||||
<div>
|
||||
<p className="text-sm text-gray-500">Transfer Type</p>
|
||||
<p className="font-medium">
|
||||
{
|
||||
(() => {
|
||||
if (transactionDetails?.transfer.type === "S") {
|
||||
return "SEND";
|
||||
} else if (transactionDetails?.transfer.type === "R") {
|
||||
return "RECEIVE";
|
||||
} else {
|
||||
return "UNKNOWN";
|
||||
}
|
||||
})()
|
||||
}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
@ -535,14 +610,12 @@ const DetailApprovalTransaction = () => {
|
||||
<div className="grid grid-cols-2 gap-4">
|
||||
<div>
|
||||
<p className="text-sm text-gray-500">Full Name</p>
|
||||
<p className="font-medium">
|
||||
{transactionDetails?.origin_customer?.fullname ?? transactionDetails?.origin_customer?.origin_name}
|
||||
</p>
|
||||
<p className="font-medium">{transactionDetails?.origin_name ?? ""}</p>
|
||||
</div>
|
||||
<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> */}
|
||||
<div>
|
||||
<p className="text-sm text-gray-500">Email</p>
|
||||
<p className="font-medium">{transactionDetails?.origin_customer?.email ?? "-"}</p>
|
||||
@ -801,8 +874,9 @@ const DetailApprovalTransaction = () => {
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{transactionDetails?.log_approve && transactionDetails?.log_approve.length > 0 ? (
|
||||
transactionDetails.log_approve.map((log: { created_at: string; status: string; updated_at: string }, index: number) => (
|
||||
{[...transactionDetails.log_approve]
|
||||
.sort((a, b) => new Date(a.created_at).getTime() - new Date(b.created_at).getTime())
|
||||
.map((log: { created_at: string; status: string; updated_at: string }, index: number) => (
|
||||
<tr key={index} className="border-t">
|
||||
<td className="px-4 py-2 font-medium">
|
||||
{(() => {
|
||||
@ -815,13 +889,15 @@ const DetailApprovalTransaction = () => {
|
||||
status = 'REJECT';
|
||||
} else if (log.status === 'T') {
|
||||
status = 'NO NEED';
|
||||
} else {
|
||||
status = log.status || 'UNKNOWN';
|
||||
}
|
||||
return status;
|
||||
})()}
|
||||
</td>
|
||||
<td className="px-4 py-2 text-sm text-gray-500">
|
||||
{new Date(log.created_at).toLocaleString('sv-SE', {
|
||||
timeZone: 'Asia/Jakarta', // kalau kamu mau waktu lokal (optional)
|
||||
timeZone: 'Asia/Jakarta',
|
||||
year: 'numeric',
|
||||
month: '2-digit',
|
||||
day: '2-digit',
|
||||
@ -829,18 +905,11 @@ const DetailApprovalTransaction = () => {
|
||||
minute: '2-digit',
|
||||
second: '2-digit',
|
||||
hour12: false,
|
||||
}).replace(' ', ' ')}
|
||||
})}
|
||||
</td>
|
||||
{/* <td className="px-4 py-2 text-sm text-gray-500">{log.updated_at}</td> */}
|
||||
</tr>
|
||||
))
|
||||
) : (
|
||||
<tr>
|
||||
<td colSpan={3} className="px-4 py-2 text-center text-sm text-gray-500">
|
||||
No logs available
|
||||
</td>
|
||||
</tr>
|
||||
)}
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
@ -848,6 +917,7 @@ const DetailApprovalTransaction = () => {
|
||||
</div>
|
||||
)}
|
||||
|
||||
|
||||
{activeTab === 'p24' && (
|
||||
<div className="space-y-4">
|
||||
<h3 className="font-semibold">P24 Logs</h3>
|
||||
|
||||
@ -367,7 +367,7 @@ const DetailTransaction = () => {
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-sm text-gray-500">Full Name</p>
|
||||
<p className="font-medium">{transactionDetails?.origin_customer?.origin_name ?? ""}</p>
|
||||
<p className="font-medium">{transactionDetails?.origin_name ?? ""}</p>
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-sm text-gray-500">Amount</p>
|
||||
@ -456,22 +456,24 @@ const DetailTransaction = () => {
|
||||
kind = 'TRANSFER AGENT';
|
||||
} else if (transactionDetails?.kind === 'M') {
|
||||
kind = 'WITHDRAWAL AGENT';
|
||||
}else if( transactionDetails?.kind === 'O') {
|
||||
} else if (transactionDetails?.kind === 'O') {
|
||||
kind = 'TOPUP AGENT';
|
||||
}else if (transactionDetails?.kind === 'S') {
|
||||
} else if (transactionDetails?.kind === 'S') {
|
||||
kind = 'TOPUP P24';
|
||||
}else if (transactionDetails?.kind === 'I') {
|
||||
} else if (transactionDetails?.kind === 'I') {
|
||||
kind = 'WITHDRAW MERCHANT';
|
||||
}else if (transactionDetails?.kind === 'D') {
|
||||
} else if (transactionDetails?.kind === 'D') {
|
||||
kind = 'DONATION';
|
||||
}else if (transactionDetails?.kind === 'F') {
|
||||
} else if (transactionDetails?.kind === 'F') {
|
||||
kind = 'FEE';
|
||||
}else if (transactionDetails?.kind === 'V') {
|
||||
} else if (transactionDetails?.kind === 'V') {
|
||||
kind = 'REVERSAL';
|
||||
}else if( transactionDetails?.kind === 'C') {
|
||||
} else if (transactionDetails?.kind === 'C') {
|
||||
kind = 'CASHBACK CASH';
|
||||
}else if( transactionDetails?.kind === 'H') {
|
||||
} else if (transactionDetails?.kind === 'H') {
|
||||
kind = 'CASHBACK POINT';
|
||||
} else if (transactionDetails?.kind === 'J') {
|
||||
kind = 'WITHDRAW ADMIN';
|
||||
}
|
||||
|
||||
return kind;
|
||||
@ -499,7 +501,7 @@ const DetailTransaction = () => {
|
||||
Info
|
||||
</span>
|
||||
</h3>
|
||||
<div className="grid grid-cols-2 gap-4">
|
||||
<div className="grid grid-cols-3 gap-4">
|
||||
<div>
|
||||
<p className="text-sm text-gray-500">Transaction Date</p>
|
||||
<p className="font-medium">{transactionDetails?.transaction_date
|
||||
@ -516,7 +518,7 @@ const DetailTransaction = () => {
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-sm text-gray-500">Full Name</p>
|
||||
<p className="font-medium">{transactionDetails?.origin_customer?.origin_name ?? ""}</p>
|
||||
<p className="font-medium">{transactionDetails?.origin_name ?? ""}</p>
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-sm text-gray-500">Amount</p>
|
||||
@ -589,12 +591,39 @@ const DetailTransaction = () => {
|
||||
kind = 'TOP UP';
|
||||
} else if (transactionDetails?.kind === 'R') {
|
||||
kind = 'RETURN';
|
||||
} else if (transactionDetails?.kind === 'E') {
|
||||
} else if (transactionDetails?.kind === 'E') {
|
||||
kind = 'REWARD';
|
||||
} else if (transactionDetails?.kind === 'L') {
|
||||
kind = 'PURCHASE LOJA';
|
||||
} else if (transactionDetails?.kind === 'B') {
|
||||
kind = 'TOP UP P24';
|
||||
} else if (transactionDetails?.kind === 'A') {
|
||||
kind = 'TRANSFER AGENT';
|
||||
} else if (transactionDetails?.kind === 'M') {
|
||||
kind = 'WITHDRAWAL AGENT';
|
||||
} else if (transactionDetails?.kind === 'O') {
|
||||
kind = 'TOPUP AGENT';
|
||||
} else if (transactionDetails?.kind === 'S') {
|
||||
kind = 'TOPUP P24';
|
||||
} else if (transactionDetails?.kind === 'I') {
|
||||
kind = 'WITHDRAW MERCHANT';
|
||||
} else if (transactionDetails?.kind === 'D') {
|
||||
kind = 'DONATION';
|
||||
} else if (transactionDetails?.kind === 'F') {
|
||||
kind = 'FEE';
|
||||
} else if (transactionDetails?.kind === 'V') {
|
||||
kind = 'REVERSAL';
|
||||
} else if (transactionDetails?.kind === 'C') {
|
||||
kind = 'CASHBACK CASH';
|
||||
} else if (transactionDetails?.kind === 'H') {
|
||||
kind = 'CASHBACK POINT';
|
||||
} else if (transactionDetails?.kind === 'J') {
|
||||
kind = 'WITHDRAW ADMIN';
|
||||
}
|
||||
|
||||
return kind;
|
||||
})()}
|
||||
|
||||
</p>
|
||||
</div>
|
||||
<div>
|
||||
@ -614,6 +643,30 @@ const DetailTransaction = () => {
|
||||
<p className="font-medium">{transactionDetails?.transfer.destination_iban}</p>
|
||||
</div>
|
||||
</div>
|
||||
<h3 className="font-semibold flex items-center">
|
||||
Transfer Type
|
||||
<span className="ml-2 bg-blue-100 text-blue-800 text-xs font-semibold mr-2 px-2.5 py-0.5 rounded">
|
||||
Transfer Type
|
||||
</span>
|
||||
</h3>
|
||||
<div className="grid grid-cols-3 gap-4">
|
||||
<div>
|
||||
<p className="text-sm text-gray-500">Transfer Type</p>
|
||||
<p className="font-medium">
|
||||
{
|
||||
(() => {
|
||||
if (transactionDetails?.transfer.type === "S") {
|
||||
return "SEND";
|
||||
} else if (transactionDetails?.transfer.type === "R") {
|
||||
return "RECEIVE";
|
||||
} else {
|
||||
return "UNKNOWN";
|
||||
}
|
||||
})()
|
||||
}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
@ -623,13 +676,13 @@ const DetailTransaction = () => {
|
||||
<div className="grid grid-cols-2 gap-4">
|
||||
<div>
|
||||
<p className="text-sm text-gray-500">Full Name</p>
|
||||
<p className="font-medium">{transactionDetails?.origin_customer?.origin_name}</p>
|
||||
<p className="font-medium">{transactionDetails?.origin_name}</p>
|
||||
</div>
|
||||
<div>
|
||||
{/* <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?.origin_name ?? ""}</p>
|
||||
</div>
|
||||
</div> */}
|
||||
<div>
|
||||
<p className="text-sm text-gray-500">Phone Number</p>
|
||||
<p className="font-medium">{transactionDetails?.origin_customer?.msisdn ?? transactionDetails?.origin_msisdn}</p>
|
||||
@ -893,8 +946,9 @@ const DetailTransaction = () => {
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{transactionDetails?.log_approve && transactionDetails?.log_approve.length > 0 ? (
|
||||
transactionDetails.log_approve.map((log: { created_at: string; status: string; updated_at: string }, index: number) => (
|
||||
{[...transactionDetails.log_approve]
|
||||
.sort((a, b) => new Date(a.created_at).getTime() - new Date(b.created_at).getTime())
|
||||
.map((log: { created_at: string; status: string; updated_at: string }, index: number) => (
|
||||
<tr key={index} className="border-t">
|
||||
<td className="px-4 py-2 font-medium">
|
||||
{(() => {
|
||||
@ -907,13 +961,15 @@ const DetailTransaction = () => {
|
||||
status = 'REJECT';
|
||||
} else if (log.status === 'T') {
|
||||
status = 'NO NEED';
|
||||
} else {
|
||||
status = log.status || 'UNKNOWN';
|
||||
}
|
||||
return status;
|
||||
})()}
|
||||
</td>
|
||||
<td className="px-4 py-2 text-sm text-gray-500">
|
||||
{new Date(log.created_at).toLocaleString('sv-SE', {
|
||||
timeZone: 'Asia/Jakarta', // kalau kamu mau waktu lokal (optional)
|
||||
timeZone: 'Asia/Jakarta',
|
||||
year: 'numeric',
|
||||
month: '2-digit',
|
||||
day: '2-digit',
|
||||
@ -921,18 +977,11 @@ const DetailTransaction = () => {
|
||||
minute: '2-digit',
|
||||
second: '2-digit',
|
||||
hour12: false,
|
||||
}).replace(' ', ' ')}
|
||||
})}
|
||||
</td>
|
||||
{/* <td className="px-4 py-2 text-sm text-gray-500">{log.updated_at}</td> */}
|
||||
</tr>
|
||||
))
|
||||
) : (
|
||||
<tr>
|
||||
<td colSpan={3} className="px-4 py-2 text-center text-sm text-gray-500">
|
||||
No logs available
|
||||
</td>
|
||||
</tr>
|
||||
)}
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
@ -90,6 +90,7 @@ const TransactionProvider = ({ children }: { children: React.ReactNode }) => {
|
||||
case 'V': return 'REVERSAL';
|
||||
case 'C': return 'CASHBACK CASH';
|
||||
case 'H': return 'CASHBACK POINT';
|
||||
case 'J': return 'WITHDRAW ADMIN';
|
||||
default: return '_';
|
||||
}
|
||||
},
|
||||
|
||||
36
src/pages/transaction/withdrawl-emoney/WithdrawalEmoney.tsx
Normal file
36
src/pages/transaction/withdrawl-emoney/WithdrawalEmoney.tsx
Normal file
@ -0,0 +1,36 @@
|
||||
import { Helmet } from 'react-helmet';
|
||||
import { Container } from '@/components';
|
||||
import { Breadcrumbs, Link } from '@mui/material';
|
||||
import WithdrawInput from './blocks/WithdrawInput';
|
||||
import { TransactionWithdrawalEmoneyProvider } from './hooks/TransactionWithdrawalEmoneyContext';
|
||||
|
||||
const WithdrawalEmoney = () => {
|
||||
return (
|
||||
<>
|
||||
<Helmet>
|
||||
<title>TPAY | Withdrawal Emoney</title>
|
||||
</Helmet>
|
||||
<TransactionWithdrawalEmoneyProvider>
|
||||
<Container className="mb-7">
|
||||
<h1 className="text-xl font-medium leading-none text-gray-900 mb-5">
|
||||
TRANSACTION WITHDRAWAL EMONEY
|
||||
</h1>
|
||||
<Breadcrumbs sx={{ mb: 2 }}>
|
||||
<Link underline="none" color="inherit" href="/">
|
||||
<span className="text-sm hover:underline">Dashboard</span>
|
||||
</Link>
|
||||
<Link underline="none" color="inherit">
|
||||
<span className="text-sm">Transaction</span>
|
||||
</Link>
|
||||
<Link underline="none" color="inherit">
|
||||
<span className="text-sm">Withdraw Saldo</span>
|
||||
</Link>
|
||||
</Breadcrumbs>
|
||||
<WithdrawInput />
|
||||
</Container>
|
||||
</TransactionWithdrawalEmoneyProvider>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default WithdrawalEmoney;
|
||||
300
src/pages/transaction/withdrawl-emoney/blocks/WithdrawInput.tsx
Normal file
300
src/pages/transaction/withdrawl-emoney/blocks/WithdrawInput.tsx
Normal file
@ -0,0 +1,300 @@
|
||||
import { getAuth } from '@/auth';
|
||||
import { Alert, Container } from '@/components';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { Input } from '@/components/ui/input';
|
||||
import { apiConfig } from '@/config/api.config';
|
||||
import { useCallApi } from '@/hooks';
|
||||
import { RefreshCw } from 'lucide-react';
|
||||
import { useEffect, useRef, useState } from 'react';
|
||||
import { toast } from 'sonner';
|
||||
|
||||
const WithdrawInput = () => {
|
||||
const initialForm: {
|
||||
msisdn: string;
|
||||
amount: string;
|
||||
pin: string;
|
||||
purpose: string;
|
||||
} = {
|
||||
msisdn: '',
|
||||
amount: '',
|
||||
pin: '',
|
||||
purpose: ''
|
||||
};
|
||||
|
||||
const [form, setForm] = useState(initialForm);
|
||||
const [isLoading, setIsLoading] = useState(false);
|
||||
const [customerMsisdn, setCustomerMsisdn] = useState<{ value: string; label: string }[]>([]);
|
||||
const [searchTerm, setSearchTerm] = useState('');
|
||||
const [dropdownOpen, setDropdownOpen] = useState(false);
|
||||
const { GetData, PostData } = useCallApi();
|
||||
const [isSubmitting, setIsSubmitting] = useState(false);
|
||||
const [showConfirmation, setShowConfirmation] = useState(false);
|
||||
const parsedUser = getAuth()?.user;
|
||||
const API_URL = apiConfig.transaction;
|
||||
const API_URL_WALLET = apiConfig.service_wallet;
|
||||
const API_URL_CUSTOMER = apiConfig.service_customer;
|
||||
const dropdownRef = useRef<HTMLDivElement>(null);
|
||||
|
||||
const [alert, setAlert] = useState({
|
||||
show: false,
|
||||
message: ''
|
||||
});
|
||||
|
||||
const ResetForm = () => {
|
||||
setForm(initialForm);
|
||||
setAlert({ show: false, message: '' });
|
||||
setSearchTerm('');
|
||||
};
|
||||
|
||||
const fetchCustomerMsisdn = async (sorting: any, filterValue: string) => {
|
||||
const filter: any =
|
||||
filterValue.trim().length === 0
|
||||
? {}
|
||||
: {
|
||||
or: [
|
||||
{ msisdn: { like: `%${filterValue}%` } },
|
||||
{ fullname: { like: `%${filterValue}%` } }
|
||||
]
|
||||
};
|
||||
|
||||
const query: any = {
|
||||
limit: 100,
|
||||
page: 1,
|
||||
with_deleted: false,
|
||||
order_field: sorting[0].id,
|
||||
order_direction: sorting[0].desc ? 'DESC' : 'ASC'
|
||||
};
|
||||
|
||||
if (filter && Object.keys(filter).length > 0) {
|
||||
query.filter = JSON.stringify(filter);
|
||||
// query.page = page + 1;
|
||||
}
|
||||
|
||||
try {
|
||||
const response = await GetData(`${API_URL_CUSTOMER}/customer/list`, query);
|
||||
setCustomerMsisdn(
|
||||
response?.data.list.map((item: any) => ({
|
||||
value: item.msisdn,
|
||||
label: `${item.msisdn} - ${item.fullname}`
|
||||
}))
|
||||
);
|
||||
} catch (error) {
|
||||
toast.error('Failed to fetch customer msisdn');
|
||||
} finally {
|
||||
setIsLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
const doPostData = async (form: typeof initialForm) => {
|
||||
setIsSubmitting(true);
|
||||
// console.log(getAuth()?.user.customer.id);
|
||||
|
||||
try {
|
||||
let response = await PostData(`${API_URL}/transaction/transfer`, {
|
||||
msisdn_destination: form.msisdn,
|
||||
amount: form.amount,
|
||||
pin: form.pin,
|
||||
purpose: form.purpose,
|
||||
id_transaction_type: '380f270b-1f44-406f-a196-d6f784d68eb4',
|
||||
id_origin_customer: getAuth()?.user.customer.id,
|
||||
type: 'S'
|
||||
});
|
||||
if (response?.status == true) {
|
||||
toast.success('Success Request Topup');
|
||||
} else {
|
||||
toast.error(`${response?.message?.message}`);
|
||||
}
|
||||
} catch (error: any) {
|
||||
const errorMessage =
|
||||
error?.response?.data?.message || error?.message || 'Something went wrong';
|
||||
toast.error(errorMessage);
|
||||
setAlert({ show: true, message: errorMessage });
|
||||
} finally {
|
||||
setIsSubmitting(false);
|
||||
setShowConfirmation(false);
|
||||
ResetForm();
|
||||
}
|
||||
};
|
||||
|
||||
const handleSubmit = async (e: React.FormEvent) => {
|
||||
e.preventDefault();
|
||||
|
||||
if (form.amount == '' || form.msisdn == '' || form.pin == '') {
|
||||
setAlert({
|
||||
show: true,
|
||||
message: 'Please fill in all required fields.'
|
||||
});
|
||||
return;
|
||||
}
|
||||
setAlert({ show: false, message: '' });
|
||||
setShowConfirmation(true);
|
||||
};
|
||||
|
||||
const handleCancelSubmit = () => {
|
||||
setShowConfirmation(false);
|
||||
};
|
||||
|
||||
const handleMsisdnSearch = (e: React.ChangeEvent<HTMLInputElement>) => {
|
||||
setIsLoading(true);
|
||||
setSearchTerm(e.target.value);
|
||||
setDropdownOpen(true);
|
||||
const timer = setTimeout(() => {
|
||||
fetchCustomerMsisdn([{ id: 'msisdn', desc: false }], e.target.value);
|
||||
}, 500);
|
||||
return () => clearTimeout(timer);
|
||||
};
|
||||
|
||||
const handleMsisdnSelect = (msisdn: string) => {
|
||||
setForm({ ...form, msisdn });
|
||||
setDropdownOpen(false);
|
||||
setSearchTerm(msisdn);
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
fetchCustomerMsisdn([{ id: 'msisdn', desc: false }], '');
|
||||
|
||||
const handleClickOutside = (event: any) => {
|
||||
if (dropdownRef.current && !dropdownRef.current.contains(event.target)) {
|
||||
setDropdownOpen(false);
|
||||
}
|
||||
};
|
||||
|
||||
document.addEventListener('mousedown', handleClickOutside);
|
||||
return () => {
|
||||
document.removeEventListener('mousedown', handleClickOutside);
|
||||
};
|
||||
}, []);
|
||||
|
||||
const filteredMsisdn = customerMsisdn
|
||||
.filter((item) => item.label.toLowerCase().includes(searchTerm.toLowerCase()))
|
||||
.slice(0, 10);
|
||||
|
||||
return (
|
||||
<>
|
||||
<Container className="flex items-center justify-center">
|
||||
<div className="card max-w-[750px] w-full">
|
||||
<div className="card-body p-10">
|
||||
{alert.show && (
|
||||
<Alert variant="danger">
|
||||
<h3>{alert.message}</h3>
|
||||
</Alert>
|
||||
)}
|
||||
{/* form */}
|
||||
<form onSubmit={handleSubmit} className="space-y-6 mt-5">
|
||||
<div className="relative" ref={dropdownRef}>
|
||||
<label htmlFor="msisdn">MSISDN (Phone Number)</label>
|
||||
<span className="text-red-500">*</span>
|
||||
<div className="relative">
|
||||
<Input
|
||||
id="msisdn"
|
||||
type="text"
|
||||
value={searchTerm}
|
||||
onChange={handleMsisdnSearch}
|
||||
placeholder="Search MSISDN"
|
||||
onClick={() => setDropdownOpen(true)}
|
||||
/>
|
||||
{dropdownOpen && (
|
||||
<div className="absolute z-10 w-full mt-1 bg-white border border-gray-300 rounded-md shadow-lg max-h-60 overflow-y-auto">
|
||||
{filteredMsisdn.length > 0 ? (
|
||||
filteredMsisdn.map((item, index) => (
|
||||
<div
|
||||
key={index}
|
||||
className="px-4 py-2 hover:bg-gray-100 cursor-pointer"
|
||||
onClick={() => handleMsisdnSelect(item.value)}
|
||||
>
|
||||
{item.label}
|
||||
</div>
|
||||
))
|
||||
) : (
|
||||
<div className="px-4 py-2 text-gray-500">
|
||||
{isLoading ? 'Loading...' : 'No results found'}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label htmlFor="amount">Amount</label>
|
||||
<span className="text-red-500">*</span>
|
||||
<Input
|
||||
id="topupAmount"
|
||||
type="number"
|
||||
min={0}
|
||||
value={form.amount}
|
||||
onChange={(e) => {
|
||||
const value = Number(e.target.value);
|
||||
if (value >= 0) {
|
||||
setForm({ ...form, amount: String(value) });
|
||||
}
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label htmlFor="pin">PIN</label>
|
||||
<span className="text-red-500">*</span>
|
||||
<Input
|
||||
id="pin"
|
||||
type="password"
|
||||
value={form.pin}
|
||||
onChange={(e) => setForm({ ...form, pin: e.target.value })}
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label htmlFor="pin">Purpose</label>
|
||||
<span className="text-red-500">*</span>
|
||||
<Input
|
||||
id="purpose"
|
||||
type="text"
|
||||
value={form.purpose}
|
||||
onChange={(e) => setForm({ ...form, purpose: e.target.value })}
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<Button type="button" onClick={handleSubmit}>
|
||||
Submit
|
||||
</Button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</Container>
|
||||
|
||||
{showConfirmation && (
|
||||
<div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
|
||||
<div className="bg-white p-6 rounded-lg shadow-lg max-w-md w-full">
|
||||
<h3 className="text-lg font-semibold mb-4">Confirm Transaction</h3>
|
||||
<p className="mb-6">
|
||||
Are you sure you want to withdraw saldo of{' '}
|
||||
<span className="font-semibold">
|
||||
{new Intl.NumberFormat('en-US', { style: 'currency', currency: 'USD' }).format(
|
||||
Number(form.amount)
|
||||
)}{' '}
|
||||
</span>
|
||||
?
|
||||
</p>
|
||||
<div className="flex justify-end space-x-3">
|
||||
<Button
|
||||
variant="outline"
|
||||
onClick={handleCancelSubmit}
|
||||
className="border-gray-300 text-gray-700"
|
||||
>
|
||||
Cancel
|
||||
</Button>
|
||||
<Button onClick={() => doPostData(form)} disabled={isSubmitting}>
|
||||
{isSubmitting ? (
|
||||
<RefreshCw className="animate-spin h-8 w-8 text-white mx-3" />
|
||||
) : (
|
||||
'Confirm'
|
||||
)}
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default WithdrawInput;
|
||||
@ -0,0 +1,58 @@
|
||||
import { apiConfig } from '@/config/api.config';
|
||||
import { createContext } from 'react';
|
||||
|
||||
interface TransactionWithdrawalProps {
|
||||
id: string;
|
||||
customers_id: string;
|
||||
group_id: string;
|
||||
username: string;
|
||||
fullname: string;
|
||||
email: string;
|
||||
status: string;
|
||||
created_at: Date;
|
||||
}
|
||||
|
||||
interface ContextProps {}
|
||||
|
||||
const initialProps: ContextProps = {};
|
||||
|
||||
const TransactionWithdrawalEmoneyContext = createContext<ContextProps>(initialProps);
|
||||
const API_URL = apiConfig.service_customer;
|
||||
|
||||
type StatusCode = 'W' | 'Y' | 'N' | 'T';
|
||||
|
||||
interface StatusInfo {
|
||||
label: string;
|
||||
bg: string;
|
||||
text: string;
|
||||
}
|
||||
|
||||
const statusMap: Record<StatusCode, StatusInfo> = {
|
||||
W: { label: 'Waiting Approval', bg: 'bg-yellow-100', text: 'text-yellow-600' },
|
||||
T: { label: 'No Need', bg: 'bg-blue-100', text: 'text-blue-600' },
|
||||
N: { label: 'Reject', bg: 'bg-red-100', text: 'text-red-600' },
|
||||
Y: { label: 'Approve', bg: 'bg-green-100', text: 'text-green-600' }
|
||||
};
|
||||
|
||||
export const renderStatusBadge = (statusRaw: string | null | undefined) => {
|
||||
const status = statusRaw as StatusCode;
|
||||
const { label, bg, text } = statusMap[status] ?? {
|
||||
label: 'Unknown',
|
||||
bg: 'bg-gray-100',
|
||||
text: 'text-gray-600'
|
||||
};
|
||||
|
||||
return (
|
||||
<span className={`px-2 py-1 text-xs font-semibold rounded-full ${bg} ${text}`}>{label}</span>
|
||||
);
|
||||
};
|
||||
|
||||
const TransactionWithdrawalEmoneyProvider = ({ children }: { children: React.ReactNode }) => {
|
||||
return (
|
||||
<TransactionWithdrawalEmoneyContext.Provider value={{}}>
|
||||
<div>{children}</div>
|
||||
</TransactionWithdrawalEmoneyContext.Provider>
|
||||
);
|
||||
};
|
||||
|
||||
export { TransactionWithdrawalEmoneyProvider, TransactionWithdrawalEmoneyContext };
|
||||
@ -0,0 +1,12 @@
|
||||
import { useContext } from 'react';
|
||||
import { TransactionWithdrawalEmoneyContext } from './TransactionWithdrawalEmoneyContext';
|
||||
|
||||
const useTransactionWithdrawalEmoneyContext = () => {
|
||||
const context = useContext(TransactionWithdrawalEmoneyContext);
|
||||
|
||||
if (!context) throw new Error('useTransactionWithdrawalEmoney must be used within AuthProvider');
|
||||
|
||||
return context;
|
||||
};
|
||||
|
||||
export { useTransactionWithdrawalEmoneyContext };
|
||||
@ -114,7 +114,8 @@ const AddFeeDialog = () => {
|
||||
deduct_from_account: '',
|
||||
credit_to: '',
|
||||
credit_destination: '00000000-0000-0000-0000-000000000000',
|
||||
credit_destination_account: ''
|
||||
credit_destination_account: '',
|
||||
deduct_when: 'A'
|
||||
};
|
||||
|
||||
const [formField, setFormField] = useState(initialState);
|
||||
@ -389,13 +390,19 @@ const AddFeeDialog = () => {
|
||||
);
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
if (formField.status_include === 'N') {
|
||||
setFormField((prev) => ({ ...prev, deduct_when: 'A' }));
|
||||
}
|
||||
}, [formField.status_include]);
|
||||
|
||||
return (
|
||||
<Dialog
|
||||
open={showAddFeeDialog}
|
||||
onOpenChange={(open) => {
|
||||
if (!open) {
|
||||
handleAddFeeDialog(open);
|
||||
handleCloseDialog();
|
||||
handleAddFeeDialog(open);
|
||||
handleCloseDialog();
|
||||
}
|
||||
}}
|
||||
>
|
||||
@ -835,6 +842,25 @@ const AddFeeDialog = () => {
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
{formField.status_include === 'Y' && (
|
||||
<div className="w-full">
|
||||
<label className="form-label">
|
||||
Deduct When <span className="text-red-500">*</span>
|
||||
</label>
|
||||
<Select
|
||||
value={formField.deduct_when}
|
||||
onValueChange={(value) => setFormField({ ...formField, deduct_when: value })}
|
||||
>
|
||||
<SelectTrigger>
|
||||
<SelectValue placeholder="Select Deduct When" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="A">After</SelectItem>
|
||||
<SelectItem value="B">Before</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="flex justify-end pt-2.5 gap-5">
|
||||
<Button
|
||||
|
||||
@ -105,7 +105,8 @@ const EditFeeDialog = () => {
|
||||
deduct_from_account: '',
|
||||
credit_to: '',
|
||||
credit_destination: '00000000-0000-0000-0000-000000000000',
|
||||
credit_destination_account: ''
|
||||
credit_destination_account: '',
|
||||
deduct_when: 'A'
|
||||
};
|
||||
|
||||
const [formField, setFormField] = useState(initialState);
|
||||
@ -161,6 +162,15 @@ const EditFeeDialog = () => {
|
||||
}
|
||||
}
|
||||
|
||||
if (formField.status_include === 'Y' && !formField.deduct_origin) {
|
||||
setAlert({
|
||||
show: true,
|
||||
message: 'Deduct Origin is required when Input is selected'
|
||||
});
|
||||
setIsSubmitting(false);
|
||||
return;
|
||||
}
|
||||
|
||||
if (formField.credit_to === 'I' && !formField.credit_destination) {
|
||||
setAlert({
|
||||
show: true,
|
||||
@ -190,6 +200,9 @@ const EditFeeDialog = () => {
|
||||
if (formField.deduct_from !== 'I') {
|
||||
payload.deduct_origin = '00000000-0000-0000-0000-000000000000';
|
||||
}
|
||||
if (formField.status_include !== 'Y') {
|
||||
payload.deduct_origin = '00000000-0000-0000-0000-000000000000';
|
||||
}
|
||||
|
||||
// console.log(payload);
|
||||
try {
|
||||
@ -334,7 +347,8 @@ const EditFeeDialog = () => {
|
||||
response.data.credit_destination?.id || '00000000-0000-0000-0000-000000000000',
|
||||
credit_destination_account: response.data.credit_destination_account?.id || '',
|
||||
updated_by: parsedUser?.username,
|
||||
updated_at: new Date().toISOString().slice(0, 19).replace('T', ' ')
|
||||
updated_at: new Date().toISOString().slice(0, 19).replace('T', ' '),
|
||||
deduct_when: response.data.deduct_when || 'A'
|
||||
});
|
||||
|
||||
if (response.data.transaction_type?.name) {
|
||||
@ -488,7 +502,6 @@ const EditFeeDialog = () => {
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="w-full">
|
||||
<label className="form-label">
|
||||
Transfer Fee Name <span className="text-red-500">*</span>
|
||||
@ -503,7 +516,6 @@ const EditFeeDialog = () => {
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="w-full">
|
||||
<label className="form-label">
|
||||
Description <span className="text-red-500">*</span>
|
||||
@ -518,7 +530,6 @@ const EditFeeDialog = () => {
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="w-full">
|
||||
<label className="form-label">Minimum Amount</label>
|
||||
<NumericFormat
|
||||
@ -536,7 +547,6 @@ const EditFeeDialog = () => {
|
||||
placeholder="Enter Minimum Amount"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="w-full">
|
||||
<label className="form-label">Maximum Amount</label>
|
||||
<NumericFormat
|
||||
@ -554,7 +564,6 @@ const EditFeeDialog = () => {
|
||||
placeholder="Enter Maximum Amount"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="w-full">
|
||||
<label className="form-label">
|
||||
Period Start <span className="text-red-500">*</span>
|
||||
@ -569,7 +578,6 @@ const EditFeeDialog = () => {
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="w-full">
|
||||
<label className="form-label">
|
||||
Period End <span className="text-red-500">*</span>
|
||||
@ -584,7 +592,6 @@ const EditFeeDialog = () => {
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="w-full">
|
||||
<label className="form-label">Deduct Amount</label>
|
||||
<NumericFormat
|
||||
@ -602,7 +609,6 @@ const EditFeeDialog = () => {
|
||||
placeholder="Enter Deduct Amount"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="w-full">
|
||||
<label className="form-label">Deduct Percentage</label>
|
||||
<NumericFormat
|
||||
@ -620,7 +626,6 @@ const EditFeeDialog = () => {
|
||||
placeholder="Enter Deduct Percentage"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="w-full">
|
||||
<label className="form-label">
|
||||
Deduct From <span className="text-red-500">*</span>
|
||||
@ -645,70 +650,74 @@ const EditFeeDialog = () => {
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
{formField.deduct_from === 'I' && (
|
||||
<div className="w-full">
|
||||
<label className="form-label">
|
||||
Deduct Origin <span className="text-red-500">*</span>
|
||||
</label>
|
||||
<div className="relative">
|
||||
<div
|
||||
className="flex w-full items-center justify-between rounded-md border border-input bg-transparent px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 cursor-pointer"
|
||||
onClick={() => setOpenDeductOrigin(!openDeductOrigin)}
|
||||
>
|
||||
<span className="truncate">
|
||||
{customers.find((customer) => customer.id === formField.deduct_origin)
|
||||
?.username || 'Search customer...'}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
{formField.deduct_from === 'I' && (
|
||||
<div className="w-full">
|
||||
<label className="form-label">
|
||||
Deduct Origin <span className="text-red-500">*</span>
|
||||
</label>
|
||||
<div className="relative">
|
||||
<div
|
||||
className="flex w-full items-center justify-between rounded-md border border-input bg-transparent px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 cursor-pointer"
|
||||
onClick={() => setOpenDeductOrigin(!openDeductOrigin)}
|
||||
>
|
||||
<span className="truncate">
|
||||
{customers.find((customer) => customer.id === formField.deduct_origin)?.username || 'Search customer...'}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
{openDeductOrigin && (
|
||||
<div className="absolute left-0 right-0 top-full z-50 mt-1 max-h-52 overflow-auto rounded-md border border-gray-200 bg-white shadow-lg">
|
||||
<div className="sticky top-0 bg-white p-2 border-b">
|
||||
<Input
|
||||
className="h-8 text-sm"
|
||||
type="text"
|
||||
placeholder="Search customer..."
|
||||
value={customerSearchTerm}
|
||||
onChange={(e) => setCustomerSearchTerm(e.target.value)}
|
||||
autoComplete="off"
|
||||
onClick={(e) => e.stopPropagation()}
|
||||
autoFocus
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
{customers
|
||||
.filter(
|
||||
(customer) =>
|
||||
customer.username.toLowerCase().includes(customerSearchTerm.toLowerCase()) ||
|
||||
customer.msisdn.includes(customerSearchTerm)
|
||||
)
|
||||
.map((customer) => (
|
||||
<div
|
||||
key={customer.id}
|
||||
className="cursor-pointer px-3 py-1.5 text-sm hover:bg-gray-100"
|
||||
onClick={() => {
|
||||
setFormField({ ...formField, deduct_origin: customer.id });
|
||||
setOpenDeductOrigin(false);
|
||||
}}
|
||||
>
|
||||
{customer.username}
|
||||
</div>
|
||||
))}
|
||||
{customers.filter(
|
||||
(customer) =>
|
||||
customer.username.toLowerCase().includes(customerSearchTerm.toLowerCase()) ||
|
||||
customer.msisdn.includes(customerSearchTerm)
|
||||
).length === 0 && (
|
||||
<div className="px-3 py-2 text-sm text-gray-500">No customer found</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
|
||||
{openDeductOrigin && (
|
||||
<div className="absolute left-0 right-0 top-full z-50 mt-1 max-h-52 overflow-auto rounded-md border border-gray-200 bg-white shadow-lg">
|
||||
<div className="sticky top-0 bg-white p-2 border-b">
|
||||
<Input
|
||||
className="h-8 text-sm"
|
||||
type="text"
|
||||
placeholder="Search customer..."
|
||||
value={customerSearchTerm}
|
||||
onChange={(e) => setCustomerSearchTerm(e.target.value)}
|
||||
autoComplete="off"
|
||||
onClick={(e) => e.stopPropagation()}
|
||||
autoFocus
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
{customers
|
||||
.filter(
|
||||
(customer) =>
|
||||
customer.username
|
||||
.toLowerCase()
|
||||
.includes(customerSearchTerm.toLowerCase()) ||
|
||||
customer.msisdn.includes(customerSearchTerm)
|
||||
)
|
||||
.map((customer) => (
|
||||
<div
|
||||
key={customer.id}
|
||||
className="cursor-pointer px-3 py-1.5 text-sm hover:bg-gray-100"
|
||||
onClick={() => {
|
||||
setFormField({ ...formField, deduct_origin: customer.id });
|
||||
setOpenDeductOrigin(false);
|
||||
}}
|
||||
>
|
||||
{customer.username}
|
||||
</div>
|
||||
))}
|
||||
{customers.filter(
|
||||
(customer) =>
|
||||
customer.username
|
||||
.toLowerCase()
|
||||
.includes(customerSearchTerm.toLowerCase()) ||
|
||||
customer.msisdn.includes(customerSearchTerm)
|
||||
).length === 0 && (
|
||||
<div className="px-3 py-2 text-sm text-gray-500">
|
||||
No customer found
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
<div className="w-full">
|
||||
<label className="form-label">
|
||||
Deduct From Account <span className="text-red-500">*</span>
|
||||
@ -746,78 +755,78 @@ const EditFeeDialog = () => {
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
{formField.credit_to === 'I' && (
|
||||
<div className="w-full">
|
||||
<label className="form-label">
|
||||
Credit Destination <span className="text-red-500">*</span>
|
||||
</label>
|
||||
<div className="relative">
|
||||
<div
|
||||
className="flex w-full items-center justify-between rounded-md border border-input bg-transparent px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 cursor-pointer"
|
||||
onClick={() => setOpenCreditDestination(!openCreditDestination)}
|
||||
>
|
||||
<span className="truncate">
|
||||
{customers.find(
|
||||
(customer) => customer.id === formField.credit_destination
|
||||
)?.username || 'Search customer...'}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
{formField.credit_to === 'I' && (
|
||||
<div className="w-full">
|
||||
<label className="form-label">
|
||||
Credit Destination <span className="text-red-500">*</span>
|
||||
</label>
|
||||
<div className="relative">
|
||||
<div
|
||||
className="flex w-full items-center justify-between rounded-md border border-input bg-transparent px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 cursor-pointer"
|
||||
onClick={() => setOpenCreditDestination(!openCreditDestination)}
|
||||
>
|
||||
<span className="truncate">
|
||||
{customers.find((customer) => customer.id === formField.credit_destination)
|
||||
?.username || 'Search customer...'}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
{openCreditDestination && (
|
||||
<div className="absolute left-0 right-0 top-full z-50 mt-1 max-h-52 overflow-auto rounded-md border border-gray-200 bg-white shadow-lg">
|
||||
<div className="sticky top-0 bg-white p-2 border-b">
|
||||
<Input
|
||||
className="h-8 text-sm"
|
||||
type="text"
|
||||
placeholder="Search customer..."
|
||||
value={customerSearchTerm}
|
||||
onChange={(e) => setCustomerSearchTerm(e.target.value)}
|
||||
autoComplete="off"
|
||||
onClick={(e) => e.stopPropagation()}
|
||||
autoFocus
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
{customers
|
||||
.filter(
|
||||
(customer) =>
|
||||
customer.username
|
||||
.toLowerCase()
|
||||
.includes(customerSearchTerm.toLowerCase()) ||
|
||||
customer.msisdn.includes(customerSearchTerm)
|
||||
)
|
||||
.map((customer) => (
|
||||
<div
|
||||
key={customer.id}
|
||||
className="cursor-pointer px-3 py-1.5 text-sm hover:bg-gray-100"
|
||||
onClick={() => {
|
||||
setFormField({
|
||||
...formField,
|
||||
credit_destination: customer.id
|
||||
});
|
||||
setOpenCreditDestination(false);
|
||||
}}
|
||||
>
|
||||
{customer.username}
|
||||
</div>
|
||||
))}
|
||||
{customers.filter(
|
||||
(customer) =>
|
||||
customer.username
|
||||
.toLowerCase()
|
||||
.includes(customerSearchTerm.toLowerCase()) ||
|
||||
customer.msisdn.includes(customerSearchTerm)
|
||||
).length === 0 && (
|
||||
<div className="px-3 py-2 text-sm text-gray-500">No customer found</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
|
||||
{openCreditDestination && (
|
||||
<div className="absolute left-0 right-0 top-full z-50 mt-1 max-h-52 overflow-auto rounded-md border border-gray-200 bg-white shadow-lg">
|
||||
<div className="sticky top-0 bg-white p-2 border-b">
|
||||
<Input
|
||||
className="h-8 text-sm"
|
||||
type="text"
|
||||
placeholder="Search customer..."
|
||||
value={customerSearchTerm}
|
||||
onChange={(e) => setCustomerSearchTerm(e.target.value)}
|
||||
autoComplete="off"
|
||||
onClick={(e) => e.stopPropagation()}
|
||||
autoFocus
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
{customers
|
||||
.filter(
|
||||
(customer) =>
|
||||
customer.username
|
||||
.toLowerCase()
|
||||
.includes(customerSearchTerm.toLowerCase()) ||
|
||||
customer.msisdn.includes(customerSearchTerm)
|
||||
)
|
||||
.map((customer) => (
|
||||
<div
|
||||
key={customer.id}
|
||||
className="cursor-pointer px-3 py-1.5 text-sm hover:bg-gray-100"
|
||||
onClick={() => {
|
||||
setFormField({
|
||||
...formField,
|
||||
credit_destination: customer.id
|
||||
});
|
||||
setOpenCreditDestination(false);
|
||||
}}
|
||||
>
|
||||
{customer.username}
|
||||
</div>
|
||||
))}
|
||||
{customers.filter(
|
||||
(customer) =>
|
||||
customer.username
|
||||
.toLowerCase()
|
||||
.includes(customerSearchTerm.toLowerCase()) ||
|
||||
customer.msisdn.includes(customerSearchTerm)
|
||||
).length === 0 && (
|
||||
<div className="px-3 py-2 text-sm text-gray-500">
|
||||
No customer found
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
<div className="w-full">
|
||||
<label className="form-label">
|
||||
Credit Destination Account <span className="text-red-500">*</span>
|
||||
@ -830,7 +839,6 @@ const EditFeeDialog = () => {
|
||||
isLoadingWallets
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="w-full">
|
||||
<label className="form-label">
|
||||
Status <span className="text-red-500">*</span>
|
||||
@ -848,7 +856,6 @@ const EditFeeDialog = () => {
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
|
||||
<div className="w-full">
|
||||
<label className="form-label">
|
||||
Status Include <span className="text-red-500">*</span>
|
||||
@ -856,7 +863,11 @@ const EditFeeDialog = () => {
|
||||
<Select
|
||||
value={formField.status_include}
|
||||
onValueChange={(value) =>
|
||||
setFormField({ ...formField, status_include: value })
|
||||
setFormField({
|
||||
...formField,
|
||||
status_include: value,
|
||||
deduct_when: value === 'N' ? 'A' : formField.deduct_when
|
||||
})
|
||||
}
|
||||
>
|
||||
<SelectTrigger>
|
||||
@ -868,7 +879,27 @@ const EditFeeDialog = () => {
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
|
||||
{formField.status_include === 'Y' && (
|
||||
<div className="w-full">
|
||||
<label className="form-label">
|
||||
Deduct When <span className="text-red-500">*</span>
|
||||
</label>
|
||||
<Select
|
||||
value={formField.deduct_when}
|
||||
onValueChange={(value) =>
|
||||
setFormField({ ...formField, deduct_when: value })
|
||||
}
|
||||
>
|
||||
<SelectTrigger>
|
||||
<SelectValue placeholder="Select Deduct When" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="A">After</SelectItem>
|
||||
<SelectItem value="B">Before</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
)}
|
||||
<div className="flex justify-end pt-2.5 gap-5">
|
||||
<Button variant={'outline'} type="button" onClick={resetForm}>
|
||||
Reset
|
||||
|
||||
@ -315,6 +315,21 @@ const ManageTransferFeeContextProvider = ({
|
||||
cellClassName: 'text-center'
|
||||
}
|
||||
},
|
||||
{
|
||||
accessorFn: (row: { deduct_when: string }) => {
|
||||
const mapping: Record<string, string> = {
|
||||
A: 'After',
|
||||
B: 'Before'
|
||||
};
|
||||
|
||||
return mapping[row.deduct_when] || 'Unknown';
|
||||
},
|
||||
id: 'deduct_when',
|
||||
header: ({ column }) => <DataGridColumnHeader title="Status Deduct" column={column} />,
|
||||
enableSorting: false,
|
||||
enableHiding: false,
|
||||
meta: { headerClassName: 'w-[250px]' }
|
||||
},
|
||||
{
|
||||
id: 'actions',
|
||||
header: ({ column }) => <DataGridColumnHeader title="Actions" column={column} />,
|
||||
|
||||
@ -52,41 +52,15 @@ 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('');
|
||||
|
||||
const [tempSearchValue, setTempSearchValue] = useState('');
|
||||
const [tempStatusTypes, setTempStatusTypes] = useState('');
|
||||
const [tempApproval, setTempApproval] = useState('');
|
||||
const [tempStatusKind, setTempStatusKind] = useState('');
|
||||
|
||||
const unique = (arr: string[]) => Array.from(new Set(arr));
|
||||
const types = unique(transferTypes.map((t) => t.type));
|
||||
|
||||
const handleKeyDown = (event: React.KeyboardEvent) => {
|
||||
if (event.key === 'Enter') {
|
||||
table.getColumn('name')?.setFilterValue(`%${searchValue}%`);
|
||||
table.setPageIndex(0);
|
||||
}
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
const timer = setTimeout(() => {
|
||||
table.getColumn('name')?.setFilterValue(`%${searchValue}%`);
|
||||
table.setPageIndex(0);
|
||||
}, 200);
|
||||
return () => clearTimeout(timer);
|
||||
}, [searchValue, table]);
|
||||
|
||||
useEffect(() => {
|
||||
table.getColumn('type')?.setFilterValue(statusTypes);
|
||||
}, [statusTypes, table]);
|
||||
|
||||
useEffect(() => {
|
||||
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,11 +80,21 @@ table.getColumn('name')?.setFilterValue(`%${searchValue}%`);
|
||||
fetchTransferTypes();
|
||||
}, []);
|
||||
|
||||
const handleApplyFilter = () => {
|
||||
table.getColumn('name')?.setFilterValue(tempSearchValue ? `%${tempSearchValue}%` : '');
|
||||
|
||||
table.getColumn('type')?.setFilterValue(tempStatusTypes);
|
||||
table.getColumn('status_approval')?.setFilterValue(tempApproval);
|
||||
table.getColumn('status_kind')?.setFilterValue(tempStatusKind);
|
||||
|
||||
table.setPageIndex(0);
|
||||
};
|
||||
|
||||
const handleClearFilter = () => {
|
||||
setSearchValue('');
|
||||
setStatusTypes('');
|
||||
setApproval('');
|
||||
setStatusKind('');
|
||||
setTempSearchValue('');
|
||||
setTempStatusTypes('');
|
||||
setTempApproval('');
|
||||
setTempStatusKind('');
|
||||
|
||||
table.getColumn('status_kind')?.setFilterValue('');
|
||||
table.getColumn('name')?.setFilterValue('');
|
||||
@ -123,6 +107,27 @@ table.getColumn('name')?.setFilterValue(`%${searchValue}%`);
|
||||
}, 0);
|
||||
};
|
||||
|
||||
const handleRefreshAndClearFilter = () => {
|
||||
setTempSearchValue('');
|
||||
setTempStatusTypes('');
|
||||
setTempApproval('');
|
||||
setTempStatusKind('');
|
||||
|
||||
table.getColumn('name')?.setFilterValue('');
|
||||
table.getColumn('type')?.setFilterValue('');
|
||||
table.getColumn('status_approval')?.setFilterValue('');
|
||||
table.getColumn('status_kind')?.setFilterValue('');
|
||||
|
||||
table.setPageIndex(0);
|
||||
reload();
|
||||
};
|
||||
|
||||
const handleKeyDown = (event: React.KeyboardEvent) => {
|
||||
if (event.key === 'Enter') {
|
||||
handleApplyFilter();
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="card-header flex-wrap border-b-0 px-5">
|
||||
<div className="flex flex-wrap gap-1 w-full">
|
||||
@ -135,18 +140,18 @@ table.getColumn('name')?.setFilterValue(`%${searchValue}%`);
|
||||
<input
|
||||
type="text"
|
||||
placeholder="Search Name"
|
||||
value={searchValue}
|
||||
onChange={(e) => setSearchValue(e.target.value)}
|
||||
className="input input-sm w-full pl-9 text-ellipsis overflow-hidden"
|
||||
value={tempSearchValue}
|
||||
onChange={(e) => setTempSearchValue(e.target.value)}
|
||||
className="input input-sm w-full pl-9 text-ellipsis overflow-hidden"
|
||||
onKeyDown={handleKeyDown}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="min-w-[220px] shrink-0">
|
||||
<Select
|
||||
key={`type-filter-${statusTypes}`}
|
||||
value={statusTypes}
|
||||
onValueChange={setStatusTypes}
|
||||
key={`type-filter-${tempStatusTypes}`}
|
||||
value={tempStatusTypes}
|
||||
onValueChange={setTempStatusTypes}
|
||||
>
|
||||
<SelectTrigger className="h-8">
|
||||
<SelectValue
|
||||
@ -166,9 +171,9 @@ table.getColumn('name')?.setFilterValue(`%${searchValue}%`);
|
||||
|
||||
<div className="min-w-[220px] shrink-0">
|
||||
<Select
|
||||
key={`approval-filter-${approval}`}
|
||||
value={approval}
|
||||
onValueChange={setApproval}
|
||||
key={`approval-filter-${tempApproval}`}
|
||||
value={tempApproval}
|
||||
onValueChange={setTempApproval}
|
||||
>
|
||||
<SelectTrigger className="h-8">
|
||||
<SelectValue
|
||||
@ -186,11 +191,12 @@ table.getColumn('name')?.setFilterValue(`%${searchValue}%`);
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
|
||||
<div className="min-w-[220px] shrink-0">
|
||||
<Select
|
||||
key={`status-kind-filter-${statusKind}`}
|
||||
value={statusKind}
|
||||
onValueChange={setStatusKind}
|
||||
key={`status-kind-filter-${tempStatusKind}`}
|
||||
value={tempStatusKind}
|
||||
onValueChange={setTempStatusKind}
|
||||
>
|
||||
<SelectTrigger className="h-8">
|
||||
<SelectValue
|
||||
@ -223,12 +229,17 @@ table.getColumn('name')?.setFilterValue(`%${searchValue}%`);
|
||||
</Select>
|
||||
</div>
|
||||
|
||||
<DefaultTooltip title={'Reset Filter'} placement={'top'}>
|
||||
<Button
|
||||
variant="outline"
|
||||
className="h-7.5 disabled:bg-gray-400 shrink-0"
|
||||
onClick={handleClearFilter}
|
||||
>
|
||||
{/* Filter Button */}
|
||||
<DefaultTooltip title={'Apply Filter'} placement={'top'}>
|
||||
<Button variant="default" className="h-8 px-4 shrink-0" onClick={handleApplyFilter}>
|
||||
<KeenIcon icon="filter" className="mr-1" />
|
||||
Filter
|
||||
</Button>
|
||||
</DefaultTooltip>
|
||||
|
||||
{/* Clear Filter Button */}
|
||||
<DefaultTooltip title={'Refresh Data (Keep Filter)'} placement={'top'}>
|
||||
<Button variant="outline" className="h-8 px-3 shrink-0" onClick={() => reload()}>
|
||||
<KeenIcon icon="arrow-circle-left" />
|
||||
</Button>
|
||||
</DefaultTooltip>
|
||||
@ -242,8 +253,8 @@ table.getColumn('name')?.setFilterValue(`%${searchValue}%`);
|
||||
>
|
||||
Add
|
||||
</Button>
|
||||
<DefaultTooltip title="Refresh" placement="top">
|
||||
<Button variant="outline" className="h-8 px-3" onClick={() => reload()}>
|
||||
<DefaultTooltip title="Reset Filter & Refresh" placement="top">
|
||||
<Button variant="outline" className="h-8 px-3" onClick={handleRefreshAndClearFilter}>
|
||||
<KeenIcon icon="arrows-circle" />
|
||||
</Button>
|
||||
</DefaultTooltip>
|
||||
|
||||
@ -49,6 +49,7 @@ import AgentBalance from '@/pages/members/agent-balance/AgentBalance';
|
||||
|
||||
// DISBURSEMENT
|
||||
import HistoryTransactionDisbursement from '@/pages/disbursement/history-transaction/HistoryTransaction';
|
||||
import WithdrawalEmoney from '@/pages/transaction/withdrawl-emoney/WithdrawalEmoney';
|
||||
|
||||
// DISBURSEMENT
|
||||
|
||||
@ -110,6 +111,7 @@ const AppRoutingSetup = (): ReactElement => {
|
||||
<Route path="/transaction/topup" element={<TransactionTopup />} />
|
||||
<Route path="/transaction/disbursement-saldo" element={<TransactionDisbursement />} />
|
||||
<Route path="/transaction/withdrawl-saldo" element={<TransactionWithdraw />} />
|
||||
<Route path="/transaction/withdrawal-emoney" element={<WithdrawalEmoney />} />
|
||||
<Route path="/menu/menu-management" element={<ManageMenu />} />
|
||||
<Route path="/menu/welcome" element={<Welcome />} />
|
||||
<Route path="/message/inbox" element={<Inbox />} />
|
||||
|
||||
29
vhosts.conf
Normal file
29
vhosts.conf
Normal file
@ -0,0 +1,29 @@
|
||||
server {
|
||||
listen 80 default_server;
|
||||
server_name /usr/share/nginx/html;
|
||||
|
||||
root /usr/share/nginx/html;
|
||||
index index.html index.htm;
|
||||
|
||||
location ~* \.(?:manifest|appcache|html?|xml|json)$ {
|
||||
expires -1;
|
||||
# access_log logs/static.log; # I don't usually include a static log
|
||||
}
|
||||
|
||||
location ~* \.(?:css|js|json)$ {
|
||||
try_files $uri =404;
|
||||
expires 1y;
|
||||
access_log off;
|
||||
add_header Cache-Control "public";
|
||||
}
|
||||
|
||||
# Any route containing a file extension (e.g. /devicesfile.js)
|
||||
location ~ ^.+\..+$ {
|
||||
try_files $uri =404;
|
||||
}
|
||||
|
||||
# Any route that doesn't have a file extension (e.g. /devices)
|
||||
location / {
|
||||
try_files $uri $uri/ /index.html;
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user