@argusoft/medplat-app-shell 1.0.5 → 1.0.7

package/src/views/feature-components/login/LoginConfigurator.jsx

@@ -0,0 +1,1149 @@
+import React, { useState, useEffect } from 'react';
+import { useForm, useFieldArray } from 'react-hook-form';
+import {
+  Box,
+  Button,
+  Card,
+  TextField,
+  Typography,
+  Switch,
+  FormControlLabel,
+  Select,
+  MenuItem,
+  InputLabel,
+  FormControl,
+  IconButton,
+  Divider,
+  Tabs,
+  Tab,
+  Paper,
+  Grid,
+  Menu
+} from '@mui/material';
+import { api } from '@/common/interceptors/AxiosInterceptor';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import {
+  faPlus,
+  faTrash,
+  faSave,
+  faUndo,
+  faCopy,
+  faEye,
+  faMobileAlt,
+  faDesktop,
+  faDownload,
+  faPerson,
+  faBookMedical,
+  faPassport,
+  faPalette,
+} from '@fortawesome/free-solid-svg-icons';
+import { showToast } from '@/common/toaster/toaster';
+import { imageMap } from './Login';
+import { bahaarJSON, upJSON, phmpJSON, sewaruralJSON, oasisJSON, techoJSON, defaultJSON } from '@/common/constants/app.constant';
+
+const PRESETS = {
+  default: defaultJSON,
+  bahaar: bahaarJSON,
+  ekavach: upJSON,
+  dnhdd: phmpJSON,
+  sewarural: sewaruralJSON,
+  oasis: oasisJSON,
+  gujarat: techoJSON
+};
+
+const PRESET_LABELS = {
+  custom: 'Custom Config',
+  default: 'Default (Medplat)',
+  bahaar: 'Bahaar (Sath)',
+  ekavach: 'UP (eKavach)',
+  dnhdd: 'PHMP (DNH & DD)',
+  sewarural: 'Sewa Rural',
+  oasis: 'OASIS (PHFI/LSHTM)',
+  gujarat: 'TeCHO+ (Gujarat)'
+};
+
+const iconMap = {
+  PERSON: faPerson,
+  MEDICAL: faBookMedical,
+  PASSPORT: faPassport,
+};
+
+export default function LoginConfigurator() {
+  const [selectedPresetKey, setSelectedPresetKey] = useState('gujarat');
+  const [activeTab, setActiveTab] = useState(0); // 0 = Form Editor, 1 = Raw JSON
+  const [previewDevice, setPreviewDevice] = useState('desktop'); // desktop or mobile
+  const [presetMenuAnchor, setPresetMenuAnchor] = useState(null);
+
+  const containerRef = React.useRef(null);
+  const [scale, setScale] = useState(1);
+  const isResettingRef = React.useRef(false);
+
+  const targetWidth = previewDevice === 'mobile' ? 360 : 800;
+  const targetHeight = previewDevice === 'mobile' ? 640 : 500;
+
+  useEffect(() => {
+    if (!containerRef.current) return;
+    const updateScale = () => {
+      const parent = containerRef.current.parentElement;
+      if (!parent) return;
+      // Get padding-adjusted parent height and width
+      const parentWidth = parent.clientWidth - 32; 
+      const parentHeight = parent.clientHeight - 32;
+      
+      const widthScale = parentWidth / targetWidth;
+      const heightScale = parentHeight / targetHeight;
+      const scaleFactor = Math.max(0.2, Math.min(widthScale, heightScale, 1)); // max scale = 1, min scale = 0.2
+      setScale(scaleFactor);
+    };
+
+    updateScale();
+    window.addEventListener('resize', updateScale);
+    
+    // ResizeObserver for highly responsive updates when layout layout shifts
+    const observer = new ResizeObserver(() => {
+      updateScale();
+    });
+    if (containerRef.current.parentElement) {
+      observer.observe(containerRef.current.parentElement);
+    }
+
+    return () => {
+      window.removeEventListener('resize', updateScale);
+      observer.disconnect();
+    };
+  }, [previewDevice, targetWidth, targetHeight]);
+
+
+  const { register, control, handleSubmit, watch, reset, getValues, setValue } = useForm({
+    defaultValues: PRESETS.gujarat
+  });
+
+  const { fields: sectionFields, append: appendSection, remove: removeSection } = useFieldArray({
+    control,
+    name: "footerSections"
+  });
+
+  const { fields: bottomLogoFields, append: appendBottomLogo, remove: removeBottomLogo } = useFieldArray({
+    control,
+    name: "bottomLogos"
+  });
+
+  const currentValues = watch();
+
+  useEffect(() => {
+    if (isResettingRef.current) {
+      isResettingRef.current = false;
+      return;
+    }
+    if (selectedPresetKey !== 'custom' && PRESETS[selectedPresetKey]) {
+      const isDifferent = JSON.stringify(currentValues) !== JSON.stringify(PRESETS[selectedPresetKey]);
+      if (isDifferent) {
+        setSelectedPresetKey('custom');
+      }
+    }
+  }, [currentValues, selectedPresetKey]);
+
+  // Load preset helper
+  const handleLoadPreset = (key) => {
+    setSelectedPresetKey(key);
+    if (key !== 'custom') {
+      isResettingRef.current = true;
+      reset(PRESETS[key] || {});
+      showToast({ message: `Loaded ${PRESET_LABELS[key]} preset`, type: 'info' });
+    } else {
+      showToast({ message: `Switched to Custom preset mode`, type: 'info' });
+    }
+  };
+
+  const handleOpenPresetMenu = (event) => {
+    setPresetMenuAnchor(event.currentTarget);
+  };
+
+  const handleClosePresetMenu = () => {
+    setPresetMenuAnchor(null);
+  };
+
+  const handleSelectPresetToLoad = (presetKey) => {
+    isResettingRef.current = true;
+    reset(PRESETS[presetKey] || {});
+    showToast({ message: `Loaded values from ${PRESET_LABELS[presetKey]} into Custom Config`, type: 'success' });
+    handleClosePresetMenu();
+  };
+
+  // Load config from API on mount
+  useEffect(() => {
+    const fetchConfig = async () => {
+      try {
+        const response = await api.get('login/preference');
+        if (response?.data) {
+          let data = response.data;
+          // Handle cases where response might be wrapped in SystemConfiguration or custom DTO
+          if (data && typeof data === 'object') {
+            if ('keyValue' in data) {
+              data = data.keyValue;
+            } else if ('value' in data) {
+              data = data.value;
+            } else if ('preference' in data) {
+              data = data.preference;
+            }
+          }
+          if (typeof data === 'string') {
+            try {
+              data = JSON.parse(data);
+            } catch (err) {
+              console.error('Error parsing config string from API response', err);
+            }
+          }
+          if (data && typeof data === 'object') {
+            isResettingRef.current = true;
+            reset(data);
+            showToast({ message: 'Loaded configuration from server', type: 'success' });
+            
+            // Check if the loaded data matches any of the available presets
+            const matchedKey = Object.keys(PRESETS).find(key => {
+              return JSON.stringify(PRESETS[key]) === JSON.stringify(data);
+            });
+            setSelectedPresetKey(matchedKey || 'custom');
+            return;
+          }
+        }
+        throw new Error('Invalid or empty config from server');
+      } catch (error) {
+        console.error('Failed to fetch login preference from API', error);
+        
+        // Fallback to local storage if API fails or returns empty
+        const env = import.meta.env.VITE_APP_IMPLEMENTATION || 'gujarat';
+        const localKey = env === 'gujaratStaging' ? 'gujarat' : env;
+        const savedCustom = localStorage.getItem('medplat_login_config_custom');
+        const savedEnv = localStorage.getItem(`medplat_login_config_${localKey}`);
+        const saved = savedCustom || savedEnv;
+        if (saved) {
+          try {
+            const parsed = JSON.parse(saved);
+            isResettingRef.current = true;
+            reset(parsed);
+            
+            const matchedKey = Object.keys(PRESETS).find(key => {
+              return JSON.stringify(PRESETS[key]) === JSON.stringify(parsed);
+            });
+            setSelectedPresetKey(matchedKey || 'custom');
+            showToast({ message: 'Loaded local configuration backup', type: 'info' });
+          } catch (e) {
+            console.error("Error reading initial local storage config", e);
+          }
+        } else if (PRESETS[localKey]) {
+          isResettingRef.current = true;
+          reset(PRESETS[localKey]);
+          setSelectedPresetKey(localKey);
+        }
+      }
+    };
+
+    fetchConfig();
+  }, [reset]);
+
+  // Save changes helper
+  const onSave = async (data) => {
+    try {
+      await api.post('login/set-preference', JSON.stringify(data));
+      localStorage.setItem(`medplat_login_config_${selectedPresetKey}`, JSON.stringify(data));
+      showToast({ message: 'Configuration saved successfully to server!', type: 'success' });
+    } catch (e) {
+      console.error('Failed to save to server', e);
+      localStorage.setItem(`medplat_login_config_${selectedPresetKey}`, JSON.stringify(data));
+      showToast({ message: 'Failed to save to server. Saved locally as backup.', type: 'warning' });
+    }
+  };
+
+  // Copy to clipboard helper
+  const handleCopyJSON = () => {
+    navigator.clipboard.writeText(JSON.stringify(currentValues, null, 2));
+    showToast({ message: 'JSON copied to clipboard', type: 'success' });
+  };
+
+  // Reset to static constant default
+  const handleResetToDefault = async () => {
+    const defaultData = PRESETS[selectedPresetKey] || PRESETS.gujarat;
+    isResettingRef.current = true;
+    reset(defaultData);
+    localStorage.removeItem(`medplat_login_config_${selectedPresetKey}`);
+    try {
+      await api.post('login/set-preference', JSON.stringify(defaultData));
+      showToast({ message: `Reset ${PRESET_LABELS[selectedPresetKey] || 'Custom'} to initial defaults on server`, type: 'info' });
+    } catch (e) {
+      console.error(e);
+      showToast({ message: `Reset locally. Failed to update server defaults.`, type: 'warning' });
+    }
+  };
+
+  // Helper to add sub-items
+  const addSubItem = (sectionIndex, fieldType) => {
+    const sections = getValues('footerSections');
+    const targetSection = sections[sectionIndex];
+    if (fieldType === 'buttons') {
+      const current = targetSection.buttons || [];
+      setValue(`footerSections.${sectionIndex}.buttons`, [...current, { icon: null, text: 'New Button', href: '#' }]);
+    } else if (fieldType === 'logos') {
+      const current = targetSection.logos || [];
+      setValue(`footerSections.${sectionIndex}.logos`, [...current, { image: 'medplat-highres.png', href: '#', alt: 'Logo' }]);
+    } else if (fieldType === 'logosWithText') {
+      const current = targetSection.items || [];
+      setValue(`footerSections.${sectionIndex}.items`, [...current, { image: 'medplat-highres.png', href: '#', alt: 'Logo', text: 'Supported text' }]);
+    }
+  };
+
+  // Helper to remove sub-items
+  const removeSubItem = (sectionIndex, fieldType, itemIndex) => {
+    const sections = getValues('footerSections');
+    const targetSection = sections[sectionIndex];
+    if (fieldType === 'buttons') {
+      const current = targetSection.buttons || [];
+      setValue(`footerSections.${sectionIndex}.buttons`, current.filter((_, i) => i !== itemIndex));
+    } else if (fieldType === 'logos') {
+      const current = targetSection.logos || [];
+      setValue(`footerSections.${sectionIndex}.logos`, current.filter((_, i) => i !== itemIndex));
+    } else if (fieldType === 'logosWithText') {
+      const current = targetSection.items || [];
+      setValue(`footerSections.${sectionIndex}.items`, current.filter((_, i) => i !== itemIndex));
+    }
+  };
+
+  return (
+    <Box className="min-h-screen bg-slate-50 p-6 font-sans">
+      {/* Header section */}
+      <Paper elevation={0} className="mb-6 p-6 rounded-2xl bg-gradient-to-r from-slate-900 to-indigo-950 text-white flex flex-col md:flex-row md:items-center justify-between gap-4 shadow-sm border border-slate-800">
+        <Box>
+          <Typography variant="h4" className="font-extrabold tracking-tight flex items-center gap-3">
+            <FontAwesomeIcon icon={faPalette} className="text-indigo-400" />
+            Login Configurator
+          </Typography>
+          <Typography variant="body2" className="text-slate-300 mt-1">
+            Customize the look, buttons, logos, and footer links of your portal login screen.
+          </Typography>
+        </Box>
+        <Box className="flex flex-wrap items-center gap-3">
+          <FormControl size="small" className="min-w-[180px] rounded-lg">
+            <InputLabel id="preset-select-label" style={{ color: 'white' }}>Preset Template</InputLabel>
+            <Select
+              labelId="preset-select-label"
+              value={selectedPresetKey}
+              label="Preset Template"
+              onChange={(e) => handleLoadPreset(e.target.value)}
+              style={{ color: 'white' }}
+            >
+              {Object.entries(PRESET_LABELS).map(([key, label]) => (
+                <MenuItem key={key} value={key}>{label}</MenuItem>
+              ))}
+            </Select>
+          </FormControl>
+          {selectedPresetKey === 'custom' && (
+            <>
+              <Button
+                variant="outlined"
+                onClick={handleOpenPresetMenu}
+                className="border-indigo-400 hover:border-indigo-300 text-indigo-200 normal-case rounded-xl font-medium"
+                startIcon={<FontAwesomeIcon icon={faDownload} />}
+              >
+                Load Preset
+              </Button>
+              <Menu
+                anchorEl={presetMenuAnchor}
+                open={Boolean(presetMenuAnchor)}
+                onClose={handleClosePresetMenu}
+              >
+                {Object.entries(PRESET_LABELS)
+                  .filter(([key]) => key !== 'custom')
+                  .map(([key, label]) => (
+                    <MenuItem key={key} onClick={() => handleSelectPresetToLoad(key)}>
+                      {label}
+                    </MenuItem>
+                  ))}
+              </Menu>
+            </>
+          )}
+          <Button
+            variant="outlined"
+            onClick={handleResetToDefault}
+            className="border-slate-500 hover:border-slate-300 text-slate-200 normal-case rounded-xl font-medium"
+            startIcon={<FontAwesomeIcon icon={faUndo} />}
+          >
+            Reset Default
+          </Button>
+          <Button
+            variant="contained"
+            onClick={handleSubmit(onSave)}
+            className="bg-indigo-600 hover:bg-indigo-500 text-white normal-case rounded-xl font-semibold shadow-md"
+            startIcon={<FontAwesomeIcon icon={faSave} />}
+          >
+            Save Changes
+          </Button>
+        </Box>
+      </Paper>
+
+      {/* Main Grid split editor & preview */}
+      <Grid container spacing={4}>
+        {/* Left column editor */}
+        <Grid item xs={12} lg={7}>
+          <Card className="rounded-2xl shadow-sm border border-slate-200 h-[calc(100vh-190px)] flex flex-col overflow-hidden">
+            <Box className="border-b border-slate-200 bg-white flex justify-between items-center px-4">
+              <Tabs value={activeTab} onChange={(e, val) => setActiveTab(val)}>
+                <Tab label="Form Editor" className="font-semibold text-slate-700 normal-case" />
+                <Tab label="Raw JSON View" className="font-semibold text-slate-700 normal-case" />
+              </Tabs>
+              {activeTab === 1 && (
+                <IconButton onClick={handleCopyJSON} color="primary" size="small" title="Copy JSON">
+                  <FontAwesomeIcon icon={faCopy} />
+                </IconButton>
+              )}
+            </Box>
+
+            <Box className="flex-1 overflow-y-auto p-6 bg-slate-50/50">
+              {activeTab === 0 ? (
+                <form className="space-y-6">
+                  {/* General Config Section */}
+                  <Paper className="p-5 rounded-xl border border-slate-200/80 shadow-none space-y-4">
+                    <Typography className="text-slate-800 font-bold text-lg border-b pb-2 flex items-center gap-2">
+                      General Settings
+                    </Typography>
+                    <Grid container spacing={2}>
+                      <Grid item xs={12} sm={6}>
+                        <FormControlLabel
+                          control={
+                            <Switch
+                              checked={!!currentValues.centerLogin}
+                              onChange={(e) => setValue('centerLogin', e.target.checked)}
+                              color="primary"
+                            />
+                          }
+                          label="Center Login Card"
+                        />
+                        <Typography variant="caption" className="block text-slate-400 -mt-1">
+                          If enabled, centers the login box. Otherwise, uses a split layout.
+                        </Typography>
+                      </Grid>
+                      <Grid item xs={12} sm={6}>
+                        <FormControlLabel
+                          control={
+                            <Switch
+                              checked={!!currentValues.isDownloadLink}
+                              onChange={(e) => setValue('isDownloadLink', e.target.checked)}
+                              color="primary"
+                            />
+                          }
+                          label="Show APK Download"
+                        />
+                        <Typography variant="caption" className="block text-slate-400 -mt-1">
+                          Show the link to download the mobile application.
+                        </Typography>
+                      </Grid>
+                      <Grid item xs={12} sm={6}>
+                        <FormControlLabel
+                          control={
+                            <Switch
+                              checked={!!currentValues.showLogoDivider}
+                              onChange={(e) => setValue('showLogoDivider', e.target.checked)}
+                              color="primary"
+                            />
+                          }
+                          label="Show Logo Vertical Divider"
+                        />
+                      </Grid>
+                       <Grid item xs={12} sm={6}>
+                         <TextField
+                           {...register('logoHeightClass')}
+                           label="Logo Height Class"
+                           placeholder="h-12 w-auto"
+                           fullWidth
+                           size="small"
+                           InputLabelProps={{ shrink: true }}
+                         />
+                       </Grid>
+                       <Grid item xs={12} sm={6}>
+                         <TextField
+                           {...register('inputFieldClass')}
+                           label="Input Focus Tailwind Class"
+                           placeholder="e.g. [&_.MuiOutlinedInput-root.Mui-focused_fieldset]:border-[#0A204A]"
+                           fullWidth
+                           size="small"
+                           InputLabelProps={{ shrink: true }}
+                         />
+                       </Grid>
+                       <Grid item xs={12} sm={6}>
+                         <TextField
+                           {...register('submitButtonClass')}
+                           label="Button Bg Tailwind Class"
+                           placeholder="e.g. bg-[#0A204A]"
+                           fullWidth
+                           size="small"
+                           InputLabelProps={{ shrink: true }}
+                         />
+                       </Grid>
+                    </Grid>
+                  </Paper>
+
+                  {/* Brand & Background Images */}
+                  <Paper className="p-5 rounded-xl border border-slate-200/80 shadow-none space-y-4">
+                    <Typography className="text-slate-800 font-bold text-lg border-b pb-2">
+                      Images Configuration
+                    </Typography>
+                    <Grid container spacing={3}>
+                      <Grid item xs={12} sm={6}>
+                        <FormControl fullWidth size="small">
+                          <InputLabel id="brand-logo-label">Brand Logo Image</InputLabel>
+                          <Select
+                            labelId="brand-logo-label"
+                            label="Brand Logo Image"
+                            value={currentValues.brandLogo || ''}
+                            onChange={(e) => setValue('brandLogo', e.target.value)}
+                            renderValue={(value) => (
+                              <Box className="flex items-center gap-2">
+                                <img src={imageMap[value]} alt="" className="h-6 w-auto object-contain bg-slate-100 p-0.5 rounded" />
+                                <span>{value}</span>
+                              </Box>
+                            )}
+                          >
+                            {Object.keys(imageMap).map((key) => (
+                              <MenuItem key={key} value={key} className="flex items-center gap-3">
+                                <img src={imageMap[key]} alt="" className="h-6 w-12 object-contain bg-slate-100 p-0.5 rounded" />
+                                <span>{key}</span>
+                              </MenuItem>
+                            ))}
+                          </Select>
+                        </FormControl>
+                      </Grid>
+
+                      <Grid item xs={12} sm={6}>
+                        <FormControl fullWidth size="small">
+                          <InputLabel id="bg-img-label">Split Background Image</InputLabel>
+                          <Select
+                            labelId="bg-img-label"
+                            label="Split Background Image"
+                            value={currentValues.implementationImage || ''}
+                            onChange={(e) => setValue('implementationImage', e.target.value)}
+                            renderValue={(value) => (
+                              <Box className="flex items-center gap-2">
+                                <img src={imageMap[value]} alt="" className="h-6 w-auto object-contain bg-slate-100 p-0.5 rounded" />
+                                <span>{value}</span>
+                              </Box>
+                            )}
+                          >
+                            {Object.keys(imageMap).map((key) => (
+                              <MenuItem key={key} value={key} className="flex items-center gap-3">
+                                <img src={imageMap[key]} alt="" className="h-6 w-12 object-contain bg-slate-100 p-0.5 rounded" />
+                                <span>{key}</span>
+                              </MenuItem>
+                            ))}
+                          </Select>
+                        </FormControl>
+                      </Grid>
+                    </Grid>
+                  </Paper>
+
+                  {/* Footer Sections */}
+                  <Paper className="p-5 rounded-xl border border-slate-200/80 shadow-none space-y-4">
+                    <Box className="flex justify-between items-center border-b pb-2">
+                      <Typography className="text-slate-800 font-bold text-lg">
+                        Footer Sections
+                      </Typography>
+                      <Button
+                        size="small"
+                        variant="outlined"
+                        onClick={() => appendSection({ type: 'logos', logos: [] })}
+                        startIcon={<FontAwesomeIcon icon={faPlus} />}
+                        className="normal-case rounded-lg"
+                      >
+                        Add Section
+                      </Button>
+                    </Box>
+
+                    {sectionFields.length === 0 ? (
+                      <Box className="text-center py-6 text-slate-400">
+                        No footer sections configured. Click "Add Section" to create one.
+                      </Box>
+                    ) : (
+                      <div className="space-y-4">
+                        {sectionFields.map((field, idx) => {
+                          const sectionType = watch(`footerSections.${idx}.type`);
+                          return (
+                            <Card key={field.id} className="p-4 border border-slate-200 shadow-none bg-white rounded-xl space-y-4 relative">
+                              <Box className="flex justify-between items-center">
+                                <FormControl size="small" className="w-[180px]">
+                                  <InputLabel>Section Type</InputLabel>
+                                  <Select
+                                    label="Section Type"
+                                    value={sectionType || 'logos'}
+                                    onChange={(e) => {
+                                      const type = e.target.value;
+                                      setValue(`footerSections.${idx}.type`, type);
+                                      if (type === 'buttons') {
+                                        setValue(`footerSections.${idx}.buttons`, []);
+                                      } else if (type === 'logos') {
+                                        setValue(`footerSections.${idx}.logos`, []);
+                                      } else if (type === 'textWithLogo') {
+                                        setValue(`footerSections.${idx}.text`, 'Funded By');
+                                        setValue(`footerSections.${idx}.image', 'medplat-highres.png`);
+                                        setValue(`footerSections.${idx}.href`, '#');
+                                        setValue(`footerSections.${idx}.alt`, '');
+                                      } else if (type === 'logosWithText') {
+                                        setValue(`footerSections.${idx}.items`, []);
+                                      }
+                                    }}
+                                  >
+                                    <MenuItem value="buttons">Quick Link Buttons</MenuItem>
+                                    <MenuItem value="logos">Partners Logos</MenuItem>
+                                    <MenuItem value="textWithLogo">Single Text & Logo</MenuItem>
+                                    <MenuItem value="logosWithText">Logos side-by-side with Text</MenuItem>
+                                  </Select>
+                                </FormControl>
+                                <IconButton
+                                  size="small"
+                                  color="error"
+                                  onClick={() => removeSection(idx)}
+                                >
+                                  <FontAwesomeIcon icon={faTrash} />
+                                </IconButton>
+                              </Box>
+
+                              <Divider />
+
+                              {/* Rendering section items depending on type */}
+                              {sectionType === 'buttons' && (
+                                <div className="space-y-3">
+                                  <Box className="flex justify-between items-center">
+                                    <Typography variant="subtitle2" className="text-slate-600 font-bold">Buttons list</Typography>
+                                    <Button
+                                      size="small"
+                                      variant="outlined"
+                                      color="primary"
+                                      onClick={() => addSubItem(idx, 'buttons')}
+                                      startIcon={<FontAwesomeIcon icon={faPlus} />}
+                                      className="normal-case rounded-lg"
+                                    >
+                                      Add Button
+                                    </Button>
+                                  </Box>
+                                  {(watch(`footerSections.${idx}.buttons`) || []).map((btn, btnIdx) => (
+                                    <Box key={btnIdx} className="flex flex-wrap items-center gap-3 p-3 bg-slate-50 rounded-lg border border-slate-100">
+                                      <FormControl size="small" className="w-[120px]">
+                                        <InputLabel>Icon</InputLabel>
+                                        <Select
+                                          label="Icon"
+                                          value={btn.icon || ''}
+                                          onChange={(e) => setValue(`footerSections.${idx}.buttons.${btnIdx}.icon`, e.target.value || null)}
+                                        >
+                                          <MenuItem value="">None</MenuItem>
+                                          <MenuItem value="PERSON">Person</MenuItem>
+                                          <MenuItem value="MEDICAL">Medical</MenuItem>
+                                          <MenuItem value="PASSPORT">Passport</MenuItem>
+                                        </Select>
+                                      </FormControl>
+                                       <TextField
+                                         {...register(`footerSections.${idx}.buttons.${btnIdx}.text`)}
+                                         label="Button Text"
+                                         size="small"
+                                         className="flex-1 min-w-[140px]"
+                                         InputLabelProps={{ shrink: true }}
+                                       />
+                                       <TextField
+                                         {...register(`footerSections.${idx}.buttons.${btnIdx}.href`)}
+                                         label="Link (Href)"
+                                         size="small"
+                                         className="flex-1 min-w-[180px]"
+                                         InputLabelProps={{ shrink: true }}
+                                       />
+                                      <IconButton size="small" color="error" onClick={() => removeSubItem(idx, 'buttons', btnIdx)}>
+                                        <FontAwesomeIcon icon={faTrash} />
+                                      </IconButton>
+                                    </Box>
+                                  ))}
+                                </div>
+                              )}
+
+                              {sectionType === 'logos' && (
+                                <div className="space-y-3">
+                                  <Box className="flex justify-between items-center">
+                                    <Typography variant="subtitle2" className="text-slate-600 font-bold">Logos list</Typography>
+                                    <Button
+                                      size="small"
+                                      variant="outlined"
+                                      color="primary"
+                                      onClick={() => addSubItem(idx, 'logos')}
+                                      startIcon={<FontAwesomeIcon icon={faPlus} />}
+                                      className="normal-case rounded-lg"
+                                    >
+                                      Add Logo
+                                    </Button>
+                                  </Box>
+                                  {(watch(`footerSections.${idx}.logos`) || []).map((logo, logoIdx) => (
+                                    <Box key={logoIdx} className="flex flex-wrap items-center gap-3 p-3 bg-slate-50 rounded-lg border border-slate-100">
+                                      <FormControl size="small" className="w-[180px]">
+                                        <InputLabel>Logo Image</InputLabel>
+                                        <Select
+                                          label="Logo Image"
+                                          value={logo.image || ''}
+                                          onChange={(e) => setValue(`footerSections.${idx}.logos.${logoIdx}.image`, e.target.value)}
+                                        >
+                                          {Object.keys(imageMap).map((key) => (
+                                            <MenuItem key={key} value={key}>{key}</MenuItem>
+                                          ))}
+                                        </Select>
+                                      </FormControl>
+                                       <TextField
+                                         {...register(`footerSections.${idx}.logos.${logoIdx}.href`)}
+                                         label="Link (Href)"
+                                         size="small"
+                                         className="flex-1 min-w-[140px]"
+                                         InputLabelProps={{ shrink: true }}
+                                       />
+                                       <TextField
+                                         {...register(`footerSections.${idx}.logos.${logoIdx}.alt`)}
+                                         label="Alt Tag"
+                                         size="small"
+                                         className="flex-1 min-w-[120px]"
+                                         InputLabelProps={{ shrink: true }}
+                                       />
+                                      <IconButton size="small" color="error" onClick={() => removeSubItem(idx, 'logos', logoIdx)}>
+                                        <FontAwesomeIcon icon={faTrash} />
+                                      </IconButton>
+                                    </Box>
+                                  ))}
+                                </div>
+                              )}
+
+                              {sectionType === 'textWithLogo' && (
+                                <Grid container spacing={2}>
+                                   <Grid item xs={12} sm={6}>
+                                     <TextField
+                                       {...register(`footerSections.${idx}.text`)}
+                                       label="Leading Text"
+                                       size="small"
+                                       fullWidth
+                                       InputLabelProps={{ shrink: true }}
+                                     />
+                                   </Grid>
+                                  <Grid item xs={12} sm={6}>
+                                    <FormControl fullWidth size="small">
+                                      <InputLabel>Logo Image</InputLabel>
+                                      <Select
+                                        label="Logo Image"
+                                        value={watch(`footerSections.${idx}.image`) || ''}
+                                        onChange={(e) => setValue(`footerSections.${idx}.image`, e.target.value)}
+                                      >
+                                        {Object.keys(imageMap).map((key) => (
+                                          <MenuItem key={key} value={key}>{key}</MenuItem>
+                                        ))}
+                                      </Select>
+                                    </FormControl>
+                                  </Grid>
+                                  <Grid item xs={12} sm={6}>
+                                    <TextField
+                                      {...register(`footerSections.${idx}.href`)}
+                                      label="Link (Href)"
+                                      size="small"
+                                      fullWidth
+                                      InputLabelProps={{ shrink: true }}
+                                    />
+                                  </Grid>
+                                  <Grid item xs={12} sm={6}>
+                                    <TextField
+                                      label="Alt Tag"
+                                      size="small"
+                                      fullWidth
+                                      value={watch(`footerSections.${idx}.alt`) || ''}
+                                      onChange={(e) => setValue(`footerSections.${idx}.alt`, e.target.value)}
+                                    />
+                                  </Grid>
+                                </Grid>
+                              )}
+
+                              {sectionType === 'logosWithText' && (
+                                <div className="space-y-3">
+                                  <Box className="flex justify-between items-center">
+                                    <Typography variant="subtitle2" className="text-slate-600 font-bold">Items list</Typography>
+                                    <Button
+                                      size="small"
+                                      variant="outlined"
+                                      color="primary"
+                                      onClick={() => addSubItem(idx, 'logosWithText')}
+                                      startIcon={<FontAwesomeIcon icon={faPlus} />}
+                                      className="normal-case rounded-lg"
+                                    >
+                                      Add Item
+                                    </Button>
+                                  </Box>
+                                  {(watch(`footerSections.${idx}.items`) || []).map((item, itemIdx) => (
+                                    <Box key={itemIdx} className="flex flex-wrap items-center gap-3 p-3 bg-slate-50 rounded-lg border border-slate-100">
+                                      <FormControl size="small" className="w-[180px]">
+                                        <InputLabel>Image</InputLabel>
+                                        <Select
+                                          label="Image"
+                                          value={item.image || ''}
+                                          onChange={(e) => setValue(`footerSections.${idx}.items.${itemIdx}.image`, e.target.value)}
+                                        >
+                                          {Object.keys(imageMap).map((key) => (
+                                            <MenuItem key={key} value={key}>{key}</MenuItem>
+                                          ))}
+                                        </Select>
+                                      </FormControl>
+                                      <TextField
+                                        label="Label Text"
+                                        size="small"
+                                        className="flex-1 min-w-[120px]"
+                                        value={item.text || ''}
+                                        onChange={(e) => setValue(`footerSections.${idx}.items.${itemIdx}.text`, e.target.value)}
+                                      />
+                                      <TextField
+                                        label="Link (Href)"
+                                        size="small"
+                                        className="flex-1 min-w-[120px]"
+                                        value={item.href || ''}
+                                        onChange={(e) => setValue(`footerSections.${idx}.items.${itemIdx}.href`, e.target.value)}
+                                      />
+                                      <TextField
+                                        label="Alt Tag"
+                                        size="small"
+                                        className="flex-1 min-w-[100px]"
+                                        value={item.alt || ''}
+                                        onChange={(e) => setValue(`footerSections.${idx}.items.${itemIdx}.alt`, e.target.value)}
+                                      />
+                                      <IconButton size="small" color="error" onClick={() => removeSubItem(idx, 'logosWithText', itemIdx)}>
+                                        <FontAwesomeIcon icon={faTrash} />
+                                      </IconButton>
+                                    </Box>
+                                  ))}
+                                </div>
+                              )}
+                            </Card>
+                          );
+                        })}
+                      </div>
+                    )}
+                  </Paper>
+
+                  {/* Bottom Logos */}
+                  <Paper className="p-5 rounded-xl border border-slate-200/80 shadow-none space-y-4">
+                    <Box className="flex justify-between items-center border-b pb-2">
+                      <Typography className="text-slate-800 font-bold text-lg">
+                        Bottom Logos (Below divider)
+                      </Typography>
+                      <Button
+                        size="small"
+                        variant="outlined"
+                        onClick={() => appendBottomLogo({ image: 'medplat-highres.png', href: '#', alt: 'Medplat Logo' })}
+                        startIcon={<FontAwesomeIcon icon={faPlus} />}
+                        className="normal-case rounded-lg"
+                      >
+                        Add Bottom Logo
+                      </Button>
+                    </Box>
+
+                    {bottomLogoFields.length === 0 ? (
+                      <Box className="text-center py-6 text-slate-400">
+                        No bottom logos. Click "Add Bottom Logo" to create one.
+                      </Box>
+                    ) : (
+                      <div className="space-y-3">
+                        {bottomLogoFields.map((field, idx) => (
+                          <Box key={field.id} className="flex flex-wrap items-center gap-3 p-3 bg-slate-50 rounded-lg border border-slate-100">
+                            <FormControl size="small" className="w-[180px]">
+                              <InputLabel>Image</InputLabel>
+                              <Select
+                                label="Image"
+                                value={watch(`bottomLogos.${idx}.image`) || ''}
+                                onChange={(e) => setValue(`bottomLogos.${idx}.image`, e.target.value)}
+                              >
+                                {Object.keys(imageMap).map((key) => (
+                                  <MenuItem key={key} value={key}>{key}</MenuItem>
+                                ))}
+                              </Select>
+                            </FormControl>
+                            <TextField
+                              label="Link (Href)"
+                              size="small"
+                              className="flex-1 min-w-[140px]"
+                              value={watch(`bottomLogos.${idx}.href`) || ''}
+                              onChange={(e) => setValue(`bottomLogos.${idx}.href`, e.target.value)}
+                            />
+                            <TextField
+                              label="Alt Tag"
+                              size="small"
+                              className="flex-1 min-w-[120px]"
+                              value={watch(`bottomLogos.${idx}.alt`) || ''}
+                              onChange={(e) => setValue(`bottomLogos.${idx}.alt`, e.target.value)}
+                            />
+                            <IconButton size="small" color="error" onClick={() => removeBottomLogo(idx)}>
+                              <FontAwesomeIcon icon={faTrash} />
+                            </IconButton>
+                          </Box>
+                        ))}
+                      </div>
+                    )}
+                  </Paper>
+                </form>
+              ) : (
+                /* Raw JSON View */
+                <Box className="h-full flex flex-col">
+                  <Box className="flex-1 bg-slate-900 text-slate-200 p-4 rounded-xl font-mono text-sm overflow-auto max-h-[500px]">
+                    <pre>{JSON.stringify(currentValues, null, 2)}</pre>
+                  </Box>
+                  <Typography variant="caption" className="text-slate-400 mt-2 block">
+                    Copy this JSON structure to paste inside `app.constant.js` for hardcoding deployment values.
+                  </Typography>
+                </Box>
+              )}
+            </Box>
+          </Card>
+        </Grid>
+
+        {/* Right column live preview */}
+        <Grid item xs={12} lg={5}>
+          <Card className="rounded-2xl shadow-sm border border-slate-200 h-[calc(100vh-190px)] flex flex-col overflow-hidden bg-slate-100">
+            <Box className="border-b border-slate-200 bg-white flex justify-between items-center px-4 py-2">
+              <Typography className="text-slate-700 font-extrabold text-sm tracking-wider flex items-center gap-2">
+                <FontAwesomeIcon icon={faEye} className="text-indigo-600" />
+                Live Preview
+              </Typography>
+              <Box className="flex gap-2">
+                <Button
+                  size="small"
+                  variant={previewDevice === 'desktop' ? 'contained' : 'outlined'}
+                  onClick={() => setPreviewDevice('desktop')}
+                  className={`rounded-lg py-1 px-3 normal-case ${previewDevice === 'desktop' ? 'bg-indigo-600 text-white' : 'text-indigo-600 border-indigo-200'}`}
+                  startIcon={<FontAwesomeIcon icon={faDesktop} />}
+                >
+                  Desktop
+                </Button>
+                <Button
+                  size="small"
+                  variant={previewDevice === 'mobile' ? 'contained' : 'outlined'}
+                  onClick={() => setPreviewDevice('mobile')}
+                  className={`rounded-lg py-1 px-3 normal-case ${previewDevice === 'mobile' ? 'bg-indigo-600 text-white' : 'text-indigo-600 border-indigo-200'}`}
+                  startIcon={<FontAwesomeIcon icon={faMobileAlt} />}
+                >
+                  Mobile
+                </Button>
+              </Box>
+            </Box>
+
+            {/* Container for simulation mockup */}
+            <Box className="flex-1 flex items-center justify-center p-4 overflow-hidden bg-slate-100/50">
+              <Box
+                ref={containerRef}
+                className="transition-all duration-300 bg-slate-200 rounded-2xl overflow-hidden border-4 border-slate-300 shadow-lg"
+                style={{
+                  width: targetWidth * scale,
+                  height: targetHeight * scale,
+                  position: 'relative',
+                }}
+              >
+                {/* Simulated Screen */}
+                <Box
+                  className="bg-slate-100 select-none"
+                  style={{
+                    width: targetWidth,
+                    height: targetHeight,
+                    transform: `scale(${scale})`,
+                    transformOrigin: 'top left',
+                    position: 'absolute',
+                    top: 0,
+                    left: 0,
+                    fontSize: '0.8rem',
+                  }}
+                >
+                  {currentValues.centerLogin || previewDevice === 'mobile' ? (
+                    /* Centered Card Layout */
+                    <Box className="w-full h-full flex items-center justify-center bg-slate-50 p-6 overflow-y-auto">
+                      <Paper className="rounded-xl p-5 w-full max-w-sm shadow-md border border-slate-200">
+                        {renderPreviewForm(currentValues)}
+                      </Paper>
+                    </Box>
+                  ) : (
+                    /* Split Layout */
+                    <Box className="w-full h-full flex overflow-hidden">
+                      {/* Left image */}
+                      <Box className="flex-1 bg-slate-300 relative overflow-hidden">
+                        <img
+                          src={imageMap[currentValues.implementationImage]}
+                          alt=""
+                          className="w-full h-full object-cover"
+                        />
+                      </Box>
+                      {/* Right form panel */}
+                      <Box className="w-1/2 bg-slate-50 overflow-y-auto p-6 flex flex-col justify-center">
+                        {renderPreviewForm(currentValues)}
+                      </Box>
+                    </Box>
+                  )}
+                </Box>
+              </Box>
+            </Box>
+          </Card>
+        </Grid>
+      </Grid>
+    </Box>
+  );
+}
+
+// Function to render mockup preview forms
+function renderPreviewForm(config) {
+  return (
+    <Box className="flex flex-col items-center w-full">
+      {/* Brand logo */}
+      {config.brandLogo && (
+        <img
+          src={imageMap[config.brandLogo]}
+          alt="Brand Logo"
+          className="h-10 w-auto mb-3 object-contain"
+        />
+      )}
+
+      {/* Divider */}
+      <Box className="flex items-center w-full my-2">
+        <Divider className="flex-1" />
+        <Typography className="px-2 text-xs font-semibold text-slate-500">
+          LOGIN
+        </Typography>
+        <Divider className="flex-1" />
+      </Box>
+
+      {/* Fields */}
+      <Box className="w-full space-y-2 mt-2">
+        <TextField
+          disabled
+          value="admin"
+          size="small"
+          fullWidth
+          className={config.inputFieldClass}
+          variant="outlined"
+          label="Username"
+          InputProps={{ style: { fontSize: '0.8rem' } }}
+        />
+        <TextField
+          disabled
+          type="password"
+          value="••••••••"
+          size="small"
+          fullWidth
+          className={config.inputFieldClass}
+          variant="outlined"
+          label="Password"
+          InputProps={{ style: { fontSize: '0.8rem' } }}
+        />
+      </Box>
+
+      {/* Login Button */}
+      <Button
+        disabled
+        variant="contained"
+        fullWidth
+        className={`mt-4 py-1.5 text-xs font-semibold rounded-full text-white shadow-none ${config.submitButtonClass || 'bg-blue-600'}`}
+        style={{ pointerEvents: 'none' }}
+      >
+        LOGIN
+      </Button>
+
+      {/* Forgot password */}
+      <Typography variant="caption" className="text-blue-500 mt-2 hover:underline cursor-pointer">
+        Forgot Password?
+      </Typography>
+
+      {/* Download app link */}
+      {config.isDownloadLink && (
+        <Typography variant="caption" className="text-blue-500 mt-1 hover:underline cursor-pointer flex items-center gap-1 font-medium">
+          <span className="text-red-500 font-bold">(New)</span>
+          <FontAwesomeIcon icon={faDownload} size="xs" />
+          Download Mobile App
+        </Typography>
+      )}
+
+      {/* Footer sections */}
+      {config.footerSections && config.footerSections.length > 0 && (
+        <Box className="w-full mt-4 space-y-3">
+          {config.footerSections.map((section, idx) => {
+            const isButtons = section.type === 'buttons';
+            const showDivider = idx === 0 || (idx > 0 && config.footerSections[idx - 1].type !== 'buttons');
+
+            return (
+              <Box key={idx} className="w-full flex flex-col items-center">
+                {showDivider && <Divider className="w-full my-1 opacity-60" />}
+
+                {section.type === 'buttons' && (
+                  <Box className="flex justify-between gap-2 mt-2 w-full">
+                    {(section.buttons || []).map((btn, btnIdx) => {
+                      const icon = iconMap[btn.icon];
+                      return (
+                        <Box
+                          key={btnIdx}
+                          className="flex-1 flex flex-col items-center justify-center py-2 bg-slate-100 rounded-xl border border-slate-200 cursor-pointer"
+                        >
+                          {icon && <FontAwesomeIcon icon={icon} className="text-[#00685b] mb-1" />}
+                          <Typography style={{ fontSize: '0.65rem' }} className="font-extrabold text-[#00685b] uppercase text-center tracking-tight">
+                            {btn.text}
+                          </Typography>
+                        </Box>
+                      );
+                    })}
+                  </Box>
+                )}
+
+                {section.type === 'logos' && (
+                  <Box className="w-full mt-2 flex items-center justify-center gap-3">
+                    {(section.logos || []).map((logo, logoIdx) => {
+                      const isMedplat = logo.image === 'medplat-highres.png';
+                      const showDividerFlag = isMedplat && logoIdx > 0 && section.logos[logoIdx - 1].image !== 'medplat-highres.png' && config.showLogoDivider;
+                      return (
+                        <React.Fragment key={logoIdx}>
+                          {showDividerFlag && <Divider orientation="vertical" flexItem className="h-4 mx-0.5" />}
+                          <img
+                            src={imageMap[logo.image]}
+                            alt={logo.alt}
+                            className={config.logoHeightClass || 'h-6 w-auto object-contain'}
+                          />
+                        </React.Fragment>
+                      );
+                    })}
+                  </Box>
+                )}
+
+                {section.type === 'textWithLogo' && (
+                  <Box className="w-full mt-2 flex items-center justify-center gap-1">
+                    <span className="text-[10px] text-slate-500 font-medium">{section.text}</span>
+                    <img src={imageMap[section.image]} alt={section.alt} className="h-6 w-auto object-contain" />
+                  </Box>
+                )}
+
+                {section.type === 'logosWithText' && (
+                  <Box className="w-full mt-2 flex items-center justify-center gap-2">
+                    {(section.items || []).map((item, itemIdx) => (
+                      <Box key={itemIdx} className="flex items-center gap-1">
+                        <img src={imageMap[item.image]} alt={item.alt} className="h-5 w-auto object-contain" />
+                        {item.text && <span style={{ fontSize: '7px' }} className="text-slate-500">{item.text}</span>}
+                      </Box>
+                    ))}
+                  </Box>
+                )}
+              </Box>
+            );
+          })}
+        </Box>
+      )}
+
+      {/* Bottom Logos */}
+      {config.bottomLogos && config.bottomLogos.length > 0 && (
+        <Box className="w-full mt-3 flex flex-col items-center">
+          <Divider className="w-full my-1" />
+          <Box className="flex items-center gap-2 mt-1">
+            {config.bottomLogos.map((logo, idx) => (
+              <img
+                key={idx}
+                src={imageMap[logo.image]}
+                alt={logo.alt}
+                className="h-6 w-auto object-contain"
+              />
+            ))}
+          </Box>
+        </Box>
+      )}
+    </Box>
+  );
+}