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

fix some sub module in master data

Browse Source
This commit is contained in:
bagusajisaputroo
2025-05-09 11:42:00 +07:00
parent 930d6f1434
commit 8a3a574a80
3 changed files with 331 additions and 316 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -83,18 +83,18 @@ const AddDialog = () => {
}; };
const validateForm = () => { const validateForm = () => {
const requiredFields = [ const requiredFields = [
{key:'name', label: 'Name'}, { key: 'name', label: 'Name' },
{key:'type', label: 'Type'}, { key: 'type', label: 'Type' },
{key:'code', label: 'Code'}, { key: 'code', label: 'Code' },
{key:'description', label: 'Description'}, { key: 'description', label: 'Description' },
{key:'price_point', label: 'Price Point'}, { key: 'price_point', label: 'Price Point' },
{key:'price_cash', label: 'Price Cash'}, { key: 'price_cash', label: 'Price Cash' },
{key:'cashback_point', label: 'Cashback Point'}, { key: 'cashback_point', label: 'Cashback Point' },
{key:'cashback_cash', label: 'Cashback Cash'}, { key: 'cashback_cash', label: 'Cashback Cash' },
{key:'status', label: 'Status'}, { key: 'status', label: 'Status' },
{key:'provider', label: 'Provider'}, { key: 'provider', label: 'Provider' },
{key:'process_on_third_party', label: 'Process On Third Party'} { key: 'process_on_third_party', label: 'Process On Third Party' }
] ];
const newErrors: Record<string, string> = {}; const newErrors: Record<string, string> = {};
let isValid = true; let isValid = true;
requiredFields.forEach(({ key, label }) => { requiredFields.forEach(({ key, label }) => {
@ -110,7 +110,7 @@ const AddDialog = () => {
}); });
setErrors(newErrors); setErrors(newErrors);
return isValid; return isValid;
} };
const doCreateProduct = useCallback( const doCreateProduct = useCallback(
async (e: React.FormEvent<HTMLFormElement>) => { async (e: React.FormEvent<HTMLFormElement>) => {
@ -214,317 +214,334 @@ const AddDialog = () => {
</div> </div>
)} )}
<form onSubmit={handleSubmit}> <form onSubmit={handleSubmit}>
<div className="card-body grid gap-5"> <div className="card-body grid gap-5">
<div className="w-full"> <div className="w-full">
<div className="flex items-baseline flex-wrap lg:flex-nowrap gap-2.5"> <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"> <label className="form-label flex items-center gap-1 max-w-56">
Name<span className="text-red-500">*</span> Name<span className="text-red-500">*</span>
</label> </label>
<div className="grow flex flex-col"> <div className="grow flex flex-col">
<Input <Input
className={`input ${errors.name ? 'border-red-500' : ''}`} className={`input ${errors.name ? 'border-red-500' : ''}`}
type="text" type="text"
value={formField.name} value={formField.name}
onChange={(e) => { onChange={(e) => {
setFormField({ ...formField, name: e.target.value }); setFormField({ ...formField, name: e.target.value });
if (e.target.value) { if (e.target.value) {
setErrors((prev) => ({ ...prev, name: '' })); setErrors((prev) => ({ ...prev, name: '' }));
} }
}} }}
/> />
{errors.name && <span className="text-red-500 text-xs mt-1">{errors.name}</span>} {errors.name && (
</div> <span className="text-red-500 text-xs mt-1">{errors.name}</span>
</div> )}
</div> </div>
</div>
</div>
<div className="w-full"> <div className="w-full">
<div className="flex items-baseline flex-wrap lg:flex-nowrap gap-2.5"> <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"> <label className="form-label flex items-center gap-1 max-w-56">
Type<span className="text-red-500">*</span> Type<span className="text-red-500">*</span>
</label> </label>
<div className="grow flex flex-col"> <div className="grow flex flex-col">
<Input <Input
className={`input ${errors.type ? 'border-red-500' : ''}`} className={`input ${errors.type ? 'border-red-500' : ''}`}
type="text" type="text"
value={formField.type} value={formField.type}
onChange={(e) => { onChange={(e) => {
setFormField({ ...formField, type: e.target.value }); setFormField({ ...formField, type: e.target.value });
if (e.target.value) { if (e.target.value) {
setErrors((prev) => ({ ...prev, type: '' })); setErrors((prev) => ({ ...prev, type: '' }));
} }
}} }}
/> />
{errors.type && <span className="text-red-500 text-xs mt-1">{errors.type}</span>} {errors.type && (
</div> <span className="text-red-500 text-xs mt-1">{errors.type}</span>
</div> )}
</div> </div>
</div>
</div>
<div className="w-full"> <div className="w-full">
<div className="flex items-baseline flex-wrap lg:flex-nowrap gap-2.5"> <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"> <label className="form-label flex items-center gap-1 max-w-56">
Code<span className="text-red-500">*</span> Code<span className="text-red-500">*</span>
</label> </label>
<div className="grow flex flex-col"> <div className="grow flex flex-col">
<Input <Input
className={`input ${errors.code ? 'border-red-500' : ''}`} className={`input ${errors.code ? 'border-red-500' : ''}`}
type="text" type="text"
value={formField.code} value={formField.code}
onChange={(e) => { onChange={(e) => {
setFormField({ ...formField, code: e.target.value }); setFormField({ ...formField, code: e.target.value });
if (e.target.value) { if (e.target.value) {
setErrors((prev) => ({ ...prev, code: '' })); setErrors((prev) => ({ ...prev, code: '' }));
} }
}} }}
/> />
{errors.code && <span className="text-red-500 text-xs mt-1">{errors.code}</span>} {errors.code && (
</div> <span className="text-red-500 text-xs mt-1">{errors.code}</span>
</div> )}
</div> </div>
</div>
</div>
<div className="w-full"> <div className="w-full">
<div className="flex items-baseline flex-wrap lg:flex-nowrap gap-2.5"> <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"> <label className="form-label flex items-center gap-1 max-w-56">
Description<span className="text-red-500">*</span> Description<span className="text-red-500">*</span>
</label> </label>
<div className="grow flex flex-col"> <div className="grow flex flex-col">
<Input <Input
className={`input ${errors.description ? 'border-red-500' : ''}`} className={`input ${errors.description ? 'border-red-500' : ''}`}
type="text" type="text"
value={formField.description} value={formField.description}
onChange={(e) => { onChange={(e) => {
setFormField({ ...formField, description: e.target.value }); setFormField({ ...formField, description: e.target.value });
if (e.target.value) { if (e.target.value) {
setErrors((prev) => ({ ...prev, description: '' })); setErrors((prev) => ({ ...prev, description: '' }));
} }
}} }}
/> />
{errors.description && ( {errors.description && (
<span className="text-red-500 text-xs mt-1">{errors.description}</span> <span className="text-red-500 text-xs mt-1">{errors.description}</span>
)} )}
</div> </div>
</div> </div>
</div> </div>
<div className="w-full"> <div className="w-full">
<div className="flex items-baseline flex-wrap lg:flex-nowrap gap-2.5"> <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"> <label className="form-label flex items-center gap-1 max-w-56">
Price Point<span className="text-red-500">*</span> Price Point<span className="text-red-500">*</span>
</label> </label>
<div className="grow flex flex-col"> <div className="grow flex flex-col">
<NumericFormat <NumericFormat
className={`input ${errors.price_point ? 'border-red-500' : ''}`} className={`input ${errors.price_point ? 'border-red-500' : ''}`}
value={formField.price_point ?? ''} value={formField.price_point ?? ''}
thousandSeparator="." thousandSeparator="."
decimalSeparator="," decimalSeparator=","
allowNegative={false} allowNegative={false}
onValueChange={(values) => { onValueChange={(values) => {
setFormField((prev) => ({ setFormField((prev) => ({
...prev, ...prev,
price_point: values.floatValue !== undefined ? values.floatValue : '' price_point: values.floatValue !== undefined ? values.floatValue : ''
})); }));
if (values.floatValue !== undefined) { if (values.floatValue !== undefined) {
setErrors((prev) => ({ ...prev, price_point: '' })); setErrors((prev) => ({ ...prev, price_point: '' }));
} }
}} }}
placeholder="Enter Price Point" placeholder="Enter Price Point"
/> />
{errors.price_point && ( {errors.price_point && (
<span className="text-red-500 text-xs mt-1">{errors.price_point}</span> <span className="text-red-500 text-xs mt-1">{errors.price_point}</span>
)} )}
</div> </div>
</div> </div>
</div> </div>
<div className="w-full"> <div className="w-full">
<div className="flex items-baseline flex-wrap lg:flex-nowrap gap-2.5"> <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"> <label className="form-label flex items-center gap-1 max-w-56">
Price Cash<span className="text-red-500">*</span> Price Cash<span className="text-red-500">*</span>
</label> </label>
<div className="grow flex flex-col"> <div className="grow flex flex-col">
<NumericFormat <NumericFormat
className={`input ${errors.price_cash ? 'border-red-500' : ''}`} className={`input ${errors.price_cash ? 'border-red-500' : ''}`}
value={formField.price_cash ?? ''} value={formField.price_cash ?? ''}
thousandSeparator="." thousandSeparator="."
decimalSeparator="," decimalSeparator=","
allowNegative={false} allowNegative={false}
onValueChange={(values) => { onValueChange={(values) => {
setFormField((prev) => ({ setFormField((prev) => ({
...prev, ...prev,
price_cash: values.floatValue !== undefined ? values.floatValue : '' price_cash: values.floatValue !== undefined ? values.floatValue : ''
})); }));
if (values.floatValue !== undefined) { if (values.floatValue !== undefined) {
setErrors((prev) => ({ ...prev, price_cash: '' })); setErrors((prev) => ({ ...prev, price_cash: '' }));
} }
}} }}
placeholder="Enter Price Cash" placeholder="Enter Price Cash"
/> />
{errors.price_cash && ( {errors.price_cash && (
<span className="text-red-500 text-xs mt-1">{errors.price_cash}</span> <span className="text-red-500 text-xs mt-1">{errors.price_cash}</span>
)} )}
</div> </div>
</div> </div>
</div> </div>
<div className="w-full"> <div className="w-full">
<div className="flex items-baseline flex-wrap lg:flex-nowrap gap-2.5"> <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"> <label className="form-label flex items-center gap-1 max-w-56">
Cashback Point<span className="text-red-500">*</span> Cashback Point<span className="text-red-500">*</span>
</label> </label>
<div className="grow flex flex-col"> <div className="grow flex flex-col">
<NumericFormat <NumericFormat
className={`input ${errors.cashback_point ? 'border-red-500' : ''}`} className={`input ${errors.cashback_point ? 'border-red-500' : ''}`}
value={formField.cashback_point ?? ''} value={formField.cashback_point ?? ''}
thousandSeparator="." thousandSeparator="."
decimalSeparator="," decimalSeparator=","
allowNegative={false} allowNegative={false}
onValueChange={(values) => { onValueChange={(values) => {
setFormField((prev) => ({ setFormField((prev) => ({
...prev, ...prev,
cashback_point: values.floatValue !== undefined ? values.floatValue : '' cashback_point: values.floatValue !== undefined ? values.floatValue : ''
})); }));
if (values.floatValue !== undefined) { if (values.floatValue !== undefined) {
setErrors((prev) => ({ ...prev, cashback_point: '' })); setErrors((prev) => ({ ...prev, cashback_point: '' }));
} }
}} }}
placeholder="Enter Cashback Point" placeholder="Enter Cashback Point"
/> />
{errors.cashback_point && ( {errors.cashback_point && (
<span className="text-red-500 text-xs mt-1">{errors.cashback_point}</span> <span className="text-red-500 text-xs mt-1">{errors.cashback_point}</span>
)} )}
</div> </div>
</div> </div>
</div> </div>
<div className="w-full"> <div className="w-full">
<div className="flex items-baseline flex-wrap lg:flex-nowrap gap-2.5"> <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"> <label className="form-label flex items-center gap-1 max-w-56">
Cashback Cash<span className="text-red-500">*</span> Cashback Cash<span className="text-red-500">*</span>
</label> </label>
<div className="grow flex flex-col"> <div className="grow flex flex-col">
<NumericFormat <NumericFormat
className={`input ${errors.cashback_cash ? 'border-red-500' : ''}`} className={`input ${errors.cashback_cash ? 'border-red-500' : ''}`}
value={formField.cashback_cash ?? ''} value={formField.cashback_cash ?? ''}
thousandSeparator="." thousandSeparator="."
decimalSeparator="," decimalSeparator=","
allowNegative={false} allowNegative={false}
onValueChange={(values) => { onValueChange={(values) => {
setFormField((prev) => ({ setFormField((prev) => ({
...prev, ...prev,
cashback_cash: values.floatValue !== undefined ? values.floatValue : '' cashback_cash: values.floatValue !== undefined ? values.floatValue : ''
})); }));
if (values.floatValue !== undefined) { if (values.floatValue !== undefined) {
setErrors((prev) => ({ ...prev, cashback_cash: '' })); setErrors((prev) => ({ ...prev, cashback_cash: '' }));
} }
}} }}
placeholder="Enter Cashback Cash" placeholder="Enter Cashback Cash"
/> />
{errors.cashback_cash && ( {errors.cashback_cash && (
<span className="text-red-500 text-xs mt-1">{errors.cashback_cash}</span> <span className="text-red-500 text-xs mt-1">{errors.cashback_cash}</span>
)} )}
</div> </div>
</div> </div>
</div> </div>
<div className="w-full"> <div className="w-full">
<div className="flex items-baseline flex-wrap lg:flex-nowrap gap-2.5"> <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"> <label className="form-label flex items-center gap-1 max-w-56">
Status<span className="text-red-500">*</span> Status<span className="text-red-500">*</span>
</label> </label>
<div className="grow flex flex-col"> <div className="grow flex flex-col">
<Select <Select
value={formField.status} value={formField.status}
onValueChange={(value) => { onValueChange={(value) => {
setFormField({ ...formField, status: value }); setFormField({ ...formField, status: value });
setErrors((prev) => ({ ...prev, status: '' })); setErrors((prev) => ({ ...prev, status: '' }));
}} }}
> >
<SelectTrigger className={`input ${errors.status ? 'border-red-500' : ''}`}> <SelectTrigger className={`input ${errors.status ? 'border-red-500' : ''}`}>
<SelectValue placeholder="Select Status" /> <SelectValue placeholder="Select Status" />
</SelectTrigger> </SelectTrigger>
<SelectContent> <SelectContent>
<SelectItem value="Y">Yes</SelectItem> <SelectItem value="Y">Yes</SelectItem>
<SelectItem value="N">No</SelectItem> <SelectItem value="N">No</SelectItem>
</SelectContent> </SelectContent>
</Select> </Select>
{errors.status && <span className="text-red-500 text-xs mt-1">{errors.status}</span>} {errors.status && (
</div> <span className="text-red-500 text-xs mt-1">{errors.status}</span>
</div> )}
</div> </div>
</div>
</div>
<div className="w-full"> <div className="w-full">
<div className="flex items-baseline flex-wrap lg:flex-nowrap gap-2.5"> <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">Provider<span className="text-red-500">*</span></label> <label className="form-label flex items-center gap-1 max-w-56">
<div className="grow flex flex-col"> Provider<span className="text-red-500">*</span>
<Select </label>
value={formField.provider} <div className="grow flex flex-col">
onValueChange={(value) => { <Select
setFormField({ ...formField, provider: value.toString() }); value={formField.provider}
setErrors((prev) => ({ ...prev, provider: '' })); onValueChange={(value) => {
}} setFormField({ ...formField, provider: value.toString() });
> setErrors((prev) => ({ ...prev, provider: '' }));
<SelectTrigger className={`input ${errors.provider ? 'border-red-500' : ''}`}> }}
<SelectValue placeholder="Select Provider" /> >
</SelectTrigger> <SelectTrigger
<SelectContent> className={`input ${errors.provider ? 'border-red-500' : ''}`}
{providers.map((provider) => ( >
<SelectItem <SelectValue placeholder="Select Provider" />
key={provider.provider_id} </SelectTrigger>
value={provider.provider_id.toString()} <SelectContent>
> {providers.map((provider) => (
{provider.provider_name} <SelectItem
</SelectItem> key={provider.provider_id}
))} value={provider.provider_id.toString()}
</SelectContent> >
</Select> {provider.provider_name}
{errors.provider && <span className="text-red-500 text-xs mt-1">{errors.provider}</span>} </SelectItem>
</div> ))}
</div> </SelectContent>
</div> </Select>
{errors.provider && (
<span className="text-red-500 text-xs mt-1">{errors.provider}</span>
)}
</div>
</div>
</div>
<div className="w-full"> <div className="w-full">
<div className="flex items-baseline flex-wrap lg:flex-nowrap gap-2.5"> <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"> <label className="form-label flex items-center gap-1 max-w-56">
Process on Third Party<span className="text-red-500">*</span> Process on Third Party<span className="text-red-500">*</span>
</label> </label>
<div className="grow flex flex-col"> <div className="grow flex flex-col">
<Select <Select
value={formField.process_on_third_party} value={formField.process_on_third_party}
onValueChange={(value) => { onValueChange={(value) => {
setFormField({ ...formField, process_on_third_party: value }); setFormField({ ...formField, process_on_third_party: value });
setErrors((prev) => ({ ...prev, process_on_third_party: '' })); setErrors((prev) => ({ ...prev, process_on_third_party: '' }));
}} }}
> >
<SelectTrigger className={`input ${errors.process_on_third_party ? 'border-red-500' : ''}`}> <SelectTrigger
<SelectValue placeholder="Select Status" /> className={`input ${errors.process_on_third_party ? 'border-red-500' : ''}`}
</SelectTrigger> >
<SelectContent> <SelectValue placeholder="Select Status" />
<SelectItem value="Y">Yes</SelectItem> </SelectTrigger>
<SelectItem value="N">No</SelectItem> <SelectContent>
</SelectContent> <SelectItem value="Y">Yes</SelectItem>
</Select> <SelectItem value="N">No</SelectItem>
{errors.process_on_third_party && ( </SelectContent>
<span className="text-red-500 text-xs mt-1">{errors.process_on_third_party}</span> </Select>
)} {errors.process_on_third_party && (
</div> <span className="text-red-500 text-xs mt-1">
</div> {errors.process_on_third_party}
</div> </span>
)}
<div className="flex justify-end gap-5"> </div>
<Button type="button" variant="outline" onClick={resetForm}> </div>
Reset </div>
</Button>
<Button variant="default" type="submit" disabled={isSubmitting}>
{isSubmitting ? (
<RefreshCw className="animate-spin h-8 w-8 text-white mx-7" />
) : (
'Create'
)}
</Button>
</div>
</div>
</form>
<div className="flex justify-end gap-5">
<Button type="button" variant="outline" onClick={resetForm}>
Reset
</Button>
<Button variant="default" type="submit" disabled={isSubmitting}>
{isSubmitting ? (
<RefreshCw className="animate-spin h-8 w-8 text-white mx-7" />
) : (
'Create'
)}
</Button>
</div>
</div>
</form>
</div> </div>
</DialogBody> </DialogBody>
</DialogContent> </DialogContent>

2
src/pages/master/products/hooks/ManageProductsContext.tsx
View File

@ -273,8 +273,6 @@ const ManageProductsContextProvider = ({ children }: { children: React.ReactNode
getProductsLists getProductsLists
}} }}
> >
<Toaster expand visibleToasts={9} duration={3000} />
<DataGridProvider <DataGridProvider
columns={columns} columns={columns}
pagination={{ size: 10 }} pagination={{ size: 10 }}

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

@ -116,7 +116,7 @@ const AddDialog = () => {
const resetForm = () => { const resetForm = () => {
setFormField(initialState); setFormField(initialState);
setAlert({ show: false, message: '' }); setErrors({});
}; };
const doCreateProvider = useCallback( const doCreateProvider = useCallback(