@argusoft/medplat-app-shell 1.0.6 → 1.0.7

package/src/views/feature-components/Onboarding/Onboarding.jsx

@@ -0,0 +1,1400 @@
+import React, { useState } from 'react';
+import PropTypes from 'prop-types';
+import {
+  Box,
+  Typography,
+  Stack,
+  ButtonBase,
+  Stepper,
+  Step,
+  StepLabel,
+  StepConnector,
+  stepConnectorClasses,
+  useMediaQuery,
+  Modal,
+  TextField,
+  IconButton,
+  Tooltip,
+  Button,
+} from '@mui/material';
+import { styled } from '@mui/material/styles';
+import { useNavigate, useSearchParams } from 'react-router-dom';
+import { useTheme } from '@mui/system';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import {
+  faRocket,
+  faCheck,
+  faCogs,
+  faTimes,
+  faInfoCircle,
+  faThumbsUp,
+  faDownload,
+  faUpload,
+  faFileExcel,
+} from '@fortawesome/free-solid-svg-icons';
+import { useSelector } from 'react-redux';
+
+// --- Custom Styled Connector ---
+const QontoConnector = styled(StepConnector)(({ theme }) => ({
+  [`&.${stepConnectorClasses.alternativeLabel}`]: {
+    top: 10,
+    left: 'calc(-50% + 16px)',
+    right: 'calc(50% + 16px)',
+  },
+  [`&.${stepConnectorClasses.active}`]: {
+    [`& .${stepConnectorClasses.line}`]: {
+      borderColor: theme.palette.primary.main,
+    },
+  },
+  [`&.${stepConnectorClasses.completed}`]: {
+    [`& .${stepConnectorClasses.line}`]: {
+      borderColor: theme.palette.primary.main,
+    },
+  },
+  [`& .${stepConnectorClasses.line}`]: {
+    borderColor: theme.palette.mode === 'dark' ? 'rgba(255,255,255,0.2)' : 'rgba(0,0,0,0.1)',
+    borderTopWidth: 3,
+    borderRadius: 1,
+    // Vertical styles
+    minHeight: 24,
+    borderLeftWidth: 3,
+  },
+}));
+
+// --- Custom Step Icon ---
+const QontoStepIcon = (props) => {
+  const { active, completed, className } = props;
+  const theme = useTheme();
+
+  return (
+    <Box
+      className={className}
+      sx={{
+        zIndex: 1,
+        color: '#fff',
+        width: 24,
+        height: 24,
+        display: 'flex',
+        borderRadius: '50%',
+        justifyContent: 'center',
+        alignItems: 'center',
+        ...(active && {
+          bgcolor: 'primary.main',
+          boxShadow: `0 0 0 4px ${theme.palette.mode === 'dark' ? 'rgba(59, 130, 246, 0.2)' : 'rgba(25, 118, 210, 0.15)'}`,
+          transform: 'scale(1.1)',
+        }),
+        ...(completed && {
+          bgcolor: 'primary.main',
+          color: '#fff',
+        }),
+        ...(!active &&
+          !completed && {
+            bgcolor: theme.palette.mode === 'dark' ? 'rgba(255,255,255,0.15)' : 'rgba(0,0,0,0.1)',
+          }),
+      }}
+    >
+      {completed ? <FontAwesomeIcon icon={faCheck} style={{ fontSize: 10 }} /> : null}
+      {active && !completed ? <Box sx={{ width: 8, height: 8, borderRadius: '50%', bgcolor: '#fff' }} /> : null}
+    </Box>
+  );
+};
+
+QontoStepIcon.propTypes = {
+  active: PropTypes.bool,
+  completed: PropTypes.bool,
+  className: PropTypes.string,
+};
+
+export default function MedplatOnboardingSplit() {
+  const [searchParams, setSearchParams] = useSearchParams();
+  const step = searchParams.get('step') || 'intro';
+  const setStep = (value) => searchParams.get('step') !== value && setSearchParams({ step: value });
+
+  const theme = useTheme();
+  const navigate = useNavigate();
+  const { user } = useSelector((state) => state.Authenticate);
+  const isDark = theme.palette.mode === 'dark';
+  const isMobile = useMediaQuery(theme.breakpoints.down('md'));
+
+  // Location Hierarchy Modal State
+  const [locationModalOpen, setLocationModalOpen] = useState(false);
+  const [successModalOpen, setSuccessModalOpen] = useState(false);
+  const [downloadTemplateModalOpen, setDownloadTemplateModalOpen] = useState(false);
+  const [uploadDataModalOpen, setUploadDataModalOpen] = useState(false);
+  const [hierarchyLevels, setHierarchyLevels] = useState(1);
+  const [levelNames, setLevelNames] = useState({
+    1: 'State',
+  });
+
+  // File upload states
+  const [locationsFile, setLocationsFile] = useState(null);
+  const [facilitiesFile, setFacilitiesFile] = useState(null);
+
+  // Track completed steps
+  const [completedSteps, setCompletedSteps] = useState(new Set());
+  const totalSteps = 7; // Total number of steps in the checklist
+  const progressPercentage = Math.round((completedSteps.size / totalSteps) * 100);
+
+  // Improved Steps Data
+  const steps = [
+    { id: 'intro', label: 'Welcome', description: 'Introduction' },
+    { id: 'select-setup-type', label: 'Method', description: 'Choose approach' },
+    { id: 'setup', label: 'Setup', description: 'Configuration' },
+  ];
+
+  // Map current URL step to index
+  const getActiveStep = (currentStep) => {
+    if (currentStep === 'intro') return 0;
+    if (currentStep === 'select-setup-type') return 1;
+    if (['quick-setup', 'advanced-setup'].includes(currentStep)) return 2;
+    return 0;
+  };
+
+  const activeStep = getActiveStep(step);
+
+  // Handle click on step
+  const handleStepClick = (index) => {
+    // Only allow clicking if we've "reached" that step logically or want to go back
+    // For this demo, we allow free navigation to previous steps or immediate next
+    if (index === 0) setStep('intro');
+    if (index === 1) setStep('select-setup-type');
+    if (index === 2) setStep('quick-setup'); // Default to quick setup if clicking the step manually
+  };
+
+  return (
+    <Box
+      sx={{
+        minHeight: { xs: '100%', md: '85vh', lg: '85vh' },
+        width: '100%',
+        minWidth: '60vw !important',
+        // position: 'fixed', // Fix to viewport
+        // top: 0,
+        // left: 0,
+        // bgcolor: isDark ? '#0F172A' : '#F4F5F7', // Professional background
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+        // overflow: 'hidden',
+        paddingTop: '1rem',
+      }}
+    >
+      <Box
+        sx={{
+          width: { xs: '100%', md: '85%', lg: '75%' },
+          // maxWidth: 1200,
+          height: { xs: '100%', md: '85vh', lg: '85vh' },
+          display: 'flex',
+          flexDirection: { xs: 'column', md: 'row' },
+          gap: 0,
+          bgcolor: isDark ? '#1E293B' : '#FFFFFF',
+          borderRadius: 2,
+          boxShadow: isDark ? '0 4px 20px rgba(0,0,0,0.4)' : '0 4px 20px rgba(0,0,0,0.08)',
+          overflow: 'hidden',
+          border: isDark ? '1px solid #334155' : '1px solid #E2E8F0',
+        }}
+      >
+        {/* Left Sidebar - Navigation & Context */}
+        <Box
+          sx={{
+            width: { xs: '100%', md: '320px', lg: '320px' },
+            flexShrink: 0,
+            bgcolor: isDark ? '#0F172A' : '#FAFBFC',
+            borderRight: isDark ? '1px solid #334155' : '1px solid #E2E8F0',
+            p: 4,
+            display: 'flex',
+            flexDirection: 'column',
+          }}
+        >
+          <Box sx={{ mb: 6 }}>
+            <Typography
+              variant="h6"
+              sx={{
+                fontWeight: 700,
+                color: theme.palette.primary.main,
+                mb: 1,
+                letterSpacing: '-0.01em',
+              }}
+            >
+              MEDplat
+            </Typography>
+            <Typography variant="body2" color="text.secondary">
+              Setup Wizard
+            </Typography>
+          </Box>
+
+          <Box sx={{ flex: 1, width: '100%' }}>
+            <Stepper
+              activeStep={activeStep}
+              orientation={isMobile ? 'horizontal' : 'vertical'}
+              connector={<QontoConnector />}
+              alternativeLabel={isMobile}
+              sx={{
+                '& .MuiStepLabel-root': {
+                  padding: isMobile ? '8px 0' : '12px 0',
+                  cursor: 'pointer',
+                },
+                '& .MuiStepLabel-label': {
+                  fontWeight: 500,
+                  color: 'text.secondary',
+                  fontSize: isMobile ? 12 : 14,
+                  '&.Mui-active': {
+                    color: 'text.primary',
+                    fontWeight: 600,
+                  },
+                  '&.Mui-completed': {
+                    color: 'text.primary',
+                  },
+                },
+              }}
+            >
+              {steps.map((s, index) => (
+                <Step key={s.id} onClick={() => handleStepClick(index)}>
+                  <StepLabel StepIconComponent={QontoStepIcon}>{s.label}</StepLabel>
+                </Step>
+              ))}
+            </Stepper>
+          </Box>
+
+          <Box>
+            <Typography variant="caption" color="text.secondary" sx={{ display: 'block', mt: 2 }}>
+              Need help?{' '}
+              <Box component="span" sx={{ color: 'primary.main', cursor: 'pointer' }}>
+                Contact Support
+              </Box>
+            </Typography>
+          </Box>
+        </Box>
+
+        {/* Right Content Area */}
+        <Box
+          sx={{
+            flex: 1,
+            display: 'flex',
+            flexDirection: 'column',
+            overflow: 'hidden',
+            position: 'relative',
+          }}
+        >
+          <Box
+            sx={{
+              flex: 1,
+              overflowY: 'auto',
+              p: { xs: 3, md: 6 },
+              display: 'flex',
+              flexDirection: 'column',
+              justifyContent: step === 'quick-setup' || step === 'advanced-setup' ? 'flex-start' : 'center',
+              alignItems: 'center',
+              height: '100%',
+            }}
+          >
+            <Box sx={{ width: '100%', maxWidth: 600 }}>
+              {/* Intro */}
+              {step === 'intro' && (
+                <Box sx={{ animation: 'fadeIn 0.4s ease-out' }}>
+                  <Typography variant="h4" sx={{ fontWeight: 700, mb: 2, color: 'text.primary' }}>
+                    Welcome, {user?.name || 'User'}
+                  </Typography>
+                  <Typography variant="body1" color="text.secondary" sx={{ mb: 4, fontSize: 16, lineHeight: 1.6 }}>
+                    Let&apos;s get your workspace ready. We&apos;ll guide you through setting up your organization
+                    structure and permissions.
+                  </Typography>
+
+                  <ButtonBase
+                    onClick={() => setStep('select-setup-type')}
+                    sx={{
+                      bgcolor: 'primary.main',
+                      color: '#fff',
+                      px: 4,
+                      py: 1.5,
+                      borderRadius: 1,
+                      fontWeight: 600,
+                      fontSize: 15,
+                      transition: 'all 0.2s',
+                      '&:hover': {
+                        bgcolor: 'primary.dark',
+                        transform: 'translateY(-1px)',
+                        boxShadow: '0 4px 12px rgba(0,0,0,0.1)',
+                      },
+                    }}
+                  >
+                    Get Started
+                  </ButtonBase>
+                </Box>
+              )}
+
+              {/* Select Setup */}
+              {step === 'select-setup-type' && (
+                <Box sx={{ animation: 'fadeIn 0.4s ease-out' }}>
+                  <Typography variant="h5" sx={{ fontWeight: 700, mb: 1, color: 'text.primary' }}>
+                    Choose your path
+                  </Typography>
+                  <Typography variant="body1" color="text.secondary" sx={{ mb: 4 }}>
+                    Select how you want to configure your environment.
+                  </Typography>
+
+                  <Stack spacing={2}>
+                    <ButtonBase
+                      onClick={() => setStep('quick-setup')}
+                      sx={{
+                        width: '100%',
+                        textAlign: 'left',
+                        p: 3,
+                        borderRadius: 2,
+                        border: '1px solid',
+                        borderColor: isDark ? 'rgba(255,255,255,0.1)' : 'divider',
+                        bgcolor: isDark ? 'rgba(255,255,255,0.02)' : '#fff',
+                        transition: 'all 0.2s',
+                        '&:hover': {
+                          borderColor: 'primary.main',
+                          bgcolor: isDark ? 'rgba(59,130,246,0.05)' : '#F8FAFC',
+                          boxShadow: '0 4px 12px rgba(0,0,0,0.05)',
+                        },
+                      }}
+                    >
+                      <Stack direction="row" spacing={2} alignItems="flex-start">
+                        <Box
+                          sx={{
+                            mt: 0.5,
+                            p: 1,
+                            borderRadius: 1,
+                            bgcolor: isDark ? 'rgba(59,130,246,0.2)' : '#EFF6FF',
+                            color: 'primary.main',
+                          }}
+                        >
+                          <FontAwesomeIcon icon={faRocket} />
+                        </Box>
+                        <Box>
+                          <Typography variant="subtitle1" sx={{ fontWeight: 600, mb: 0.5 }}>
+                            Quick Setup
+                          </Typography>
+                          <Typography variant="body2" color="text.secondary">
+                            Use recommended defaults for a fast start. Perfect for new accounts.
+                          </Typography>
+                        </Box>
+                      </Stack>
+                    </ButtonBase>
+
+                    <ButtonBase
+                      disabled
+                      onClick={() => setStep('advanced-setup')}
+                      sx={{
+                        width: '100%',
+                        textAlign: 'left',
+                        p: 3,
+                        borderRadius: 2,
+                        border: '1px solid',
+                        borderColor: isDark ? 'rgba(255,255,255,0.1)' : 'divider',
+                        bgcolor: isDark ? 'rgba(255,255,255,0.02)' : '#fff',
+                        transition: 'all 0.2s',
+                        '&:hover': {
+                          borderColor: 'primary.main',
+                          bgcolor: isDark ? 'rgba(59,130,246,0.05)' : '#F8FAFC',
+                          boxShadow: '0 4px 12px rgba(0,0,0,0.05)',
+                        },
+                      }}
+                    >
+                      <Stack direction="row" spacing={2} alignItems="flex-start">
+                        <Box
+                          sx={{
+                            mt: 0.5,
+                            p: 1,
+                            borderRadius: 1,
+                            bgcolor: isDark ? 'rgba(100,116,139,0.2)' : '#F1F5F9',
+                            color: 'text.secondary',
+                          }}
+                        >
+                          <FontAwesomeIcon icon={faCogs} />
+                        </Box>
+                        <Box>
+                          <Typography variant="subtitle1" sx={{ fontWeight: 600, mb: 0.5 }}>
+                            Advanced Configuration
+                          </Typography>
+                          <Typography variant="body2" color="text.secondary">
+                            Manually configure locations, roles, and granular permissions.
+                          </Typography>
+                        </Box>
+                      </Stack>
+                    </ButtonBase>
+                  </Stack>
+                </Box>
+              )}
+
+              {/* Quick Setup Checklist */}
+              {step === 'quick-setup' && (
+                <Box sx={{ animation: 'fadeIn 0.4s ease-out' }}>
+                  <Box sx={{ mb: 4 }}>
+                    <ButtonBase
+                      onClick={() => setStep('select-setup-type')}
+                      sx={{ mb: 2, color: 'text.secondary', fontSize: 13, '&:hover': { color: 'primary.main' } }}
+                    >
+                      ← Back
+                    </ButtonBase>
+                    <Typography variant="h5" sx={{ fontWeight: 700, mb: 1, color: 'text.primary' }}>
+                      Setup Checklist
+                    </Typography>
+                    <Typography variant="body1" color="text.secondary">
+                      Complete these steps to finalize your account.
+                    </Typography>
+                  </Box>
+
+                  <Stack spacing={1.5}>
+                    {[
+                      {
+                        title: 'Define location hierarchy',
+                        desc: 'Configure facilities, units, and departments.',
+                        status: 'action',
+                        action: () => setLocationModalOpen(true),
+                      },
+                      {
+                        title: 'Download data template',
+                        desc: 'Download Excel templates for locations and facilities.',
+                        status: 'action',
+                        action: () => setDownloadTemplateModalOpen(true),
+                      },
+                      {
+                        title: 'Upload data',
+                        desc: 'Upload completed Excel files for bulk data import.',
+                        status: 'action',
+                        action: () => setUploadDataModalOpen(true),
+                      },
+                      {
+                        title: 'Add roles',
+                        desc: 'Create role templates that match your team.',
+                        status: 'action',
+                        action: () => navigate('/ui/medplat/manage/role'),
+                      },
+                      {
+                        title: 'Add users',
+                        desc: 'Invite your team and assign them to locations.',
+                        status: 'action',
+                        action: () => navigate('/ui/medplat/manage/users'),
+                      },
+                      {
+                        title: 'Define facility types',
+                        desc: 'Set up different types of facilities.',
+                        status: 'pending',
+                        action: null,
+                      },
+                      {
+                        title: 'Manage System Constraints',
+                        desc: 'Configure system-wide constraints and limits.',
+                        status: 'action',
+                        action: () => navigate('/ui/medplat/form/SYSTEM_CONFIG_SEARCH'),
+                      },
+                    ].map((item, i) => (
+                      <Box
+                        key={i}
+                        onClick={item.action}
+                        sx={{
+                          p: 2,
+                          borderRadius: 1.5,
+                          border: '1px solid',
+                          borderColor: isDark ? 'rgba(255,255,255,0.1)' : 'divider',
+                          bgcolor: isDark ? 'rgba(255,255,255,0.02)' : '#fff',
+                          cursor: item.action ? 'pointer' : 'default',
+                          transition: 'all 0.2s',
+                          '&:hover': item.action
+                            ? {
+                                borderColor: 'primary.main',
+                                bgcolor: isDark ? 'rgba(59,130,246,0.05)' : '#F8FAFC',
+                              }
+                            : {},
+                          display: 'flex',
+                          alignItems: 'center',
+                          gap: 2,
+                        }}
+                      >
+                        <Box
+                          sx={{
+                            width: 24,
+                            height: 24,
+                            borderRadius: '50%',
+                            border: '2px solid',
+                            borderColor: 'divider',
+                            display: 'flex',
+                            alignItems: 'center',
+                            justifyContent: 'center',
+                          }}
+                        >
+                          {/* Checkmark placeholder */}
+                        </Box>
+                        <Box sx={{ flex: 1 }}>
+                          <Typography variant="subtitle2" sx={{ fontWeight: 600 }}>
+                            {item.title}
+                          </Typography>
+                          <Typography variant="caption" color="text.secondary">
+                            {item.desc}
+                          </Typography>
+                        </Box>
+                        {item.action && (
+                          <Typography variant="caption" sx={{ color: 'primary.main', fontWeight: 600 }}>
+                            Start
+                          </Typography>
+                        )}
+                      </Box>
+                    ))}
+                  </Stack>
+                </Box>
+              )}
+
+              {/* Advanced Setup Placeholder */}
+              {step === 'advanced-setup' && (
+                <Box sx={{ animation: 'fadeIn 0.4s ease-out' }}>
+                  <ButtonBase
+                    onClick={() => setStep('select-setup-type')}
+                    sx={{ mb: 2, color: 'text.secondary', fontSize: 13, '&:hover': { color: 'primary.main' } }}
+                  >
+                    ← Back
+                  </ButtonBase>
+                  <Typography variant="h5" sx={{ fontWeight: 700, mb: 1, color: 'text.primary' }}>
+                    Advanced Setup
+                  </Typography>
+                  <Box
+                    sx={{
+                      p: 8,
+                      border: '1px dashed divider',
+                      borderRadius: 2,
+                      textAlign: 'center',
+                      bgcolor: 'background.default',
+                    }}
+                  >
+                    <Typography color="text.secondary">Form Configuration Area</Typography>
+                  </Box>
+                </Box>
+              )}
+            </Box>
+          </Box>
+        </Box>
+      </Box>
+
+      {/* Location Hierarchy Modal */}
+      <Modal
+        open={locationModalOpen}
+        onClose={() => setLocationModalOpen(false)}
+        sx={{
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'center',
+        }}
+      >
+        <Box
+          sx={{
+            width: '90%',
+            maxWidth: '70%',
+            maxHeight: '90vh',
+            bgcolor: isDark ? '#1E293B' : '#FFFFFF',
+            borderRadius: 2,
+            boxShadow: 24,
+            overflow: 'hidden',
+            display: 'flex',
+            flexDirection: 'column',
+          }}
+        >
+          {/* Modal Header */}
+          <Box
+            sx={{
+              p: 3,
+              borderBottom: '1px solid',
+              borderColor: isDark ? '#334155' : '#E2E8F0',
+              display: 'flex',
+              justifyContent: 'space-between',
+              alignItems: 'center',
+            }}
+          >
+            <Typography variant="h6" sx={{ fontWeight: 600 }}>
+              Setting Up The System
+            </Typography>
+            <IconButton onClick={() => setLocationModalOpen(false)} size="small" sx={{ color: 'text.secondary' }}>
+              <FontAwesomeIcon icon={faTimes} />
+            </IconButton>
+          </Box>
+
+          {/* Modal Content */}
+          <Box
+            sx={{
+              flex: 1,
+              overflowY: 'auto',
+              p: 4,
+            }}
+          >
+            <Box sx={{ display: 'flex', gap: 4, flexDirection: { xs: 'column', md: 'row' } }}>
+              {/* Left Side - Form */}
+              <Box sx={{ flex: 1 }}>
+                <Typography variant="h6" sx={{ fontWeight: 600, mb: 3 }}>
+                  Define Location Hierarchy
+                </Typography>
+
+                {/* Number of Levels */}
+                <Box sx={{ mb: 3 }}>
+                  <Typography variant="body2" sx={{ mb: 1, fontWeight: 500 }}>
+                    How many levels of location hierarchy do you have?
+                  </Typography>
+                  <TextField
+                    type="number"
+                    value={hierarchyLevels}
+                    onChange={(e) => {
+                      const value = Math.max(1, Math.min(10, parseInt(e.target.value) || 1));
+                      setHierarchyLevels(value);
+                      // Initialize level names for new levels
+                      const newLevelNames = { ...levelNames };
+                      for (let i = 1; i <= value; i++) {
+                        if (!newLevelNames[i]) {
+                          newLevelNames[i] = `Level ${i}`;
+                        }
+                      }
+                      setLevelNames(newLevelNames);
+                    }}
+                    size="small"
+                    fullWidth
+                    inputProps={{ min: 1, max: 10 }}
+                    sx={{
+                      '& .MuiOutlinedInput-root': {
+                        bgcolor: isDark ? 'rgba(255,255,255,0.05)' : '#F8FAFC',
+                      },
+                    }}
+                  />
+                </Box>
+
+                {/* Dynamic Level Name Inputs */}
+                {Array.from({ length: hierarchyLevels }, (_, i) => i + 1).map((level) => {
+                  // Tooltip messages for each level
+                  const getTooltipMessage = (lvl) => {
+                    if (lvl === 1) {
+                      return 'This is the highest level in the location hierarchy, representing the broadest geographic subdivision. For example, "State" could be the top-level category, comprising of multiple "Regions" of Level 2. Each Level 1 location can contain multiple Level 2 locations.';
+                    }
+                    if (lvl === 2) {
+                      return 'This is the second level in the location hierarchy. For example, "Region" could be Level 2, which falls under a "State" (Level 1). Each Level 2 location can contain multiple Level 3 locations.';
+                    }
+                    if (lvl === 3) {
+                      return 'This is the third level in the location hierarchy. For example, "District" could be Level 3, which falls under a "Region" (Level 2). Each Level 3 location can contain multiple Level 4 locations if applicable.';
+                    }
+                    return 'Define the name for this level in your location hierarchy.';
+                  };
+
+                  return (
+                    <Box key={level} sx={{ mb: 3 }}>
+                      <Box sx={{ display: 'flex', alignItems: 'center', gap: 1, mb: 1 }}>
+                        <Typography variant="body2" sx={{ fontWeight: 500 }}>
+                          What do you call as &quot;Level {level}&quot;?
+                        </Typography>
+                        <Tooltip
+                          title={getTooltipMessage(level)}
+                          arrow
+                          placement="right"
+                          sx={{
+                            '& .MuiTooltip-tooltip': {
+                              maxWidth: 300,
+                              fontSize: 12,
+                              bgcolor: isDark ? '#1E293B' : '#334155',
+                            },
+                          }}
+                        >
+                          <Box sx={{ display: 'flex', alignItems: 'center', cursor: 'help' }}>
+                            <FontAwesomeIcon
+                              icon={faInfoCircle}
+                              style={{ fontSize: 14, color: theme.palette.text.secondary }}
+                            />
+                          </Box>
+                        </Tooltip>
+                      </Box>
+                      <TextField
+                        value={levelNames[level] || ''}
+                        onChange={(e) => setLevelNames({ ...levelNames, [level]: e.target.value })}
+                        size="small"
+                        fullWidth
+                        placeholder={`Level ${level}`}
+                        sx={{
+                          '& .MuiOutlinedInput-root': {
+                            bgcolor: isDark ? 'rgba(255,255,255,0.05)' : '#F8FAFC',
+                          },
+                        }}
+                      />
+                    </Box>
+                  );
+                })}
+              </Box>
+
+              {/* Right Side - Preview */}
+              <Box
+                sx={{
+                  width: { xs: '100%', md: 380 },
+                  p: 3,
+                  border: '1px solid',
+                  borderColor: isDark ? '#334155' : '#E2E8F0',
+                  borderRadius: 2,
+                  bgcolor: isDark ? 'rgba(255,255,255,0.02)' : '#FAFBFC',
+                }}
+              >
+                <Typography variant="subtitle2" sx={{ fontWeight: 600, mb: 3 }}>
+                  Preview
+                </Typography>
+
+                {/* Hierarchical Preview */}
+                <Box sx={{ pl: 2 }}>
+                  {Array.from({ length: hierarchyLevels }, (_, i) => i + 1).map((level) => (
+                    <Box
+                      key={level}
+                      sx={{
+                        mb: 2,
+                        ml: (level - 1) * 2,
+                        position: 'relative',
+                      }}
+                    >
+                      {/* Connecting Line */}
+                      {level > 1 && (
+                        <Box
+                          sx={{
+                            position: 'absolute',
+                            left: -16,
+                            top: -12,
+                            width: 1,
+                            height: 24,
+                            borderLeft: '1px solid',
+                            borderBottom: '1px solid',
+                            borderColor: isDark ? '#475569' : '#CBD5E1',
+                          }}
+                        />
+                      )}
+
+                      {/* Level Box */}
+                      <Box
+                        sx={{
+                          display: 'inline-flex',
+                          alignItems: 'center',
+                          gap: 1,
+                          px: 2,
+                          py: 1,
+                          bgcolor: '#3B82F6',
+                          color: '#fff',
+                          borderRadius: 1,
+                          fontSize: 13,
+                          fontWeight: 500,
+                          position: 'relative',
+                        }}
+                      >
+                        {levelNames[level] || `Level ${level}`}
+                        {level === 1 && (
+                          <Typography
+                            variant="caption"
+                            sx={{
+                              position: 'absolute',
+                              right: -60,
+                              top: -8,
+                              fontSize: 10,
+                              color: 'text.secondary',
+                            }}
+                          >
+                            ↑ Highest
+                          </Typography>
+                        )}
+                        {level === hierarchyLevels && (
+                          <Typography
+                            variant="caption"
+                            sx={{
+                              position: 'absolute',
+                              right: -55,
+                              bottom: -8,
+                              fontSize: 10,
+                              color: 'text.secondary',
+                            }}
+                          >
+                            ↓ Lowest
+                          </Typography>
+                        )}
+                      </Box>
+                    </Box>
+                  ))}
+                </Box>
+              </Box>
+            </Box>
+          </Box>
+
+          {/* Modal Footer */}
+          <Box
+            sx={{
+              p: 3,
+              borderTop: '1px solid',
+              borderColor: isDark ? '#334155' : '#E2E8F0',
+              display: 'flex',
+              justifyContent: 'space-between',
+              gap: 2,
+            }}
+          >
+            <ButtonBase
+              onClick={() => setLocationModalOpen(false)}
+              sx={{
+                px: 3,
+                py: 1.5,
+                borderRadius: 1,
+                border: '1px solid',
+                borderColor: isDark ? '#475569' : '#CBD5E1',
+                fontWeight: 500,
+                fontSize: 14,
+                transition: 'all 0.2s',
+                '&:hover': {
+                  bgcolor: isDark ? 'rgba(255,255,255,0.05)' : '#F8FAFC',
+                },
+              }}
+            >
+              Back
+            </ButtonBase>
+            <ButtonBase
+              onClick={() => {
+                // Handle submit logic here
+                console.log('Hierarchy Levels:', hierarchyLevels);
+                console.log('Level Names:', levelNames);
+                setLocationModalOpen(false);
+                // Mark step as completed
+                setCompletedSteps((prev) => new Set(prev).add('location-hierarchy'));
+                // Show success modal
+                setSuccessModalOpen(true);
+              }}
+              sx={{
+                px: 3,
+                py: 1.5,
+                borderRadius: 1,
+                bgcolor: '#3B82F6',
+                color: '#fff',
+                fontWeight: 500,
+                fontSize: 14,
+                transition: 'all 0.2s',
+                '&:hover': {
+                  bgcolor: '#2563EB',
+                },
+              }}
+            >
+              Submit
+            </ButtonBase>
+          </Box>
+        </Box>
+      </Modal>
+
+      {/* Success Modal */}
+      <Modal
+        open={successModalOpen}
+        onClose={() => setSuccessModalOpen(false)}
+        sx={{
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'center',
+        }}
+      >
+        <Box
+          sx={{
+            width: '90%',
+            maxWidth: 400,
+            bgcolor: isDark ? '#1E293B' : '#FFFFFF',
+            borderRadius: 3,
+            boxShadow: 24,
+            p: 5,
+            textAlign: 'center',
+            position: 'relative',
+          }}
+        >
+          {/* Thumbs Up Icon */}
+          <Box
+            sx={{
+              mb: 3,
+              display: 'flex',
+              justifyContent: 'center',
+            }}
+          >
+            <Box
+              sx={{
+                width: 100,
+                height: 100,
+                borderRadius: '50%',
+                bgcolor: '#60A5FA',
+                display: 'flex',
+                alignItems: 'center',
+                justifyContent: 'center',
+                boxShadow: '0 4px 20px rgba(96, 165, 250, 0.3)',
+              }}
+            >
+              <FontAwesomeIcon icon={faThumbsUp} style={{ fontSize: 50, color: '#FFFFFF' }} />
+            </Box>
+          </Box>
+
+          {/* Good Job! Heading */}
+          <Typography
+            variant="h5"
+            sx={{
+              fontWeight: 700,
+              color: '#60A5FA',
+              mb: 2,
+            }}
+          >
+            Good Job!
+          </Typography>
+
+          {/* Success Message */}
+          <Typography
+            variant="body2"
+            color="text.secondary"
+            sx={{
+              mb: 3,
+              lineHeight: 1.6,
+            }}
+          >
+            You have successfully completed your very first step towards system setup.
+          </Typography>
+
+          {/* Progress Bar */}
+          <Box sx={{ mb: 4 }}>
+            <Box
+              sx={{
+                width: '100%',
+                height: 8,
+                bgcolor: isDark ? '#334155' : '#E5E7EB',
+                borderRadius: 1,
+                overflow: 'hidden',
+              }}
+            >
+              <Box
+                sx={{
+                  width: `${progressPercentage}%`,
+                  height: '100%',
+                  bgcolor: '#60A5FA',
+                  borderRadius: 1,
+                  transition: 'width 0.3s ease',
+                }}
+              />
+            </Box>
+            <Typography variant="caption" color="text.secondary" sx={{ display: 'block', mt: 1, textAlign: 'center' }}>
+              {progressPercentage}%
+            </Typography>
+          </Box>
+
+          {/* Action Buttons */}
+          <Stack direction="row" spacing={2} justifyContent="center">
+            <ButtonBase
+              onClick={() => {
+                setSuccessModalOpen(false);
+                // Logic to choose a step
+              }}
+              sx={{
+                px: 3,
+                py: 1.5,
+                borderRadius: 1,
+                border: '1px solid',
+                borderColor: isDark ? '#475569' : '#CBD5E1',
+                fontWeight: 500,
+                fontSize: 14,
+                transition: 'all 0.2s',
+                '&:hover': {
+                  bgcolor: isDark ? 'rgba(255,255,255,0.05)' : '#F8FAFC',
+                },
+              }}
+            >
+              Choose a step
+            </ButtonBase>
+            <ButtonBase
+              onClick={() => {
+                setSuccessModalOpen(false);
+                // User can now choose next steps from the checklist
+              }}
+              sx={{
+                px: 3,
+                py: 1.5,
+                borderRadius: 1,
+                bgcolor: '#60A5FA',
+                color: '#fff',
+                fontWeight: 500,
+                fontSize: 14,
+                transition: 'all 0.2s',
+                '&:hover': {
+                  bgcolor: '#3B82F6',
+                },
+              }}
+            >
+              Go to next step
+            </ButtonBase>
+          </Stack>
+        </Box>
+      </Modal>
+
+      {/* Download Data Templates Modal */}
+      <Modal
+        open={downloadTemplateModalOpen}
+        onClose={() => setDownloadTemplateModalOpen(false)}
+        sx={{
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'center',
+        }}
+      >
+        <Box
+          sx={{
+            width: '90%',
+            maxWidth: 600,
+            bgcolor: isDark ? '#1E293B' : '#FFFFFF',
+            borderRadius: 2,
+            boxShadow: 24,
+            overflow: 'hidden',
+            display: 'flex',
+            flexDirection: 'column',
+          }}
+        >
+          {/* Modal Header */}
+          <Box
+            sx={{
+              p: 3,
+              borderBottom: '1px solid',
+              borderColor: isDark ? '#334155' : '#E2E8F0',
+              display: 'flex',
+              justifyContent: 'space-between',
+              alignItems: 'center',
+            }}
+          >
+            <Typography variant="h6" sx={{ fontWeight: 600 }}>
+              Setting Up The System
+            </Typography>
+            <IconButton
+              onClick={() => setDownloadTemplateModalOpen(false)}
+              size="small"
+              sx={{ color: 'text.secondary' }}
+            >
+              <FontAwesomeIcon icon={faTimes} />
+            </IconButton>
+          </Box>
+
+          {/* Modal Content */}
+          <Box sx={{ p: 4 }}>
+            <Typography variant="h6" sx={{ fontWeight: 600, mb: 2 }}>
+              Download Data Templates
+            </Typography>
+            <Typography variant="body2" color="text.secondary" sx={{ mb: 3, lineHeight: 1.6 }}>
+              Please download the template excel file for locations and facilities generated based on your defined
+              location hierarchy and facility types, fill the excel file with your data and go to &quot;Upload
+              Data&quot; step to upload the filled excel file to bulk upload records.
+            </Typography>
+
+            {/* Download Links */}
+            <Stack spacing={2} sx={{ mb: 3 }}>
+              <Box
+                sx={{
+                  display: 'flex',
+                  alignItems: 'center',
+                  gap: 1,
+                  p: 2,
+                  borderRadius: 1,
+                  border: '1px solid',
+                  borderColor: isDark ? '#334155' : '#E2E8F0',
+                  bgcolor: isDark ? 'rgba(255,255,255,0.02)' : '#F8FAFC',
+                }}
+              >
+                <FontAwesomeIcon icon={faFileExcel} style={{ fontSize: 20, color: '#10B981' }} />
+                <Typography variant="body2" sx={{ flex: 1, fontWeight: 500 }}>
+                  Locations.xlsx
+                </Typography>
+                <Button
+                  size="small"
+                  startIcon={<FontAwesomeIcon icon={faDownload} />}
+                  onClick={() => {
+                    // Handle download logic
+                    console.log('Downloading Locations.xlsx');
+                  }}
+                  sx={{
+                    textTransform: 'none',
+                    color: 'primary.main',
+                    '&:hover': {
+                      bgcolor: isDark ? 'rgba(59,130,246,0.1)' : 'rgba(59,130,246,0.05)',
+                    },
+                  }}
+                >
+                  Download
+                </Button>
+              </Box>
+
+              <Box
+                sx={{
+                  display: 'flex',
+                  alignItems: 'center',
+                  gap: 1,
+                  p: 2,
+                  borderRadius: 1,
+                  border: '1px solid',
+                  borderColor: isDark ? '#334155' : '#E2E8F0',
+                  bgcolor: isDark ? 'rgba(255,255,255,0.02)' : '#F8FAFC',
+                }}
+              >
+                <FontAwesomeIcon icon={faFileExcel} style={{ fontSize: 20, color: '#10B981' }} />
+                <Typography variant="body2" sx={{ flex: 1, fontWeight: 500 }}>
+                  Facilities.xlsx
+                </Typography>
+                <Button
+                  size="small"
+                  startIcon={<FontAwesomeIcon icon={faDownload} />}
+                  onClick={() => {
+                    // Handle download logic
+                    console.log('Downloading Facilities.xlsx');
+                  }}
+                  sx={{
+                    textTransform: 'none',
+                    color: 'primary.main',
+                    '&:hover': {
+                      bgcolor: isDark ? 'rgba(59,130,246,0.1)' : 'rgba(59,130,246,0.05)',
+                    },
+                  }}
+                >
+                  Download
+                </Button>
+              </Box>
+            </Stack>
+          </Box>
+
+          {/* Modal Footer */}
+          <Box
+            sx={{
+              p: 3,
+              borderTop: '1px solid',
+              borderColor: isDark ? '#334155' : '#E2E8F0',
+              display: 'flex',
+              justifyContent: 'space-between',
+              gap: 2,
+            }}
+          >
+            <ButtonBase
+              onClick={() => setDownloadTemplateModalOpen(false)}
+              sx={{
+                px: 3,
+                py: 1.5,
+                borderRadius: 1,
+                border: '1px solid',
+                borderColor: isDark ? '#475569' : '#CBD5E1',
+                fontWeight: 500,
+                fontSize: 14,
+                transition: 'all 0.2s',
+                '&:hover': {
+                  bgcolor: isDark ? 'rgba(255,255,255,0.05)' : '#F8FAFC',
+                },
+              }}
+            >
+              Back
+            </ButtonBase>
+            <ButtonBase
+              onClick={() => {
+                setDownloadTemplateModalOpen(false);
+                // Mark step as completed
+                setCompletedSteps((prev) => new Set(prev).add('download-template'));
+                setSuccessModalOpen(true);
+              }}
+              sx={{
+                px: 3,
+                py: 1.5,
+                borderRadius: 1,
+                bgcolor: '#60A5FA',
+                color: '#fff',
+                fontWeight: 500,
+                fontSize: 14,
+                transition: 'all 0.2s',
+                '&:hover': {
+                  bgcolor: '#3B82F6',
+                },
+              }}
+            >
+              Next
+            </ButtonBase>
+          </Box>
+        </Box>
+      </Modal>
+
+      {/* Upload Data Modal */}
+      <Modal
+        open={uploadDataModalOpen}
+        onClose={() => setUploadDataModalOpen(false)}
+        sx={{
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'center',
+        }}
+      >
+        <Box
+          sx={{
+            width: '90%',
+            maxWidth: 600,
+            bgcolor: isDark ? '#1E293B' : '#FFFFFF',
+            borderRadius: 2,
+            boxShadow: 24,
+            overflow: 'hidden',
+            display: 'flex',
+            flexDirection: 'column',
+          }}
+        >
+          {/* Modal Header */}
+          <Box
+            sx={{
+              p: 3,
+              borderBottom: '1px solid',
+              borderColor: isDark ? '#334155' : '#E2E8F0',
+              display: 'flex',
+              justifyContent: 'space-between',
+              alignItems: 'center',
+            }}
+          >
+            <Typography variant="h6" sx={{ fontWeight: 600 }}>
+              Setting Up The System
+            </Typography>
+            <IconButton onClick={() => setUploadDataModalOpen(false)} size="small" sx={{ color: 'text.secondary' }}>
+              <FontAwesomeIcon icon={faTimes} />
+            </IconButton>
+          </Box>
+
+          {/* Modal Content */}
+          <Box sx={{ p: 4 }}>
+            <Typography variant="h6" sx={{ fontWeight: 600, mb: 2 }}>
+              Upload Data
+            </Typography>
+            <Typography variant="body2" color="text.secondary" sx={{ mb: 3, lineHeight: 1.6 }}>
+              Please upload the xlsx files containing the completed Excel templates for both Locations and Facilities
+              data. This will enable a smooth bulk upload of records into the system.
+            </Typography>
+
+            {/* Upload Sections */}
+            <Stack spacing={3}>
+              {/* Locations Upload */}
+              <Box>
+                <Box sx={{ display: 'flex', alignItems: 'center', gap: 2, mb: 1 }}>
+                  <FontAwesomeIcon icon={faFileExcel} style={{ fontSize: 18, color: '#10B981' }} />
+                  <Typography variant="body2" sx={{ fontWeight: 500 }}>
+                    Locations.xlsx
+                  </Typography>
+                </Box>
+                <Button
+                  component="label"
+                  variant="outlined"
+                  startIcon={<FontAwesomeIcon icon={faUpload} />}
+                  sx={{
+                    textTransform: 'none',
+                    borderColor: isDark ? '#475569' : '#CBD5E1',
+                    color: 'primary.main',
+                    '&:hover': {
+                      borderColor: 'primary.main',
+                      bgcolor: isDark ? 'rgba(59,130,246,0.05)' : 'rgba(59,130,246,0.05)',
+                    },
+                  }}
+                >
+                  {locationsFile ? locationsFile.name : 'Upload File'}
+                  <input
+                    type="file"
+                    hidden
+                    accept=".xlsx,.xls"
+                    onChange={(e) => {
+                      if (e.target.files && e.target.files[0]) {
+                        setLocationsFile(e.target.files[0]);
+                      }
+                    }}
+                  />
+                </Button>
+              </Box>
+
+              {/* Facilities Upload */}
+              <Box>
+                <Box sx={{ display: 'flex', alignItems: 'center', gap: 2, mb: 1 }}>
+                  <FontAwesomeIcon icon={faFileExcel} style={{ fontSize: 18, color: '#10B981' }} />
+                  <Typography variant="body2" sx={{ fontWeight: 500 }}>
+                    Facilities.xlsx
+                  </Typography>
+                </Box>
+                <Button
+                  component="label"
+                  variant="outlined"
+                  startIcon={<FontAwesomeIcon icon={faUpload} />}
+                  sx={{
+                    textTransform: 'none',
+                    borderColor: isDark ? '#475569' : '#CBD5E1',
+                    color: 'primary.main',
+                    '&:hover': {
+                      borderColor: 'primary.main',
+                      bgcolor: isDark ? 'rgba(59,130,246,0.05)' : 'rgba(59,130,246,0.05)',
+                    },
+                  }}
+                >
+                  {facilitiesFile ? facilitiesFile.name : 'Upload File'}
+                  <input
+                    type="file"
+                    hidden
+                    accept=".xlsx,.xls"
+                    onChange={(e) => {
+                      if (e.target.files && e.target.files[0]) {
+                        setFacilitiesFile(e.target.files[0]);
+                      }
+                    }}
+                  />
+                </Button>
+              </Box>
+            </Stack>
+          </Box>
+
+          {/* Modal Footer */}
+          <Box
+            sx={{
+              p: 3,
+              borderTop: '1px solid',
+              borderColor: isDark ? '#334155' : '#E2E8F0',
+              display: 'flex',
+              justifyContent: 'space-between',
+              gap: 2,
+            }}
+          >
+            <ButtonBase
+              onClick={() => {
+                setUploadDataModalOpen(false);
+                setDownloadTemplateModalOpen(true);
+              }}
+              sx={{
+                px: 3,
+                py: 1.5,
+                borderRadius: 1,
+                border: '1px solid',
+                borderColor: isDark ? '#475569' : '#CBD5E1',
+                fontWeight: 500,
+                fontSize: 14,
+                transition: 'all 0.2s',
+                '&:hover': {
+                  bgcolor: isDark ? 'rgba(255,255,255,0.05)' : '#F8FAFC',
+                },
+              }}
+            >
+              Back
+            </ButtonBase>
+            <ButtonBase
+              onClick={() => {
+                // Handle file upload logic
+                console.log('Uploading files:', { locationsFile, facilitiesFile });
+                setUploadDataModalOpen(false);
+                // Mark step as completed
+                setCompletedSteps((prev) => new Set(prev).add('upload-data'));
+                setSuccessModalOpen(true);
+              }}
+              sx={{
+                px: 3,
+                py: 1.5,
+                borderRadius: 1,
+                bgcolor: '#60A5FA',
+                color: '#fff',
+                fontWeight: 500,
+                fontSize: 14,
+                transition: 'all 0.2s',
+                '&:hover': {
+                  bgcolor: '#3B82F6',
+                },
+              }}
+            >
+              Submit
+            </ButtonBase>
+          </Box>
+        </Box>
+      </Modal>
+
+      <style>
+        {`
+          @keyframes fadeIn {
+            from { opacity: 0; transform: translateY(4px); }
+            to { opacity: 1; transform: translateY(0); }
+          }
+        `}
+      </style>
+    </Box>
+  );
+}