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

Update tampilan

Browse Source
This commit is contained in:
wayanrivan
2025-04-08 11:53:25 +07:00
parent e012fadab1
commit 13da7fde9c
29 changed files with 1018 additions and 652 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
package-lock.json generated
View File

@ -45,6 +45,7 @@
"cmdk": "^1.0.4",
"date-fns": "^3.0.0",
"formik": "^2.4.6",
"helmet": "^8.1.0",
"https": "^1.0.0",
"leaflet": "^1.9.4",
"lucide-react": "^0.456.0",
@ -6055,6 +6056,15 @@
"node": ">= 0.4"
}
},
"node_modules/helmet": {
"version": "8.1.0",
"resolved": "https://registry.npmjs.org/helmet/-/helmet-8.1.0.tgz",
"integrity": "sha512-jOiHyAZsmnr8LqoPGmCjYAaiuWwjAPLgY8ZX2XrmHawt99/u1y6RgrZMTeoPfpUbV96HOalYgz1qzkRbw54Pmg==",
"license": "MIT",
"engines": {
"node": ">=18.0.0"
}
},
"node_modules/hoist-non-react-statics": {
"version": "3.3.2",
"resolved": "https://registry.npmjs.org/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz",

1
package.json
View File

@ -51,6 +51,7 @@
"cmdk": "^1.0.4",
"date-fns": "^3.0.0",
"formik": "^2.4.6",
"helmet": "^8.1.0",
"https": "^1.0.0",
"leaflet": "^1.9.4",
"lucide-react": "^0.456.0",

2
src/layouts/demo2/footer/Footer.tsx
View File

@ -15,7 +15,7 @@ const Footer = () => {
className="text-gray-600 hover:text-primary"
rel="noopener noreferrer"
>
Brillian Dev.
TPAY Dev.
</a>
</div>
</div>

44
src/pages/account/manage-currency/ManageCurrency.tsx
View File

@ -2,31 +2,35 @@ import { Container, DataGridInner } from '@/components';
import { ManageCurrencyContextProvider } from './hooks/ManageCurrencyContext';
import AddDialog from './blocks/AddDialog';
import { Breadcrumbs, Link } from '@mui/material';
import { Helmet } from 'react-helmet';
const ManageCurrency = () => {
return (
<ManageCurrencyContextProvider>
<Container>
<h1 className="text-xl font-medium leading-none text-gray-900 mb-3">Manage Currency</h1>
<Breadcrumbs sx={{ mb: 2 }}>
<Link underline="none" color="inherit" href="/">
<span className="text-sm hover:underline">Dashboard</span>
</Link>
<>
<Helmet><title>TPAY | Manage Currency</title></Helmet>
<ManageCurrencyContextProvider>
<Container>
<h1 className="text-xl font-medium leading-none text-gray-900 mb-3">Manage Currency</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">Accounts</span>
</Link>
<Link underline="none" color="inherit">
<span className="text-sm">Accounts</span>
</Link>
<Link underline="none" color="inherit">
<span className="text-sm">Manage Currency</span>
</Link>
</Breadcrumbs>
<div className="grid gap-5 lg:gap-7.5">
<DataGridInner />
</div>
<AddDialog />
</Container>
</ManageCurrencyContextProvider>
<Link underline="none" color="inherit">
<span className="text-sm">Manage Currency</span>
</Link>
</Breadcrumbs>
<div className="grid gap-5 lg:gap-7.5">
<DataGridInner />
</div>
<AddDialog />
</Container>
</ManageCurrencyContextProvider>
</>
);
};

106
src/pages/dashboards/home/DashboardHomePage.tsx
View File

@ -15,6 +15,7 @@ import { Button } from '@/components/ui/button';
import { useFetchYear } from './hooks/useFetchYear';
import { get5LastYear } from '@/utils/Date';
import { staticChartData } from './staticChart';
import { Helmet } from 'react-helmet';
// sum -> nominal, count-> total
type CountType = 'sum' | 'count';
@ -138,64 +139,69 @@ const DashboardHomePage = () => {
);
return (
<Container>
<div className="flex gap-3 items-center mb-6">
<YearPicker selectedYear={selectedYear} setSelectedYear={handleYearChange} />
<div className="w-auto min-w-[120px]">
<Select value={count} onValueChange={handleCountType}>
<SelectTrigger size="sm">
<SelectValue placeholder="Select Count Type" />
</SelectTrigger>
<SelectContent className="w-32">
<SelectItem value="sum">Nominal</SelectItem>
<SelectItem value="count">Status</SelectItem>
</SelectContent>
</Select>
</div>
{/* <DefaultTooltip title="Filter" placement="top">
<>
<Helmet>
<title>TPAY | Dashboard</title>
</Helmet>
<Container>
<div className="flex gap-3 items-center mb-6">
<YearPicker selectedYear={selectedYear} setSelectedYear={handleYearChange} />
<div className="w-auto min-w-[120px]">
<Select value={count} onValueChange={handleCountType}>
<SelectTrigger size="sm">
<SelectValue placeholder="Select Count Type" />
</SelectTrigger>
<SelectContent className="w-32">
<SelectItem value="sum">Nominal</SelectItem>
<SelectItem value="count">Status</SelectItem>
</SelectContent>
</Select>
</div>
{/* <DefaultTooltip title="Filter" placement="top">
<Button variant="outline" className="h-7.5" onClick={() => handleFilter(dateRange)}>
<KeenIcon icon="filter" />
</Button>
</DefaultTooltip> */}
<DefaultTooltip title="Reset Filter" placement="top">
<Button variant="outline" className="h-7.5" onClick={resetFilter}>
<KeenIcon icon="arrow-circle-left" />
</Button>
</DefaultTooltip>
</div>
{/* Cards */}
<div className="grid gap-5 lg:gap-7.5 mb-5">
<div className="grid lg:grid-cols-4 gap-y-5 lg:gap-5 items-stretch">
{cardData.map((data: any) => (
<div className="lg:col-span-1" key={data.type}>
<Card
title={data.type.toUpperCase()}
total={data.total}
type={data.type}
count={count}
/>
</div>
))}
<DefaultTooltip title="Reset Filter" placement="top">
<Button variant="outline" className="h-7.5" onClick={resetFilter}>
<KeenIcon icon="arrow-circle-left" />
</Button>
</DefaultTooltip>
</div>
</div>
{/* Chart */}
<div className="grid gap-5 lg:gap-7.5">
<div className="grid lg:grid-cols-1 gap-y-5 lg:gap-5 items-stretch">
<div className="lg:col-span-1">
<Chart
title="Overview"
count={12}
toolbar={toolbar}
chartData={staticChartData.series.map((data: any) => data.data)}
chartType={chartType}
chartLegend={chartLegend}
/>
{/* Cards */}
<div className="grid gap-5 lg:gap-7.5 mb-5">
<div className="grid lg:grid-cols-4 gap-y-5 lg:gap-5 items-stretch">
{cardData.map((data: any) => (
<div className="lg:col-span-1" key={data.type}>
<Card
title={data.type.toUpperCase()}
total={data.total}
type={data.type}
count={count}
/>
</div>
))}
</div>
</div>
</div>
</Container>
{/* Chart */}
<div className="grid gap-5 lg:gap-7.5">
<div className="grid lg:grid-cols-1 gap-y-5 lg:gap-5 items-stretch">
<div className="lg:col-span-1">
<Chart
title="Overview"
count={12}
toolbar={toolbar}
chartData={staticChartData.series.map((data: any) => data.data)}
chartType={chartType}
chartLegend={chartLegend}
/>
</div>
</div>
</div>
</Container>
</>
);
};

171
src/pages/groups/ManageGroups.tsx
View File

@ -2,6 +2,7 @@ import { DataTable } from '@/components/ui/DataTable';
import { columns, Group } from './Column';
import { apiConfig } from '@/config/api.config';
import axios, { AxiosResponse } from 'axios';
import { Helmet } from 'react-helmet';
import {
DialogContent,
MenuItem,
@ -153,20 +154,23 @@ const ManageGroups = () => {
};
return (
<div>
<div className="container mx-auto">
<ConfirmDialog
open={dialogOpen}
onClose={() => setDialogOpen(false)}
title="Confirm Action"
content={
`Are you sure you want to ` +
(dialogType === 'create' ? 'create?' : dialogType === 'update' ? 'update?' : 'delete?')
}
onYes={handleYes}
onNo={() => setDialogOpen(false)}
/>
<h1 className="text-xl font-medium leading-none text-gray-900 mb-3">Groups</h1>
<>
<Helmet>
<title>TPAY | Manage Group</title>
</Helmet>
<ConfirmDialog
open={dialogOpen}
onClose={() => setDialogOpen(false)}
title="Confirm Action"
content={
`Are you sure you want to ` +
(dialogType === 'create' ? 'create?' : dialogType === 'update' ? 'update?' : 'delete?')
}
onYes={handleYes}
onNo={() => setDialogOpen(false)}
/>
<h1 className="text-xl font-medium leading-none text-gray-900 mb-3 grid gap-5 lg:gap-7.5 mx-8 w-auto">Groups</h1>
<div className='grid gap-5 lg:gap-7.5 mx-8 w-auto'>
<Breadcrumbs>
<Link underline="none" color="inherit" href="/">
<span className="text-sm hover:underline">Dashboard</span>
@ -180,6 +184,8 @@ const ManageGroups = () => {
<span className="text-sm">Manage Groups</span>
</Link>
</Breadcrumbs>
</div>
<div className="w-full overflow-x-auto px-4">
<DataTable
data={dataGroup}
columns={columns}
@ -187,75 +193,76 @@ const ManageGroups = () => {
onUpdate={handleUpdate}
onDelete={null}
/>
<Dialog open={isDialogOpen} onClose={closeDialog}>
<DialogContent className="w-full">
<div className="flex justify-between">
<DialogTitle>Create New 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>
</div>
</DialogContent>
</Dialog>
</div>
</div>
<Dialog open={isDialogOpen} onClose={closeDialog}>
<DialogContent className="w-full">
<div className="flex justify-between">
<DialogTitle>Create New 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>
</div>
</DialogContent>
</Dialog>
</>
);
};

51
src/pages/master/aldeias/AldeiasMaster.tsx
View File

@ -4,34 +4,39 @@ import AddDialog from './blocks/AddDialog';
import EditDialog from './blocks/EditDialog';
import DeleteDialog from './blocks/DeleteDialog';
import { Breadcrumbs, Link } from '@mui/material';
import { Helmet } from 'react-helmet';
const AldeiasMaster = () => {
return (
<ManageAldeiasContextProvider>
<Container>
<h1 className="text-xl font-medium leading-none text-gray-900 mb-3">Aldeias</h1>
<Breadcrumbs sx={{ mb: 2 }}>
<Link underline="none" color="inherit" href="/">
<span className="text-sm hover:underline">Dashboard</span>
</Link>
<>
<Helmet>
<title>TPAY | Manage Aldeias</title>
</Helmet>
<ManageAldeiasContextProvider>
<Container>
<h1 className="text-xl font-medium leading-none text-gray-900 mb-3">Aldeias</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">Master Data</span>
</Link>
<Link underline="none" color="inherit">
<span className="text-sm">Master Data</span>
</Link>
<Link underline="none" color="inherit">
<span className="text-sm">Manage Aldeias</span>
</Link>
</Breadcrumbs>
<Link underline="none" color="inherit">
<span className="text-sm">Manage Aldeias</span>
</Link>
</Breadcrumbs>
<div className="grid gap-5 lg:gap-7.5">
<DataGridInner />
</div>
<AddDialog />
<EditDialog />
<DeleteDialog />
</Container>
</ManageAldeiasContextProvider>
<div className="grid gap-5 lg:gap-7.5">
<DataGridInner />
</div>
<AddDialog />
<EditDialog />
<DeleteDialog />
</Container>
</ManageAldeiasContextProvider>
</>
);
};

49
src/pages/master/conversion/ConversionMaster.tsx
View File

@ -5,37 +5,40 @@ import AddDialog from './blocks/AddDialog';
import EditDialog from './blocks/EditDialog';
import { Delete } from 'lucide-react';
import DeleteDialog from './blocks/DeleteDialog';
import { Helmet } from 'react-helmet';
// import EditDialog from './blocks/EditDialog';
const ConversionMaster = () => {
return (
<ManageConversionContextProvider>
<Container>
<h1 className="text-xl font-medium leading-none text-gray-900 mb-5">Conversion</h1>
<Breadcrumbs sx={{ mb: 2 }}>
<Link underline="none" color="inherit" href="/">
<span className="text-sm hover:underline">Dashboard</span>
</Link>
<>
<Helmet><title>TPAY | Manage Conversion</title></Helmet>
<ManageConversionContextProvider>
<Container>
<h1 className="text-xl font-medium leading-none text-gray-900 mb-5">Conversion</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">Master Data</span>
</Link>
<Link underline="none" color="inherit">
<span className="text-sm">Master Data</span>
</Link>
<Link underline="none" color="inherit">
<span className="text-sm">Manage Conversion</span>
</Link>
</Breadcrumbs>
<Link underline="none" color="inherit">
<span className="text-sm">Manage Conversion</span>
</Link>
</Breadcrumbs>
<div className="grid gap-5 lg:gap-7.5">
<DataGridInner />
</div>
<div className="grid gap-5 lg:gap-7.5">
<DataGridInner />
</div>
<AddDialog />
<EditDialog/>
<DeleteDialog/>
</Container>
</ManageConversionContextProvider>
<AddDialog />
<EditDialog />
<DeleteDialog />
</Container>
</ManageConversionContextProvider>
</>
);
};

52
src/pages/master/municipios/Municipios.tsx
View File

@ -5,34 +5,40 @@ import SearchDialog from './blocks/SearchDialog';
import EditDialog from './blocks/EditDialog';
import DeleteDialog from './blocks/DeleteDialog';
import { Breadcrumbs, Link } from '@mui/material';
import { Helmet } from 'react-helmet';
const Municipios = () => {
return (
<ManageMunicipiosProvider>
<Container className="mb-7">
<h1 className="text-xl font-medium leading-none text-gray-900 mb-3">MUNICIPIOS</h1>
<Breadcrumbs sx={{ mb: 2 }}>
<Link underline="none" color="inherit" href="/">
<span className="text-sm hover:underline">Dashboard</span>
</Link>
<>
<Helmet>
<title>TPAY | Municipios</title>
</Helmet>
<ManageMunicipiosProvider>
<Container className="mb-7">
<h1 className="text-xl font-medium leading-none text-gray-900 mb-3">MUNICIPIOS</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">Master Data</span>
</Link>
<Link underline="none" color="inherit">
<span className="text-sm">Master Data</span>
</Link>
<Link underline="none" color="inherit">
<span className="text-sm">Manage Municipios</span>
</Link>
</Breadcrumbs>
<div className="grid gap-5 lg:gap-7.5">
<DataGridInner />
</div>
<AddDialog />
<EditDialog />
<DeleteDialog />
<SearchDialog />
</Container>
</ManageMunicipiosProvider>
<Link underline="none" color="inherit">
<span className="text-sm">Manage Municipios</span>
</Link>
</Breadcrumbs>
<div className="grid gap-5 lg:gap-7.5">
<DataGridInner />
</div>
<AddDialog />
<EditDialog />
<DeleteDialog />
<SearchDialog />
</Container>
</ManageMunicipiosProvider>
</>
);
};

56
src/pages/master/postoadms/PostoAdmsMaster.tsx
View File

@ -5,36 +5,42 @@ import SearchDialog from './blocks/SearchDialog';
import { ManagePostoAdmsContextProvider } from './hooks/ManagePostoAdmsContext';
import { Container, DataGridInner } from '@/components';
import { Breadcrumbs, Link } from '@mui/material';
import { Helmet } from 'react-helmet';
const PostoAdmsMaster = () => {
return (
<ManagePostoAdmsContextProvider>
<Container>
<h1 className="text-xl font-medium leading-none text-gray-900 mb-3">
Postu Administrativo
</h1>
<Breadcrumbs sx={{ mb: 2 }}>
<Link underline="none" color="inherit" href="/">
<span className="text-sm hover:underline">Dashboard</span>
</Link>
<>
<Helmet>
<title>TPAY | Manage Postu Administrativo</title>
</Helmet>
<ManagePostoAdmsContextProvider>
<Container>
<h1 className="text-xl font-medium leading-none text-gray-900 mb-3">
Postu Administrativo
</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">Master Data</span>
</Link>
<Link underline="none" color="inherit">
<span className="text-sm">Master Data</span>
</Link>
<Link underline="none" color="inherit">
<span className="text-sm">Manage Postu Administrativo</span>
</Link>
</Breadcrumbs>
<div className="grid gap-5 lg:gap-7.5">
<DataGridInner />
</div>
<AddDialog />
<EditDialog />
<DeleteDialog />
<SearchDialog />
</Container>
</ManagePostoAdmsContextProvider>
<Link underline="none" color="inherit">
<span className="text-sm">Manage Postu Administrativo</span>
</Link>
</Breadcrumbs>
<div className="grid gap-5 lg:gap-7.5">
<DataGridInner />
</div>
<AddDialog />
<EditDialog />
<DeleteDialog />
<SearchDialog />
</Container>
</ManagePostoAdmsContextProvider>
</>
);
};

48
src/pages/master/products/ProductsMaster.tsx
View File

@ -4,33 +4,37 @@ import AddDialog from './blocks/AddDialog';
import EditDialog from './blocks/EditDialog';
import DeleteDialog from './blocks/DeleteDialog';
import { Breadcrumbs, Link } from '@mui/material';
import { Helmet } from 'react-helmet';
const ProductsMaster = () => {
return (
<ManageProductsContextProvider>
<Container>
<h1 className="text-xl font-medium leading-none text-gray-900 mb-3">Manage Products</h1>
<Breadcrumbs sx={{ mb: 2 }}>
<Link underline="none" color="inherit" href="/">
<span className="text-sm hover:underline">Dashboard</span>
</Link>
<>
<Helmet><title>TPAY | Manage Products</title></Helmet>
<ManageProductsContextProvider>
<Container>
<h1 className="text-xl font-medium leading-none text-gray-900 mb-3">Manage Products</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">Master Data</span>
</Link>
<Link underline="none" color="inherit">
<span className="text-sm">Master Data</span>
</Link>
<Link underline="none" color="inherit">
<span className="text-sm">Manage Products</span>
</Link>
</Breadcrumbs>
<div className="grid gap-5 lg:gap-7.5">
<DataGridInner />
</div>
<AddDialog />
<EditDialog />
<DeleteDialog />
</Container>
</ManageProductsContextProvider>
<Link underline="none" color="inherit">
<span className="text-sm">Manage Products</span>
</Link>
</Breadcrumbs>
<div className="grid gap-5 lg:gap-7.5">
<DataGridInner />
</div>
<AddDialog />
<EditDialog />
<DeleteDialog />
</Container>
</ManageProductsContextProvider>
</>
);
};

48
src/pages/master/profession/ProfessionMaster.tsx
View File

@ -4,33 +4,37 @@ import AddDialog from './blocks/AddDialog';
import EditDialog from './blocks/EditDialog';
import DeleteDialog from './blocks/DeleteDialog';
import { Breadcrumbs, Link } from '@mui/material';
import { Helmet } from 'react-helmet';
const ProfessionMaster = () => {
return (
<ManageProfessionContextProvider>
<Container>
<h1 className="text-xl font-medium leading-none text-gray-900 mb-3">Manage Profession</h1>
<Breadcrumbs sx={{ mb: 2 }}>
<Link underline="none" color="inherit" href="/">
<span className="text-sm hover:underline">Dashboard</span>
</Link>
<>
<Helmet><title>TPAY | Manage Profession</title></Helmet>
<ManageProfessionContextProvider>
<Container>
<h1 className="text-xl font-medium leading-none text-gray-900 mb-3">Manage Profession</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">Master Data</span>
</Link>
<Link underline="none" color="inherit">
<span className="text-sm">Master Data</span>
</Link>
<Link underline="none" color="inherit">
<span className="text-sm">Manage Profession</span>
</Link>
</Breadcrumbs>
<div className="grid gap-5 lg:gap-7.5">
<DataGridInner />
</div>
<AddDialog />
<EditDialog />
<DeleteDialog />
</Container>
</ManageProfessionContextProvider>
<Link underline="none" color="inherit">
<span className="text-sm">Manage Profession</span>
</Link>
</Breadcrumbs>
<div className="grid gap-5 lg:gap-7.5">
<DataGridInner />
</div>
<AddDialog />
<EditDialog />
<DeleteDialog />
</Container>
</ManageProfessionContextProvider>
</>
);
};

48
src/pages/master/provider/ProviderMaster.tsx
View File

@ -4,33 +4,37 @@ import AddDialog from './blocks/AddDialog';
import EditDialog from './blocks/EditDialog';
import DeleteDialog from './blocks/DeleteDialog';
import { Breadcrumbs, Link } from '@mui/material';
import { Helmet } from 'react-helmet';
const ProviderMaster = () => {
return (
<ManageProviderContextProvider>
<Container>
<h1 className="text-xl font-medium leading-none text-gray-900 mb-3">Manage Provider</h1>
<Breadcrumbs sx={{ mb: 2 }}>
<Link underline="none" color="inherit" href="/">
<span className="text-sm hover:underline">Dashboard</span>
</Link>
<>
<Helmet><title>TPAY | Manage Provider</title></Helmet>
<ManageProviderContextProvider>
<Container>
<h1 className="text-xl font-medium leading-none text-gray-900 mb-3">Manage Provider</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">Master Data</span>
</Link>
<Link underline="none" color="inherit">
<span className="text-sm">Master Data</span>
</Link>
<Link underline="none" color="inherit">
<span className="text-sm">Manage Provider</span>
</Link>
</Breadcrumbs>
<div className="grid gap-5 lg:gap-7.5">
<DataGridInner />
</div>
<AddDialog />
<EditDialog />
<DeleteDialog />
</Container>
</ManageProviderContextProvider>
<Link underline="none" color="inherit">
<span className="text-sm">Manage Provider</span>
</Link>
</Breadcrumbs>
<div className="grid gap-5 lg:gap-7.5">
<DataGridInner />
</div>
<AddDialog />
<EditDialog />
<DeleteDialog />
</Container>
</ManageProviderContextProvider>
</>
);
};

52
src/pages/master/sucos/SucosMaster.tsx
View File

@ -5,36 +5,42 @@ import EditDialog from './blocks/EditDialog';
import DeleteDialog from './blocks/DeleteDialog';
import SearchDialog from './blocks/SearchDialog';
import { Breadcrumbs, Link } from '@mui/material';
import { Helmet } from 'react-helmet';
const SucosMaster = () => {
return (
<ManageSucosContextProvider>
<Container>
<h1 className="text-xl font-medium leading-none text-gray-900 mb-3">Sucos</h1>
<Breadcrumbs sx={{ mb: 2 }}>
<Link underline="none" color="inherit" href="/">
<span className="text-sm hover:underline">Dashboard</span>
</Link>
<>
<Helmet>
<title>TPAY | Manage Sucos</title>
</Helmet>
<ManageSucosContextProvider>
<Container>
<h1 className="text-xl font-medium leading-none text-gray-900 mb-3">Sucos</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">Master Data</span>
</Link>
<Link underline="none" color="inherit">
<span className="text-sm">Master Data</span>
</Link>
<Link underline="none" color="inherit">
<span className="text-sm">Manage Sucos</span>
</Link>
</Breadcrumbs>
<Link underline="none" color="inherit">
<span className="text-sm">Manage Sucos</span>
</Link>
</Breadcrumbs>
<div className="grid gap-5 lg:gap-7.5">
<DataGridInner />
</div>
<div className="grid gap-5 lg:gap-7.5">
<DataGridInner />
</div>
<AddDialog />
<EditDialog />
<DeleteDialog />
<SearchDialog />
</Container>
</ManageSucosContextProvider>
<AddDialog />
<EditDialog />
<DeleteDialog />
<SearchDialog />
</Container>
</ManageSucosContextProvider>
</>
);
};

46
src/pages/master/wallet/WalletMaster.tsx
View File

@ -3,32 +3,36 @@ import { ManageWalletContextProvider } from './hooks/ManageWalletContext';
import { Breadcrumbs, Link } from '@mui/material';
import AddDialog from './blocks/AddDialog';
import EditDialog from './blocks/EditDialog';
import { Helmet } from 'react-helmet';
const WalletMaster = () => {
return (
<ManageWalletContextProvider>
<Container>
<h1 className="text-xl font-medium leading-none text-gray-900 mb-3">Manage Wallet</h1>
<Breadcrumbs sx={{ mb: 2 }}>
<Link underline="none" color="inherit" href="/">
<span className="text-sm hover:underline">Dashboard</span>
</Link>
<>
<Helmet><title>TPAY | Manage Wallet</title></Helmet>
<ManageWalletContextProvider>
<Container>
<h1 className="text-xl font-medium leading-none text-gray-900 mb-3">Manage Wallet</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">Master Data</span>
</Link>
<Link underline="none" color="inherit">
<span className="text-sm">Master Data</span>
</Link>
<Link underline="none" color="inherit">
<span className="text-sm">Manage Wallet</span>
</Link>
</Breadcrumbs>
<div className="grid gap-5 lg:gap-7.5">
<DataGridInner />
</div>
<AddDialog />
<EditDialog />
</Container>
</ManageWalletContextProvider>
<Link underline="none" color="inherit">
<span className="text-sm">Manage Wallet</span>
</Link>
</Breadcrumbs>
<div className="grid gap-5 lg:gap-7.5">
<DataGridInner />
</div>
<AddDialog />
<EditDialog />
</Container>
</ManageWalletContextProvider>
</>
);
};

48
src/pages/master/walletRule/WalletRuleMaster.tsx
View File

@ -4,35 +4,39 @@ import { Breadcrumbs, Link } from '@mui/material';
import AddDialog from './blocks/AddDialog';
import EditDialog from './blocks/EditDialog';
import DeleteDialog from './blocks/DeleteDialog';
import { Helmet } from 'react-helmet';
const WalletRuleMaster = () => {
return (
<ManageWalletRuleContextProvider>
<Container>
<h1 className="text-xl font-medium leading-none text-gray-900 mb-5">Wallet Rule</h1>
<Breadcrumbs sx={{ mb: 2 }}>
<Link underline="none" color="inherit" href="/">
<span className="text-sm hover:underline">Dashboard</span>
</Link>
<>
<Helmet><title>TPAY | Manage Wallet Rule</title></Helmet>
<ManageWalletRuleContextProvider>
<Container>
<h1 className="text-xl font-medium leading-none text-gray-900 mb-5">Wallet Rule</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">Master Data</span>
</Link>
<Link underline="none" color="inherit">
<span className="text-sm">Master Data</span>
</Link>
<Link underline="none" color="inherit">
<span className="text-sm">Manage Wallet Rule</span>
</Link>
</Breadcrumbs>
<Link underline="none" color="inherit">
<span className="text-sm">Manage Wallet Rule</span>
</Link>
</Breadcrumbs>
<div className="grid gap-5 lg:gap-7.5">
<DataGridInner />
</div>
<div className="grid gap-5 lg:gap-7.5">
<DataGridInner />
</div>
<AddDialog />
<EditDialog />
<DeleteDialog />
</Container>
</ManageWalletRuleContextProvider>
<AddDialog />
<EditDialog />
<DeleteDialog />
</Container>
</ManageWalletRuleContextProvider>
</>
);
};

84
src/pages/members/kyc/Kyc.tsx
View File

@ -12,6 +12,7 @@ import { toast } from 'sonner';
const BASE_URL = apiConfig.service_customer;
import CustomerDialog from '../manage-members/CustomerDetailModal';
import { Breadcrumbs, Link } from '@mui/material';
import { Helmet } from 'react-helmet';
export interface IDataGridContextProps<TData extends object> {
props: TDataGridProps<TData>;
@ -141,42 +142,59 @@ const Kyc = () => {
};
return (
<div>
<div className="container mx-auto w-full">
<ConfirmDialog
open={dialogOpen}
onClose={() => setDialogOpen(false)}
title="Confirm Action"
content={`Are you sure you want to ${dialogType}?`}
onYes={handleYes}
onNo={() => setDialogOpen(false)}
/>
<CustomerDialog
open={isDialogOpen}
handleClose={closeDialog}
handleReject={handleReject}
handleSubmit={handleSubmit}
initialData={member}
viewStats={true}
page={'kyc'}
/>
<h1 className="text-xl font-medium leading-none text-gray-900 mb-3">Manage Member KYC</h1>
<Breadcrumbs>
<Link underline="none" color="inherit" href="/">
<span className="text-sm hover:underline">Dashboard</span>
</Link>
<>
<Helmet>
<title>TPAY | KYC</title>
</Helmet>
<div>
<div className="container mx-auto w-full">
<ConfirmDialog
open={dialogOpen}
onClose={() => setDialogOpen(false)}
title="Confirm Action"
content={`Are you sure you want to ${dialogType}?`}
onYes={handleYes}
onNo={() => setDialogOpen(false)}
/>
<CustomerDialog
open={isDialogOpen}
handleClose={closeDialog}
handleReject={handleReject}
handleSubmit={handleSubmit}
initialData={member}
viewStats={true}
page={'kyc'}
/>
<h1 className="text-xl font-medium leading-none text-gray-900 mb-3 grid gap-5 lg:gap-7.5 mx-8 w-auto">Manage Member KYC</h1>
<div className='grid gap-5 lg:gap-7.5 mx-8 w-auto'>
<Breadcrumbs>
<Link underline="none" color="inherit" href="/">
<span className="text-sm hover:underline">Dashboard</span>
</Link>
<Link underline="none" color="inherit">
<span className="text-sm">Members</span>
</Link>
<Link underline="none" color="inherit">
<span className="text-sm">Members</span>
</Link>
<Link underline="none" color="inherit">
<span className="text-sm">Manage Member KYC</span>
</Link>
</Breadcrumbs>
<DataTable data={members} columns={columns} onUpdate={handleUpdate} onDelete={null} />
<Link underline="none" color="inherit">
<span className="text-sm">Manage Member KYC</span>
</Link>
</Breadcrumbs>
</div>
<div className="w-full overflow-x-auto px-4">
<div className="min-w-[800px]">
<DataTable
data={members}
columns={columns}
onUpdate={handleUpdate}
onDelete={null}
/>
</div>
</div>
</div>
</div>
</div>
</>
);
};

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

@ -10,6 +10,7 @@ import { ScreenLoader } from '@/components';
import { toast } from 'sonner';
import { Breadcrumbs, Link } from '@mui/material';
const BASE_URL = apiConfig.service_customer;
import { Helmet } from 'react-helmet';
const ManageMembers = () => {
const [loading, setLoading] = useState(false);
@ -115,6 +116,7 @@ const ManageMembers = () => {
if (loading) return <ScreenLoader />;
return (
<<<<<<< Updated upstream
<div>
<div className="container mx-auto w-full">
<ConfirmDialog
@ -137,24 +139,58 @@ const ManageMembers = () => {
<Link underline="none" color="inherit" href="/">
<span className="text-sm hover:underline">Dashboard</span>
</Link>
=======
<>
<Helmet>
<title>TPAY | Manage Members</title>
</Helmet>
<div>
<div className="container mx-auto w-full">
<ConfirmDialog
open={dialogOpen}
onClose={() => setDialogOpen(false)}
title="Confirm Action"
content={`Are you sure you want to ${dialogType}?`}
onYes={handleYes}
onNo={() => setDialogOpen(false)}
/>
<CustomerDialog
open={isDialogOpen}
handleClose={closeDialog}
handleSubmit={handleSubmit}
initialData={member}
/>
<h1 className="text-xl font-medium leading-none text-gray-900 mb-3 grid gap-5 lg:gap-7.5 mx-8 w-auto">Manage Members</h1>
<div className='grid gap-5 lg:gap-7.5 mx-8 w-auto'>
<Breadcrumbs>
<Link underline="none" color="inherit" href="/">
<span className="text-sm hover:underline">Dashboard</span>
</Link>
>>>>>>> Stashed changes
<Link underline="none" color="inherit">
<span className="text-sm">Members</span>
</Link>
<Link underline="none" color="inherit">
<span className="text-sm">Members</span>
</Link>
<Link underline="none" color="inherit">
<span className="text-sm">Manage Members</span>
</Link>
</Breadcrumbs>
<DataTable
data={members}
createData={createMember}
columns={columns}
onUpdate={handleUpdate}
onDelete={null}
/>
<Link underline="none" color="inherit">
<span className="text-sm">Manage Members</span>
</Link>
</Breadcrumbs>
</div>
<div className="w-full overflow-x-auto px-4">
<div className="min-w-[800px]">
<DataTable
data={members}
createData={createMember}
columns={columns}
onUpdate={handleUpdate}
onDelete={null}
/>
</div>
</div>
</div>
</div>
</div>
</>
);
};

48
src/pages/menu/manage-menu/ManageMenu.tsx
View File

@ -4,33 +4,37 @@ import AddDialog from './blocks/AddDIalog';
import EditDialog from './blocks/EditDialog';
import DeleteDialog from './blocks/DeleteDialog';
import { Breadcrumbs, Link } from '@mui/material';
import { Helmet } from 'react-helmet';
const ManageMenu = () => {
return (
<ManageMenusContextProvider>
<Container>
<h1 className="text-xl font-medium leading-none text-gray-900 mb-3">Manage Menu</h1>
<Breadcrumbs sx={{ mb: 2 }}>
<Link underline="none" color="inherit" href="/">
<span className="text-sm hover:underline">Dashboard</span>
</Link>
<>
<Helmet><title>TPAY | Manage Menu</title></Helmet>
<ManageMenusContextProvider>
<Container>
<h1 className="text-xl font-medium leading-none text-gray-900 mb-3">Manage Menu</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">Master Data</span>
</Link>
<Link underline="none" color="inherit">
<span className="text-sm">Master Data</span>
</Link>
<Link underline="none" color="inherit">
<span className="text-sm">Manage Menu</span>
</Link>
</Breadcrumbs>
<div className="grid gap-5 lg:gap-7.5">
<DataGridInner />
</div>
<AddDialog />
<EditDialog />
<DeleteDialog />
</Container>
</ManageMenusContextProvider>
<Link underline="none" color="inherit">
<span className="text-sm">Manage Menu</span>
</Link>
</Breadcrumbs>
<div className="grid gap-5 lg:gap-7.5">
<DataGridInner />
</div>
<AddDialog />
<EditDialog />
<DeleteDialog />
</Container>
</ManageMenusContextProvider>
</>
);
};

50
src/pages/notification/ManageNotification.tsx
View File

@ -2,33 +2,39 @@ import { Container, DataGridInner } from '@/components';
import { ManageNotifContextProvider } from './hooks/ManageNotificationContext';
import AddDialog from './blocks/AddDialog';
import { Breadcrumbs, Link } from '@mui/material';
import { Helmet } from 'react-helmet';
const ManageNotification = () => {
return (
<ManageNotifContextProvider>
<Container>
<h1 className="text-xl font-medium leading-none text-gray-900 mb-3">
Manage Notifications
</h1>
<Breadcrumbs sx={{ mb: 2 }}>
<Link underline="none" color="inherit" href="/">
<span className="text-sm hover:underline">Dashboard</span>
</Link>
<>
<Helmet>
<title>TPAY | Manage Notification</title>
</Helmet>
<ManageNotifContextProvider>
<Container>
<h1 className="text-xl font-medium leading-none text-gray-900 mb-3">
Manage Notifications
</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">Notification</span>
</Link>
<Link underline="none" color="inherit">
<span className="text-sm">Notification</span>
</Link>
<Link underline="none" color="inherit">
<span className="text-sm">Manage Notification</span>
</Link>
</Breadcrumbs>
<div className="grid gap-5 lg:gap-7.5">
<DataGridInner />
</div>
<AddDialog />
</Container>
</ManageNotifContextProvider>
<Link underline="none" color="inherit">
<span className="text-sm">Manage Notification</span>
</Link>
</Breadcrumbs>
<div className="grid gap-5 lg:gap-7.5">
<DataGridInner />
</div>
<AddDialog />
</Container>
</ManageNotifContextProvider>
</>
);
};

56
src/pages/settings/user/manage-position/ManagePositionPage.tsx
View File

@ -4,36 +4,42 @@ import { ManagePositionContextProvider } from './hooks';
import { AddDialog } from './blocks/AddDialog';
import { DeleteDialog } from './blocks/DeleteDialog';
import { Breadcrumbs, Link } from '@mui/material';
import { Helmet } from 'react-helmet';
export default function ManagePositionPage() {
return (
<ManagePositionContextProvider>
<Container>
<h1 className="text-xl font-medium leading-none text-gray-900 mb-3">Manage Positions</h1>
<Breadcrumbs sx={{ mb: 2 }}>
<Link underline="none" color="inherit" href="/">
<span className="text-sm hover:underline">Dashboard</span>
</Link>
<>
<Helmet>
<title>TPAY | Manage Position</title>
</Helmet>
<ManagePositionContextProvider>
<Container>
<h1 className="text-xl font-medium leading-none text-gray-900 mb-3">Manage Positions</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">Settings</span>
</Link>
<Link underline="none" color="inherit">
<span className="text-sm">Settings</span>
</Link>
<Link underline="none" color="inherit">
<span className="text-sm">User Management</span>
</Link>
<Link underline="none" color="inherit">
<span className="text-sm">User Management</span>
</Link>
<Link underline="none" color="inherit">
<span className="text-sm">Manage Position</span>
</Link>
</Breadcrumbs>
<div className="grid gap-5 lg:gap-7.5">
<DataGridInner />
</div>
<EditDialog />
<AddDialog />
<DeleteDialog />
</Container>
</ManagePositionContextProvider>
<Link underline="none" color="inherit">
<span className="text-sm">Manage Position</span>
</Link>
</Breadcrumbs>
<div className="grid gap-5 lg:gap-7.5">
<DataGridInner />
</div>
<EditDialog />
<AddDialog />
<DeleteDialog />
</Container>
</ManagePositionContextProvider>
</>
);
}

44
src/pages/transaction/approval-transaction/ApprovalTransaction.tsx
View File

@ -1,30 +1,36 @@
import { Container, DataGridInner } from '@/components';
import { ApprovalTransactionProvider } from './hooks/ApprovalTransactionContext';
import { Breadcrumbs, Link } from '@mui/material';
import { Helmet } from 'react-helmet';
const ApprovalTransaction = () => {
return (
<ApprovalTransactionProvider>
<Container className="mb-7">
<h1 className="text-xl font-medium leading-none text-gray-900 mb-5">TRANSACTION</h1>
<Breadcrumbs sx={{ mb: 2 }}>
<Link underline="none" color="inherit" href="/">
<span className="text-sm hover:underline">Dashboard</span>
</Link>
<>
<Helmet>
<title>TPAY | Approval Transaction</title>
</Helmet>
<ApprovalTransactionProvider>
<Container className="mb-7">
<h1 className="text-xl font-medium leading-none text-gray-900 mb-5">TRANSACTION</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">Transaction</span>
</Link>
<Link underline="none" color="inherit">
<span className="text-sm">Approval Transaction</span>
</Link>
</Breadcrumbs>
<div className="grid gap-5 lg:gap-7.5">
<DataGridInner />
</div>
</Container>
</ApprovalTransactionProvider>
<Link underline="none" color="inherit">
<span className="text-sm">Approval Transaction</span>
</Link>
</Breadcrumbs>
<div className="grid gap-5 lg:gap-7.5">
<DataGridInner />
</div>
</Container>
</ApprovalTransactionProvider>
</>
);
};

152
src/pages/transaction/approval-transaction/blocks/ApprovalDialog.tsx Normal file
View File

@ -0,0 +1,152 @@
import { useTransactionContext } from '../hooks/useApprovalTransactionContext';
import { useCallApi } from '@/hooks';
import { apiConfig } from '@/config/api.config';
import { useCallback, useEffect, useRef, useState } from 'react';
import {
Dialog,
DialogBody,
DialogContent,
DialogDescription,
DialogHeader,
DialogTitle
} from '@/components/ui/dialog';
import { Button } from '@/components/ui/button';
import {
Select,
SelectContent,
SelectItem,
SelectTrigger,
SelectValue
} from '@/components/ui/select';
import { Alert, KeenIcon, useDataGrid } from '@/components';
import { doSaveLogActivity } from '@/actions/GlobalActions';
import { toast } from 'sonner';
import { Input } from '@/components/ui/input';
const API_URL = apiConfig.transaction;
const ApprovalDialog = () => {
const { GetData, PostData } = useCallApi();
// const { reload } = useDataGrid();
const {
showApprovalDialog,
setShowApprovalDialog,
selectedTransactionIdForApproval
} = useTransactionContext();
const [transactionDetails, setTransactionDetails] = useState<any>(null);
const [formField, setFormField] = useState({
transaction_code: '',
status: ''
});
const [alert, setAlert] = useState({
show: false,
message: ''
});
const doApproval = useCallback(
async (e: React.FormEvent<HTMLFormElement>) => {
e.preventDefault();
if (!transactionDetails || !transactionDetails.code) {
toast.error('Transaction data not loaded yet.');
return;
}
if (!formField.status) {
toast.error('Please select a status.');
return;
}
const response = await PostData(`${API_URL}/transaction/set-approval`, {
transaction_code: transactionDetails.code,
status: formField.status,
});
if (response?.status) {
setAlert((prev) => ({ ...prev, show: false, message: '' }));
toast.success('Success Update Position');
const createActivity = {
module: 'Approval Transaction',
description: `Change status approve for transaction => ${transactionDetails.code}`,
action: 'U'
};
doSaveLogActivity(createActivity);
setShowApprovalDialog(false); // optionally close dialog
} else {
setAlert((prev) => ({ ...prev, show: true, message: response?.message }));
}
},
[formField, transactionDetails]
);
useEffect(() => {
const fetchTransactionDetails = async () => {
if (selectedTransactionIdForApproval) {
try {
const response = await GetData(`${API_URL}/transaction/history/detail/${selectedTransactionIdForApproval}`, {
id: selectedTransactionIdForApproval
});
// console.log(response?.data.code);
// console.log(selectedTransactionIdForApproval);
setTransactionDetails(response?.data);
} catch (error) {
console.error('Error fetching transaction', error);
}
}
};
if (showApprovalDialog && selectedTransactionIdForApproval) {
fetchTransactionDetails();
}
}, [showApprovalDialog, selectedTransactionIdForApproval, GetData]);
return (
<Dialog open={showApprovalDialog} onOpenChange={setShowApprovalDialog}>
<DialogContent className="container-fixed max-w-[1024px] flex flex-col p-5 overflow-hidden">
<DialogHeader>
<DialogTitle>Approval Transaction</DialogTitle>
</DialogHeader>
<DialogBody>
<form action="" onSubmit={doApproval}>
<div className="card-body grid gap-5 p-0">
<div className="w-full">
<div className="flex items-center flex-wrap gap-2.5">
<label className="form-label max-w-56">Status</label>
<div className="grow">
<Select
value={formField.status}
onValueChange={(status) => setFormField((prev) => ({ ...prev, status }))}
>
<SelectTrigger>
<SelectValue placeholder="Select" />
</SelectTrigger>
<SelectContent>
<SelectItem value="Y">APPROVE</SelectItem>
<SelectItem value="N">REJECTED</SelectItem>
</SelectContent>
</Select>
</div>
</div>
</div>
<hr />
<div className="flex justify-end">
<Button className="btn btn-primary" type="submit">
Save Changes
</Button>
</div>
</div>
</form>
</DialogBody>
</DialogContent>
</Dialog>
);
};
export default ApprovalDialog;

177
src/pages/transaction/approval-transaction/hooks/ApprovalTransactionContext.tsx
View File

@ -1,14 +1,18 @@
import React, { createContext, useMemo, useState } from 'react';
import { useNavigate } from 'react-router-dom'; // FIXED HERE
import { ColumnDef } from '@tanstack/react-table';
import axios from 'axios';
import { DataGridColumnHeader, DataGridProvider, KeenIcon } from '@/components';
import { Toaster } from '@/components/ui/sonner';
import { apiConfig } from '@/config/api.config';
import { ColumnDef } from '@tanstack/react-table';
import axios from 'axios';
import React, { createContext, useCallback, useEffect, useMemo, useState } from 'react';
import { useCallApi } from '@/hooks';
import ListToolbar from '../blocks/ListToolbar';
import { Button } from '@/components/ui/button';
import { useNavigate } from 'react-router';
import DetailApprovalTransaction from '../blocks/DetailApprovalTransaction';
import ApprovalDialog from '../blocks/ApprovalDialog';
import { Button } from '@/components/ui/button';
interface ApprovalTransactionProps {
id: number;
@ -17,25 +21,31 @@ interface ApprovalTransactionProps {
interface ContextProps {
getTransactionLists: (
limit: number,
page: number,
with_deleted: boolean,
order_field: any,
order_direction: any,
limit: number,
sorting: any,
filter: any
) => Promise<{ data: ApprovalTransactionProps[]; totalCount: number } | undefined>;
showDetailDialog: boolean;
setShowDetailDialog: React.Dispatch<React.SetStateAction<boolean>>;
showApprovalDialog: boolean;
setShowApprovalDialog: React.Dispatch<React.SetStateAction<boolean>>;
selectedTransactionId: number | null;
setSelectedTransactionId: React.Dispatch<React.SetStateAction<number | null>>;
selectedTransactionIdForApproval: number | null;
setSelectedTransactionIdForApproval: React.Dispatch<React.SetStateAction<number | null>>;
}
const initialProps: ContextProps = {
getTransactionLists: async () => ({ data: [], totalCount: 0 }),
showDetailDialog: false,
setShowDetailDialog: () => { },
showApprovalDialog: false,
setShowApprovalDialog: () => { },
selectedTransactionId: null,
setSelectedTransactionId: () => { }
setSelectedTransactionId: () => { },
selectedTransactionIdForApproval: null,
setSelectedTransactionIdForApproval: () => { },
};
const ManageApprovalTransactionContext = createContext<ContextProps>(initialProps);
@ -43,63 +53,54 @@ const API_URL = apiConfig.transaction;
const ApprovalTransactionProvider = ({ children }: { children: React.ReactNode }) => {
const [showDetailDialog, setShowDetailDialog] = useState(false);
const [showApprovalDialog, setShowApprovalDialog] = useState(false);
const [selectedTransactionId, setSelectedTransactionId] = useState<number | null>(null);
const [selectedTransactionIdForApproval, setSelectedTransactionIdForApproval] = useState<number | null>(null);
const [transaction, setTransaction] = useState<ApprovalTransactionProps[]>([]);
const { GetData } = useCallApi();
const navigate = useNavigate();
const handleNavigate = (path: string) => {
const url = navigate(`${API_URL}/transaction/history/${path}`);
};
const columns = useMemo<ColumnDef<any>[]>(
() => [
// {
// accessorKey: 'transaction_date',
// header: ({ column }) => <DataGridColumnHeader title="Transaction Date" column={column} />,
// enableSorting: false,
// enableHiding: false,
// meta: {
// headerClassName: 'w-[250px]'
// }
// },
{
accessorKey: 'transaction_date',
header: ({ column }) => <DataGridColumnHeader title="Transaction Date" column={column} />,
enableSorting: false,
enableHiding: false,
meta: {
headerClassName: 'w-[250px]'
headerClassName: 'w-[250px]',
},
cell: ({ row }) => {
// Memformat tanggal dan waktu dari ISO ke format biasa (DD-MM-YYYY HH:MM:SS)
const transactionDate = new Date(row.original.transaction_date);
const formattedDateTime = transactionDate.toLocaleString('en-GB', {
return transactionDate.toLocaleString('en-GB', {
day: '2-digit',
month: '2-digit',
year: 'numeric',
hour: '2-digit',
minute: '2-digit',
second: '2-digit',
hour12: false // Gunakan format 24 jam
hour12: false,
});
return formattedDateTime; // Format DD-MM-YYYY HH:MM:SS (menggunakan waktu yang sudah ada)
}
},
},
},
{
accessorKey: 'origin_customer.fullname',
header: ({ column }) => <DataGridColumnHeader title="Full Name" column={column} />,
enableSorting: false,
enableHiding: false,
meta: {
headerClassName: 'w-[250px]'
}
headerClassName: 'w-[250px]',
},
},
{
accessorFn: (row) => {
const purchaseAmount = row?.purchase?.amount;
const transferAmount = row?.transfer?.amount;
return new Intl.NumberFormat('en-US', { style: 'currency', currency: 'USD' }).format(purchaseAmount ?? transferAmount ?? 0);
return new Intl.NumberFormat('en-US', {
style: 'currency',
currency: 'USD',
}).format(purchaseAmount ?? transferAmount ?? 0);
},
id: 'amount',
header: ({ column }) => <DataGridColumnHeader title="Amount" column={column} />,
@ -111,10 +112,12 @@ const ApprovalTransactionProvider = ({ children }: { children: React.ReactNode }
},
{
accessorFn: (row) => {
const purchaseAmount = row?.purchase?.fee_amount;
const transferAmount = row?.transfer?.fee_amount;
return new Intl.NumberFormat('en-US', { style: 'currency', currency: 'USD' }).format(purchaseAmount ?? transferAmount ?? 0);
const purchaseFee = row?.purchase?.fee_amount;
const transferFee = row?.transfer?.fee_amount;
return new Intl.NumberFormat('en-US', {
style: 'currency',
currency: 'USD',
}).format(purchaseFee ?? transferFee ?? 0);
},
id: 'feeamount',
header: ({ column }) => <DataGridColumnHeader title="Fee Amount" column={column} />,
@ -126,19 +129,14 @@ const ApprovalTransactionProvider = ({ children }: { children: React.ReactNode }
},
{
accessorFn: (row) => {
let status;
if (row.status === 'C') {
status = 'COMPLETE';
} else if (row.status === 'F') {
status = 'FAILED';
} else if (row.status === 'O') {
status = 'ON PROCESS';
} else {
status = 'PENDING';
switch (row.status) {
case 'C': return 'COMPLETE';
case 'F': return 'FAILED';
case 'O': return 'ON PROCESS';
default: return 'PENDING';
}
return status;
},
accessorKey: 'status',
id: 'status',
header: ({ column }) => <DataGridColumnHeader title="Status" column={column} />,
enableSorting: false,
enableHiding: false,
@ -152,8 +150,8 @@ const ApprovalTransactionProvider = ({ children }: { children: React.ReactNode }
enableSorting: false,
enableHiding: false,
meta: {
headerClassName: 'w-[250px]'
}
headerClassName: 'w-[250px]',
},
},
{
accessorKey: 'type.name',
@ -161,8 +159,25 @@ const ApprovalTransactionProvider = ({ children }: { children: React.ReactNode }
enableSorting: false,
enableHiding: false,
meta: {
headerClassName: 'w-[250px]'
}
headerClassName: 'w-[250px]',
},
},
{
accessorFn: (row) => {
switch (row.status_approve) {
case 'W': return 'WAITING APPROVAL';
case 'Y': return 'APPROVED';
case 'N': return 'REJECTED';
default: return 'PENDING';
}
},
id: 'status_approve',
header: ({ column }) => <DataGridColumnHeader title="Status" column={column} />,
enableSorting: false,
enableHiding: false,
meta: {
headerClassName: 'w-[250px]',
},
},
{
id: 'actions',
@ -172,7 +187,7 @@ const ApprovalTransactionProvider = ({ children }: { children: React.ReactNode }
cell: (data) => {
const row = data.row.original;
return (
<div key={`actions-${row.id}`}>
<div key={`actions-${row.id}`} className="flex gap-2 justify-center">
<button
className="btn btn-sm btn-icon btn-clear btn-light"
onClick={() => {
@ -182,40 +197,48 @@ const ApprovalTransactionProvider = ({ children }: { children: React.ReactNode }
>
<KeenIcon icon="eye" />
</button>
<button
className="btn btn-sm btn-icon btn-clear btn-light"
onClick={() => {
setSelectedTransactionIdForApproval(row.id);
setShowApprovalDialog(true);
}}
>
<KeenIcon icon="notepad-edit" />
</button>
</div>
);
},
meta: {
headerClassName: 'w-[100px]',
cellClassName: 'text-center'
}
}
cellClassName: 'text-center',
},
},
],
[]);
[]
);
const getTransactionLists = async (page: number, limit: number, sorting: any, filter: any) => {
try {
let startdate;
let enddate;
let formattedFilter;
let startdate, enddate;
if (filter == undefined || filter.length == 0) {
if (!filter || filter.length === 0) {
const today = new Date();
const nextWeek = new Date();
nextWeek.setDate(today.getDate() + 7);
startdate = today.toISOString().split('T')[0];
enddate = nextWeek.toISOString().split('T')[0];
} else if (filter != undefined || filter.length != 0) {
startdate = filter[0].value.from;
enddate = filter[0].value.to;
} else {
startdate = filter[0]?.value?.from;
enddate = filter[0]?.value?.to;
}
formattedFilter = {
const formattedFilter = {
"Transactions.transaction_date": {
from: startdate + " 00:00:00",
to: enddate + " 23:59:59"
}
from: `${startdate} 00:00:00`,
to: `${enddate} 23:59:59`,
},
"Transactions.status_approve": { in: ["W", "Y", "N"] },
};
const response = await GetData(`${API_URL}/transaction/history`, {
@ -224,11 +247,14 @@ const ApprovalTransactionProvider = ({ children }: { children: React.ReactNode }
with_deleted: false,
order_field: "Transactions.created_at",
order_direction: 'DESC',
filter: JSON.stringify(formattedFilter)
filter: JSON.stringify(formattedFilter),
});
setTransaction(response?.data.list);
return { data: response?.data.list, totalCount: response?.data.total_count };
setTransaction(response?.data?.list || []);
return {
data: response?.data?.list || [],
totalCount: response?.data?.total_count || 0,
};
} catch (error) {
console.error('Error fetching transaction', error);
}
@ -240,12 +266,17 @@ const ApprovalTransactionProvider = ({ children }: { children: React.ReactNode }
getTransactionLists,
showDetailDialog,
setShowDetailDialog,
showApprovalDialog,
setShowApprovalDialog,
selectedTransactionId,
setSelectedTransactionId
setSelectedTransactionId,
selectedTransactionIdForApproval,
setSelectedTransactionIdForApproval,
}}
>
<Toaster expand visibleToasts={9} duration={3000} />
<DetailApprovalTransaction />
<ApprovalDialog />
<DataGridProvider
columns={columns}

44
src/pages/transaction/history-transaction/Transaction.tsx
View File

@ -1,30 +1,36 @@
import { Container, DataGridInner } from '@/components';
import { TransactionProvider } from './hooks/TransactionContext';
import { Breadcrumbs, Link } from '@mui/material';
import { Helmet } from 'react-helmet';
const Transaction = () => {
return (
<TransactionProvider>
<Container className="mb-7">
<h1 className="text-xl font-medium leading-none text-gray-900 mb-5">TRANSACTION</h1>
<Breadcrumbs sx={{ mb: 2 }}>
<Link underline="none" color="inherit" href="/">
<span className="text-sm hover:underline">Dashboard</span>
</Link>
<>
<Helmet>
<title>TPAY | History Transaction</title>
</Helmet>
<TransactionProvider>
<Container className="mb-7">
<h1 className="text-xl font-medium leading-none text-gray-900 mb-5">TRANSACTION</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">Transaction</span>
</Link>
<Link underline="none" color="inherit">
<span className="text-sm">History Transaction</span>
</Link>
</Breadcrumbs>
<div className="grid gap-5 lg:gap-7.5">
<DataGridInner />
</div>
</Container>
</TransactionProvider>
<Link underline="none" color="inherit">
<span className="text-sm">History Transaction</span>
</Link>
</Breadcrumbs>
<div className="grid gap-5 lg:gap-7.5">
<DataGridInner />
</div>
</Container>
</TransactionProvider>
</>
);
};

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

@ -227,7 +227,7 @@ const DetailTransaction = () => {
</div>
<div>
<p className="text-sm text-gray-500">Price Point</p>
{new Intl.NumberFormat('en-US', { style: 'currency', currency: 'USD' }).format(transactionDetails?.purchase.product.price_point)}
<p className="font-medium">{transactionDetails?.purchase.product.price_point}</p>
</div>
<div>
<p className="text-sm text-gray-500">Product Type</p>
@ -239,7 +239,17 @@ const DetailTransaction = () => {
</div>
<div>
<p className="text-sm text-gray-500">Provider Type</p>
<p className="font-medium">{transactionDetails?.purchase.product.provider.type}</p>
<p className="font-medium">
{(() => {
let providertype;
if (transactionDetails?.purchase.product.provider.type === 'h2h') {
providertype = 'HOST TO HOST';
} else if (transactionDetails?.purchase.product.provider.type === 'agent') {
providertype = 'AGENT';
}
return providertype;
})()}
</p>
</div>
</div>
</div>

54
src/pages/transfer/transfertype/TransferType.tsx
View File

@ -7,35 +7,41 @@ import AddDialog from './blocks/AddDialog';
import { Breadcrumbs, Link } from '@mui/material';
import { DeleteDialog } from './blocks/DeleteDialog';
import { EditDialog } from './blocks/EditDialog';
import { Helmet } from 'react-helmet';
const TransferType = () => {
return (
<ManageTransferTypeContextProvider>
<Container>
<h1 className="text-xl font-medium leading-none text-gray-900 mb-3">Manage Transaction Type</h1>
<Breadcrumbs sx={{ mb: 2 }}>
<Link underline="none" color="inherit" href="/">
<span className="text-sm hover:underline">Dashboard</span>
</Link>
<>
<Helmet>
<title>TPAY | Manage Transaction Type</title>
</Helmet>
<ManageTransferTypeContextProvider>
<Container>
<h1 className="text-xl font-medium leading-none text-gray-900 mb-3">Manage Transaction Type</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">Transfer Type</span>
</Link>
<Link underline="none" color="inherit">
<span className="text-sm">Transfer Type</span>
</Link>
<Link underline="none" color="inherit">
<span className="text-sm">Manage Transfer Type</span>
</Link>
</Breadcrumbs>
<div className="grid gap-5 lg:gap-7.5">
<DataGridInner />
</div>
<AddDialog />
<DeleteDialog />
<EditDialog />
</Container>
</ManageTransferTypeContextProvider>
<Link underline="none" color="inherit">
<span className="text-sm">Manage Transfer Type</span>
</Link>
</Breadcrumbs>
<div className="grid gap-5 lg:gap-7.5">
<DataGridInner />
</div>
<AddDialog />
<DeleteDialog />
<EditDialog />
</Container>
</ManageTransferTypeContextProvider>
</>
);
};

44
src/pages/wallet/wallet-history/WalletHistory.tsx
View File

@ -1,31 +1,37 @@
import { Container, DataGridInner } from '@/components';
import { ManageWalletContextProvider } from './hooks/ManageWalletHistoryContext';
import { Breadcrumbs, Link } from '@mui/material';
import { Helmet } from 'react-helmet';
const WalletHistory = () => {
return (
<ManageWalletContextProvider>
<Container>
<h1 className="text-xl font-medium leading-none text-gray-900 mb-5">Wallet History</h1>
<Breadcrumbs sx={{ mb: 2 }}>
<Link underline="none" color="inherit" href="/">
<span className="text-sm hover:underline">Dashboard</span>
</Link>
<>
<Helmet>
<title>TPAY | Wallet History</title>
</Helmet>
<ManageWalletContextProvider>
<Container>
<h1 className="text-xl font-medium leading-none text-gray-900 mb-5">Wallet History</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">Wallet</span>
</Link>
<Link underline="none" color="inherit">
<span className="text-sm">Wallet</span>
</Link>
<Link underline="none" color="inherit">
<span className="text-sm">Wallet History</span>
</Link>
</Breadcrumbs>
<Link underline="none" color="inherit">
<span className="text-sm">Wallet History</span>
</Link>
</Breadcrumbs>
<div className="grid gap-5 lg:gap-7.5">
<DataGridInner />
</div>
</Container>
</ManageWalletContextProvider>
<div className="grid gap-5 lg:gap-7.5">
<DataGridInner />
</div>
</Container>
</ManageWalletContextProvider>
</>
);
};

5
yarn.lock
View File

@ -2762,6 +2762,11 @@ hasown@^2.0.0, hasown@^2.0.2:
dependencies:
function-bind "^1.1.2"
helmet@^8.1.0:
version "8.1.0"
resolved "https://registry.npmjs.org/helmet/-/helmet-8.1.0.tgz"
integrity sha512-jOiHyAZsmnr8LqoPGmCjYAaiuWwjAPLgY8ZX2XrmHawt99/u1y6RgrZMTeoPfpUbV96HOalYgz1qzkRbw54Pmg==
hoist-non-react-statics@^3.3.0, hoist-non-react-statics@^3.3.1, hoist-non-react-statics@3:
version "3.3.2"
resolved "https://registry.npmjs.org/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz"