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

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

Browse Source
This commit is contained in:
unknown
2025-04-11 15:50:17 +07:00
parent 6d4c659f9a 7eb3de9f7a
commit 57ff5fd31c
35 changed files with 1277 additions and 952 deletions
Download Patch File Download Diff File Expand all files Collapse all files

194
src/auth/pages/jwt/Login.tsx
View File

@ -9,6 +9,7 @@ import { useAuthContext } from '@/auth';
import { useLayout } from '@/providers';
import { Alert } from '@/components';
import moment from 'moment';
import { Helmet } from 'react-helmet';
const loginSchema = Yup.object().shape({
username: Yup.string().required('Username is required'),
@ -76,101 +77,106 @@ const Login = () => {
};
return (
<div className="card max-w-[390px] w-full">
<form
className="card-body flex flex-col gap-5 p-10"
onSubmit={formik.handleSubmit}
noValidate
>
<div className="text-center">
<h3 className="text-lg font-semibold text-gray-900 leading-none ">Sign in</h3>
</div>
{formik.status && <Alert variant="danger">{formik.status}</Alert>}
<div className="flex flex-col gap-1">
<label className="form-label text-gray-900 ps-2.5">Login</label>
<label className="input">
<input
placeholder="Enter username"
autoComplete="off"
{...formik.getFieldProps('username')}
className={clsx('form-control', {
'is-invalid': formik.touched.username && formik.errors.username
})}
onKeyPress={handleKeyPress}
/>
</label>
{formik.touched.username && formik.errors.username && (
<span role="alert" className="text-danger text-xs mt-1">
{formik.errors.username}
</span>
)}
</div>
<div className="flex flex-col gap-1">
<div className="flex items-center justify-between gap-1">
<label className="form-label text-gray-900 ps-2.5">Password</label>
</div>
<label className="input">
<input
type={showPassword ? 'text' : 'password'}
placeholder="Enter Password"
autoComplete="off"
{...formik.getFieldProps('password')}
className={clsx('form-control', {
'is-invalid': formik.touched.password && formik.errors.password
})}
onKeyPress={handleKeyPress}
/>
<button className="btn btn-icon" onClick={togglePassword} type="button">
<KeenIcon icon="eye" className={clsx('text-gray-500', { hidden: showPassword })} />
<KeenIcon
icon="eye-slash"
className={clsx('text-gray-500', { hidden: !showPassword })}
/>
</button>
</label>
{formik.touched.password && formik.errors.password && (
<span role="alert" className="text-danger text-xs mt-1">
{formik.errors.password}
</span>
)}
</div>
<div className="flex items-center justify-between gap-1">
<label className="checkbox-group">
<input
className="checkbox checkbox-sm"
type="checkbox"
{...formik.getFieldProps('remember')}
/>
<span className="checkbox-label">Remember me</span>
</label>
<Link
to={
currentLayout?.name === 'auth-branded'
? '/auth/reset-password'
: '/auth/classic/reset-password'
}
className="text-2sm link shrink-0"
>
Forgot Password?
</Link>
</div>
<button
type="submit"
className="btn btn-primary flex justify-center grow"
disabled={loading || formik.isSubmitting}
<>
<Helmet>
<title>TPAY | Sign In</title>
</Helmet>
<div className="card max-w-[390px] w-full">
<form
className="card-body flex flex-col gap-5 p-10"
onSubmit={formik.handleSubmit}
noValidate
>
{loading ? 'Please wait...' : 'Sign In'}
</button>
<div>
<p className="text-2sm text-center" style={{ fontSize: '12px', letterSpacing: 0.25 }}>
Copyright {moment().year()} &copy; Telkomcel All rights reserved.
</p>
</div>
</form>
</div>
<div className="text-center">
<h3 className="text-lg font-semibold text-gray-900 leading-none ">Sign in</h3>
</div>
{formik.status && <Alert variant="danger">{formik.status}</Alert>}
<div className="flex flex-col gap-1">
<label className="form-label text-gray-900 ps-2.5">Login</label>
<label className="input">
<input
placeholder="Enter username"
autoComplete="off"
{...formik.getFieldProps('username')}
className={clsx('form-control', {
'is-invalid': formik.touched.username && formik.errors.username
})}
onKeyPress={handleKeyPress}
/>
</label>
{formik.touched.username && formik.errors.username && (
<span role="alert" className="text-danger text-xs mt-1">
{formik.errors.username}
</span>
)}
</div>
<div className="flex flex-col gap-1">
<div className="flex items-center justify-between gap-1">
<label className="form-label text-gray-900 ps-2.5">Password</label>
</div>
<label className="input">
<input
type={showPassword ? 'text' : 'password'}
placeholder="Enter Password"
autoComplete="off"
{...formik.getFieldProps('password')}
className={clsx('form-control', {
'is-invalid': formik.touched.password && formik.errors.password
})}
onKeyPress={handleKeyPress}
/>
<button className="btn btn-icon" onClick={togglePassword} type="button">
<KeenIcon icon="eye" className={clsx('text-gray-500', { hidden: showPassword })} />
<KeenIcon
icon="eye-slash"
className={clsx('text-gray-500', { hidden: !showPassword })}
/>
</button>
</label>
{formik.touched.password && formik.errors.password && (
<span role="alert" className="text-danger text-xs mt-1">
{formik.errors.password}
</span>
)}
</div>
<div className="flex items-center justify-between gap-1">
<label className="checkbox-group">
<input
className="checkbox checkbox-sm"
type="checkbox"
{...formik.getFieldProps('remember')}
/>
<span className="checkbox-label">Remember me</span>
</label>
<Link
to={
currentLayout?.name === 'auth-branded'
? '/auth/reset-password'
: '/auth/classic/reset-password'
}
className="text-2sm link shrink-0"
>
Forgot Password?
</Link>
</div>
<button
type="submit"
className="btn btn-primary flex justify-center grow"
disabled={loading || formik.isSubmitting}
>
{loading ? 'Please wait...' : 'Sign In'}
</button>
<div>
<p className="text-2sm text-center" style={{ fontSize: '12px', letterSpacing: 0.25 }}>
Copyright {moment().year()} &copy; Telkomcel All rights reserved.
</p>
</div>
</form>
</div>
</>
);
};

126
src/auth/pages/jwt/reset-password/ResetPassword.tsx
View File

@ -9,6 +9,7 @@ import { useAuthContext } from '@/auth/useAuthContext';
import { Alert, KeenIcon } from '@/components';
import { useLayout } from '@/providers';
import { AxiosError } from 'axios';
import { Helmet } from 'react-helmet';
const initialValues = {
email: ''
@ -64,70 +65,75 @@ const ResetPassword = () => {
}
});
return (
<div className="card max-w-[370px] w-full">
<form
className="card-body flex flex-col gap-5 p-10"
noValidate
onSubmit={formik.handleSubmit}
>
<div className="text-center">
<h3 className="text-lg font-semibold text-gray-900">Your Email</h3>
<span className="text-2sm text-gray-600 font-medium">
Enter your email to reset password
</span>
</div>
{hasErrors && <Alert variant="danger">{formik.status}</Alert>}
{hasErrors === false && (
<Alert variant="success">
Password reset link sent. Please check your email to proceed
</Alert>
)}
<div className="flex flex-col gap-1">
<label className="form-label text-gray-900">Email</label>
<label className="input">
<input
type="email"
placeholder="email@email.com"
autoComplete="off"
{...formik.getFieldProps('email')}
className={clsx(
'form-control bg-transparent',
{ 'is-invalid': formik.touched.email && formik.errors.email },
{
'is-valid': formik.touched.email && !formik.errors.email
}
)}
/>
</label>
{formik.touched.email && formik.errors.email && (
<span role="alert" className="text-danger text-xs mt-1">
{formik.errors.email}
<>
<Helmet>
<title>TPAY | Reset Password</title>
</Helmet>
<div className="card max-w-[370px] w-full">
<form
className="card-body flex flex-col gap-5 p-10"
noValidate
onSubmit={formik.handleSubmit}
>
<div className="text-center">
<h3 className="text-lg font-semibold text-gray-900">Your Email</h3>
<span className="text-2sm text-gray-600 font-medium">
Enter your email to reset password
</span>
</div>
{hasErrors && <Alert variant="danger">{formik.status}</Alert>}
{hasErrors === false && (
<Alert variant="success">
Password reset link sent. Please check your email to proceed
</Alert>
)}
</div>
<div className="flex flex-col gap-5 items-stretch">
<button
type="submit"
className="btn btn-primary flex justify-center grow"
disabled={loading || formik.isSubmitting}
>
{loading ? 'Please wait...' : 'Continue'}
</button>
<div className="flex flex-col gap-1">
<label className="form-label text-gray-900">Email</label>
<label className="input">
<input
type="email"
placeholder="email@email.com"
autoComplete="off"
{...formik.getFieldProps('email')}
className={clsx(
'form-control bg-transparent',
{ 'is-invalid': formik.touched.email && formik.errors.email },
{
'is-valid': formik.touched.email && !formik.errors.email
}
)}
/>
</label>
{formik.touched.email && formik.errors.email && (
<span role="alert" className="text-danger text-xs mt-1">
{formik.errors.email}
</span>
)}
</div>
<Link
to={currentLayout?.name === 'auth-branded' ? '/auth/login' : '/auth/classic/login'}
className="flex items-center justify-center text-sm gap-2 text-gray-700 hover:text-primary"
>
<KeenIcon icon="black-left" />
Back to Login
</Link>
</div>
</form>
</div>
<div className="flex flex-col gap-5 items-stretch">
<button
type="submit"
className="btn btn-primary flex justify-center grow"
disabled={loading || formik.isSubmitting}
>
{loading ? 'Please wait...' : 'Continue'}
</button>
<Link
to={currentLayout?.name === 'auth-branded' ? '/auth/login' : '/auth/classic/login'}
className="flex items-center justify-center text-sm gap-2 text-gray-700 hover:text-primary"
>
<KeenIcon icon="black-left" />
Back to Login
</Link>
</div>
</form>
</div>
</>
);
};

54
src/pages/master/currency/CurrencyMaster.tsx
View File

@ -5,39 +5,43 @@ import { Delete } from 'lucide-react';
import AddDialog from './blocks/AddDialog';
import DeleteDialog from './blocks/DeleteDialog';
import EditDialog from './blocks/EditDialog';
// import EditDialog from './blocks/EditDialog';
import { Helmet } from 'react-helmet';
const CurrencyMaster = () => {
return (
<ManageCurrencyContextProvider>
<Container>
<h1 className="text-xl font-medium leading-none text-gray-900 mb-5">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-5">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">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 Currency</span>
</Link>
</Breadcrumbs>
<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>
<div className="grid gap-5 lg:gap-7.5">
<DataGridInner />
</div>
<AddDialog />
<DeleteDialog />
<EditDialog />
{/* <EditDialog/>
<AddDialog />
<DeleteDialog />
<EditDialog />
{/* <EditDialog/>
<DeleteDialog/> */}
</Container>
</ManageCurrencyContextProvider>
</Container>
</ManageCurrencyContextProvider>
</>
);
};

123
src/pages/master/products/blocks/AddDialog.tsx
View File

@ -23,6 +23,7 @@ import {
SelectValue
} from '@/components/ui/select';
import { doSaveLogActivity } from '@/actions/GlobalActions';
import { NumericFormat } from 'react-number-format';
interface ProviderProps {
provider_id: number;
@ -40,15 +41,29 @@ const AddDialog = () => {
show: false,
message: ''
});
const initialState = {
const initialState: {
name: string;
code: string;
type: string;
description: string;
price_point: string | number | null;
price_cash: string | number | null;
cashback_point: string | number | null;
cashback_cash: string | number | null;
status: string;
provider: string;
process_on_third_party: string;
created_by: string;
created_at: string;
} = {
name: '',
code: '',
type: '',
description: '',
price_point: 0,
price_cash: 0,
cashback_point: 0,
cashback_cash: 0,
price_point: null,
price_cash: null,
cashback_point: null,
cashback_cash: null,
status: '',
provider: '',
process_on_third_party: '',
@ -117,11 +132,13 @@ const AddDialog = () => {
formField.type.trim() === '' ||
formField.code.trim() === '' ||
formField.description.trim() === '' ||
formField.price_point === 0 ||
formField.price_cash === 0 ||
formField.cashback_point === 0 ||
formField.cashback_cash === 0 ||
formField.price_point === null ||
formField.price_cash === null ||
formField.cashback_point === null ||
formField.cashback_cash === null ||
formField.status.trim() === '' ||
formField.provider.trim() === '' ||
formField.process_on_third_party.trim() === '' ||
formField.created_by.trim() === '' ||
formField.created_at.trim() === ''
) {
@ -234,19 +251,19 @@ const AddDialog = () => {
<label className="form-label flex items-center gap-1 max-w-56">
Price Point<span className="text-red-500">*</span>
</label>
<Input
<NumericFormat
className="input"
type="number"
min={0}
step={0.01}
value={formField.price_point}
onChange={(e) => {
const value = parseFloat(e.target.value);
setFormField({
...formField,
price_point: isNaN(value) ? 0 : value
});
value={formField.price_point ?? ''}
thousandSeparator="."
decimalSeparator=","
allowNegative={false}
onValueChange={(values) => {
setFormField((prev) => ({
...prev,
price_point: values.floatValue !== undefined ? values.floatValue : ''
}));
}}
placeholder="Enter Price Point"
/>
</div>
</div>
@ -256,19 +273,19 @@ const AddDialog = () => {
<label className="form-label flex items-center gap-1 max-w-56">
Price Cash<span className="text-red-500">*</span>
</label>
<Input
<NumericFormat
className="input"
type="number"
min={0}
step={0.01}
value={formField.price_cash}
onChange={(e) => {
const value = parseFloat(e.target.value);
setFormField({
...formField,
price_cash: isNaN(value) ? 0 : value
});
value={formField.price_cash ?? ''}
thousandSeparator="."
decimalSeparator=","
allowNegative={false}
onValueChange={(values) => {
setFormField((prev) => ({
...prev,
price_cash: values.floatValue !== undefined ? values.floatValue : ''
}));
}}
placeholder="Enter Price Cash"
/>
</div>
</div>
@ -278,19 +295,19 @@ const AddDialog = () => {
<label className="form-label flex items-center gap-1 max-w-56">
Cashback Point<span className="text-red-500">*</span>
</label>
<Input
<NumericFormat
className="input"
type="number"
min={0}
step={0.01}
value={formField.cashback_point}
onChange={(e) => {
const value = parseFloat(e.target.value);
setFormField({
...formField,
cashback_point: isNaN(value) ? 0 : value
});
value={formField.cashback_point ?? ''}
thousandSeparator="."
decimalSeparator=","
allowNegative={false}
onValueChange={(values) => {
setFormField((prev) => ({
...prev,
cashback_point: values.floatValue !== undefined ? values.floatValue : ''
}));
}}
placeholder="Enter Cashback Point"
/>
</div>
</div>
@ -300,19 +317,19 @@ const AddDialog = () => {
<label className="form-label flex items-center gap-1 max-w-56">
Cashback Cash<span className="text-red-500">*</span>
</label>
<Input
<NumericFormat
className="input"
type="number"
min={0}
step={0.01}
value={formField.cashback_cash}
onChange={(e) => {
const value = parseFloat(e.target.value);
setFormField({
...formField,
cashback_cash: isNaN(value) ? 0 : value
});
value={formField.cashback_cash ?? ''}
thousandSeparator="."
decimalSeparator=","
allowNegative={false}
onValueChange={(values) => {
setFormField((prev) => ({
...prev,
cashback_cash: values.floatValue !== undefined ? values.floatValue : ''
}));
}}
placeholder="Enter Cashback Cash"
/>
</div>
</div>

129
src/pages/master/provider/blocks/AddDialog.tsx
View File

@ -61,16 +61,27 @@ const AddDialog = () => {
show: false,
message: ''
});
const initialState = {
const initialState: {
name: string;
description: string;
type: string;
status: string;
transaction_type: string;
agent: string | null;
created_by: string;
created_at: string;
} = {
name: '',
description: '',
type: '',
status: '',
transaction_type: '',
agent: '',
agent: null,
created_by: '',
created_at: ''
};
const [formField, setFormField] = useState(initialState);
const [customers, setCustomers] = useState<CustomerProps[]>([]);
const [transactions, setTransactions] = useState<TransactionProps[]>([]);
@ -116,14 +127,13 @@ const AddDialog = () => {
formField.description.trim() === '' ||
formField.type.trim() === '' ||
formField.status.trim() === '' ||
formField.transaction_type === '' ||
formField.agent.trim() === ''
formField.transaction_type === ''
) {
setAlert({ show: true, message: 'Please fill in all required fields.' });
return;
}
console.log(formField);
// console.log(formField);
doCreateProvider(e);
setAlert({ show: false, message: '' });
};
@ -242,7 +252,7 @@ const AddDialog = () => {
<SelectValue placeholder="Select Type" />
</SelectTrigger>
<SelectContent>
<SelectItem value="h2h">H2H</SelectItem>
<SelectItem value="h2h">Host to Host</SelectItem>
<SelectItem value="agent">Agent</SelectItem>
</SelectContent>
</Select>
@ -294,56 +304,67 @@ const AddDialog = () => {
</div>
</div>
<div className="w-full">
<div className="flex items-baseline flex-wrap lg:flex-nowrap gap-2.5">
<label className="form-label flex items-center gap-1 max-w-56">
Agent Name<span className="text-red-500">*</span>
</label>
<Popover open={open} onOpenChange={setOpen}>
<PopoverTrigger asChild>
<button
type="button"
className="input col-span-5 text-left"
style={{ color: 'inherit' }}
>
{customers.find((customer) => customer.id === formField.agent)
?.username || 'Select Agent'}
</button>
</PopoverTrigger>
<PopoverContent className="w-[400px] p-0">
<Command>
<CommandInput placeholder="Search Agent..." />
<CommandList
className="max-h-[300px] overflow-y-auto"
style={{ touchAction: 'pan-y' }}
onWheel={(e) => {
e.currentTarget.scrollTop += e.deltaY;
}}
{formField.type === 'agent' ? (
<div className="w-full">
<div className="flex items-baseline flex-wrap lg:flex-nowrap gap-2.5">
<label className="form-label flex items-center gap-1 max-w-56">
Agent Name<span className="text-red-500">*</span>
</label>
<Popover open={open} onOpenChange={setOpen}>
<PopoverTrigger asChild>
<button
type="button"
className="input col-span-5 text-left"
style={{ color: 'inherit' }}
>
<CommandEmpty>No Agent found.</CommandEmpty>
<CommandGroup>
{customers.map((customer) => (
<CommandItem
key={customer.id}
value={customer.username}
onSelect={() => {
setFormField({
...formField,
agent: customer.id
});
setOpen(false);
}}
>
{customer.username}
</CommandItem>
))}
</CommandGroup>
</CommandList>
</Command>
</PopoverContent>
</Popover>
{customers.find((customer) => customer.id === formField.agent)
?.username || 'Select Agent'}
</button>
</PopoverTrigger>
<PopoverContent className="w-[400px] p-0">
<Command>
<CommandInput placeholder="Search Agent..." />
<CommandList
className="max-h-[300px] overflow-y-auto"
style={{ touchAction: 'pan-y' }}
onWheel={(e) => {
e.currentTarget.scrollTop += e.deltaY;
}}
>
<CommandEmpty>No Agent found.</CommandEmpty>
<CommandGroup>
{customers.map((customer) => (
<CommandItem
key={customer.id}
value={customer.username}
onSelect={() => {
setFormField({
...formField,
agent: customer.id
});
setOpen(false);
}}
>
{customer.username}
</CommandItem>
))}
</CommandGroup>
</CommandList>
</Command>
</PopoverContent>
</Popover>
</div>
</div>
</div>
) : (
<div className="w-full">
<div className="flex items-baseline flex-wrap lg:flex-nowrap gap-2.5">
<label className="form-label flex items-center gap-1 max-w-56">
Agent Name
</label>
<Input type="text" placeholder="Type Agent Only" readOnly className='cursor-not-allowed' />
</div>
</div>
)}
<div className="flex justify-end gap-5">
<Button type="button" variant="outline" onClick={resetForm}>

129
src/pages/master/provider/blocks/EditDialog.tsx
View File

@ -51,16 +51,27 @@ const EditDialog = () => {
show: false,
message: ''
});
const initialState = {
const initialState: {
name: string;
description: string;
type: string;
status: string;
transaction_type: string;
agent: string | null;
updated_by: string;
updated_at: string;
} = {
name: '',
description: '',
type: '',
status: '',
transaction_type: '',
agent: '',
agent: null,
updated_by: '',
updated_at: ''
};
const [formField, setFormField] = useState(initialState);
const [transactions, setTransactions] = useState<TransactionProps[]>([]);
const [customers, setCustomers] = useState<CustomerProps[]>([]);
@ -145,7 +156,7 @@ const EditDialog = () => {
type: response?.data.type,
status: response?.data.status,
transaction_type: response?.data.transaction_type.id,
agent: response?.data.agent?.id || ''
agent: response?.data.agent?.id || null
}));
}
}, []);
@ -158,8 +169,7 @@ const EditDialog = () => {
formField.description.trim() === '' ||
formField.type.trim() === '' ||
formField.status.trim() === '' ||
formField.transaction_type.trim() === '' ||
formField.agent.trim() === ''
formField.transaction_type.trim() === ''
) {
setAlert({ show: true, message: 'Please fill in all required fields.' });
return;
@ -257,7 +267,7 @@ const EditDialog = () => {
<SelectValue placeholder="Select Type" />
</SelectTrigger>
<SelectContent>
<SelectItem value="h2h">H2H</SelectItem>
<SelectItem value="h2h">Host to Host</SelectItem>
<SelectItem value="agent">Agent</SelectItem>
</SelectContent>
</Select>
@ -309,56 +319,67 @@ const EditDialog = () => {
</div>
</div>
<div className="w-full">
<div className="flex items-baseline flex-wrap lg:flex-nowrap gap-2.5">
<label className="form-label flex items-center gap-1 max-w-56">
Agent Name<span className="text-red-500">*</span>
</label>
<Popover open={open} onOpenChange={setOpen}>
<PopoverTrigger asChild>
<button
type="button"
className="input col-span-5 text-left"
style={{ color: 'inherit' }}
>
{customers.find((customer) => customer.id === formField.agent)
?.fullname || 'Select Agent'}
</button>
</PopoverTrigger>
<PopoverContent className="w-[400px] p-0">
<Command>
<CommandInput placeholder="Search Agent..." />
<CommandList
className="max-h-[300px] overflow-y-auto"
style={{ touchAction: 'pan-y' }}
onWheel={(e) => {
e.currentTarget.scrollTop += e.deltaY;
}}
{formField.type === 'agent' ? (
<div className="w-full">
<div className="flex items-baseline flex-wrap lg:flex-nowrap gap-2.5">
<label className="form-label flex items-center gap-1 max-w-56">
Agent Name<span className="text-red-500">*</span>
</label>
<Popover open={open} onOpenChange={setOpen}>
<PopoverTrigger asChild>
<button
type="button"
className="input col-span-5 text-left"
style={{ color: 'inherit' }}
>
<CommandEmpty>No Agent found.</CommandEmpty>
<CommandGroup>
{customers.map((customer) => (
<CommandItem
key={customer.id}
value={customer.username}
onSelect={() => {
setFormField({
...formField,
agent: customer.id
});
setOpen(false);
}}
>
{customer.fullname}
</CommandItem>
))}
</CommandGroup>
</CommandList>
</Command>
</PopoverContent>
</Popover>
{customers.find((customer) => customer.id === formField.agent)
?.username || 'Select Agent'}
</button>
</PopoverTrigger>
<PopoverContent className="w-[400px] p-0">
<Command>
<CommandInput placeholder="Search Agent..." />
<CommandList
className="max-h-[300px] overflow-y-auto"
style={{ touchAction: 'pan-y' }}
onWheel={(e) => {
e.currentTarget.scrollTop += e.deltaY;
}}
>
<CommandEmpty>No Agent found.</CommandEmpty>
<CommandGroup>
{customers.map((customer) => (
<CommandItem
key={customer.id}
value={customer.username}
onSelect={() => {
setFormField({
...formField,
agent: customer.id
});
setOpen(false);
}}
>
{customer.username}
</CommandItem>
))}
</CommandGroup>
</CommandList>
</Command>
</PopoverContent>
</Popover>
</div>
</div>
</div>
) : (
<div className="w-full">
<div className="flex items-baseline flex-wrap lg:flex-nowrap gap-2.5">
<label className="form-label flex items-center gap-1 max-w-56">
Agent Name
</label>
<Input type="text" placeholder="Type Agent Only" readOnly className='cursor-not-allowed' />
</div>
</div>
)}
<div className="flex justify-end">
<Button variant="default">Save Changes</Button>

37
src/pages/master/reward/Reward.tsx
View File

@ -1,37 +0,0 @@
import AddDialog from './blocks/AddDialog';
import EditDialog from './blocks/EditDialog';
import DeleteDialog from './blocks/DeleteDialog';
import { ManageRewardContextProvider } from './hooks/ManageRewardContext';
import { Container, DataGridInner } from '@/components';
import { Breadcrumbs, Link } from '@mui/material';
const RewardMaster = () => {
return (
<ManageRewardContextProvider>
<Container>
<h1 className="text-xl font-medium leading-none text-gray-900 mb-3">Manage Reward</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">Manage Reward</span>
</Link>
</Breadcrumbs>
<div className="grid gap-5 lg:gap-7.5">
<DataGridInner />
</div>
<AddDialog />
<EditDialog />
<DeleteDialog />
</Container>
</ManageRewardContextProvider>
);
};
export default RewardMaster;

43
src/pages/master/reward/RewardMaster.tsx Normal file
View File

@ -0,0 +1,43 @@
import AddDialog from './blocks/AddDialog';
import EditDialog from './blocks/EditDialog';
import DeleteDialog from './blocks/DeleteDialog';
import { ManageRewardContextProvider } from './hooks/ManageRewardContext';
import { Container, DataGridInner } from '@/components';
import { Breadcrumbs, Link } from '@mui/material';
import { Helmet } from 'react-helmet';
const RewardMaster = () => {
return (
<>
<Helmet>
<title>TPAY | Manage Reward</title>
</Helmet>
<ManageRewardContextProvider>
<Container>
<h1 className="text-xl font-medium leading-none text-gray-900 mb-3">Reward</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">Manage Reward</span>
</Link>
</Breadcrumbs>
<div className="grid gap-5 lg:gap-7.5">
<DataGridInner />
</div>
<AddDialog />
<EditDialog />
<DeleteDialog />
</Container>
</ManageRewardContextProvider>
</>
);
};
export default RewardMaster;

37
src/pages/master/reward/blocks/AddDialog.tsx
View File

@ -55,6 +55,15 @@ const AddDialog = () => {
setAlert({ show: false, message: '' });
};
const RewardType = {
'Daily Check in': 'D',
Referal: 'R',
'Level Pro': 'P',
'Level Prioritas': 'L'
} as const;
type RewardTypeValue = (typeof RewardType)[keyof typeof RewardType];
const doCreateReward = useCallback(
async (e: React.FormEvent<HTMLFormElement>) => {
e.preventDefault();
@ -140,15 +149,25 @@ const AddDialog = () => {
Type<span className="text-red-500">*</span>
</label>
<Input
className="input col-span-6"
type="text"
autoComplete="off"
value={formField.type}
onChange={({ target }) =>
setFormField((prev) => ({ ...prev, type: target.value }))
}
/>
<div className="col-span-6">
<Select
value={formField.type}
onValueChange={(value) => setFormField((prev) => ({ ...prev, type: value }))}
>
<SelectTrigger className="w-full">
<SelectValue placeholder="Select Type" />
</SelectTrigger>
<SelectContent>
{Object.entries(RewardType).map(
([label, value]: [string, RewardTypeValue]) => (
<SelectItem key={value} value={value}>
{label}
</SelectItem>
)
)}
</SelectContent>
</Select>
</div>
</div>
<div className="grid grid-cols-8 gap-2 w-full items-center">
<label className="form-label flex items-center gap-1 col-span-2">

32
src/pages/master/reward/blocks/EditDialog.tsx
View File

@ -55,6 +55,13 @@ const EditDialog = () => {
setAlert({ show: false, message: '' });
};
const RewardType = {
'Daily Check in': 'D',
Referal: 'R'
} as const;
type RewardTypeValue = (typeof RewardType)[keyof typeof RewardType];
const doUpdateReward = useCallback(
async (e: React.FormEvent<HTMLFormElement>) => {
e.preventDefault();
@ -161,12 +168,25 @@ const EditDialog = () => {
Type<span className="text-red-500">*</span>
</label>
<Input
className="input col-span-6"
type="text"
value={formField.type}
onChange={(e) => setFormField({ ...formField, type: e.target.value })}
/>
<div className="col-span-6">
<Select
value={formField.type}
onValueChange={(value) => setFormField((prev) => ({ ...prev, type: value }))}
>
<SelectTrigger className="w-full">
<SelectValue placeholder="Select Type" />
</SelectTrigger>
<SelectContent>
{Object.entries(RewardType).map(
([label, value]: [string, RewardTypeValue]) => (
<SelectItem key={value} value={value}>
{label}
</SelectItem>
)
)}
</SelectContent>
</Select>
</div>
</div>
<div className="grid grid-cols-8 gap-2 w-full items-center">
<label className="form-label flex items-center gap-1 col-span-2">

2
src/pages/master/reward/hooks/ManageRewardContext.tsx
View File

@ -169,7 +169,7 @@ const ManageRewardContextProvider = ({ children }: { children: React.ReactNode }
order_direction: sorting[0].desc == false ? 'ASC' : 'DESC',
filter: JSON.stringify(filter)
});
// console.log('API Response:', response?.data.list); // Cek data dari API
// console.log('API Response:', response?.data.list);
// console.log('reward list :', response);
setRewards(response?.data.list);
return { data: response?.data.list, totalCount: response?.data.total_count };

12
src/pages/master/wallet/blocks/AddDialog.tsx
View File

@ -55,13 +55,13 @@ const AddDialog = () => {
description: string;
status: string;
group: string[];
currency_id: string;
id_currency: string;
} = {
name: '',
description: '',
status: '',
group: [],
currency_id: ''
id_currency: ''
};
const [formField, setFormField] = useState(initialState);
const [currencies, setCurrencies] = useState<CurrencyProps[]>([]);
@ -126,13 +126,13 @@ const AddDialog = () => {
formField.description.trim() === '' ||
formField.status.trim() === '' ||
formField.group.length === 0 ||
formField.currency_id.trim() === ''
formField.id_currency.trim() === ''
) {
setAlert({ show: true, message: 'Please fill in all required fields.' });
return;
}
console.log(formField);
// console.log(formField);
doCreateWallet(e);
setAlert({ show: false, message: '' });
};
@ -251,8 +251,8 @@ const AddDialog = () => {
Currency<span className="text-red-500">*</span>
</label>
<Select
value={formField.currency_id}
onValueChange={(value) => setFormField({ ...formField, currency_id: value })}
value={formField.id_currency}
onValueChange={(value) => setFormField({ ...formField, id_currency: value })}
>
<SelectTrigger>
<SelectValue placeholder="Select Currency Type" />

25
src/pages/master/wallet/blocks/EditDialog.tsx
View File

@ -53,11 +53,13 @@ const EditDialog = () => {
name: string;
description: string;
status: string;
currency_id: string;
group: string[];
} = {
name: '',
description: '',
status: '',
currency_id: '',
group: []
};
const [formField, setFormField] = useState(initialState);
@ -74,7 +76,7 @@ const EditDialog = () => {
// e.preventDefault();
const response = await PutData(
`${API_URL_MASTER_DATA}/wallet/update/${selectedWallet?.Wallet_id}`,
`${API_URL_MASTER_DATA}/wallet/update/${selectedWallet?.id}`,
payload
);
@ -85,7 +87,7 @@ const EditDialog = () => {
const createActivity = {
module: 'Manage Wallet',
description: `Edit Wallet => ${selectedWallet?.Wallet_id} - ${selectedWallet?.Wallet_name}`,
description: `Edit Wallet => ${selectedWallet?.id} - ${selectedWallet?.name}`,
action: 'U'
};
@ -164,6 +166,8 @@ const EditDialog = () => {
}
};
const selectedCurrency = currencies.find((currency) => currency.ID === formField.currency_id);
const selectedGroupNames = groups
.filter((g) => formField.group.includes(g.id))
.map((g) => g.name)
@ -184,7 +188,7 @@ const EditDialog = () => {
// currency_id: selectedWallet?.Wallet_currency_id,
// group: selectedWallet?.Wallet_group
// }));
doFetchData(selectedWallet?.Wallet_id);
doFetchData(selectedWallet?.id);
}
}, [selectedWallet]);
@ -257,6 +261,21 @@ const EditDialog = () => {
</div>
</div>
<div className="w-full">
<div className="flex items-baseline flex-wrap lg:flex-nowrap gap-2.5">
<label className="form-label flex items-center gap-1 max-w-56">Currency</label>
<div className="relative w-full">
<Input
type="text"
placeholder="Empty"
value={selectedCurrency?.name}
readOnly
className="bg-gray-100 border border-dashed border-gray-400 text-gray-600 cursor-not-allowed"
/>
</div>
</div>
</div>
<div className="w-full">
<div className="flex items-baseline flex-wrap lg:flex-nowrap gap-2.5">
<label className="form-label flex items-center gap-1 max-w-56">Groups</label>

22
src/pages/master/wallet/hooks/ManageWalletContext.tsx
View File

@ -7,12 +7,12 @@ import { Toaster } from 'sonner';
import ListToolbar from '../blocks/ListToolbar';
interface WalletProps {
Wallet_id: string;
Wallet_name: string;
Wallet_status: string;
Wallet_description: string;
Wallet_group: string[];
Wallet_currency_id: string;
id: string;
name: string;
status: string;
description: string;
group: string[];
currency_id: string;
}
interface ContextProps {
@ -73,7 +73,7 @@ const ManageWalletContextProvider = ({ children }: { children: React.ReactNode }
const columns = useMemo<ColumnDef<any>[]>(
() => [
{
accessorFn: (row) => row.Wallet_name,
accessorFn: (row) => row.name,
id: 'name',
header: ({ column }) => <DataGridColumnHeader title="Name" column={column} />,
enableSorting: true,
@ -83,7 +83,7 @@ const ManageWalletContextProvider = ({ children }: { children: React.ReactNode }
}
},
{
accessorFn: (row) => row.Wallet_description,
accessorFn: (row) => row.description,
id: 'description',
header: ({ column }) => <DataGridColumnHeader title="Description" column={column} />,
enableSorting: true,
@ -93,13 +93,13 @@ const ManageWalletContextProvider = ({ children }: { children: React.ReactNode }
}
},
{
accessorFn: (row) => row.Wallet_status,
accessorFn: (row) => row.status,
id: 'status',
header: ({ column }) => <DataGridColumnHeader title="Status" column={column} />,
enableSorting: true,
enableHiding: false,
cell: ({ row }) => {
const isActive = row.original.Wallet_status === 'Y';
const isActive = row.original.status === 'Y';
return (
<span
@ -183,7 +183,7 @@ const ManageWalletContextProvider = ({ children }: { children: React.ReactNode }
pagination={{ size: 25 }}
toolbar={<ListToolbar />}
layout={{ card: true }}
sorting={[{ id: 'created_at', desc: true }]}
sorting={[{ id: 'wallets.created_at', desc: true }]}
serverSide={true}
onFetchData={({ pageIndex, pageSize, sorting, columnFilters }) =>
getWalletLists(pageIndex, pageSize, sorting, columnFilters)

74
src/pages/master/walletRule/blocks/AddDialog.tsx
View File

@ -40,14 +40,24 @@ interface GroupProps {
status: string;
}
interface WalletProps {
ID: string;
interface WalletGroupProps {
id: string;
name: string;
id_currency: string;
description: string;
status: string;
}
interface WalletProps {
id: string;
name: string;
id_currency: string;
status: string;
group: WalletGroupProps[];
}
const API_URL_WALLET = apiConfig.service_wallet;
const API_URL_MASTERDATA = apiConfig.service_master_data;
const AddDialog = () => {
const { showAddDialog, handleAddDialog, selectedWalletRule } = useManageWalletRuleContext();
const { reload } = useDataGrid();
@ -77,7 +87,6 @@ const AddDialog = () => {
status: ''
};
const [formField, setFormField] = useState(initialState);
const [groups, setGroups] = useState<GroupProps[]>([]);
const [wallets, setWallets] = useState<WalletProps[]>([]);
const resetForm = () => {
@ -114,7 +123,16 @@ const AddDialog = () => {
const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
e.preventDefault();
if (formField.id_group.trim() === '' || formField.status.trim() === '') {
if (
formField.id_group.trim() === '' ||
formField.status.trim() === '' ||
formField.id_wallet.trim() === '' ||
formField.max_transaction_per_day === null ||
formField.balance_minimum === null ||
formField.balance_maximum === null ||
formField.credit_limit === null ||
formField.monthly_limit === null
) {
setAlert({ show: true, message: 'Please fill in all required fields.' });
return;
}
@ -124,26 +142,9 @@ const AddDialog = () => {
setAlert({ show: false, message: '' });
};
const getGroupLists = async (sorting: any) => {
try {
const response = await GetData(`${API_URL_WALLET}/dashboard/group`, {
limit: 100,
page: 1,
with_deleted: false,
order_field: sorting[0].id,
order_direction: sorting[0].desc == false ? 'ASC' : 'DESC'
});
// console.log('GROUPS: ', response?.data);
setGroups(response?.data.list);
} catch (error) {
console.error('Error fetching groups', error);
}
};
const getWalletLists = async (sorting: any) => {
try {
const response = await GetData(`${API_URL_WALLET}/dashboard/wallet`, {
const response = await GetData(`${API_URL_MASTERDATA}/wallet/list`, {
limit: 100,
page: 1,
with_deleted: false,
@ -158,9 +159,11 @@ const AddDialog = () => {
}
};
const selectedWallet = wallets.find((wallet) => wallet.id === formField.id_wallet);
const filteredGroups = selectedWallet ? selectedWallet.group : [];
useEffect(() => {
getWalletLists([{ id: 'name', desc: false }]);
getGroupLists([{ id: 'name', desc: false }]);
getWalletLists([{ id: 'wallets.name', desc: false }]);
}, []);
useEffect(() => {
@ -193,14 +196,16 @@ const AddDialog = () => {
</label>
<Select
value={formField.id_wallet}
onValueChange={(value) => setFormField({ ...formField, id_wallet: value })}
onValueChange={(value) =>
setFormField({ ...formField, id_wallet: value, id_group: '' })
}
>
<SelectTrigger>
<SelectValue placeholder="Select Wallet Type" />
</SelectTrigger>
<SelectContent>
{wallets.map((wallet) => (
<SelectItem key={wallet.ID} value={wallet.ID}>
<SelectItem key={wallet.id} value={wallet.id}>
{wallet.name}
</SelectItem>
))}
@ -217,16 +222,21 @@ const AddDialog = () => {
<Select
value={formField.id_group}
onValueChange={(value) => setFormField({ ...formField, id_group: value })}
disabled={filteredGroups.length === 0}
>
<SelectTrigger>
<SelectValue placeholder="Select Group Type" />
</SelectTrigger>
<SelectContent>
{groups.map((group) => (
<SelectItem key={group.ID} value={group.ID}>
{group.name}
</SelectItem>
))}
{filteredGroups.length > 0 ? (
filteredGroups.map((group) => (
<SelectItem key={group.id} value={group.id}>
{group.name}
</SelectItem>
))
) : (
<SelectItem value="empty">No groups available</SelectItem>
)}
</SelectContent>
</Select>
</div>

22
src/pages/master/walletRule/hooks/ManageWalletRuleContext.tsx
View File

@ -81,6 +81,26 @@ const ManageWalletRuleContextProvider = ({ children }: { children: React.ReactNo
const columns = useMemo<ColumnDef<any>[]>(
() => [
{
accessorFn: (row) => row.wallet.name,
id: 'wallet_name',
header: ({ column }) => <DataGridColumnHeader title="Wallet Name" column={column} />,
enableSorting: true,
enableHiding: false,
meta: {
headerClassName: 'w-[250px]'
}
},
{
accessorFn: (row) => row.group.name,
id: 'group_name',
header: ({ column }) => <DataGridColumnHeader title="Group Name" column={column} />,
enableSorting: true,
enableHiding: false,
meta: {
headerClassName: 'w-[250px]'
}
},
{
accessorFn: (row) => row.balance_minimum,
id: 'balance_minimum',
@ -227,7 +247,7 @@ const ManageWalletRuleContextProvider = ({ children }: { children: React.ReactNo
<Toaster expand visibleToasts={9} duration={3000} />
<DataGridProvider
columns={columns}
pagination={{ size: 5 }}
pagination={{ size: 10 }}
toolbar={<ListToolbar />}
layout={{ card: true }}
sorting={[{ id: 'id', desc: false }]}

50
src/pages/settings/user/log-activity/LogActivityPage.tsx
View File

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

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

@ -4,36 +4,42 @@ import { ManageUserContextProvider } 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 ManageUserPage() {
return (
<ManageUserContextProvider>
<Container>
<h1 className="text-xl font-medium leading-none text-gray-900 mb-3">Manage User</h1>
<Breadcrumbs sx={{ mb: 2 }}>
<Link underline="none" color="inherit" href="/">
<span className="text-sm hover:underline">Dashboard</span>
</Link>
<>
<Helmet>
<title>TPAY | Manage User</title>
</Helmet>
<ManageUserContextProvider>
<Container>
<h1 className="text-xl font-medium leading-none text-gray-900 mb-3">Manage User</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 User</span>
</Link>
</Breadcrumbs>
<div className="grid gap-5 lg:gap-7.5">
<DataGridInner />
</div>
<EditDialog />
<AddDialog />
<DeleteDialog />
</Container>
</ManageUserContextProvider>
<Link underline="none" color="inherit">
<span className="text-sm">Manage User</span>
</Link>
</Breadcrumbs>
<div className="grid gap-5 lg:gap-7.5">
<DataGridInner />
</div>
<EditDialog />
<AddDialog />
<DeleteDialog />
</Container>
</ManageUserContextProvider>
</>
);
}

144
src/pages/settings/user/manage-user/blocks/AddDialog.tsx
View File

@ -25,6 +25,13 @@ import { useCallApi } from '@/hooks';
import { doSaveLogActivity } from '@/actions/GlobalActions';
import clsx from 'clsx';
interface RoleListProps {
id: string;
name: string;
roles: string;
status: string;
}
interface CreateUserParams {
email: string;
username: string;
@ -40,9 +47,10 @@ type PasswordType = 'password' | 'retype_password';
const AddDialog = () => {
const parentRef = useRef<any | null>(null);
const { showAddDialog, handleAddDialog, roles } = useUserContext();
const { showAddDialog, handleAddDialog } = useUserContext();
const { reload } = useDataGrid();
const { PostData, PutData } = useCallApi();
const { PostData, GetData } = useCallApi();
const [roles, setRoles] = useState<RoleListProps[]>([]);
const [alert, setAlert] = useState({
show: false,
message: ''
@ -57,10 +65,6 @@ const AddDialog = () => {
status: ''
};
const [formField, setFormField] = useState(initialState);
const resetForm = () => {
setFormField(initialState);
setAlert({ show: false, message: '' });
};
const [showPassword, setShowPassword] = useState({
password: false,
retype_password: false
@ -97,6 +101,87 @@ const AddDialog = () => {
};
};
const resetForm = () => {
setFormField(initialState);
setAlert({ show: false, message: '' });
};
/* actions */
const doCreateUser = useCallback(
async (e: React.FormEvent<HTMLFormElement>) => {
e.preventDefault();
const response = await PostData(`${API_URL}/user/create`, formField);
if (response?.status) {
handleAddDialog(false);
resetForm();
reload();
const createActivity = {
module: 'Manage User',
description: `Create New User => ${formField.username}`,
action: 'C'
};
doSaveLogActivity(createActivity);
toast.success('Success Create User');
} else {
toast.error('Failed to create user');
setAlert({ show: true, message: 'Failed to create user. Please try again.' });
}
},
[formField]
);
const fetchRoles = useCallback(async () => {
const params = {
limit: 100,
page: 1,
with_deleted: false,
order_field: 'name',
order_direction: 'ASC',
filter: JSON.stringify({
status: 'Y'
})
};
const response = await GetData(`${API_URL}/user_role/list`, params);
// console.log('ini data:', response);
if (response?.status) {
const roleList = response.data?.list || [];
setRoles(roleList);
} else {
setRoles(() => []);
}
// console.log('ini data user_role:', response?.data);
}, []);
useEffect(() => {
fetchRoles();
}, [fetchRoles]);
const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
e.preventDefault();
console.log('Form data before submit:', formField);
if (
formField.email.trim() === '' ||
formField.username.trim() === '' ||
formField.password.trim() === '' ||
formField.retype_password.trim() === '' ||
formField.name.trim() === '' ||
formField.id_role.trim() === '' ||
formField.status.trim() === ''
) {
setAlert({ show: true, message: 'Please fill name field.' });
return;
}
doCreateUser(e);
// console.log(formField);
setAlert({ show: false, message: '' });
};
useEffect(() => {
const validation = validatePassword(formField.password, formField.retype_password);
setMessagePassword(validation.isValid);
@ -111,38 +196,6 @@ const AddDialog = () => {
}
}, [showAddDialog]);
/* actions */
const doCreateUser = useCallback(
async (e: React.FormEvent<HTMLFormElement>) => {
e.preventDefault();
const response = await PostData(`${API_URL}/user/create`, {
...formField,
id_role: undefined
});
if (response?.status) {
const responseUserAddRole = await PutData(
`${API_URL}/user/add_role/${response?.message?.id}/${formField.id_role}`,
{}
);
resetForm();
handleAddDialog(false);
toast.success('Success Create User');
reload();
const createActivity = {
module: 'Manage User',
description: `Create New User => ${formField.username}`,
action: 'C'
};
doSaveLogActivity(createActivity);
} else {
setAlert((prev) => ({ ...prev, show: true, message: response?.message }));
}
},
[formField]
);
const togglePassword = useCallback((event: MouseEvent<HTMLButtonElement>, key: string) => {
event.preventDefault();
setShowPassword((prev) => ({ ...prev, [key]: !prev[key as PasswordType] }));
@ -177,7 +230,7 @@ const AddDialog = () => {
<h3>{alert.message}</h3>
</Alert>
)}
<form action="" onSubmit={doCreateUser}>
<form action="" onSubmit={handleSubmit}>
<div className="card-body grid gap-5 p-0">
<div className="w-full">
<div className="flex items-baseline flex-wrap lg:flex-nowrap gap-2.5">
@ -231,7 +284,12 @@ const AddDialog = () => {
<div className="grow">
<Select
value={formField.id_role}
onValueChange={(id_role) => setFormField((prev) => ({ ...prev, id_role }))}
onValueChange={(id_role) => {
setTimeout(() => {
setFormField((prev) => ({ ...prev, id_role }));
}, 0);
// console.log('Role selected:', value);`
}}
>
<SelectTrigger>
<SelectValue placeholder="Select" />
@ -254,7 +312,11 @@ const AddDialog = () => {
<div className="grow">
<Select
value={formField.status}
onValueChange={(status) => setFormField((prev) => ({ ...prev, status }))}
onValueChange={(status) => {
setTimeout(() => {
setFormField((prev) => ({ ...prev, status }));
}, 0);
}}
>
<SelectTrigger>
<SelectValue placeholder="Select" />

13
src/pages/settings/user/manage-user/blocks/DeleteDialog.tsx
View File

@ -1,4 +1,11 @@
import { Dialog, DialogContent, DialogFooter, DialogHeader } from '@/components/ui/dialog';
import {
Dialog,
DialogContent,
DialogFooter,
DialogHeader,
DialogTitle,
DialogDescription
} from '@/components/ui/dialog';
import { useUserContext } from '../hooks';
import { Button } from '@/components/ui/button';
import { Alert, useDataGrid } from '@/components';
@ -42,12 +49,14 @@ const DeleteDialog = () => {
} else {
setAlert((prev) => ({ ...prev, show: true, message: response?.message }));
}
}, [selectedUser, enforce]);
}, [selectedUser, DeleteData, handleDeleteDialog, reload, enforce]);
return (
<Dialog open={showDeleteDialog} onOpenChange={(open) => handleDeleteDialog(open, null)}>
<DialogContent className="container-fixed max-w-md flex flex-col p-5 overflow-hidden [&>button]:hidden">
<DialogHeader className="p-0 border-0 block">
<DialogTitle></DialogTitle>
<DialogDescription></DialogDescription>
<Alert variant="warning">
<h3 className="text-lg">Are you sure?</h3>
<span className="text-sm">you will delete this data!</span>

68
src/pages/settings/user/manage-user/blocks/EditDialog.tsx
View File

@ -24,6 +24,12 @@ import { toast } from 'sonner';
import { useCallApi } from '@/hooks';
import { doSaveLogActivity } from '@/actions/GlobalActions';
interface RoleListProps {
id: string;
name: string;
status: string;
}
const API_URL = apiConfig.service_dashboard;
const initialState = {
@ -31,15 +37,15 @@ const initialState = {
username: '',
email: '',
id_role: '',
id_role_old: '',
status: ''
};
const EditDialog = () => {
const parentRef = useRef<any | null>(null);
const { showEditDialog, selectedUser, handleEditDialog, roles } = useUserContext();
const { showEditDialog, selectedUser, handleEditDialog } = useUserContext();
const { reload } = useDataGrid();
const { GetData, PutData } = useCallApi();
const [roles, setRoles] = useState<RoleListProps[]>([]);
const [alert, setAlert] = useState({
show: false,
message: ''
@ -53,17 +59,11 @@ const EditDialog = () => {
};
/* actions */
const doResetForm = () => {
setAlert({ show: false, message: '' });
setFormField(initialState);
};
const doUpdateUser = useCallback(
async (e: React.FormEvent<HTMLFormElement>) => {
e.preventDefault();
const response = await PutData(`${API_URL}/user/update/${selectedUser}`, {
...formField,
id_role_old: undefined
...formField
});
if (formField.name.trim() === '') {
@ -90,18 +90,36 @@ const EditDialog = () => {
[selectedUser, formField]
);
const doFetchUserRole = useCallback(async (sorting: any) => {
try {
sorting = sorting.length == 0 ? [{ id: 'name', desc: false }] : sorting;
const response = await GetData(`${API_URL}/user_role/list`, {
limit: 100,
page: 1,
with_deleted: false,
order_field: sorting[0].id,
order_direction: sorting[0].desc == false ? 'ASC' : 'DESC'
});
// console.log('User ID_ROLE:', response?.data.id_role);
// console.log('Role: ', response?.data.list);
setRoles(response?.data.list);
} catch (error) {
console.error('Error fetching role', error);
}
}, []);
const doFetchUserData = useCallback(async (id: string) => {
const response = await GetData(`${API_URL}/user/detail/${id}`, { id });
if (response?.status) {
let id_role = response.data.role.id || '';
// console.log('User detail response:', response);
if (response?.status) {
setFormField((prev) => ({
...prev,
name: response.data.name,
username: response.data.username,
email: response.data.email,
id_role: id_role,
id_role_old: id_role,
id_role: response.data.idRole,
status: response.data.status
}));
} else {
@ -111,10 +129,10 @@ const EditDialog = () => {
username: '',
email: '',
id_role: '0',
id_role_old: '',
status: ''
}));
}
// console.log('Fetched ID Role:', response?.data.id_role);
}, []);
useEffect(() => {
@ -129,6 +147,23 @@ const EditDialog = () => {
}
}, [showEditDialog]);
useEffect(() => {
const fetchAllData = async () => {
await doFetchUserRole([{ id: 'name', desc: false }]);
if (selectedUser) {
await doFetchUserData(selectedUser);
}
};
fetchAllData();
}, [selectedUser]);
// console.log('ini role: ', roles);
// useEffect(() => {
// console.log('Selected User ID Role:', formField.id_role);
// // console.log('Available Roles:', roles);
// }, [formField.id_role, roles]);
return (
<Dialog open={showEditDialog} onOpenChange={(open) => handleEditDialog(open, null)}>
<DialogContent className="container-fixed max-w-[768px] flex flex-col p-5 overflow-hidden [&>button]:hidden">
@ -206,7 +241,10 @@ const EditDialog = () => {
<div className="grow">
<Select
value={formField.id_role}
onValueChange={(id_role) => setFormField((prev) => ({ ...prev, id_role }))}
onValueChange={(id_role) => {
// console.log('Role changed to:', id_role);
setFormField((prev) => ({ ...prev, id_role }));
}}
>
<SelectTrigger>
<SelectValue placeholder="Select" />

37
src/pages/settings/user/manage-user/hooks/ManageUserContext.tsx
View File

@ -17,7 +17,6 @@ interface ContextProps {
showDeleteDialog: boolean;
handleDeleteDialog: (show: boolean, selected_user: string | null) => void;
selectedUser: string | null;
roles: RoleListProps[];
}
interface SelectedUser {
@ -30,12 +29,6 @@ interface SelectedUser {
check_new_password: string;
}
interface RoleListProps {
id: string;
name: string;
status: string;
}
const initialProps: ContextProps = {
showSearchDialog: false,
handleSearchDialog: (show: boolean) => {},
@ -45,8 +38,7 @@ const initialProps: ContextProps = {
handleAddDialog: () => {},
showDeleteDialog: false,
handleDeleteDialog: () => {},
selectedUser: null,
roles: []
selectedUser: null
};
const ManageUserContext = createContext<ContextProps>(initialProps);
@ -60,7 +52,6 @@ const ManageUserContextProvider = ({ children }: { children: React.ReactNode })
const [showAddDialog, setShowAddDialog] = useState(false);
const [showDeleteDialog, setShowDeleteDialog] = useState(false);
const [selectedUser, setSelectedUser] = useState<string | null>(null);
const [roles, setRoles] = useState<RoleListProps[]>([]);
const { GetData } = useCallApi();
/* action */
@ -193,7 +184,7 @@ const ManageUserContextProvider = ({ children }: { children: React.ReactNode })
const response = await GetData(`${API_URL}/user/list`, {
limit: limit,
page: page + 1,
with_deleted: true,
with_deleted: false,
order_field: sorting[0].id,
order_direction: sorting[0].desc == false ? 'ASC' : 'DESC',
filter: JSON.stringify(filter)
@ -203,29 +194,6 @@ const ManageUserContextProvider = ({ children }: { children: React.ReactNode })
return { data: response?.data.list, totalCount: response?.data.total_count };
};
const fetchRoles = useCallback(async () => {
const params = {
limit: 100,
page: 1,
with_deleted: false,
order_field: 'name',
order_direction: 'ASC',
filter: JSON.stringify({
status: 'Y'
})
};
const response = await GetData(`${API_URL}/user_role/list`, params);
if (response?.status) {
setRoles(() => [...response.data.list]);
} else {
setRoles(() => []);
}
}, []);
useEffect(() => {
fetchRoles();
}, [fetchRoles]);
return (
<ManageUserContext.Provider
value={{
@ -236,7 +204,6 @@ const ManageUserContextProvider = ({ children }: { children: React.ReactNode })
selectedUser,
showAddDialog,
handleAddDialog,
roles,
showDeleteDialog,
handleDeleteDialog
}}

81
src/pages/transaction/approval-transaction/blocks/ApprovalDialog.tsx
View File

@ -1,14 +1,13 @@
import { useTransactionContext } from '../hooks/useApprovalTransactionContext';
import { useCallApi } from '@/hooks';
import { apiConfig } from '@/config/api.config';
import { useCallback, useEffect, useRef, useState } from 'react';
import { useCallback, useEffect, useState } from 'react';
import {
Dialog,
DialogBody,
DialogContent,
DialogDescription,
DialogHeader,
DialogTitle
DialogTitle,
} from '@/components/ui/dialog';
import { Button } from '@/components/ui/button';
import {
@ -16,9 +15,9 @@ import {
SelectContent,
SelectItem,
SelectTrigger,
SelectValue
SelectValue,
} from '@/components/ui/select';
import { Alert, KeenIcon, useDataGrid } from '@/components';
import { Alert, useDataGrid } from '@/components';
import { doSaveLogActivity } from '@/actions/GlobalActions';
import { toast } from 'sonner';
import { Input } from '@/components/ui/input';
@ -27,11 +26,11 @@ const API_URL = apiConfig.transaction;
const ApprovalDialog = () => {
const { GetData, PostData } = useCallApi();
// const { reload } = useDataGrid();
const {
showApprovalDialog,
setShowApprovalDialog,
selectedTransactionIdForApproval
selectedTransactionIdForApproval,
} = useTransactionContext();
const [transactionDetails, setTransactionDetails] = useState<any>(null);
@ -39,12 +38,12 @@ const ApprovalDialog = () => {
const [formField, setFormField] = useState({
transaction_code: '',
status: '',
notes: ''
notes: '',
});
const [alert, setAlert] = useState({
show: false,
message: ''
message: '',
});
const doApproval = useCallback(
@ -60,39 +59,51 @@ const ApprovalDialog = () => {
toast.error('Please select a status.');
return;
}
const response = await PostData(`${API_URL}/transaction/set-approval`, {
transaction_code: transactionDetails.id,
id_transaction: transactionDetails.id,
status: formField.status,
notes: formField.notes
notes: formField.notes,
});
if (response?.status) {
setAlert((prev) => ({ ...prev, show: false, message: '' }));
setAlert({ show: false, message: '' });
toast.success('Success Update Position');
const createActivity = {
module: 'Approval Transaction',
description: `Change status approve for transaction => ${transactionDetails.code}`,
action: 'U'
action: 'U',
};
doSaveLogActivity(createActivity);
setShowApprovalDialog(false); // optionally close dialog
setShowApprovalDialog(false);
} else {
setAlert((prev) => ({ ...prev, show: true, message: response?.message }));
setAlert({ show: true, message: response?.message });
}
},
[formField, transactionDetails]
);
useEffect(() => {
if (showApprovalDialog) {
// Reset form fields when dialog opens
setFormField({
transaction_code: '',
status: '',
notes: '',
});
setTransactionDetails(null); // Optional reset
}
}, [showApprovalDialog]);
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);
const response = await GetData(
`${API_URL}/transaction/history/detail/${selectedTransactionIdForApproval}`,
{
id: selectedTransactionIdForApproval,
}
);
setTransactionDetails(response?.data);
} catch (error) {
console.error('Error fetching transaction', error);
@ -105,6 +116,15 @@ const ApprovalDialog = () => {
}
}, [showApprovalDialog, selectedTransactionIdForApproval, GetData]);
// Set formField.transaction_code once details are fetched
useEffect(() => {
if (transactionDetails) {
setFormField((prev) => ({
...prev,
transaction_code: transactionDetails.id ?? '',
}));
}
}, [transactionDetails]);
return (
<Dialog open={showApprovalDialog} onOpenChange={setShowApprovalDialog}>
@ -113,7 +133,7 @@ const ApprovalDialog = () => {
<DialogTitle>Approval Transaction</DialogTitle>
</DialogHeader>
<DialogBody>
<form action="" onSubmit={doApproval}>
<form 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">
@ -122,7 +142,9 @@ const ApprovalDialog = () => {
<div className="grow">
<Select
value={formField.status}
onValueChange={(status) => setFormField((prev) => ({ ...prev, status }))}
onValueChange={(status) =>
setFormField((prev) => ({ ...prev, status }))
}
>
<SelectTrigger>
<SelectValue placeholder="Select" />
@ -138,13 +160,20 @@ const ApprovalDialog = () => {
{formField.status === 'N' && (
<div className="flex items-center flex-wrap gap-2.5 mt-4">
<label className="form-label max-w-56">Notes</label>
<div className="grow">
<textarea
<Input
type="text"
placeholder="Notes"
name="notes"
id="notes"
value={formField.notes}
></textarea>
onChange={(e) =>
setFormField((prev) => ({
...prev,
notes: e.target.value,
}))
}
/>
</div>
</div>
)}

233
src/pages/transaction/approval-transaction/blocks/DetailApprovalTransaction.tsx
View File

@ -66,6 +66,24 @@ const DetailApprovalTransaction = () => {
>
Origin Customer
</button>
<button
className={`py-2 px-4 font-medium text-sm focus:outline-none ${activeTab === 'destinationcustomer' ? 'text-blue-600 border-b-2 border-blue-600' : 'text-gray-500 hover:text-gray-700'}`}
onClick={() => setActiveTab('destinationcustomer')}
>
Destination Customer
</button>
<button
className={`py-2 px-4 font-medium text-sm focus:outline-none ${activeTab === 'originwallet' ? 'text-blue-600 border-b-2 border-blue-600' : 'text-gray-500 hover:text-gray-700'}`}
onClick={() => setActiveTab('originwallet')}
>
Origin Wallet
</button>
<button
className={`py-2 px-4 font-medium text-sm focus:outline-none ${activeTab === 'destinationwallet' ? 'text-blue-600 border-b-2 border-blue-600' : 'text-gray-500 hover:text-gray-700'}`}
onClick={() => setActiveTab('destinationwallet')}
>
Destination Wallet
</button>
<button
className={`py-2 px-4 font-medium text-sm focus:outline-none ${activeTab === 'log' ? 'text-blue-600 border-b-2 border-blue-600' : 'text-gray-500 hover:text-gray-700'}`}
onClick={() => setActiveTab('log')}
@ -119,21 +137,32 @@ const DetailApprovalTransaction = () => {
</div>
<div>
<p className="text-sm text-gray-500">Status</p>
<p className="font-medium">
<div>
{(() => {
let status;
let badgeClass;
if (transactionDetails?.status === 'C') {
status = 'COMPLETE';
badgeClass = 'bg-green-100 text-green-800';
} else if (transactionDetails?.status === 'F') {
status = 'FAILED';
badgeClass = 'bg-red-100 text-red-800';
} else if (transactionDetails?.status === 'O') {
status = 'ON PROCESS';
badgeClass = 'bg-blue-100 text-blue-800';
} else {
status = 'PENDING';
badgeClass = 'bg-gray-100 text-gray-800';
}
return status;
return (
<span className={`px-3 py-1 rounded-full text-xs font-semibold ${badgeClass}`}>
{status}
</span>
);
})()}
</p>
</div>
</div>
<div>
<p className="text-sm text-gray-500">Transaction Type</p>
@ -172,14 +201,7 @@ const DetailApprovalTransaction = () => {
</span>
</h3>
<div className="grid grid-cols-2 gap-4">
<div>
<p className="text-sm text-gray-500">Name</p>
<p className="font-medium">{transactionDetails?.origin_wallet.name}</p>
</div>
<div>
<p className="text-sm text-gray-500">Description</p>
<p className="font-medium">{transactionDetails?.origin_wallet.description}</p>
</div>
</div>
<h3 className="font-semibold flex items-center">
@ -208,8 +230,54 @@ const DetailApprovalTransaction = () => {
</div>
</div>
)}
{activeTab === 'detail' && transactionDetails?.kind === 'P' && (
<div className="space-y-4">
<h3 className="font-semibold flex items-center">
Product Information
<span className="ml-2 bg-blue-100 text-blue-800 text-xs font-semibold mr-2 px-2.5 py-0.5 rounded">
Product Info
</span>
</h3>
<div className="grid grid-cols-2 gap-4">
<div>
<p className="text-sm text-gray-500">Product Name</p>
<p className="font-medium">{transactionDetails?.purchase.product.name}</p>
</div>
<div>
<p className="text-sm text-gray-500">Price Cash</p>
{new Intl.NumberFormat('en-US', { style: 'currency', currency: 'USD' }).format(transactionDetails?.purchase.product.price_cash)}
</div>
<div>
<p className="text-sm text-gray-500">Price Point</p>
<p className="font-medium">{transactionDetails?.purchase.product.price_point}</p>
</div>
<div>
<p className="text-sm text-gray-500">Product Type</p>
<p className="font-medium">{transactionDetails?.purchase.product.type}</p>
</div>
<div>
<p className="text-sm text-gray-500">Provider Name</p>
<p className="font-medium">{transactionDetails?.purchase.product.provider.description}</p>
</div>
<div>
<p className="text-sm text-gray-500">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>
)}
{activeTab === 'detail' && transactionDetails?.kind != 'P' && transactionDetails?.transfer!=null && (
{activeTab === 'detail' && transactionDetails?.kind != 'P' && transactionDetails?.transfer != null && (
<div className="space-y-4">
<h3 className="font-semibold flex items-center">
Transaction Information
@ -291,69 +359,9 @@ const DetailApprovalTransaction = () => {
<p className="font-medium">{transactionDetails?.transfer.destination_iban}</p>
</div>
</div>
<h3 className="font-semibold flex items-center">
Destination Wallet
<span className="ml-2 bg-blue-100 text-blue-800 text-xs font-semibold mr-2 px-2.5 py-0.5 rounded">
Wallet
</span>
</h3>
<div className="grid grid-cols-2 gap-4">
<div>
<p className="text-sm text-gray-500">Name</p>
<p className="font-medium">{transactionDetails?.transfer.destination_wallet.name}</p>
</div>
<div>
<p className="text-sm text-gray-500">Description</p>
<p className="font-medium">{transactionDetails?.transfer.destination_wallet.description}</p>
</div>
</div>
<h3 className="font-semibold flex items-center">
Destination Customer
<span className="ml-2 bg-blue-100 text-blue-800 text-xs font-semibold mr-2 px-2.5 py-0.5 rounded">
Destination Customer
</span>
</h3>
<div className="grid grid-cols-2 gap-4">
<div>
<p className="text-sm text-gray-500">Name</p>
<p className="font-medium">{transactionDetails?.transfer.destination_customer.fullname}</p>
</div>
<div>
<p className="text-sm text-gray-500">MSISDN</p>
<p className="font-medium">{transactionDetails?.transfer.destination_customer.msisdn}</p>
</div>
<div>
<p className="text-sm text-gray-500">Email</p>
<p className="font-medium">{transactionDetails?.transfer.destination_customer.email}</p>
</div>
<div>
<p className="text-sm text-gray-500">MSISDN</p>
<p className="font-medium">{transactionDetails?.transfer.destination_customer.username}</p>
</div>
</div>
<h3 className="font-semibold flex items-center">
Origin Wallet
<span className="ml-2 bg-blue-100 text-blue-800 text-xs font-semibold mr-2 px-2.5 py-0.5 rounded">
Wallet
</span>
</h3>
<div className="grid grid-cols-2 gap-4">
<div>
<p className="text-sm text-gray-500">Name</p>
<p className="font-medium">{transactionDetails?.origin_wallet.name}</p>
</div>
<div>
<p className="text-sm text-gray-500">Description</p>
<p className="font-medium">{transactionDetails?.origin_wallet.description}</p>
</div>
</div>
</div>
)}
{activeTab === 'origincustomer' && (
<div className="space-y-4">
<h3 className="font-semibold">Origin Customer</h3>
@ -378,6 +386,68 @@ const DetailApprovalTransaction = () => {
</div>
)}
{activeTab === 'destinationcustomer' && (
<div className="space-y-4">
<h3 className="font-semibold">Destination Customer</h3>
<div className="grid grid-cols-2 gap-4">
<div>
<p className="text-sm text-gray-500">Name</p>
<p className="font-medium">{transactionDetails?.transfer.destination_customer.fullname}</p>
</div>
<div>
<p className="text-sm text-gray-500">MSISDN</p>
<p className="font-medium">{transactionDetails?.transfer.destination_customer.msisdn}</p>
</div>
<div>
<p className="text-sm text-gray-500">Email</p>
<p className="font-medium">{transactionDetails?.transfer.destination_customer.email}</p>
</div>
<div>
<p className="text-sm text-gray-500">Username</p>
<p className="font-medium">{transactionDetails?.transfer.destination_customer.username}</p>
</div>
</div>
</div>
)}
{activeTab === 'originwallet' && (
<div className="space-y-4">
<h3 className="font-semibold">Origin Wallet</h3>
<div className="grid grid-cols-2 gap-4">
<div>
<p className="text-sm text-gray-500">Name</p>
<p className="font-medium">{transactionDetails?.origin_wallet.name}</p>
</div>
<div>
<p className="text-sm text-gray-500">Description</p>
<p className="font-medium">{transactionDetails?.origin_wallet.description}</p>
</div>
</div>
</div>
)}
{activeTab === 'destinationwallet' && (
<div className="space-y-4">
<h3 className="font-semibold">Destination Wallet</h3>
{!transactionDetails?.transfer ? (
<div className="text-center text-sm text-gray-500">No Data available</div>
) : (
<div className="grid grid-cols-2 gap-4">
<div>
<p className="text-sm text-gray-500">Name</p>
<p className="font-medium">{transactionDetails.transfer.destination_wallet.name}</p>
</div>
<div>
<p className="text-sm text-gray-500">Description</p>
<p className="font-medium">{transactionDetails.transfer.destination_wallet.description}</p>
</div>
</div>
)}
</div>
)}
{activeTab === 'log' && (
<div className="space-y-4">
<h3 className="font-semibold">Transaction Logs</h3>
@ -443,8 +513,8 @@ const DetailApprovalTransaction = () => {
<thead>
<tr className="bg-gray-100">
<th className="px-4 py-2 text-left text-sm text-gray-500">Status</th>
<th className="px-4 py-2 text-left text-sm text-gray-500">Created At</th>
<th className="px-4 py-2 text-left text-sm text-gray-500">Updated At</th>
<th className="px-4 py-2 text-left text-sm text-gray-500">Date</th>
{/* <th className="px-4 py-2 text-left text-sm text-gray-500">Updated At</th> */}
</tr>
</thead>
<tbody>
@ -466,8 +536,19 @@ const DetailApprovalTransaction = () => {
return status;
})()}
</td>
<td className="px-4 py-2 text-sm text-gray-500">{log.created_at}</td>
<td className="px-4 py-2 text-sm text-gray-500">{log.updated_at}</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)
year: 'numeric',
month: '2-digit',
day: '2-digit',
hour: '2-digit',
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>
))
) : (

8
src/pages/transaction/approval-transaction/blocks/ListToolbar.tsx
View File

@ -18,12 +18,10 @@ const ListToolbar = () => {
// useEffect to set the default date values
useEffect(() => {
const today = new Date();
const nextWeek = new Date(today);
nextWeek.setDate(today.getDate() + 7);
const firstDayOfMonth = new Date(today.getFullYear(), today.getMonth(), 1);
settrxDate({
from: formatDate(today), // Set 'from' to today
to: formatDate(nextWeek), // Set 'to' to 7 days later
from: formatDate(firstDayOfMonth),
to: formatDate(today),
});
}, []);

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

@ -155,7 +155,7 @@ const ApprovalTransactionProvider = ({ children }: { children: React.ReactNode }
},
{
accessorKey: 'type.name',
header: ({ column }) => <DataGridColumnHeader title="Name" column={column} />,
header: ({ column }) => <DataGridColumnHeader title="Transaction Type" column={column} />,
enableSorting: false,
enableHiding: false,
meta: {
@ -163,20 +163,33 @@ const ApprovalTransactionProvider = ({ children }: { children: React.ReactNode }
},
},
{
accessorFn: (row) => {
switch (row.status_approve) {
case 'W': return 'WAITING APPROVAL';
case 'Y': return 'APPROVED';
case 'N': return 'REJECTED';
default: return 'PENDING';
accessorKey: 'status_approve',
header: 'Status',
cell: ({ row }) => {
const statusCode = row.original.status_approve;
let label = '';
let badgeClass = '';
switch (statusCode) {
case 'Y':
label = 'APPROVED';
badgeClass = 'bg-green-100 text-green-800';
break;
case 'N':
label = 'REJECTED';
badgeClass = 'bg-red-100 text-red-800';
break;
case 'W':
label = 'WAITING APPROVAL';
badgeClass = 'bg-gray-100 text-gray-800';
break;
}
},
id: 'status_approve',
header: ({ column }) => <DataGridColumnHeader title="Status" column={column} />,
enableSorting: false,
enableHiding: false,
meta: {
headerClassName: 'w-[250px]',
return (
<span className={`px-3 py-1 rounded-full text-xs font-semibold ${badgeClass}`}>
{label}
</span>
);
},
},
{

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

@ -30,7 +30,6 @@ const DetailTransaction = () => {
const response = await GetData(`${API_URL}/transaction/history/detail/${selectedTransactionId}`, {
id: selectedTransactionId
});
// console.log(response?.data);
setTransactionDetails(response?.data);
} catch (error) {
console.error('Error fetching transaction', error);
@ -66,6 +65,24 @@ const DetailTransaction = () => {
>
Origin Customer
</button>
<button
className={`py-2 px-4 font-medium text-sm focus:outline-none ${activeTab === 'destinationcustomer' ? 'text-blue-600 border-b-2 border-blue-600' : 'text-gray-500 hover:text-gray-700'}`}
onClick={() => setActiveTab('destinationcustomer')}
>
Destination Customer
</button>
<button
className={`py-2 px-4 font-medium text-sm focus:outline-none ${activeTab === 'originwallet' ? 'text-blue-600 border-b-2 border-blue-600' : 'text-gray-500 hover:text-gray-700'}`}
onClick={() => setActiveTab('originwallet')}
>
Origin Wallet
</button>
<button
className={`py-2 px-4 font-medium text-sm focus:outline-none ${activeTab === 'destinationwallet' ? 'text-blue-600 border-b-2 border-blue-600' : 'text-gray-500 hover:text-gray-700'}`}
onClick={() => setActiveTab('destinationwallet')}
>
Destination Wallet
</button>
<button
className={`py-2 px-4 font-medium text-sm focus:outline-none ${activeTab === 'log' ? 'text-blue-600 border-b-2 border-blue-600' : 'text-gray-500 hover:text-gray-700'}`}
onClick={() => setActiveTab('log')}
@ -119,21 +136,32 @@ const DetailTransaction = () => {
</div>
<div>
<p className="text-sm text-gray-500">Status</p>
<p className="font-medium">
<div>
{(() => {
let status;
let badgeClass;
if (transactionDetails?.status === 'C') {
status = 'COMPLETE';
badgeClass = 'bg-green-100 text-green-800';
} else if (transactionDetails?.status === 'F') {
status = 'FAILED';
badgeClass = 'bg-red-100 text-red-800';
} else if (transactionDetails?.status === 'O') {
status = 'ON PROCESS';
badgeClass = 'bg-blue-100 text-blue-800';
} else {
status = 'PENDING';
badgeClass = 'bg-gray-100 text-gray-800';
}
return status;
return (
<span className={`px-3 py-1 rounded-full text-xs font-semibold ${badgeClass}`}>
{status}
</span>
);
})()}
</p>
</div>
</div>
<div>
<p className="text-sm text-gray-500">Transaction Type</p>
@ -172,14 +200,7 @@ const DetailTransaction = () => {
</span>
</h3>
<div className="grid grid-cols-2 gap-4">
<div>
<p className="text-sm text-gray-500">Name</p>
<p className="font-medium">{transactionDetails?.origin_wallet.name}</p>
</div>
<div>
<p className="text-sm text-gray-500">Description</p>
<p className="font-medium">{transactionDetails?.origin_wallet.description}</p>
</div>
</div>
<h3 className="font-semibold flex items-center">
@ -337,69 +358,9 @@ const DetailTransaction = () => {
<p className="font-medium">{transactionDetails?.transfer.destination_iban}</p>
</div>
</div>
<h3 className="font-semibold flex items-center">
Destination Wallet
<span className="ml-2 bg-blue-100 text-blue-800 text-xs font-semibold mr-2 px-2.5 py-0.5 rounded">
Wallet
</span>
</h3>
<div className="grid grid-cols-2 gap-4">
<div>
<p className="text-sm text-gray-500">Name</p>
<p className="font-medium">{transactionDetails?.transfer.destination_wallet.name}</p>
</div>
<div>
<p className="text-sm text-gray-500">Description</p>
<p className="font-medium">{transactionDetails?.transfer.destination_wallet.description}</p>
</div>
</div>
<h3 className="font-semibold flex items-center">
Destination Customer
<span className="ml-2 bg-blue-100 text-blue-800 text-xs font-semibold mr-2 px-2.5 py-0.5 rounded">
Destination Customer
</span>
</h3>
<div className="grid grid-cols-2 gap-4">
<div>
<p className="text-sm text-gray-500">Name</p>
<p className="font-medium">{transactionDetails?.transfer.destination_customer.fullname}</p>
</div>
<div>
<p className="text-sm text-gray-500">MSISDN</p>
<p className="font-medium">{transactionDetails?.transfer.destination_customer.msisdn}</p>
</div>
<div>
<p className="text-sm text-gray-500">Email</p>
<p className="font-medium">{transactionDetails?.transfer.destination_customer.email}</p>
</div>
<div>
<p className="text-sm text-gray-500">MSISDN</p>
<p className="font-medium">{transactionDetails?.transfer.destination_customer.username}</p>
</div>
</div>
<h3 className="font-semibold flex items-center">
Origin Wallet
<span className="ml-2 bg-blue-100 text-blue-800 text-xs font-semibold mr-2 px-2.5 py-0.5 rounded">
Wallet
</span>
</h3>
<div className="grid grid-cols-2 gap-4">
<div>
<p className="text-sm text-gray-500">Name</p>
<p className="font-medium">{transactionDetails?.origin_wallet.name}</p>
</div>
<div>
<p className="text-sm text-gray-500">Description</p>
<p className="font-medium">{transactionDetails?.origin_wallet.description}</p>
</div>
</div>
</div>
)}
{activeTab === 'origincustomer' && (
<div className="space-y-4">
<h3 className="font-semibold">Origin Customer</h3>
@ -424,6 +385,68 @@ const DetailTransaction = () => {
</div>
)}
{activeTab === 'destinationcustomer' && (
<div className="space-y-4">
<h3 className="font-semibold">Destination Customer</h3>
<div className="grid grid-cols-2 gap-4">
<div>
<p className="text-sm text-gray-500">Name</p>
<p className="font-medium">{transactionDetails?.transfer.destination_customer.fullname}</p>
</div>
<div>
<p className="text-sm text-gray-500">MSISDN</p>
<p className="font-medium">{transactionDetails?.transfer.destination_customer.msisdn}</p>
</div>
<div>
<p className="text-sm text-gray-500">Email</p>
<p className="font-medium">{transactionDetails?.transfer.destination_customer.email}</p>
</div>
<div>
<p className="text-sm text-gray-500">Username</p>
<p className="font-medium">{transactionDetails?.transfer.destination_customer.username}</p>
</div>
</div>
</div>
)}
{activeTab === 'originwallet' && (
<div className="space-y-4">
<h3 className="font-semibold">Origin Wallet</h3>
<div className="grid grid-cols-2 gap-4">
<div>
<p className="text-sm text-gray-500">Name</p>
<p className="font-medium">{transactionDetails?.origin_wallet.name}</p>
</div>
<div>
<p className="text-sm text-gray-500">Description</p>
<p className="font-medium">{transactionDetails?.origin_wallet.description}</p>
</div>
</div>
</div>
)}
{activeTab === 'destinationwallet' && (
<div className="space-y-4">
<h3 className="font-semibold">Destination Wallet</h3>
{!transactionDetails?.transfer ? (
<div className="text-center text-sm text-gray-500">No Data available</div>
) : (
<div className="grid grid-cols-2 gap-4">
<div>
<p className="text-sm text-gray-500">Name</p>
<p className="font-medium">{transactionDetails.transfer.destination_wallet.name}</p>
</div>
<div>
<p className="text-sm text-gray-500">Description</p>
<p className="font-medium">{transactionDetails.transfer.destination_wallet.description}</p>
</div>
</div>
)}
</div>
)}
{activeTab === 'log' && (
<div className="space-y-4">
<h3 className="font-semibold">Transaction Logs</h3>
@ -489,8 +512,8 @@ const DetailTransaction = () => {
<thead>
<tr className="bg-gray-100">
<th className="px-4 py-2 text-left text-sm text-gray-500">Status</th>
<th className="px-4 py-2 text-left text-sm text-gray-500">Created At</th>
<th className="px-4 py-2 text-left text-sm text-gray-500">Updated At</th>
<th className="px-4 py-2 text-left text-sm text-gray-500">Date</th>
{/* <th className="px-4 py-2 text-left text-sm text-gray-500">Updated At</th> */}
</tr>
</thead>
<tbody>
@ -512,8 +535,19 @@ const DetailTransaction = () => {
return status;
})()}
</td>
<td className="px-4 py-2 text-sm text-gray-500">{log.created_at}</td>
<td className="px-4 py-2 text-sm text-gray-500">{log.updated_at}</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)
year: 'numeric',
month: '2-digit',
day: '2-digit',
hour: '2-digit',
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>
))
) : (

8
src/pages/transaction/history-transaction/blocks/ListToolbar.tsx
View File

@ -18,12 +18,10 @@ const ListToolbar = () => {
// useEffect to set the default date values
useEffect(() => {
const today = new Date();
const nextWeek = new Date(today);
nextWeek.setDate(today.getDate() + 7);
const firstDayOfMonth = new Date(today.getFullYear(), today.getMonth(), 1);
settrxDate({
from: formatDate(today), // Set 'from' to today
to: formatDate(nextWeek), // Set 'to' to 7 days later
from: formatDate(firstDayOfMonth),
to: formatDate(today),
});
}, []);

54
src/pages/transaction/history-transaction/hooks/TransactionContext.tsx
View File

@ -125,19 +125,6 @@ const TransactionProvider = ({ 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';
}
return status;
},
accessorKey: 'status',
header: ({ column }) => <DataGridColumnHeader title="Status" column={column} />,
enableSorting: false,
@ -145,6 +132,36 @@ const TransactionProvider = ({ children }: { children: React.ReactNode }) => {
meta: {
headerClassName: 'w-[250px]',
},
cell: ({ row }) => {
const statusCode = row.original.status;
let label = '';
let badgeClass = '';
switch (statusCode) {
case 'C':
label = 'COMPLETE';
badgeClass = 'bg-green-100 text-green-800';
break;
case 'F':
label = 'FAILED';
badgeClass = 'bg-red-100 text-red-800';
break;
case 'O':
label = 'ON PROCESS';
badgeClass = 'bg-blue-100 text-blue-800';
break;
default:
label = 'PENDING';
badgeClass = 'bg-gray-100 text-gray-800';
break;
}
return (
<span className={`px-3 py-1 rounded-full text-xs font-semibold ${badgeClass}`}>
{label}
</span>
);
},
},
{
accessorKey: 'description',
@ -157,7 +174,7 @@ const TransactionProvider = ({ children }: { children: React.ReactNode }) => {
},
{
accessorKey: 'type.name',
header: ({ column }) => <DataGridColumnHeader title="Name" column={column} />,
header: ({ column }) => <DataGridColumnHeader title="Transaction Type" column={column} />,
enableSorting: false,
enableHiding: false,
meta: {
@ -201,11 +218,12 @@ const TransactionProvider = ({ children }: { children: React.ReactNode }) => {
if (filter == undefined || 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];
// Tanggal 1 di bulan sekarang
const firstDayOfMonth = new Date(today.getFullYear(), today.getMonth(), 1);
startdate = firstDayOfMonth.toISOString().split('T')[0];
enddate = today.toISOString().split('T')[0];
} else if (filter != undefined || filter.length != 0) {
startdate = filter[0].value.from;
enddate = filter[0].value.to;

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

@ -5,7 +5,7 @@ import {
} from './hooks/ManageTransferTypeContext';
import AddDialog from './blocks/AddDialog';
import { Breadcrumbs, Link } from '@mui/material';
import { DeleteDialog } from './blocks/DeleteDialog';
import DeleteDialog from './blocks/DeleteDialog';
import { EditDialog } from './blocks/EditDialog';
import { Helmet } from 'react-helmet';
@ -37,7 +37,7 @@ const TransferType = () => {
</div>
<AddDialog />
<DeleteDialog />
<EditDialog />
{/* <EditDialog /> */}
</Container>
</ManageTransferTypeContextProvider>

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

@ -41,8 +41,8 @@ import {
} from '@/components/ui/command';
interface WalletProps {
Wallet_id: string;
Wallet_name: string;
id: string;
name: string;
}
interface CustomerProps {
@ -74,8 +74,8 @@ const AddDialog = () => {
description: '',
wallet_origin: '',
wallet_destination: '',
wallet_fee_destination: '',
customer_fee_destination: '',
minimum_amount: 0,
maximum_amount: 0,
max_transaction_per_day: 0,
@ -102,8 +102,6 @@ const AddDialog = () => {
'description',
'wallet_origin',
'wallet_destination',
'wallet_fee_destination',
'customer_fee_destination',
'status',
'status_approval'
];
@ -216,13 +214,11 @@ const AddDialog = () => {
limit: 100,
page: 1,
with_deleted: false,
order_field: 'name',
order_field: 'wallets.name',
order_direction: 'ASC',
filter: JSON.stringify({
status: 'Y'
})
};
const response = await GetData(`${API_URL_MASTERDATA}/wallet/list`, params);
// console.log(response)
if (response?.status && response?.data) {
setWallets(response.data.list);
} else {
@ -234,7 +230,7 @@ const AddDialog = () => {
if (!showAddDialog) return;
fetchWallets();
}, [showAddDialog]);
// console.log(formField)
return (
<Dialog open={showAddDialog} onOpenChange={(open) => handleAddDialog(open)}>
<DialogContent className="container-fixed max-w-[1080px] flex flex-col p-5 overflow-hidden [&>button]:hidden">
@ -262,9 +258,11 @@ const AddDialog = () => {
<DialogBody className="scrollable-y px-0 pb-0" ref={parentRef}>
<div className="flex flex-col px-0">
{alert.show && (
<Alert variant="danger" className="mb-3">
<h3>{alert.message}</h3>
</Alert>
<div className="sticky top-0 z-10 bg-white p-3">
<Alert variant="danger" className="mb-3">
<h3>{alert.message}</h3>
</Alert>
</div>
)}
<form action="" onSubmit={handleSubmit}>
<div className="card-body grid gap-5 p-0">
@ -396,8 +394,8 @@ const AddDialog = () => {
</SelectTrigger>
<SelectContent>
{wallets.map((wallet, idx) => (
<SelectItem value={wallet.Wallet_id} key={wallet.Wallet_name}>
{wallet.Wallet_name}
<SelectItem value={wallet.id} key={wallet.name}>
{wallet.name}
</SelectItem>
))}
</SelectContent>
@ -424,8 +422,8 @@ const AddDialog = () => {
</SelectTrigger>
<SelectContent>
{wallets.map((wallet, idx) => (
<SelectItem value={wallet.Wallet_id} key={wallet.Wallet_id}>
{wallet.Wallet_name}
<SelectItem value={wallet.id} key={wallet.id}>
{wallet.name}
</SelectItem>
))}
</SelectContent>
@ -433,86 +431,8 @@ const AddDialog = () => {
</div>
</div>
</div>
<div className="w-full">
<div className="flex items-baseline flex-wrap lg:flex-nowrap gap-2.5">
<label className="form-label flex items-center gap-1 max-w-56">
Wallet Destination Fee
<span className="text-red-500">*</span>
</label>
<div className="grow">
<Select
value={formField.wallet_fee_destination}
onValueChange={(wallet_fee_destination) =>
setFormField((prev) => ({ ...prev, wallet_fee_destination }))
}
>
<SelectTrigger>
<SelectValue placeholder="Select Wallet" />
</SelectTrigger>
<SelectContent>
{wallets.map((wallet, idx) => (
<SelectItem value={wallet.Wallet_id} key={wallet.Wallet_id}>
{wallet.Wallet_name}
</SelectItem>
))}
</SelectContent>
</Select>
</div>
</div>
</div>
<div className="w-full">
<div className="flex items-baseline flex-wrap lg:flex-nowrap gap-2.5">
<label className="form-label flex items-center gap-1 max-w-56">
Customer Fee Destination<span className="text-red-500">*</span>
</label>
<div className="grow">
<Popover open={open} onOpenChange={setOpen}>
<PopoverTrigger asChild>
<button
type="button"
className="input col-span-5 text-left"
style={{ color: 'inherit' }}
>
{customers.find(
(customer) => customer.id === formField.customer_fee_destination
)?.username || 'Select Customer'}
</button>
</PopoverTrigger>
<PopoverContent className="w-[400px] p-0">
<Command>
<CommandInput placeholder="Search Customer..." />
<CommandList
className="max-h-[300px] overflow-y-auto"
style={{ touchAction: 'pan-y' }}
onWheel={(e) => {
e.currentTarget.scrollTop += e.deltaY;
}}
>
<CommandEmpty>No Customer found.</CommandEmpty>
<CommandGroup>
{customers.map((customer) => (
<CommandItem
key={customer.id}
value={customer.username}
onSelect={() => {
setFormField({
...formField,
customer_fee_destination: customer.id
});
setOpen(false);
}}
>
{customer.username}
</CommandItem>
))}
</CommandGroup>
</CommandList>
</Command>
</PopoverContent>
</Popover>
</div>
</div>
</div>
<div className="w-full">
<div className="flex items-baseline flex-wrap lg:flex-nowrap gap-2.5">
<label className="form-label flex items-center gap-1 max-w-56">

9
src/pages/transfer/transfertype/blocks/DeleteDialog.tsx
View File

@ -25,7 +25,6 @@ const DeleteDialog = () => {
return;
}
// Kirim enforce=false untuk memastikan soft delete
const response = await DeleteData(`${API_URL}/transactiontype/delete/${selectedTransferType}/false`, {
id: selectedTransferType
});
@ -34,13 +33,12 @@ const DeleteDialog = () => {
setAlert({ show: false, message: '' });
handleDeleteDialog(false, null);
reload();
setTimeout(() => toast.success('Success Delete Transaction Type'), 0);
// setTimeout(() => toast.success('Success Delete Transaction Type'), 0);
} else {
setAlert({ show: true, message: response?.message });
setTimeout(() => toast.error('Failed Delete Product'), 0);
// setTimeout(() => toast.error('Failed Delete Product'), 0);
}
}, [selectedTransferType, DeleteData, handleDeleteDialog, reload]);
}, [selectedTransferType]);
return (
<Dialog open={showDeleteDialog} onOpenChange={(open) => handleDeleteDialog(open, null)}>
<DialogContent className="container-fixed max-w-md flex flex-col p-5 overflow-hidden [&>button]:hidden">
@ -71,4 +69,3 @@ const DeleteDialog = () => {
};
export default DeleteDialog;
export { DeleteDialog };

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

@ -70,8 +70,8 @@ const ManageTransferTypeContextProvider = ({ children }: { children: React.React
}, []);
const handleDeleteDialog = useCallback((show: boolean, selected_transfertype: string | null) => {
setShowDeleteDialog(show);
setSelectedTransferType(show ? selected_transfertype : null);
setShowDeleteDialog(show);
}, []);
const columns = useMemo<ColumnDef<any>[]>(
@ -136,26 +136,6 @@ const ManageTransferTypeContextProvider = ({ children }: { children: React.React
enableHiding: false,
meta: { headerClassName: 'w-[250px]' }
},
{
accessorFn: (row) => row.wallet_fee_destination.name,
id: 'wallet_fee_destination',
header: ({ column }) => (
<DataGridColumnHeader title="Wallet Fee Destination" column={column} />
),
enableSorting: false,
enableHiding: false,
meta: { headerClassName: 'w-[250px]' }
},
{
accessorFn: (row) => row.customer_fee_destination?.username || 'N/A',
id: 'customer_fee_destination',
header: ({ column }) => (
<DataGridColumnHeader title="Customer Fee Destination" column={column} />
),
enableSorting: false,
enableHiding: false,
meta: { headerClassName: 'w-[250px]' }
},
{
accessorFn: (row) => row.type,
id: 'type',

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

@ -82,7 +82,7 @@ const ManageWalletContextProvider = ({ children }: { children: React.ReactNode }
},
{
accessorKey: 'amount' ,
header: ({ column }) => <DataGridColumnHeader title="Ammount" column={column} />,
header: ({ column }) => <DataGridColumnHeader title="Amount" column={column} />,
enableSorting: false,
enableHiding: false,
meta: {
@ -108,8 +108,10 @@ const ManageWalletContextProvider = ({ children }: { children: React.ReactNode }
}
},
{
accessorKey: 'CreatedAt' ,
header: ({ column }) => <DataGridColumnHeader title="Created At" column={column} />,
accessorKey: 'CreatedAt',
header: ({ column }) => (
<DataGridColumnHeader title="Created At" column={column} />
),
cell: ({ row }) =>
new Date(row.original.CreatedAt).toLocaleString('id-ID', {
day: '2-digit',
@ -118,7 +120,7 @@ const ManageWalletContextProvider = ({ children }: { children: React.ReactNode }
hour: '2-digit',
minute: '2-digit',
}),
enableSorting: false,
enableSorting: false,
enableHiding: false,
meta: {
headerClassName: 'w-[200px]'
@ -174,26 +176,24 @@ const ManageWalletContextProvider = ({ children }: { children: React.ReactNode }
headerClassName: 'w-[200px]'
}
}
],
[]
);
const getWalletLists = async (page: number, limit: number, sorting: any, filter: any) => {
try {
sorting = sorting.length == 0 ? [{ id: 'name', desc: false }] : sorting;
const sortField = 'CreatedAt';
const sortDirection = 'ASC';
filter = filter.length == 0 ? {} : { name: filter[0].value?.toLowerCase() };
const response = await GetData(`${API_URL_WALLET}/dashboard/balance/`, {
limit,
page: page + 1,
with_deleted: false,
order_field: sorting[0].id,
order_direction: sorting[0].desc == false ? 'ASC' : 'DESC',
order_field: sortField,
order_direction: sortDirection,
// filter: JSON.stringify(filter)
});
// console.log(response?.data);
setWallets(response?.data.list);
return { data: response?.data.list, totalCount: response?.data.total_count };
} catch (error) {
@ -221,7 +221,7 @@ const ManageWalletContextProvider = ({ children }: { children: React.ReactNode }
pagination={{ size: 10 }}
toolbar={<ListToolbar />}
layout={{ card: true }}
sorting={[{ id: 'id', desc: false }]}
// sorting={[{ id: 'created_at', desc: true }]}
serverSide={true}
onFetchData={({ pageIndex, pageSize, sorting, columnFilters }) =>
getWalletLists(pageIndex, pageSize, sorting, columnFilters)

2
src/routing/AppRoutingSetup.tsx
View File

@ -34,7 +34,7 @@ import ProfessionMaster from '@/pages/master/profession/ProfessionMaster';
import ProductsMaster from '@/pages/master/products/ProductsMaster';
import ProviderMaster from '@/pages/master/provider/ProviderMaster';
import ConversionMaster from '@/pages/master/conversion/ConversionMaster';
import RewardMaster from '@/pages/master/reward/Reward';
import RewardMaster from '@/pages/master/reward/RewardMaster';
import WalletRuleMaster from '@/pages/master/walletRule/WalletRuleMaster';
import WalletHistory from '@/pages/wallet/wallet-history/WalletHistory';
import WalletMaster from '@/pages/master/wallet/WalletMaster';