filter region

src/app/(dashboard)/layout.tsx

@@ -1,6 +1,6 @@
 "use client"
 import { DocumentCurrencyDollarIcon, HomeIcon, UsersIcon } from "@heroicons/react/24/outline";
-import { InputLabel, MenuItem, Select, TextField } from "@mui/material";
+import { Autocomplete, InputLabel, MenuItem, Select, TextField } from "@mui/material";
 import { DatePicker } from "@mui/x-date-pickers";
 import { BarChart2, CircleDollarSign, LogOut, RefreshCcw } from "lucide-react";
 import Link from "next/link";
@@ -13,6 +13,7 @@ import { Filter } from "@/services/types";
 import { useAppDispatch, useAppSelector } from "@/lib/hooks";
 import { setFilter } from "@/lib/slice/filter";
 import { format } from "date-fns";
+import { useGetFilterOptionsQuery } from "@/services/api";
 
 
 export default function DashboardLayout({children}:{children: React.ReactNode}) {
@@ -20,6 +21,7 @@ export default function DashboardLayout({children}:{children: React.ReactNode})
     const pathname = usePathname();
     const dispatch = useAppDispatch();
     const filter = useAppSelector((state) => state.filter.filter);
+    const {data: filterOptions } = useGetFilterOptionsQuery(filter);
     
     return (
         <div className="flex min-h-screen">
@@ -81,7 +83,7 @@ export default function DashboardLayout({children}:{children: React.ReactNode})
                         <div className="w-0.5 bg-amber-800 h-4"/>
                         <span>CN</span>
                     </div>
-                    <div className="flex gap-4">
+                    <div className="flex gap-4 ml-12">
                         <DatePicker label="Start Date" className="w-40" 
                             slotProps={{
                                 textField: {
@@ -101,13 +103,14 @@ export default function DashboardLayout({children}:{children: React.ReactNode})
                             onChange={(date) => dispatch(setFilter({...filter, end_date: format(date ?? new Date(), "yyyy-MM-dd")}))}
                         />
                     </div>
-                    <div className="flex gap-4 w-80">
-                        <TextField label="Company" size="small" select className="w-full"> 
-                            <MenuItem value="0">Semua Perusahaan</MenuItem>
-                            <MenuItem value="1">PT. A</MenuItem>
-                            <MenuItem value="2">PT. B</MenuItem>
-                            <MenuItem value="3">PT. C</MenuItem>                            
-                        </TextField>
+                    <div className="flex gap-4 w-full mx-24">
+                        <Autocomplete
+                        className="w-full"
+                            options={filterOptions?.regions ?? []}
+                            getOptionLabel={(option) => option.name}
+                            renderInput={(params) => <TextField {...params} label="Region" size="small"/>}
+                            onChange={(e, value) => dispatch(setFilter({...filter, organization_code: value?.codes ?? ""}))}
+                        />
                         <TextField label="Lokasi" size="small" select className="w-full"> 
                             <MenuItem value="0">Semua Lokasi</MenuItem>
                             <MenuItem value="1">Lokasi 1</MenuItem>

src/services/api.ts

@@ -1,10 +1,18 @@
 import { createApi, fetchBaseQuery } from '@reduxjs/toolkit/query/react'
-import { AttendanceRange, AttendanceSummary, EmployeeSummary, MonthlyAttendance, MonthlyEmployee, ResignationCategory, ResignationReason, ResignationType as ResignationType, ResignSummary } from './types'
+import { AttendanceRange, AttendanceSummary, EmployeeSummary, FilterOptions, MonthlyAttendance, MonthlyEmployee, ResignationCategory, ResignationReason, ResignationType as ResignationType, ResignSummary } from './types'
 import { Response , Filter} from './types'
 
 export const api = createApi({
-    baseQuery: fetchBaseQuery({ baseUrl: 'https://erp.julongindonesia.com:8443/api' }),
+    baseQuery: fetchBaseQuery({ baseUrl: 'http://localhost:8080' }),
     endpoints: (builder) => ({
+        getFilterOptions: builder.query<FilterOptions, Filter>({
+            query: (params) => ({ url: '/dashboard/filter-options', params }),
+            transformResponse: (response: Response) => {
+                if (response.status === "success") {
+                    return response.data!;
+                }
+            },
+        }),
         getEmployeeSummary: builder.query<EmployeeSummary[], Filter>({
             query: (params) => ({ url: '/dashboard/employee', params }),
             transformResponse: (response: Response) => {
@@ -80,6 +88,6 @@ export const api = createApi({
     }),
 })
 
-export const { useGetEmployeeSummaryQuery, useGetMonthlyEmployeeQuery, useGetMonthlyAttendanceQuery,
+export const { useGetFilterOptionsQuery, useGetEmployeeSummaryQuery, useGetMonthlyEmployeeQuery, useGetMonthlyAttendanceQuery,
     useGetOrganizationAttendanceQuery, useGetAttendanceRangeQuery, useGetResignSummaryQuery, useGetResignTypeQuery,
      useGetResignCategoryQuery, useGetResignReasonQuery } = api

src/services/types.ts

@@ -19,6 +19,20 @@ export interface Filter{
     job_name?: string;
 }
 
+export interface FilterOptions{
+    regions: {
+        name: string;
+        codes: string;
+    }[];
+    organizations: {
+        code: string;
+        name: string;
+    }[];
+    estates: {
+        name: string;
+    }[];
+}
+
 export type EmployeeSummary = {
     id: string;
     organization_code: string;