updates on the design
This commit is contained in:
33
Dockerfile
Normal file
33
Dockerfile
Normal file
@@ -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;"]
|
||||
18
nginx.conf
Normal file
18
nginx.conf
Normal file
@@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -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 = () => (
|
||||
<VStack gap={0} padding={0} width={320}>
|
||||
<HStack justify="between" vAlign="center" padding={2}>
|
||||
@@ -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={
|
||||
<TopNavHeading
|
||||
logo={
|
||||
isSidebarCollapsed ? (
|
||||
<HStack gap={1} vAlign="center" padding={0}>
|
||||
<span style={markWrapperStyle}>
|
||||
<img src={navbarMark} alt="" style={markStyle} />
|
||||
</span>
|
||||
<img src={logo} alt="Doormile Express" style={logoStyle} />
|
||||
</HStack>
|
||||
) : (
|
||||
<img src={logo} alt="Doormile Express" style={logoStyle} />
|
||||
)
|
||||
}
|
||||
headingHref="/doormile/dispatch"
|
||||
/>
|
||||
}
|
||||
heading={<TopNavHeading logo={<img src={logo} alt="Doormile Express" style={logoStyle} />} headingHref="/doormile/dispatch" />}
|
||||
endContent={
|
||||
<HStack gap={1} vAlign="center" padding={0}>
|
||||
<DropdownMenu
|
||||
@@ -170,10 +136,13 @@ const AppTopNav = ({ isSidebarCollapsed }) => {
|
||||
|
||||
<DropdownMenu
|
||||
hasChevron={false}
|
||||
button={{ label: firstname || 'Profile', icon: <Avatar src={avatar1} name={firstname} size="xsm" tooltip={false} />, variant: 'ghost' }}
|
||||
button={{
|
||||
label: firstname || 'Profile',
|
||||
icon: <Avatar src={avatar1} name={firstname} size="xsm" tooltip={false} />,
|
||||
variant: 'ghost'
|
||||
}}
|
||||
items={[
|
||||
{ label: 'View Profile', icon: <EditOutlined />, onClick: () => navigate('/viewprofile') },
|
||||
{ label: 'Support Ticket', icon: <CommentOutlined /> },
|
||||
{ type: 'divider' },
|
||||
{ label: 'Logout', icon: <LogoutOutlined />, onClick: handleLogout }
|
||||
]}
|
||||
@@ -192,8 +161,4 @@ const AppTopNav = ({ isSidebarCollapsed }) => {
|
||||
);
|
||||
};
|
||||
|
||||
AppTopNav.propTypes = {
|
||||
isSidebarCollapsed: PropTypes.bool
|
||||
};
|
||||
|
||||
export default AppTopNav;
|
||||
|
||||
@@ -34,7 +34,7 @@ const MainLayout = () => {
|
||||
variant="section"
|
||||
height="auto"
|
||||
contentPadding={0}
|
||||
topNav={<AppTopNav isSidebarCollapsed={isSidebarCollapsed} />}
|
||||
topNav={<AppTopNav />}
|
||||
sideNav={<AppSideNav isCollapsed={isSidebarCollapsed} onCollapsedChange={setIsSidebarCollapsed} />}
|
||||
mobileNav={{ breakpoint: 'lg' }}
|
||||
>
|
||||
|
||||
@@ -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 ---- */}
|
||||
<Center axis="both" width="54%" height="100vh">
|
||||
<VStack width="100%" maxWidth={420} gap={3} padding={3}>
|
||||
<Card padding={4} elevation="low">
|
||||
<VStack gap={0.5} hAlign="center" padding={0}>
|
||||
<img src={logo} alt="Doormile" style={formLogoStyle} />
|
||||
<Heading level={2}>Welcome back</Heading>
|
||||
<Text type="supporting">Sign in to the Doormile Express console</Text>
|
||||
</VStack>
|
||||
|
||||
<form noValidate onSubmit={handleSubmit}>
|
||||
<VStack gap={3} padding={0}>
|
||||
<TextInput
|
||||
hasAutoFocus
|
||||
label="E-mail Address"
|
||||
type="email"
|
||||
isRequired
|
||||
value={username}
|
||||
onChange={(value) => setUsername(value.toLocaleLowerCase())}
|
||||
isDisabled={!!passwordStatus}
|
||||
/>
|
||||
|
||||
{/* Setup Password */}
|
||||
{passwordStatus == 1 && (
|
||||
<VStack gap={3} padding={0}>
|
||||
<Heading level={4}>Setup Password</Heading>
|
||||
<TextInput
|
||||
hasAutoFocus
|
||||
label="Enter New Password"
|
||||
type="password"
|
||||
isRequired
|
||||
value={password}
|
||||
onChange={(value) => setPassword(value)}
|
||||
/>
|
||||
<TextInput
|
||||
label="Re-Enter Password"
|
||||
type="password"
|
||||
isRequired
|
||||
value={confirmPassword}
|
||||
onChange={(value) => setConfirmPassword(value)}
|
||||
status={
|
||||
confirmPassword !== '' && password !== confirmPassword
|
||||
? { type: 'error', message: 'Passwords do not match' }
|
||||
: undefined
|
||||
}
|
||||
/>
|
||||
</VStack>
|
||||
)}
|
||||
|
||||
{/* Enter Password */}
|
||||
{passwordStatus == 2 && (
|
||||
<VStack gap={3} padding={0}>
|
||||
<Heading level={4}>Enter Password</Heading>
|
||||
<TextInput
|
||||
hasAutoFocus
|
||||
label="Enter Password"
|
||||
type="password"
|
||||
isRequired
|
||||
value={password}
|
||||
onChange={(value) => setPassword(value)}
|
||||
/>
|
||||
</VStack>
|
||||
)}
|
||||
|
||||
{/* OTP / retry */}
|
||||
{isPassword && (
|
||||
<VStack gap={1.5} padding={0}>
|
||||
<HStack justify="between">
|
||||
<Text type="label">Enter Password</Text>
|
||||
<Link
|
||||
onClick={() => {
|
||||
setOtp('');
|
||||
loginsend();
|
||||
}}
|
||||
>
|
||||
Retry
|
||||
</Link>
|
||||
</HStack>
|
||||
<TextInput label="Password" type="password" value={password} onChange={(value) => setPassword(value)} isLabelHidden />
|
||||
</VStack>
|
||||
)}
|
||||
|
||||
<Button label="Continue" type="submit" variant="primary" size="lg" width="100%" />
|
||||
<VStack width="100%" maxWidth={440} gap={4} padding={3}>
|
||||
<Card padding={8} elevation="med">
|
||||
<VStack gap={6} padding={0}>
|
||||
<VStack gap={1.5} hAlign="center" padding={0}>
|
||||
<img src={logo} alt="Doormile" style={formLogoStyle} />
|
||||
<Heading level={2}>Welcome back</Heading>
|
||||
<Text type="supporting">Sign in to the Doormile Express console</Text>
|
||||
</VStack>
|
||||
</form>
|
||||
|
||||
<Divider />
|
||||
|
||||
<form noValidate onSubmit={handleSubmit}>
|
||||
<VStack gap={4} padding={0}>
|
||||
<TextInput
|
||||
hasAutoFocus
|
||||
label="E-mail Address"
|
||||
type="email"
|
||||
size="lg"
|
||||
isRequired
|
||||
value={username}
|
||||
onChange={(value) => setUsername(value.toLocaleLowerCase())}
|
||||
isDisabled={!!passwordStatus}
|
||||
/>
|
||||
|
||||
{/* Setup Password */}
|
||||
{passwordStatus == 1 && (
|
||||
<VStack gap={4} padding={0}>
|
||||
<Divider label="Setup Password" />
|
||||
<TextInput
|
||||
hasAutoFocus
|
||||
label="Enter New Password"
|
||||
type="password"
|
||||
size="lg"
|
||||
isRequired
|
||||
value={password}
|
||||
onChange={(value) => setPassword(value)}
|
||||
/>
|
||||
<TextInput
|
||||
label="Re-Enter Password"
|
||||
type="password"
|
||||
size="lg"
|
||||
isRequired
|
||||
value={confirmPassword}
|
||||
onChange={(value) => setConfirmPassword(value)}
|
||||
status={
|
||||
confirmPassword !== '' && password !== confirmPassword
|
||||
? { type: 'error', message: 'Passwords do not match' }
|
||||
: undefined
|
||||
}
|
||||
/>
|
||||
</VStack>
|
||||
)}
|
||||
|
||||
{/* Enter Password */}
|
||||
{passwordStatus == 2 && (
|
||||
<VStack gap={4} padding={0}>
|
||||
<Divider label="Enter Password" />
|
||||
<TextInput
|
||||
hasAutoFocus
|
||||
label="Enter Password"
|
||||
type="password"
|
||||
size="lg"
|
||||
isRequired
|
||||
value={password}
|
||||
onChange={(value) => setPassword(value)}
|
||||
/>
|
||||
</VStack>
|
||||
)}
|
||||
|
||||
{/* OTP / retry */}
|
||||
{isPassword && (
|
||||
<VStack gap={1.5} padding={0}>
|
||||
<HStack justify="between">
|
||||
<Text type="label">Enter Password</Text>
|
||||
<Link
|
||||
onClick={() => {
|
||||
setOtp('');
|
||||
loginsend();
|
||||
}}
|
||||
>
|
||||
Retry
|
||||
</Link>
|
||||
</HStack>
|
||||
<TextInput label="Password" type="password" value={password} onChange={(value) => setPassword(value)} isLabelHidden />
|
||||
</VStack>
|
||||
)}
|
||||
|
||||
<Button label="Continue" type="submit" variant="primary" size="lg" width="100%" />
|
||||
</VStack>
|
||||
</form>
|
||||
</VStack>
|
||||
</Card>
|
||||
|
||||
{/* footer */}
|
||||
<HStack justify="center" wrap="wrap" gap={2}>
|
||||
<Link href="https://nearle.in" target="_blank" isExternalLink>
|
||||
<Link href="https://nearle.in" target="_blank" isExternalLink type="supporting">
|
||||
© All rights reserved
|
||||
</Link>
|
||||
<Link href="https://nearle.in/terms" target="_blank" isExternalLink>
|
||||
<Link href="https://nearle.in/terms" target="_blank" isExternalLink type="supporting">
|
||||
Terms and Conditions
|
||||
</Link>
|
||||
<Link href="https://nearle.in/privacy" target="_blank" isExternalLink>
|
||||
<Link href="https://nearle.in/privacy" target="_blank" isExternalLink type="supporting">
|
||||
Privacy Policy
|
||||
</Link>
|
||||
</HStack>
|
||||
|
||||
Reference in New Issue
Block a user