Improve frontend 3

frontend/src/components/ui/EditViewModal/EditViewModal.tsx

@@ -11,7 +11,7 @@ import { formatters } from '../Stats/StatsPresets';
 export interface EditViewModalField {
   label: string;
   value: string | number | React.ReactNode;
-  type?: 'text' | 'currency' | 'date' | 'datetime' | 'percentage' | 'list' | 'status' | 'image' | 'email' | 'tel' | 'number' | 'select' | 'textarea' | 'component';
+  type?: 'text' | 'currency' | 'date' | 'datetime' | 'percentage' | 'list' | 'status' | 'image' | 'email' | 'tel' | 'number' | 'select' | 'textarea' | 'component' | 'custom' | 'button';
   highlight?: boolean;
   span?: 1 | 2 | 3; // For grid layout - added 3 for full width on larger screens
   editable?: boolean; // Whether this field can be edited
@@ -22,6 +22,10 @@ export interface EditViewModalField {
   helpText?: string; // Help text displayed below the field
   component?: React.ComponentType<any>; // For custom components
   componentProps?: Record<string, any>; // Props for custom components
+  customRenderer?: (value: any) => React.ReactNode; // For custom rendering in view mode
+  buttonText?: string; // Text for button type fields
+  onButtonClick?: () => void; // Click handler for button type fields
+  readonly?: boolean; // Whether this field is read-only
 }
 
 export interface EditViewModalSection {
@@ -152,7 +156,12 @@ const renderEditableField = (
   onChange?: (value: string | number) => void,
   validationError?: string
 ): React.ReactNode => {
-  // Handle custom components FIRST - they work in both view and edit modes
+  // Handle custom renderer FIRST - for custom view mode rendering
+  if (field.type === 'custom' && field.customRenderer) {
+    return field.customRenderer(field.value);
+  }
+
+  // Handle custom components - they work in both view and edit modes
   if (field.type === 'component' && field.component) {
     const Component = field.component;
     return (
@@ -164,6 +173,23 @@ const renderEditableField = (
     );
   }
 
+  // Handle button type fields
+  if (field.type === 'button') {
+    return (
+      <button
+        onClick={field.onButtonClick}
+        disabled={!isEditMode}
+        className={`px-4 py-2 rounded-md text-sm font-medium transition-colors ${
+          isEditMode
+            ? 'bg-[var(--color-primary)] text-white hover:bg-[var(--color-primary)]/90'
+            : 'bg-gray-300 text-gray-600 cursor-not-allowed'
+        }`}
+      >
+        {field.buttonText || field.value}
+      </button>
+    );
+  }
+
   // Then check if we should render as view or edit
   if (!isEditMode || !field.editable) {
     return formatFieldValue(field.value, field.type);