mirror of
https://gitlab.com/mbugroup/lti-web-client.git
synced 2026-05-20 13:32:00 +00:00
feat: integrate MasterEmployeeContent component to API
This commit is contained in:
ValdiANS
@@ -1,6 +1,6 @@
|
||||
'use client';
|
||||
|
||||
import { useState, useEffect } from 'react';
|
||||
import { useState } from 'react';
|
||||
import {
|
||||
Plus,
|
||||
Download,
|
||||
@@ -48,124 +48,132 @@ import {
|
||||
DropdownMenuTrigger,
|
||||
} from '@/figma-make/components/base/dropdown-menu';
|
||||
import { toast } from 'sonner';
|
||||
import { supabase, isSupabaseConfigured } from '@/figma-make/lib/supabase';
|
||||
import useSWR from 'swr';
|
||||
import { EmployeeApi } from '@/services/api/daily-checklist/employee';
|
||||
|
||||
interface Employee {
|
||||
id: string;
|
||||
name: string;
|
||||
kandang_id: string;
|
||||
is_active: boolean;
|
||||
kandang?: {
|
||||
id: string;
|
||||
name: string;
|
||||
};
|
||||
}
|
||||
|
||||
interface Kandang {
|
||||
id: string;
|
||||
name: string;
|
||||
}
|
||||
import Table from '@/components/Table';
|
||||
import { Employee } from '@/types/api/daily-checklist/employee';
|
||||
import { isResponseError, isResponseSuccess } from '@/lib/api-helper';
|
||||
import { cn } from '@/lib/helper';
|
||||
import { useTableFilter } from '@/services/hooks/useTableFilter';
|
||||
import { ColumnDef } from '@tanstack/react-table';
|
||||
import { useSelect } from '@/components/input/SelectInput';
|
||||
import { KandangApi } from '@/services/api/master-data';
|
||||
import DebouncedTextInput from '@/components/input/DebouncedTextInput';
|
||||
|
||||
export function MasterEmployeeContent() {
|
||||
const { data: employeesTest, isLoading: isLoadingEmployees } = useSWR(
|
||||
EmployeeApi.basePath,
|
||||
const {
|
||||
state: tableFilterState,
|
||||
updateFilter,
|
||||
setPage,
|
||||
setPageSize,
|
||||
toQueryString: getTableFilterQueryString,
|
||||
} = useTableFilter({
|
||||
initial: {
|
||||
search: '',
|
||||
kandang_id: '',
|
||||
status: '',
|
||||
},
|
||||
paramMap: {
|
||||
page: 'page',
|
||||
pageSize: 'limit',
|
||||
search: 'search',
|
||||
kandang_id: 'kandang_id',
|
||||
status: 'is_active',
|
||||
},
|
||||
});
|
||||
|
||||
const {
|
||||
data: employees,
|
||||
isLoading: isLoadingEmployees,
|
||||
mutate: refreshEmployees,
|
||||
} = useSWR(
|
||||
`${EmployeeApi.basePath}${getTableFilterQueryString()}`,
|
||||
EmployeeApi.getAllFetcher,
|
||||
{
|
||||
keepPreviousData: true,
|
||||
}
|
||||
);
|
||||
const { options: kandangOptions, isLoadingOptions: isLoadingKandangs } =
|
||||
useSelect(KandangApi.basePath, 'id', 'name', 'search', {
|
||||
page: '1',
|
||||
limit: '100',
|
||||
});
|
||||
|
||||
const [employees, setEmployees] = useState<Employee[]>([]);
|
||||
const [kandangList, setKandangList] = useState<Kandang[]>([]);
|
||||
const [showModal, setShowModal] = useState(false);
|
||||
const [showDeleteConfirm, setShowDeleteConfirm] = useState(false);
|
||||
const [employeeToDelete, setEmployeeToDelete] = useState<string | null>(null);
|
||||
const [employeeToDelete, setEmployeeToDelete] = useState<number | null>(null);
|
||||
const [loading, setLoading] = useState(false);
|
||||
const [initialLoading, setInitialLoading] = useState(true);
|
||||
const [searchQuery, setSearchQuery] = useState('');
|
||||
const [kandangFilter, setKandangFilter] = useState<string>('all');
|
||||
const [statusFilter, setStatusFilter] = useState<string>('all');
|
||||
const [modalMode, setModalMode] = useState<'create' | 'edit'>('create');
|
||||
const [employeeForm, setEmployeeForm] = useState({
|
||||
id: '',
|
||||
id: 0,
|
||||
name: '',
|
||||
kandang_ids: [] as string[],
|
||||
kandang_ids: [] as number[],
|
||||
status: 'Active' as 'Active' | 'Non Active',
|
||||
});
|
||||
|
||||
const fetchEmployees = async () => {
|
||||
if (!isSupabaseConfigured()) {
|
||||
console.warn(
|
||||
'Supabase not configured. Please add environment variables.'
|
||||
);
|
||||
setInitialLoading(false);
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
const { data, error } = await supabase
|
||||
.from('employees')
|
||||
.select(
|
||||
`
|
||||
id,
|
||||
name,
|
||||
kandang_id,
|
||||
is_active,
|
||||
kandang:kandang_id (
|
||||
id,
|
||||
name
|
||||
)
|
||||
`
|
||||
)
|
||||
.order('name', { ascending: true });
|
||||
|
||||
if (error) {
|
||||
console.error('Error fetching employees:', error);
|
||||
toast.error('Gagal memuat data ABK');
|
||||
return;
|
||||
}
|
||||
|
||||
setEmployees((data as unknown as Employee[]) || []);
|
||||
} catch (error) {
|
||||
console.error('Error fetching employees:', error);
|
||||
toast.error('Gagal memuat data ABK');
|
||||
} finally {
|
||||
setInitialLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
const fetchKandang = async () => {
|
||||
if (!isSupabaseConfigured()) {
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
const { data, error } = await supabase
|
||||
.from('kandang')
|
||||
.select('id, name')
|
||||
.order('name', { ascending: true });
|
||||
|
||||
if (error) {
|
||||
console.error('Error fetching kandang:', error);
|
||||
return;
|
||||
}
|
||||
|
||||
setKandangList(data || []);
|
||||
} catch (error) {
|
||||
console.error('Error fetching kandang:', error);
|
||||
}
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
fetchEmployees();
|
||||
fetchKandang();
|
||||
}, []);
|
||||
const employeeColumns: ColumnDef<Employee>[] = [
|
||||
{
|
||||
id: 'name',
|
||||
header: 'Nama ABK',
|
||||
accessorKey: 'name',
|
||||
enableSorting: false,
|
||||
},
|
||||
{
|
||||
id: 'kandang',
|
||||
header: 'Kandang',
|
||||
accessorKey: 'kandangs',
|
||||
enableSorting: false,
|
||||
cell: ({ row }) =>
|
||||
row.original.kandangs.map((kandang) => kandang.name).join(', '),
|
||||
},
|
||||
{
|
||||
id: 'status',
|
||||
header: 'Status',
|
||||
accessorKey: 'is_active',
|
||||
enableSorting: false,
|
||||
cell: ({ row }) => (
|
||||
<Badge variant={row.original.is_active ? 'success' : 'secondary'}>
|
||||
{row.original.is_active ? 'Active' : 'Non Active'}
|
||||
</Badge>
|
||||
),
|
||||
},
|
||||
{
|
||||
id: 'action',
|
||||
header: 'Aksi',
|
||||
accessorKey: 'action',
|
||||
enableSorting: false,
|
||||
cell: ({ row }) => (
|
||||
<DropdownMenu>
|
||||
<DropdownMenuTrigger asChild>
|
||||
<Button
|
||||
variant='ghost'
|
||||
size='sm'
|
||||
className='h-8 w-8 p-0 hover:bg-gray-100'
|
||||
>
|
||||
<MoreVertical className='h-4 w-4 text-gray-600' />
|
||||
</Button>
|
||||
</DropdownMenuTrigger>
|
||||
<DropdownMenuContent align='end'>
|
||||
<DropdownMenuItem onClick={() => handleEdit(row.original)}>
|
||||
<Pencil className='mr-2 h-4 w-4' />
|
||||
Edit
|
||||
</DropdownMenuItem>
|
||||
<DropdownMenuItem
|
||||
onClick={() => handleDeleteClick(row.original.id)}
|
||||
className='text-red-600'
|
||||
>
|
||||
<Trash2 className='mr-2 h-4 w-4' />
|
||||
Hapus
|
||||
</DropdownMenuItem>
|
||||
</DropdownMenuContent>
|
||||
</DropdownMenu>
|
||||
),
|
||||
},
|
||||
];
|
||||
|
||||
const handleAdd = () => {
|
||||
setModalMode('create');
|
||||
setEmployeeForm({ id: '', name: '', kandang_ids: [], status: 'Active' });
|
||||
setEmployeeForm({ id: 0, name: '', kandang_ids: [], status: 'Active' });
|
||||
setShowModal(true);
|
||||
};
|
||||
|
||||
@@ -174,7 +182,7 @@ export function MasterEmployeeContent() {
|
||||
setEmployeeForm({
|
||||
id: employee.id,
|
||||
name: employee.name,
|
||||
kandang_ids: employee.kandang_id ? [employee.kandang_id] : [],
|
||||
kandang_ids: employee.kandangs ? employee.kandangs.map((k) => k.id) : [],
|
||||
status: employee.is_active ? 'Active' : 'Non Active',
|
||||
});
|
||||
setShowModal(true);
|
||||
@@ -186,58 +194,52 @@ export function MasterEmployeeContent() {
|
||||
return;
|
||||
}
|
||||
|
||||
if (!isSupabaseConfigured()) {
|
||||
toast.error(
|
||||
'Supabase belum dikonfigurasi. Tambahkan environment variables.'
|
||||
);
|
||||
return;
|
||||
}
|
||||
|
||||
setLoading(true);
|
||||
|
||||
try {
|
||||
// Create payload - taking the first selected kandang for now as schema supports single FK
|
||||
// TODO: Support multiple kandangs in backend
|
||||
const kandangIdToSave = employeeForm.kandang_ids[0];
|
||||
|
||||
if (modalMode === 'create') {
|
||||
const { error } = await supabase.from('employees').insert([
|
||||
{
|
||||
name: employeeForm.name.trim(),
|
||||
kandang_id: kandangIdToSave,
|
||||
is_active: employeeForm.status === 'Active',
|
||||
},
|
||||
]);
|
||||
const createEmployeeResponse = await EmployeeApi.create({
|
||||
is_active: employeeForm.status === 'Active',
|
||||
kandang_ids: employeeForm.kandang_ids,
|
||||
name: employeeForm.name.trim(),
|
||||
});
|
||||
|
||||
if (error) {
|
||||
console.error('Error creating employee:', error);
|
||||
if (isResponseError(createEmployeeResponse)) {
|
||||
console.error(
|
||||
'Error creating employee:',
|
||||
createEmployeeResponse.message
|
||||
);
|
||||
toast.error('Gagal menambahkan ABK');
|
||||
return;
|
||||
}
|
||||
|
||||
refreshEmployees();
|
||||
toast.success('ABK berhasil ditambahkan');
|
||||
} else {
|
||||
const { error } = await supabase
|
||||
.from('employees')
|
||||
.update({
|
||||
name: employeeForm.name.trim(),
|
||||
kandang_id: kandangIdToSave,
|
||||
const updateEmployeeResponse = await EmployeeApi.update(
|
||||
employeeForm.id,
|
||||
{
|
||||
is_active: employeeForm.status === 'Active',
|
||||
})
|
||||
.eq('id', employeeForm.id);
|
||||
kandang_ids: employeeForm.kandang_ids,
|
||||
name: employeeForm.name.trim(),
|
||||
}
|
||||
);
|
||||
|
||||
if (error) {
|
||||
console.error('Error updating employee:', error);
|
||||
toast.error('Gagal mengubah ABK');
|
||||
if (isResponseError(updateEmployeeResponse)) {
|
||||
console.error(
|
||||
'Error updating employee:',
|
||||
updateEmployeeResponse.message
|
||||
);
|
||||
toast.error('Gagal menambahkan ABK');
|
||||
return;
|
||||
}
|
||||
|
||||
refreshEmployees();
|
||||
toast.success('ABK berhasil diubah');
|
||||
}
|
||||
|
||||
setShowModal(false);
|
||||
setEmployeeForm({ id: '', name: '', kandang_ids: [], status: 'Active' });
|
||||
await fetchEmployees();
|
||||
setEmployeeForm({ id: 0, name: '', kandang_ids: [], status: 'Active' });
|
||||
} catch (error) {
|
||||
console.error('Error saving employee:', error);
|
||||
toast.error('Terjadi kesalahan saat menyimpan ABK');
|
||||
@@ -246,7 +248,7 @@ export function MasterEmployeeContent() {
|
||||
}
|
||||
};
|
||||
|
||||
const handleDeleteClick = (employeeId: string) => {
|
||||
const handleDeleteClick = (employeeId: number) => {
|
||||
setEmployeeToDelete(employeeId);
|
||||
setShowDeleteConfirm(true);
|
||||
};
|
||||
@@ -257,21 +259,22 @@ export function MasterEmployeeContent() {
|
||||
setLoading(true);
|
||||
|
||||
try {
|
||||
const { error } = await supabase
|
||||
.from('employees')
|
||||
.delete()
|
||||
.eq('id', employeeToDelete);
|
||||
const deleteEmployeeResponse = await EmployeeApi.delete(employeeToDelete);
|
||||
|
||||
if (error) {
|
||||
console.error('Error deleting employee:', error);
|
||||
if (isResponseError(deleteEmployeeResponse)) {
|
||||
console.error(
|
||||
'Error deleting employee:',
|
||||
deleteEmployeeResponse.message
|
||||
);
|
||||
toast.error('Gagal menghapus ABK');
|
||||
return;
|
||||
}
|
||||
|
||||
refreshEmployees();
|
||||
toast.success('ABK berhasil dihapus');
|
||||
setShowDeleteConfirm(false);
|
||||
setEmployeeToDelete(null);
|
||||
await fetchEmployees();
|
||||
// await fetchEmployees();
|
||||
} catch (error) {
|
||||
console.error('Error deleting employee:', error);
|
||||
toast.error('Terjadi kesalahan saat menghapus ABK');
|
||||
@@ -284,22 +287,7 @@ export function MasterEmployeeContent() {
|
||||
toast.success(`Data berhasil diekspor ke ${format}`);
|
||||
};
|
||||
|
||||
const filteredEmployees = employees.filter((emp) => {
|
||||
const kandangName = emp.kandang?.name || '';
|
||||
const matchesSearch =
|
||||
emp.name.toLowerCase().includes(searchQuery.toLowerCase()) ||
|
||||
kandangName.toLowerCase().includes(searchQuery.toLowerCase());
|
||||
|
||||
const matchesKandang =
|
||||
kandangFilter === 'all' || emp.kandang_id === kandangFilter;
|
||||
|
||||
const matchesStatus =
|
||||
statusFilter === 'all' || emp.is_active === (statusFilter === 'active');
|
||||
|
||||
return matchesSearch && matchesKandang && matchesStatus;
|
||||
});
|
||||
|
||||
if (initialLoading) {
|
||||
if (isLoadingEmployees && !employees) {
|
||||
return (
|
||||
<div className='min-h-screen'>
|
||||
<div className='p-6'>
|
||||
@@ -339,48 +327,75 @@ export function MasterEmployeeContent() {
|
||||
<Card className='border-gray-200/60 shadow-sm rounded-xl bg-white'>
|
||||
<CardContent className='p-0'>
|
||||
{/* Single Toolbar Row */}
|
||||
<div className='flex items-center justify-between gap-4 p-6 border-b border-gray-200/60'>
|
||||
<div className='flex flex-wrap items-center justify-between gap-4 p-6 border-b border-gray-200/60'>
|
||||
{/* LEFT: Search + Filters */}
|
||||
<div className='flex items-center gap-3'>
|
||||
<div className='flex items-center gap-3 flex-wrap'>
|
||||
<div className='relative'>
|
||||
<Search className='absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400 w-4 h-4' />
|
||||
<Input
|
||||
{/* <Input
|
||||
type='text'
|
||||
placeholder='Cari nama ABK atau kandang...'
|
||||
value={searchQuery}
|
||||
onChange={(e) => setSearchQuery(e.target.value)}
|
||||
value={tableFilterState.search}
|
||||
onChange={(e) => updateFilter('search', e.target.value)}
|
||||
className='pl-10 w-[280px] border-gray-200'
|
||||
/> */}
|
||||
<DebouncedTextInput
|
||||
name='search'
|
||||
placeholder='Cari nama ABK atau kandang...'
|
||||
value={tableFilterState.search}
|
||||
onChange={(e) => updateFilter('search', e.target.value)}
|
||||
className={{
|
||||
wrapper: 'w-[280px] border-gray-200',
|
||||
inputWrapper: 'px-3 py-2 h-fit rounded-md',
|
||||
input: 'text-sm',
|
||||
}}
|
||||
startAdornment={
|
||||
<Search className='text-gray-400 w-4 h-4' />
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<Select value={kandangFilter} onValueChange={setKandangFilter}>
|
||||
<Select
|
||||
value={tableFilterState.kandang_id}
|
||||
onValueChange={(value) =>
|
||||
updateFilter('kandang_id', value === 'all' ? '' : value)
|
||||
}
|
||||
>
|
||||
<SelectTrigger className='w-[180px] border-gray-200'>
|
||||
<SelectValue placeholder='Semua Kandang' />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value='all'>Semua Kandang</SelectItem>
|
||||
{kandangList.map((kandang) => (
|
||||
<SelectItem key={kandang.id} value={kandang.id}>
|
||||
{kandang.name}
|
||||
{kandangOptions.map((kandang) => (
|
||||
<SelectItem
|
||||
key={kandang.value}
|
||||
value={String(kandang.value)}
|
||||
>
|
||||
{kandang.label}
|
||||
</SelectItem>
|
||||
))}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
|
||||
<Select value={statusFilter} onValueChange={setStatusFilter}>
|
||||
<Select
|
||||
value={tableFilterState.status}
|
||||
onValueChange={(value) => {
|
||||
updateFilter('status', value === 'all' ? '' : value);
|
||||
}}
|
||||
>
|
||||
<SelectTrigger className='w-[160px] border-gray-200'>
|
||||
<SelectValue placeholder='Semua Status' />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value='all'>Semua Status</SelectItem>
|
||||
<SelectItem value='active'>Active</SelectItem>
|
||||
<SelectItem value='non_active'>Non Active</SelectItem>
|
||||
<SelectItem value='true'>Active</SelectItem>
|
||||
<SelectItem value='false'>Non Active</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
|
||||
{/* RIGHT: Export + Add */}
|
||||
<div className='flex items-center gap-2'>
|
||||
<div className='flex items-center gap-2 flex-wrap'>
|
||||
<DropdownMenu>
|
||||
<DropdownMenuTrigger asChild>
|
||||
<Button
|
||||
@@ -413,93 +428,33 @@ export function MasterEmployeeContent() {
|
||||
</div>
|
||||
|
||||
{/* Table */}
|
||||
<div className='overflow-x-auto'>
|
||||
<table className='w-full'>
|
||||
<thead>
|
||||
<tr className='border-b border-gray-200/60 bg-gray-50/50'>
|
||||
<th className='text-left py-3.5 px-6 text-sm font-semibold text-gray-700'>
|
||||
Nama ABK
|
||||
</th>
|
||||
<th className='text-left py-3.5 px-6 text-sm font-semibold text-gray-700'>
|
||||
Kandang
|
||||
</th>
|
||||
<th className='text-left py-3.5 px-6 text-sm font-semibold text-gray-700'>
|
||||
Status
|
||||
</th>
|
||||
<th className='text-center py-3.5 px-6 text-sm font-semibold text-gray-700 w-[80px]'>
|
||||
Aksi
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody className='divide-y divide-gray-200/60'>
|
||||
{filteredEmployees.length === 0 ? (
|
||||
<tr>
|
||||
<td
|
||||
colSpan={4}
|
||||
className='text-center py-12 text-gray-500'
|
||||
>
|
||||
{searchQuery ||
|
||||
kandangFilter !== 'all' ||
|
||||
statusFilter !== 'all'
|
||||
? 'Tidak ada ABK yang ditemukan'
|
||||
: 'Belum ada data ABK'}
|
||||
</td>
|
||||
</tr>
|
||||
) : (
|
||||
filteredEmployees.map((employee) => (
|
||||
<tr
|
||||
key={employee.id}
|
||||
className='hover:bg-blue-50/30 transition-colors'
|
||||
>
|
||||
<td className='py-3.5 px-6 text-sm text-gray-900'>
|
||||
{employee.name}
|
||||
</td>
|
||||
<td className='py-3.5 px-6 text-sm text-gray-700'>
|
||||
{employee.kandang?.name || '-'}
|
||||
</td>
|
||||
<td className='py-3.5 px-6 text-sm'>
|
||||
<Badge
|
||||
variant={
|
||||
employee.is_active ? 'success' : 'secondary'
|
||||
}
|
||||
>
|
||||
{employee.is_active ? 'Active' : 'Non Active'}
|
||||
</Badge>
|
||||
</td>
|
||||
<td className='py-3.5 px-6 text-center'>
|
||||
<DropdownMenu>
|
||||
<DropdownMenuTrigger asChild>
|
||||
<Button
|
||||
variant='ghost'
|
||||
size='sm'
|
||||
className='h-8 w-8 p-0 hover:bg-gray-100'
|
||||
>
|
||||
<MoreVertical className='h-4 w-4 text-gray-600' />
|
||||
</Button>
|
||||
</DropdownMenuTrigger>
|
||||
<DropdownMenuContent align='end'>
|
||||
<DropdownMenuItem
|
||||
onClick={() => handleEdit(employee)}
|
||||
>
|
||||
<Pencil className='mr-2 h-4 w-4' />
|
||||
Edit
|
||||
</DropdownMenuItem>
|
||||
<DropdownMenuItem
|
||||
onClick={() => handleDeleteClick(employee.id)}
|
||||
className='text-red-600'
|
||||
>
|
||||
<Trash2 className='mr-2 h-4 w-4' />
|
||||
Hapus
|
||||
</DropdownMenuItem>
|
||||
</DropdownMenuContent>
|
||||
</DropdownMenu>
|
||||
</td>
|
||||
</tr>
|
||||
))
|
||||
)}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<Table<Employee>
|
||||
data={isResponseSuccess(employees) ? employees?.data : []}
|
||||
columns={employeeColumns}
|
||||
pageSize={tableFilterState.pageSize}
|
||||
onPageSizeChange={setPageSize}
|
||||
rowOptions={[10, 20, 50, 100]}
|
||||
page={isResponseSuccess(employees) ? employees?.meta?.page : 0}
|
||||
totalItems={
|
||||
isResponseSuccess(employees)
|
||||
? employees?.meta?.total_results
|
||||
: 0
|
||||
}
|
||||
onPageChange={setPage}
|
||||
isLoading={isLoadingEmployees}
|
||||
className={{
|
||||
containerClassName: cn({
|
||||
'w-full mb-20':
|
||||
isResponseSuccess(employees) &&
|
||||
employees?.data?.length === 0,
|
||||
}),
|
||||
tableWrapperClassName: 'rounded-none',
|
||||
headerRowClassName: 'bg-gray-50/50',
|
||||
headerColumnClassName:
|
||||
'text-left py-3.5 px-6 text-sm font-semibold text-gray-700',
|
||||
paginationClassName: 'px-4',
|
||||
}}
|
||||
/>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
@@ -538,19 +493,17 @@ export function MasterEmployeeContent() {
|
||||
Kandang <span className='text-red-500'>*</span>
|
||||
</Label>
|
||||
<MultiSelect
|
||||
options={kandangList.map((k) => ({
|
||||
value: k.id,
|
||||
label: k.name,
|
||||
options={kandangOptions.map((k) => ({
|
||||
value: String(k.value),
|
||||
label: k.label,
|
||||
}))}
|
||||
selected={employeeForm.kandang_ids}
|
||||
selected={employeeForm.kandang_ids.map((id) => String(id))}
|
||||
onChange={(selected) =>
|
||||
setEmployeeForm({ ...employeeForm, kandang_ids: selected })
|
||||
setEmployeeForm({
|
||||
...employeeForm,
|
||||
kandang_ids: selected.map((id) => Number(id)),
|
||||
})
|
||||
}
|
||||
// onSearchChange={(val) =>
|
||||
// console.log({
|
||||
// test: val,
|
||||
// })
|
||||
// }
|
||||
placeholder='Pilih kandang'
|
||||
className='mt-1.5'
|
||||
/>
|
||||
|
||||
Reference in New Issue
Block a user