From c17057f693e437255d613f91787584212a7a5607 Mon Sep 17 00:00:00 2001 From: dharaneesh-r Date: Wed, 29 Jul 2026 18:44:19 +0530 Subject: [PATCH] updates on the design --- Dockerfile | 33 ++++++ nginx.conf | 18 +++ src/layout/MainLayout/AppTopNav.js | 67 +++-------- src/layout/MainLayout/index.js | 2 +- src/pages/nearle/login.js | 179 +++++++++++++++-------------- 5 files changed, 162 insertions(+), 137 deletions(-) create mode 100644 Dockerfile create mode 100644 nginx.conf diff --git a/Dockerfile b/Dockerfile new file mode 100644 index 0000000..110e9aa --- /dev/null +++ b/Dockerfile @@ -0,0 +1,33 @@ +# Stage 1: Build the React application +FROM node:20-alpine AS build +WORKDIR /app + +# Copy package management files first for better caching +COPY package.json yarn.lock* package-lock.json* ./ + +# Install dependencies (using npm to respect package-lock.json if it exists, with legacy-peer-deps for compatibility) +RUN npm install --legacy-peer-deps + +# Copy the source code +COPY . . + +# Build the application +RUN npm run build + +# Stage 2: Serve the application with Nginx +FROM nginx:alpine + +WORKDIR /usr/share/nginx/html + +# Remove default Nginx welcome page +RUN rm -rf ./* + +# Copy built assets from the previous stage +COPY --from=build /app/build/ . + +# Copy the custom Nginx configuration +COPY nginx.conf /etc/nginx/nginx.conf + +EXPOSE 80 + +CMD ["nginx", "-g", "daemon off;"] diff --git a/nginx.conf b/nginx.conf new file mode 100644 index 0000000..f1a121b --- /dev/null +++ b/nginx.conf @@ -0,0 +1,18 @@ +events {} + +http { + include /etc/nginx/mime.types; + default_type application/octet-stream; + + server { + listen 80; + server_name localhost; + + location / { + root /usr/share/nginx/html; + index index.html index.htm; + # This line forces Nginx to pass routing back to React Router + try_files $uri $uri/ /index.html; + } + } +} diff --git a/src/layout/MainLayout/AppTopNav.js b/src/layout/MainLayout/AppTopNav.js index 856ef24..23ce0de 100644 --- a/src/layout/MainLayout/AppTopNav.js +++ b/src/layout/MainLayout/AppTopNav.js @@ -1,4 +1,3 @@ -import PropTypes from 'prop-types'; import { useEffect, useRef, useState } from 'react'; import { useNavigate } from 'react-router-dom'; import { useDispatch } from 'react-redux'; @@ -18,11 +17,18 @@ import { Divider } from '@astryxdesign/core/Divider'; import { TbBoxMultiple1 } from 'react-icons/tb'; import { GrMultiple } from 'react-icons/gr'; -import { BellOutlined, WindowsOutlined, EditOutlined, CommentOutlined, LogoutOutlined, GiftOutlined, MessageOutlined, SettingOutlined } from '@ant-design/icons'; +import { + BellOutlined, + WindowsOutlined, + EditOutlined, + LogoutOutlined, + GiftOutlined, + MessageOutlined, + SettingOutlined +} from '@ant-design/icons'; import avatar1 from 'assets/images/users/avatar-1.png'; import logo from 'assets/images/doormile-logo.png'; -import navbarMark from 'assets/images/doormile-mark.png'; import { clearFcmToken } from 'store/reducers/fcmSlice'; import { logoutUser } from 'store/reducers/loginUserSlice'; import { performSessionLogout } from 'utils/session'; @@ -36,30 +42,6 @@ const logoStyle = { filter: 'brightness(0) saturate(100%) invert(15%) sepia(93%) saturate(5437%) hue-rotate(346deg) brightness(81%) contrast(92%)' }; -// Collapsed rail: doormile-mark.png (red-on-white disc) needs a white -// backing + scale(1.4) crop to fill its circle cleanly — same composition -// the old DrawerHeader used, just sized for the nav-bar row instead of the -// full-height sidebar rail. -const markWrapperStyle = { - width: 32, - height: 32, - borderRadius: '50%', - background: '#fff', - display: 'flex', - alignItems: 'center', - justifyContent: 'center', - overflow: 'hidden', - flexShrink: 0 -}; - -const markStyle = { - width: '100%', - height: '100%', - objectFit: 'cover', - transform: 'scale(1.4)', - display: 'block' -}; - const NotificationPanel = () => ( @@ -92,7 +74,7 @@ const NotificationPanel = () => ( // ==============================|| MAIN LAYOUT - TOP NAV ||============================== // -const AppTopNav = ({ isSidebarCollapsed }) => { +const AppTopNav = () => { const navigate = useNavigate(); const dispatch = useDispatch(); const queryClient = useQueryClient(); @@ -136,23 +118,7 @@ const AppTopNav = ({ isSidebarCollapsed }) => { borderBottom: `1px solid ${DT.borderSubtle}`, boxShadow: DT.shadowMd }} - heading={ - - - - - Doormile Express - - ) : ( - Doormile Express - ) - } - headingHref="/doormile/dispatch" - /> - } + heading={} headingHref="/doormile/dispatch" />} endContent={ { , variant: 'ghost' }} + button={{ + label: firstname || 'Profile', + icon: , + variant: 'ghost' + }} items={[ { label: 'View Profile', icon: , onClick: () => navigate('/viewprofile') }, - { label: 'Support Ticket', icon: }, { type: 'divider' }, { label: 'Logout', icon: , onClick: handleLogout } ]} @@ -192,8 +161,4 @@ const AppTopNav = ({ isSidebarCollapsed }) => { ); }; -AppTopNav.propTypes = { - isSidebarCollapsed: PropTypes.bool -}; - export default AppTopNav; diff --git a/src/layout/MainLayout/index.js b/src/layout/MainLayout/index.js index c9f88b7..42249ad 100644 --- a/src/layout/MainLayout/index.js +++ b/src/layout/MainLayout/index.js @@ -34,7 +34,7 @@ const MainLayout = () => { variant="section" height="auto" contentPadding={0} - topNav={} + topNav={} sideNav={} mobileNav={{ breakpoint: 'lg' }} > diff --git a/src/pages/nearle/login.js b/src/pages/nearle/login.js index fe27c32..50a0f88 100644 --- a/src/pages/nearle/login.js +++ b/src/pages/nearle/login.js @@ -29,6 +29,7 @@ import { Text } from '@astryxdesign/core/Text'; import { TextInput } from '@astryxdesign/core/TextInput'; import { Button } from '@astryxdesign/core/Button'; import { Link } from '@astryxdesign/core/Link'; +import { Divider } from '@astryxdesign/core/Divider'; import { doormileTheme } from 'themes/astryx'; const brandPanelStyle = { @@ -246,100 +247,108 @@ const Login = () => { {/* ---- Right form panel ---- */}
- - - - Doormile - Welcome back - Sign in to the Doormile Express console - - -
- - setUsername(value.toLocaleLowerCase())} - isDisabled={!!passwordStatus} - /> - - {/* Setup Password */} - {passwordStatus == 1 && ( - - Setup Password - setPassword(value)} - /> - setConfirmPassword(value)} - status={ - confirmPassword !== '' && password !== confirmPassword - ? { type: 'error', message: 'Passwords do not match' } - : undefined - } - /> - - )} - - {/* Enter Password */} - {passwordStatus == 2 && ( - - Enter Password - setPassword(value)} - /> - - )} - - {/* OTP / retry */} - {isPassword && ( - - - Enter Password - { - setOtp(''); - loginsend(); - }} - > - Retry - - - setPassword(value)} isLabelHidden /> - - )} - -