diff --git a/package-lock.json b/package-lock.json index e7896bd..0a67d5a 100644 --- a/package-lock.json +++ b/package-lock.json @@ -10,8 +10,10 @@ "dependencies": { "@emotion/react": "^11.14.0", "@emotion/styled": "^11.14.0", + "@mui/icons-material": "^7.1.0", "@mui/material": "^7.1.0", + "@testing-library/dom": "^10.4.0", "@testing-library/jest-dom": "^6.6.3", "@testing-library/react": "^16.3.0", @@ -3132,9 +3134,11 @@ "license": "MIT" }, "node_modules/@mui/core-downloads-tracker": { - "version": "7.1.0", - "resolved": "https://registry.npmjs.org/@mui/core-downloads-tracker/-/core-downloads-tracker-7.1.0.tgz", - "integrity": "sha512-E0OqhZv548Qdc0PwWhLVA2zmjJZSTvaL4ZhoswmI8NJEC1tpW2js6LLP827jrW9MEiXYdz3QS6+hask83w74yQ==", + + "version": "7.0.2", + "resolved": "https://registry.npmjs.org/@mui/core-downloads-tracker/-/core-downloads-tracker-7.0.2.tgz", + "integrity": "sha512-TfeFU9TgN1N06hyb/pV/63FfO34nijZRMqgHk0TJ3gkl4Fbd+wZ73+ZtOd7jag6hMmzO9HSrBc6Vdn591nhkAg==", + "license": "MIT", "funding": { "type": "opencollective", @@ -3142,12 +3146,14 @@ } }, "node_modules/@mui/icons-material": { + "version": "7.1.0", "resolved": "https://registry.npmjs.org/@mui/icons-material/-/icons-material-7.1.0.tgz", "integrity": "sha512-1mUPMAZ+Qk3jfgL5ftRR06ATH/Esi0izHl1z56H+df6cwIlCWG66RXciUqeJCttbOXOQ5y2DCjLZI/4t3Yg3LA==", "license": "MIT", "dependencies": { "@babel/runtime": "^7.27.1" + }, "engines": { "node": ">=14.0.0" @@ -3157,7 +3163,9 @@ "url": "https://opencollective.com/mui-org" }, "peerDependencies": { - "@mui/material": "^7.1.0", + + "@mui/material": "^7.0.2", + "@types/react": "^17.0.0 || ^18.0.0 || ^19.0.0", "react": "^17.0.0 || ^18.0.0 || ^19.0.0" }, @@ -3168,16 +3176,18 @@ } }, "node_modules/@mui/material": { - "version": "7.1.0", - "resolved": "https://registry.npmjs.org/@mui/material/-/material-7.1.0.tgz", - "integrity": "sha512-ahUJdrhEv+mCp4XHW+tHIEYzZMSRLg8z4AjUOsj44QpD1ZaMxQoVOG2xiHvLFdcsIPbgSRx1bg1eQSheHBgvtg==", + + "version": "7.0.2", + "resolved": "https://registry.npmjs.org/@mui/material/-/material-7.0.2.tgz", + "integrity": "sha512-rjJlJ13+3LdLfobRplkXbjIFEIkn6LgpetgU/Cs3Xd8qINCCQK9qXQIjjQ6P0FXFTPFzEVMj0VgBR1mN+FhOcA==", "license": "MIT", "dependencies": { - "@babel/runtime": "^7.27.1", - "@mui/core-downloads-tracker": "^7.1.0", - "@mui/system": "^7.1.0", - "@mui/types": "^7.4.2", - "@mui/utils": "^7.1.0", + "@babel/runtime": "^7.27.0", + "@mui/core-downloads-tracker": "^7.0.2", + "@mui/system": "^7.0.2", + "@mui/types": "^7.4.1", + "@mui/utils": "^7.0.2", + "@popperjs/core": "^2.11.8", "@types/react-transition-group": "^4.4.12", "clsx": "^2.1.1", @@ -3196,7 +3206,8 @@ "peerDependencies": { "@emotion/react": "^11.5.0", "@emotion/styled": "^11.3.0", - "@mui/material-pigment-css": "^7.1.0", + "@mui/material-pigment-css": "^7.0.2", + "@types/react": "^17.0.0 || ^18.0.0 || ^19.0.0", "react": "^17.0.0 || ^18.0.0 || ^19.0.0", "react-dom": "^17.0.0 || ^18.0.0 || ^19.0.0" @@ -3223,13 +3234,15 @@ "license": "MIT" }, "node_modules/@mui/private-theming": { - "version": "7.1.0", - "resolved": "https://registry.npmjs.org/@mui/private-theming/-/private-theming-7.1.0.tgz", - "integrity": "sha512-4Kck4jxhqF6YxNwJdSae1WgDfXVg0lIH6JVJ7gtuFfuKcQCgomJxPvUEOySTFRPz1IZzwz5OAcToskRdffElDA==", + + "version": "7.0.2", + "resolved": "https://registry.npmjs.org/@mui/private-theming/-/private-theming-7.0.2.tgz", + "integrity": "sha512-6lt8heDC9wN8YaRqEdhqnm0cFCv08AMf4IlttFvOVn7ZdKd81PNpD/rEtPGLLwQAFyyKSxBG4/2XCgpbcdNKiA==", "license": "MIT", "dependencies": { - "@babel/runtime": "^7.27.1", - "@mui/utils": "^7.1.0", + "@babel/runtime": "^7.27.0", + "@mui/utils": "^7.0.2", + "prop-types": "^15.8.1" }, "engines": { @@ -3250,12 +3263,14 @@ } }, "node_modules/@mui/styled-engine": { + "version": "7.1.0", "resolved": "https://registry.npmjs.org/@mui/styled-engine/-/styled-engine-7.1.0.tgz", "integrity": "sha512-m0mJ0c6iRC+f9hMeRe0W7zZX1wme3oUX0+XTVHjPG7DJz6OdQ6K/ggEOq7ZdwilcpdsDUwwMfOmvO71qDkYd2w==", "license": "MIT", "dependencies": { "@babel/runtime": "^7.27.1", + "@emotion/cache": "^11.13.5", "@emotion/serialize": "^1.3.3", "@emotion/sheet": "^1.4.0", @@ -3284,6 +3299,7 @@ } }, "node_modules/@mui/system": { + "version": "7.1.0", "resolved": "https://registry.npmjs.org/@mui/system/-/system-7.1.0.tgz", "integrity": "sha512-iedAWgRJMCxeMHvkEhsDlbvkK+qKf9me6ofsf7twk/jfT4P1ImVf7Rwb5VubEA0sikrVL+1SkoZM41M4+LNAVA==", @@ -3294,6 +3310,7 @@ "@mui/styled-engine": "^7.1.0", "@mui/types": "^7.4.2", "@mui/utils": "^7.1.0", + "clsx": "^2.1.1", "csstype": "^3.1.3", "prop-types": "^15.8.1" @@ -3324,12 +3341,14 @@ } }, "node_modules/@mui/types": { + "version": "7.4.2", "resolved": "https://registry.npmjs.org/@mui/types/-/types-7.4.2.tgz", "integrity": "sha512-edRc5JcLPsrlNFYyTPxds+d5oUovuUxnnDtpJUbP6WMeV4+6eaX/mqai1ZIWT62lCOe0nlrON0s9HDiv5en5bA==", "license": "MIT", "dependencies": { "@babel/runtime": "^7.27.1" + }, "peerDependencies": { "@types/react": "^17.0.0 || ^18.0.0 || ^19.0.0" @@ -3341,6 +3360,7 @@ } }, "node_modules/@mui/utils": { + "version": "7.1.0", "resolved": "https://registry.npmjs.org/@mui/utils/-/utils-7.1.0.tgz", "integrity": "sha512-/OM3S8kSHHmWNOP+NH9xEtpYSG10upXeQ0wLZnfDgmgadTAk5F4MQfFLyZ5FCRJENB3eRzltMmaNl6UtDnPovw==", @@ -3348,6 +3368,7 @@ "dependencies": { "@babel/runtime": "^7.27.1", "@mui/types": "^7.4.2", + "@types/prop-types": "^15.7.14", "clsx": "^2.1.1", "prop-types": "^15.8.1", @@ -4323,9 +4344,11 @@ "license": "MIT" }, "node_modules/@types/react": { + "version": "19.1.4", "resolved": "https://registry.npmjs.org/@types/react/-/react-19.1.4.tgz", "integrity": "sha512-EB1yiiYdvySuIITtD5lhW4yPyJ31RkJkkDw794LaQYrxCSaQV/47y5o1FMC4zF9ZyjUjzJMZwbovEnT5yHTW6g==", + "license": "MIT", "peer": true, "dependencies": { @@ -6914,6 +6937,7 @@ "integrity": "sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw==", "license": "MIT" }, + "node_modules/d3-array": { "version": "3.2.4", "resolved": "https://registry.npmjs.org/d3-array/-/d3-array-3.2.4.tgz", @@ -7035,6 +7059,7 @@ "node": ">=12" } }, + "node_modules/damerau-levenshtein": { "version": "1.0.8", "resolved": "https://registry.npmjs.org/damerau-levenshtein/-/damerau-levenshtein-1.0.8.tgz", @@ -14780,6 +14805,7 @@ } } }, + "node_modules/react-smooth": { "version": "4.0.4", "resolved": "https://registry.npmjs.org/react-smooth/-/react-smooth-4.0.4.tgz", @@ -14795,6 +14821,7 @@ "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0" } }, + "node_modules/react-transition-group": { "version": "4.4.5", "resolved": "https://registry.npmjs.org/react-transition-group/-/react-transition-group-4.4.5.tgz", diff --git a/package.json b/package.json index 77f859f..4a7fdab 100644 --- a/package.json +++ b/package.json @@ -1,12 +1,16 @@ { + "name": "resturant-dashBord", + "version": "0.1.0", "private": true, "dependencies": { "@emotion/react": "^11.14.0", "@emotion/styled": "^11.14.0", - "@mui/icons-material": "^7.1.0", - "@mui/material": "^7.1.0", + + "@mui/icons-material": "^7.0.2", + "@mui/material": "^7.0.2", + "@testing-library/dom": "^10.4.0", "@testing-library/jest-dom": "^6.6.3", "@testing-library/react": "^16.3.0", diff --git a/public/index.html b/public/index.html index 73145cb..8674876 100644 --- a/public/index.html +++ b/public/index.html @@ -2,7 +2,11 @@ +<<<<<<< HEAD +======= + +>>>>>>> 094d64320df085d59dc613108366955085361a0b +<<<<<<< HEAD Restaurant +======= + + + + Resturant +>>>>>>> 094d64320df085d59dc613108366955085361a0b diff --git a/public/logo192.png b/public/logo192.png deleted file mode 100644 index fc44b0a..0000000 Binary files a/public/logo192.png and /dev/null differ diff --git a/public/logo512.png b/public/logo512.png deleted file mode 100644 index a4e47a6..0000000 Binary files a/public/logo512.png and /dev/null differ diff --git a/public/manifest.json b/public/manifest.json deleted file mode 100644 index 080d6c7..0000000 --- a/public/manifest.json +++ /dev/null @@ -1,25 +0,0 @@ -{ - "short_name": "React App", - "name": "Create React App Sample", - "icons": [ - { - "src": "favicon.ico", - "sizes": "64x64 32x32 24x24 16x16", - "type": "image/x-icon" - }, - { - "src": "logo192.png", - "type": "image/png", - "sizes": "192x192" - }, - { - "src": "logo512.png", - "type": "image/png", - "sizes": "512x512" - } - ], - "start_url": ".", - "display": "standalone", - "theme_color": "#000000", - "background_color": "#ffffff" -} diff --git a/public/robots.txt b/public/robots.txt deleted file mode 100644 index e9e57dc..0000000 --- a/public/robots.txt +++ /dev/null @@ -1,3 +0,0 @@ -# https://www.robotstxt.org/robotstxt.html -User-agent: * -Disallow: diff --git a/src/App.css b/src/App.css index 47d6bb5..1fbfb64 100644 --- a/src/App.css +++ b/src/App.css @@ -1,7 +1,17 @@ .App { + margin: 0; + padding: 0; text-align: center; } +body, +html, +#root { + margin: 0; + padding: 0; + height: 100%; +} + .App-logo { height: 40vmin; pointer-events: none; @@ -22,7 +32,6 @@ justify-content: center; font-size: calc(10px + 2vmin); color: white; - } .App-link { @@ -38,87 +47,78 @@ } } - - - - /* CUSTOM FONTS */ - @font-face { font-family: INTER; - src: url('../public/fonts/inter/Inter_18pt-Thin.ttf'); + src: url('/public/fonts/inter/Inter_18pt-Thin.ttf'); font-weight: 100; } @font-face { font-family: INTER; - src: url('../public/fonts/inter/Inter_18pt-ExtraLight.ttf'); + src: url('/public/fonts/inter/Inter_18pt-ExtraLight.ttf'); font-weight: 200; } @font-face { font-family: INTER; - src: url('../public/fonts/inter/Inter_18pt-Light.ttf'); + src: url('/public/fonts/inter/Inter_18pt-Light.ttf'); font-weight: 300; - } @font-face { font-family: INTER; - src: url('../public/fonts/inter/Inter_18pt-Regular.ttf'); + src: url('/public/fonts/inter/Inter_18pt-Regular.ttf'); font-weight: 400; - } @font-face { font-family: INTER; - src: url('../public/fonts/inter/Inter_18pt-Medium.ttf'); + src: url('/public/fonts/inter/Inter_18pt-Medium.ttf'); font-weight: 500; - } @font-face { font-family: INTER; - src: url('../public/fonts/inter/Inter_18pt-SemiBold.ttf'); + src: url('/public/fonts/inter/Inter_18pt-SemiBold.ttf'); font-weight: 600; } @font-face { font-family: INTER; - src: url('../public/fonts/inter/Inter_18pt-Bold.ttf'); + src: url('/public/fonts/inter/Inter_18pt-Bold.ttf'); font-weight: 700; - } @font-face { font-family: INTER; - src: url('../public/fonts/inter/Inter_18pt-ExtraBold.ttf'); + src: url('/public/fonts/inter/Inter_18pt-ExtraBold.ttf'); font-weight: 800; } @font-face { font-family: INTER; - src: url('../public/fonts/inter/Inter_18pt-Black.ttf'); + src: url('/public/fonts/inter/Inter_18pt-Black.ttf'); font-weight: 900; -} +} @font-face { - font-family: PlusJakartaSans ; - src: url('../public/fonts/PlusJakartaSans/PlusJakartaSans-Medium.ttf'); + font-family: PlusJakartaSans; + src: url('/public/fonts/PlusJakartaSans/PlusJakartaSans-Medium.ttf'); font-weight: 500; -} +} @font-face { - font-family: PlusJakartaSans ; - src: url('../public/fonts/PlusJakartaSans/PlusJakartaSans-SemiBold.ttf'); + font-family: PlusJakartaSans; + src: url('/public/fonts/PlusJakartaSans/PlusJakartaSans-SemiBold.ttf'); font-weight: 600; -} +} @font-face { - font-family: PlusJakartaSans ; - src: url('../public/fonts/PlusJakartaSans/PlusJakartaSans-Regular.ttf'); + font-family: PlusJakartaSans; + src: url('/public/fonts/PlusJakartaSans/PlusJakartaSans-Regular.ttf'); font-weight: 400; -} -/* === CUSTOM FONTS ===*/ +} +/* === CUSTOM FONTS === */ diff --git a/src/App.js b/src/App.js index 4311be0..e17ce8d 100644 --- a/src/App.js +++ b/src/App.js @@ -1,5 +1,6 @@ import React from 'react'; import './App.css'; + import { ThemeProvider } from '@mui/material/styles'; import theme from './theme'; import { BrowserRouter as Router, Routes, Route } from 'react-router-dom'; @@ -23,6 +24,7 @@ import Settings from './components/Home/Settings/Setting'; function App() { return ( + } /> @@ -42,6 +44,7 @@ function App() { + ); } diff --git a/src/App.test.js b/src/App.test.js deleted file mode 100644 index 1f03afe..0000000 --- a/src/App.test.js +++ /dev/null @@ -1,8 +0,0 @@ -import { render, screen } from '@testing-library/react'; -import App from './App'; - -test('renders learn react link', () => { - render(); - const linkElement = screen.getByText(/learn react/i); - expect(linkElement).toBeInTheDocument(); -}); diff --git a/src/components/LoginForm.js b/src/components/LoginForm.js new file mode 100644 index 0000000..3a9fa98 --- /dev/null +++ b/src/components/LoginForm.js @@ -0,0 +1,323 @@ +import React, { useState } from 'react'; +import { + TextField, + Button, + Typography, + Stack, + Box, + IconButton, + InputAdornment +} from '@mui/material'; +import { useTheme } from '@mui/material/styles'; +import VisibilityOffOutlinedIcon from '@mui/icons-material/VisibilityOffOutlined'; +import { VisibilityOutlined } from '@mui/icons-material'; + +const LoginForm = () => { + const theme = useTheme(); + const [showPassword, setShowPassword] = useState(false); + + const handleTogglePassword = () => { + setShowPassword((prev) => !prev); + }; + + return ( + + + + + {/* Logo */} + + logo + + + + Login + + + + Enter your username and password to access your account securely. Welcome back to our service! + + + {/* Email Input */} + + + Email + + + + + {/* Password Input */} + + + Password + + + + {showPassword ? : } + + + ) + }} + /> + + + {/* Login Button */} + + + + + {/* Divider */} + + + + Or + + + + + {/* Google Button */} + + + {/* Facebook Button */} + + + {/* Register Link */} + + Don’t have an account?{' '} + + Register + + + + {/* Terms */} + + By logging in, I agree to the{' '} + + Terms of Service + {' '} + and{' '} + + Privacy Policy + . + + + + + ); +}; + +export default LoginForm; diff --git a/src/components/SidePanel.js b/src/components/SidePanel.js new file mode 100644 index 0000000..7d00257 --- /dev/null +++ b/src/components/SidePanel.js @@ -0,0 +1,182 @@ +import React, { useState, useEffect } from 'react'; + + +import { + Button, + Typography, + Stack, + Box +} from '@mui/material'; + +import ArrowForwardIcon from '@mui/icons-material/ArrowForward'; // استيراد أيقونة السهم + +const SidePanel = ({ setMode, mode }) => { + const [currentSlide, setCurrentSlide] = useState(0); + + const slides = [ + { + image: '/images/waitress3.png', + title: "Welcome to our cutting-edge postal application,", + description: "Welcome to our cutting-edge postal application, where sending and receiving mail has never been more convenient and efficient." + }, + { + image: '/images/waitress3.png', + title: "Second Slide Title", + description: "Welcome to our cutting-edge postal application, where sending and receiving mail has never been more convenient and efficient." + }, + { + image: '/images/waitress3.png', + title: "Third Slide Title", + description: "Welcome to our cutting-edge postal application, where sending and receiving mail has never been more convenient and efficient." + }, + { + image: '/images/waitress3.png', + title: "Fourth Slide Title", + description: "Welcome to our cutting-edge postal application, where sending and receiving mail has never been more convenient and efficient." + } + ]; + + useEffect(() => { + const interval = setInterval(() => { + setCurrentSlide((prev) => (prev + 1) % slides.length); + }, 5000); + return () => clearInterval(interval); + }, [slides.length]); + + return ( + + + + + {/* الصورة الحالية */} + {`Slide + + {/* مربع النص في الأسفل */} + + + + + {slides[currentSlide].description} + + + + {/* مؤشرات الشرائح */} + + {slides.map((_, index) => ( + setCurrentSlide(index)} + /> + ))} + + + + + + + + ) +} + +export default SidePanel; \ No newline at end of file diff --git a/src/index.css b/src/index.css deleted file mode 100644 index ec2585e..0000000 --- a/src/index.css +++ /dev/null @@ -1,13 +0,0 @@ -body { - margin: 0; - font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', - 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', - sans-serif; - -webkit-font-smoothing: antialiased; - -moz-osx-font-smoothing: grayscale; -} - -code { - font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', - monospace; -} diff --git a/src/index.js b/src/index.js index d563c0f..f037b25 100644 --- a/src/index.js +++ b/src/index.js @@ -1,8 +1,6 @@ import React from 'react'; import ReactDOM from 'react-dom/client'; -import './index.css'; import App from './App'; -import reportWebVitals from './reportWebVitals'; const root = ReactDOM.createRoot(document.getElementById('root')); root.render( @@ -11,7 +9,3 @@ root.render( ); -// If you want to start measuring performance in your app, pass a function -// to log results (for example: reportWebVitals(console.log)) -// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals -reportWebVitals(); diff --git a/src/logo.svg b/src/logo.svg deleted file mode 100644 index 9dfc1c0..0000000 --- a/src/logo.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/src/pages/LoginPage.js b/src/pages/LoginPage.js new file mode 100644 index 0000000..a41fcf8 --- /dev/null +++ b/src/pages/LoginPage.js @@ -0,0 +1,35 @@ +import React from 'react'; +import { Box } from '@mui/material'; +import SidePanel from '../components/SidePanel'; +import LoginForm from '../components/LoginForm'; + +export default function LoginPage() { + return ( + + {/* SidePanel ثابت */} + + + + + {/* LoginForm مع margin-left لتجنب تغطيته بـ SidePanel */} + + + + + ); +} diff --git a/src/reportWebVitals.js b/src/reportWebVitals.js deleted file mode 100644 index 5253d3a..0000000 --- a/src/reportWebVitals.js +++ /dev/null @@ -1,13 +0,0 @@ -const reportWebVitals = onPerfEntry => { - if (onPerfEntry && onPerfEntry instanceof Function) { - import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => { - getCLS(onPerfEntry); - getFID(onPerfEntry); - getFCP(onPerfEntry); - getLCP(onPerfEntry); - getTTFB(onPerfEntry); - }); - } -}; - -export default reportWebVitals; diff --git a/src/theme.js b/src/theme.js index 689e8d9..0a61cca 100644 --- a/src/theme.js +++ b/src/theme.js @@ -1,6 +1,7 @@ import { createTheme } from '@mui/material/styles'; const theme = createTheme({ + breakpoints: { values: { xs: 0, @@ -18,6 +19,7 @@ const theme = createTheme({ main: '#FF914D', // ← اللون الأساسي الجديد hover: '#e57f3f' }, + }, });