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';