surajb/bb-order-management-app
Template
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

added refine integration and tailwind config theme

Browse Source
This commit is contained in:
surajb 2024-07-24 23:08:48 +05:30
parent a8fe2e603a
commit d83b15b926
14 changed files with 2043 additions and 953 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
package.json
View File

@ -20,12 +20,17 @@
"@fortawesome/fontawesome-svg-core": "^6.6.0",
"@fortawesome/free-solid-svg-icons": "^6.6.0",
"@fortawesome/react-fontawesome": "^0.2.2",
"@refinedev/core": "^4.53.0",
"@refinedev/kbar": "^1.3.12",
"@refinedev/mui": "^5.19.0",
"@refinedev/simple-rest": "^5.0.8",
"antd": "^5.18.2",
"axios": "^1.7.2",
"classnames": "^2.5.1",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-router-dom": "^6.23.1"
"react-router-dom": "^6.25.1",
"react-toastify": "^10.0.5"
},
"devDependencies": {
"@types/react": "^18.2.66",

60
src/App.jsx
View File

@ -1,48 +1,56 @@
import React, { useContext } from 'react';
import { BrowserRouter as Router, Route, Routes, Navigate } from 'react-router-dom';
import { Layout } from 'antd';
import LoginPage from './components/Auth/LoginPage';
import ResetPasswordRequest from './components/Auth/ResetPasswordRequest';
import AdminDashboard from './components/admin/AdminDashboard';
import EmployeeDashboard from './components/employee/EmployeeDashboard';
import CustomerList from './components/customer/CustomerList';
import AddCustomer from './components/customer/AddCustomer';
import Sidebar from './components/sidebar/Sidebar';
import CustomerMeasurements from './components/customer/CustomerMeasurements';
import { AuthProvider, AuthContext } from './contexts/AuthContext';
import EmployeeList from './components/admin/EmployeeList';
import AddEmployee from './components/admin/AddEmployee';
import EmployeeProfile from './components/admin/EmployeeProfile';
import React from "react";
import { BrowserRouter as Router, Route, Routes, Navigate } from "react-router-dom";
import { Layout } from "antd";
import LoginPage from "./components/Auth/LoginPage";
import ResetPasswordRequest from "./components/Auth/ResetPasswordRequest";
import AdminDashboard from "./pages/AdminDashboard";
import EmployeeDashboard from "./pages/EmployeeDashboard";
import CustomerList from "./components/customer/CustomerList";
import AddCustomer from "./components/customer/AddCustomer";
import Sidebar from "./components/sidebar/Sidebar";
import CustomerMeasurements from "./components/customer/CustomerMeasurements";
import { AuthProvider, AuthContext } from "./contexts/AuthContext";
import EmployeeList from "./components/admin/EmployeeList";
import AddEmployee from "./components/admin/AddEmployee";
import EmployeeProfile from "./components/admin/EmployeeProfile";
import { Refine } from "@refinedev/core";
import { RefineKbarProvider } from "@refinedev/kbar";
import { ToastContainer, toast } from "react-toastify";
import 'react-toastify/dist/ReactToastify.css';
const { Content } = Layout;
const App = () => {
const { user } = { name: 'Suraj' }; // useContext(AuthContext);
const { user } = { name: "Suraj" }; // useContext(AuthContext);
return (
<div className="min-h-screen flex w-full">
<Content className="flex-1 text-white">
<Router>
<RefineKbarProvider>
<Refine>
<AuthProvider>
<Router>
<div className="min-h-screen flex w-full">
<Content className="flex-1 text-white">
<Routes>
<Route exact path="/" element={<LoginPage />} />
<Route path="/reset-password" element={<ResetPasswordRequest />} />
<Route path="/employee/home" element={<EmployeeDashboard />} /> {/* Add HomePage route */}
<Route path="/employee/home" element={<EmployeeDashboard />} />
<Route path="/admin" element={<PrivateRoute><AdminDashboard /></PrivateRoute>} />
<Route path="/employee" element={<PrivateRoute><EmployeeDashboard /></PrivateRoute>} />
<Route path="/customers" element={<PrivateRoute><CustomerList /></PrivateRoute>} />
<Route path="/add-customer" element={<PrivateRoute><AddCustomer /></PrivateRoute>} />
<Route path="/employee/create-order" element={<CustomerList />} />
<Route path="/measurements" element={<CustomerMeasurements />} />
<Route path="employees" element={<PrivateRoute><EmployeeList /></PrivateRoute>} />
<Route path="/employees" element={<PrivateRoute><EmployeeList /></PrivateRoute>} />
<Route path="/add-employee" element={<PrivateRoute><AddEmployee /></PrivateRoute>} />
<Route path="/employee-profile" element={<PrivateRoute><EmployeeProfile /></PrivateRoute>} />
</Routes>
</Router>
</AuthProvider>
</Content>
</div>
</Content>
</div>
</AuthProvider>
</Refine>
</RefineKbarProvider>
<ToastContainer /> {/* Added ToastContainer for displaying notifications */}
</Router>
);
};

2
src/components/Auth/LoginPage.jsx
View File

@ -73,7 +73,7 @@ const LoginPage = () => {
className="input-field"
/>
<div className="forgot-password-container">
<a href="/reset-password">Forgot password?</a>
<a href="/reset-password">forgot password?</a>
</div>
<button type="submit" className="login-button">
login

6
src/components/Auth/ResetPasswordRequest.jsx
View File

@ -21,8 +21,8 @@ const ResetPasswordRequest = () => {
<div className="flex flex-row min-h-screen justify-center items-center">
<div className="reset-request-page flex items-center justify-center min-h-screen w-full md:w-1/2 lg:w-1/3 p-4">
<div className="w-full">
<h1>Reset Password</h1>
<p>Enter your email to receive password reset instructions.</p>
<h1>reset password</h1>
<p>enter your email to receive password reset instructions.</p>
{message && <p className="message">{message}</p>}
<form onSubmit={handleResetRequest} className="space-y-4">
<label htmlFor="email" className="block"></label>
@ -37,7 +37,7 @@ const ResetPasswordRequest = () => {
className="input-field"
/>
<button type="submit" className="reset-button">
Send Reset Instructions
send reset instructions
</button>
</form>
</div>

12
src/components/ExampleComponent.jsx Normal file
View File

@ -0,0 +1,12 @@
import React from "react";
import { toast } from "react-toastify";
const ExampleComponent = () => {
const handleClick = () => {
toast.success("This is a success notification!");
};
return <button onClick={handleClick}>Show Notification</button>;
};
export default ExampleComponent;

1
src/components/admin/AddEmployee.jsx
View File

@ -296,5 +296,4 @@ const AddEmployee = () => {
</div>
);
};
export default AddEmployee;

17
src/components/common/button.jsx Normal file
View File

@ -0,0 +1,17 @@
import React from 'react';
import './Button.css'; // Import the CSS file
const Button = ({ onClick, children, style, type = 'button' }) => {
return (
<button
type={type}
onClick={onClick}
className="custom-button"
style={style}
>
{children}
</button>
);
};
export default Button;

22
src/components/admin/AdminDashboard.jsx → src/pages/AdminDashboard.jsx
View File

@ -1,7 +1,7 @@
import React, { useEffect, useState } from 'react';
import { useNavigate } from 'react-router-dom';
import Sidebar from '../sidebar/Sidebar';
import '../../styles/AdminDashboard.css';
import Sidebar from '../components/sidebar/Sidebar';
import '../styles/AdminDashboard.css';
const AdminDashboard = () => {
const navigate = useNavigate();
@ -23,29 +23,33 @@ const AdminDashboard = () => {
<Sidebar />
<div className="dashboard-content">
<header className="dashboard-header">
<h1 className="header-title">Admin Dashboard</h1>
<p className="welcome-text">Welcome back, {userName}</p>
<h1 className="header-title">admin dashboard</h1>
<p className="welcome-text">welcome back, {userName}</p>
</header>
<main className="dashboard-main">
<div className="dashboard-buttons">
<img src="path_to_image" alt="Dashboard Graphic" className="dashboard-image" />
<div className="dashboard-main-content">
<img
src="path_to_image"
alt="Dashboard Graphic"
className="dashboard-image"
/>
<button
className="btn-primary"
onClick={() => handleClick('')}
>
View Orders
view orders
</button>
<button
className="btn-primary"
onClick={() => handleClick('/employees')}
>
View Employees
view employees
</button>
<button
className="btn-primary"
onClick={() => handleClick('')}
>
View Customers
view customers
</button>
</div>
</main>

12
src/components/employee/EmployeeDashboard.jsx → src/pages/EmployeeDashboard.jsx
View File

@ -1,7 +1,7 @@
import React, { useEffect, useState } from 'react';
import { useNavigate } from 'react-router-dom';
import Sidebar from '../sidebar/Sidebar';
import '../../styles/EmployeeDashboard.css';
import Sidebar from '../components/sidebar/Sidebar';
// import '../../styles/EmployeeDashboard.css';
const classNames = {
container: 'dashboard-container',
@ -39,7 +39,7 @@ const EmployeeDashboard = () => {
<h1 className={classNames.headerTitle}>Home</h1>
</div>
<div>
<p className={classNames.welcomeText}>Welcome back, {userName}</p>
<p className={classNames.welcomeText}>welcome back, {userName}</p>
</div>
</header>
<main className={classNames.main}>
@ -49,19 +49,19 @@ const EmployeeDashboard = () => {
className={classNames.button}
onClick={() => handleClick('/customers')}
>
Create a New Order
create a new order
</button>
<button
className={classNames.button}
onClick={() => handleClick('')}
>
View Orders
view orders
</button>
<button
className={classNames.button}
onClick={() => handleClick('')}
>
View Customers
view customers
</button>
</div>
</main>

115
src/styles/AdminDashboard.css
View File

@ -1,69 +1,66 @@
/* Dashboard.css */
.dashboard-container {
display: flex;
flex-direction: row;
}
display: flex;
flex-direction: row;
}
.dashboard-content {
width: 100%;
display: flex;
flex-direction: column;
min-height: 100vh;
color: white;
}
.dashboard-content {
width: 100%;
display: flex;
flex-direction: column;
min-height: 100vh;
color: white;
}
.dashboard-header {
width: 100%;
padding: 1rem;
display: flex;
justify-content: space-between;
align-items: center;
}
.dashboard-header {
width: 100%;
padding: 1rem;
display: flex;
justify-content: space-between;
align-items: center;
}
.header-title {
color: #0e355b;
font-size: 2rem;
font-weight: bold;
}
.header-title {
color: #0e355b;
font-size: 2rem;
font-weight: bold;
}
.welcome-text {
color: #4b5563;
}
.welcome-text {
color: #4b5563;
}
.dashboard-main {
flex: 1;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 1.5rem;
}
.dashboard-main {
flex: 1;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 1.5rem;
}
.dashboard-buttons {
width: 100%;
max-width: 48rem;
text-align: center;
}
.dashboard-main-content {
width: 100%;
max-width: 768px;
text-align: center;
}
.dashboard-image {
width: 100%;
border-radius: 0.375rem;
margin-bottom: 1.5rem;
}
.dashboard-image {
width: 100%;
border-radius: 0.375rem;
margin-bottom: 1.5rem;
}
.btn-primary {
width: 100%;
padding: 1rem;
background-color: #0e355b;
color: #d1d5db;
border-radius: 0.375rem;
font-weight: 600;
margin-bottom: 1rem;
transition: background-color 0.3s ease;
}
.btn-primary:hover {
background-color: #154676;
}
.btn-primary {
width: 100%;
padding: 1rem;
background-color: #0e355b;
color: #d1d5db;
border-radius: 0.375rem;
font-weight: 600;
margin-bottom: 1rem;
cursor: pointer;
}
.btn-primary:hover {
background-color: #154676;
}

113
src/styles/EmployeeDashboard.css
View File

@ -1,67 +1,66 @@
.dashboard-container {
display: flex;
flex-direction: row;
}
display: flex;
flex-direction: row;
}
.dashboard-content {
width: 100%;
display: flex;
flex-direction: column;
min-height: 100vh;
color: white;
}
.dashboard-content {
width: 100%;
display: flex;
flex-direction: column;
min-height: 100vh;
color: white;
}
.dashboard-header {
width: 100%;
padding: 1rem;
display: flex;
justify-content: space-between;
align-items: center;
}
.dashboard-header {
width: 100%;
padding: 1rem;
display: flex;
justify-content: space-between;
align-items: center;
}
.header-title {
color: #0e355b;
font-size: 2rem;
font-weight: bold;
}
.header-title {
color: #0e355b;
font-size: 2rem;
font-weight: bold;
}
.welcome-text {
color: #4b5563;
}
.welcome-text {
color: #4b5563;
}
.dashboard-main {
flex: 1;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 1.5rem;
}
.dashboard-main {
flex: 1;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 1.5rem;
}
.dashboard-main-content {
width: 100%;
max-width: 768px;
text-align: center;
}
.dashboard-main-content {
width: 100%;
max-width: 768px;
text-align: center;
}
.dashboard-image {
width: 100%;
border-radius: 0.375rem;
margin-bottom: 1.5rem;
}
.dashboard-image {
width: 100%;
border-radius: 0.375rem;
margin-bottom: 1.5rem;
}
.btn-primary {
width: 100%;
padding: 1rem;
background-color: #0e355b;
color: #d1d5db;
border-radius: 0.375rem;
font-weight: 600;
margin-bottom: 1rem;
cursor: pointer;
}
.btn-primary:hover {
background-color: #154676;
}
.btn-primary {
width: 100%;
padding: 1rem;
background-color: #0e355b;
color: #d1d5db;
border-radius: 0.375rem;
font-weight: 600;
margin-bottom: 1rem;
cursor: pointer;
}
.btn-primary:hover {
background-color: #154676;
}

32
tailwind.config.cjs
View File

@ -1,10 +1,36 @@
/** @type {import('tailwindcss').Config} */
module.exports = {
content: [
"./src/**/*.{js,jsx,ts,tsx}",
'./src/**/*.{html,js,jsx}',
],
theme: {
extend: {},
extend: {
colors: {
primary: '#0e355b',
'primary-dark': '#154676',
secondary: '#ffffff',
'primary-text': '#0e355b',
'secondary-text': '#4b5563',
'button-text': '#d1d5db',
},
fontFamily: {
sans: ['"Nunito Sans"', 'sans-serif'],
},
fontSize: {
base: '14px',
'h1': '24px',
'p': '16px',
'input': '16px',
'button': '18px',
},
screens: {
'sm': '640px',
'md': '768px',
'lg': '1024px',
'xl': '1280px',
'2xl': '1536px',
},
},
},
plugins: [],
}
};

13
vite.config.js
View File

@ -1,7 +1,12 @@
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
// vite.config.js
import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
// https://vitejs.dev/config/
export default defineConfig({
plugins: [react()],
})
resolve: {
alias: {
'@': '/src',
},
},
});

2548
yarn.lock
View File

File diff suppressed because it is too large Load Diff