feat: implement full page components and validation schema; enhance translations and form handling

packages/ui/src/components/field-value/field-value.tsx

@@ -0,0 +1,25 @@
+import { Stack, Text, StackProps } from '@mantine/core';
+import React from 'react';
+
+export interface FieldValueProps extends StackProps {
+  label: React.ReactNode;
+  value?: React.ReactNode;
+  render?: (value?: React.ReactNode) => React.ReactNode;
+}
+
+export function FieldValue({ label, value, render, ...stackProps }: FieldValueProps) {
+  return (
+    <Stack gap={4} {...stackProps}>
+      <Text size="xs" fw={600}>
+        {label}
+      </Text>
+      {render ? (
+        render(value)
+      ) : (
+        <Text size="sm" fw={500}>
+          {value || '-'}
+        </Text>
+      )}
+    </Stack>
+  );
+}

packages/ui/src/components/field-value/index.ts

@@ -0,0 +1,2 @@
+export * from './field-value';
+export * from './render-date';

packages/ui/src/components/field-value/render-date.tsx

@@ -0,0 +1,19 @@
+import React from 'react';
+import { DateUtils } from '@repo/utils';
+
+export interface RenderDateProps {
+  value?: string | number | Date | DateUtils | null;
+  format?: string;
+  fallback?: string;
+}
+
+export function RenderDate({ value, format = 'DD-MM-YYYY, HH:mm', fallback = '-' }: RenderDateProps) {
+  if (!value) return <>{fallback}</>;
+
+  try {
+    const parsedValue = typeof value === 'string' && !isNaN(Number(value)) ? Number(value) : value;
+    return <>{new DateUtils(parsedValue as any).format(format)}</>;
+  } catch (error) {
+    return <>{fallback}</>;
+  }
+}

packages/ui/src/components/index.ts

@@ -13,3 +13,4 @@ export * from './core-app-shell';
 export * from './actions-tools';
 export * from './status-badge';
 export * from './ag-grid';
+export * from './field-value';

packages/ui/src/foundations/enterprise-module/hooks/use-form-page.context.ts

@@ -1,7 +1,9 @@
 import { createContext, useContext } from 'react';
 import type { BaseEntity } from '@repo/core-api/data-services';
 import { FormPageType } from '../entities/entity';
+import { UseFormReturn } from 'react-hook-form';
 export interface FormPageContextValue<E extends BaseEntity = BaseEntity> {
+  formControl: UseFormReturn<any>;
   formType: FormPageType;
   isCreate: boolean;
   isEdit: boolean;

packages/ui/src/foundations/enterprise-module/index.ts

@@ -2,8 +2,11 @@ export * from './constant/';
 
 export * from './entities/entity';
 
-export * from './hooks/use-module.context';
+export * from './hooks/use-detail-page.context';
+export * from './hooks/use-form-draft.context';
 export * from './hooks/use-form-page.context';
+export * from './hooks/use-index-page.context';
+export * from './hooks/use-module.context';
 
 export * from './providers/module.provider';
 export * from './providers/index-page.provider';

packages/ui/src/foundations/enterprise-module/providers/form-page.provider.tsx

@@ -336,6 +336,7 @@ export function EnterpriseFormPageProvider<E extends BaseEntity = BaseEntity>(pr
   const contextValue = useMemo(
     () => ({
       formType: formPageType,
+      formControl: formControl,
       isCreate: formPageType === 'CREATE',
       isEdit: formPageType === 'EDIT',
       isDuplicate: formPageType === 'DUPLICATE',