Add Job details page

HoaAyWK · Nov 3, 2022 · cb67a87 · cb67a87
1 parent f12a4d1
commit cb67a87
Show file tree

Hide file tree

Showing 133 changed files with 10,524 additions and 419 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -3,15 +3,36 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "@emotion/react": "^11.10.4",
+    "@emotion/styled": "^11.10.4",
+    "@faker-js/faker": "^7.6.0",
+    "@hookform/resolvers": "^2.9.10",
+    "@iconify/react": "^4.0.0",
+    "@mui/lab": "^5.0.0-alpha.105",
+    "@mui/material": "^5.10.11",
     "@reduxjs/toolkit": "^1.8.6",
     "@testing-library/jest-dom": "^5.16.5",
     "@testing-library/react": "^13.4.0",
     "@testing-library/user-event": "^14.4.3",
+    "apexcharts": "^3.36.0",
+    "axios": "^1.1.3",
+    "change-case": "^4.1.2",
+    "date-fns": "^2.29.3",
+    "js-cookie": "^3.0.1",
+    "lodash": "^4.17.21",
+    "notistack": "^2.0.8",
+    "prop-types": "^15.8.1",
     "react": "^18.2.0",
+    "react-apexcharts": "^1.4.0",
     "react-dom": "^18.2.0",
+    "react-helmet-async": "^1.3.0",
+    "react-hook-form": "^7.38.0",
     "react-redux": "^8.0.4",
+    "react-router-dom": "^6.4.2",
     "react-scripts": "5.0.1",
-    "web-vitals": "^2.1.4"
+    "simplebar-react": "^2.4.3",
+    "web-vitals": "^2.1.4",
+    "yup": "^0.32.11"
   },
   "scripts": {
     "start": "react-scripts start",

diff --git a/public/index.html b/public/index.html
@@ -24,6 +24,10 @@
       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`.
     -->
+    <link
+      rel="stylesheet"
+      href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap"
+    />
     <title>React Redux App</title>
   </head>
   <body>

diff --git a/public/static/illustrations/illustration_404.svg b/public/static/illustrations/illustration_404.svg
diff --git a/public/static/illustrations/illustration_avatar.png b/public/static/illustrations/illustration_avatar.png
diff --git a/public/static/illustrations/illustration_login.png b/public/static/illustrations/illustration_login.png
diff --git a/public/static/illustrations/illustration_register.png b/public/static/illustrations/illustration_register.png
diff --git a/public/static/mock_images/avatars/avatar_1.jpg b/public/static/mock_images/avatars/avatar_1.jpg
diff --git a/public/static/mock_images/avatars/avatar_2.jpg b/public/static/mock_images/avatars/avatar_2.jpg
diff --git a/public/static/mock_images/backgrounds/bg_01.jpg b/public/static/mock_images/backgrounds/bg_01.jpg
diff --git a/src/App.css b/src/App.css
diff --git a/src/App.js b/src/App.js
diff --git a/src/App.jsx b/src/App.jsx
@@ -0,0 +1,14 @@
+import React from 'react';
+
+import Router from './routes';
+import ThemeProvider from './theme';
+
+const App = () => {
+    return (
+        <ThemeProvider>
+            <Router />
+        </ThemeProvider>
+    );
+};
+
+export default App;
diff --git a/src/App.test.js b/src/App.test.js
diff --git a/src/_mock/account.js b/src/_mock/account.js
@@ -0,0 +1,7 @@
+const account ={
+    displayName: 'Jaydon Frankie',
+    email: 'demo@minimals.cc',
+    photoURL: '/static/mock-images/avatars/avatar_default.jpg',
+};
+
+export default account;
diff --git a/src/_mock/user.js b/src/_mock/user.js
@@ -0,0 +1,27 @@
+import { faker } from '@faker-js/faker';
+import { sample } from 'lodash';
+
+// ----------------------------------------------------------------------
+
+const users = [...Array(24)].map((_, index) => ({
+    id: faker.datatype.uuid(),
+    avatarUrl: `/static/mock-images/avatars/avatar_${index + 1}.jpg`,
+    name: faker.name.findName(),
+    company: faker.company.companyName(),
+    isVerified: faker.datatype.boolean(),
+    status: sample(['active', 'banned']),
+    role: sample([
+        'Leader',
+        'Hr Manager',
+        'UI Designer',
+        'UX Designer',
+        'UI/UX Designer',
+        'Project Manager',
+        'Backend Developer',
+        'Full Stack Designer',
+        'Front End Developer',
+        'Full Stack Developer',
+    ]),
+}));
+
+export default users;
diff --git a/src/app/constants.js b/src/app/constants.js
@@ -0,0 +1,17 @@
+export const BASE_API_URL = 'http://localhost:5001/api/v1';
+
+export const action_status = {
+    IDLE: 'idle',
+    LOADING: 'loading',
+    SUCCEEDED: 'succeeded',
+    FAILED: 'failed'
+};
+
+export const MESSAGE_VARIANT = {
+    SUCCESS: 'success',
+    ERROR: 'error'
+};
+
+export const ROLES = {
+    ADMIN: 'admin'
+};
diff --git a/src/app/store.js b/src/app/store.js
@@ -1,8 +1,26 @@
 import { configureStore } from '@reduxjs/toolkit';
-import counterReducer from '../features/counter/counterSlice';
+import authReducer from '../features/auth/authSlice';
+import jobReducer from '../features/jobs/jobSlice';
+import messageReducer from '../features/message/messageSlice';
+import categoryReducer from '../features/categories/categorySlice';
+import userReducer from '../features/users/userSlice';
+import pointReducer from '../features/points/pointSlice';
+import paymentReducer from '../features/payments/paymentSlice';
+import statisticReducer from '../features/statistic/statisticSlice';
+import feedbackReducer from '../features/feedbacks/feedbackSlice';
+import commentReducer from '../features/comments/commentSlice';
 
 export const store = configureStore({
-  reducer: {
-    counter: counterReducer,
-  },
-});
+    reducer: {
+      auth: authReducer,
+      jobs: jobReducer,
+      message: messageReducer,
+      categories: categoryReducer,
+      users: userReducer,
+      points: pointReducer,
+      payments: paymentReducer,
+      statistic: statisticReducer,
+      feedbacks: feedbackReducer,
+      comments: commentReducer
+    },
+});
diff --git a/src/components/BreadcrumbRouter.jsx b/src/components/BreadcrumbRouter.jsx
@@ -0,0 +1,47 @@
+import React from 'react';
+import { Link as RouterLink, useLocation } from 'react-router-dom';
+import { Breadcrumbs, Link, Typography } from '@mui/material';
+import { styled } from '@mui/material/styles';
+
+
+const LinkRouter = (props) => (<Link {...props} component={RouterLink} />);
+const LinkRouterStyle = styled(LinkRouter)(({ theme }) => ({
+    color: theme.palette.primary.light,
+    textTransform: 'capitalize'
+}));
+
+const BreadcrumbRouter = (props) => {
+    const { exclude, breadcrumbNameMap, id } = props;
+    const { pathname } = useLocation();
+    let pathnames = pathname.split('/').filter((x) => x).filter((x) => x !== exclude);
+
+    if (id) {
+        pathnames = pathnames.filter((x) => x !== id);
+    }
+
+    return (
+        <Breadcrumbs aria-label='breadcrumb'>
+            <LinkRouterStyle underline='hover' to='/dashboard'>
+                {exclude ? `${exclude}` : 'Home' }
+            </LinkRouterStyle>
+            {
+                pathnames.map((value, index) => {
+                    const last = index === pathnames.length - 1;
+                    const to = `${pathnames.slice(0, index + 1).join('/')}`;
+
+                    return last ? (
+                        <Typography color='text.primary' key={to}>
+                            {breadcrumbNameMap[to]}
+                        </Typography>
+                    ) : (
+                        <LinkRouterStyle underline="hover" to={`/${exclude}/${to}`} key={to}>
+                            {breadcrumbNameMap[to]}
+                        </LinkRouterStyle>
+                    )
+                })
+            }
+        </Breadcrumbs>
+    );
+};
+
+export default BreadcrumbRouter;
diff --git a/src/components/CardInfo.jsx b/src/components/CardInfo.jsx
@@ -0,0 +1,37 @@
+import React from 'react';
+import { styled } from '@mui/material/styles';
+import { Typography, Card, CardContent, Link as MuiLink } from '@mui/material';
+
+const InfoAreaStyle = styled(Card)(({theme}) => ({
+    backgroundColor: 'rgb(255, 255, 255)',
+    color: 'rgb(33, 43, 54)',
+    transition: 'box-shadow 300ms cubic-bezier(0.4, 0, 0.2, 1) 0ms',
+    overflow: 'hidden',
+    position: 'relative',
+    boxShadow: theme.shadows[2],
+    borderRadius: theme.shape.borderRadius[5],
+    zIndex: 0
+}));
+
+const InfoContentStyle = styled('div')(({theme}) => ({
+    display: 'flex',
+    flexDirection: 'column',
+    padding: theme.spacing(2)
+}));
+
+const CardInfo = ({ children, title }) => {
+    return (
+        <InfoAreaStyle>
+            <CardContent>
+                <Typography variant='h5' sx={{ paddingInlineStart: 2, fontWeight: 700, lineHeight: 1.5 }}>
+                    {title}
+                </Typography>
+                <InfoContentStyle>
+                    {children}
+                </InfoContentStyle>
+            </CardContent>
+        </InfoAreaStyle>
+    );
+};
+
+export default CardInfo;