update the dashbord and router

src/components/Authentication/ForgetPassword/ForgetFormMain.js

@@ -0,0 +1,125 @@
+import React, { useState } from 'react';
+import { Box, Stack ,useTheme} from '@mui/material';
+import Side from './Side';
+import EmailInputSection from './EmailInputSection';
+import OtpVerification from './OtpVerification';
+import NewPassword from './NewPassword';
+import Congratulations from './Congratulations';
+
+
+
+const ForgetForm = () => {
+  const [emailOrPhone, setEmailOrPhone] = useState('');
+  const [currentSlide, setCurrentSlide] = useState(0);
+    const theme = useTheme();
+  const slides = [
+    { component: EmailInputSection, title: "Email Verification" },
+    { component: OtpVerification, title: "OTP Verification" },
+    { component: NewPassword, title: "New Password" },
+    { component: Congratulations, title: "Congratulations" }
+  ];
+
+  const handleNext = () => {
+    if (currentSlide < slides.length - 1) {
+      setCurrentSlide(prev => prev + 1);
+    }
+  };
+
+  const handleBack = () => {
+    if (currentSlide > 0) {
+      setCurrentSlide(prev => prev - 1);
+    }
+  };
+
+  const CurrentComponent = slides[currentSlide].component;
+
+  return (
+    <Box
+      sx={{
+        display: 'flex',
+        flexDirection: { xs: 'column', sm: 'row' },
+        minHeight: '100vh',
+        backgroundColor: '#fff',
+       
+      }}
+    >
+      {/* ✅ Sidebar يظهر فقط من sm+ */}
+      <Box sx={{ width: { sm: '40%', xs: '0%' }, display: { xs: 'none', sm: 'block' } }}>
+        <Side currentStepIndex={currentSlide} onNext={handleNext} onBack={handleBack} />
+      </Box>
+
+      {/* ✅ Form */}
+      <Box
+        sx={{
+          width: { sm: '60%' },
+          minHeight: { xs: '100vh', sm: '130vh', md: '90vh' },
+          position: 'relative',
+          display: 'flex',
+          justifyContent: 'center',
+          alignItems: 'flex-start',
+          paddingTop: { xs: 2, sm: 4 },
+          paddingLeft: { xs: 2, sm: 4 },
+          backgroundColor: '#fff',
+        }}
+      >
+        <Box
+          sx={{
+            width: '100%',
+            maxWidth: 686,
+            pr: { xs: 3, sm: 2, md: 1 },
+            pt: { xs: 2, sm: 4, md: 1 },
+          }}
+        >
+          <Stack spacing={2} alignItems="flex-start">
+
+
+            {/* إظهار المكون الحالي فقط */}
+            <CurrentComponent
+              emailOrPhone={emailOrPhone}
+              setEmailOrPhone={setEmailOrPhone}
+            />
+
+
+          </Stack>
+        </Box>
+
+        {/* ✅ مؤشر الشرائح السفلي */}
+        <Box
+          sx={{
+            position: { xs: 'absolute', sm: 'absolute' },
+            bottom: { xs: '5%', sm: '-1%', md: '2%' },
+            left: '50%',
+            transform: 'translateX(-50%)',
+            display: 'flex',
+            gap: 1,
+            width: '80%',
+            maxWidth: 600,
+            justifyContent: 'center',
+            height: {
+              xs: 3,
+              sm: 5,
+              md: 6,
+            },
+          }}
+        >
+          {slides.map((_, index) => (
+            <Box
+              key={index}
+              sx={{
+                width: '100vh',
+                height: 5,
+                bgcolor: index === currentSlide ?  theme.palette.primary.main : 'rgba(0, 0, 0, 0.2)',
+                borderRadius: 2,
+                cursor: 'pointer',
+                transition: 'background-color 0.3s',
+              }}
+            // onClick={() => setCurrentSlide(index)} // يمكنك تفعيلها لاحقًا
+            />
+          ))}
+        </Box>
+      </Box>
+    </Box>
+  );
+};
+
+export default ForgetForm;