feat(FE-170,174): add GradingForm component for managing grading records

src/app/production/recording/grading/add/page.tsx

@@ -0,0 +1,44 @@
+'use client';
+
+import { useRouter, useSearchParams } from 'next/navigation';
+import useSWR from 'swr';
+import GradingForm from '@/components/pages/production/recording/grading/form/GradingForm';
+import { RecordingApi } from '@/services/api/production';
+import { isResponseSuccess } from '@/lib/api-helper';
+
+const AddGrading = () => {
+  const router = useRouter();
+  const searchParams = useSearchParams();
+
+  const recordingId = searchParams.get('recording_id');
+
+  const { data: recording, isLoading: isLoadingRecording } = useSWR(
+    recordingId && recordingId !== 'new' ? [recordingId] : null,
+    ([id]) => RecordingApi.getSingle(parseInt(id))
+  );
+
+  if (
+    recordingId &&
+    recordingId !== 'new' &&
+    !isLoadingRecording &&
+    (!recording || !isResponseSuccess(recording))
+  ) {
+    router.replace('/404');
+    return;
+  }
+
+  return (
+    <div className='w-full p-4 flex flex-row justify-center'>
+      {recordingId && recordingId !== 'new' && isLoadingRecording && (
+        <span className='loading loading-spinner loading-xl' />
+      )}
+      {(!recordingId ||
+        recordingId === 'new' ||
+        (!isLoadingRecording && recording && isResponseSuccess(recording))) && (
+        <GradingForm type='add' recordingData={isResponseSuccess(recording) ? recording.data : undefined} />
+      )}
+    </div>
+  );
+};
+
+export default AddGrading;

src/app/production/recording/grading/detail/edit/page.tsx

@@ -0,0 +1,52 @@
+'use client';
+
+import { useRouter, useSearchParams } from 'next/navigation';
+import useSWR from 'swr';
+import GradingForm from '@/components/pages/production/recording/grading/form/GradingForm';
+import { RecordingApi } from '@/services/api/production';
+import { isResponseSuccess } from '@/lib/api-helper';
+
+const EditGrading = () => {
+  const router = useRouter();
+  const searchParams = useSearchParams();
+
+  const recordingId = searchParams.get('recordingId');
+  const gradingId = searchParams.get('gradingId');
+
+  const { data: recording, isLoading: isLoadingRecording } = useSWR(
+    recordingId ? [recordingId] : null,
+    ([id]) => RecordingApi.getSingle(parseInt(id))
+  );
+
+  if (!recordingId) {
+    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 (!isLoadingRecording && (!recording || !isResponseSuccess(recording))) {
+    router.replace('/404');
+    return;
+  }
+
+  return (
+    <div className='w-full p-4 flex flex-row justify-center'>
+      {isLoadingRecording && (
+        <span className='loading loading-spinner loading-xl' />
+      )}
+      {!isLoadingRecording && recording && isResponseSuccess(recording) && (
+        <GradingForm
+          type='edit'
+          initialValues={recording.data.recording_eggs?.find(egg => egg.id === parseInt(gradingId || '0'))}
+          recordingData={recording.data}
+        />
+      )}
+    </div>
+  );
+};
+
+export default EditGrading;

src/app/production/recording/grading/detail/layout.tsx

@@ -0,0 +1,11 @@
+import SuspenseHelper from '@/components/helper/SuspenseHelper';
+
+const Layout = ({
+  children,
+}: Readonly<{
+  children: React.ReactNode;
+}>) => {
+  return <SuspenseHelper>{children}</SuspenseHelper>;
+};
+
+export default Layout;

src/app/production/recording/grading/detail/page.tsx

@@ -0,0 +1,51 @@
+'use client';
+
+import { useRouter, useSearchParams } from 'next/navigation';
+import useSWR from 'swr';
+import GradingForm from '@/components/pages/production/recording/grading/form/GradingForm';
+import { RecordingApi } from '@/services/api/production';
+import { isResponseError, isResponseSuccess } from '@/lib/api-helper';
+
+const DetailGrading = () => {
+  const router = useRouter();
+  const searchParams = useSearchParams();
+
+  const gradingId = searchParams.get('gradingId');
+
+  const { data: grading, isLoading: isLoadingGrading } = useSWR(
+    gradingId ? [gradingId] : null,
+    ([id]) => RecordingApi.getSingle(parseInt(id))
+  );
+
+  if (!gradingId) {
+    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 (!isLoadingGrading && (!grading || !isResponseSuccess(grading))) {
+    router.replace('/404');
+    return;
+  }
+
+  return (
+    <div className='w-full p-4 flex flex-row justify-center'>
+      {isLoadingGrading && (
+        <span className='loading loading-spinner loading-xl' />
+      )}
+      {!isLoadingGrading && grading && isResponseSuccess(grading) && (
+        <GradingForm
+          type='detail'
+          initialValues={grading.data.recording_eggs?.find(egg => egg.id === parseInt(gradingId))}
+          recordingData={grading.data}
+        />
+      )}
+    </div>
+  );
+};
+
+export default DetailGrading;