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

add skeleton loading on dialog edit

Browse Source
This commit is contained in:
Wikzyy
2025-04-16 17:11:32 +07:00
parent a74a2b42bb
commit 730bbb9519
4 changed files with 383 additions and 304 deletions
Download Patch File Download Diff File Expand all files Collapse all files

144
src/pages/master/aldeias/blocks/EditDialog.tsx
View File

@ -40,6 +40,7 @@ const EditDialog = () => {
const parsedUser = getAuth()?.user; const parsedUser = getAuth()?.user;
const [sucos, setSucos] = useState<SucosProps[]>([]); const [sucos, setSucos] = useState<SucosProps[]>([]);
const [open, setOpen] = useState(false); const [open, setOpen] = useState(false);
const [isLoading, setIsLoading] = useState(false);
const [alert, setAlert] = useState({ const [alert, setAlert] = useState({
show: false, show: false,
message: '' message: ''
@ -105,6 +106,7 @@ const EditDialog = () => {
}; };
const doFetchData = useCallback(async (id: string) => { const doFetchData = useCallback(async (id: string) => {
setIsLoading(true);
const response = await GetData(`${API_URL}/aldeias/getdata/${id}`, { id }); const response = await GetData(`${API_URL}/aldeias/getdata/${id}`, { id });
if (response?.status) { if (response?.status) {
@ -120,6 +122,7 @@ const EditDialog = () => {
sucosId: 0 sucosId: 0
})); }));
} }
setIsLoading(false);
}, []); }, []);
const handleUpdate = (e: React.FormEvent<HTMLFormElement>) => { const handleUpdate = (e: React.FormEvent<HTMLFormElement>) => {
@ -176,72 +179,87 @@ const EditDialog = () => {
</Alert> </Alert>
)} )}
<form onSubmit={handleUpdate}> {isLoading ? (
<div className="card-body grid gap-5"> <div className="flex flex-col items-center justify-center p-8">
<div className="w-full"> <div className="animate-pulse flex space-x-4 w-full">
<div className="flex items-baseline flex-wrap lg:flex-nowrap gap-2.5"> <div className="flex-1 space-y-4 py-1">
<label className="form-label flex items-center gap-1 max-w-56"> <div className="h-4 bg-gray-200 rounded w-3/4"></div>
Aldeia Name<span className="text-red-500">*</span> <div className="space-y-2">
</label> <div className="h-4 bg-gray-200 rounded"></div>
<Input <div className="h-4 bg-gray-200 rounded w-5/6"></div>
className="input" </div>
type="text"
value={formField.name}
onChange={(e) => setFormField({ ...formField, name: e.target.value })}
/>
</div> </div>
</div> </div>
<p className="mt-4 text-gray-500">Loading Aldeia Details...</p>
<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">
Sucos ID<span className="text-red-500">*</span>
</label>
<Popover open={open} onOpenChange={setOpen}>
<PopoverTrigger asChild>
<button
type="button"
className="input col-span-5 text-left"
style={{ color: 'inherit' }}
>
{sucos.find((suco) => suco.sucos_id === formField.sucosId)?.sucos_name ||
'Select Sucos'}
</button>
</PopoverTrigger>
<PopoverContent className="w-[400px] p-0">
<Command>
<CommandInput placeholder="Search Sucos..." />
<CommandList>
<CommandEmpty>No Sucos found.</CommandEmpty>
<CommandGroup>
{sucos.map((suco) => (
<CommandItem
key={suco.sucos_id}
value={suco.sucos_name}
onSelect={() => {
setFormField({
...formField,
sucosId: suco.sucos_id
});
setOpen(false);
}}
>
{suco.sucos_name}
</CommandItem>
))}
</CommandGroup>
</CommandList>
</Command>
</PopoverContent>
</Popover>
</div>
</div>
<div className="flex justify-end">
<Button className="btn btn-primary">Save Changes</Button>
</div>
</div> </div>
</form> ) : (
<form onSubmit={handleUpdate}>
<div className="card-body grid gap-5">
<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">
Aldeia Name<span className="text-red-500">*</span>
</label>
<Input
className="input"
type="text"
value={formField.name}
onChange={(e) => setFormField({ ...formField, name: e.target.value })}
/>
</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">
Sucos ID<span className="text-red-500">*</span>
</label>
<Popover open={open} onOpenChange={setOpen}>
<PopoverTrigger asChild>
<button
type="button"
className="input col-span-5 text-left"
style={{ color: 'inherit' }}
>
{sucos.find((suco) => suco.sucos_id === formField.sucosId)
?.sucos_name || 'Select Sucos'}
</button>
</PopoverTrigger>
<PopoverContent className="w-[400px] p-0">
<Command>
<CommandInput placeholder="Search Sucos..." />
<CommandList>
<CommandEmpty>No Sucos found.</CommandEmpty>
<CommandGroup>
{sucos.map((suco) => (
<CommandItem
key={suco.sucos_id}
value={suco.sucos_name}
onSelect={() => {
setFormField({
...formField,
sucosId: suco.sucos_id
});
setOpen(false);
}}
>
{suco.sucos_name}
</CommandItem>
))}
</CommandGroup>
</CommandList>
</Command>
</PopoverContent>
</Popover>
</div>
</div>
<div className="flex justify-end">
<Button className="btn btn-primary">Save Changes</Button>
</div>
</div>
</form>
)}
</div> </div>
</DialogBody> </DialogBody>
</DialogContent> </DialogContent>

54
src/pages/master/municipios/blocks/EditDialog.tsx
View File

@ -26,6 +26,7 @@ const EditDialog = () => {
const { reload } = useDataGrid(); const { reload } = useDataGrid();
const { PutData, GetData } = useCallApi(); const { PutData, GetData } = useCallApi();
const parsedUser = getAuth()?.user; const parsedUser = getAuth()?.user;
const [isLoading, setIsLoading] = useState(false);
const [alert, setAlert] = useState({ const [alert, setAlert] = useState({
show: false, show: false,
message: '' message: ''
@ -75,6 +76,7 @@ const EditDialog = () => {
); );
const doFetchData = useCallback(async (id: string) => { const doFetchData = useCallback(async (id: string) => {
setIsLoading(true);
const response = await GetData(`${API_URL}/municipios/getdata/${id}`, { id }); const response = await GetData(`${API_URL}/municipios/getdata/${id}`, { id });
if (response?.status) { if (response?.status) {
@ -88,6 +90,7 @@ const EditDialog = () => {
name: '' name: ''
})); }));
} }
setIsLoading(false);
}, []); }, []);
const handleUpdate = (e: React.FormEvent<HTMLFormElement>) => { const handleUpdate = (e: React.FormEvent<HTMLFormElement>) => {
@ -141,27 +144,42 @@ const EditDialog = () => {
</Alert> </Alert>
)} )}
<form onSubmit={handleUpdate}> {isLoading ? (
<div className="card-body grid gap-5"> <div className="flex flex-col items-center justify-center p-8">
<div className="w-full"> <div className="animate-pulse flex space-x-4 w-full">
<div className="flex items-baseline flex-wrap lg:flex-nowrap gap-2.5"> <div className="flex-1 space-y-4 py-1">
<label className="form-label flex items-center gap-1 max-w-56"> <div className="h-4 bg-gray-200 rounded w-3/4"></div>
Municipio Name<span className="text-red-500">*</span> <div className="space-y-2">
</label> <div className="h-4 bg-gray-200 rounded"></div>
<Input <div className="h-4 bg-gray-200 rounded w-5/6"></div>
className="input" </div>
type="text"
value={formField.name}
onChange={(e) => setFormField({ ...formField, name: e.target.value })}
/>
</div> </div>
</div> </div>
<p className="mt-4 text-gray-500">Loading Municipio Details...</p>
<div className="flex justify-end pt-2.5">
<Button className="btn btn-primary">Save Changes</Button>
</div>
</div> </div>
</form> ) : (
<form onSubmit={handleUpdate}>
<div className="card-body grid gap-5">
<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">
Municipio Name<span className="text-red-500">*</span>
</label>
<Input
className="input"
type="text"
value={formField.name}
onChange={(e) => setFormField({ ...formField, name: e.target.value })}
/>
</div>
</div>
<div className="flex justify-end pt-2.5">
<Button className="btn btn-primary">Save Changes</Button>
</div>
</div>
</form>
)}
</div> </div>
</DialogBody> </DialogBody>
</DialogContent> </DialogContent>

142
src/pages/master/postoadms/blocks/EditDialog.tsx
View File

@ -41,6 +41,7 @@ const EditDialog = () => {
const { PutData, GetData } = useCallApi(); const { PutData, GetData } = useCallApi();
const parsedUser = getAuth()?.user; const parsedUser = getAuth()?.user;
const [open, setOpen] = useState(false); const [open, setOpen] = useState(false);
const [isLoading, setIsLoading] = useState(false);
const [municipios, setMunicipios] = useState<MunicipioProps[]>([]); const [municipios, setMunicipios] = useState<MunicipioProps[]>([]);
const [alert, setAlert] = useState({ const [alert, setAlert] = useState({
@ -112,6 +113,7 @@ const EditDialog = () => {
}, []); }, []);
const doFetchData = useCallback(async (id: string) => { const doFetchData = useCallback(async (id: string) => {
setIsLoading(true);
const response = await GetData(`${API_URL}/postoadms/getdata/${id}`, { id }); const response = await GetData(`${API_URL}/postoadms/getdata/${id}`, { id });
if (response?.status) { if (response?.status) {
@ -126,6 +128,7 @@ const EditDialog = () => {
name: '' name: ''
})); }));
} }
setIsLoading(false);
}, []); }, []);
const handleUpdate = (e: React.FormEvent<HTMLFormElement>) => { const handleUpdate = (e: React.FormEvent<HTMLFormElement>) => {
@ -184,71 +187,86 @@ const EditDialog = () => {
</Alert> </Alert>
)} )}
<form onSubmit={handleUpdate}> {isLoading ? (
<div className="card-body grid gap-5"> <div className="flex flex-col items-center justify-center p-8">
<div className="w-full"> <div className="animate-pulse flex space-x-4 w-full">
<div className="flex items-baseline flex-wrap lg:flex-nowrap gap-2.5"> <div className="flex-1 space-y-4 py-1">
<label className="form-label flex items-center gap-1 max-w-56"> <div className="h-4 bg-gray-200 rounded w-3/4"></div>
Postu Administrativo Name<span className="text-red-500">*</span> <div className="space-y-2">
</label> <div className="h-4 bg-gray-200 rounded"></div>
<Input <div className="h-4 bg-gray-200 rounded w-5/6"></div>
className="input" </div>
type="text"
value={formField.name}
onChange={(e) => setFormField({ ...formField, name: e.target.value })}
/>
</div> </div>
</div> </div>
<p className="mt-4 text-gray-500">Loading Postu Administrativo Details...</p>
<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">
Municipio 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">
{municipios.find((municipio) => municipio.id === formField.municipio_id)
?.name || 'Select Municipio'}
</button>
</PopoverTrigger>
<PopoverContent className="w-[400px] p-0">
<Command>
<CommandInput placeholder="Search Municipio..." />
<CommandList>
<CommandEmpty>No Municipio found.</CommandEmpty>
<CommandGroup>
{municipios.map((municipio) => (
<CommandItem
key={municipio.id}
value={municipio.name}
onSelect={() => {
setFormField({
...formField,
municipio_id: municipio.id
});
setOpen(false);
}}
>
{municipio.name}
</CommandItem>
))}
</CommandGroup>
</CommandList>
</Command>
</PopoverContent>
</Popover>
</div>
</div>
<div className="flex justify-end gap-5">
<Button type="button" variant="outline" onClick={resetForm}>
Reset
</Button>
<Button className="btn btn-primary">Save Changes</Button>
</div>
</div> </div>
</form> ) : (
<form onSubmit={handleUpdate}>
<div className="card-body grid gap-5">
<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">
Postu Administrativo Name<span className="text-red-500">*</span>
</label>
<Input
className="input"
type="text"
value={formField.name}
onChange={(e) => setFormField({ ...formField, name: e.target.value })}
/>
</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">
Municipio 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">
{municipios.find((municipio) => municipio.id === formField.municipio_id)
?.name || 'Select Municipio'}
</button>
</PopoverTrigger>
<PopoverContent className="w-[400px] p-0">
<Command>
<CommandInput placeholder="Search Municipio..." />
<CommandList>
<CommandEmpty>No Municipio found.</CommandEmpty>
<CommandGroup>
{municipios.map((municipio) => (
<CommandItem
key={municipio.id}
value={municipio.name}
onSelect={() => {
setFormField({
...formField,
municipio_id: municipio.id
});
setOpen(false);
}}
>
{municipio.name}
</CommandItem>
))}
</CommandGroup>
</CommandList>
</Command>
</PopoverContent>
</Popover>
</div>
</div>
<div className="flex justify-end gap-5">
<Button type="button" variant="outline" onClick={resetForm}>
Reset
</Button>
<Button className="btn btn-primary">Save Changes</Button>
</div>
</div>
</form>
)}
</div> </div>
</DialogBody> </DialogBody>
</DialogContent> </DialogContent>

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

@ -47,6 +47,7 @@ const EditDialog = () => {
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 [open, setOpen] = useState(false); const [open, setOpen] = useState(false);
const [isLoading, setIsLoading] = useState(false);
const [alert, setAlert] = useState({ const [alert, setAlert] = useState({
show: false, show: false,
message: '' message: ''
@ -146,6 +147,7 @@ const EditDialog = () => {
}; };
const doFetchData = useCallback(async (id: string) => { const doFetchData = useCallback(async (id: string) => {
setIsLoading(true);
const response = await GetData(`${API_URL_MASTERDATA}/provider/getdata/${id}`, { id }); const response = await GetData(`${API_URL_MASTERDATA}/provider/getdata/${id}`, { id });
// console.log(response); // console.log(response);
if (response?.status) { if (response?.status) {
@ -159,6 +161,7 @@ const EditDialog = () => {
agent: response?.data.agent?.id || null agent: response?.data.agent?.id || null
})); }));
} }
setIsLoading(false);
}, []); }, []);
const handleUpdate = (e: React.FormEvent<HTMLFormElement>) => { const handleUpdate = (e: React.FormEvent<HTMLFormElement>) => {
@ -206,7 +209,7 @@ const EditDialog = () => {
getCustomerList([{ id: 'id', desc: false }]); getCustomerList([{ id: 'id', desc: false }]);
getTransactionTypeList([{ id: 'name', desc: false }]); getTransactionTypeList([{ id: 'name', desc: false }]);
}, []); }, []);
// console.log(selectedProvider);
return ( return (
<Dialog open={showEditDialog} onOpenChange={(open) => handleEditDialog(open, null)}> <Dialog open={showEditDialog} onOpenChange={(open) => handleEditDialog(open, null)}>
<DialogContent className="container-fixed max-w-[768px] flex flex-col p-5 overflow-hidden"> <DialogContent className="container-fixed max-w-[768px] flex flex-col p-5 overflow-hidden">
@ -222,170 +225,192 @@ const EditDialog = () => {
</Alert> </Alert>
)} )}
<form onSubmit={handleUpdate}> {isLoading ? (
<div className="card-body grid gap-5"> <div className="flex flex-col items-center justify-center p-8">
<div className="w-full"> <div className="animate-pulse flex space-x-4 w-full">
<div className="flex items-baseline flex-wrap lg:flex-nowrap gap-2.5"> <div className="flex-1 space-y-4 py-1">
<label className="form-label flex items-center gap-1 max-w-56"> <div className="h-4 bg-gray-200 rounded w-3/4"></div>
Name<span className="text-red-500">*</span> <div className="space-y-2">
</label> <div className="h-4 bg-gray-200 rounded"></div>
<Input <div className="h-4 bg-gray-200 rounded w-5/6"></div>
className="input"
type="text"
value={formField.name}
onChange={({ target }) =>
setFormField((prev) => ({ ...prev, name: target.value }))
}
/>
</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">
Description<span className="text-red-500">*</span>
</label>
<Input
className="input"
type="text"
value={formField.description}
onChange={(e) => setFormField({ ...formField, description: e.target.value })}
/>
</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">
Type<span className="text-red-500">*</span>
</label>
<Select
value={formField.type}
onValueChange={(value) => setFormField({ ...formField, type: value })}
>
<SelectTrigger>
<SelectValue placeholder="Select Type" />
</SelectTrigger>
<SelectContent>
<SelectItem value="h2h">Host to Host</SelectItem>
<SelectItem value="agent">Agent</SelectItem>
</SelectContent>
</Select>
</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">
Status<span className="text-red-500">*</span>
</label>
<Select
value={formField.status}
onValueChange={(value) => setFormField({ ...formField, status: value })}
>
<SelectTrigger>
<SelectValue placeholder="Select Status" />
</SelectTrigger>
<SelectContent>
<SelectItem value="Y">Active</SelectItem>
<SelectItem value="N">Inactive</SelectItem>
</SelectContent>
</Select>
</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 Id<span className="text-red-500">*</span>
</label>
<Select
value={formField.transaction_type}
onValueChange={(value) =>
setFormField({ ...formField, transaction_type: value })
}
>
<SelectTrigger>
<SelectValue placeholder="Select Transaction Type" />
</SelectTrigger>
<SelectContent>
{transactions.map((transaction) => (
<SelectItem key={transaction.id} value={transaction.id}>
{transaction.name}
</SelectItem>
))}
</SelectContent>
</Select>
</div>
</div>
{formField.type === 'agent' ? (
<div className="w-full">
<div className="flex items-baseline flex-wrap lg:flex-nowrap gap-2.5">
<label className="form-label flex items-center gap-1 max-w-56">
Agent Name<span className="text-red-500">*</span>
</label>
<Popover open={open} onOpenChange={setOpen}>
<PopoverTrigger asChild>
<button
type="button"
className="input col-span-5 text-left"
style={{ color: 'inherit' }}
>
{customers.find((customer) => customer.id === formField.agent)
?.username || 'Select Agent'}
</button>
</PopoverTrigger>
<PopoverContent className="w-[400px] p-0">
<Command>
<CommandInput placeholder="Search Agent..." />
<CommandList
className="max-h-[300px] overflow-y-auto"
style={{ touchAction: 'pan-y' }}
onWheel={(e) => {
e.currentTarget.scrollTop += e.deltaY;
}}
>
<CommandEmpty>No Agent found.</CommandEmpty>
<CommandGroup>
{customers.map((customer) => (
<CommandItem
key={customer.id}
value={customer.username}
onSelect={() => {
setFormField({
...formField,
agent: customer.id
});
setOpen(false);
}}
>
{customer.username}
</CommandItem>
))}
</CommandGroup>
</CommandList>
</Command>
</PopoverContent>
</Popover>
</div> </div>
</div> </div>
) : (
<div className="w-full">
<div className="flex items-baseline flex-wrap lg:flex-nowrap gap-2.5">
<label className="form-label flex items-center gap-1 max-w-56">
Agent Name
</label>
<Input type="text" placeholder="Type Agent Only" readOnly className='cursor-not-allowed' />
</div>
</div>
)}
<div className="flex justify-end">
<Button variant="default">Save Changes</Button>
</div> </div>
<p className="mt-4 text-gray-500">Loading Provider Details...</p>
</div> </div>
</form> ) : (
<form onSubmit={handleUpdate}>
<div className="card-body grid gap-5">
<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>
<Input
className="input"
type="text"
value={formField.name}
onChange={({ target }) =>
setFormField((prev) => ({ ...prev, name: target.value }))
}
/>
</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">
Description<span className="text-red-500">*</span>
</label>
<Input
className="input"
type="text"
value={formField.description}
onChange={(e) =>
setFormField({ ...formField, description: e.target.value })
}
/>
</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">
Type<span className="text-red-500">*</span>
</label>
<Select
value={formField.type}
onValueChange={(value) => setFormField({ ...formField, type: value })}
>
<SelectTrigger>
<SelectValue placeholder="Select Type" />
</SelectTrigger>
<SelectContent>
<SelectItem value="h2h">Host to Host</SelectItem>
<SelectItem value="agent">Agent</SelectItem>
</SelectContent>
</Select>
</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">
Status<span className="text-red-500">*</span>
</label>
<Select
value={formField.status}
onValueChange={(value) => setFormField({ ...formField, status: value })}
>
<SelectTrigger>
<SelectValue placeholder="Select Status" />
</SelectTrigger>
<SelectContent>
<SelectItem value="Y">Active</SelectItem>
<SelectItem value="N">Inactive</SelectItem>
</SelectContent>
</Select>
</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 Id<span className="text-red-500">*</span>
</label>
<Select
value={formField.transaction_type}
onValueChange={(value) =>
setFormField({ ...formField, transaction_type: value })
}
>
<SelectTrigger>
<SelectValue placeholder="Select Transaction Type" />
</SelectTrigger>
<SelectContent>
{transactions.map((transaction) => (
<SelectItem key={transaction.id} value={transaction.id}>
{transaction.name}
</SelectItem>
))}
</SelectContent>
</Select>
</div>
</div>
{formField.type === 'agent' ? (
<div className="w-full">
<div className="flex items-baseline flex-wrap lg:flex-nowrap gap-2.5">
<label className="form-label flex items-center gap-1 max-w-56">
Agent Name<span className="text-red-500">*</span>
</label>
<Popover open={open} onOpenChange={setOpen}>
<PopoverTrigger asChild>
<button
type="button"
className="input col-span-5 text-left"
style={{ color: 'inherit' }}
>
{customers.find((customer) => customer.id === formField.agent)
?.username || 'Select Agent'}
</button>
</PopoverTrigger>
<PopoverContent className="w-[400px] p-0">
<Command>
<CommandInput placeholder="Search Agent..." />
<CommandList
className="max-h-[300px] overflow-y-auto"
style={{ touchAction: 'pan-y' }}
onWheel={(e) => {
e.currentTarget.scrollTop += e.deltaY;
}}
>
<CommandEmpty>No Agent found.</CommandEmpty>
<CommandGroup>
{customers.map((customer) => (
<CommandItem
key={customer.id}
value={customer.username}
onSelect={() => {
setFormField({
...formField,
agent: customer.id
});
setOpen(false);
}}
>
{customer.username}
</CommandItem>
))}
</CommandGroup>
</CommandList>
</Command>
</PopoverContent>
</Popover>
</div>
</div>
) : (
<div className="w-full">
<div className="flex items-baseline flex-wrap lg:flex-nowrap gap-2.5">
<label className="form-label flex items-center gap-1 max-w-56">
Agent Name
</label>
<Input
type="text"
placeholder="Type Agent Only"
readOnly
className="cursor-not-allowed"
/>
</div>
</div>
)}
<div className="flex justify-end">
<Button variant="default">Save Changes</Button>
</div>
</div>
</form>
)}
</div> </div>
</DialogBody> </DialogBody>
</DialogContent> </DialogContent>