feat(FE-85-87-88): slicing ui and integrate api for search and edit

src/app/production/project-flock/detail/edit/page.tsx

@@ -0,0 +1,46 @@
+'use client'
+
+
+import ProjectFlockForm from "@/components/pages/production/project-flock/form/ProjectFlockForm";
+import { isResponseError, isResponseSuccess } from "@/lib/api-helper";
+import { ProjectFlockApi } from "@/services/api/production";
+import { useRouter, useSearchParams } from "next/navigation";
+import useSWR from "swr";
+
+const ProjectFlockEdit = () => {
+  const router = useRouter();
+  const searchParams = useSearchParams();
+
+  const projectFlockId = searchParams.get("projectFlockId");
+
+  const { data: projectFlock, isLoading: isLoadingCostumer } = useSWR(
+    projectFlockId,
+    (id: number) => ProjectFlockApi.getSingle(id)
+  );
+
+  if(!projectFlockId){
+    router.back();
+
+    return (
+      <div className="w-full flex flex-row justify-center items-center p-4">
+        <span className="loading loading-spinner loading-xl" />
+      </div>
+    );
+  }
+
+  if(!isLoadingCostumer && (!projectFlock || isResponseError(projectFlock))){
+    router.replace("/404");
+    return;
+  }
+
+  return (
+    <div className="w-full p-4 flex flex-row justify-center">
+      {isLoadingCostumer && <span className="loading loading-spinner loading-xl" />}
+      {!isLoadingCostumer && isResponseSuccess(projectFlock) && (
+        <ProjectFlockForm formType="edit" initialValues={projectFlock.data} />
+      )}
+    </div>
+  )
+}
+
+export default ProjectFlockEdit;