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

src/app/production/project-flock/layout.tsx

@@ -4,7 +4,7 @@ import { usePathname, useRouter } from 'next/navigation';
 import Drawer from '@/components/Drawer';
 import React, { ReactNode } from 'react';
 import ProjectFlockTable from '@/components/pages/production/project-flock/ProjectFlockTable';
-import { useUiStore } from '@/stores/ui/ui.store';
+import { useProjectFlockUiStore } from '@/stores/ui/slices/production/project-flock.slice';
 
 export default function ProjectFlockLayout({
   children,
@@ -13,7 +13,7 @@ export default function ProjectFlockLayout({
 }) {
   const pathname = usePathname();
   const router = useRouter();
-  const toggleValidate = useUiStore((s) => s.toggleValidate);
+  const toggleValidate = useProjectFlockUiStore((s) => s.toggleValidate);
 
   const isAdd = pathname.endsWith('/add');
   const isEdit = pathname.includes('/detail/edit');
@@ -22,15 +22,15 @@ export default function ProjectFlockLayout({
 
   const isOpen = isAdd || isEdit || isDetail || isChickin;
 
-  // const childRef = useRef<ProjectFlockFormRef>(null);
-
   const handleBackdropClick = () => {
-    const unsub = useUiStore.getState().subscribeIsValid((isValid) => {
-      if (isValid) {
-        unsub(); // berhenti listen
-        router.push('/production/project-flock');
-      }
-    });
+    const unsub = useProjectFlockUiStore
+      .getState()
+      .subscribeIsValid((isValid) => {
+        if (isValid) {
+          unsub(); // berhenti listen
+          router.push('/production/project-flock');
+        }
+      });
 
     toggleValidate();
   };
@@ -39,7 +39,9 @@ export default function ProjectFlockLayout({
     <>
       {/* List page always rendered */}
       <div>
-        <ProjectFlockTable />
+        <ProjectFlockTable
+          refresh={() => !isOpen && router.push('/production/project-flock')}
+        />
       </div>
 
       {/* Render Drawer only on /add */}