dev-jaanvi #1
10
.prettierrc
10
.prettierrc
|
@ -1,6 +1,8 @@
|
||||||
{
|
{
|
||||||
"trailingComma": "es5",
|
|
||||||
"tabWidth": 4,
|
"tabWidth": 4,
|
||||||
"semi": false,
|
"useTabs": true,
|
||||||
"singleQuote": false
|
"semi": true,
|
||||||
}
|
"singleQuote": false,
|
||||||
|
"bracketSpacing": true
|
||||||
|
}
|
||||||
|
|
|
@ -1,5 +1,5 @@
|
||||||
{
|
{
|
||||||
"name": "digi-health-admin-dashboard",
|
"name": "digi-ev-admin-dashboard",
|
||||||
"version": "0.1.0",
|
"version": "0.1.0",
|
||||||
"private": true,
|
"private": true,
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
|
@ -32,6 +32,7 @@
|
||||||
"mui-tel-input": "^7.0.0",
|
"mui-tel-input": "^7.0.0",
|
||||||
"prop-types": "^15.8.1",
|
"prop-types": "^15.8.1",
|
||||||
"react": "^19.0.0",
|
"react": "^19.0.0",
|
||||||
|
"react-cookie": "^7.2.2",
|
||||||
"react-dom": "^19.0.0",
|
"react-dom": "^19.0.0",
|
||||||
"react-dropzone": "^14.3.5",
|
"react-dropzone": "^14.3.5",
|
||||||
"react-hook-form": "^7.54.2",
|
"react-hook-form": "^7.54.2",
|
||||||
|
@ -68,8 +69,8 @@
|
||||||
},
|
},
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
"@types/node": "^22.10.5",
|
"@types/node": "^22.10.5",
|
||||||
"@types/react": "^19.0.3",
|
"@types/react": "^19.0.4",
|
||||||
"@types/react-dom": "^19.0.2",
|
"@types/react-dom": "^19.0.2",
|
||||||
"typescript": "^5.7.2"
|
"typescript": "^5.7.3"
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
5153
pnpm-lock.yaml
5153
pnpm-lock.yaml
File diff suppressed because it is too large
Load diff
|
@ -1,43 +1,21 @@
|
||||||
<!DOCTYPE html>
|
<!DOCTYPE html>
|
||||||
<html lang="en">
|
<html lang="en">
|
||||||
<head>
|
<head>
|
||||||
<meta charset="utf-8" />
|
<meta charset="utf-8" />
|
||||||
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
|
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||||
<meta name="theme-color" content="#000000" />
|
<meta name="theme-color" content="#000000" />
|
||||||
<meta
|
<meta
|
||||||
name="description"
|
name="description"
|
||||||
content="Web site created using create-react-app"
|
content="Web site created using create-react-app"
|
||||||
/>
|
/>
|
||||||
<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
|
<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
|
||||||
<!--
|
|
||||||
manifest.json provides metadata used when your web app is installed on a
|
|
||||||
user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
|
|
||||||
-->
|
|
||||||
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
|
|
||||||
<!--
|
|
||||||
Notice the use of %PUBLIC_URL% in the tags above.
|
|
||||||
It will be replaced with the URL of the `public` folder during the build.
|
|
||||||
Only files inside the `public` folder can be referenced from the HTML.
|
|
||||||
|
|
||||||
Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
|
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
|
||||||
work correctly both with client-side routing and a non-root public URL.
|
|
||||||
Learn how to configure a non-root public URL by running `npm run build`.
|
|
||||||
-->
|
|
||||||
<title>React App</title>
|
|
||||||
</head>
|
|
||||||
<body>
|
|
||||||
<noscript>You need to enable JavaScript to run this app.</noscript>
|
|
||||||
<div id="root"></div>
|
|
||||||
<!--
|
|
||||||
This HTML file is a template.
|
|
||||||
If you open it directly in the browser, you will see an empty page.
|
|
||||||
|
|
||||||
jaanvi marked this conversation as resolved
Outdated
|
|||||||
You can add webfonts, meta tags, or analytics to this file.
|
<title>DigiEV - Eco-friendly Charge</title>
|
||||||
The build step will place the bundled scripts into the <body> tag.
|
</head>
|
||||||
|
<body>
|
||||||
To begin the development, run `npm start` or `yarn start`.
|
<div id="root"></div>
|
||||||
To create a production bundle, use `npm run build` or `yarn build`.
|
</body>
|
||||||
-->
|
|
||||||
</body>
|
|
||||||
</html>
|
</html>
|
||||||
|
|
34
src/App.tsx
34
src/App.tsx
|
@ -1,12 +1,28 @@
|
||||||
import { BrowserRouter as Router} from 'react-router-dom';
|
import AppRouter from "./router";
|
||||||
import AppRouter from './router';
|
import { useSelector } from "react-redux";
|
||||||
|
import { useMatch, useNavigate, useSearchParams } from "react-router-dom";
|
||||||
|
import { useEffect } from "react";
|
||||||
|
import { RootState } from "./redux/store";
|
||||||
|
import { withCookies, ReactCookieProps } from "react-cookie";
|
||||||
|
|
||||||
function App() {
|
const App: React.FC<ReactCookieProps> = ({ cookies }) => {
|
||||||
return (
|
const navigate = useNavigate();
|
||||||
<Router>
|
const isPanel = useMatch("/auth/login");
|
||||||
<AppRouter />
|
const isCookiePresent = !!cookies?.get("authToken");
|
||||||
</Router>
|
console.log("cookies present:", isCookiePresent);
|
||||||
|
const [searchParams] = useSearchParams();
|
||||||
|
|
||||||
|
const isAuthenticated = useSelector(
|
||||||
|
(state: RootState) => state.authReducer.isAuthenticated
|
||||||
);
|
);
|
||||||
}
|
|
||||||
|
|
||||||
export default App;
|
useEffect(() => {
|
||||||
|
if (isPanel && isCookiePresent) {
|
||||||
|
navigate("/panel/dashboard");
|
||||||
|
}
|
||||||
|
}, [isPanel, isAuthenticated, searchParams]);
|
||||||
|
|
||||||
|
return <AppRouter />;
|
||||||
|
};
|
||||||
|
|
||||||
|
export default withCookies(App);
|
||||||
|
|
|
@ -11,6 +11,9 @@ import LogoutRoundedIcon from '@mui/icons-material/LogoutRounded';
|
||||||
import MoreVertRoundedIcon from '@mui/icons-material/MoreVertRounded';
|
import MoreVertRoundedIcon from '@mui/icons-material/MoreVertRounded';
|
||||||
import MenuButton from '../MenuButton';
|
import MenuButton from '../MenuButton';
|
||||||
import { Avatar } from '@mui/material';
|
import { Avatar } from '@mui/material';
|
||||||
|
import { useDispatch } from 'react-redux';
|
||||||
|
import { logoutUser } from '../../redux/slices/authSlice';
|
||||||
|
import { useCookies } from 'react-cookie';
|
||||||
|
|
||||||
const MenuItem = styled(MuiMenuItem)({
|
const MenuItem = styled(MuiMenuItem)({
|
||||||
margin: '2px 0',
|
margin: '2px 0',
|
||||||
|
@ -19,12 +22,20 @@ const MenuItem = styled(MuiMenuItem)({
|
||||||
export default function OptionsMenu({ avatar }: { avatar?: boolean }) {
|
export default function OptionsMenu({ avatar }: { avatar?: boolean }) {
|
||||||
const [anchorEl, setAnchorEl] = React.useState<null | HTMLElement>(null);
|
const [anchorEl, setAnchorEl] = React.useState<null | HTMLElement>(null);
|
||||||
const open = Boolean(anchorEl);
|
const open = Boolean(anchorEl);
|
||||||
|
const dispatch = useDispatch();
|
||||||
|
const [cookies, setCookie, removeCookie] = useCookies(['authToken']);
|
||||||
const handleClick = (event: React.MouseEvent<HTMLElement>) => {
|
const handleClick = (event: React.MouseEvent<HTMLElement>) => {
|
||||||
setAnchorEl(event.currentTarget);
|
setAnchorEl(event.currentTarget);
|
||||||
};
|
};
|
||||||
const handleClose = () => {
|
const handleClose = () => {
|
||||||
setAnchorEl(null);
|
setAnchorEl(null);
|
||||||
};
|
};
|
||||||
|
|
||||||
|
const handleLogout = () => {
|
||||||
|
dispatch(logoutUser({ removeCookie }));
|
||||||
|
console.log('click')
|
||||||
|
handleClose();
|
||||||
|
};
|
||||||
return (
|
return (
|
||||||
<React.Fragment>
|
<React.Fragment>
|
||||||
<MenuButton
|
<MenuButton
|
||||||
|
@ -70,7 +81,7 @@ export default function OptionsMenu({ avatar }: { avatar?: boolean }) {
|
||||||
<MenuItem onClick={handleClose}>Settings</MenuItem>
|
<MenuItem onClick={handleClose}>Settings</MenuItem>
|
||||||
<Divider />
|
<Divider />
|
||||||
<MenuItem
|
<MenuItem
|
||||||
onClick={handleClose}
|
onClick={handleLogout}
|
||||||
sx={{
|
sx={{
|
||||||
[`& .${listItemIconClasses.root}`]: {
|
[`& .${listItemIconClasses.root}`]: {
|
||||||
ml: 'auto',
|
ml: 'auto',
|
||||||
|
|
|
@ -1,39 +1,22 @@
|
||||||
import { intersection, uniq } from 'lodash';
|
|
||||||
import React from 'react';
|
import React from 'react';
|
||||||
import { useDispatch, useSelector } from 'react-redux';
|
import { useDispatch, useSelector } from 'react-redux';
|
||||||
|
|
||||||
import { checkUserAuth } from '../redux/slices/authSlice';
|
import { checkUserAuth } from '../redux/slices/authSlice';
|
||||||
|
|
||||||
const useAuth = (caps, { matchAllCaps = false }) => {
|
const useAuth = () => {
|
||||||
const dispatch = useDispatch();
|
const dispatch = useDispatch();
|
||||||
const [isAuthorized, setIsAuthorized] = React.useState(false);
|
const [isAuthorized, setIsAuthorized] = React.useState(false);
|
||||||
|
const { isAuthenticated } = useSelector((state) => ({
|
||||||
const { isAuthenticated, userCapabilities } = useSelector((state) => ({
|
|
||||||
isAuthenticated: state.authReducer.isAuthenticated,
|
isAuthenticated: state.authReducer.isAuthenticated,
|
||||||
userCapabilities: state.authReducer.userCapabilities,
|
|
||||||
}));
|
}));
|
||||||
|
|
||||||
const requiredCaps = React.useMemo(
|
|
||||||
() => uniq(Array.isArray(caps) ? caps : [caps]),
|
|
||||||
[caps]
|
|
||||||
);
|
|
||||||
|
|
||||||
React.useEffect(() => {
|
React.useEffect(() => {
|
||||||
const userMatchedCaps = intersection(userCapabilities, requiredCaps);
|
if (isAuthenticated) {
|
||||||
|
|
||||||
let isUserAuthorized = matchAllCaps
|
|
||||||
? userMatchedCaps?.length === requiredCaps?.length
|
|
||||||
: userMatchedCaps?.length > 0;
|
|
||||||
if (requiredCaps.length === 0) {
|
|
||||||
isUserAuthorized = true;
|
|
||||||
}
|
|
||||||
// if (isAuthenticated === null) {
|
|
||||||
if (isAuthenticated === null || false || undefined) {
|
|
||||||
dispatch(checkUserAuth());
|
dispatch(checkUserAuth());
|
||||||
jaanvi marked this conversation as resolved
Outdated
VishalMaurya
commented
If its authenticated then why again checking checkUserAuth. If its authenticated then why again checking checkUserAuth.
|
|||||||
} else {
|
} else {
|
||||||
setIsAuthorized(isAuthenticated && isUserAuthorized);
|
setIsAuthorized(false);
|
||||||
}
|
}
|
||||||
}, [dispatch, isAuthenticated, requiredCaps, userCapabilities]);
|
}, [dispatch, isAuthenticated]);
|
||||||
|
|
||||||
return { isAuthenticated, isAuthorized };
|
return { isAuthenticated, isAuthorized };
|
||||||
};
|
};
|
||||||
|
|
|
@ -1,29 +1,32 @@
|
||||||
import React from 'react';
|
import React from "react";
|
||||||
import ReactDOM from 'react-dom/client';
|
import ReactDOM from "react-dom/client";
|
||||||
import './index.css';
|
import "./index.css";
|
||||||
import reportWebVitals from './reportWebVitals';
|
import App from "./App";
|
||||||
import App from './App';
|
import { Provider } from "react-redux";
|
||||||
import { Provider } from 'react-redux';
|
import store from "./redux/store";
|
||||||
import store from './redux/store/store.ts';
|
import { Slide, ToastContainer } from "react-toastify";
|
||||||
import { Slide, ToastContainer } from 'react-toastify';
|
import { BrowserRouter as Router } from "react-router-dom";
|
||||||
|
import { CookiesProvider } from "react-cookie";
|
||||||
|
|
||||||
const root = ReactDOM.createRoot(document.getElementById('root'));
|
const root = ReactDOM.createRoot(
|
||||||
root.render(
|
document.getElementById("root") as HTMLElement
|
||||||
<React.StrictMode>
|
|
||||||
<Provider store={store}>
|
|
||||||
<App />
|
|
||||||
<ToastContainer
|
|
||||||
autoClose={2000}
|
|
||||||
hideProgressBar
|
|
||||||
theme="dark"
|
|
||||||
transition={Slide}
|
|
||||||
toastStyle={{ border: '1px solid dimgray' }}
|
|
||||||
/>
|
|
||||||
</Provider>
|
|
||||||
</React.StrictMode>
|
|
||||||
);
|
);
|
||||||
|
|
||||||
// If you want to start measuring performance in your app, pass a function
|
root.render(
|
||||||
// to log results (for example: reportWebVitals(console.log))
|
<React.StrictMode>
|
||||||
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
|
<CookiesProvider defaultSetOptions={{ path: "/" }}>
|
||||||
reportWebVitals();
|
<Provider store={store}>
|
||||||
|
<Router>
|
||||||
|
<App />
|
||||||
|
</Router>
|
||||||
|
<ToastContainer
|
||||||
|
autoClose={2000}
|
||||||
|
hideProgressBar
|
||||||
|
theme="dark"
|
||||||
|
transition={Slide}
|
||||||
|
toastStyle={{ border: "1px solid dimgray" }}
|
||||||
|
/>
|
||||||
|
</Provider>
|
||||||
|
</CookiesProvider>
|
||||||
|
</React.StrictMode>
|
||||||
|
);
|
||||||
|
|
|
@ -213,7 +213,7 @@ export default function Login(props: { disableCustomTheme?: boolean }) {
|
||||||
<Typography sx={{ textAlign: 'center' }}>
|
<Typography sx={{ textAlign: 'center' }}>
|
||||||
Don't have an account?{' '}
|
Don't have an account?{' '}
|
||||||
<Link
|
<Link
|
||||||
href="/signup/"
|
href="/auth/signup"
|
||||||
variant="body2"
|
variant="body2"
|
||||||
sx={{ alignSelf: 'center' }}
|
sx={{ alignSelf: 'center' }}
|
||||||
>
|
>
|
||||||
|
|
|
@ -117,11 +117,11 @@ const dispatch = useDispatch();
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<AppTheme {...props}>
|
<AppTheme {...props}>
|
||||||
<CssBaseline enableColorScheme />
|
{/* <CssBaseline enableColorScheme /> */}
|
||||||
<ColorModeSelect sx={{ position: 'fixed', top: '1rem', right: '1rem' }} />
|
<ColorModeSelect sx={{ position: 'fixed', top: '1rem', right: '1rem' }} />/
|
||||||
<SignUpContainer direction="column" justifyContent="space-between">
|
<SignUpContainer direction="column" justifyContent="space-between">
|
||||||
<Card variant="outlined">
|
<Card variant="outlined">
|
||||||
<SitemarkIcon />
|
Digi-EV
|
||||||
<Typography
|
<Typography
|
||||||
component="h1"
|
component="h1"
|
||||||
variant="h4"
|
variant="h4"
|
||||||
|
@ -204,12 +204,12 @@ const dispatch = useDispatch();
|
||||||
/>
|
/>
|
||||||
</FormControl>
|
</FormControl>
|
||||||
<MuiPhoneNumber
|
<MuiPhoneNumber
|
||||||
defaultCountry='it'
|
defaultCountry='in'
|
||||||
onChange={handleOnChange}
|
onChange={handleOnChange}
|
||||||
value={phoneNumber}
|
value={phoneNumber}
|
||||||
/>
|
/>
|
||||||
|
|
||||||
<FormControlLabel
|
{/* <FormControlLabel
|
||||||
control={
|
control={
|
||||||
<Controller
|
<Controller
|
||||||
name="allowExtraEmails"
|
name="allowExtraEmails"
|
||||||
|
@ -220,16 +220,16 @@ const dispatch = useDispatch();
|
||||||
/>
|
/>
|
||||||
}
|
}
|
||||||
label="I want to receive updates via email."
|
label="I want to receive updates via email."
|
||||||
/>
|
/> */}
|
||||||
|
|
||||||
<Button type="submit" fullWidth variant="contained">
|
<Button type="submit" fullWidth variant="contained">
|
||||||
Sign up
|
Sign up
|
||||||
</Button>
|
</Button>
|
||||||
</Box>
|
</Box>
|
||||||
<Divider>
|
{/* <Divider>
|
||||||
<Typography sx={{ color: 'text.secondary' }}>or</Typography>
|
<Typography sx={{ color: 'text.secondary' }}>or</Typography>
|
||||||
</Divider>
|
</Divider> */}
|
||||||
<Box sx={{ display: 'flex', flexDirection: 'column', gap: 2 }}>
|
{/* <Box sx={{ display: 'flex', flexDirection: 'column', gap: 2 }}>
|
||||||
<Button
|
<Button
|
||||||
fullWidth
|
fullWidth
|
||||||
variant="outlined"
|
variant="outlined"
|
||||||
|
@ -256,6 +256,19 @@ const dispatch = useDispatch();
|
||||||
Sign in
|
Sign in
|
||||||
</Link>
|
</Link>
|
||||||
</Typography>
|
</Typography>
|
||||||
|
</Box> */}
|
||||||
|
<Divider>or</Divider>
|
||||||
|
<Box sx={{ display: 'flex', flexDirection: 'column', gap: 2 }}>
|
||||||
|
<Typography sx={{ textAlign: 'center' }}>
|
||||||
|
Already have an account?
|
||||||
|
<Link
|
||||||
|
href="/auth/login"
|
||||||
|
variant="body2"
|
||||||
|
sx={{ alignSelf: 'center' }}
|
||||||
|
>
|
||||||
|
Sign in
|
||||||
|
</Link>
|
||||||
|
</Typography>
|
||||||
</Box>
|
</Box>
|
||||||
</Card>
|
</Card>
|
||||||
</SignUpContainer>
|
</SignUpContainer>
|
||||||
|
|
9
src/pages/NotFound/index.tsx
Normal file
9
src/pages/NotFound/index.tsx
Normal file
|
@ -0,0 +1,9 @@
|
||||||
|
import React from 'react'
|
||||||
|
|
||||||
|
function NotFoundPage() {
|
||||||
|
return (
|
||||||
|
<div>NotFoundPage</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
export default NotFoundPage;
|
|
@ -19,7 +19,7 @@ const categoryRows = [
|
||||||
];
|
];
|
||||||
|
|
||||||
export default function Vehicles() {
|
export default function Vehicles() {
|
||||||
const [modalOpen, setModalOpen] = useState(false);
|
const [modalOpen, setModalOpen] = useState<boolean>(false);
|
||||||
const [editRow, setEditRow] = useState<any>(null);
|
const [editRow, setEditRow] = useState<any>(null);
|
||||||
const { reset } = useForm();
|
const { reset } = useForm();
|
||||||
|
|
11
src/redux/reducers.ts
Normal file
11
src/redux/reducers.ts
Normal file
|
@ -0,0 +1,11 @@
|
||||||
|
import { combineReducers } from "@reduxjs/toolkit";
|
||||||
|
|
||||||
|
import authReducer from "./slices/authSlice";
|
||||||
|
|
||||||
|
const rootReducer = combineReducers({
|
||||||
|
authReducer,
|
||||||
|
});
|
||||||
|
|
||||||
|
export type RootState = ReturnType<typeof rootReducer>;
|
||||||
|
|
||||||
|
export default rootReducer;
|
|
@ -1,13 +1,10 @@
|
||||||
import { configureStore } from '@reduxjs/toolkit';
|
import { configureStore } from '@reduxjs/toolkit';
|
||||||
import authReducer from '../slices/authSlice.ts'
|
|
||||||
const store = configureStore({
|
|
||||||
reducer: {
|
|
||||||
auth: authReducer,
|
|
||||||
},
|
|
||||||
});
|
|
||||||
|
|
||||||
|
import rootReducer from './reducers';
|
||||||
|
|
||||||
|
export const store = configureStore({
|
||||||
|
reducer: rootReducer,
|
||||||
|
})
|
||||||
export type RootState = ReturnType<typeof store.getState>;
|
export type RootState = ReturnType<typeof store.getState>;
|
||||||
export type AppDispatch = typeof store.dispatch;
|
export type AppDispatch = typeof store.dispatch;
|
||||||
export default store;
|
export default store;
|
||||||
|
|
||||||
|
|
|
@ -1,19 +1,20 @@
|
||||||
{
|
{
|
||||||
"files": [],
|
"files": [],
|
||||||
"references": [
|
"references": [
|
||||||
{
|
{
|
||||||
"path": "./tsconfig.app.json"
|
"path": "./tsconfig.app.json"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"path": "./tsconfig.node.json"
|
"path": "./tsconfig.node.json"
|
||||||
}
|
}
|
||||||
],
|
],
|
||||||
"compilerOptions": {
|
"compilerOptions": {
|
||||||
"baseUrl": ".",
|
"baseUrl": ".",
|
||||||
"paths": {
|
"jsx": "react-jsx",
|
||||||
"@/*": [
|
"types": ["react", "react-dom"],
|
||||||
"./src/*"
|
"lib": ["dom", "dom.iterable", "esnext"],
|
||||||
]
|
"paths": {
|
||||||
}
|
"@/*": ["./src/*"]
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
}
|
||||||
|
|
Loading…
Reference in a new issue
add app specific meta description.