From cb7ab37eb0f42465c1a4fecf7d28247157154b9e Mon Sep 17 00:00:00 2001 From: surajb Date: Mon, 22 Jul 2024 12:12:41 +0530 Subject: [PATCH] css and layout implementation --- src/components/Auth/LoginPage.jsx | 6 +- src/components/admin/AddEmployee.css | 18 + src/components/admin/AddEmployee.jsx | 375 +++++++++++------- src/components/admin/AdminDashboard.jsx | 10 +- src/components/admin/EmployeeList.jsx | 2 +- src/components/customer/AddCustomer.jsx | 169 +++++--- src/components/customer/CustomerList.css | 6 +- src/components/customer/CustomerList.jsx | 8 +- .../customer/CustomerMeasurements.jsx | 50 +-- src/components/employee/EmployeeDashboard.jsx | 10 +- src/components/sidebar/EmployeeSidebar.jsx | 59 +-- 11 files changed, 438 insertions(+), 275 deletions(-) create mode 100644 src/components/admin/AddEmployee.css diff --git a/src/components/Auth/LoginPage.jsx b/src/components/Auth/LoginPage.jsx index 55737b2..d91fdea 100644 --- a/src/components/Auth/LoginPage.jsx +++ b/src/components/Auth/LoginPage.jsx @@ -44,8 +44,8 @@ const LoginPage = () => {
-

Welcome Back

-

Be among the first to experience 3D magic! Register for private alpha.

+

welcome back

+

be among the first to experience 3D magic! register for private alpha.

{error &&

{error}

}
@@ -74,7 +74,7 @@ const LoginPage = () => { Forgot password?
diff --git a/src/components/admin/AddEmployee.css b/src/components/admin/AddEmployee.css new file mode 100644 index 0000000..979e0f1 --- /dev/null +++ b/src/components/admin/AddEmployee.css @@ -0,0 +1,18 @@ +.employee-image-container { + position: relative; + display: flex; + justify-content: center; + align-items: center; + } + + .employee-image-container button { + position: absolute; + bottom: -10px; + left: 50%; + transform: translateX(-50%); + } + + .input-underline:focus { + border-color: #4b5563; /* Adjust focus border color */ + } + \ No newline at end of file diff --git a/src/components/admin/AddEmployee.jsx b/src/components/admin/AddEmployee.jsx index 4ecfba4..ad8dedb 100644 --- a/src/components/admin/AddEmployee.jsx +++ b/src/components/admin/AddEmployee.jsx @@ -1,6 +1,8 @@ import React, { useState, useEffect } from 'react'; import { Link, useNavigate } from 'react-router-dom'; import Sidebar from '../sidebar/Sidebar'; +import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; +import { faChevronLeft } from '@fortawesome/free-solid-svg-icons'; import axiosInstance from '../../api/axiosConfig'; const AddEmployee = () => { @@ -17,25 +19,28 @@ const AddEmployee = () => { pincode: '', city_id: '', mobile: '', + image: null, }); const [cities, setCities] = useState([]); + const [imagePreview, setImagePreview] = useState(null); - useEffect(() => { - const fetchCities = async () => { - try { - const response = await axiosInstance.get('/cities'); - if (Array.isArray(response.data)) { - setCities(response.data); - } else { - console.error('Error: Data is not an array', response.data); - } - } catch (error) { - console.error('Error fetching cities:', error.response || error.message); - } - }; + // Uncomment to fetch cities data from backend + // useEffect(() => { + // const fetchCities = async () => { + // try { + // const response = await axiosInstance.get('/cities'); + // if (Array.isArray(response.data)) { + // setCities(response.data); + // } else { + // console.error('Error: Data is not an array', response.data); + // } + // } catch (error) { + // console.error('Error fetching cities:', error.response || error.message); + // } + // }; - fetchCities(); - }, []); + // fetchCities(); + // }, []); const handleInputChange = (e) => { const { name, value } = e.target; @@ -45,10 +50,30 @@ const AddEmployee = () => { }); }; + const handleImageChange = (e) => { + const file = e.target.files[0]; + if (file) { + setEmployeeData({ + ...employeeData, + image: file, + }); + setImagePreview(URL.createObjectURL(file)); + } + }; + const handleAddEmployeeSubmit = async (e) => { e.preventDefault(); + const formData = new FormData(); + Object.keys(employeeData).forEach((key) => { + formData.append(key, employeeData[key]); + }); + try { - await axiosInstance.post('http://localhost:5000/employees', employeeData); + await axiosInstance.post('http://localhost:5000/employees', formData, { + headers: { + 'Content-Type': 'multipart/form-data', + }, + }); navigate('/employees'); } catch (error) { console.error('Error adding employee:', error.response || error.message); @@ -60,144 +85,202 @@ const AddEmployee = () => {
-
-

creating employee account

- skip for now +
+ + + +

+ create employee account +

-
-
+
+
-
-
-
-
-
-
- - + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
-
- - -
-
- - -
-
- - -
-
- - -
-
- - -
-
- - -
-
- - -
-
- - -
-
- - -
-
- - -
-
-
-
diff --git a/src/components/admin/AdminDashboard.jsx b/src/components/admin/AdminDashboard.jsx index 3908ab9..b4dcc21 100644 --- a/src/components/admin/AdminDashboard.jsx +++ b/src/components/admin/AdminDashboard.jsx @@ -25,10 +25,10 @@ const AdminDashboard = () => {
-

Admin Dashboard

+

admin dashboard

-

Welcome back {userName}

+

welcome back {userName}

@@ -38,19 +38,19 @@ const AdminDashboard = () => { className="w-full py-4 bg-#0e355b text-#d1d5db rounded-md font-semibold mb-4 hover:bg-#154676" onClick={() => handleClick('')} > - View Orders + view orders
diff --git a/src/components/admin/EmployeeList.jsx b/src/components/admin/EmployeeList.jsx index feb1af1..ef4bb09 100644 --- a/src/components/admin/EmployeeList.jsx +++ b/src/components/admin/EmployeeList.jsx @@ -58,7 +58,7 @@ const EmployeeList = ({ className = '' }) => { d="M3 4a1 1 0 011-1h16a1 1 0 011 1v2.586a1 1 0 01-.293.707l-6.414 6.414a1 1 0 00-.293.707V17l-4 4v-6.586a1 1 0 00-.293-.707L3.293 7.293A1 1 0 013 6.586V4z" /> - Filter + filter

total employees: ({employees.length})

diff --git a/src/components/customer/AddCustomer.jsx b/src/components/customer/AddCustomer.jsx index db82c71..4530799 100644 --- a/src/components/customer/AddCustomer.jsx +++ b/src/components/customer/AddCustomer.jsx @@ -19,9 +19,12 @@ const AddCustomer = () => { pincode: '', city_id: '', mobile: '', + image: null, }); const [cities, setCities] = useState([]); + const [imagePreview, setImagePreview] = useState(null); + // Uncomment to fetch cities data from backend // useEffect(() => { // const fetchCities = async () => { // try { @@ -47,10 +50,30 @@ const AddCustomer = () => { }); }; + const handleImageChange = (e) => { + const file = e.target.files[0]; + if (file) { + setCustomerData({ + ...customerData, + image: file, + }); + setImagePreview(URL.createObjectURL(file)); + } + }; + const handleAddCustomerSubmit = async (e) => { e.preventDefault(); + const formData = new FormData(); + Object.keys(customerData).forEach((key) => { + formData.append(key, customerData[key]); + }); + try { - await axiosInstance.post('http://localhost:5000/customers', customerData); + await axiosInstance.post('http://localhost:5000/customers', formData, { + headers: { + 'Content-Type': 'multipart/form-data', + }, + }); navigate('/customers'); } catch (error) { console.error('Error adding customer:', error.response || error.message); @@ -63,37 +86,64 @@ const AddCustomer = () => {
- navigate(-1)} - className="text-#0e355b cursor-pointer hover:text-#d1d5db transition font-bold" - > - Add Customer - - Skip for now +
+ + + +

+ add customer +

+
+ skip for now
-
-
-

Customer Information

+

customer information

-

Measurements

+

measurements

- + { />
- + { />
- + { />
- - -
+ + +
- + { />
- + { />
- + { />
- + { />
- + { />
- +
- +
-
-
-
diff --git a/src/components/customer/CustomerList.css b/src/components/customer/CustomerList.css index db2bfd2..55d6829 100644 --- a/src/components/customer/CustomerList.css +++ b/src/components/customer/CustomerList.css @@ -46,15 +46,15 @@ } .customer-table th { - background-color: #09090B; + background-color: #ffffff; } .customer-table tbody tr:nth-child(odd) { - background-color: #09090B; + background-color: #ffffff; } .customer-table tbody tr:nth-child(even) { - background-color: #09090B; + background-color: #ffffff; } .customer-table tbody tr:hover { diff --git a/src/components/customer/CustomerList.jsx b/src/components/customer/CustomerList.jsx index 30929d1..6381c4d 100644 --- a/src/components/customer/CustomerList.jsx +++ b/src/components/customer/CustomerList.jsx @@ -32,12 +32,12 @@ const CustomerList = () => {
-

Customers List

+

customers list

@@ -55,9 +55,9 @@ const CustomerList = () => { d="M3 4a1 1 0 011-1h16a1 1 0 011 1v2.586a1 1 0 01-.293.707l-6.414 6.414a1 1 0 00-.293.707V17l-4 4v-6.586a1 1 0 00-.293-.707L3.293 7.293A1 1 0 013 6.586V4z" /> - Filter + filter
-

Total Customers ({customers.length})

+

total customers ({customers.length})

diff --git a/src/components/customer/CustomerMeasurements.jsx b/src/components/customer/CustomerMeasurements.jsx index 8539d5f..3e6e594 100644 --- a/src/components/customer/CustomerMeasurements.jsx +++ b/src/components/customer/CustomerMeasurements.jsx @@ -27,45 +27,45 @@ const CustomerMeasurements = () => {
-

Customer Measurements

+

customer measurements

skip for now
-

Upper Body Measurements

- Neck Circumference (in inch)}> - +

upper body measurements

+ neck circumference (in inch)}> + - Chest Circumference (in inch)}> - + chest circumference (in inch)}> + - Waist Circumference (in inch)}> - + waist circumference (in inch)}> + - Shoulder Width (in inch)}> - + shoulder width (in inch)}> + - Arm Length (in inch)}> - + arm length (in inch)}> + - Sleeve Length (in inch)}> - + sleeve length (in inch)}> + -

Lower Body Measurements

- Hip Circumference (in inch)}> - +

lower body measurements

+ hip circumference (in inch)}> + - Inseam (in inch)}> - + inseam (in inch)}> + - Out Seam (in inch)}> - + out seam (in inch)}> + - Thigh Circumference (in inch)}> - + thigh circumference (in inch)}> + - Ankle Circumference (in inch)}> - + ankle circumference (in inch)}> +
diff --git a/src/components/employee/EmployeeDashboard.jsx b/src/components/employee/EmployeeDashboard.jsx index 4c4396e..7d8d9f8 100644 --- a/src/components/employee/EmployeeDashboard.jsx +++ b/src/components/employee/EmployeeDashboard.jsx @@ -24,10 +24,10 @@ const HomePage = () => {
-

Home

+

home

-

Welcome back, {userName}

+

welcome back, {userName}

@@ -37,19 +37,19 @@ const HomePage = () => { className="w-full py-4 bg-#0e355b text-#d1d5db rounded-md font-semibold mb-4 hover:bg-#154676" onClick={() => handleClick('/customers')} > - Create a New Order + create a new order
diff --git a/src/components/sidebar/EmployeeSidebar.jsx b/src/components/sidebar/EmployeeSidebar.jsx index bcaf0cf..c9ec846 100644 --- a/src/components/sidebar/EmployeeSidebar.jsx +++ b/src/components/sidebar/EmployeeSidebar.jsx @@ -1,10 +1,6 @@ -import React, { useState } from 'react'; -import { Layout, Drawer, Button } from 'antd'; +import React from 'react'; +import { Layout } from 'antd'; import { Link } from 'react-router-dom'; -import { - MenuFoldOutlined, - MenuUnfoldOutlined, -} from '@ant-design/icons'; import BrookslogoIcon from '../../assets/thob-data/BrookslogoIcon.svg'; import HomeIcon from '../../assets/thob-data/HomeIcon.svg'; import AddCustomerIcon from '../../assets/thob-data/AddCustomerIcon.svg'; @@ -16,32 +12,21 @@ import LogoutIcon from '../../assets/thob-data/LogoutIcon.svg'; const { Sider } = Layout; const EmployeeSidebar = () => { - const [visible, setVisible] = useState(false); - - const showDrawer = () => { - setVisible(true); - }; - - const closeDrawer = () => { - setVisible(false); - }; - return ( - <> - - -
- - Home + +
+
+ + Brooks Bingham Logo
-
+
Home @@ -57,17 +42,15 @@ const EmployeeSidebar = () => { Profile - - Logout -
- - +
+
+ + Logout + +
+ ); }; export default EmployeeSidebar; - - - -