feat(types): update layout configuration interfaces to match database schema

- Change createdAt and updatedAt from string to Date type
- Allow startingRow and endingRow to be null in addition to undefined
- Add dataTypeFormat field to LayoutSectionField interface
- Update page component to handle type transformations for client components

app/components/layout-configurations/LayoutConfigurationDetail.tsx

@@ -11,8 +11,8 @@ interface LayoutConfiguration {
   id: number;
   name: string;
   sections: LayoutSection[];
-  createdAt: string;
-  updatedAt: string;
+  createdAt: Date;
+  updatedAt: Date;
 }
 
 interface LayoutSection {
@@ -20,8 +20,8 @@ interface LayoutSection {
   name: string;
   type: string;
   sheetName: string;
-  startingRow?: number;
-  endingRow?: number;
+  startingRow?: number | null;
+  endingRow?: number | null;
   tableName: string;
   fields: LayoutSectionField[];
 }
@@ -30,6 +30,7 @@ interface LayoutSectionField {
   id: number;
   name: string;
   dataType: string;
+  dataTypeFormat: string | null;
   cellPosition: string;
   importTableColumnName: string;
   importColumnOrderNumber: number;

app/components/layout-configurations/LayoutSectionCard.tsx

@@ -10,8 +10,8 @@ interface LayoutSection {
   name: string;
   type: string;
   sheetName: string;
-  startingRow?: number;
-  endingRow?: number;
+  startingRow?: number | null;
+  endingRow?: number | null;
   tableName: string;
   fields: LayoutSectionField[];
 }
@@ -20,6 +20,7 @@ interface LayoutSectionField {
   id: number;
   name: string;
   dataType: string;
+  dataTypeFormat: string | null;
   cellPosition: string;
   importTableColumnName: string;
   importColumnOrderNumber: number;

app/layout-configurations/[id]/page.tsx

@@ -36,7 +36,20 @@ export default async function LayoutConfigurationDetailPage({ params }: PageProp
       </div>
 
       <Suspense fallback={<LayoutConfigurationDetailSkeleton />}>
-        <LayoutConfigurationDetail configuration={configuration} />
+        <LayoutConfigurationDetail configuration={{
+          ...configuration,
+          createdAt: configuration.createdAt,
+          updatedAt: configuration.updatedAt,
+          sections: configuration.sections.map(section => ({
+            ...section,
+            startingRow: section.startingRow ?? undefined,
+            endingRow: section.endingRow ?? undefined,
+            fields: section.fields.map(field => ({
+              ...field,
+              dataTypeFormat: field.dataTypeFormat ?? null
+            }))
+          }))
+        }} />
       </Suspense>
     </div>
   );