Merge branch 'master' of https://git.shiblysolution.id/TPAY/dashboard
This commit is contained in:
Raja Oktafrianto
@ -27,8 +27,8 @@ import {
|
||||
import { doSaveLogActivity } from '@/actions/GlobalActions';
|
||||
|
||||
interface SucosProps {
|
||||
sucos_id: number;
|
||||
sucos_name: string;
|
||||
id: number;
|
||||
name: string;
|
||||
}
|
||||
|
||||
const API_URL = apiConfig.service_master_data;
|
||||
@ -181,7 +181,7 @@ const AddDialog = () => {
|
||||
className="input col-span-5 text-left"
|
||||
style={{ color: 'inherit' }}
|
||||
>
|
||||
{sucos.find((suco) => suco.sucos_id === formField.sucosId)?.sucos_name ||
|
||||
{sucos.find((suco) => suco.id === formField.sucosId)?.name ||
|
||||
'Select Sucos'}
|
||||
</button>
|
||||
</PopoverTrigger>
|
||||
@ -196,17 +196,17 @@ const AddDialog = () => {
|
||||
<CommandGroup>
|
||||
{sucos.map((suco) => (
|
||||
<CommandItem
|
||||
key={suco.sucos_id}
|
||||
value={suco.sucos_name}
|
||||
key={suco.id}
|
||||
value={suco.name}
|
||||
onSelect={() => {
|
||||
setFormField({
|
||||
...formField,
|
||||
sucosId: suco.sucos_id
|
||||
sucosId: suco.id
|
||||
});
|
||||
setOpen(false);
|
||||
}}
|
||||
>
|
||||
{suco.sucos_name}
|
||||
{suco.name}
|
||||
</CommandItem>
|
||||
))}
|
||||
</CommandGroup>
|
||||
|
||||
@ -4,7 +4,14 @@ import { Alert, useDataGrid } from '@/components';
|
||||
import { useCallApi } from '@/hooks';
|
||||
import { useCallback, useState } from 'react';
|
||||
import { toast } from 'sonner';
|
||||
import { Dialog, DialogContent, DialogFooter, DialogHeader } from '@/components/ui/dialog';
|
||||
import {
|
||||
Dialog,
|
||||
DialogContent,
|
||||
DialogDescription,
|
||||
DialogFooter,
|
||||
DialogHeader,
|
||||
DialogTitle
|
||||
} from '@/components/ui/dialog';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { doSaveLogActivity } from '@/actions/GlobalActions';
|
||||
|
||||
@ -52,6 +59,8 @@ const DeleteDialog = () => {
|
||||
<Dialog open={showDeleteDialog} onOpenChange={(open) => handleDeleteDialog(open, null)}>
|
||||
<DialogContent className="container-fixed max-w-md flex flex-col p-5 overflow-hidden [&>button]:hidden">
|
||||
<DialogHeader className="p-0 border-0 block">
|
||||
<DialogTitle></DialogTitle>
|
||||
<DialogDescription></DialogDescription>
|
||||
<Alert variant="warning">
|
||||
<h3 className="text-lg">Are you sure?</h3>
|
||||
<span className="text-sm">You will delete this data!</span>
|
||||
|
||||
@ -27,8 +27,8 @@ import {
|
||||
import { doSaveLogActivity } from '@/actions/GlobalActions';
|
||||
|
||||
interface SucosProps {
|
||||
sucos_id: number;
|
||||
sucos_name: string;
|
||||
id: number;
|
||||
name: string;
|
||||
}
|
||||
|
||||
const API_URL = apiConfig.service_master_data;
|
||||
@ -40,6 +40,7 @@ const EditDialog = () => {
|
||||
const parsedUser = getAuth()?.user;
|
||||
const [sucos, setSucos] = useState<SucosProps[]>([]);
|
||||
const [open, setOpen] = useState(false);
|
||||
const [isLoading, setIsLoading] = useState(false);
|
||||
const [alert, setAlert] = useState({
|
||||
show: false,
|
||||
message: ''
|
||||
@ -96,8 +97,8 @@ const EditDialog = () => {
|
||||
order_direction: sorting[0].desc == false ? 'ASC' : 'DESC'
|
||||
});
|
||||
|
||||
// console.log('SUCOS', response?.data);
|
||||
setSucos(response?.data.list);
|
||||
// console.log(sucos);
|
||||
} catch (error) {
|
||||
console.error('Error fetching Sucos', error);
|
||||
setAlert({ show: true, message: 'Failed to get Sucos. Please try again.' });
|
||||
@ -105,7 +106,11 @@ const EditDialog = () => {
|
||||
};
|
||||
|
||||
const doFetchData = useCallback(async (id: string) => {
|
||||
const response = await GetData(`${API_URL}/aldeias/getdata/${id}`, { id });
|
||||
setIsLoading(true);
|
||||
|
||||
const minDelay = new Promise((resolve) => setTimeout(resolve, 300));
|
||||
const fetchData = GetData(`${API_URL}/aldeias/getdata/${id}`, { id });
|
||||
const [response] = await Promise.all([fetchData, minDelay]);
|
||||
|
||||
if (response?.status) {
|
||||
setFormField((prev) => ({
|
||||
@ -120,6 +125,7 @@ const EditDialog = () => {
|
||||
sucosId: 0
|
||||
}));
|
||||
}
|
||||
setIsLoading(false);
|
||||
}, []);
|
||||
|
||||
const handleUpdate = (e: React.FormEvent<HTMLFormElement>) => {
|
||||
@ -176,72 +182,87 @@ const EditDialog = () => {
|
||||
</Alert>
|
||||
)}
|
||||
|
||||
<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 })}
|
||||
/>
|
||||
{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="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>
|
||||
</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>
|
||||
<p className="mt-4 text-gray-500">Loading Aldeia Details...</p>
|
||||
</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.id === formField.sucosId)?.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.id}
|
||||
value={suco.name}
|
||||
onSelect={() => {
|
||||
setFormField({
|
||||
...formField,
|
||||
sucosId: suco.id
|
||||
});
|
||||
setOpen(false);
|
||||
}}
|
||||
>
|
||||
{suco.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>
|
||||
</DialogBody>
|
||||
</DialogContent>
|
||||
|
||||
@ -1,12 +1,14 @@
|
||||
import { DefaultTooltip, KeenIcon, useDataGrid } from '@/components';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { useManageAldeiasContext } from '../hooks/useManageAldeiasContext';
|
||||
import React, { useState } from 'react';
|
||||
import React, { useEffect, useState } from 'react';
|
||||
|
||||
const ListToolbar = () => {
|
||||
const { table, reload } = useDataGrid();
|
||||
const { handleAddDialog, handleSearchDialog } = useManageAldeiasContext();
|
||||
const [searchValue, setSearchValue] = useState('');
|
||||
const [searchValue, setSearchValue] = useState<string>(
|
||||
(table.getColumn('name')?.getFilterValue() as string) ?? ''
|
||||
);
|
||||
|
||||
const handleKeyDown = (event: React.KeyboardEvent) => {
|
||||
if (event.key === 'Enter') {
|
||||
@ -19,6 +21,15 @@ const ListToolbar = () => {
|
||||
table.setPageIndex(0);
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
const timer = setTimeout(() => {
|
||||
table.getColumn('name')?.setFilterValue(searchValue);
|
||||
table.setPageIndex(0);
|
||||
}, 200);
|
||||
|
||||
return () => clearTimeout(timer);
|
||||
}, [searchValue, table]);
|
||||
|
||||
return (
|
||||
<div className="card-header flex-wrap gap-2 border-b-0 px-5">
|
||||
<div className="flex flex-wrap gap-2 lg:gap-5 w-full">
|
||||
@ -28,17 +39,11 @@ const ListToolbar = () => {
|
||||
<KeenIcon icon="magnifier" />
|
||||
<input
|
||||
type="text"
|
||||
placeholder="Search Aldeia"
|
||||
placeholder="Search"
|
||||
value={searchValue}
|
||||
onChange={(event) => setSearchValue(event.target.value)}
|
||||
onKeyDown={handleKeyDown}
|
||||
/>
|
||||
</label>
|
||||
<DefaultTooltip title={'Search'} placement={'top'}>
|
||||
<Button variant="outline" className="h-7.5" onClick={handleSearch}>
|
||||
<KeenIcon icon="magnifier" />
|
||||
</Button>
|
||||
</DefaultTooltip>
|
||||
{/* <DefaultTooltip title={'Filter'} placement={'top'}>
|
||||
<Button
|
||||
variant="outline"
|
||||
|
||||
@ -122,7 +122,7 @@ const ManageAldeiasContextProvider = ({ children }: { children: React.ReactNode
|
||||
);
|
||||
},
|
||||
meta: {
|
||||
headerClassName: 'w-[100px]',
|
||||
headerClassName: 'w-[100px] text-center',
|
||||
cellClassName: 'text-center'
|
||||
}
|
||||
}
|
||||
|
||||
@ -49,6 +49,7 @@ const EditDialog = () => {
|
||||
const parsedUser = getAuth()?.user;
|
||||
const [currencies, setCurrencies] = useState<CurrencyProps[]>([]);
|
||||
const [open, setOpen] = useState(false);
|
||||
const [isLoading, setIsLoading] = useState(false);
|
||||
const [alert, setAlert] = useState({
|
||||
show: false,
|
||||
message: ''
|
||||
@ -74,8 +75,8 @@ const EditDialog = () => {
|
||||
const doUpdateConversion = useCallback(
|
||||
async (e: React.FormEvent<HTMLFormElement>) => {
|
||||
e.preventDefault();
|
||||
if(!showEditDialog) return;
|
||||
const response = await PutData(`${API_URL}/dashboard/conversion/${selectedConversion}`,{
|
||||
if (!showEditDialog) return;
|
||||
const response = await PutData(`${API_URL}/dashboard/conversion/${selectedConversion}`, {
|
||||
...formField
|
||||
});
|
||||
|
||||
@ -83,24 +84,24 @@ const EditDialog = () => {
|
||||
resetForm();
|
||||
handleEditDialog(false, null);
|
||||
toast.success('Success Update Conversion');
|
||||
const createActivity = {
|
||||
module: 'Manage Conversion',
|
||||
description: `Update Conversion => ${selectedConversion}`,
|
||||
action: 'U'
|
||||
};
|
||||
|
||||
doSaveLogActivity(createActivity);
|
||||
const createActivity = {
|
||||
module: 'Manage Conversion',
|
||||
description: `Update Conversion => ${selectedConversion}`,
|
||||
action: 'U'
|
||||
};
|
||||
|
||||
doSaveLogActivity(createActivity);
|
||||
reload();
|
||||
} else {
|
||||
toast.error('Error Create Conversion');
|
||||
setAlert({ show: true, message: 'Failed to Update Conversion. Please try again.' });
|
||||
}
|
||||
}
|
||||
},
|
||||
[formField]
|
||||
);
|
||||
|
||||
const doGetCurrency = async (sorting: any) => {
|
||||
if (!showEditDialog)return;
|
||||
if (!showEditDialog) return;
|
||||
try {
|
||||
sorting = sorting.length == 0 ? [{ id: 'name', desc: false }] : sorting;
|
||||
const response = await GetData(`${API_URL}/dashboard/currency/`, {
|
||||
@ -117,30 +118,32 @@ const EditDialog = () => {
|
||||
}
|
||||
};
|
||||
|
||||
const doGetConversionById = useCallback(async (id: string) => {
|
||||
const response = await GetData(`${API_URL}/dashboard/conversion/${id}`, { id });
|
||||
console.log('Transaction Type: ', response?.data);
|
||||
if (response?.status) {
|
||||
setFormField((prev) => ({
|
||||
...prev,
|
||||
status: response.data.status,
|
||||
id_currency_origin: response.data.id_currency_origin,
|
||||
id_currency_destination: response.data.id_currency_destination,
|
||||
buy: response.data.buy,
|
||||
sell: response.data.sell,
|
||||
}));
|
||||
}
|
||||
// console.log('form fieldd Transaction Type: ', formField);
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
if (selectedConversion) {
|
||||
doGetConversionById(selectedConversion);
|
||||
}
|
||||
}, [selectedConversion]);
|
||||
|
||||
const doFetchData = useCallback(async (id: string) => {
|
||||
setIsLoading(true);
|
||||
const minDelay = new Promise((resolve) => setTimeout(resolve, 300));
|
||||
const fetchData = GetData(`${API_URL}/dashboard/conversion/${id}`, { id });
|
||||
const [response] = await Promise.all([fetchData, minDelay]);
|
||||
|
||||
console.log('Transaction Type: ', response?.data);
|
||||
if (response?.status) {
|
||||
setFormField((prev) => ({
|
||||
...prev,
|
||||
status: response.data.status,
|
||||
id_currency_origin: response.data.id_currency_origin,
|
||||
id_currency_destination: response.data.id_currency_destination,
|
||||
buy: response.data.buy,
|
||||
sell: response.data.sell
|
||||
}));
|
||||
}
|
||||
// console.log('form fieldd Transaction Type: ', formField);
|
||||
setIsLoading(false);
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
if (selectedConversion) {
|
||||
doFetchData(selectedConversion);
|
||||
}
|
||||
}, [selectedConversion]);
|
||||
|
||||
useEffect(() => {
|
||||
if (showEditDialog) {
|
||||
@ -156,8 +159,7 @@ const EditDialog = () => {
|
||||
if (showEditDialog) {
|
||||
doGetCurrency([{ id: 'name', desc: false }]);
|
||||
}
|
||||
}, [showEditDialog]);
|
||||
|
||||
}, [showEditDialog]);
|
||||
|
||||
useEffect(() => {
|
||||
if (showEditDialog === false) {
|
||||
@ -166,7 +168,7 @@ const EditDialog = () => {
|
||||
}, [showEditDialog]);
|
||||
|
||||
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">
|
||||
<DialogHeader>
|
||||
<DialogTitle>Conversion - Update</DialogTitle>
|
||||
@ -180,96 +182,110 @@ const EditDialog = () => {
|
||||
</Alert>
|
||||
)}
|
||||
|
||||
<form onSubmit={doUpdateConversion}>
|
||||
<div className="card-body grid gap-5">
|
||||
<div className="w-full">
|
||||
<label className="form-label">
|
||||
Currency Origin <span className="text-red-500">*</span>
|
||||
</label>
|
||||
<Select
|
||||
value={formField.id_currency_origin}
|
||||
onValueChange={(id_currency_origin) =>
|
||||
setFormField((prev) => ({ ...prev, id_currency_origin }))
|
||||
}
|
||||
>
|
||||
<SelectTrigger>
|
||||
<SelectValue placeholder="Select Currency" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
{currencies.map((currency, idx) => (
|
||||
<SelectItem value={currency.ID} key={currency.ID}>
|
||||
{currency.name}
|
||||
</SelectItem>
|
||||
))}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
{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="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>
|
||||
</div>
|
||||
</div>
|
||||
<div className="w-full">
|
||||
<label className="form-label">
|
||||
Currency Destination <span className="text-red-500">*</span>
|
||||
</label>
|
||||
<Select
|
||||
value={formField.id_currency_destination}
|
||||
onValueChange={(id_currency_destination) =>
|
||||
setFormField((prev) => ({ ...prev, id_currency_destination }))
|
||||
}
|
||||
>
|
||||
<SelectTrigger>
|
||||
<SelectValue placeholder="Select Currency" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
{currencies.map((currency, idx) => (
|
||||
<SelectItem value={currency.ID} key={currency.ID}>
|
||||
{currency.name}
|
||||
</SelectItem>
|
||||
))}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
<div className="w-full">
|
||||
<label className="form-label">
|
||||
Buy<span className="text-red-500">*</span>
|
||||
</label>
|
||||
<NumericFormat
|
||||
className="input"
|
||||
value={formField.buy}
|
||||
thousandSeparator="."
|
||||
decimalSeparator=","
|
||||
allowNegative={false}
|
||||
onValueChange={(values) => {
|
||||
setFormField((prev) => ({
|
||||
...prev,
|
||||
buy: values.floatValue || 0
|
||||
}));
|
||||
}}
|
||||
placeholder="Enter Buy"
|
||||
/>
|
||||
</div>
|
||||
<div className="w-full">
|
||||
<label className="form-label">
|
||||
Sell
|
||||
<span className="text-red-500">*</span>
|
||||
</label>
|
||||
<NumericFormat
|
||||
className="input"
|
||||
value={formField.sell}
|
||||
thousandSeparator="."
|
||||
decimalSeparator=","
|
||||
allowNegative={false}
|
||||
onValueChange={(values) => {
|
||||
setFormField((prev) => ({
|
||||
...prev,
|
||||
sell: values.floatValue || 0
|
||||
}));
|
||||
}}
|
||||
placeholder="Enter Sell"
|
||||
/>
|
||||
</div>
|
||||
<div className="w-full">
|
||||
<p className="mt-4 text-gray-500">Loading Conversion Details...</p>
|
||||
</div>
|
||||
) : (
|
||||
<form onSubmit={doUpdateConversion}>
|
||||
<div className="card-body grid gap-5">
|
||||
<div className="w-full">
|
||||
<label className="form-label">
|
||||
Currency Origin <span className="text-red-500">*</span>
|
||||
</label>
|
||||
<Select
|
||||
value={formField.id_currency_origin}
|
||||
onValueChange={(id_currency_origin) =>
|
||||
setFormField((prev) => ({ ...prev, id_currency_origin }))
|
||||
}
|
||||
>
|
||||
<SelectTrigger>
|
||||
<SelectValue placeholder="Select Currency" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
{currencies.map((currency, idx) => (
|
||||
<SelectItem value={currency.ID} key={currency.ID}>
|
||||
{currency.name}
|
||||
</SelectItem>
|
||||
))}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
<div className="w-full">
|
||||
<label className="form-label">
|
||||
Currency Destination <span className="text-red-500">*</span>
|
||||
</label>
|
||||
<Select
|
||||
value={formField.id_currency_destination}
|
||||
onValueChange={(id_currency_destination) =>
|
||||
setFormField((prev) => ({ ...prev, id_currency_destination }))
|
||||
}
|
||||
>
|
||||
<SelectTrigger>
|
||||
<SelectValue placeholder="Select Currency" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
{currencies.map((currency, idx) => (
|
||||
<SelectItem value={currency.ID} key={currency.ID}>
|
||||
{currency.name}
|
||||
</SelectItem>
|
||||
))}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
<div className="w-full">
|
||||
<label className="form-label">
|
||||
Buy<span className="text-red-500">*</span>
|
||||
</label>
|
||||
<NumericFormat
|
||||
className="input"
|
||||
value={formField.buy}
|
||||
thousandSeparator="."
|
||||
decimalSeparator=","
|
||||
allowNegative={false}
|
||||
onValueChange={(values) => {
|
||||
setFormField((prev) => ({
|
||||
...prev,
|
||||
buy: values.floatValue || 0
|
||||
}));
|
||||
}}
|
||||
placeholder="Enter Buy"
|
||||
/>
|
||||
</div>
|
||||
<div className="w-full">
|
||||
<label className="form-label">
|
||||
Sell
|
||||
<span className="text-red-500">*</span>
|
||||
</label>
|
||||
<NumericFormat
|
||||
className="input"
|
||||
value={formField.sell}
|
||||
thousandSeparator="."
|
||||
decimalSeparator=","
|
||||
allowNegative={false}
|
||||
onValueChange={(values) => {
|
||||
setFormField((prev) => ({
|
||||
...prev,
|
||||
sell: values.floatValue || 0
|
||||
}));
|
||||
}}
|
||||
placeholder="Enter Sell"
|
||||
/>
|
||||
</div>
|
||||
<div className="w-full">
|
||||
<label className="form-label">
|
||||
Status
|
||||
<span className="text-red-500">*</span>
|
||||
</label>
|
||||
</label>
|
||||
|
||||
<div className="grow">
|
||||
<Select
|
||||
@ -287,16 +303,16 @@ const EditDialog = () => {
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div className="flex justify-end gap-5">
|
||||
<Button type="button" variant="outline" onClick={resetForm}>
|
||||
Reset
|
||||
</Button>
|
||||
<Button variant="default">Save Changes</Button>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex justify-end gap-5">
|
||||
<Button type="button" variant="outline" onClick={resetForm}>
|
||||
Reset
|
||||
</Button>
|
||||
<Button variant="default">Save Changes</Button>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</form>
|
||||
)}
|
||||
</div>
|
||||
</DialogBody>
|
||||
</DialogContent>
|
||||
|
||||
@ -49,6 +49,7 @@ const EditDialog = () => {
|
||||
const parsedUser = getAuth()?.user;
|
||||
const [currencies, setCurrencies] = useState<CurrencyProps[]>([]);
|
||||
const [open, setOpen] = useState(false);
|
||||
const [isLoading, setIsLoading] = useState(false);
|
||||
const [alert, setAlert] = useState({
|
||||
show: false,
|
||||
message: ''
|
||||
@ -98,8 +99,12 @@ const EditDialog = () => {
|
||||
[formField]
|
||||
);
|
||||
|
||||
const doGetCurrencyById = useCallback(async (id: string) => {
|
||||
const response = await GetData(`${API_URL}/dashboard/currency/${id}`, { id });
|
||||
const doFetchData = useCallback(async (id: string) => {
|
||||
setIsLoading(true);
|
||||
const minDelay = new Promise((resolve) => setTimeout(resolve, 300));
|
||||
const fetchData = GetData(`${API_URL}/dashboard/currency/${id}`, { id });
|
||||
const [response] = await Promise.all([fetchData, minDelay]);
|
||||
|
||||
// console.log('Transaction Type: ', response?.data);
|
||||
if (response?.status) {
|
||||
setFormField((prev) => ({
|
||||
@ -110,12 +115,13 @@ const EditDialog = () => {
|
||||
prefix: response.data.prefix
|
||||
}));
|
||||
}
|
||||
setIsLoading(false);
|
||||
// console.log('form fieldd Transaction Type: ', formField);
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
if (selectedCurrency) {
|
||||
doGetCurrencyById(selectedCurrency);
|
||||
doFetchData(selectedCurrency);
|
||||
}
|
||||
}, [selectedCurrency]);
|
||||
|
||||
@ -150,74 +156,93 @@ const EditDialog = () => {
|
||||
</Alert>
|
||||
)}
|
||||
|
||||
<form onSubmit={doUpdateCurrency}>
|
||||
<div className="card-body grid gap-5">
|
||||
<div className="w-full">
|
||||
<label className="form-label">
|
||||
Code
|
||||
<span className="text-red-500">*</span>
|
||||
</label>
|
||||
<Input
|
||||
type="text"
|
||||
placeholder="Code"
|
||||
value={formField.code}
|
||||
onChange={(e) => setFormField((prev) => ({ ...prev, code: e.target.value }))}
|
||||
/>
|
||||
</div>
|
||||
<div className="w-full">
|
||||
<label className="form-label">
|
||||
Name
|
||||
<span className="text-red-500">*</span>
|
||||
</label>
|
||||
<Input
|
||||
type="text"
|
||||
placeholder="Code"
|
||||
value={formField.name}
|
||||
onChange={(e) => setFormField((prev) => ({ ...prev, name: e.target.value }))}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="w-full">
|
||||
<label className="form-label">
|
||||
Prefix
|
||||
<span className="text-red-500">*</span>
|
||||
</label>
|
||||
<Input
|
||||
type="text"
|
||||
placeholder="Code"
|
||||
value={formField.prefix}
|
||||
onChange={(e) => setFormField((prev) => ({ ...prev, prefix: e.target.value }))}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="w-full">
|
||||
<label className="form-label">
|
||||
Status
|
||||
<span className="text-red-500">*</span>
|
||||
</label>
|
||||
|
||||
<Select
|
||||
value={formField.status}
|
||||
onValueChange={(value) => setFormField((prev) => ({ ...prev, status: value }))}
|
||||
>
|
||||
<SelectTrigger className="w-full">
|
||||
<SelectValue placeholder="Select" defaultValue={formField.status} />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="Y">Active</SelectItem>
|
||||
<SelectItem value="N">Inactive</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
|
||||
<div className="flex justify-end gap-5">
|
||||
<Button type="button" variant="outline" onClick={resetForm}>
|
||||
Reset
|
||||
</Button>
|
||||
<Button variant="default">Save Changes</Button>
|
||||
{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="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>
|
||||
</div>
|
||||
</div>
|
||||
<p className="mt-4 text-gray-500">Loading Currency Details...</p>
|
||||
</div>
|
||||
</form>
|
||||
) : (
|
||||
<form onSubmit={doUpdateCurrency}>
|
||||
<div className="card-body grid gap-5">
|
||||
<div className="w-full">
|
||||
<label className="form-label">
|
||||
Code
|
||||
<span className="text-red-500">*</span>
|
||||
</label>
|
||||
<Input
|
||||
type="text"
|
||||
placeholder="Code"
|
||||
value={formField.code}
|
||||
onChange={(e) => setFormField((prev) => ({ ...prev, code: e.target.value }))}
|
||||
/>
|
||||
</div>
|
||||
<div className="w-full">
|
||||
<label className="form-label">
|
||||
Name
|
||||
<span className="text-red-500">*</span>
|
||||
</label>
|
||||
<Input
|
||||
type="text"
|
||||
placeholder="Code"
|
||||
value={formField.name}
|
||||
onChange={(e) => setFormField((prev) => ({ ...prev, name: e.target.value }))}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="w-full">
|
||||
<label className="form-label">
|
||||
Prefix
|
||||
<span className="text-red-500">*</span>
|
||||
</label>
|
||||
<Input
|
||||
type="text"
|
||||
placeholder="Code"
|
||||
value={formField.prefix}
|
||||
onChange={(e) =>
|
||||
setFormField((prev) => ({ ...prev, prefix: e.target.value }))
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="w-full">
|
||||
<label className="form-label">
|
||||
Status
|
||||
<span className="text-red-500">*</span>
|
||||
</label>
|
||||
|
||||
<Select
|
||||
value={formField.status}
|
||||
onValueChange={(value) =>
|
||||
setFormField((prev) => ({ ...prev, status: value }))
|
||||
}
|
||||
>
|
||||
<SelectTrigger className="w-full">
|
||||
<SelectValue placeholder="Select" defaultValue={formField.status} />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="Y">Active</SelectItem>
|
||||
<SelectItem value="N">Inactive</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
|
||||
<div className="flex justify-end gap-5">
|
||||
<Button type="button" variant="outline" onClick={resetForm}>
|
||||
Reset
|
||||
</Button>
|
||||
<Button variant="default">Save Changes</Button>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
)}
|
||||
</div>
|
||||
</DialogBody>
|
||||
</DialogContent>
|
||||
|
||||
@ -1,7 +1,6 @@
|
||||
import { Container, DataGridInner } from '@/components';
|
||||
import { ManageMunicipiosProvider } from './hooks/ManageMunicipiosContext';
|
||||
import AddDialog from './blocks/AddDialog';
|
||||
import SearchDialog from './blocks/SearchDialog';
|
||||
import EditDialog from './blocks/EditDialog';
|
||||
import DeleteDialog from './blocks/DeleteDialog';
|
||||
import { Breadcrumbs, Link } from '@mui/material';
|
||||
@ -35,7 +34,6 @@ const Municipios = () => {
|
||||
<AddDialog />
|
||||
<EditDialog />
|
||||
<DeleteDialog />
|
||||
<SearchDialog />
|
||||
</Container>
|
||||
</ManageMunicipiosProvider>
|
||||
</>
|
||||
|
||||
@ -26,6 +26,7 @@ const EditDialog = () => {
|
||||
const { reload } = useDataGrid();
|
||||
const { PutData, GetData } = useCallApi();
|
||||
const parsedUser = getAuth()?.user;
|
||||
const [isLoading, setIsLoading] = useState(false);
|
||||
const [alert, setAlert] = useState({
|
||||
show: false,
|
||||
message: ''
|
||||
@ -75,7 +76,10 @@ const EditDialog = () => {
|
||||
);
|
||||
|
||||
const doFetchData = useCallback(async (id: string) => {
|
||||
const response = await GetData(`${API_URL}/municipios/getdata/${id}`, { id });
|
||||
setIsLoading(true);
|
||||
const minDelay = new Promise((resolve) => setTimeout(resolve, 300));
|
||||
const fetchData = GetData(`${API_URL}/municipios/getdata/${id}`, { id });
|
||||
const [response] = await Promise.all([fetchData, minDelay]);
|
||||
|
||||
if (response?.status) {
|
||||
setFormField((prev) => ({
|
||||
@ -88,6 +92,7 @@ const EditDialog = () => {
|
||||
name: ''
|
||||
}));
|
||||
}
|
||||
setIsLoading(false);
|
||||
}, []);
|
||||
|
||||
const handleUpdate = (e: React.FormEvent<HTMLFormElement>) => {
|
||||
@ -141,27 +146,42 @@ const EditDialog = () => {
|
||||
</Alert>
|
||||
)}
|
||||
|
||||
<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 })}
|
||||
/>
|
||||
{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="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>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex justify-end pt-2.5">
|
||||
<Button className="btn btn-primary">Save Changes</Button>
|
||||
</div>
|
||||
<p className="mt-4 text-gray-500">Loading Municipio Details...</p>
|
||||
</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>
|
||||
</DialogBody>
|
||||
</DialogContent>
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
import { DefaultTooltip, KeenIcon, useDataGrid } from '@/components';
|
||||
import { useManageMunicipiosContext } from '../hooks/useManageMunicipiosContext';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { useCallback, useState } from 'react';
|
||||
import { useCallback, useEffect, useState } from 'react';
|
||||
import { toast } from 'sonner';
|
||||
|
||||
const ListToolbar = () => {
|
||||
@ -9,48 +9,33 @@ const ListToolbar = () => {
|
||||
const { handleAddDialog, handleSearchDialog } = useManageMunicipiosContext();
|
||||
const [searchName, setSearchName] = useState('');
|
||||
const [isLoading, setIsLoading] = useState(false);
|
||||
const [searchValue, setSearchValue] = useState('');
|
||||
const [searchValue, setSearchValue] = useState<string>(
|
||||
(table.getColumn('name')?.getFilterValue() as string) ?? ''
|
||||
);
|
||||
|
||||
const handleFilterData = useCallback(() => {
|
||||
try {
|
||||
table.getColumn('name')?.setFilterValue(searchName);
|
||||
} catch (error) {
|
||||
toast.error('Error applying filter');
|
||||
console.error('Error applying filter:', error);
|
||||
}
|
||||
}, [searchName, table]);
|
||||
useEffect(() => {
|
||||
const timer = setTimeout(() => {
|
||||
table.getColumn('name')?.setFilterValue(searchValue);
|
||||
table.setPageIndex(0);
|
||||
}, 200);
|
||||
|
||||
const handleKeyDown = (event: React.KeyboardEvent) => {
|
||||
if (event.key === 'Enter') {
|
||||
handleSearch();
|
||||
}
|
||||
};
|
||||
|
||||
const handleSearch = () => {
|
||||
table.getColumn('name')?.setFilterValue(searchValue);
|
||||
table.setPageIndex(0);
|
||||
};
|
||||
return () => clearTimeout(timer);
|
||||
}, [searchValue, table]);
|
||||
|
||||
return (
|
||||
<div className="card-header flex-wrap gap-2 border-b-0 px-5">
|
||||
<div className="flex flex-wrap gap-2 lg:gap-5 w-full">
|
||||
<div className="flex justify-between w-full items-center">
|
||||
<div className="flex w-[50%] gap-3 items-center">
|
||||
<label className="input input-sm w-1/3 overflow-hidden">
|
||||
<label className="input input-sm w-1/3">
|
||||
<KeenIcon icon="magnifier" />
|
||||
<input
|
||||
type="text"
|
||||
placeholder="Search Municipio"
|
||||
placeholder="Search"
|
||||
value={searchValue}
|
||||
onChange={(event) => setSearchValue(event.target.value)}
|
||||
onKeyDown={handleKeyDown}
|
||||
/>
|
||||
</label>
|
||||
<DefaultTooltip title={'Search'} placement={'top'}>
|
||||
<Button variant="outline" className="h-7.5" onClick={handleSearch}>
|
||||
<KeenIcon icon="magnifier" />
|
||||
</Button>
|
||||
</DefaultTooltip>
|
||||
{/* <DefaultTooltip title={'Filter'} placement={'top'}>
|
||||
<Button
|
||||
variant="outline"
|
||||
|
||||
@ -1,177 +0,0 @@
|
||||
import { useRef, useState } from 'react';
|
||||
import {
|
||||
Dialog,
|
||||
DialogBody,
|
||||
DialogContent,
|
||||
DialogDescription,
|
||||
DialogHeader,
|
||||
DialogTitle
|
||||
} from '@/components/ui/dialog';
|
||||
import { Alert, KeenIcon } from '@/components';
|
||||
import { Input } from '@/components/ui/input';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { useManageMunicipiosContext } from '../hooks/useManageMunicipiosContext';
|
||||
import { apiConfig } from '@/config/api.config';
|
||||
import axios from 'axios';
|
||||
import {
|
||||
Select,
|
||||
SelectContent,
|
||||
SelectItem,
|
||||
SelectTrigger,
|
||||
SelectValue
|
||||
} from '@/components/ui/select';
|
||||
|
||||
interface PostoAdmsProps {
|
||||
id: number;
|
||||
name: string;
|
||||
}
|
||||
|
||||
const API_URL = apiConfig.service_master_data;
|
||||
|
||||
const SearchDialog = () => {
|
||||
const parentRef = useRef<any | null>(null);
|
||||
const { showSearchDialog, handleSearchDialog, municipios } = useManageMunicipiosContext();
|
||||
const [alert, setAlert] = useState({
|
||||
show: false,
|
||||
message: ''
|
||||
});
|
||||
const initialState = {
|
||||
id: 0,
|
||||
name: ''
|
||||
};
|
||||
|
||||
const [formField, setFormField] = useState(initialState);
|
||||
const resetForm = () => {
|
||||
setFormField(initialState);
|
||||
};
|
||||
const [postoadms, setPostoadms] = useState<PostoAdmsProps[]>([]);
|
||||
const [isFound, setIsFound] = useState(false);
|
||||
|
||||
const handleSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
|
||||
e.preventDefault();
|
||||
const id = Number(formField.id);
|
||||
|
||||
if (formField.id === 0) {
|
||||
setAlert({ show: true, message: 'Please fill name field.' });
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
const response = await axios.get(`${API_URL}/municipios/postoadms/${id}`);
|
||||
|
||||
if (response.data.status) {
|
||||
setPostoadms(response.data.data);
|
||||
setIsFound(true);
|
||||
// console.log('Found postoadms: ', response.data.data);
|
||||
} else {
|
||||
setPostoadms([]);
|
||||
setIsFound(false);
|
||||
setAlert({ show: true, message: 'No postoadms found.' });
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Error fetching postoadms', error);
|
||||
setAlert({ show: true, message: 'Failed to fetch postoadms. Please try again.' });
|
||||
}
|
||||
setAlert({ show: false, message: '' });
|
||||
};
|
||||
|
||||
const handleReset = () => {
|
||||
setFormField(initialState);
|
||||
setIsFound(false);
|
||||
setPostoadms([]);
|
||||
};
|
||||
// console.log(municipios);
|
||||
return (
|
||||
<Dialog open={showSearchDialog} onOpenChange={(open) => handleSearchDialog(open)}>
|
||||
<DialogContent className="container-fixed max-w-[700px] flex flex-col p-5 overflow-hidden [&>button]:hidden">
|
||||
<DialogTitle></DialogTitle>
|
||||
<DialogDescription></DialogDescription>
|
||||
<DialogHeader className="p-2 border-0">
|
||||
<div className="flex items-center justify-between flex-wrap grow">
|
||||
<div className="flex flex-col justify-center">
|
||||
<h1 className="text-xl font-semibold leading-none text-gray-900">
|
||||
Search Postoadms
|
||||
</h1>
|
||||
<div className="flex items-center gap-2 text-sm font-normal text-gray-700"></div>
|
||||
</div>
|
||||
<div
|
||||
className="cursor-pointer hover:opacity-100 opacity-50"
|
||||
onClick={() => {
|
||||
handleSearchDialog(false);
|
||||
resetForm();
|
||||
}}
|
||||
>
|
||||
<KeenIcon icon="cross" className="text-1.5xl" />
|
||||
</div>
|
||||
</div>
|
||||
</DialogHeader>
|
||||
<DialogBody className="scrollable-y px-0 pb-0" ref={parentRef}>
|
||||
<div className="flex flex-col px-0">
|
||||
{alert.show && (
|
||||
<Alert variant="danger" className="mb-5">
|
||||
{alert.message}
|
||||
</Alert>
|
||||
)}
|
||||
<form action="" onSubmit={handleSubmit}>
|
||||
<div className="card-body grid-cols-6 gap-5 p-0">
|
||||
<div className="grid grid-cols-8 gap-2 w-full items-center">
|
||||
<label className="form-label flex items-center gap-1 col-span-2">
|
||||
Municipio Name<span className="text-red-500">*</span>
|
||||
</label>
|
||||
|
||||
<Select
|
||||
value={formField.id.toString()}
|
||||
onValueChange={(target) => {
|
||||
const selectedMunicipio = municipios.find((m) => m.id.toString() === target);
|
||||
if (selectedMunicipio) {
|
||||
setFormField({
|
||||
...formField,
|
||||
id: selectedMunicipio.id,
|
||||
name: selectedMunicipio.name
|
||||
});
|
||||
}
|
||||
}}
|
||||
>
|
||||
<SelectTrigger className="col-span-6">
|
||||
<SelectValue placeholder="Select Municipios" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
{municipios.map((municipio) => (
|
||||
<SelectItem key={municipio.id} value={municipio.id.toString()}>
|
||||
{municipio.name}
|
||||
</SelectItem>
|
||||
))}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
|
||||
{isFound && postoadms.length > 0 && (
|
||||
<div className="mt-4 border-t pt-4">
|
||||
<h2 className="text-md font-semibold">Postu Administravo: </h2>
|
||||
<br />
|
||||
<div className="flex flex-col">
|
||||
<span className="text-sm form-hint">
|
||||
{postoadms.map((posto) => posto.name).join(', ')}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="flex justify-end pt-2.5 gap-5 col-span-6">
|
||||
<Button variant={'outline'} type="reset" onClick={handleReset}>
|
||||
Reset
|
||||
</Button>
|
||||
<Button variant={'default'} type="submit">
|
||||
Search
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</DialogBody>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
);
|
||||
};
|
||||
|
||||
export default SearchDialog;
|
||||
@ -132,7 +132,7 @@ const ManageMunicipiosProvider = ({ children }: { children: React.ReactNode }) =
|
||||
);
|
||||
},
|
||||
meta: {
|
||||
headerClassName: 'w-[100px]',
|
||||
headerClassName: 'w-[100px] text-center',
|
||||
cellClassName: 'text-center'
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,7 +1,6 @@
|
||||
import AddDialog from './blocks/AddDialog';
|
||||
import DeleteDialog from './blocks/DeleteDialog';
|
||||
import EditDialog from './blocks/EditDialog';
|
||||
import SearchDialog from './blocks/SearchDialog';
|
||||
import { ManagePostoAdmsContextProvider } from './hooks/ManagePostoAdmsContext';
|
||||
import { Container, DataGridInner } from '@/components';
|
||||
import { Breadcrumbs, Link } from '@mui/material';
|
||||
@ -37,7 +36,6 @@ const PostoAdmsMaster = () => {
|
||||
<AddDialog />
|
||||
<EditDialog />
|
||||
<DeleteDialog />
|
||||
<SearchDialog />
|
||||
</Container>
|
||||
</ManagePostoAdmsContextProvider>
|
||||
</>
|
||||
|
||||
@ -41,6 +41,7 @@ const EditDialog = () => {
|
||||
const { PutData, GetData } = useCallApi();
|
||||
const parsedUser = getAuth()?.user;
|
||||
const [open, setOpen] = useState(false);
|
||||
const [isLoading, setIsLoading] = useState(false);
|
||||
const [municipios, setMunicipios] = useState<MunicipioProps[]>([]);
|
||||
|
||||
const [alert, setAlert] = useState({
|
||||
@ -112,7 +113,10 @@ const EditDialog = () => {
|
||||
}, []);
|
||||
|
||||
const doFetchData = useCallback(async (id: string) => {
|
||||
const response = await GetData(`${API_URL}/postoadms/getdata/${id}`, { id });
|
||||
setIsLoading(true);
|
||||
const minDelay = new Promise((resolve) => setTimeout(resolve, 300));
|
||||
const fetchData = await GetData(`${API_URL}/postoadms/getdata/${id}`, { id });
|
||||
const [response] = await Promise.all([fetchData, minDelay]);
|
||||
|
||||
if (response?.status) {
|
||||
setFormField((prev) => ({
|
||||
@ -126,6 +130,7 @@ const EditDialog = () => {
|
||||
name: ''
|
||||
}));
|
||||
}
|
||||
setIsLoading(false);
|
||||
}, []);
|
||||
|
||||
const handleUpdate = (e: React.FormEvent<HTMLFormElement>) => {
|
||||
@ -184,71 +189,86 @@ const EditDialog = () => {
|
||||
</Alert>
|
||||
)}
|
||||
|
||||
<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 })}
|
||||
/>
|
||||
{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="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>
|
||||
</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>
|
||||
<p className="mt-4 text-gray-500">Loading Postu Administrativo Details...</p>
|
||||
</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>
|
||||
</DialogBody>
|
||||
</DialogContent>
|
||||
|
||||
@ -2,12 +2,14 @@ import { DefaultTooltip, KeenIcon, useDataGrid } from '@/components';
|
||||
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { useManagePostoAdmsContext } from '../hooks/useManagePostoAdmsContext';
|
||||
import { useState } from 'react';
|
||||
import { useEffect, useState } from 'react';
|
||||
|
||||
const ListToolbar = () => {
|
||||
const { table, reload } = useDataGrid();
|
||||
const { handleAddDialog, handleSearchDialog } = useManagePostoAdmsContext();
|
||||
const [searchPosto, setSearchPosto] = useState('');
|
||||
const [searchValue, setSearchValue] = useState<string>(
|
||||
(table.getColumn('name')?.getFilterValue() as string) ?? ''
|
||||
);
|
||||
|
||||
const handleKeyDown = (event: React.KeyboardEvent) => {
|
||||
if (event.key === 'Enter') {
|
||||
@ -16,10 +18,19 @@ const ListToolbar = () => {
|
||||
};
|
||||
|
||||
const handleSearch = () => {
|
||||
table.getColumn('name')?.setFilterValue(searchPosto);
|
||||
table.getColumn('name')?.setFilterValue(searchValue);
|
||||
table.setPageIndex(0);
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
const timer = setTimeout(() => {
|
||||
table.getColumn('name')?.setFilterValue(searchValue);
|
||||
table.setPageIndex(0);
|
||||
}, 200);
|
||||
|
||||
return () => clearTimeout(timer);
|
||||
}, [searchValue, table]);
|
||||
|
||||
return (
|
||||
<div className="card-header flex-wrap gap-2 border-b-0 px-5">
|
||||
<div className="flex flex-wrap gap-2 lg:gap-5 w-full">
|
||||
@ -30,34 +41,15 @@ const ListToolbar = () => {
|
||||
<input
|
||||
type="text"
|
||||
placeholder="Search"
|
||||
value={searchPosto}
|
||||
onChange={(event) => setSearchPosto(event.target.value)}
|
||||
onKeyDown={handleKeyDown}
|
||||
value={searchValue}
|
||||
onChange={(event) => setSearchValue(event.target.value)}
|
||||
/>
|
||||
</label>
|
||||
<DefaultTooltip title={'Search'} placement={'top'}>
|
||||
{/* <DefaultTooltip title={'Search'} placement={'top'}>
|
||||
<Button variant="outline" className="h-7.5" onClick={handleSearch}>
|
||||
<KeenIcon icon="magnifier" />
|
||||
</Button>
|
||||
</DefaultTooltip>
|
||||
{/* <DefaultTooltip title={'Filter'} placement={'top'}>
|
||||
<Button
|
||||
variant="outline"
|
||||
className="h-7.5 disabled:bg-gray-400"
|
||||
// disabled={isLoading}
|
||||
// onClick={handleFilterData}
|
||||
>
|
||||
{loadingButton === 'filter' ? <ContentLoader /> : <KeenIcon icon="filter" />}
|
||||
<KeenIcon icon="filter" />
|
||||
</Button>
|
||||
</DefaultTooltip> */}
|
||||
{/* <Button
|
||||
variant="outline"
|
||||
className="h-7.5 text-[0.8rem]"
|
||||
onClick={() => handleSearchDialog(true)}
|
||||
>
|
||||
Search Sucos
|
||||
</Button> */}
|
||||
</div>
|
||||
<div className="flex gap-3 items-center">
|
||||
<Button
|
||||
|
||||
@ -1,177 +0,0 @@
|
||||
import { useRef, useState } from 'react';
|
||||
import {
|
||||
Dialog,
|
||||
DialogBody,
|
||||
DialogContent,
|
||||
DialogDescription,
|
||||
DialogHeader,
|
||||
DialogTitle
|
||||
} from '@/components/ui/dialog';
|
||||
import { Alert, KeenIcon } from '@/components';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { apiConfig } from '@/config/api.config';
|
||||
import axios from 'axios';
|
||||
import { useManagePostoAdmsContext } from '../hooks/useManagePostoAdmsContext';
|
||||
import {
|
||||
Command,
|
||||
CommandEmpty,
|
||||
CommandGroup,
|
||||
CommandInput,
|
||||
CommandItem,
|
||||
CommandList
|
||||
} from '@/components/ui/command';
|
||||
import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover';
|
||||
|
||||
interface SucosProps {
|
||||
id: number;
|
||||
name: string;
|
||||
}
|
||||
|
||||
const API_URL = apiConfig.service_master_data;
|
||||
|
||||
const SearchDialog = () => {
|
||||
const parentRef = useRef<any | null>(null);
|
||||
const [open, setOpen] = useState(false);
|
||||
const { showSearchDialog, handleSearchDialog, postoAdms } = useManagePostoAdmsContext();
|
||||
const [alert, setAlert] = useState({
|
||||
show: false,
|
||||
message: ''
|
||||
});
|
||||
const initialState = {
|
||||
id: 0,
|
||||
name: ''
|
||||
};
|
||||
|
||||
const [formField, setFormField] = useState(initialState);
|
||||
const resetForm = () => {
|
||||
setFormField(initialState);
|
||||
};
|
||||
const [sucos, setSucos] = useState<SucosProps[]>([]);
|
||||
const [isFound, setIsFound] = useState(false);
|
||||
|
||||
const handleSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
|
||||
e.preventDefault();
|
||||
const id = Number(formField.id);
|
||||
|
||||
if (formField.id === 0) {
|
||||
setAlert({ show: true, message: 'Please fill name field.' });
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
const response = await axios.get(`${API_URL}/postoadms/sucos/${id}`);
|
||||
|
||||
if (response.data.status) {
|
||||
setSucos(response.data.data);
|
||||
console.log(sucos);
|
||||
setIsFound(true);
|
||||
console.log('Found postoadms: ', response.data.data);
|
||||
} else {
|
||||
setSucos([]);
|
||||
setIsFound(false);
|
||||
setAlert({ show: true, message: 'No postoadms found.' });
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Error fetching postoadms', error);
|
||||
setAlert({ show: true, message: 'Failed to fetch postoadms. Please try again.' });
|
||||
}
|
||||
setAlert({ show: false, message: '' });
|
||||
};
|
||||
|
||||
const handleReset = () => {
|
||||
setFormField(initialState);
|
||||
setIsFound(false);
|
||||
setSucos([]);
|
||||
};
|
||||
|
||||
return (
|
||||
<Dialog open={showSearchDialog} onOpenChange={handleSearchDialog}>
|
||||
<DialogContent className="container-fixed max-w-[700px] flex flex-col p-5 overflow-hidden [&>button]:hidden">
|
||||
<DialogHeader className="p-2 border-0">
|
||||
<DialogTitle></DialogTitle>
|
||||
<DialogDescription></DialogDescription>
|
||||
<div className="flex items-center justify-between flex-wrap grow">
|
||||
<div className="flex flex-col justify-center">
|
||||
<h1 className="text-xl font-semibold leading-none text-gray-900">Search Sucos</h1>
|
||||
</div>
|
||||
<div
|
||||
className="cursor-pointer hover:opacity-100 opacity-50"
|
||||
onClick={() => {
|
||||
handleSearchDialog(false);
|
||||
handleReset();
|
||||
}}
|
||||
>
|
||||
<KeenIcon icon="cross" className="text-1.5xl" />
|
||||
</div>
|
||||
</div>
|
||||
</DialogHeader>
|
||||
<DialogBody className="scrollable-y px-0 pb-0" ref={parentRef}>
|
||||
<form onSubmit={handleSubmit} className="flex flex-col px-5 gap-5">
|
||||
{alert.show && <Alert variant="danger">{alert.message}</Alert>}
|
||||
|
||||
<div className="grid grid-cols-8 gap-1 w-full items-center">
|
||||
<label className="form-label flex items-center col-span-3">
|
||||
Postu Administrativo 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">
|
||||
{formField.name || 'Select PostoAdms'}
|
||||
</button>
|
||||
</PopoverTrigger>
|
||||
<PopoverContent className="w-[400px] p-0">
|
||||
<Command>
|
||||
<CommandInput placeholder="Search PostoAdms..." />
|
||||
<CommandList>
|
||||
<CommandEmpty>No PostoAdms found.</CommandEmpty>
|
||||
<CommandGroup>
|
||||
{postoAdms.map((postoAdm) => (
|
||||
<CommandItem
|
||||
key={postoAdm.PostoAdms_id}
|
||||
value={postoAdm.PostoAdms_name}
|
||||
onSelect={() => {
|
||||
setFormField({
|
||||
id: postoAdm.PostoAdms_id,
|
||||
name: postoAdm.PostoAdms_name
|
||||
});
|
||||
setOpen(false);
|
||||
}}
|
||||
>
|
||||
{postoAdm.PostoAdms_name}
|
||||
</CommandItem>
|
||||
))}
|
||||
</CommandGroup>
|
||||
</CommandList>
|
||||
</Command>
|
||||
</PopoverContent>
|
||||
</Popover>
|
||||
</div>
|
||||
|
||||
{isFound && sucos.length > 0 && (
|
||||
<div className="mt-4 border-t pt-4">
|
||||
<h2 className="text-md font-semibold">Sucos: </h2>
|
||||
<div className="flex flex-col">
|
||||
<span className="text-sm form-hint">
|
||||
{sucos.map((suco) => suco.name).join(', ')}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="flex justify-end gap-4">
|
||||
<Button type="reset" variant="outline" onClick={handleReset}>
|
||||
Reset
|
||||
</Button>
|
||||
<Button type="submit" variant="default">
|
||||
Search
|
||||
</Button>
|
||||
</div>
|
||||
</form>
|
||||
</DialogBody>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
);
|
||||
};
|
||||
|
||||
export default SearchDialog;
|
||||
@ -131,7 +131,7 @@ const ManagePostoAdmsContextProvider = ({ children }: { children: React.ReactNod
|
||||
);
|
||||
},
|
||||
meta: {
|
||||
headerClassName: 'w-[100px]',
|
||||
headerClassName: 'w-[100px] text-center',
|
||||
cellClassName: 'text-center'
|
||||
}
|
||||
}
|
||||
|
||||
@ -36,6 +36,7 @@ const EditDialog = () => {
|
||||
const { reload } = useDataGrid();
|
||||
const { PutData, GetData } = useCallApi();
|
||||
const parsedUser = getAuth()?.user;
|
||||
const [isLoading, setIsLoading] = useState(false);
|
||||
const created_time = new Date();
|
||||
const formattedTime = created_time.toISOString().slice(0, 19).replace('T', ' ');
|
||||
const [alert, setAlert] = useState({
|
||||
@ -123,7 +124,12 @@ const EditDialog = () => {
|
||||
}, []);
|
||||
|
||||
const doFetchData = useCallback(async (id: string) => {
|
||||
const response = await GetData(`${API_URL}/product/getdata/${id}`, { id });
|
||||
setIsLoading(true);
|
||||
|
||||
const minDelay = new Promise((resolve) => setTimeout(resolve, 500));
|
||||
const fetchData = GetData(`${API_URL}/product/getdata/${id}`, { id });
|
||||
|
||||
const [response] = await Promise.all([fetchData, minDelay]);
|
||||
// console.log(response);
|
||||
|
||||
if (response?.status) {
|
||||
@ -144,6 +150,7 @@ const EditDialog = () => {
|
||||
} else {
|
||||
setFormField(initialState);
|
||||
}
|
||||
setIsLoading(false);
|
||||
}, []);
|
||||
|
||||
const handleUpdate = (e: React.FormEvent<HTMLFormElement>) => {
|
||||
@ -214,225 +221,242 @@ const EditDialog = () => {
|
||||
</Alert>
|
||||
)}
|
||||
|
||||
<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={(e) => setFormField({ ...formField, name: e.target.value })}
|
||||
/>
|
||||
{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="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>
|
||||
</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>
|
||||
<Input
|
||||
className="input"
|
||||
type="text"
|
||||
value={formField.type}
|
||||
onChange={(e) => setFormField({ ...formField, type: 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">
|
||||
Code<span className="text-red-500">*</span>
|
||||
</label>
|
||||
<Input
|
||||
className="input"
|
||||
type="text"
|
||||
value={formField.code}
|
||||
onChange={(e) => setFormField({ ...formField, code: 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">
|
||||
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">
|
||||
Price Point<span className="text-red-500">*</span>
|
||||
</label>
|
||||
<NumericFormat
|
||||
className="input"
|
||||
value={formField.price_point ?? ''}
|
||||
thousandSeparator="."
|
||||
decimalSeparator=","
|
||||
allowNegative={false}
|
||||
onValueChange={(values) => {
|
||||
setFormField((prev) => ({
|
||||
...prev,
|
||||
price_point: values.floatValue !== undefined ? values.floatValue : ''
|
||||
}));
|
||||
}}
|
||||
placeholder="Enter Price Point"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<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>
|
||||
<NumericFormat
|
||||
className="input"
|
||||
value={formField.price_cash ?? ''}
|
||||
thousandSeparator="."
|
||||
decimalSeparator=","
|
||||
allowNegative={false}
|
||||
onValueChange={(values) => {
|
||||
setFormField((prev) => ({
|
||||
...prev,
|
||||
price_cash: values.floatValue !== undefined ? values.floatValue : ''
|
||||
}));
|
||||
}}
|
||||
placeholder="Enter Price Cash"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<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>
|
||||
<NumericFormat
|
||||
className="input"
|
||||
value={formField.cashback_point ?? ''}
|
||||
thousandSeparator="."
|
||||
decimalSeparator=","
|
||||
allowNegative={false}
|
||||
onValueChange={(values) => {
|
||||
setFormField((prev) => ({
|
||||
...prev,
|
||||
cashback_point: values.floatValue !== undefined ? values.floatValue : ''
|
||||
}));
|
||||
}}
|
||||
placeholder="Enter Cashback Point"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<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>
|
||||
<NumericFormat
|
||||
className="input"
|
||||
value={formField.cashback_cash ?? ''}
|
||||
thousandSeparator="."
|
||||
decimalSeparator=","
|
||||
allowNegative={false}
|
||||
onValueChange={(values) => {
|
||||
setFormField((prev) => ({
|
||||
...prev,
|
||||
cashback_cash: values.floatValue !== undefined ? values.floatValue : ''
|
||||
}));
|
||||
}}
|
||||
placeholder="Enter Cashback Cash"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<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={(e) => setFormField({ ...formField, status: e })}
|
||||
>
|
||||
<SelectTrigger>
|
||||
<SelectValue placeholder="Select a 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">
|
||||
Provider ID
|
||||
</label>
|
||||
<Select
|
||||
value={formField.provider}
|
||||
onValueChange={(e) => setFormField({ ...formField, provider: e })}
|
||||
>
|
||||
<SelectTrigger>
|
||||
<SelectValue placeholder="Select a Provider" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
{providers.map((provider) => (
|
||||
<SelectItem key={provider.provider_id} value={provider.provider_id}>
|
||||
{provider.provider_name}
|
||||
</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">
|
||||
Process on Third Party<span className="text-red-500">*</span>
|
||||
</label>
|
||||
<Select
|
||||
value={formField.process_on_third_party}
|
||||
onValueChange={(value) =>
|
||||
setFormField({ ...formField, process_on_third_party: value })
|
||||
}
|
||||
>
|
||||
<SelectTrigger>
|
||||
<SelectValue placeholder="Select Status" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="Y">Yes</SelectItem>
|
||||
<SelectItem value="N">No</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex justify-end gap-5">
|
||||
<Button type="button" variant="outline" onClick={resetForm}>
|
||||
Reset
|
||||
</Button>
|
||||
<Button variant="default">Save Changes</Button>
|
||||
</div>
|
||||
<p className="mt-4 text-gray-500">Loading Products Details...</p>
|
||||
</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={(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">
|
||||
Type<span className="text-red-500">*</span>
|
||||
</label>
|
||||
<Input
|
||||
className="input"
|
||||
type="text"
|
||||
value={formField.type}
|
||||
onChange={(e) => setFormField({ ...formField, type: 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">
|
||||
Code<span className="text-red-500">*</span>
|
||||
</label>
|
||||
<Input
|
||||
className="input"
|
||||
type="text"
|
||||
value={formField.code}
|
||||
onChange={(e) => setFormField({ ...formField, code: 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">
|
||||
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">
|
||||
Price Point<span className="text-red-500">*</span>
|
||||
</label>
|
||||
<NumericFormat
|
||||
className="input"
|
||||
value={formField.price_point ?? ''}
|
||||
thousandSeparator="."
|
||||
decimalSeparator=","
|
||||
allowNegative={false}
|
||||
onValueChange={(values) => {
|
||||
setFormField((prev) => ({
|
||||
...prev,
|
||||
price_point: values.floatValue !== undefined ? values.floatValue : ''
|
||||
}));
|
||||
}}
|
||||
placeholder="Enter Price Point"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<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>
|
||||
<NumericFormat
|
||||
className="input"
|
||||
value={formField.price_cash ?? ''}
|
||||
thousandSeparator="."
|
||||
decimalSeparator=","
|
||||
allowNegative={false}
|
||||
onValueChange={(values) => {
|
||||
setFormField((prev) => ({
|
||||
...prev,
|
||||
price_cash: values.floatValue !== undefined ? values.floatValue : ''
|
||||
}));
|
||||
}}
|
||||
placeholder="Enter Price Cash"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<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>
|
||||
<NumericFormat
|
||||
className="input"
|
||||
value={formField.cashback_point ?? ''}
|
||||
thousandSeparator="."
|
||||
decimalSeparator=","
|
||||
allowNegative={false}
|
||||
onValueChange={(values) => {
|
||||
setFormField((prev) => ({
|
||||
...prev,
|
||||
cashback_point: values.floatValue !== undefined ? values.floatValue : ''
|
||||
}));
|
||||
}}
|
||||
placeholder="Enter Cashback Point"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<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>
|
||||
<NumericFormat
|
||||
className="input"
|
||||
value={formField.cashback_cash ?? ''}
|
||||
thousandSeparator="."
|
||||
decimalSeparator=","
|
||||
allowNegative={false}
|
||||
onValueChange={(values) => {
|
||||
setFormField((prev) => ({
|
||||
...prev,
|
||||
cashback_cash: values.floatValue !== undefined ? values.floatValue : ''
|
||||
}));
|
||||
}}
|
||||
placeholder="Enter Cashback Cash"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<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={(e) => setFormField({ ...formField, status: e })}
|
||||
>
|
||||
<SelectTrigger>
|
||||
<SelectValue placeholder="Select a 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">
|
||||
Provider ID
|
||||
</label>
|
||||
<Select
|
||||
value={formField.provider}
|
||||
onValueChange={(e) => setFormField({ ...formField, provider: e })}
|
||||
>
|
||||
<SelectTrigger>
|
||||
<SelectValue placeholder="Select a Provider" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
{providers.map((provider) => (
|
||||
<SelectItem key={provider.provider_id} value={provider.provider_id}>
|
||||
{provider.provider_name}
|
||||
</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">
|
||||
Process on Third Party<span className="text-red-500">*</span>
|
||||
</label>
|
||||
<Select
|
||||
value={formField.process_on_third_party}
|
||||
onValueChange={(value) =>
|
||||
setFormField({ ...formField, process_on_third_party: value })
|
||||
}
|
||||
>
|
||||
<SelectTrigger>
|
||||
<SelectValue placeholder="Select Status" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="Y">Yes</SelectItem>
|
||||
<SelectItem value="N">No</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex justify-end gap-5">
|
||||
<Button type="button" variant="outline" onClick={resetForm}>
|
||||
Reset
|
||||
</Button>
|
||||
<Button variant="default">Save Changes</Button>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
)}
|
||||
</div>
|
||||
</DialogBody>
|
||||
</DialogContent>
|
||||
|
||||
@ -1,10 +1,23 @@
|
||||
import { DefaultTooltip, KeenIcon, useDataGrid } from '@/components';
|
||||
import { useManageProductsContext } from '../hooks/useManageProductsContext';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { useEffect, useState } from 'react';
|
||||
|
||||
const ListToolbar = () => {
|
||||
const { table, reload } = useDataGrid();
|
||||
const { handleAddDialog } = useManageProductsContext();
|
||||
const [searchValue, setSearchValue] = useState<string>(
|
||||
(table.getColumn('name')?.getFilterValue() as string) ?? ''
|
||||
);
|
||||
|
||||
useEffect(() => {
|
||||
const timer = setTimeout(() => {
|
||||
table.getColumn('name')?.setFilterValue(searchValue);
|
||||
table.setPageIndex(0);
|
||||
}, 200);
|
||||
|
||||
return () => clearTimeout(timer);
|
||||
}, [searchValue, table]);
|
||||
|
||||
return (
|
||||
<div className="card-header flex-wrap gap-2 border-b-0 px-5">
|
||||
@ -15,22 +28,11 @@ const ListToolbar = () => {
|
||||
<KeenIcon icon="magnifier" />
|
||||
<input
|
||||
type="text"
|
||||
placeholder="Search Products"
|
||||
value={(table.getColumn('name')?.getFilterValue() as string) ?? ''}
|
||||
onChange={(event) => table.getColumn('name')?.setFilterValue(event.target.value)}
|
||||
placeholder="Search"
|
||||
value={searchValue}
|
||||
onChange={(event) => setSearchValue(event.target.value)}
|
||||
/>
|
||||
</label>
|
||||
{/* <DefaultTooltip title={'Filter'} placement={'top'}>
|
||||
<Button
|
||||
variant="outline"
|
||||
className="h-7.5 disabled:bg-gray-400"
|
||||
// disabled={isLoading}
|
||||
// onClick={handleFilterData}
|
||||
>
|
||||
{loadingButton === 'filter' ? <ContentLoader /> : <KeenIcon icon="filter" />}
|
||||
<KeenIcon icon="filter" />
|
||||
</Button>
|
||||
</DefaultTooltip> */}
|
||||
</div>
|
||||
<div className="flex gap-3 items-center">
|
||||
<Button
|
||||
|
||||
@ -231,7 +231,7 @@ const ManageProductsContextProvider = ({ children }: { children: React.ReactNode
|
||||
);
|
||||
},
|
||||
meta: {
|
||||
headerClassName: 'w-[100px]',
|
||||
headerClassName: 'w-[100px] text-center',
|
||||
cellClassName: 'text-center'
|
||||
}
|
||||
}
|
||||
|
||||
@ -23,6 +23,7 @@ const EditDialog = () => {
|
||||
const { reload } = useDataGrid();
|
||||
const { PutData, GetData } = useCallApi();
|
||||
const parsedUser = getAuth()?.user;
|
||||
const [isLoading, setIsLoading] = useState(false);
|
||||
const created_time = new Date();
|
||||
const formattedTime = created_time.toISOString().slice(0, 19).replace('T', ' ');
|
||||
const [alert, setAlert] = useState({
|
||||
@ -72,7 +73,10 @@ const EditDialog = () => {
|
||||
);
|
||||
|
||||
const doFetchData = useCallback(async (id: string) => {
|
||||
const response = await GetData(`${API_URL}/profession/getdata/${id}`, { id });
|
||||
setIsLoading(true);
|
||||
const minDelay = new Promise((resolve) => setTimeout(resolve, 300));
|
||||
const fetchData = GetData(`${API_URL}/profession/getdata/${id}`, { id });
|
||||
const [response] = await Promise.all([fetchData, minDelay]);
|
||||
|
||||
if (response?.status) {
|
||||
setFormField((prev) => ({
|
||||
@ -82,6 +86,7 @@ const EditDialog = () => {
|
||||
} else {
|
||||
setFormField(initialState);
|
||||
}
|
||||
setIsLoading(false);
|
||||
}, []);
|
||||
|
||||
const handleUpdate = (e: React.FormEvent<HTMLFormElement>) => {
|
||||
@ -134,27 +139,42 @@ const EditDialog = () => {
|
||||
</Alert>
|
||||
)}
|
||||
|
||||
<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={(e) => setFormField({ ...formField, name: e.target.value })}
|
||||
/>
|
||||
{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="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>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex justify-end">
|
||||
<Button className="btn btn-primary">Save Changes</Button>
|
||||
</div>
|
||||
<p className="mt-4 text-gray-500">Loading Profession Details...</p>
|
||||
</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={(e) => setFormField({ ...formField, name: e.target.value })}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex justify-end">
|
||||
<Button className="btn btn-primary">Save Changes</Button>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
)}
|
||||
</div>
|
||||
</DialogBody>
|
||||
</DialogContent>
|
||||
|
||||
@ -1,10 +1,24 @@
|
||||
import { DefaultTooltip, KeenIcon, useDataGrid } from '@/components';
|
||||
import { useManageProfessionContext } from '../hooks/useManageProfessionContext';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { useEffect, useState } from 'react';
|
||||
import { set } from 'date-fns';
|
||||
|
||||
const ListToolbar = () => {
|
||||
const { reload, table } = useDataGrid();
|
||||
const { handleAddDialog } = useManageProfessionContext();
|
||||
const [searchValue, setSearchValue] = useState<string>(
|
||||
(table.getColumn('name')?.getFilterValue() as string) ?? ''
|
||||
);
|
||||
|
||||
useEffect(() => {
|
||||
const timer = setTimeout(() => {
|
||||
table.getColumn('name')?.setFilterValue(searchValue);
|
||||
table.setPageIndex(0);
|
||||
}, 200);
|
||||
|
||||
return () => clearTimeout(timer);
|
||||
}, [searchValue, table]);
|
||||
|
||||
return (
|
||||
<div className="card-header flex-wrap gap-2 border-b-0 px-5">
|
||||
@ -15,24 +29,11 @@ const ListToolbar = () => {
|
||||
<KeenIcon icon="magnifier" />
|
||||
<input
|
||||
type="text"
|
||||
placeholder="Search Profession"
|
||||
value={(table.getColumn('name')?.getFilterValue() as string) ?? ''}
|
||||
onChange={(event) =>
|
||||
table.getColumn('name')?.setFilterValue(event.target.value)
|
||||
}
|
||||
placeholder="Search"
|
||||
value={searchValue}
|
||||
onChange={(event) => setSearchValue(event.target.value)}
|
||||
/>
|
||||
</label>
|
||||
{/* <DefaultTooltip title={'Filter'} placement={'top'}>
|
||||
<Button
|
||||
variant="outline"
|
||||
className="h-7.5 disabled:bg-gray-400"
|
||||
// disabled={isLoading}
|
||||
// onClick={handleFilterData}
|
||||
>
|
||||
{loadingButton === 'filter' ? <ContentLoader /> : <KeenIcon icon="filter" />}
|
||||
<KeenIcon icon="filter" />
|
||||
</Button>
|
||||
</DefaultTooltip> */}
|
||||
</div>
|
||||
<div className="flex gap-3 items-center">
|
||||
<Button
|
||||
|
||||
@ -102,7 +102,7 @@ const ManageProfessionContextProvider = ({ children }: { children: React.ReactNo
|
||||
);
|
||||
},
|
||||
meta: {
|
||||
headerClassName: 'w-[100px]',
|
||||
headerClassName: 'w-[100px] text-center',
|
||||
cellClassName: 'text-center'
|
||||
}
|
||||
}
|
||||
@ -151,7 +151,7 @@ const ManageProfessionContextProvider = ({ children }: { children: React.ReactNo
|
||||
pagination={{ size: 10 }}
|
||||
toolbar={<ListToolbar />}
|
||||
layout={{ card: true }}
|
||||
sorting={[{ id: 'id', desc: false }]}
|
||||
sorting={[{ id: 'name', desc: false }]}
|
||||
serverSide={true}
|
||||
onFetchData={({ pageIndex, pageSize, sorting, columnFilters }) =>
|
||||
getProfessionLists(pageIndex, pageSize, sorting, columnFilters)
|
||||
|
||||
@ -47,6 +47,7 @@ const EditDialog = () => {
|
||||
const created_time = new Date();
|
||||
const formattedTime = created_time.toISOString().slice(0, 19).replace('T', ' ');
|
||||
const [open, setOpen] = useState(false);
|
||||
const [isLoading, setIsLoading] = useState(false);
|
||||
const [alert, setAlert] = useState({
|
||||
show: false,
|
||||
message: ''
|
||||
@ -146,19 +147,23 @@ const EditDialog = () => {
|
||||
};
|
||||
|
||||
const doFetchData = useCallback(async (id: string) => {
|
||||
const response = await GetData(`${API_URL_MASTERDATA}/provider/getdata/${id}`, { id });
|
||||
setIsLoading(true);
|
||||
const minDelay = new Promise((resolve) => setTimeout(resolve, 300));
|
||||
const fetchData = GetData(`${API_URL_MASTERDATA}/provider/getdata/${id}`, { id });
|
||||
const [response] = await Promise.all([fetchData, minDelay]);
|
||||
// console.log(response);
|
||||
if (response?.status) {
|
||||
setFormField((prev) => ({
|
||||
...prev,
|
||||
name: response?.data.name,
|
||||
name: response?.data.name || null,
|
||||
description: response?.data.description,
|
||||
type: response?.data.type,
|
||||
status: response?.data.status,
|
||||
transaction_type: response?.data.transaction_type.id,
|
||||
transaction_type: response?.data.transaction_type?.id || null,
|
||||
agent: response?.data.agent?.id || null
|
||||
}));
|
||||
}
|
||||
setIsLoading(false);
|
||||
}, []);
|
||||
|
||||
const handleUpdate = (e: React.FormEvent<HTMLFormElement>) => {
|
||||
@ -169,7 +174,8 @@ const EditDialog = () => {
|
||||
formField.description.trim() === '' ||
|
||||
formField.type.trim() === '' ||
|
||||
formField.status.trim() === '' ||
|
||||
formField.transaction_type.trim() === ''
|
||||
formField.transaction_type.trim() === '' ||
|
||||
formField.agent === null
|
||||
) {
|
||||
setAlert({ show: true, message: 'Please fill in all required fields.' });
|
||||
return;
|
||||
@ -206,7 +212,7 @@ const EditDialog = () => {
|
||||
getCustomerList([{ id: 'id', desc: false }]);
|
||||
getTransactionTypeList([{ id: 'name', desc: false }]);
|
||||
}, []);
|
||||
// console.log(selectedProvider);
|
||||
|
||||
return (
|
||||
<Dialog open={showEditDialog} onOpenChange={(open) => handleEditDialog(open, null)}>
|
||||
<DialogContent className="container-fixed max-w-[768px] flex flex-col p-5 overflow-hidden">
|
||||
@ -222,170 +228,192 @@ const EditDialog = () => {
|
||||
</Alert>
|
||||
)}
|
||||
|
||||
<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>
|
||||
{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="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>
|
||||
</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>
|
||||
<p className="mt-4 text-gray-500">Loading Provider Details...</p>
|
||||
</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>
|
||||
</DialogBody>
|
||||
</DialogContent>
|
||||
|
||||
@ -1,10 +1,23 @@
|
||||
import { DefaultTooltip, KeenIcon, useDataGrid } from '@/components';
|
||||
import { useManageProviderContext } from '../hooks/useManageProviderContext';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { useEffect, useState } from 'react';
|
||||
|
||||
const ListToolbar = () => {
|
||||
const { reload, table } = useDataGrid();
|
||||
const { handleAddDialog } = useManageProviderContext();
|
||||
const [searchValue, setSearchValue] = useState<string>(
|
||||
(table.getColumn('name')?.getFilterValue() as string) ?? ''
|
||||
);
|
||||
|
||||
useEffect(() => {
|
||||
const timer = setTimeout(() => {
|
||||
table.getColumn('name')?.setFilterValue(searchValue);
|
||||
table.setPageIndex(0);
|
||||
}, 200);
|
||||
|
||||
return () => clearTimeout(timer);
|
||||
}, [searchValue, table]);
|
||||
|
||||
return (
|
||||
<div className="card-header flex-wrap gap-2 border-b-0 px-5">
|
||||
@ -15,24 +28,11 @@ const ListToolbar = () => {
|
||||
<KeenIcon icon="magnifier" />
|
||||
<input
|
||||
type="text"
|
||||
placeholder="Search Provider"
|
||||
value={(table.getColumn('name')?.getFilterValue() as string) ?? ''}
|
||||
onChange={(event) =>
|
||||
table.getColumn('name')?.setFilterValue(event.target.value)
|
||||
}
|
||||
placeholder="Search"
|
||||
value={searchValue}
|
||||
onChange={(event) => setSearchValue(event.target.value)}
|
||||
/>
|
||||
</label>
|
||||
{/* <DefaultTooltip title={'Filter'} placement={'top'}>
|
||||
<Button
|
||||
variant="outline"
|
||||
className="h-7.5 disabled:bg-gray-400"
|
||||
// disabled={isLoading}
|
||||
// onClick={handleFilterData}
|
||||
>
|
||||
{loadingButton === 'filter' ? <ContentLoader /> : <KeenIcon icon="filter" />}
|
||||
<KeenIcon icon="filter" />
|
||||
</Button>
|
||||
</DefaultTooltip> */}
|
||||
</div>
|
||||
<div className="flex gap-3 items-center">
|
||||
<Button
|
||||
|
||||
@ -129,7 +129,7 @@ const ManageProviderContextProvider = ({ children }: { children: React.ReactNode
|
||||
);
|
||||
},
|
||||
meta: {
|
||||
headerClassName: 'w-[100px]',
|
||||
headerClassName: 'w-[100px] text-center',
|
||||
cellClassName: 'text-center'
|
||||
}
|
||||
},
|
||||
@ -158,7 +158,7 @@ const ManageProviderContextProvider = ({ children }: { children: React.ReactNode
|
||||
);
|
||||
},
|
||||
meta: {
|
||||
headerClassName: 'w-[100px]',
|
||||
headerClassName: 'w-[100px] text-center',
|
||||
cellClassName: 'text-center'
|
||||
}
|
||||
}
|
||||
|
||||
@ -33,6 +33,7 @@ const EditDialog = () => {
|
||||
const { reload } = useDataGrid();
|
||||
const { PutData, GetData } = useCallApi();
|
||||
const parsedUser = getAuth()?.user;
|
||||
const [isLoading, setIsLoading] = useState(false);
|
||||
const [alert, setAlert] = useState({
|
||||
show: false,
|
||||
message: ''
|
||||
@ -93,8 +94,10 @@ const EditDialog = () => {
|
||||
);
|
||||
|
||||
const doFetchData = useCallback(async (id: string) => {
|
||||
// console.log('Ini datanya:', id);
|
||||
const response = await GetData(`${API_URL}/reward/getdata/${id}`, { id });
|
||||
setIsLoading(true);
|
||||
const minDelay = new Promise((resolve) => setTimeout(resolve, 300));
|
||||
const fetchData = GetData(`${API_URL}/reward/getdata/${id}`, { id });
|
||||
const [response] = await Promise.all([fetchData, minDelay]);
|
||||
// console.log('API Response:', response);
|
||||
|
||||
if (response?.status) {
|
||||
@ -106,6 +109,7 @@ const EditDialog = () => {
|
||||
status: response.data.status
|
||||
}));
|
||||
}
|
||||
setIsLoading(false);
|
||||
}, []);
|
||||
|
||||
// const handleUpdate = (e: React.FormEvent<HTMLFormElement>) => {
|
||||
@ -159,95 +163,112 @@ const EditDialog = () => {
|
||||
<div className="flex flex-col">
|
||||
{alert.show && <Alert variant="danger">{alert.message}</Alert>}
|
||||
|
||||
<form onSubmit={doUpdateReward}>
|
||||
<div className="card-body grid gap-5">
|
||||
<div className="grid grid-cols-8 gap-2 w-full items-center">
|
||||
<label className="form-label flex items-center gap-1 col-span-2">
|
||||
Name<span className="text-red-500">*</span>
|
||||
</label>
|
||||
|
||||
<Input
|
||||
className="input col-span-6"
|
||||
type="text"
|
||||
value={formField.name}
|
||||
onChange={(e) => setFormField((prev) => ({ ...prev, name: e.target.value }))}
|
||||
/>
|
||||
</div>
|
||||
<div className="grid grid-cols-8 gap-2 w-full items-center">
|
||||
<label className="form-label flex items-center gap-1 col-span-2">
|
||||
Type<span className="text-red-500">*</span>
|
||||
</label>
|
||||
|
||||
<div className="col-span-6">
|
||||
<Select
|
||||
value={formField.type}
|
||||
onValueChange={(value) => setFormField((prev) => ({ ...prev, type: value }))}
|
||||
>
|
||||
<SelectTrigger className="w-full">
|
||||
<SelectValue placeholder="Select Type" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
{Object.entries(RewardType).map(
|
||||
([label, value]: [string, RewardTypeValue]) => (
|
||||
<SelectItem key={value} value={value}>
|
||||
{label}
|
||||
</SelectItem>
|
||||
)
|
||||
)}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
{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="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>
|
||||
</div>
|
||||
</div>
|
||||
<div className="grid grid-cols-8 gap-2 w-full items-center">
|
||||
<label className="form-label flex items-center gap-1 col-span-2">
|
||||
Amount<span className="text-red-500">*</span>
|
||||
</label>
|
||||
|
||||
<NumericFormat
|
||||
className="input col-span-6"
|
||||
value={formField.amount}
|
||||
thousandSeparator="."
|
||||
decimalSeparator=","
|
||||
allowNegative={false}
|
||||
onValueChange={(values) => {
|
||||
setFormField((prev) => ({
|
||||
...prev,
|
||||
amount: values.floatValue || 0
|
||||
}));
|
||||
}}
|
||||
placeholder="Enter Amount"
|
||||
/>
|
||||
</div>
|
||||
<div className="grid grid-cols-8 gap-2 w-full items-center">
|
||||
<label className="form-label flex items-center gap-1 col-span-2">
|
||||
Status<span className="text-red-500">*</span>
|
||||
</label>
|
||||
|
||||
<div className="col-span-6">
|
||||
<Select
|
||||
value={formField.status}
|
||||
onValueChange={(value) =>
|
||||
setFormField((prev) => ({ ...prev, status: value }))
|
||||
}
|
||||
>
|
||||
<SelectTrigger className="w-full">
|
||||
<SelectValue placeholder="Select" defaultValue={formField.status} />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="Y">Active</SelectItem>
|
||||
<SelectItem value="N">InActive</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex justify-end gap-5">
|
||||
<Button type="button" variant="outline" onClick={resetForm}>
|
||||
Reset
|
||||
</Button>
|
||||
<Button variant="default">Save Changes</Button>
|
||||
</div>
|
||||
<p className="mt-4 text-gray-500">Loading Reward Details...</p>
|
||||
</div>
|
||||
</form>
|
||||
) : (
|
||||
<form onSubmit={doUpdateReward}>
|
||||
<div className="card-body grid gap-5">
|
||||
<div className="grid grid-cols-8 gap-2 w-full items-center">
|
||||
<label className="form-label flex items-center gap-1 col-span-2">
|
||||
Name<span className="text-red-500">*</span>
|
||||
</label>
|
||||
|
||||
<Input
|
||||
className="input col-span-6"
|
||||
type="text"
|
||||
value={formField.name}
|
||||
onChange={(e) => setFormField((prev) => ({ ...prev, name: e.target.value }))}
|
||||
/>
|
||||
</div>
|
||||
<div className="grid grid-cols-8 gap-2 w-full items-center">
|
||||
<label className="form-label flex items-center gap-1 col-span-2">
|
||||
Type<span className="text-red-500">*</span>
|
||||
</label>
|
||||
|
||||
<div className="col-span-6">
|
||||
<Select
|
||||
value={formField.type}
|
||||
onValueChange={(value) =>
|
||||
setFormField((prev) => ({ ...prev, type: value }))
|
||||
}
|
||||
>
|
||||
<SelectTrigger className="w-full">
|
||||
<SelectValue placeholder="Select Type" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
{Object.entries(RewardType).map(
|
||||
([label, value]: [string, RewardTypeValue]) => (
|
||||
<SelectItem key={value} value={value}>
|
||||
{label}
|
||||
</SelectItem>
|
||||
)
|
||||
)}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
</div>
|
||||
<div className="grid grid-cols-8 gap-2 w-full items-center">
|
||||
<label className="form-label flex items-center gap-1 col-span-2">
|
||||
Amount<span className="text-red-500">*</span>
|
||||
</label>
|
||||
|
||||
<NumericFormat
|
||||
className="input col-span-6"
|
||||
value={formField.amount}
|
||||
thousandSeparator="."
|
||||
decimalSeparator=","
|
||||
allowNegative={false}
|
||||
onValueChange={(values) => {
|
||||
setFormField((prev) => ({
|
||||
...prev,
|
||||
amount: values.floatValue || 0
|
||||
}));
|
||||
}}
|
||||
placeholder="Enter Amount"
|
||||
/>
|
||||
</div>
|
||||
<div className="grid grid-cols-8 gap-2 w-full items-center">
|
||||
<label className="form-label flex items-center gap-1 col-span-2">
|
||||
Status<span className="text-red-500">*</span>
|
||||
</label>
|
||||
|
||||
<div className="col-span-6">
|
||||
<Select
|
||||
value={formField.status}
|
||||
onValueChange={(value) =>
|
||||
setFormField((prev) => ({ ...prev, status: value }))
|
||||
}
|
||||
>
|
||||
<SelectTrigger className="w-full">
|
||||
<SelectValue placeholder="Select" defaultValue={formField.status} />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="Y">Active</SelectItem>
|
||||
<SelectItem value="N">InActive</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex justify-end gap-5">
|
||||
<Button type="button" variant="outline" onClick={resetForm}>
|
||||
Reset
|
||||
</Button>
|
||||
<Button variant="default">Save Changes</Button>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
)}
|
||||
</div>
|
||||
</DialogBody>
|
||||
</DialogContent>
|
||||
|
||||
@ -1,10 +1,23 @@
|
||||
import { DefaultTooltip, KeenIcon, useDataGrid } from '@/components';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { useManageRewardContext } from '../hooks/useManageRewardContext';
|
||||
import { useEffect, useState } from 'react';
|
||||
|
||||
const ListToolbar = () => {
|
||||
const { table, reload } = useDataGrid();
|
||||
const { handleAddDialog } = useManageRewardContext();
|
||||
const [searchValue, setSearchValue] = useState<string>(
|
||||
(table.getColumn('name')?.getFilterValue() as string) ?? ''
|
||||
);
|
||||
|
||||
useEffect(() => {
|
||||
const timer = setTimeout(() => {
|
||||
table.getColumn('name')?.setFilterValue(searchValue);
|
||||
table.setPageIndex(0);
|
||||
}, 200);
|
||||
|
||||
return () => clearTimeout(timer);
|
||||
}, [searchValue, table]);
|
||||
|
||||
return (
|
||||
<div className="card-header flex-wrap gap-2 border-b-0 px-5">
|
||||
@ -15,9 +28,9 @@ const ListToolbar = () => {
|
||||
<KeenIcon icon="magnifier" />
|
||||
<input
|
||||
type="text"
|
||||
placeholder="Search Reward"
|
||||
value={(table.getColumn('name')?.getFilterValue() as string) ?? ''}
|
||||
onChange={(event) => table.getColumn('name')?.setFilterValue(event.target.value)}
|
||||
placeholder="Search"
|
||||
value={searchValue}
|
||||
onChange={(event) => setSearchValue(event.target.value)}
|
||||
/>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
@ -110,7 +110,8 @@ const ManageRewardContextProvider = ({ children }: { children: React.ReactNode }
|
||||
);
|
||||
},
|
||||
meta: {
|
||||
headerClassName: 'w-[250px]'
|
||||
headerClassName: 'w-[250px] text-center',
|
||||
cellClassName: 'text-center'
|
||||
}
|
||||
},
|
||||
{
|
||||
@ -138,7 +139,7 @@ const ManageRewardContextProvider = ({ children }: { children: React.ReactNode }
|
||||
);
|
||||
},
|
||||
meta: {
|
||||
heaaderClassName: 'w-[100px]',
|
||||
headerClassName: 'w-[100px] text-center',
|
||||
cellClassName: 'text-center'
|
||||
}
|
||||
}
|
||||
|
||||
@ -3,7 +3,6 @@ import { ManageSucosContextProvider } from './hooks/ManageSucosContext';
|
||||
import AddDialog from './blocks/AddDialog';
|
||||
import EditDialog from './blocks/EditDialog';
|
||||
import DeleteDialog from './blocks/DeleteDialog';
|
||||
import SearchDialog from './blocks/SearchDialog';
|
||||
import { Breadcrumbs, Link } from '@mui/material';
|
||||
import { Helmet } from 'react-helmet';
|
||||
|
||||
@ -37,7 +36,6 @@ const SucosMaster = () => {
|
||||
<AddDialog />
|
||||
<EditDialog />
|
||||
<DeleteDialog />
|
||||
<SearchDialog />
|
||||
</Container>
|
||||
</ManageSucosContextProvider>
|
||||
</>
|
||||
|
||||
@ -34,12 +34,12 @@ interface PostoAdmsProps {
|
||||
const API_URL = apiConfig.service_master_data;
|
||||
|
||||
const EditDialog = () => {
|
||||
const parentRef = useRef<any | null>(null);
|
||||
const { showEditDialog, handleEditDialog, selectedSucos, sucos } = useManageSucosContext();
|
||||
const { reload } = useDataGrid();
|
||||
const { PutData, GetData } = useCallApi();
|
||||
const parsedUser = getAuth()?.user;
|
||||
const [open, setOpen] = useState(false);
|
||||
const [isLoading, setIsLoading] = useState(false);
|
||||
const [postoadms, setPostoadms] = useState<PostoAdmsProps[]>([]);
|
||||
|
||||
const [alert, setAlert] = useState({
|
||||
@ -112,7 +112,10 @@ const EditDialog = () => {
|
||||
}, []);
|
||||
|
||||
const doFetchData = useCallback(async (id: string) => {
|
||||
const response = await GetData(`${API_URL}/sucos/getdata/${id}`, { id });
|
||||
setIsLoading(true);
|
||||
const minDelay = new Promise((resolve) => setTimeout(resolve, 300));
|
||||
const fetchData = GetData(`${API_URL}/sucos/getdata/${id}`, { id });
|
||||
const [response] = await Promise.all([fetchData, minDelay]);
|
||||
// console.log('Data Sucos:', response?.data);
|
||||
|
||||
if (response?.status) {
|
||||
@ -127,6 +130,7 @@ const EditDialog = () => {
|
||||
name: ''
|
||||
}));
|
||||
}
|
||||
setIsLoading(false);
|
||||
}, []);
|
||||
|
||||
const handleUpdate = (e: React.FormEvent<HTMLFormElement>) => {
|
||||
@ -183,72 +187,87 @@ const EditDialog = () => {
|
||||
</Alert>
|
||||
)}
|
||||
|
||||
<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">
|
||||
Sucos Name<span className="text-red-500">*</span>
|
||||
</label>
|
||||
<Input
|
||||
className="input"
|
||||
type="text"
|
||||
value={formField.name}
|
||||
onChange={(e) => setFormField({ ...formField, name: e.target.value })}
|
||||
/>
|
||||
{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="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>
|
||||
</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">
|
||||
Postu Administrativo 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">
|
||||
{postoadms.find((posto) => posto.PostoAdms_id === formField.postoId)
|
||||
?.PostoAdms_name || 'Select Postu Administrativo'}
|
||||
</button>
|
||||
</PopoverTrigger>
|
||||
<PopoverContent className="w-[400px] p-0">
|
||||
<Command>
|
||||
<CommandInput placeholder="Search Postu Administrativo..." />
|
||||
<CommandList>
|
||||
<CommandEmpty>No Postu Administrativo Found.</CommandEmpty>
|
||||
<CommandGroup>
|
||||
{postoadms.map((posto) => (
|
||||
<CommandItem
|
||||
key={posto.PostoAdms_id}
|
||||
value={posto.PostoAdms_name}
|
||||
onSelect={() => {
|
||||
setFormField({
|
||||
...formField,
|
||||
postoId: posto.PostoAdms_id
|
||||
});
|
||||
setOpen(false);
|
||||
}}
|
||||
>
|
||||
{posto.PostoAdms_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>
|
||||
<p className="mt-4 text-gray-500">Loading Sucos Details...</p>
|
||||
</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">
|
||||
Sucos 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">
|
||||
Postu Administrativo 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">
|
||||
{postoadms.find((posto) => posto.PostoAdms_id === formField.postoId)
|
||||
?.PostoAdms_name || 'Select Postu Administrativo'}
|
||||
</button>
|
||||
</PopoverTrigger>
|
||||
<PopoverContent className="w-[400px] p-0">
|
||||
<Command>
|
||||
<CommandInput placeholder="Search Postu Administrativo..." />
|
||||
<CommandList>
|
||||
<CommandEmpty>No Postu Administrativo Found.</CommandEmpty>
|
||||
<CommandGroup>
|
||||
{postoadms.map((posto) => (
|
||||
<CommandItem
|
||||
key={posto.PostoAdms_id}
|
||||
value={posto.PostoAdms_name}
|
||||
onSelect={() => {
|
||||
setFormField({
|
||||
...formField,
|
||||
postoId: posto.PostoAdms_id
|
||||
});
|
||||
setOpen(false);
|
||||
}}
|
||||
>
|
||||
{posto.PostoAdms_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>
|
||||
</DialogBody>
|
||||
</DialogContent>
|
||||
|
||||
@ -1,12 +1,14 @@
|
||||
import { DefaultTooltip, KeenIcon, useDataGrid } from '@/components';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { useManageSucosContext } from '../hooks/useManageSucosContext';
|
||||
import React, { useState } from 'react';
|
||||
import React, { useEffect, useState } from 'react';
|
||||
|
||||
const ListToolbar = () => {
|
||||
const { table, reload } = useDataGrid();
|
||||
const { handleAddDialog, handleSearchDialog } = useManageSucosContext();
|
||||
const [searchValue, setSearchValue] = useState('');
|
||||
const [searchValue, setSearchValue] = useState<string>(
|
||||
(table.getColumn('sucos_name')?.getFilterValue() as string) ?? ''
|
||||
);
|
||||
|
||||
const handleKeyDown = (event: React.KeyboardEvent) => {
|
||||
if (event.key === 'Enter') {
|
||||
@ -19,6 +21,15 @@ const ListToolbar = () => {
|
||||
table.setPageIndex(0);
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
const timer = setTimeout(() => {
|
||||
table.getColumn('sucos_name')?.setFilterValue(searchValue);
|
||||
table.setPageIndex(0);
|
||||
}, 200);
|
||||
|
||||
return () => clearTimeout(timer);
|
||||
}, [searchValue, table]);
|
||||
|
||||
return (
|
||||
<div className="card-header flex-wrap gap-2 border-b-0 px-5">
|
||||
<div className="flex flex-wrap gap-2 lg:gap-5 w-full">
|
||||
@ -31,32 +42,13 @@ const ListToolbar = () => {
|
||||
placeholder="Search Sucos"
|
||||
value={searchValue}
|
||||
onChange={(event) => setSearchValue(event.target.value)}
|
||||
onKeyDown={handleKeyDown}
|
||||
/>
|
||||
</label>
|
||||
<DefaultTooltip title={'Search'} placement={'top'}>
|
||||
{/* <DefaultTooltip title={'Search'} placement={'top'}>
|
||||
<Button variant="outline" className="h-7.5" onClick={handleSearch}>
|
||||
<KeenIcon icon="magnifier" />
|
||||
</Button>
|
||||
</DefaultTooltip>
|
||||
{/* <DefaultTooltip title={'Filter'} placement={'top'}>
|
||||
<Button
|
||||
variant="outline"
|
||||
className="h-7.5 disabled:bg-gray-400"
|
||||
// disabled={isLoading}
|
||||
// onClick={handleFilterData}
|
||||
>
|
||||
{loadingButton === 'filter' ? <ContentLoader /> : <KeenIcon icon="filter" />}
|
||||
<KeenIcon icon="filter" />
|
||||
</Button>
|
||||
</DefaultTooltip> */}
|
||||
{/* <Button
|
||||
variant="outline"
|
||||
className="h-7.5 text-[0.8rem]"
|
||||
onClick={() => handleSearchDialog(true)}
|
||||
>
|
||||
Search Aldeias
|
||||
</Button> */}
|
||||
</div>
|
||||
<div className="flex gap-3 items-center">
|
||||
<Button
|
||||
|
||||
@ -1,177 +0,0 @@
|
||||
import { useRef, useState } from 'react';
|
||||
import {
|
||||
Dialog,
|
||||
DialogBody,
|
||||
DialogContent,
|
||||
DialogDescription,
|
||||
DialogHeader,
|
||||
DialogTitle
|
||||
} from '@/components/ui/dialog';
|
||||
import { Alert, KeenIcon } from '@/components';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { apiConfig } from '@/config/api.config';
|
||||
import axios from 'axios';
|
||||
import { useManageSucosContext } from '../hooks/useManageSucosContext';
|
||||
import {
|
||||
Command,
|
||||
CommandEmpty,
|
||||
CommandGroup,
|
||||
CommandInput,
|
||||
CommandItem,
|
||||
CommandList
|
||||
} from '@/components/ui/command';
|
||||
import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover';
|
||||
|
||||
interface AldeiasProps {
|
||||
id: number;
|
||||
name: string;
|
||||
}
|
||||
|
||||
const API_URL = apiConfig.service_master_data;
|
||||
|
||||
const SearchDialog = () => {
|
||||
const parentRef = useRef<any | null>(null);
|
||||
const [open, setOpen] = useState(false);
|
||||
const { showSearchDialog, handleSearchDialog, sucos } = useManageSucosContext();
|
||||
const [alert, setAlert] = useState({
|
||||
show: false,
|
||||
message: ''
|
||||
});
|
||||
const initialState = {
|
||||
id: 0,
|
||||
name: ''
|
||||
};
|
||||
|
||||
const [formField, setFormField] = useState(initialState);
|
||||
const resetForm = () => {
|
||||
setFormField(initialState);
|
||||
};
|
||||
const [aldeia, setAldeia] = useState<AldeiasProps[]>([]);
|
||||
const [isFound, setIsFound] = useState(false);
|
||||
|
||||
const handleSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
|
||||
e.preventDefault();
|
||||
const id = Number(formField.id);
|
||||
|
||||
if (formField.id === 0) {
|
||||
setAlert({ show: true, message: 'Please fill name field.' });
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
const response = await axios.get(`${API_URL}/postoadms/sucos/${id}`);
|
||||
|
||||
if (response.data.status) {
|
||||
setAldeia(response.data.data);
|
||||
console.log(aldeia);
|
||||
setIsFound(true);
|
||||
console.log('Found Sucos: ', response.data.data);
|
||||
} else {
|
||||
setAldeia([]);
|
||||
setIsFound(false);
|
||||
setAlert({ show: true, message: 'No sucos found.' });
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Error fetching sucos', error);
|
||||
setAlert({ show: true, message: 'Failed to fetch sucos. Please try again.' });
|
||||
}
|
||||
setAlert({ show: false, message: '' });
|
||||
};
|
||||
|
||||
const handleReset = () => {
|
||||
setFormField(initialState);
|
||||
setIsFound(false);
|
||||
setAldeia([]);
|
||||
};
|
||||
|
||||
return (
|
||||
<Dialog open={showSearchDialog} onOpenChange={handleSearchDialog}>
|
||||
<DialogContent className="container-fixed max-w-[700px] flex flex-col p-5 overflow-hidden [&>button]:hidden">
|
||||
<DialogHeader className="p-2 border-0">
|
||||
<DialogTitle></DialogTitle>
|
||||
<DialogDescription></DialogDescription>
|
||||
<div className="flex items-center justify-between flex-wrap grow">
|
||||
<div className="flex flex-col justify-center">
|
||||
<h1 className="text-xl font-semibold leading-none text-gray-900">Search Aldeias</h1>
|
||||
</div>
|
||||
<div
|
||||
className="cursor-pointer hover:opacity-100 opacity-50"
|
||||
onClick={() => {
|
||||
handleSearchDialog(false);
|
||||
handleReset();
|
||||
}}
|
||||
>
|
||||
<KeenIcon icon="cross" className="text-1.5xl" />
|
||||
</div>
|
||||
</div>
|
||||
</DialogHeader>
|
||||
<DialogBody className="scrollable-y px-0 pb-0" ref={parentRef}>
|
||||
<form onSubmit={handleSubmit} className="flex flex-col px-5 gap-5">
|
||||
{alert.show && <Alert variant="danger">{alert.message}</Alert>}
|
||||
|
||||
<div className="grid grid-cols-8 gap-1 w-full items-center">
|
||||
<label className="form-label flex items-center col-span-3">
|
||||
Sucos 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">
|
||||
{formField.name || 'Select Sucos'}
|
||||
</button>
|
||||
</PopoverTrigger>
|
||||
<PopoverContent className="w-[400px] p-0">
|
||||
<Command>
|
||||
<CommandInput placeholder="Search Sucos..." />
|
||||
<CommandList>
|
||||
<CommandEmpty>No PostoAdms found.</CommandEmpty>
|
||||
<CommandGroup>
|
||||
{sucos.map((suco) => (
|
||||
<CommandItem
|
||||
key={suco.sucos_id}
|
||||
value={suco.sucos_name}
|
||||
onSelect={() => {
|
||||
setFormField({
|
||||
id: suco.sucos_id,
|
||||
name: suco.sucos_name
|
||||
});
|
||||
setOpen(false);
|
||||
}}
|
||||
>
|
||||
{suco.sucos_name}
|
||||
</CommandItem>
|
||||
))}
|
||||
</CommandGroup>
|
||||
</CommandList>
|
||||
</Command>
|
||||
</PopoverContent>
|
||||
</Popover>
|
||||
</div>
|
||||
|
||||
{isFound && sucos.length > 0 && (
|
||||
<div className="mt-4 border-t pt-4">
|
||||
<h2 className="text-md font-semibold">Aldeias: </h2>
|
||||
<div className="flex flex-col">
|
||||
<span className="text-sm form-hint">
|
||||
{aldeia.map((aldeias) => aldeias.name).join(', ')}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="flex justify-end gap-4">
|
||||
<Button type="reset" variant="outline" onClick={handleReset}>
|
||||
Reset
|
||||
</Button>
|
||||
<Button type="submit" variant="default">
|
||||
Search
|
||||
</Button>
|
||||
</div>
|
||||
</form>
|
||||
</DialogBody>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
);
|
||||
};
|
||||
|
||||
export default SearchDialog;
|
||||
@ -9,9 +9,12 @@ import { useNavigate } from 'react-router';
|
||||
import axios from 'axios';
|
||||
|
||||
interface SucosProps {
|
||||
sucos_id: number;
|
||||
sucos_name: string;
|
||||
posto_name: string;
|
||||
id: string;
|
||||
name: string;
|
||||
posto: {
|
||||
id: string;
|
||||
name: string;
|
||||
};
|
||||
}
|
||||
|
||||
interface ContextProps {
|
||||
@ -106,7 +109,9 @@ const ManageSucosContextProvider = ({ children }: { children: React.ReactNode })
|
||||
const value = row.getValue<string>(columnId);
|
||||
return String(value).includes(String(filterValue));
|
||||
},
|
||||
header: ({ column }) => <DataGridColumnHeader title="Postu Administrativo Name" column={column} />,
|
||||
header: ({ column }) => (
|
||||
<DataGridColumnHeader title="Postu Administrativo Name" column={column} />
|
||||
),
|
||||
enableSorting: true,
|
||||
enableHiding: false,
|
||||
meta: {
|
||||
@ -124,13 +129,13 @@ const ManageSucosContextProvider = ({ children }: { children: React.ReactNode })
|
||||
<>
|
||||
<button
|
||||
className="btn btn-sm btn-icon btn-clear btn-light"
|
||||
onClick={() => handleEditDialog(true, row.sucos_id)}
|
||||
onClick={() => handleEditDialog(true, row.id)}
|
||||
>
|
||||
<KeenIcon icon="notepad-edit" />
|
||||
</button>
|
||||
<button
|
||||
className="btn btn-sm btn-icon btn-clear btn-light"
|
||||
onClick={() => handleDeleteDialog(true, row.sucos_id)}
|
||||
onClick={() => handleDeleteDialog(true, row.id)}
|
||||
>
|
||||
<KeenIcon icon="trash" />
|
||||
</button>
|
||||
@ -138,7 +143,7 @@ const ManageSucosContextProvider = ({ children }: { children: React.ReactNode })
|
||||
);
|
||||
},
|
||||
meta: {
|
||||
headerClassName: 'w-[100px]',
|
||||
headerClassName: 'w-[100px] text-center',
|
||||
cellClassName: 'text-center'
|
||||
}
|
||||
}
|
||||
@ -158,7 +163,6 @@ const ManageSucosContextProvider = ({ children }: { children: React.ReactNode })
|
||||
order_direction: sorting[0].desc == false ? 'ASC' : 'DESC',
|
||||
filter: JSON.stringify(filter)
|
||||
});
|
||||
// console.log('Sucos List Response:', response?.data);
|
||||
setSucos(response?.data.list || []);
|
||||
return { data: response?.data.list, totalCount: response?.data.total_count };
|
||||
} catch (error) {
|
||||
|
||||
@ -45,6 +45,7 @@ const EditDialog = () => {
|
||||
const { showEditDialog, handleEditDialog, selectedWallet } = useManageWalletContext();
|
||||
const { reload } = useDataGrid();
|
||||
const { GetData, PutData } = useCallApi();
|
||||
const [isLoading, setIsLoading] = useState(false);
|
||||
const [alert, setAlert] = useState({
|
||||
show: false,
|
||||
message: ''
|
||||
@ -115,11 +116,13 @@ const EditDialog = () => {
|
||||
};
|
||||
|
||||
const doFetchData = useCallback(async (id: string) => {
|
||||
const response = await GetData(`${API_URL_MASTER_DATA}/wallet/detail/${id}`, {
|
||||
setIsLoading(true);
|
||||
const minDelay = new Promise((resolve) => setTimeout(resolve, 300));
|
||||
const fetchData = GetData(`${API_URL_MASTER_DATA}/wallet/detail/${id}`, {
|
||||
id
|
||||
});
|
||||
const [response] = await Promise.all([fetchData, minDelay]);
|
||||
|
||||
console.log(response);
|
||||
if (response?.status) {
|
||||
setFormField((prev) => ({
|
||||
...prev,
|
||||
@ -132,6 +135,7 @@ const EditDialog = () => {
|
||||
: []
|
||||
}));
|
||||
}
|
||||
setIsLoading(false);
|
||||
}, []);
|
||||
|
||||
const getCurrencyLists = async (sorting: any) => {
|
||||
@ -213,91 +217,110 @@ const EditDialog = () => {
|
||||
</Alert>
|
||||
)}
|
||||
|
||||
<form onSubmit={handleSubmit}>
|
||||
<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">
|
||||
Wallet Name
|
||||
</label>
|
||||
<Input
|
||||
type="text"
|
||||
value={formField.name}
|
||||
onChange={(e) => setFormField({ ...formField, name: e.target.value })}
|
||||
placeholder="Wallet Name"
|
||||
/>
|
||||
</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
|
||||
</label>
|
||||
<Input
|
||||
type="text"
|
||||
value={formField.description}
|
||||
onChange={(e) => setFormField({ ...formField, description: e.target.value })}
|
||||
placeholder="Description"
|
||||
/>
|
||||
</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</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">Currency</label>
|
||||
<div className="relative w-full">
|
||||
<Input
|
||||
type="text"
|
||||
placeholder="Empty"
|
||||
value={selectedCurrency?.name}
|
||||
readOnly
|
||||
className="bg-gray-100 border border-dashed border-gray-400 text-gray-600 cursor-not-allowed"
|
||||
/>
|
||||
{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="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>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="w-full">
|
||||
<div className="flex items-baseline flex-wrap lg:flex-nowrap gap-2.5">
|
||||
<label className="form-label flex items-center gap-1 max-w-56">Groups</label>
|
||||
<div className="relative w-full">
|
||||
<Input
|
||||
type="text"
|
||||
placeholder="Empty"
|
||||
value={selectedGroupNames}
|
||||
readOnly
|
||||
className="bg-gray-100 border border-dashed border-gray-400 text-gray-600 cursor-not-allowed"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex justify-end gap-5">
|
||||
<Button variant="default" type="submit">
|
||||
Update
|
||||
</Button>
|
||||
</div>
|
||||
<p className="mt-4 text-gray-500">Loading Wallet Details...</p>
|
||||
</div>
|
||||
</form>
|
||||
) : (
|
||||
<form onSubmit={handleSubmit}>
|
||||
<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">
|
||||
Wallet Name
|
||||
</label>
|
||||
<Input
|
||||
type="text"
|
||||
value={formField.name}
|
||||
onChange={(e) => setFormField({ ...formField, name: e.target.value })}
|
||||
placeholder="Wallet Name"
|
||||
/>
|
||||
</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
|
||||
</label>
|
||||
<Input
|
||||
type="text"
|
||||
value={formField.description}
|
||||
onChange={(e) =>
|
||||
setFormField({ ...formField, description: e.target.value })
|
||||
}
|
||||
placeholder="Description"
|
||||
/>
|
||||
</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</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">
|
||||
Currency
|
||||
</label>
|
||||
<div className="relative w-full">
|
||||
<Input
|
||||
type="text"
|
||||
placeholder="Empty"
|
||||
value={selectedCurrency?.name}
|
||||
readOnly
|
||||
className="bg-gray-100 border border-dashed border-gray-400 text-gray-600 cursor-not-allowed"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="w-full">
|
||||
<div className="flex items-baseline flex-wrap lg:flex-nowrap gap-2.5">
|
||||
<label className="form-label flex items-center gap-1 max-w-56">Groups</label>
|
||||
<div className="relative w-full">
|
||||
<Input
|
||||
type="text"
|
||||
placeholder="Empty"
|
||||
value={selectedGroupNames}
|
||||
readOnly
|
||||
className="bg-gray-100 border border-dashed border-gray-400 text-gray-600 cursor-not-allowed"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex justify-end gap-5">
|
||||
<Button variant="default" type="submit">
|
||||
Update
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
)}
|
||||
</div>
|
||||
</DialogBody>
|
||||
</DialogContent>
|
||||
|
||||
@ -1,12 +1,14 @@
|
||||
import { DefaultTooltip, KeenIcon, useDataGrid } from '@/components';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { useManageWalletContext } from '../hooks/useManageWalletContext';
|
||||
import React, { useState } from 'react';
|
||||
import React, { useEffect, useState } from 'react';
|
||||
|
||||
const ListToolbar = () => {
|
||||
const { reload, table } = useDataGrid();
|
||||
const { handleAddDialog } = useManageWalletContext();
|
||||
const [searchValue, setSearchValue] = useState('');
|
||||
const [searchValue, setSearchValue] = useState<string>(
|
||||
(table.getColumn('wallets.name')?.getFilterValue() as string) ?? ''
|
||||
);
|
||||
|
||||
const handleKeyDown = (event: React.KeyboardEvent) => {
|
||||
if (event.key === 'Enter') {
|
||||
@ -19,6 +21,15 @@ const ListToolbar = () => {
|
||||
table.setPageIndex(0);
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
const timer = setTimeout(() => {
|
||||
table.getColumn('wallets.name')?.setFilterValue(searchValue);
|
||||
table.setPageIndex(0);
|
||||
}, 200);
|
||||
|
||||
return () => clearTimeout(timer);
|
||||
}, [searchValue, table]);
|
||||
|
||||
return (
|
||||
<div className="card-header flex-wrap gap-2 border-b-0 px-5">
|
||||
<div className="flex flex-wrap gap-2 lg:gap-5 w-full">
|
||||
@ -31,24 +42,12 @@ const ListToolbar = () => {
|
||||
placeholder="Search Wallet"
|
||||
value={searchValue}
|
||||
onChange={(event) => setSearchValue(event.target.value)}
|
||||
onKeyDown={handleKeyDown}
|
||||
/>
|
||||
</label>
|
||||
<DefaultTooltip title={'Search'} placement={'top'}>
|
||||
{/* <DefaultTooltip title={'Search'} placement={'top'}>
|
||||
<Button variant="outline" className="h-7.5" onClick={handleSearch}>
|
||||
<KeenIcon icon="magnifier" />
|
||||
</Button>
|
||||
</DefaultTooltip>
|
||||
{/* <DefaultTooltip title={'Filter'} placement={'top'}>
|
||||
<Button
|
||||
variant="outline"
|
||||
className="h-7.5 disabled:bg-gray-400"
|
||||
// disabled={isLoading}
|
||||
// onClick={handleFilterData}
|
||||
>
|
||||
{loadingButton === 'filter' ? <ContentLoader /> : <KeenIcon icon="filter" />}
|
||||
<KeenIcon icon="filter" />
|
||||
</Button>
|
||||
</DefaultTooltip> */}
|
||||
</div>
|
||||
<div className="flex gap-3 items-center">
|
||||
|
||||
@ -1,12 +1,14 @@
|
||||
import { DefaultTooltip, KeenIcon, useDataGrid } from '@/components';
|
||||
import { useManageMenusContext } from '../hooks/useManageMenusContext';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import React, { useState } from 'react';
|
||||
import React, { useEffect, useState } from 'react';
|
||||
|
||||
const ListToolbar = () => {
|
||||
const { table, reload } = useDataGrid();
|
||||
const { handleAddDialog } = useManageMenusContext();
|
||||
const [searchValue, setSearchValue] = useState('');
|
||||
const [searchValue, setSearchValue] = useState<string>(
|
||||
(table.getColumn('name')?.getFilterValue() as string) ?? ''
|
||||
);
|
||||
|
||||
const handleKeyDown = (event: React.KeyboardEvent) => {
|
||||
if (event.key === 'Enter') {
|
||||
@ -18,6 +20,15 @@ const ListToolbar = () => {
|
||||
table.getColumn('name')?.setFilterValue(searchValue);
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
const timer = setTimeout(() => {
|
||||
table.getColumn('name')?.setFilterValue(searchValue);
|
||||
table.setPageIndex(0);
|
||||
}, 200);
|
||||
|
||||
return () => clearTimeout(timer);
|
||||
}, [searchValue, table]);
|
||||
|
||||
return (
|
||||
<div className="card-header flex-wrap gap-2 border-b-0 px-5">
|
||||
<div className="flex flex-wrap gap-2 lg:gap-5 w-full">
|
||||
@ -30,25 +41,12 @@ const ListToolbar = () => {
|
||||
placeholder="Search Menu"
|
||||
value={searchValue}
|
||||
onChange={(event) => setSearchValue(event.target.value)}
|
||||
onKeyDown={handleKeyDown}
|
||||
/>
|
||||
</label>
|
||||
<DefaultTooltip title={'Search'} placement={'top'}>
|
||||
{/* <DefaultTooltip title={'Search'} placement={'top'}>
|
||||
<Button variant="outline" className="h-7.5" onClick={handleSearch}>
|
||||
<KeenIcon icon="magnifier" />
|
||||
</Button>
|
||||
</DefaultTooltip>
|
||||
{/* <DefaultTooltip title={'Filter'} placement={'top'}>
|
||||
<Button
|
||||
variant="outline"
|
||||
className="h-7.5 disabled:bg-gray-400"
|
||||
// disabled={isLoading}
|
||||
// onClick={handleFilterData}
|
||||
>
|
||||
{/* {loadingButton === 'filter' ? <ContentLoader /> : <KeenIcon icon="filter" />} */}
|
||||
{/* <KeenIcon icon="filter" />
|
||||
>>>>>>> raja
|
||||
</Button>
|
||||
</DefaultTooltip> */}
|
||||
</div>
|
||||
<div className="flex gap-3 items-center">
|
||||
|
||||
@ -17,7 +17,6 @@ import {
|
||||
SelectTrigger,
|
||||
SelectValue,
|
||||
} from '@/components/ui/select';
|
||||
import { Alert, useDataGrid } from '@/components';
|
||||
import { doSaveLogActivity } from '@/actions/GlobalActions';
|
||||
import { toast } from 'sonner';
|
||||
import { Input } from '@/components/ui/input';
|
||||
@ -59,15 +58,24 @@ const ApprovalDialog = () => {
|
||||
toast.error('Please select a status.');
|
||||
return;
|
||||
}
|
||||
|
||||
const response = await PostData(`${API_URL}/transaction/set-approval`, {
|
||||
id_transaction: transactionDetails.id,
|
||||
status: formField.status,
|
||||
notes: formField.notes,
|
||||
});
|
||||
|
||||
if (response?.status === false) {
|
||||
setAlert({
|
||||
show: true,
|
||||
message: response?.message?.error?.message || 'Approval failed',
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
if (response?.status) {
|
||||
setAlert({ show: false, message: '' });
|
||||
toast.success('Success Update Position');
|
||||
toast.success('Success Update Approval');
|
||||
const createActivity = {
|
||||
module: 'Approval Transaction',
|
||||
description: `Change status approve for transaction => ${transactionDetails.code}`,
|
||||
@ -84,13 +92,13 @@ const ApprovalDialog = () => {
|
||||
|
||||
useEffect(() => {
|
||||
if (showApprovalDialog) {
|
||||
// Reset form fields when dialog opens
|
||||
setFormField({
|
||||
transaction_code: '',
|
||||
status: '',
|
||||
notes: '',
|
||||
});
|
||||
setTransactionDetails(null); // Optional reset
|
||||
setTransactionDetails(null);
|
||||
setAlert({ show: false, message: '' });
|
||||
}
|
||||
}, [showApprovalDialog]);
|
||||
|
||||
@ -116,7 +124,6 @@ const ApprovalDialog = () => {
|
||||
}
|
||||
}, [showApprovalDialog, selectedTransactionIdForApproval, GetData]);
|
||||
|
||||
// Set formField.transaction_code once details are fetched
|
||||
useEffect(() => {
|
||||
if (transactionDetails) {
|
||||
setFormField((prev) => ({
|
||||
@ -138,7 +145,6 @@ const ApprovalDialog = () => {
|
||||
<div className="w-full">
|
||||
<div className="flex items-center flex-wrap gap-2.5">
|
||||
<label className="form-label max-w-56">Status</label>
|
||||
|
||||
<div className="grow">
|
||||
<Select
|
||||
value={formField.status}
|
||||
@ -177,6 +183,14 @@ const ApprovalDialog = () => {
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{alert.show && (
|
||||
<div className="mt-4">
|
||||
<span className="inline-block bg-red-100 text-red-800 text-sm font-medium px-4 py-2 rounded-md">
|
||||
{alert.message}
|
||||
</span>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<hr />
|
||||
@ -193,4 +207,4 @@ const ApprovalDialog = () => {
|
||||
);
|
||||
};
|
||||
|
||||
export default ApprovalDialog;
|
||||
export default ApprovalDialog;
|
||||
|
||||
@ -205,7 +205,7 @@ const TransactionProvider = ({ children }: { children: React.ReactNode }) => {
|
||||
enableHiding: false,
|
||||
cell: (data) => {
|
||||
const row = data.row.original;
|
||||
const isVisible = row.status === 'F' ? true : false || row.status === 'P' ? true : false;
|
||||
const isVisible = (row.status === 'F' ? true : false || row.status === 'P' ? true : false) && row.status_approve !== 'W' ? true : false;
|
||||
return (
|
||||
<div key={`actions-${row.id}`}>
|
||||
<button
|
||||
|
||||
Reference in New Issue
Block a user