feat(FE): US#278 slicing UI from and client side validation

src/components/pages/production/project-flock/ProjectFlockTable.tsx

@@ -20,7 +20,7 @@ import { Kandang } from '@/types/api/master-data/kandang';
 import { ProjectFlock } from '@/types/api/production/project-flock';
 import { Icon } from '@iconify/react';
 import { CellContext, SortingState } from '@tanstack/react-table';
-import { ChangeEventHandler, useRef, useState } from 'react';
+import { ChangeEventHandler, useEffect, useState } from 'react';
 import toast from 'react-hot-toast';
 import useSWR from 'swr';
 
@@ -94,7 +94,7 @@ const RowOptionsMenu = ({
   );
 };
 
-const ProjectFlockTable = () => {
+const ProjectFlockTable = ({ refresh }: { refresh?: () => void }) => {
   const {
     state: tableFilterState,
     updateFilter,
@@ -154,7 +154,8 @@ const ProjectFlockTable = () => {
     mutate: refreshProjectFlocks,
   } = useSWR(
     `${ProjectFlockApi.basePath}${getTableFilterQueryString()}`,
-    ProjectFlockApi.getAllFetcher
+    ProjectFlockApi.getAllFetcher,
+    { revalidateOnMount: true }
   );
 
   const areaUrl = `${AreaApi.basePath}?${new URLSearchParams({
@@ -255,6 +256,10 @@ const ProjectFlockTable = () => {
     setIsApproveLoading(false);
   };
 
+  useEffect(() => {
+    refreshProjectFlocks();
+  }, [refresh]);
+
   return (
     <>
       <div className='w-full p-0 sm:p-4'>