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

update: add field transaction_type on products and remove on provider

Browse Source
This commit is contained in:
Wikzyy
2025-09-09 18:12:36 +07:00
parent 9a7acdf32a
commit c75f36f3ff
4 changed files with 570 additions and 542 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -31,7 +31,14 @@ interface ProviderProps {
provider_name: string; provider_name: string;
} }
interface TransactionProps {
id: string;
name: string;
}
const API_URL = apiConfig.service_master_data; const API_URL = apiConfig.service_master_data;
const API_URL_TRANSACTION = apiConfig.service_transaction;
const AddDialog = () => { const AddDialog = () => {
const parentRef = useRef<any | null>(null); const parentRef = useRef<any | null>(null);
const parsedUser = getAuth()?.user; const parsedUser = getAuth()?.user;
@ -53,6 +60,7 @@ const AddDialog = () => {
cashback_cash: string | number | null; cashback_cash: string | number | null;
status: string; status: string;
provider: string; provider: string;
transaction_type: string;
process_on_third_party: string; process_on_third_party: string;
created_by: string; created_by: string;
created_at: string; created_at: string;
@ -67,20 +75,24 @@ const AddDialog = () => {
cashback_cash: null, cashback_cash: null,
status: '', status: '',
provider: '', provider: '',
transaction_type: '',
process_on_third_party: '', process_on_third_party: '',
created_by: '', created_by: '',
created_at: '' created_at: ''
}; };
const [formField, setFormField] = useState(initialState); const [formField, setFormField] = useState(initialState);
const [providers, setProviders] = useState<ProviderProps[]>([]); const [providers, setProviders] = useState<ProviderProps[]>([]);
const [transactions, setTransactions] = useState<TransactionProps[]>([]);
const [isSubmitting, setIsSubmitting] = useState(false); const [isSubmitting, setIsSubmitting] = useState(false);
const created_time = new Date(); const created_time = new Date();
const formattedTime = created_time.toISOString().slice(0, 19).replace('T', ' '); const formattedTime = created_time.toISOString().slice(0, 19).replace('T', ' ');
const [errors, setErrors] = useState<Record<string, string>>({}); const [errors, setErrors] = useState<Record<string, string>>({});
const resetForm = () => { const resetForm = () => {
setFormField(initialState); setFormField(initialState);
setErrors({}); setErrors({});
}; };
const validateForm = () => { const validateForm = () => {
const requiredFields = [ const requiredFields = [
{ key: 'name', label: 'Name' }, { key: 'name', label: 'Name' },
@ -93,6 +105,7 @@ const AddDialog = () => {
{ 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: 'transaction_type', label: 'Transaction Type' },
{ 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> = {};
@ -146,6 +159,22 @@ const AddDialog = () => {
[formField] [formField]
); );
const getTransactionTypeList = async (sorting: any) => {
try {
const response = await GetData(`${API_URL_TRANSACTION}/transactiontype/list`, {
limit: 100,
page: 1,
with_deleted: false,
order_field: sorting[0].id,
order_direction: sorting[0].desc == false ? 'ASC' : 'DESC'
});
setTransactions(response?.data.list);
} catch (error) {
console.error('Error fetching transaction type', error);
}
};
const doFetchProvider = useCallback(async (sorting: any) => { const doFetchProvider = useCallback(async (sorting: any) => {
try { try {
const response = await GetData(`${API_URL}/provider/list`, { const response = await GetData(`${API_URL}/provider/list`, {
@ -178,8 +207,11 @@ const AddDialog = () => {
}; };
useEffect(() => { useEffect(() => {
doFetchProvider([{ id: 'id', desc: false }]); if (showAddDialog) {
}, []); doFetchProvider([{ id: 'id', desc: false }]);
getTransactionTypeList([{ id: 'name', desc: false }]);
}
}, [showAddDialog]);
useEffect(() => { useEffect(() => {
if (showAddDialog) { if (showAddDialog) {
@ -199,7 +231,7 @@ const AddDialog = () => {
return ( return (
<Dialog open={showAddDialog} onOpenChange={(open) => handleAddDialog(open)}> <Dialog open={showAddDialog} onOpenChange={(open) => handleAddDialog(open)}>
<DialogContent className="container-fixed max-w-[768px] flex flex-col p-5 overflow-hidden"> <DialogContent className="container-fixed max-w-[1000px] flex flex-col p-5 overflow-hidden">
<DialogHeader> <DialogHeader>
<DialogTitle>Product - Create</DialogTitle> <DialogTitle>Product - Create</DialogTitle>
<DialogDescription></DialogDescription> <DialogDescription></DialogDescription>
@ -215,13 +247,13 @@ const AddDialog = () => {
)} )}
<form onSubmit={handleSubmit}> <form onSubmit={handleSubmit}>
<div className="card-body grid gap-5"> <div className="grid gap-5 card-body">
<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="flex items-center gap-1 form-label 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="flex flex-col grow">
<Input <Input
className={`input ${errors.name ? 'border-red-500' : ''}`} className={`input ${errors.name ? 'border-red-500' : ''}`}
type="text" type="text"
@ -234,7 +266,7 @@ const AddDialog = () => {
}} }}
/> />
{errors.name && ( {errors.name && (
<span className="text-red-500 text-xs mt-1">{errors.name}</span> <span className="mt-1 text-xs text-red-500">{errors.name}</span>
)} )}
</div> </div>
</div> </div>
@ -242,10 +274,10 @@ const AddDialog = () => {
<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="flex items-center gap-1 form-label 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="flex flex-col grow">
<Input <Input
className={`input ${errors.type ? 'border-red-500' : ''}`} className={`input ${errors.type ? 'border-red-500' : ''}`}
type="text" type="text"
@ -258,7 +290,7 @@ const AddDialog = () => {
}} }}
/> />
{errors.type && ( {errors.type && (
<span className="text-red-500 text-xs mt-1">{errors.type}</span> <span className="mt-1 text-xs text-red-500">{errors.type}</span>
)} )}
</div> </div>
</div> </div>
@ -266,10 +298,10 @@ const AddDialog = () => {
<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="flex items-center gap-1 form-label 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="flex flex-col grow">
<Input <Input
className={`input ${errors.code ? 'border-red-500' : ''}`} className={`input ${errors.code ? 'border-red-500' : ''}`}
type="text" type="text"
@ -282,7 +314,7 @@ const AddDialog = () => {
}} }}
/> />
{errors.code && ( {errors.code && (
<span className="text-red-500 text-xs mt-1">{errors.code}</span> <span className="mt-1 text-xs text-red-500">{errors.code}</span>
)} )}
</div> </div>
</div> </div>
@ -290,10 +322,10 @@ const AddDialog = () => {
<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="flex items-center gap-1 form-label 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="flex flex-col grow">
<Input <Input
className={`input ${errors.description ? 'border-red-500' : ''}`} className={`input ${errors.description ? 'border-red-500' : ''}`}
type="text" type="text"
@ -306,7 +338,7 @@ const AddDialog = () => {
}} }}
/> />
{errors.description && ( {errors.description && (
<span className="text-red-500 text-xs mt-1">{errors.description}</span> <span className="mt-1 text-xs text-red-500">{errors.description}</span>
)} )}
</div> </div>
</div> </div>
@ -314,10 +346,10 @@ const AddDialog = () => {
<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="flex items-center gap-1 form-label 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="flex flex-col grow">
<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 ?? ''}
@ -336,7 +368,7 @@ const AddDialog = () => {
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="mt-1 text-xs text-red-500">{errors.price_point}</span>
)} )}
</div> </div>
</div> </div>
@ -344,10 +376,10 @@ const AddDialog = () => {
<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="flex items-center gap-1 form-label 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="flex flex-col grow">
<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 ?? ''}
@ -366,7 +398,7 @@ const AddDialog = () => {
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="mt-1 text-xs text-red-500">{errors.price_cash}</span>
)} )}
</div> </div>
</div> </div>
@ -374,10 +406,10 @@ const AddDialog = () => {
<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="flex items-center gap-1 form-label 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="flex flex-col grow">
<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 ?? ''}
@ -396,7 +428,7 @@ const AddDialog = () => {
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="mt-1 text-xs text-red-500">{errors.cashback_point}</span>
)} )}
</div> </div>
</div> </div>
@ -404,10 +436,10 @@ const AddDialog = () => {
<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="flex items-center gap-1 form-label 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="flex flex-col grow">
<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 ?? ''}
@ -426,7 +458,7 @@ const AddDialog = () => {
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="mt-1 text-xs text-red-500">{errors.cashback_cash}</span>
)} )}
</div> </div>
</div> </div>
@ -434,10 +466,10 @@ const AddDialog = () => {
<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="flex items-center gap-1 form-label 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="flex flex-col grow">
<Select <Select
value={formField.status} value={formField.status}
onValueChange={(value) => { onValueChange={(value) => {
@ -454,7 +486,7 @@ const AddDialog = () => {
</SelectContent> </SelectContent>
</Select> </Select>
{errors.status && ( {errors.status && (
<span className="text-red-500 text-xs mt-1">{errors.status}</span> <span className="mt-1 text-xs text-red-500">{errors.status}</span>
)} )}
</div> </div>
</div> </div>
@ -462,10 +494,10 @@ const AddDialog = () => {
<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="flex items-center gap-1 form-label max-w-56">
Provider<span className="text-red-500">*</span> Provider<span className="text-red-500">*</span>
</label> </label>
<div className="grow flex flex-col"> <div className="flex flex-col grow">
<Select <Select
value={formField.provider} value={formField.provider}
onValueChange={(value) => { onValueChange={(value) => {
@ -490,7 +522,7 @@ const AddDialog = () => {
</SelectContent> </SelectContent>
</Select> </Select>
{errors.provider && ( {errors.provider && (
<span className="text-red-500 text-xs mt-1">{errors.provider}</span> <span className="mt-1 text-xs text-red-500">{errors.provider}</span>
)} )}
</div> </div>
</div> </div>
@ -498,10 +530,43 @@ const AddDialog = () => {
<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="flex items-center gap-1 form-label max-w-56">
Transaction Type<span className="text-red-500">*</span>
</label>
<div className="flex flex-col grow">
<Select
value={formField.transaction_type}
onValueChange={(e) => {
setFormField({ ...formField, transaction_type: e });
setErrors((prev) => ({ ...prev, transaction_type: '' }));
}}
>
<SelectTrigger
className={`input ${errors.transaction_type ? 'border-red-500' : ''}`}
>
<SelectValue placeholder="Select Transaction Type" />
</SelectTrigger>
<SelectContent>
{transactions.map((transaction) => (
<SelectItem key={transaction.id} value={transaction.id}>
{transaction.name}
</SelectItem>
))}
</SelectContent>
</Select>
{errors.transaction_type && (
<span className="mt-1 text-xs text-red-500">{errors.transaction_type}</span>
)}
</div>
</div>
</div>
<div className="w-full">
<div className="flex items-baseline flex-wrap lg:flex-nowrap gap-2.5">
<label className="flex items-center gap-1 form-label 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="flex flex-col grow">
<Select <Select
value={formField.process_on_third_party} value={formField.process_on_third_party}
onValueChange={(value) => { onValueChange={(value) => {
@ -520,7 +585,7 @@ const AddDialog = () => {
</SelectContent> </SelectContent>
</Select> </Select>
{errors.process_on_third_party && ( {errors.process_on_third_party && (
<span className="text-red-500 text-xs mt-1"> <span className="mt-1 text-xs text-red-500">
{errors.process_on_third_party} {errors.process_on_third_party}
</span> </span>
)} )}
@ -534,7 +599,7 @@ const AddDialog = () => {
</Button> </Button>
<Button variant="default" type="submit" disabled={isSubmitting}> <Button variant="default" type="submit" disabled={isSubmitting}>
{isSubmitting ? ( {isSubmitting ? (
<RefreshCw className="animate-spin h-8 w-8 text-white mx-7" /> <RefreshCw className="w-8 h-8 text-white animate-spin mx-7" />
) : ( ) : (
'Create' 'Create'
)} )}

758
src/pages/master/products/blocks/EditDialog.tsx
View File

@ -31,7 +31,14 @@ interface ProviderProps {
provider_name: string; provider_name: string;
} }
interface TransactionProps {
id: string;
name: string;
}
const API_URL = apiConfig.service_master_data; const API_URL = apiConfig.service_master_data;
const API_URL_TRANSACTION = apiConfig.service_transaction;
const EditDialog = () => { const EditDialog = () => {
const { showEditDialog, handleEditDialog, selectedProducts } = useManageProductsContext(); const { showEditDialog, handleEditDialog, selectedProducts } = useManageProductsContext();
const { reload } = useDataGrid(); const { reload } = useDataGrid();
@ -56,6 +63,7 @@ const EditDialog = () => {
cashback_cash: string | number | null; cashback_cash: string | number | null;
status: string; status: string;
provider: string; provider: string;
transaction_type: string;
process_on_third_party: string; process_on_third_party: string;
updated_by: string; updated_by: string;
updated_at: string; updated_at: string;
@ -70,48 +78,51 @@ const EditDialog = () => {
cashback_cash: null, cashback_cash: null,
status: '', status: '',
provider: '', provider: '',
transaction_type: '',
process_on_third_party: '', process_on_third_party: '',
updated_by: '', updated_by: '',
updated_at: '' updated_at: ''
}; };
const [formField, setFormField] = useState(initialState); const [formField, setFormField] = useState(initialState);
const [providers, setProviders] = useState<ProviderProps[]>([]); const [providers, setProviders] = useState<ProviderProps[]>([]);
const [transactions, setTransactions] = useState<TransactionProps[]>([]);
const resetForm = () => { const resetForm = () => {
setFormField(initialState); setFormField(initialState);
setAlert({ show: false, message: '' }); setAlert({ show: false, message: '' });
}; };
const[errors, setErrors] = useState<Record<string, string>>({}); const [errors, setErrors] = useState<Record<string, string>>({});
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: 'transaction_type', label: 'Transaction Type' },
] { key: 'process_on_third_party', label: 'Process On Third Party' }
const newErrors: Record<string, string> = {}; ];
let isValid = true; const newErrors: Record<string, string> = {};
requiredFields.forEach(({ key, label }) => { let isValid = true;
if ( requiredFields.forEach(({ key, label }) => {
formField[key as keyof typeof formField] === '' || if (
formField[key as keyof typeof formField] === null || formField[key as keyof typeof formField] === '' ||
formField[key as keyof typeof formField] === undefined formField[key as keyof typeof formField] === null ||
) { formField[key as keyof typeof formField] === undefined
newErrors[key] = `${label} is required`; ) {
toast.error(`${label} is required`); newErrors[key] = `${label} is required`;
isValid = false; toast.error(`${label} is required`);
} isValid = false;
}); }
setErrors(newErrors); });
return isValid; setErrors(newErrors);
} return isValid;
};
const doUpdateProduct = useCallback( const doUpdateProduct = useCallback(
async (e: React.FormEvent<HTMLFormElement>) => { async (e: React.FormEvent<HTMLFormElement>) => {
e.preventDefault(); e.preventDefault();
@ -146,6 +157,22 @@ const EditDialog = () => {
[selectedProducts, formField] [selectedProducts, formField]
); );
const getTransactionTypeList = async (sorting: any) => {
try {
const response = await GetData(`${API_URL_TRANSACTION}/transactiontype/list`, {
limit: 100,
page: 1,
with_deleted: false,
order_field: sorting[0].id,
order_direction: sorting[0].desc == false ? 'ASC' : 'DESC'
});
setTransactions(response?.data.list);
} catch (error) {
console.error('Error fetching transaction type', error);
}
};
const doFetchProvider = useCallback(async (sorting: any) => { const doFetchProvider = useCallback(async (sorting: any) => {
try { try {
const response = await GetData(`${API_URL}/provider/list`, { const response = await GetData(`${API_URL}/provider/list`, {
@ -227,8 +254,11 @@ const EditDialog = () => {
}, [formattedTime]); }, [formattedTime]);
useEffect(() => { useEffect(() => {
doFetchProvider([{ id: 'name', desc: false }]); if (showEditDialog) {
}, []); doFetchProvider([{ id: 'name', desc: false }]);
getTransactionTypeList([{ id: 'name', desc: false }]);
}
}, [showEditDialog]);
return ( return (
<Dialog open={showEditDialog} onOpenChange={(open) => handleEditDialog(open, null)}> <Dialog open={showEditDialog} onOpenChange={(open) => handleEditDialog(open, null)}>
@ -247,12 +277,12 @@ const EditDialog = () => {
{isLoading ? ( {isLoading ? (
<div className="flex flex-col items-center justify-center p-8"> <div className="flex flex-col items-center justify-center p-8">
<div className="animate-pulse flex space-x-4 w-full"> <div className="flex w-full space-x-4 animate-pulse">
<div className="flex-1 space-y-4 py-1"> <div className="flex-1 py-1 space-y-4">
<div className="h-4 bg-gray-200 rounded w-3/4"></div> <div className="w-3/4 h-4 bg-gray-200 rounded"></div>
<div className="space-y-2"> <div className="space-y-2">
<div className="h-4 bg-gray-200 rounded"></div> <div className="h-4 bg-gray-200 rounded"></div>
<div className="h-4 bg-gray-200 rounded w-5/6"></div> <div className="w-5/6 h-4 bg-gray-200 rounded"></div>
</div> </div>
</div> </div>
</div> </div>
@ -260,318 +290,366 @@ const EditDialog = () => {
</div> </div>
) : ( ) : (
<form onSubmit={handleUpdate}> <form onSubmit={handleUpdate}>
<div className="card-body grid gap-5"> <div className="grid gap-5 card-body">
{/* Name */} {/* Name */}
<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="flex items-center gap-1 form-label 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="flex flex-col grow">
<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) setErrors((prev) => ({ ...prev, name: '' })); if (e.target.value) setErrors((prev) => ({ ...prev, name: '' }));
}} }}
/> />
{errors.name && <span className="text-red-500 text-xs mt-1">{errors.name}</span>} {errors.name && (
<span className="mt-1 text-xs text-red-500">{errors.name}</span>
)}
</div>
</div> </div>
</div> </div>
</div>
{/* Type */}
{/* Type */} <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="flex items-center gap-1 form-label 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="flex flex-col grow">
<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) setErrors((prev) => ({ ...prev, type: '' }));
if (e.target.value) setErrors((prev) => ({ ...prev, type: '' })); }}
}} />
/> {errors.type && (
{errors.type && <span className="text-red-500 text-xs mt-1">{errors.type}</span>} <span className="mt-1 text-xs text-red-500">{errors.type}</span>
)}
</div>
</div> </div>
</div> </div>
</div>
{/* Code */}
{/* Code */} <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="flex items-center gap-1 form-label 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="flex flex-col grow">
<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) setErrors((prev) => ({ ...prev, code: '' }));
if (e.target.value) setErrors((prev) => ({ ...prev, code: '' })); }}
}} />
/> {errors.code && (
{errors.code && <span className="text-red-500 text-xs mt-1">{errors.code}</span>} <span className="mt-1 text-xs text-red-500">{errors.code}</span>
)}
</div>
</div> </div>
</div> </div>
</div>
{/* Description */}
{/* Description */} <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="flex items-center gap-1 form-label 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="flex flex-col grow">
<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) setErrors((prev) => ({ ...prev, description: '' }));
if (e.target.value) setErrors((prev) => ({ ...prev, description: '' })); }}
}} />
/> {errors.description && (
{errors.description && ( <span className="mt-1 text-xs text-red-500">{errors.description}</span>
<span className="text-red-500 text-xs mt-1">{errors.description}</span> )}
</div>
</div>
</div>
{/* Price Point */}
<div className="w-full">
<div className="flex items-baseline flex-wrap lg:flex-nowrap gap-2.5">
<label className="flex items-center gap-1 form-label max-w-56">
Price Point<span className="text-red-500">*</span>
</label>
<div className="flex flex-col grow">
<NumericFormat
className={`input ${errors.price_point ? 'border-red-500' : ''}`}
value={formField.price_point ?? ''}
thousandSeparator="."
decimalSeparator=","
allowNegative={false}
onValueChange={(values) => {
setFormField((prev) => ({
...prev,
price_point: values.floatValue ?? ''
}));
if (values.floatValue !== undefined)
setErrors((prev) => ({ ...prev, price_point: '' }));
}}
placeholder="Enter Price Point"
/>
{errors.price_point && (
<span className="mt-1 text-xs text-red-500">{errors.price_point}</span>
)}
</div>
</div>
</div>
{/* Price Cash */}
<div className="w-full">
<div className="flex items-baseline flex-wrap lg:flex-nowrap gap-2.5">
<label className="flex items-center gap-1 form-label max-w-56">
Price Cash<span className="text-red-500">*</span>
</label>
<div className="flex flex-col grow">
<NumericFormat
className={`input ${errors.price_cash ? 'border-red-500' : ''}`}
value={formField.price_cash ?? ''}
thousandSeparator="."
decimalSeparator=","
allowNegative={false}
onValueChange={(values) => {
setFormField((prev) => ({
...prev,
price_cash: values.floatValue ?? ''
}));
if (values.floatValue !== undefined)
setErrors((prev) => ({ ...prev, price_cash: '' }));
}}
placeholder="Enter Price Cash"
/>
{errors.price_cash && (
<span className="mt-1 text-xs text-red-500">{errors.price_cash}</span>
)}
</div>
</div>
</div>
{/* Cashback Point */}
<div className="w-full">
<div className="flex items-baseline flex-wrap lg:flex-nowrap gap-2.5">
<label className="flex items-center gap-1 form-label max-w-56">
Cashback Point<span className="text-red-500">*</span>
</label>
<div className="flex flex-col grow">
<NumericFormat
className={`input ${errors.cashback_point ? 'border-red-500' : ''}`}
value={formField.cashback_point ?? ''}
thousandSeparator="."
decimalSeparator=","
allowNegative={false}
onValueChange={(values) => {
setFormField((prev) => ({
...prev,
cashback_point: values.floatValue ?? ''
}));
if (values.floatValue !== undefined)
setErrors((prev) => ({ ...prev, cashback_point: '' }));
}}
placeholder="Enter Cashback Point"
/>
{errors.cashback_point && (
<span className="mt-1 text-xs text-red-500">{errors.cashback_point}</span>
)}
</div>
</div>
</div>
{/* Cashback Cash */}
<div className="w-full">
<div className="flex items-baseline flex-wrap lg:flex-nowrap gap-2.5">
<label className="flex items-center gap-1 form-label max-w-56">
Cashback Cash<span className="text-red-500">*</span>
</label>
<div className="flex flex-col grow">
<NumericFormat
className={`input ${errors.cashback_cash ? 'border-red-500' : ''}`}
value={formField.cashback_cash ?? ''}
thousandSeparator="."
decimalSeparator=","
allowNegative={false}
onValueChange={(values) => {
setFormField((prev) => ({
...prev,
cashback_cash: values.floatValue ?? ''
}));
if (values.floatValue !== undefined)
setErrors((prev) => ({ ...prev, cashback_cash: '' }));
}}
placeholder="Enter Cashback Cash"
/>
{errors.cashback_cash && (
<span className="mt-1 text-xs text-red-500">{errors.cashback_cash}</span>
)}
</div>
</div>
</div>
{/* Status */}
<div className="w-full">
<div className="flex items-baseline flex-wrap lg:flex-nowrap gap-2.5">
<label className="flex items-center gap-1 form-label max-w-56">
Status<span className="text-red-500">*</span>
</label>
<div className="flex flex-col grow">
<Select
value={formField.status}
onValueChange={(e) => {
setFormField({ ...formField, status: e });
setErrors((prev) => ({ ...prev, status: '' }));
}}
>
<SelectTrigger
className={`input ${errors.status ? 'border-red-500' : ''}`}
>
<SelectValue placeholder="Select a Status" />
</SelectTrigger>
<SelectContent>
<SelectItem value="Y">Active</SelectItem>
<SelectItem value="N">Inactive</SelectItem>
</SelectContent>
</Select>
{errors.status && (
<span className="mt-1 text-xs text-red-500">{errors.status}</span>
)}
</div>
</div>
</div>
{/* Provider */}
<div className="w-full">
<div className="flex items-baseline flex-wrap lg:flex-nowrap gap-2.5">
<label className="flex items-center gap-1 form-label max-w-56">
Provider
</label>
<div className="flex flex-col grow">
<Select
value={formField.provider}
onValueChange={(e) => {
setFormField({ ...formField, provider: e });
setErrors((prev) => ({ ...prev, provider: '' }));
}}
>
<SelectTrigger
className={`input ${errors.provider ? 'border-red-500' : ''}`}
>
<SelectValue placeholder="Select a Provider" />
</SelectTrigger>
<SelectContent>
{providers.map((provider) => (
<SelectItem
key={provider.provider_id}
value={provider.provider_id.toString()}
>
{provider.provider_name}
</SelectItem>
))}
</SelectContent>
</Select>
{errors.provider && (
<span className="mt-1 text-xs text-red-500">{errors.provider}</span>
)}
</div>
</div>
</div>
<div className="w-full">
<div className="flex items-baseline flex-wrap lg:flex-nowrap gap-2.5">
<label className="flex items-center gap-1 form-label max-w-56">
Transaction Type<span className="text-red-500">*</span>
</label>
<div className="flex flex-col grow">
<Select
value={formField.transaction_type}
onValueChange={(e) => {
setFormField({ ...formField, transaction_type: e });
setErrors((prev) => ({ ...prev, transaction_type: '' }));
}}
>
<SelectTrigger
className={`input ${errors.transaction_type ? 'border-red-500' : ''}`}
>
<SelectValue placeholder="Select Transaction Type" />
</SelectTrigger>
<SelectContent>
{transactions.map((transaction) => (
<SelectItem key={transaction.id} value={transaction.id}>
{transaction.name}
</SelectItem>
))}
</SelectContent>
</Select>
{errors.transaction_type && (
<span className="mt-1 text-xs text-red-500">
{errors.transaction_type}
</span>
)}
</div>
</div>
</div>
{/* Process on Third Party */}
<div className="w-full">
<div className="flex items-baseline flex-wrap lg:flex-nowrap gap-2.5">
<label className="flex items-center gap-1 form-label max-w-56">
Process on Third Party<span className="text-red-500">*</span>
</label>
<div className="flex flex-col grow">
<Select
value={formField.process_on_third_party}
onValueChange={(value) => {
setFormField({ ...formField, process_on_third_party: value });
setErrors((prev) => ({ ...prev, process_on_third_party: '' }));
}}
>
<SelectTrigger
className={`input ${errors.process_on_third_party ? 'border-red-500' : ''}`}
>
<SelectValue placeholder="Select Status" />
</SelectTrigger>
<SelectContent>
<SelectItem value="Y">Yes</SelectItem>
<SelectItem value="N">No</SelectItem>
</SelectContent>
</Select>
{errors.process_on_third_party && (
<span className="mt-1 text-xs text-red-500">
{errors.process_on_third_party}
</span>
)}
</div>
</div>
</div>
<div className="flex justify-end gap-5">
<Button variant="default" type="submit" disabled={isSubmitting}>
{isSubmitting ? (
<RefreshCw className="w-8 h-8 text-white animate-spin mx-7" />
) : (
'Save Changes'
)} )}
</div> </Button>
</div> </div>
</div> </div>
</form>
{/* Price Point */}
<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">
Price Point<span className="text-red-500">*</span>
</label>
<div className="grow flex flex-col">
<NumericFormat
className={`input ${errors.price_point ? 'border-red-500' : ''}`}
value={formField.price_point ?? ''}
thousandSeparator="."
decimalSeparator=","
allowNegative={false}
onValueChange={(values) => {
setFormField((prev) => ({
...prev,
price_point: values.floatValue ?? ''
}));
if (values.floatValue !== undefined)
setErrors((prev) => ({ ...prev, price_point: '' }));
}}
placeholder="Enter Price Point"
/>
{errors.price_point && (
<span className="text-red-500 text-xs mt-1">{errors.price_point}</span>
)}
</div>
</div>
</div>
{/* Price Cash */}
<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">
Price Cash<span className="text-red-500">*</span>
</label>
<div className="grow flex flex-col">
<NumericFormat
className={`input ${errors.price_cash ? 'border-red-500' : ''}`}
value={formField.price_cash ?? ''}
thousandSeparator="."
decimalSeparator=","
allowNegative={false}
onValueChange={(values) => {
setFormField((prev) => ({
...prev,
price_cash: values.floatValue ?? ''
}));
if (values.floatValue !== undefined)
setErrors((prev) => ({ ...prev, price_cash: '' }));
}}
placeholder="Enter Price Cash"
/>
{errors.price_cash && (
<span className="text-red-500 text-xs mt-1">{errors.price_cash}</span>
)}
</div>
</div>
</div>
{/* Cashback Point */}
<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">
Cashback Point<span className="text-red-500">*</span>
</label>
<div className="grow flex flex-col">
<NumericFormat
className={`input ${errors.cashback_point ? 'border-red-500' : ''}`}
value={formField.cashback_point ?? ''}
thousandSeparator="."
decimalSeparator=","
allowNegative={false}
onValueChange={(values) => {
setFormField((prev) => ({
...prev,
cashback_point: values.floatValue ?? ''
}));
if (values.floatValue !== undefined)
setErrors((prev) => ({ ...prev, cashback_point: '' }));
}}
placeholder="Enter Cashback Point"
/>
{errors.cashback_point && (
<span className="text-red-500 text-xs mt-1">{errors.cashback_point}</span>
)}
</div>
</div>
</div>
{/* Cashback Cash */}
<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">
Cashback Cash<span className="text-red-500">*</span>
</label>
<div className="grow flex flex-col">
<NumericFormat
className={`input ${errors.cashback_cash ? 'border-red-500' : ''}`}
value={formField.cashback_cash ?? ''}
thousandSeparator="."
decimalSeparator=","
allowNegative={false}
onValueChange={(values) => {
setFormField((prev) => ({
...prev,
cashback_cash: values.floatValue ?? ''
}));
if (values.floatValue !== undefined)
setErrors((prev) => ({ ...prev, cashback_cash: '' }));
}}
placeholder="Enter Cashback Cash"
/>
{errors.cashback_cash && (
<span className="text-red-500 text-xs mt-1">{errors.cashback_cash}</span>
)}
</div>
</div>
</div>
{/* Status */}
<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">
Status<span className="text-red-500">*</span>
</label>
<div className="grow flex flex-col">
<Select
value={formField.status}
onValueChange={(e) => {
setFormField({ ...formField, status: e });
setErrors((prev) => ({ ...prev, status: '' }));
}}
>
<SelectTrigger className={`input ${errors.status ? 'border-red-500' : ''}`}>
<SelectValue placeholder="Select a Status" />
</SelectTrigger>
<SelectContent>
<SelectItem value="Y">Active</SelectItem>
<SelectItem value="N">Inactive</SelectItem>
</SelectContent>
</Select>
{errors.status && (
<span className="text-red-500 text-xs mt-1">{errors.status}</span>
)}
</div>
</div>
</div>
{/* Provider */}
<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">
Provider
</label>
<div className="grow flex flex-col">
<Select
value={formField.provider}
onValueChange={(e) => {
setFormField({ ...formField, provider: e });
setErrors((prev) => ({ ...prev, provider: '' }));
}}
>
<SelectTrigger className={`input ${errors.provider ? 'border-red-500' : ''}`}>
<SelectValue placeholder="Select a Provider" />
</SelectTrigger>
<SelectContent>
{providers.map((provider) => (
<SelectItem
key={provider.provider_id}
value={provider.provider_id.toString()}
>
{provider.provider_name}
</SelectItem>
))}
</SelectContent>
</Select>
{errors.provider && (
<span className="text-red-500 text-xs mt-1">{errors.provider}</span>
)}
</div>
</div>
</div>
{/* Process on Third Party */}
<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">
Process on Third Party<span className="text-red-500">*</span>
</label>
<div className="grow flex flex-col">
<Select
value={formField.process_on_third_party}
onValueChange={(value) => {
setFormField({ ...formField, process_on_third_party: value });
setErrors((prev) => ({ ...prev, process_on_third_party: '' }));
}}
>
<SelectTrigger className={`input ${errors.process_on_third_party ? 'border-red-500' : ''}`}>
<SelectValue placeholder="Select Status" />
</SelectTrigger>
<SelectContent>
<SelectItem value="Y">Yes</SelectItem>
<SelectItem value="N">No</SelectItem>
</SelectContent>
</Select>
{errors.process_on_third_party && (
<span className="text-red-500 text-xs mt-1">{errors.process_on_third_party}</span>
)}
</div>
</div>
</div>
<div className="flex justify-end gap-5">
<Button variant="default" type="submit" disabled={isSubmitting}>
{isSubmitting ? (
<RefreshCw className="animate-spin h-8 w-8 text-white mx-7" />
) : (
'Save Changes'
)}
</Button>
</div>
</div>
</form>
)} )}
</div> </div>
</DialogBody> </DialogBody>

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

@ -42,14 +42,8 @@ export interface CustomerProps {
username: string; username: string;
} }
export interface TransactionProps {
id: string;
name: string;
}
const API_URL_CUSTOMER = apiConfig.service_customer; const API_URL_CUSTOMER = apiConfig.service_customer;
const API_URL_MASTERDATA = apiConfig.service_master_data; const API_URL_MASTERDATA = apiConfig.service_master_data;
const API_URL_TRANSACTION = apiConfig.service_transaction;
const AddDialog = () => { const AddDialog = () => {
const { showAddDialog, handleAddDialog, selectedProvider } = useManageProviderContext(); const { showAddDialog, handleAddDialog, selectedProvider } = useManageProviderContext();
@ -69,8 +63,7 @@ const AddDialog = () => {
{ key: 'name', label: 'Name' }, { key: 'name', label: 'Name' },
{ key: 'description', label: 'Description' }, { key: 'description', label: 'Description' },
{ key: 'type', label: 'Type' }, { key: 'type', label: 'Type' },
{ key: 'status', label: 'Status' }, { key: 'status', label: 'Status' }
{ key: 'transaction_type', label: 'Transaction Type' }
]; ];
const newErrors: Record<string, string> = {}; const newErrors: Record<string, string> = {};
let isValid = true; let isValid = true;
@ -93,7 +86,6 @@ const AddDialog = () => {
description: string; description: string;
type: string; type: string;
status: string; status: string;
transaction_type: string;
agent: string | null; agent: string | null;
created_by: string; created_by: string;
created_at: string; created_at: string;
@ -102,7 +94,6 @@ const AddDialog = () => {
description: '', description: '',
type: '', type: '',
status: '', status: '',
transaction_type: '',
agent: null, agent: null,
created_by: '', created_by: '',
created_at: '' created_at: ''
@ -110,7 +101,6 @@ const AddDialog = () => {
const [formField, setFormField] = useState(initialState); const [formField, setFormField] = useState(initialState);
const [customers, setCustomers] = useState<CustomerProps[]>([]); const [customers, setCustomers] = useState<CustomerProps[]>([]);
const [transactions, setTransactions] = useState<TransactionProps[]>([]);
const created_time = new Date(); const created_time = new Date();
const formattedTime = created_time.toISOString().slice(0, 19).replace('T', ' '); const formattedTime = created_time.toISOString().slice(0, 19).replace('T', ' ');
@ -163,23 +153,6 @@ const AddDialog = () => {
doCreateProvider(e); doCreateProvider(e);
}; };
const getTransactionTypeList = async (sorting: any) => {
try {
const response = await GetData(`${API_URL_TRANSACTION}/transactiontype/list`, {
limit: 100,
page: 1,
with_deleted: false,
order_field: sorting[0].id,
order_direction: sorting[0].desc == false ? 'ASC' : 'DESC'
});
// console.log('TRANSACTION TYPE: ', response?.data);
setTransactions(response?.data.list);
} catch (error) {
console.error('Error fetching transaction type', error);
}
};
const getCustomerList = async (sorting: any) => { const getCustomerList = async (sorting: any) => {
try { try {
sorting = sorting.length == 0 ? [{ id: 'name', desc: false }] : sorting; sorting = sorting.length == 0 ? [{ id: 'name', desc: false }] : sorting;
@ -209,9 +182,10 @@ const AddDialog = () => {
}, [formattedTime, parsedUser.username, showAddDialog]); }, [formattedTime, parsedUser.username, showAddDialog]);
useEffect(() => { useEffect(() => {
getCustomerList([{ id: 'id', desc: false }]); if (showAddDialog) {
getTransactionTypeList([{ id: 'name', desc: false }]); getCustomerList([{ id: 'id', desc: false }]);
}, []); }
}, [showAddDialog]);
useEffect(() => { useEffect(() => {
if (showAddDialog === false) { if (showAddDialog === false) {
@ -235,13 +209,13 @@ const AddDialog = () => {
)} )}
<form onSubmit={handleSubmit}> <form onSubmit={handleSubmit}>
<div className="card-body grid gap-5"> <div className="grid gap-5 card-body">
<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="flex items-center gap-1 form-label 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="flex flex-col grow">
<Input <Input
className={`input ${errors.name ? 'border-red-500' : ''}`} className={`input ${errors.name ? 'border-red-500' : ''}`}
type="text" type="text"
@ -252,7 +226,7 @@ const AddDialog = () => {
}} }}
/> />
{errors.name && ( {errors.name && (
<span className="text-red-500 text-xs mt-1">{errors.name}</span> <span className="mt-1 text-xs text-red-500">{errors.name}</span>
)} )}
</div> </div>
</div> </div>
@ -260,10 +234,10 @@ const AddDialog = () => {
<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="flex items-center gap-1 form-label 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="flex flex-col grow">
<Input <Input
className={`input ${errors.description ? 'border-red-500' : ''}`} className={`input ${errors.description ? 'border-red-500' : ''}`}
type="text" type="text"
@ -274,7 +248,7 @@ const AddDialog = () => {
}} }}
/> />
{errors.description && ( {errors.description && (
<span className="text-red-500 text-xs mt-1">{errors.description}</span> <span className="mt-1 text-xs text-red-500">{errors.description}</span>
)} )}
</div> </div>
</div> </div>
@ -282,10 +256,10 @@ const AddDialog = () => {
<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="flex items-center gap-1 form-label 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="flex flex-col grow">
<Select <Select
value={formField.type} value={formField.type}
onValueChange={(e) => { onValueChange={(e) => {
@ -302,17 +276,17 @@ const AddDialog = () => {
</SelectContent> </SelectContent>
</Select> </Select>
{errors.type && ( {errors.type && (
<span className="text-red-500 text-xs mt-1">{errors.type}</span> <span className="mt-1 text-xs text-red-500">{errors.type}</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="flex items-center gap-1 form-label 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="flex flex-col grow">
<Select <Select
value={formField.status} value={formField.status}
onValueChange={(e) => { onValueChange={(e) => {
@ -329,40 +303,7 @@ const AddDialog = () => {
</SelectContent> </SelectContent>
</Select> </Select>
{errors.status && ( {errors.status && (
<span className="text-red-500 text-xs mt-1">{errors.status}</span> <span className="mt-1 text-xs text-red-500">{errors.status}</span>
)}
</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">
Transaction Type<span className="text-red-500">*</span>
</label>
<div className="grow flex flex-col">
<Select
value={formField.transaction_type}
onValueChange={(e) => {
setFormField({ ...formField, transaction_type: e });
setErrors((prev) => ({ ...prev, transaction_type: '' }));
}}
>
<SelectTrigger
className={`input ${errors.transaction_type ? 'border-red-500' : ''}`}
>
<SelectValue placeholder="Select Transaction Type" />
</SelectTrigger>
<SelectContent>
{transactions.map((transaction) => (
<SelectItem key={transaction.id} value={transaction.id}>
{transaction.name}
</SelectItem>
))}
</SelectContent>
</Select>
{errors.transaction_type && (
<span className="text-red-500 text-xs mt-1">{errors.transaction_type}</span>
)} )}
</div> </div>
</div> </div>
@ -371,14 +312,14 @@ const AddDialog = () => {
{formField.type === 'agent' ? ( {formField.type === 'agent' ? (
<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="flex items-center gap-1 form-label max-w-56">
Agent Name<span className="text-red-500">*</span> Agent Name<span className="text-red-500">*</span>
</label> </label>
<Popover open={open} onOpenChange={setOpen}> <Popover open={open} onOpenChange={setOpen}>
<PopoverTrigger asChild> <PopoverTrigger asChild>
<button <button
type="button" type="button"
className="input col-span-5 text-left" className="col-span-5 text-left input"
style={{ color: 'inherit' }} style={{ color: 'inherit' }}
> >
{customers.find((customer) => customer.id === formField.agent) {customers.find((customer) => customer.id === formField.agent)
@ -422,7 +363,7 @@ const AddDialog = () => {
) : ( ) : (
<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="flex items-center gap-1 form-label max-w-56">
Agent Name Agent Name
</label> </label>
<Input <Input
@ -441,7 +382,7 @@ const AddDialog = () => {
</Button> </Button>
<Button variant="default" type="submit" disabled={isSubmitting}> <Button variant="default" type="submit" disabled={isSubmitting}>
{isSubmitting ? ( {isSubmitting ? (
<RefreshCw className="animate-spin h-8 w-8 text-white mx-3" /> <RefreshCw className="w-8 h-8 mx-3 text-white animate-spin" />
) : ( ) : (
'Create' 'Create'
)} )}

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

@ -22,7 +22,7 @@ import {
SelectTrigger, SelectTrigger,
SelectValue SelectValue
} from '@/components/ui/select'; } from '@/components/ui/select';
import { CustomerProps, TransactionProps } from './AddDialog'; import { CustomerProps } from './AddDialog';
import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover'; import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover';
import { import {
Command, Command,
@ -37,7 +37,6 @@ import { RefreshCw } from 'lucide-react';
const API_URL_CUSTOMER = apiConfig.service_customer; const API_URL_CUSTOMER = apiConfig.service_customer;
const API_URL_MASTERDATA = apiConfig.service_master_data; const API_URL_MASTERDATA = apiConfig.service_master_data;
const API_URL_TRANSACTION = apiConfig.service_transaction;
const EditDialog = () => { const EditDialog = () => {
const { showEditDialog, handleEditDialog, selectedProvider, provider } = const { showEditDialog, handleEditDialog, selectedProvider, provider } =
@ -59,8 +58,7 @@ const EditDialog = () => {
{ key: 'name', label: 'Name' }, { key: 'name', label: 'Name' },
{ key: 'description', label: 'Description' }, { key: 'description', label: 'Description' },
{ key: 'type', label: 'Type' }, { key: 'type', label: 'Type' },
{ key: 'status', label: 'Status' }, { key: 'status', label: 'Status' }
{ key: 'transaction_type', label: 'Transaction Type' }
]; ];
const newErrors: Record<string, string> = {}; const newErrors: Record<string, string> = {};
let isValid = true; let isValid = true;
@ -83,7 +81,6 @@ const EditDialog = () => {
description: string; description: string;
type: string; type: string;
status: string; status: string;
transaction_type: string;
agent: string | null; agent: string | null;
updated_by: string; updated_by: string;
updated_at: string; updated_at: string;
@ -92,14 +89,12 @@ const EditDialog = () => {
description: '', description: '',
type: '', type: '',
status: '', status: '',
transaction_type: '',
agent: null, agent: null,
updated_by: '', updated_by: '',
updated_at: '' updated_at: ''
}; };
const [formField, setFormField] = useState(initialState); const [formField, setFormField] = useState(initialState);
const [transactions, setTransactions] = useState<TransactionProps[]>([]);
const [customers, setCustomers] = useState<CustomerProps[]>([]); const [customers, setCustomers] = useState<CustomerProps[]>([]);
const [isSubmitting, setIsSubmitting] = useState(false); const [isSubmitting, setIsSubmitting] = useState(false);
@ -162,23 +157,6 @@ const EditDialog = () => {
} }
}; };
const getTransactionTypeList = async (sorting: any) => {
try {
const response = await GetData(`${API_URL_TRANSACTION}/transactiontype/list`, {
limit: 100,
page: 1,
with_deleted: false,
order_field: sorting[0].id,
order_direction: sorting[0].desc == false ? 'ASC' : 'DESC'
});
// console.log('TRANSACTION TYPE: ', response?.data);
setTransactions(response?.data.list);
} catch (error) {
console.error('Error fetching transaction type', error);
}
};
const doFetchData = useCallback(async (id: string) => { const doFetchData = useCallback(async (id: string) => {
setIsLoading(true); setIsLoading(true);
const minDelay = new Promise((resolve) => setTimeout(resolve, 300)); const minDelay = new Promise((resolve) => setTimeout(resolve, 300));
@ -234,9 +212,10 @@ const EditDialog = () => {
}, [formattedTime]); }, [formattedTime]);
useEffect(() => { useEffect(() => {
getCustomerList([{ id: 'id', desc: false }]); if (showEditDialog) {
getTransactionTypeList([{ id: 'name', desc: false }]); getCustomerList([{ id: 'id', desc: false }]);
}, []); }
}, [showEditDialog]);
return ( return (
<Dialog open={showEditDialog} onOpenChange={(open) => handleEditDialog(open, null)}> <Dialog open={showEditDialog} onOpenChange={(open) => handleEditDialog(open, null)}>
@ -255,12 +234,12 @@ const EditDialog = () => {
{isLoading ? ( {isLoading ? (
<div className="flex flex-col items-center justify-center p-8"> <div className="flex flex-col items-center justify-center p-8">
<div className="animate-pulse flex space-x-4 w-full"> <div className="flex w-full space-x-4 animate-pulse">
<div className="flex-1 space-y-4 py-1"> <div className="flex-1 py-1 space-y-4">
<div className="h-4 bg-gray-200 rounded w-3/4"></div> <div className="w-3/4 h-4 bg-gray-200 rounded"></div>
<div className="space-y-2"> <div className="space-y-2">
<div className="h-4 bg-gray-200 rounded"></div> <div className="h-4 bg-gray-200 rounded"></div>
<div className="h-4 bg-gray-200 rounded w-5/6"></div> <div className="w-5/6 h-4 bg-gray-200 rounded"></div>
</div> </div>
</div> </div>
</div> </div>
@ -268,13 +247,13 @@ const EditDialog = () => {
</div> </div>
) : ( ) : (
<form onSubmit={handleUpdate}> <form onSubmit={handleUpdate}>
<div className="card-body grid gap-5"> <div className="grid gap-5 card-body">
<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="flex items-center gap-1 form-label 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="flex flex-col grow">
<Input <Input
className={`input ${errors.name ? 'border-red-500' : ''}`} className={`input ${errors.name ? 'border-red-500' : ''}`}
type="text" type="text"
@ -285,7 +264,7 @@ const EditDialog = () => {
}} }}
/> />
{errors.name && ( {errors.name && (
<span className="text-red-500 text-xs mt-1">{errors.name}</span> <span className="mt-1 text-xs text-red-500">{errors.name}</span>
)} )}
</div> </div>
</div> </div>
@ -294,10 +273,10 @@ const EditDialog = () => {
{/* Description */} {/* Description */}
<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="flex items-center gap-1 form-label 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="flex flex-col grow">
<Input <Input
className={`input ${errors.description ? 'border-red-500' : ''}`} className={`input ${errors.description ? 'border-red-500' : ''}`}
type="text" type="text"
@ -308,7 +287,7 @@ const EditDialog = () => {
}} }}
/> />
{errors.description && ( {errors.description && (
<span className="text-red-500 text-xs mt-1">{errors.description}</span> <span className="mt-1 text-xs text-red-500">{errors.description}</span>
)} )}
</div> </div>
</div> </div>
@ -316,10 +295,10 @@ const EditDialog = () => {
<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="flex items-center gap-1 form-label 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="flex flex-col grow">
<Select <Select
value={formField.type} value={formField.type}
onValueChange={(value) => { onValueChange={(value) => {
@ -336,7 +315,7 @@ const EditDialog = () => {
</SelectContent> </SelectContent>
</Select> </Select>
{errors.type && ( {errors.type && (
<span className="text-red-500 text-xs mt-1">{errors.type}</span> <span className="mt-1 text-xs text-red-500">{errors.type}</span>
)} )}
</div> </div>
</div> </div>
@ -344,10 +323,10 @@ const EditDialog = () => {
<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="flex items-center gap-1 form-label 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="flex flex-col grow">
<Select <Select
value={formField.status} value={formField.status}
onValueChange={(value) => { onValueChange={(value) => {
@ -366,42 +345,7 @@ const EditDialog = () => {
</SelectContent> </SelectContent>
</Select> </Select>
{errors.status && ( {errors.status && (
<span className="text-red-500 text-xs mt-1">{errors.status}</span> <span className="mt-1 text-xs text-red-500">{errors.status}</span>
)}
</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">
Transaction Type<span className="text-red-500">*</span>
</label>
<div className="grow flex flex-col">
<Select
value={formField.transaction_type}
onValueChange={(value) => {
setFormField({ ...formField, status: value });
setErrors((prev) => ({ ...prev, status: '' }));
}}
>
<SelectTrigger
className={`input ${errors.transaction_type ? 'border-red-500' : ''}`}
>
<SelectValue placeholder="Select Transaction Type" />
</SelectTrigger>
<SelectContent>
{transactions.map((transaction) => (
<SelectItem key={transaction.id} value={transaction.id}>
{transaction.name}
</SelectItem>
))}
</SelectContent>
</Select>
{errors.transaction_type && (
<span className="text-red-500 text-xs mt-1">
{errors.transaction_type}
</span>
)} )}
</div> </div>
</div> </div>
@ -410,14 +354,14 @@ const EditDialog = () => {
{formField.type === 'agent' ? ( {formField.type === 'agent' ? (
<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="flex items-center gap-1 form-label max-w-56">
Agent Name<span className="text-red-500">*</span> Agent Name<span className="text-red-500">*</span>
</label> </label>
<Popover open={open} onOpenChange={setOpen}> <Popover open={open} onOpenChange={setOpen}>
<PopoverTrigger asChild> <PopoverTrigger asChild>
<button <button
type="button" type="button"
className="input col-span-5 text-left" className="col-span-5 text-left input"
style={{ color: 'inherit' }} style={{ color: 'inherit' }}
> >
{customers.find((customer) => customer.id === formField.agent) {customers.find((customer) => customer.id === formField.agent)
@ -461,7 +405,7 @@ const EditDialog = () => {
) : ( ) : (
<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="flex items-center gap-1 form-label max-w-56">
Agent Name Agent Name
</label> </label>
<Input <Input
@ -477,7 +421,7 @@ const EditDialog = () => {
<div className="flex justify-end"> <div className="flex justify-end">
<Button variant="default" type="submit" disabled={isSubmitting}> <Button variant="default" type="submit" disabled={isSubmitting}>
{isSubmitting ? ( {isSubmitting ? (
<RefreshCw className="animate-spin h-8 w-8 text-white mx-3" /> <RefreshCw className="w-8 h-8 mx-3 text-white animate-spin" />
) : ( ) : (
'Save Changes' 'Save Changes'
)} )}