refactor(FE): Refactor recording table and add filter modal

src/app/production/recording/page.tsx

@@ -2,7 +2,7 @@ import RecordingTable from '@/components/pages/production/recording/RecordingTab
 
 const Recording = () => {
   return (
-    <section className='w-full p-4 sm:p-0'>
+    <section className='w-full p-3 overflow-x-hidden'>
       <RecordingTable />
     </section>
   );

src/components/pages/production/recording/filter/RecordingFilter.ts

@@ -0,0 +1,15 @@
+import { string, object } from 'yup';
+
+export const RecordingFilterSchema = object().shape({
+  area_id: string().nullable(),
+  location_id: string().nullable(),
+  kandang_id: string().nullable(),
+  project_flock_kandang_id: string().nullable(),
+});
+
+export type RecordingFilterType = {
+  area_id: string | null;
+  location_id: string | null;
+  kandang_id: string | null;
+  project_flock_kandang_id: string | null;
+};

src/components/pages/production/recording/skeleton/RecordingTableSkeleton.tsx

@@ -0,0 +1,37 @@
+import DataStateSkeleton from '@/components/helper/skeleton/DataStateSkeleton';
+import Table from '@/components/Table';
+import { Recording } from '@/types/api/production/recording';
+import { ColumnDef } from '@tanstack/react-table';
+
+const RecordingTableSkeleton = ({
+  columns,
+  icon,
+  title = 'Data Recording Belum Tersedia',
+  subtitle = 'Tidak ada data recording untuk saat ini.',
+}: {
+  columns: ColumnDef<Recording>[];
+  icon: React.ReactNode;
+  title?: string;
+  subtitle?: string;
+}) => {
+  return (
+    <div className='relative size-full'>
+      <Table
+        data={[]}
+        columns={columns}
+        isLoading={true}
+        className={{
+          skeletonCellClassName: 'animate-none w-full h-5 bg-base-content/4',
+          headerColumnClassName: 'whitespace-nowrap',
+          containerClassName: 'mb-0 overflow-hidden',
+          tableWrapperClassName: 'overflow-hidden',
+        }}
+      />
+      <div className='absolute inset-0 flex items-center justify-center'>
+        <DataStateSkeleton icon={icon} title={title} description={subtitle} />
+      </div>
+    </div>
+  );
+};
+
+export default RecordingTableSkeleton;