From 23ee8828f0cdb369acffb0e3a44ef66d495f19bc Mon Sep 17 00:00:00 2001
From: ValdiANS <rvdans002@gmail.com>
Date: Tue, 30 Dec 2025 22:24:22 +0700
Subject: [PATCH] feat(FE-442): create ProductionResultContent component

---
 .../ProductionResultContent.tsx               | 409 ++++++++++++++++++
 1 file changed, 409 insertions(+)
 create mode 100644 src/components/pages/report/production-result/ProductionResultContent.tsx

diff --git a/src/components/pages/report/production-result/ProductionResultContent.tsx b/src/components/pages/report/production-result/ProductionResultContent.tsx
new file mode 100644
index 00000000..6fc8f7ea
--- /dev/null
+++ b/src/components/pages/report/production-result/ProductionResultContent.tsx
@@ -0,0 +1,409 @@
+'use client';
+
+import { useState } from 'react';
+import toast from 'react-hot-toast';
+
+import { Icon } from '@iconify/react';
+import Button from '@/components/Button';
+import Dropdown from '@/components/dropdown/Dropdown';
+import SelectInput, {
+  OptionType,
+  useSelect,
+} from '@/components/input/SelectInput';
+import Menu from '@/components/menu/Menu';
+import MenuItem from '@/components/menu/MenuItem';
+import Card from '@/components/Card';
+import ProductionResultProjectFlockKandangTable from '@/components/pages/report/production-result/ProductionResultProjectFlockKandangTable';
+
+import { BaseKandang } from '@/types/api/master-data/kandang';
+import { AreaApi, LocationApi } from '@/services/api/master-data';
+import {
+  ProjectFlockApi,
+  ProjectFlockKandangApi,
+} from '@/services/api/production';
+import { ProjectFlockKandang } from '@/types/api/production/project-flock-kandang';
+import { isResponseError } from '@/lib/api-helper';
+import Pagination from '@/components/Pagination';
+
+const ProductionResultContent = () => {
+  const [projectFlockKandangs, setProjectFlockKandangs] = useState<
+    ProjectFlockKandang[] | null
+  >(null);
+  const [projectFlockKandangMetadata, setProjectFlockKandangMetadata] =
+    useState<
+      | {
+          page: number;
+          limit: number;
+          total_pages: number;
+          total_results: number;
+        }
+      | undefined
+    >(undefined);
+
+  const [page, setPage] = useState(1);
+  const [pageSize, setPageSize] = useState(10);
+
+  const [isLoadingSearch, setIsLoadingSearch] = useState(false);
+
+  const [isLoadingExportingToExcel, setIsLoadingExportingToExcel] =
+    useState(false);
+
+  const [selectedArea, setSelectedArea] = useState<OptionType | null>(null);
+  const [selectedLocation, setSelectedLocation] = useState<OptionType | null>(
+    null
+  );
+  const [selectedProjectFlock, setSelectedProjectFlock] =
+    useState<OptionType | null>(null);
+  const [selectedProjectFlockKandang, setSelectedProjectFlockKandang] =
+    useState<OptionType | null>(null);
+
+  const {
+    setInputValue: setAreaInputValue,
+    options: areaOptions,
+    isLoadingOptions: isLoadingAreaOptions,
+  } = useSelect<BaseKandang>(AreaApi.basePath, 'id', 'name');
+
+  const areaChangeHandler = (val: OptionType | OptionType[] | null) => {
+    setSelectedArea(val as OptionType);
+
+    setSelectedLocation(null);
+
+    setSelectedProjectFlock(null);
+
+    setSelectedProjectFlockKandang(null);
+  };
+
+  const {
+    setInputValue: setLocationInputValue,
+    options: locationOptions,
+    isLoadingOptions: isLoadingLocationOptions,
+  } = useSelect<BaseKandang>(LocationApi.basePath, 'id', 'name', 'search', {
+    area_id: selectedArea ? ((selectedArea as OptionType).value as string) : '',
+  });
+
+  const locationChangeHandler = (val: OptionType | OptionType[] | null) => {
+    setSelectedLocation(val as OptionType);
+
+    setSelectedProjectFlock(null);
+
+    setSelectedProjectFlockKandang(null);
+  };
+
+  const {
+    setInputValue: setProjectFlockInputValue,
+    options: projectFlockOptions,
+    isLoadingOptions: isLoadingProjectFlockOptions,
+  } = useSelect<BaseKandang>(
+    ProjectFlockApi.basePath,
+    'id',
+    'flock_name',
+    'search',
+    {
+      area_id: selectedArea
+        ? ((selectedArea as OptionType).value as string)
+        : '',
+      location_id: selectedLocation
+        ? ((selectedLocation as OptionType).value as string)
+        : '',
+      category: 'LAYING',
+    }
+  );
+
+  const projectFlockChangeHandler = (val: OptionType | OptionType[] | null) => {
+    setSelectedProjectFlock(val as OptionType);
+
+    setSelectedProjectFlockKandang(null);
+  };
+
+  const {
+    setInputValue: setProjectFlockKandangInputValue,
+    options: projectFlockKandangOptions,
+    isLoadingOptions: isLoadingProjectFlockKandangOptions,
+  } = useSelect<BaseKandang>(
+    ProjectFlockKandangApi.basePath,
+    'id',
+    'kandang.name',
+    'search',
+    {
+      area_id: selectedArea
+        ? ((selectedArea as OptionType).value as string)
+        : '',
+      location_id: selectedLocation
+        ? ((selectedLocation as OptionType).value as string)
+        : '',
+      project_flock_id: selectedProjectFlock
+        ? ((selectedProjectFlock as OptionType).value as string)
+        : '',
+    }
+  );
+
+  const projectFlockKandangChangeHandler = (
+    val: OptionType | OptionType[] | null
+  ) => {
+    setSelectedProjectFlockKandang(val as OptionType);
+  };
+
+  const exportToExcelHandler = async () => {
+    setIsLoadingExportingToExcel(true);
+    // TODO: Implement export functionality in API service first if needed
+    toast.error('Fitur export belum tersedia');
+    setIsLoadingExportingToExcel(false);
+  };
+
+  const searchHandler = async () => {
+    setProjectFlockKandangs(null);
+    setIsLoadingSearch(true);
+
+    try {
+      if (selectedProjectFlockKandang) {
+        const projectFlockKandangResponse =
+          await ProjectFlockKandangApi.getSingle(
+            selectedProjectFlockKandang?.value as number
+          );
+
+        if (
+          !projectFlockKandangResponse ||
+          isResponseError(projectFlockKandangResponse)
+        ) {
+          throw new Error();
+        }
+
+        setProjectFlockKandangs([projectFlockKandangResponse.data]);
+        setProjectFlockKandangMetadata(projectFlockKandangResponse.meta);
+        setIsLoadingSearch(false);
+        return;
+      }
+
+      const projectFlockKandangsResponse = await ProjectFlockKandangApi.getAll({
+        area_id: selectedArea?.value,
+        project_flock_id: selectedProjectFlock?.value,
+      });
+
+      if (
+        !projectFlockKandangsResponse ||
+        isResponseError(projectFlockKandangsResponse)
+      ) {
+        throw new Error();
+      }
+
+      setProjectFlockKandangs(projectFlockKandangsResponse.data);
+      setProjectFlockKandangMetadata(projectFlockKandangsResponse.meta);
+      setIsLoadingSearch(false);
+    } catch (error) {
+      toast.error('Gagal mencari data! Coba lagi.');
+      setProjectFlockKandangs(null);
+      setProjectFlockKandangMetadata(undefined);
+      setIsLoadingSearch(false);
+    }
+  };
+
+  const resetHandler = () => {
+    setProjectFlockKandangs(null);
+    setSelectedArea(null);
+    setSelectedLocation(null);
+    setSelectedProjectFlock(null);
+    setSelectedProjectFlockKandang(null);
+    // resetFilter();
+  };
+
+  return (
+    <div className='w-full p-4'>
+      <Card
+        variant='bordered'
+        className={{
+          wrapper: 'w-full',
+        }}
+      >
+        <div>
+          <h2 className='text-xl font-bold text-center'>
+            Laporan Hasil Produksi
+          </h2>
+        </div>
+
+        {/* Filters */}
+        <div className='flex flex-col gap-4 mb-6 mt-4'>
+          <div className='grid grid-cols-12 gap-4'>
+            <SelectInput
+              label='Area'
+              placeholder='Pilih Area'
+              options={areaOptions}
+              isLoading={isLoadingAreaOptions}
+              value={selectedArea}
+              onChange={areaChangeHandler}
+              onInputChange={setAreaInputValue}
+              isClearable
+              className={{
+                wrapper: 'col-span-12 sm:col-span-6 lg:col-span-4',
+              }}
+            />
+
+            <SelectInput
+              label='Lokasi'
+              placeholder={
+                selectedArea ? 'Pilih Lokasi' : 'Pilih Area terlebih dahulu'
+              }
+              options={locationOptions}
+              isLoading={isLoadingLocationOptions}
+              value={selectedLocation}
+              onChange={locationChangeHandler}
+              onInputChange={setLocationInputValue}
+              isClearable
+              isDisabled={!selectedArea}
+              className={{
+                wrapper: 'col-span-12 sm:col-span-6 lg:col-span-4',
+              }}
+            />
+
+            <SelectInput
+              label='Project Flock'
+              placeholder={
+                selectedArea && selectedLocation
+                  ? 'Pilih Project Flock'
+                  : 'Pilih Area dan Lokasi terlebih dahulu'
+              }
+              options={projectFlockOptions}
+              isLoading={isLoadingProjectFlockOptions}
+              value={selectedProjectFlock}
+              onChange={projectFlockChangeHandler}
+              onInputChange={setProjectFlockInputValue}
+              isClearable
+              isDisabled={!selectedArea || !selectedLocation}
+              className={{
+                wrapper: 'col-span-12 sm:col-span-6 lg:col-span-4',
+              }}
+            />
+
+            <SelectInput
+              label='Project Flock Kandang'
+              placeholder={
+                selectedProjectFlock
+                  ? 'Pilih Project Flock Kandang'
+                  : 'Pilih Project Flock terlebih dahulu'
+              }
+              options={projectFlockKandangOptions}
+              isLoading={isLoadingProjectFlockKandangOptions}
+              value={selectedProjectFlockKandang}
+              onChange={projectFlockKandangChangeHandler}
+              onInputChange={setProjectFlockKandangInputValue}
+              isClearable
+              isDisabled={!selectedProjectFlock}
+              className={{
+                wrapper: 'col-span-12 sm:col-span-6 lg:col-span-4',
+              }}
+            />
+          </div>
+
+          <div className='grid grid-cols-12 gap-4'>
+            <div className='col-span-12 flex flex-wrap sm:justify-end items-end gap-2'>
+              <Button
+                onClick={searchHandler}
+                isLoading={isLoadingSearch}
+                disabled={
+                  !selectedArea || !selectedLocation || !selectedProjectFlock
+                }
+                className='flex-1 sm:flex-none'
+              >
+                <Icon icon='heroicons-outline:search' width={20} height={20} />
+                Cari
+              </Button>
+              <Button
+                color='warning'
+                onClick={resetHandler}
+                className='flex-1 sm:flex-none'
+              >
+                <Icon icon='heroicons-outline:refresh' width={20} height={20} />
+                Reset
+              </Button>
+
+              <Dropdown
+                align='end'
+                direction='bottom'
+                trigger={
+                  <Button>
+                    Export{' '}
+                    <Icon
+                      icon='heroicons-outline:download'
+                      width={20}
+                      height={20}
+                    />
+                  </Button>
+                }
+              >
+                <Menu>
+                  <MenuItem
+                    title='Export to Excel'
+                    icon='icon-park-outline:excel'
+                    isLoading={isLoadingExportingToExcel}
+                    onClick={exportToExcelHandler}
+                    className='text-nowrap'
+                  />
+                </Menu>
+              </Dropdown>
+            </div>
+          </div>
+        </div>
+      </Card>
+
+      <div className='mt-4'>
+        {isLoadingSearch && (
+          <span className='loading loading-dots loading-xl block mx-auto text-gray-400' />
+        )}
+
+        {!isLoadingSearch && !projectFlockKandangs && (
+          <p className='text-center text-gray-500'>
+            Silakan pilih filter dan klik tombol Cari untuk menampilkan data.
+          </p>
+        )}
+
+        {!isLoadingSearch && projectFlockKandangs?.length === 0 && (
+          <p className='text-center text-gray-500'>
+            Tidak ada data kandang project flock yang dapat ditampilkan.
+          </p>
+        )}
+
+        {!isLoadingSearch && projectFlockKandangs && (
+          <Card
+            variant='bordered'
+            className={{
+              wrapper: 'w-full',
+            }}
+          >
+            {projectFlockKandangs.map((projectFlockKandang) => (
+              <ProductionResultProjectFlockKandangTable
+                key={projectFlockKandang.id}
+                projectFlockKandangId={projectFlockKandang.id}
+                kandangName={projectFlockKandang.kandang.name}
+              />
+            ))}
+
+            <div className='max-w-sm ml-auto mt-5'>
+              <Pagination
+                totalItems={projectFlockKandangMetadata?.total_results || 0}
+                itemsPerPage={projectFlockKandangMetadata?.limit || 0}
+                currentPage={projectFlockKandangMetadata?.page || 0}
+                onPrevPage={() =>
+                  setPage((currPage) =>
+                    currPage > 1 ? currPage - 1 : currPage
+                  )
+                }
+                onNextPage={() =>
+                  setPage((currPage) =>
+                    projectFlockKandangMetadata?.total_pages &&
+                    currPage < projectFlockKandangMetadata.total_pages
+                      ? currPage + 1
+                      : currPage
+                  )
+                }
+                onPageChange={(pageNumber) => setPage(pageNumber)}
+                rowOptions={[10, 20, 50, 100]}
+                onRowChange={setPageSize}
+              />
+            </div>
+          </Card>
+        )}
+      </div>
+    </div>
+  );
+};
+
+export default ProductionResultContent;