update: add field transaction_type on products and remove on provider
This commit is contained in:
Wikzyy
@ -31,7 +31,14 @@ interface ProviderProps {
|
||||
provider_name: string;
|
||||
}
|
||||
|
||||
interface TransactionProps {
|
||||
id: string;
|
||||
name: string;
|
||||
}
|
||||
|
||||
const API_URL = apiConfig.service_master_data;
|
||||
const API_URL_TRANSACTION = apiConfig.service_transaction;
|
||||
|
||||
const AddDialog = () => {
|
||||
const parentRef = useRef<any | null>(null);
|
||||
const parsedUser = getAuth()?.user;
|
||||
@ -53,6 +60,7 @@ const AddDialog = () => {
|
||||
cashback_cash: string | number | null;
|
||||
status: string;
|
||||
provider: string;
|
||||
transaction_type: string;
|
||||
process_on_third_party: string;
|
||||
created_by: string;
|
||||
created_at: string;
|
||||
@ -67,20 +75,24 @@ const AddDialog = () => {
|
||||
cashback_cash: null,
|
||||
status: '',
|
||||
provider: '',
|
||||
transaction_type: '',
|
||||
process_on_third_party: '',
|
||||
created_by: '',
|
||||
created_at: ''
|
||||
};
|
||||
const [formField, setFormField] = useState(initialState);
|
||||
const [providers, setProviders] = useState<ProviderProps[]>([]);
|
||||
const [transactions, setTransactions] = useState<TransactionProps[]>([]);
|
||||
const [isSubmitting, setIsSubmitting] = useState(false);
|
||||
const created_time = new Date();
|
||||
const formattedTime = created_time.toISOString().slice(0, 19).replace('T', ' ');
|
||||
const [errors, setErrors] = useState<Record<string, string>>({});
|
||||
|
||||
const resetForm = () => {
|
||||
setFormField(initialState);
|
||||
setErrors({});
|
||||
};
|
||||
|
||||
const validateForm = () => {
|
||||
const requiredFields = [
|
||||
{ key: 'name', label: 'Name' },
|
||||
@ -93,6 +105,7 @@ const AddDialog = () => {
|
||||
{ key: 'cashback_cash', label: 'Cashback Cash' },
|
||||
{ key: 'status', label: 'Status' },
|
||||
{ key: 'provider', label: 'Provider' },
|
||||
{ key: 'transaction_type', label: 'Transaction Type' },
|
||||
{ key: 'process_on_third_party', label: 'Process On Third Party' }
|
||||
];
|
||||
const newErrors: Record<string, string> = {};
|
||||
@ -146,6 +159,22 @@ const AddDialog = () => {
|
||||
[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) => {
|
||||
try {
|
||||
const response = await GetData(`${API_URL}/provider/list`, {
|
||||
@ -178,8 +207,11 @@ const AddDialog = () => {
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
doFetchProvider([{ id: 'id', desc: false }]);
|
||||
}, []);
|
||||
if (showAddDialog) {
|
||||
doFetchProvider([{ id: 'id', desc: false }]);
|
||||
getTransactionTypeList([{ id: 'name', desc: false }]);
|
||||
}
|
||||
}, [showAddDialog]);
|
||||
|
||||
useEffect(() => {
|
||||
if (showAddDialog) {
|
||||
@ -199,7 +231,7 @@ const AddDialog = () => {
|
||||
|
||||
return (
|
||||
<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>
|
||||
<DialogTitle>Product - Create</DialogTitle>
|
||||
<DialogDescription></DialogDescription>
|
||||
@ -215,13 +247,13 @@ const AddDialog = () => {
|
||||
)}
|
||||
|
||||
<form onSubmit={handleSubmit}>
|
||||
<div className="card-body grid gap-5">
|
||||
<div className="grid gap-5 card-body">
|
||||
<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">
|
||||
<label className="flex items-center gap-1 form-label max-w-56">
|
||||
Name<span className="text-red-500">*</span>
|
||||
</label>
|
||||
<div className="grow flex flex-col">
|
||||
<div className="flex flex-col grow">
|
||||
<Input
|
||||
className={`input ${errors.name ? 'border-red-500' : ''}`}
|
||||
type="text"
|
||||
@ -234,7 +266,7 @@ const AddDialog = () => {
|
||||
}}
|
||||
/>
|
||||
{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>
|
||||
@ -242,10 +274,10 @@ const AddDialog = () => {
|
||||
|
||||
<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">
|
||||
<label className="flex items-center gap-1 form-label max-w-56">
|
||||
Type<span className="text-red-500">*</span>
|
||||
</label>
|
||||
<div className="grow flex flex-col">
|
||||
<div className="flex flex-col grow">
|
||||
<Input
|
||||
className={`input ${errors.type ? 'border-red-500' : ''}`}
|
||||
type="text"
|
||||
@ -258,7 +290,7 @@ const AddDialog = () => {
|
||||
}}
|
||||
/>
|
||||
{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>
|
||||
@ -266,10 +298,10 @@ const AddDialog = () => {
|
||||
|
||||
<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">
|
||||
<label className="flex items-center gap-1 form-label max-w-56">
|
||||
Code<span className="text-red-500">*</span>
|
||||
</label>
|
||||
<div className="grow flex flex-col">
|
||||
<div className="flex flex-col grow">
|
||||
<Input
|
||||
className={`input ${errors.code ? 'border-red-500' : ''}`}
|
||||
type="text"
|
||||
@ -282,7 +314,7 @@ const AddDialog = () => {
|
||||
}}
|
||||
/>
|
||||
{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>
|
||||
@ -290,10 +322,10 @@ const AddDialog = () => {
|
||||
|
||||
<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">
|
||||
<label className="flex items-center gap-1 form-label max-w-56">
|
||||
Description<span className="text-red-500">*</span>
|
||||
</label>
|
||||
<div className="grow flex flex-col">
|
||||
<div className="flex flex-col grow">
|
||||
<Input
|
||||
className={`input ${errors.description ? 'border-red-500' : ''}`}
|
||||
type="text"
|
||||
@ -306,7 +338,7 @@ const AddDialog = () => {
|
||||
}}
|
||||
/>
|
||||
{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>
|
||||
@ -314,10 +346,10 @@ const AddDialog = () => {
|
||||
|
||||
<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">
|
||||
<label className="flex items-center gap-1 form-label max-w-56">
|
||||
Price Point<span className="text-red-500">*</span>
|
||||
</label>
|
||||
<div className="grow flex flex-col">
|
||||
<div className="flex flex-col grow">
|
||||
<NumericFormat
|
||||
className={`input ${errors.price_point ? 'border-red-500' : ''}`}
|
||||
value={formField.price_point ?? ''}
|
||||
@ -336,7 +368,7 @@ const AddDialog = () => {
|
||||
placeholder="Enter 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>
|
||||
@ -344,10 +376,10 @@ const AddDialog = () => {
|
||||
|
||||
<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">
|
||||
<label className="flex items-center gap-1 form-label max-w-56">
|
||||
Price Cash<span className="text-red-500">*</span>
|
||||
</label>
|
||||
<div className="grow flex flex-col">
|
||||
<div className="flex flex-col grow">
|
||||
<NumericFormat
|
||||
className={`input ${errors.price_cash ? 'border-red-500' : ''}`}
|
||||
value={formField.price_cash ?? ''}
|
||||
@ -366,7 +398,7 @@ const AddDialog = () => {
|
||||
placeholder="Enter 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>
|
||||
@ -374,10 +406,10 @@ const AddDialog = () => {
|
||||
|
||||
<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">
|
||||
<label className="flex items-center gap-1 form-label max-w-56">
|
||||
Cashback Point<span className="text-red-500">*</span>
|
||||
</label>
|
||||
<div className="grow flex flex-col">
|
||||
<div className="flex flex-col grow">
|
||||
<NumericFormat
|
||||
className={`input ${errors.cashback_point ? 'border-red-500' : ''}`}
|
||||
value={formField.cashback_point ?? ''}
|
||||
@ -396,7 +428,7 @@ const AddDialog = () => {
|
||||
placeholder="Enter 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>
|
||||
@ -404,10 +436,10 @@ const AddDialog = () => {
|
||||
|
||||
<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">
|
||||
<label className="flex items-center gap-1 form-label max-w-56">
|
||||
Cashback Cash<span className="text-red-500">*</span>
|
||||
</label>
|
||||
<div className="grow flex flex-col">
|
||||
<div className="flex flex-col grow">
|
||||
<NumericFormat
|
||||
className={`input ${errors.cashback_cash ? 'border-red-500' : ''}`}
|
||||
value={formField.cashback_cash ?? ''}
|
||||
@ -426,7 +458,7 @@ const AddDialog = () => {
|
||||
placeholder="Enter 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>
|
||||
@ -434,10 +466,10 @@ const AddDialog = () => {
|
||||
|
||||
<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">
|
||||
<label className="flex items-center gap-1 form-label max-w-56">
|
||||
Status<span className="text-red-500">*</span>
|
||||
</label>
|
||||
<div className="grow flex flex-col">
|
||||
<div className="flex flex-col grow">
|
||||
<Select
|
||||
value={formField.status}
|
||||
onValueChange={(value) => {
|
||||
@ -454,7 +486,7 @@ const AddDialog = () => {
|
||||
</SelectContent>
|
||||
</Select>
|
||||
{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>
|
||||
@ -462,10 +494,10 @@ const AddDialog = () => {
|
||||
|
||||
<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">
|
||||
<label className="flex items-center gap-1 form-label max-w-56">
|
||||
Provider<span className="text-red-500">*</span>
|
||||
</label>
|
||||
<div className="grow flex flex-col">
|
||||
<div className="flex flex-col grow">
|
||||
<Select
|
||||
value={formField.provider}
|
||||
onValueChange={(value) => {
|
||||
@ -490,7 +522,7 @@ const AddDialog = () => {
|
||||
</SelectContent>
|
||||
</Select>
|
||||
{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>
|
||||
@ -498,10 +530,43 @@ const AddDialog = () => {
|
||||
|
||||
<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">
|
||||
<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>
|
||||
</label>
|
||||
<div className="grow flex flex-col">
|
||||
<div className="flex flex-col grow">
|
||||
<Select
|
||||
value={formField.process_on_third_party}
|
||||
onValueChange={(value) => {
|
||||
@ -520,7 +585,7 @@ const AddDialog = () => {
|
||||
</SelectContent>
|
||||
</Select>
|
||||
{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}
|
||||
</span>
|
||||
)}
|
||||
@ -534,7 +599,7 @@ const AddDialog = () => {
|
||||
</Button>
|
||||
<Button variant="default" type="submit" disabled={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'
|
||||
)}
|
||||
|
||||
@ -31,7 +31,14 @@ interface ProviderProps {
|
||||
provider_name: string;
|
||||
}
|
||||
|
||||
interface TransactionProps {
|
||||
id: string;
|
||||
name: string;
|
||||
}
|
||||
|
||||
const API_URL = apiConfig.service_master_data;
|
||||
const API_URL_TRANSACTION = apiConfig.service_transaction;
|
||||
|
||||
const EditDialog = () => {
|
||||
const { showEditDialog, handleEditDialog, selectedProducts } = useManageProductsContext();
|
||||
const { reload } = useDataGrid();
|
||||
@ -56,6 +63,7 @@ const EditDialog = () => {
|
||||
cashback_cash: string | number | null;
|
||||
status: string;
|
||||
provider: string;
|
||||
transaction_type: string;
|
||||
process_on_third_party: string;
|
||||
updated_by: string;
|
||||
updated_at: string;
|
||||
@ -70,48 +78,51 @@ const EditDialog = () => {
|
||||
cashback_cash: null,
|
||||
status: '',
|
||||
provider: '',
|
||||
transaction_type: '',
|
||||
process_on_third_party: '',
|
||||
updated_by: '',
|
||||
updated_at: ''
|
||||
};
|
||||
const [formField, setFormField] = useState(initialState);
|
||||
const [providers, setProviders] = useState<ProviderProps[]>([]);
|
||||
const [transactions, setTransactions] = useState<TransactionProps[]>([]);
|
||||
|
||||
const resetForm = () => {
|
||||
setFormField(initialState);
|
||||
setAlert({ show: false, message: '' });
|
||||
};
|
||||
const[errors, setErrors] = useState<Record<string, string>>({});
|
||||
const validateForm = () => {
|
||||
const requiredFields = [
|
||||
{key:'name', label: 'Name'},
|
||||
{key:'type', label: 'Type'},
|
||||
{key:'code', label: 'Code'},
|
||||
{key:'description', label: 'Description'},
|
||||
{key:'price_point', label: 'Price Point'},
|
||||
{key:'price_cash', label: 'Price Cash'},
|
||||
{key:'cashback_point', label: 'Cashback Point'},
|
||||
{key:'cashback_cash', label: 'Cashback Cash'},
|
||||
{key:'status', label: 'Status'},
|
||||
{key:'provider', label: 'Provider'},
|
||||
{key:'process_on_third_party', label: 'Process On Third Party'}
|
||||
]
|
||||
const newErrors: Record<string, string> = {};
|
||||
let isValid = true;
|
||||
requiredFields.forEach(({ key, label }) => {
|
||||
if (
|
||||
formField[key as keyof typeof formField] === '' ||
|
||||
formField[key as keyof typeof formField] === null ||
|
||||
formField[key as keyof typeof formField] === undefined
|
||||
) {
|
||||
newErrors[key] = `${label} is required`;
|
||||
toast.error(`${label} is required`);
|
||||
isValid = false;
|
||||
}
|
||||
});
|
||||
setErrors(newErrors);
|
||||
return isValid;
|
||||
}
|
||||
const [errors, setErrors] = useState<Record<string, string>>({});
|
||||
const validateForm = () => {
|
||||
const requiredFields = [
|
||||
{ key: 'name', label: 'Name' },
|
||||
{ key: 'type', label: 'Type' },
|
||||
{ key: 'code', label: 'Code' },
|
||||
{ key: 'description', label: 'Description' },
|
||||
{ key: 'price_point', label: 'Price Point' },
|
||||
{ key: 'price_cash', label: 'Price Cash' },
|
||||
{ key: 'cashback_point', label: 'Cashback Point' },
|
||||
{ key: 'cashback_cash', label: 'Cashback Cash' },
|
||||
{ key: 'status', label: 'Status' },
|
||||
{ key: 'provider', label: 'Provider' },
|
||||
{ key: 'transaction_type', label: 'Transaction Type' },
|
||||
{ key: 'process_on_third_party', label: 'Process On Third Party' }
|
||||
];
|
||||
const newErrors: Record<string, string> = {};
|
||||
let isValid = true;
|
||||
requiredFields.forEach(({ key, label }) => {
|
||||
if (
|
||||
formField[key as keyof typeof formField] === '' ||
|
||||
formField[key as keyof typeof formField] === null ||
|
||||
formField[key as keyof typeof formField] === undefined
|
||||
) {
|
||||
newErrors[key] = `${label} is required`;
|
||||
toast.error(`${label} is required`);
|
||||
isValid = false;
|
||||
}
|
||||
});
|
||||
setErrors(newErrors);
|
||||
return isValid;
|
||||
};
|
||||
const doUpdateProduct = useCallback(
|
||||
async (e: React.FormEvent<HTMLFormElement>) => {
|
||||
e.preventDefault();
|
||||
@ -146,6 +157,22 @@ const EditDialog = () => {
|
||||
[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) => {
|
||||
try {
|
||||
const response = await GetData(`${API_URL}/provider/list`, {
|
||||
@ -227,8 +254,11 @@ const EditDialog = () => {
|
||||
}, [formattedTime]);
|
||||
|
||||
useEffect(() => {
|
||||
doFetchProvider([{ id: 'name', desc: false }]);
|
||||
}, []);
|
||||
if (showEditDialog) {
|
||||
doFetchProvider([{ id: 'name', desc: false }]);
|
||||
getTransactionTypeList([{ id: 'name', desc: false }]);
|
||||
}
|
||||
}, [showEditDialog]);
|
||||
|
||||
return (
|
||||
<Dialog open={showEditDialog} onOpenChange={(open) => handleEditDialog(open, null)}>
|
||||
@ -247,12 +277,12 @@ const EditDialog = () => {
|
||||
|
||||
{isLoading ? (
|
||||
<div className="flex flex-col items-center justify-center p-8">
|
||||
<div className="animate-pulse flex space-x-4 w-full">
|
||||
<div className="flex-1 space-y-4 py-1">
|
||||
<div className="h-4 bg-gray-200 rounded w-3/4"></div>
|
||||
<div className="flex w-full space-x-4 animate-pulse">
|
||||
<div className="flex-1 py-1 space-y-4">
|
||||
<div className="w-3/4 h-4 bg-gray-200 rounded"></div>
|
||||
<div className="space-y-2">
|
||||
<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>
|
||||
@ -260,318 +290,366 @@ const EditDialog = () => {
|
||||
</div>
|
||||
) : (
|
||||
<form onSubmit={handleUpdate}>
|
||||
<div className="card-body grid gap-5">
|
||||
{/* Name */}
|
||||
<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">
|
||||
Name<span className="text-red-500">*</span>
|
||||
</label>
|
||||
<div className="grow flex flex-col">
|
||||
<Input
|
||||
className={`input ${errors.name ? 'border-red-500' : ''}`}
|
||||
type="text"
|
||||
value={formField.name}
|
||||
onChange={(e) => {
|
||||
setFormField({ ...formField, name: e.target.value });
|
||||
if (e.target.value) setErrors((prev) => ({ ...prev, name: '' }));
|
||||
}}
|
||||
/>
|
||||
{errors.name && <span className="text-red-500 text-xs mt-1">{errors.name}</span>}
|
||||
<div className="grid gap-5 card-body">
|
||||
{/* Name */}
|
||||
<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">
|
||||
Name<span className="text-red-500">*</span>
|
||||
</label>
|
||||
<div className="flex flex-col grow">
|
||||
<Input
|
||||
className={`input ${errors.name ? 'border-red-500' : ''}`}
|
||||
type="text"
|
||||
value={formField.name}
|
||||
onChange={(e) => {
|
||||
setFormField({ ...formField, name: e.target.value });
|
||||
if (e.target.value) setErrors((prev) => ({ ...prev, name: '' }));
|
||||
}}
|
||||
/>
|
||||
{errors.name && (
|
||||
<span className="mt-1 text-xs text-red-500">{errors.name}</span>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Type */}
|
||||
<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">
|
||||
Type<span className="text-red-500">*</span>
|
||||
</label>
|
||||
<div className="grow flex flex-col">
|
||||
<Input
|
||||
className={`input ${errors.type ? 'border-red-500' : ''}`}
|
||||
type="text"
|
||||
value={formField.type}
|
||||
onChange={(e) => {
|
||||
setFormField({ ...formField, type: e.target.value });
|
||||
if (e.target.value) setErrors((prev) => ({ ...prev, type: '' }));
|
||||
}}
|
||||
/>
|
||||
{errors.type && <span className="text-red-500 text-xs mt-1">{errors.type}</span>}
|
||||
|
||||
{/* Type */}
|
||||
<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">
|
||||
Type<span className="text-red-500">*</span>
|
||||
</label>
|
||||
<div className="flex flex-col grow">
|
||||
<Input
|
||||
className={`input ${errors.type ? 'border-red-500' : ''}`}
|
||||
type="text"
|
||||
value={formField.type}
|
||||
onChange={(e) => {
|
||||
setFormField({ ...formField, type: e.target.value });
|
||||
if (e.target.value) setErrors((prev) => ({ ...prev, type: '' }));
|
||||
}}
|
||||
/>
|
||||
{errors.type && (
|
||||
<span className="mt-1 text-xs text-red-500">{errors.type}</span>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Code */}
|
||||
<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">
|
||||
Code<span className="text-red-500">*</span>
|
||||
</label>
|
||||
<div className="grow flex flex-col">
|
||||
<Input
|
||||
className={`input ${errors.code ? 'border-red-500' : ''}`}
|
||||
type="text"
|
||||
value={formField.code}
|
||||
onChange={(e) => {
|
||||
setFormField({ ...formField, code: e.target.value });
|
||||
if (e.target.value) setErrors((prev) => ({ ...prev, code: '' }));
|
||||
}}
|
||||
/>
|
||||
{errors.code && <span className="text-red-500 text-xs mt-1">{errors.code}</span>}
|
||||
|
||||
{/* Code */}
|
||||
<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">
|
||||
Code<span className="text-red-500">*</span>
|
||||
</label>
|
||||
<div className="flex flex-col grow">
|
||||
<Input
|
||||
className={`input ${errors.code ? 'border-red-500' : ''}`}
|
||||
type="text"
|
||||
value={formField.code}
|
||||
onChange={(e) => {
|
||||
setFormField({ ...formField, code: e.target.value });
|
||||
if (e.target.value) setErrors((prev) => ({ ...prev, code: '' }));
|
||||
}}
|
||||
/>
|
||||
{errors.code && (
|
||||
<span className="mt-1 text-xs text-red-500">{errors.code}</span>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Description */}
|
||||
<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">
|
||||
Description<span className="text-red-500">*</span>
|
||||
</label>
|
||||
<div className="grow flex flex-col">
|
||||
<Input
|
||||
className={`input ${errors.description ? 'border-red-500' : ''}`}
|
||||
type="text"
|
||||
value={formField.description}
|
||||
onChange={(e) => {
|
||||
setFormField({ ...formField, description: e.target.value });
|
||||
if (e.target.value) setErrors((prev) => ({ ...prev, description: '' }));
|
||||
}}
|
||||
/>
|
||||
{errors.description && (
|
||||
<span className="text-red-500 text-xs mt-1">{errors.description}</span>
|
||||
|
||||
{/* Description */}
|
||||
<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">
|
||||
Description<span className="text-red-500">*</span>
|
||||
</label>
|
||||
<div className="flex flex-col grow">
|
||||
<Input
|
||||
className={`input ${errors.description ? 'border-red-500' : ''}`}
|
||||
type="text"
|
||||
value={formField.description}
|
||||
onChange={(e) => {
|
||||
setFormField({ ...formField, description: e.target.value });
|
||||
if (e.target.value) setErrors((prev) => ({ ...prev, description: '' }));
|
||||
}}
|
||||
/>
|
||||
{errors.description && (
|
||||
<span className="mt-1 text-xs text-red-500">{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>
|
||||
|
||||
{/* 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>
|
||||
|
||||
</form>
|
||||
)}
|
||||
</div>
|
||||
</DialogBody>
|
||||
|
||||
@ -42,14 +42,8 @@ export interface CustomerProps {
|
||||
username: string;
|
||||
}
|
||||
|
||||
export interface TransactionProps {
|
||||
id: string;
|
||||
name: string;
|
||||
}
|
||||
|
||||
const API_URL_CUSTOMER = apiConfig.service_customer;
|
||||
const API_URL_MASTERDATA = apiConfig.service_master_data;
|
||||
const API_URL_TRANSACTION = apiConfig.service_transaction;
|
||||
|
||||
const AddDialog = () => {
|
||||
const { showAddDialog, handleAddDialog, selectedProvider } = useManageProviderContext();
|
||||
@ -69,8 +63,7 @@ const AddDialog = () => {
|
||||
{ key: 'name', label: 'Name' },
|
||||
{ key: 'description', label: 'Description' },
|
||||
{ key: 'type', label: 'Type' },
|
||||
{ key: 'status', label: 'Status' },
|
||||
{ key: 'transaction_type', label: 'Transaction Type' }
|
||||
{ key: 'status', label: 'Status' }
|
||||
];
|
||||
const newErrors: Record<string, string> = {};
|
||||
let isValid = true;
|
||||
@ -93,7 +86,6 @@ const AddDialog = () => {
|
||||
description: string;
|
||||
type: string;
|
||||
status: string;
|
||||
transaction_type: string;
|
||||
agent: string | null;
|
||||
created_by: string;
|
||||
created_at: string;
|
||||
@ -102,7 +94,6 @@ const AddDialog = () => {
|
||||
description: '',
|
||||
type: '',
|
||||
status: '',
|
||||
transaction_type: '',
|
||||
agent: null,
|
||||
created_by: '',
|
||||
created_at: ''
|
||||
@ -110,7 +101,6 @@ const AddDialog = () => {
|
||||
|
||||
const [formField, setFormField] = useState(initialState);
|
||||
const [customers, setCustomers] = useState<CustomerProps[]>([]);
|
||||
const [transactions, setTransactions] = useState<TransactionProps[]>([]);
|
||||
const created_time = new Date();
|
||||
const formattedTime = created_time.toISOString().slice(0, 19).replace('T', ' ');
|
||||
|
||||
@ -163,23 +153,6 @@ const AddDialog = () => {
|
||||
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) => {
|
||||
try {
|
||||
sorting = sorting.length == 0 ? [{ id: 'name', desc: false }] : sorting;
|
||||
@ -209,9 +182,10 @@ const AddDialog = () => {
|
||||
}, [formattedTime, parsedUser.username, showAddDialog]);
|
||||
|
||||
useEffect(() => {
|
||||
getCustomerList([{ id: 'id', desc: false }]);
|
||||
getTransactionTypeList([{ id: 'name', desc: false }]);
|
||||
}, []);
|
||||
if (showAddDialog) {
|
||||
getCustomerList([{ id: 'id', desc: false }]);
|
||||
}
|
||||
}, [showAddDialog]);
|
||||
|
||||
useEffect(() => {
|
||||
if (showAddDialog === false) {
|
||||
@ -235,13 +209,13 @@ const AddDialog = () => {
|
||||
)}
|
||||
|
||||
<form onSubmit={handleSubmit}>
|
||||
<div className="card-body grid gap-5">
|
||||
<div className="grid gap-5 card-body">
|
||||
<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">
|
||||
<label className="flex items-center gap-1 form-label max-w-56">
|
||||
Name<span className="text-red-500">*</span>
|
||||
</label>
|
||||
<div className="grow flex flex-col">
|
||||
<div className="flex flex-col grow">
|
||||
<Input
|
||||
className={`input ${errors.name ? 'border-red-500' : ''}`}
|
||||
type="text"
|
||||
@ -252,7 +226,7 @@ const AddDialog = () => {
|
||||
}}
|
||||
/>
|
||||
{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>
|
||||
@ -260,10 +234,10 @@ const AddDialog = () => {
|
||||
|
||||
<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">
|
||||
<label className="flex items-center gap-1 form-label max-w-56">
|
||||
Description<span className="text-red-500">*</span>
|
||||
</label>
|
||||
<div className="grow flex flex-col">
|
||||
<div className="flex flex-col grow">
|
||||
<Input
|
||||
className={`input ${errors.description ? 'border-red-500' : ''}`}
|
||||
type="text"
|
||||
@ -274,7 +248,7 @@ const AddDialog = () => {
|
||||
}}
|
||||
/>
|
||||
{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>
|
||||
@ -282,10 +256,10 @@ const AddDialog = () => {
|
||||
|
||||
<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">
|
||||
<label className="flex items-center gap-1 form-label max-w-56">
|
||||
Type<span className="text-red-500">*</span>
|
||||
</label>
|
||||
<div className="grow flex flex-col">
|
||||
<div className="flex flex-col grow">
|
||||
<Select
|
||||
value={formField.type}
|
||||
onValueChange={(e) => {
|
||||
@ -302,17 +276,17 @@ const AddDialog = () => {
|
||||
</SelectContent>
|
||||
</Select>
|
||||
{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 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">
|
||||
<label className="flex items-center gap-1 form-label max-w-56">
|
||||
Status<span className="text-red-500">*</span>
|
||||
</label>
|
||||
<div className="grow flex flex-col">
|
||||
<div className="flex flex-col grow">
|
||||
<Select
|
||||
value={formField.status}
|
||||
onValueChange={(e) => {
|
||||
@ -329,40 +303,7 @@ const AddDialog = () => {
|
||||
</SelectContent>
|
||||
</Select>
|
||||
{errors.status && (
|
||||
<span className="text-red-500 text-xs mt-1">{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>
|
||||
<span className="mt-1 text-xs text-red-500">{errors.status}</span>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
@ -371,14 +312,14 @@ const AddDialog = () => {
|
||||
{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">
|
||||
<label className="flex items-center gap-1 form-label 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"
|
||||
className="col-span-5 text-left input"
|
||||
style={{ color: 'inherit' }}
|
||||
>
|
||||
{customers.find((customer) => customer.id === formField.agent)
|
||||
@ -422,7 +363,7 @@ const AddDialog = () => {
|
||||
) : (
|
||||
<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">
|
||||
<label className="flex items-center gap-1 form-label max-w-56">
|
||||
Agent Name
|
||||
</label>
|
||||
<Input
|
||||
@ -441,7 +382,7 @@ const AddDialog = () => {
|
||||
</Button>
|
||||
<Button variant="default" type="submit" disabled={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'
|
||||
)}
|
||||
|
||||
@ -22,7 +22,7 @@ import {
|
||||
SelectTrigger,
|
||||
SelectValue
|
||||
} from '@/components/ui/select';
|
||||
import { CustomerProps, TransactionProps } from './AddDialog';
|
||||
import { CustomerProps } from './AddDialog';
|
||||
import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover';
|
||||
import {
|
||||
Command,
|
||||
@ -37,7 +37,6 @@ import { RefreshCw } from 'lucide-react';
|
||||
|
||||
const API_URL_CUSTOMER = apiConfig.service_customer;
|
||||
const API_URL_MASTERDATA = apiConfig.service_master_data;
|
||||
const API_URL_TRANSACTION = apiConfig.service_transaction;
|
||||
|
||||
const EditDialog = () => {
|
||||
const { showEditDialog, handleEditDialog, selectedProvider, provider } =
|
||||
@ -59,8 +58,7 @@ const EditDialog = () => {
|
||||
{ key: 'name', label: 'Name' },
|
||||
{ key: 'description', label: 'Description' },
|
||||
{ key: 'type', label: 'Type' },
|
||||
{ key: 'status', label: 'Status' },
|
||||
{ key: 'transaction_type', label: 'Transaction Type' }
|
||||
{ key: 'status', label: 'Status' }
|
||||
];
|
||||
const newErrors: Record<string, string> = {};
|
||||
let isValid = true;
|
||||
@ -83,7 +81,6 @@ const EditDialog = () => {
|
||||
description: string;
|
||||
type: string;
|
||||
status: string;
|
||||
transaction_type: string;
|
||||
agent: string | null;
|
||||
updated_by: string;
|
||||
updated_at: string;
|
||||
@ -92,14 +89,12 @@ const EditDialog = () => {
|
||||
description: '',
|
||||
type: '',
|
||||
status: '',
|
||||
transaction_type: '',
|
||||
agent: null,
|
||||
updated_by: '',
|
||||
updated_at: ''
|
||||
};
|
||||
|
||||
const [formField, setFormField] = useState(initialState);
|
||||
const [transactions, setTransactions] = useState<TransactionProps[]>([]);
|
||||
const [customers, setCustomers] = useState<CustomerProps[]>([]);
|
||||
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) => {
|
||||
setIsLoading(true);
|
||||
const minDelay = new Promise((resolve) => setTimeout(resolve, 300));
|
||||
@ -234,9 +212,10 @@ const EditDialog = () => {
|
||||
}, [formattedTime]);
|
||||
|
||||
useEffect(() => {
|
||||
getCustomerList([{ id: 'id', desc: false }]);
|
||||
getTransactionTypeList([{ id: 'name', desc: false }]);
|
||||
}, []);
|
||||
if (showEditDialog) {
|
||||
getCustomerList([{ id: 'id', desc: false }]);
|
||||
}
|
||||
}, [showEditDialog]);
|
||||
|
||||
return (
|
||||
<Dialog open={showEditDialog} onOpenChange={(open) => handleEditDialog(open, null)}>
|
||||
@ -255,12 +234,12 @@ const EditDialog = () => {
|
||||
|
||||
{isLoading ? (
|
||||
<div className="flex flex-col items-center justify-center p-8">
|
||||
<div className="animate-pulse flex space-x-4 w-full">
|
||||
<div className="flex-1 space-y-4 py-1">
|
||||
<div className="h-4 bg-gray-200 rounded w-3/4"></div>
|
||||
<div className="flex w-full space-x-4 animate-pulse">
|
||||
<div className="flex-1 py-1 space-y-4">
|
||||
<div className="w-3/4 h-4 bg-gray-200 rounded"></div>
|
||||
<div className="space-y-2">
|
||||
<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>
|
||||
@ -268,13 +247,13 @@ const EditDialog = () => {
|
||||
</div>
|
||||
) : (
|
||||
<form onSubmit={handleUpdate}>
|
||||
<div className="card-body grid gap-5">
|
||||
<div className="grid gap-5 card-body">
|
||||
<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">
|
||||
<label className="flex items-center gap-1 form-label max-w-56">
|
||||
Name<span className="text-red-500">*</span>
|
||||
</label>
|
||||
<div className="grow flex flex-col">
|
||||
<div className="flex flex-col grow">
|
||||
<Input
|
||||
className={`input ${errors.name ? 'border-red-500' : ''}`}
|
||||
type="text"
|
||||
@ -285,7 +264,7 @@ const EditDialog = () => {
|
||||
}}
|
||||
/>
|
||||
{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>
|
||||
@ -294,10 +273,10 @@ const EditDialog = () => {
|
||||
{/* Description */}
|
||||
<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">
|
||||
<label className="flex items-center gap-1 form-label max-w-56">
|
||||
Description<span className="text-red-500">*</span>
|
||||
</label>
|
||||
<div className="grow flex flex-col">
|
||||
<div className="flex flex-col grow">
|
||||
<Input
|
||||
className={`input ${errors.description ? 'border-red-500' : ''}`}
|
||||
type="text"
|
||||
@ -308,7 +287,7 @@ const EditDialog = () => {
|
||||
}}
|
||||
/>
|
||||
{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>
|
||||
@ -316,10 +295,10 @@ const EditDialog = () => {
|
||||
|
||||
<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">
|
||||
<label className="flex items-center gap-1 form-label max-w-56">
|
||||
Type<span className="text-red-500">*</span>
|
||||
</label>
|
||||
<div className="grow flex flex-col">
|
||||
<div className="flex flex-col grow">
|
||||
<Select
|
||||
value={formField.type}
|
||||
onValueChange={(value) => {
|
||||
@ -336,7 +315,7 @@ const EditDialog = () => {
|
||||
</SelectContent>
|
||||
</Select>
|
||||
{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>
|
||||
@ -344,10 +323,10 @@ const EditDialog = () => {
|
||||
|
||||
<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">
|
||||
<label className="flex items-center gap-1 form-label max-w-56">
|
||||
Status<span className="text-red-500">*</span>
|
||||
</label>
|
||||
<div className="grow flex flex-col">
|
||||
<div className="flex flex-col grow">
|
||||
<Select
|
||||
value={formField.status}
|
||||
onValueChange={(value) => {
|
||||
@ -366,42 +345,7 @@ const EditDialog = () => {
|
||||
</SelectContent>
|
||||
</Select>
|
||||
{errors.status && (
|
||||
<span className="text-red-500 text-xs mt-1">{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>
|
||||
<span className="mt-1 text-xs text-red-500">{errors.status}</span>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
@ -410,14 +354,14 @@ const EditDialog = () => {
|
||||
{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">
|
||||
<label className="flex items-center gap-1 form-label 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"
|
||||
className="col-span-5 text-left input"
|
||||
style={{ color: 'inherit' }}
|
||||
>
|
||||
{customers.find((customer) => customer.id === formField.agent)
|
||||
@ -461,7 +405,7 @@ const EditDialog = () => {
|
||||
) : (
|
||||
<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">
|
||||
<label className="flex items-center gap-1 form-label max-w-56">
|
||||
Agent Name
|
||||
</label>
|
||||
<Input
|
||||
@ -477,7 +421,7 @@ const EditDialog = () => {
|
||||
<div className="flex justify-end">
|
||||
<Button variant="default" type="submit" disabled={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'
|
||||
)}
|
||||
|
||||
Reference in New Issue
Block a user