diff --git a/index.html b/index.html index 77ebe56..c78f026 100644 --- a/index.html +++ b/index.html @@ -1,13 +1,13 @@ - - - - - - - -
- - + + + + + MediStock + + +
+ + diff --git a/package-lock.json b/package-lock.json index 79497ed..490d99b 100644 --- a/package-lock.json +++ b/package-lock.json @@ -15,7 +15,8 @@ "framer-motion": "^6.5.1", "react": "^18.2.0", "react-dom": "^18.2.0", - "react-router-dom": "^6.10.0", + "react-icons": "^5.4.0", + "react-router-dom": "^6.28.0", "styled-components": "^6.1.13" }, "devDependencies": { @@ -6090,6 +6091,14 @@ "react": "^18.2.0" } }, + "node_modules/react-icons": { + "version": "5.4.0", + "resolved": "https://registry.npmjs.org/react-icons/-/react-icons-5.4.0.tgz", + "integrity": "sha512-7eltJxgVt7X64oHh6wSWNwwbKTCtMfK35hcjvJS0yxEAhPM8oUKdS3+kqaW1vicIltw+kR2unHaa12S9pPALoQ==", + "peerDependencies": { + "react": "*" + } + }, "node_modules/react-is": { "version": "16.13.1", "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz", @@ -11577,6 +11586,12 @@ "scheduler": "^0.23.0" } }, + "react-icons": { + "version": "5.4.0", + "resolved": "https://registry.npmjs.org/react-icons/-/react-icons-5.4.0.tgz", + "integrity": "sha512-7eltJxgVt7X64oHh6wSWNwwbKTCtMfK35hcjvJS0yxEAhPM8oUKdS3+kqaW1vicIltw+kR2unHaa12S9pPALoQ==", + "requires": {} + }, "react-is": { "version": "16.13.1", "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz", diff --git a/package.json b/package.json index dfa5994..1489e2b 100644 --- a/package.json +++ b/package.json @@ -21,7 +21,8 @@ "framer-motion": "^6.5.1", "react": "^18.2.0", "react-dom": "^18.2.0", - "react-router-dom": "^6.10.0", + "react-icons": "^5.4.0", + "react-router-dom": "^6.28.0", "styled-components": "^6.1.13" }, "devDependencies": { diff --git a/public/favicon.ico b/public/favicon.ico new file mode 100644 index 0000000..aea6434 Binary files /dev/null and b/public/favicon.ico differ diff --git a/public/vite.svg b/public/vite.svg deleted file mode 100644 index e7b8dfb..0000000 --- a/public/vite.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/src/App.jsx b/src/App.jsx index ac3e2d0..45ed06d 100644 --- a/src/App.jsx +++ b/src/App.jsx @@ -1,7 +1,6 @@ import { createBrowserRouter, RouterProvider } from 'react-router-dom'; import { - AddDrug, AdminAddUser, Alerts, Dashboard, @@ -15,6 +14,9 @@ import { Error, EditDrug, HomeLayout, + AllDrugs, + PastOrders, + AddDrug, } from './pages'; const router = createBrowserRouter([ @@ -27,10 +29,6 @@ const router = createBrowserRouter([ index: true, element: , }, - { - path: 'dashboard', - element: , - }, { path: 'register', element: , @@ -39,49 +37,57 @@ const router = createBrowserRouter([ path: 'login', element: , }, + { + path: 'dashboard', + element: , + children: [ + { + index: 'true', + element: , + }, + { + path: 'adduser', + element: , + }, + { + path: 'dispense', + element: , + }, + { + path: 'alerts', + element: , + }, + { + path: 'reports', + element: , + }, + { + path: 'store', + element: , + }, + { + path: 'user', + element: , + }, + { + path: 'edit', + element: , + }, + { + path: 'add', + element: , + }, + { + path: 'past-orders', + element: , + }, + ], + }, ], }, - - { - path: '/alerts', - element: , - }, - { - path: '/adddrug', - element: , - }, - { - path: '/editdrug', - element: , - }, - { - path: '/dispense', - element: , - }, - { - path: '/store', - element: , - }, - { - path: '/user', - element: , - }, - { - path: '/adminuser', - element: , - }, - { - path: '/reports', - element: , - }, ]); const App = () => { - return ( - <> - - - ); + return ; }; - export default App; diff --git a/src/assets/not-found.svg b/src/assets/not-found.svg new file mode 100644 index 0000000..1799f83 --- /dev/null +++ b/src/assets/not-found.svg @@ -0,0 +1 @@ +page not found \ No newline at end of file diff --git a/src/components/AddMedicineForm.jsx b/src/components/AddMedicineForm.jsx index e12b826..a1b1482 100644 --- a/src/components/AddMedicineForm.jsx +++ b/src/components/AddMedicineForm.jsx @@ -1,4 +1,3 @@ -import React from 'react'; import { useEffect, useRef } from 'react'; import PropTypes from 'prop-types'; import styled from 'styled-components'; @@ -11,23 +10,21 @@ const AddMedicineForm = ({ id, value, handleMedChange, placeholder }) => { }, [value]); return ( -
- -
+ ); }; @@ -43,20 +40,16 @@ export default AddMedicineForm; export const FormField = styled.div` display: flex; flex-direction: column; - gap: 0.4rem; /* Adjust spacing between label and input */ `; export const StyleInput = styled.input` - text-size: 1rem; width: 100%; - border: 1.5px solid #000; - border-radius: 4px; - display: flex; - flex-direction: column; - align-items: flex-start; - padding: 1em; - margin: 0rem; - color: #000; + padding: 0.375rem 0.75rem; + border-radius: var(--border-radius); + border: 1px solid var(--grey-300); + color: black; + height: 35px; + text-transform: uppercase; /* Placeholder text color */ &::placeholder { diff --git a/src/components/BigSidebar.jsx b/src/components/BigSidebar.jsx new file mode 100644 index 0000000..4b3381a --- /dev/null +++ b/src/components/BigSidebar.jsx @@ -0,0 +1,84 @@ +import styled from 'styled-components'; +import Logo from './Logo'; +import NavLinks from './NavLinks'; +import { useDashboardContext } from '../pages/Dashboard'; + +const BigSidebar = () => { + const { showSidebar } = useDashboardContext(); + return ( + +
+
+
+ +
+ +
+
+ + ); +}; + +export default BigSidebar; + +const Wrapper = styled.aside` + display: none; + @media (min-width: 992px) { + display: block; + box-shadow: 1px 0px 0px 0px rgba(0, 0, 0, 0.1); + .sidebar-container { + background: white; + min-height: 100vh; + height: 100%; + width: 250px; + margin-left: -250px; + transition: margin-left 0.3s ease-in-out; + } + .content { + position: sticky; + top: 0; + } + .show-sidebar { + margin-left: 0; + } + header { + height: 6rem; + display: flex; + align-items: center; + justify-content: center; + padding-left: 2rem; + padding-right: 2rem; + } + .nav-links { + padding-top: 2rem; + display: flex; + flex-direction: column; + } + .nav-link { + display: flex; + align-items: center; + color: var(--color-blue-dark); + padding: 1rem 0; + padding-left: 2rem; + text-transform: capitalize; + transition: padding-left 0.3s ease-in-out; + } + .nav-link:hover { + padding-left: 3rem; + color: var(--color-green-light); + transition: var(--transition); + } + .icon { + font-size: 1.5rem; + margin-right: 1rem; + display: grid; + place-items: center; + } + .active { + color: var(--color-green-light); + } + .pending { + background: var(--background-color); + } + } +`; diff --git a/src/components/LogoutContainer.jsx b/src/components/LogoutContainer.jsx new file mode 100644 index 0000000..56bd4e4 --- /dev/null +++ b/src/components/LogoutContainer.jsx @@ -0,0 +1,73 @@ +import { useDashboardContext } from '../pages/Dashboard'; +import { useState } from 'react'; +import { FaUserCircle } from 'react-icons/fa'; +import { TiArrowSortedDown } from 'react-icons/ti'; + +import styled from 'styled-components'; + +const LogoutContainer = () => { + const [showLogout, setShowLogout] = useState(false); + const { user, logoutUser } = useDashboardContext(); + return ( + + +
+ +
+ + ); +}; +const Wrapper = styled.div` + position: relative; + .logout-btn { + display: flex; + align-items: center; + justify-content: center; + gap: 0 0.5rem; + } + .img { + width: 25px; + height: 25px; + border-radius: 50%; + } + .dropdown { + position: absolute; + top: 45px; + left: 0; + width: 100%; + box-shadow: var(--shadow-2); + text-align: center; + visibility: hidden; + border-radius: var(--border-radius); + background: var(--color-blue-dark); + } + .show-dropdown { + visibility: visible; + } + .dropdown-btn { + border-radius: var(--border-radius); + padding: 0.5rem; + background: transparent; + border-color: transparent; + color: var(--white); + letter-spacing: var(--letter-spacing); + text-transform: capitalize; + cursor: pointer; + width: 100%; + height: 100%; + padding-top: 1rem; + } +`; +export default LogoutContainer; diff --git a/src/components/NavLinks.jsx b/src/components/NavLinks.jsx new file mode 100644 index 0000000..35a7a22 --- /dev/null +++ b/src/components/NavLinks.jsx @@ -0,0 +1,30 @@ +import { useDashboardContext } from '../pages/Dashboard'; +import links from '../utilities/links'; +import { NavLink } from 'react-router-dom'; + +const NavLinks = ({ isBigSidebar }) => { + const { toggleSidebar, user } = useDashboardContext(); + console.log(user); + return ( +
+ {links.map((link) => { + const { text, path, icon } = link; + return ( + + {icon} + {text} + + ); + })} +
+ ); +}; + +export default NavLinks; diff --git a/src/components/Navbar.jsx b/src/components/Navbar.jsx new file mode 100644 index 0000000..e91952d --- /dev/null +++ b/src/components/Navbar.jsx @@ -0,0 +1,77 @@ +import styled from 'styled-components'; +import Logo from './Logo'; +import { FaAlignLeft } from 'react-icons/fa'; +import { useDashboardContext } from '../pages/Dashboard'; +import { LogoutContainer } from '.'; + +const Navbar = () => { + const { toggleSidebar } = useDashboardContext(); + return ( + +
+ +
+ +

MediStock

+
+
+ +
+
+ + ); +}; + +export default Navbar; + +const Wrapper = styled.nav` + height: var(--nav-height); + display: flex; + align-items: center; + justify-content: center; + box-shadow: 0 1px 0 0 rgba(0, 0, 0, 0.1); + background: #fff; + .nav-center { + display: flex; + width: 90vw; + align-items: center; + justify-content: space-between; + } + .toggle-btn { + background: transparent; + border-color: transparent; + font-size: 1.75rem; + color: var(--color-blue-dark); + cursor: pointer; + display: flex; + align-items: center; + } + .logo-text { + display: none; + } + .logo { + display: flex; + align-items: center; + width: 100px; + } + .btn-container { + display: flex; + align-items: center; + } + @media (min-width: 992px) { + position: sticky; + top: 0; + .nav-center { + width: 90%; + } + .logo { + display: none; + } + .logo-text { + display: block; + color: var(--color-blue-dark); + } + } +`; diff --git a/src/components/SideBarDash.jsx b/src/components/SideBarDash.jsx new file mode 100644 index 0000000..49a9466 --- /dev/null +++ b/src/components/SideBarDash.jsx @@ -0,0 +1,18 @@ +import { List, ListItem, Icon } from '@chakra-ui/react'; +import { Link } from 'react-router-dom'; +import { IoClose } from 'react-icons/io5'; + +const SideBarDash = () => { + return ( + <> + + + + Dashboard + + + + ); +}; + +export default SideBarDash; diff --git a/src/components/SmallSidebar.jsx b/src/components/SmallSidebar.jsx new file mode 100644 index 0000000..82dcce2 --- /dev/null +++ b/src/components/SmallSidebar.jsx @@ -0,0 +1,98 @@ +import styled from 'styled-components'; +import { useDashboardContext } from '../pages/Dashboard'; +import { CgClose } from 'react-icons/cg'; +import logo from '../assets/logo.svg'; +import NavLinks from './NavLinks'; + +const SmallSidebar = () => { + const { showSidebar, toggleSidebar } = useDashboardContext(); + return ( + +
+
+ + + logo + +
+
+ + ); +}; + +export default SmallSidebar; + +const Wrapper = styled.aside` + /* larger screens doesn't display */ + @media (min-width: 992px) { + display: none; + } + .sidebar-container { + position: fixed; + inset: 0; + background: rgba(0, 0, 0, 0.7); + display: flex; + justify-content: center; + align-items: center; + z-index: -1; + opacity: 0; + transition: var(--transition); + visibility: hidden; + } + .show-sidebar { + z-index: 99; + opacity: 1; + visibility: visible; + } + .content { + background: white; + width: var(--fluid-width); + height: 95vh; + border-radius: var(--border-radius); + padding: 4rem 2rem; + position: relative; + display: flex; + align-items: center; + flex-direction: column; + } + .close-btn { + position: absolute; + top: 10px; + left: 10px; + background: transparent; + border-color: transparent; + font-size: 3rem; + color: black; + cursor: pointer; + } + .logo { + width: 40%; + } + .nav-links { + padding-top: 2rem; + display: flex; + flex-direction: column; + } + .nav-link { + display: flex; + align-items: center; + color: var(--color-blue-dark); + padding: 1rem 0; + text-transform: lowercase; + transition: var(--transition); + } + .nav-link:hover { + color: var(--color-green-light); + } + .icon { + font-size: 2.5rem; + margin-right: 1rem; + display: grid; + place-items: center; + } + .active { + color: var(--color-green-light); + } +`; diff --git a/src/components/index.jsx b/src/components/index.jsx index 2e5d653..ca2a684 100644 --- a/src/components/index.jsx +++ b/src/components/index.jsx @@ -1,2 +1,9 @@ export { default as Logo } from './Logo.jsx'; export { default as FormRow } from './FormRow.jsx'; +export { default as Navbar } from './Navbar.jsx'; +export { default as BigSidebar } from './BigSidebar.jsx'; +export { default as SmallSidebar } from './SmallSidebar.jsx'; +export { default as NavLinks } from './NavLinks.jsx'; +export { default as LogoutContainer } from './LogoutContainer.jsx'; +export { default as SideBarDash } from './SideBarDash.jsx'; +export { default as AddMedicineForm } from './AddMedicineForm.jsx'; diff --git a/src/global.css b/src/global.css deleted file mode 100644 index 623fd3f..0000000 --- a/src/global.css +++ /dev/null @@ -1,197 +0,0 @@ -/* GLOBAL STYLES */ -* { - margin: 0; - padding: 0; - box-sizing: border-box; -} - -html { - font-size: 100%; -} /*16px*/ - -:root { - /* main colors */ - --color-green-dark: #519872; - --color-green-med: #a4b494; - --color-green-light: #bec5ad; - --color-blue-dark: #28535c; - --color-blue-light: #356a82; - - /* OTHER colors */ - --primary-50: #e0fcff; - --primary-100: #bef8fd; - --primary-200: #87eaf2; - --primary-300: #54d1db; - --primary-400: #38bec9; - --primary-500: #2cb1bc; - --primary-600: #14919b; - --primary-700: #0e7c86; - --primary-800: #0a6c74; - --primary-900: #044e54; - - /* greys */ - --grey-50: #f8fafc; - --grey-100: #f1f5f9; - --grey-200: #e2e8f0; - --grey-300: #cbd5e1; - --grey-400: #94a3b8; - --grey-500: #64748b; - --grey-600: #475569; - --grey-700: #334155; - --grey-800: #1e293b; - --grey-900: #0f172a; - /* rest of the colors */ - --black: #222; - --white: #fff; - /* DEFAULTS */ - --background-color: --grey-50; - --text-color: #222; - - /* OTHERS */ - --border-radius: 0.4rem; - --letter-spacing: 1px; - --transition: 0.3s ease-in-out all; - --max-width: 1120px; - --fixed-width: 600px; - --fluid-width: 90vw; - /* box shadow*/ - --shadow-1: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06); - --shadow-2: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); - --shadow-3: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); - --shadow-4: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04); - --nav-height: 6rem; - /* TEXT */ - --small-text: 0.875rem; - --extra-small-text: 0.7em; -} - -body { - background: var(--grey-50); - color: var(--text-color); - font-family: Roboto, sans-serif; - font-weight: 400; - line-height: 1; -} - -body.active-modal { - overflow: hidden; -} - -h1, -h2, -h3, -h4, -h5 { - margin: 0; - font-weight: 400; - line-height: 1; - letter-spacing: var(--letter-spacing); -} - -h1 { - font-size: clamp(2rem, 5vw, 5rem); /* Large heading */ -} - -h2 { - font-size: clamp(1.5rem, 3vw, 3rem); /* Medium heading */ -} - -h3 { - font-size: clamp(1.25rem, 2.5vw, 2.5rem); /* Small heading */ -} - -h4 { - font-size: clamp(1rem, 2vw, 2rem); /* Extra small heading */ -} - -h5 { - font-size: clamp(0.875rem, 1.5vw, 1.5rem); /* Tiny heading */ -} - -a { - text-decoration: none; -} -ul { - list-style-type: none; - padding: 0; -} - -.img { - width: 100%; - display: block; - object-fit: cover; -} - -/* BUTTONS */ -.btn { - cursor: pointer; - color: var(--white); - background: var(--grey-600); - border: transparent; - border-radius: var(--border-radius); - letter-spacing: var(--letter-spacing); - padding: 1rem 4rem; - box-shadow: var(--shadow-1); - transition: var(--transition); - text-transform: capitalize; - display: inline-block; -} -.btn:hover { - background: var(--grey-600); - box-shadow: var(--shadow-3); -} - -.btn-block { - width: 100%; -} - -/* FORMS */ - -.form { - width: 90vw; - max-width: var(--fixed-width); - border-radius: var(--border-radius); - box-shadow: var(--shadow-2); - padding: 2rem 2.5rem; - margin: 3rem auto; -} -.form-label { - display: block; - font-size: var(--small-text); - margin-bottom: 0.75rem; - text-transform: capitalize; - letter-spacing: var(--letter-spacing); - line-height: 1.5; -} -.form-input, -.form-textarea, -.form-select { - width: 100%; - padding: 0.375rem 0.75rem; - border-radius: var(--border-radius); - background: var(--grey-600); - border: 1px solid var(--grey-300); - color: var(--text-color); -} -.form-input, -.form-select, -.form-btn { - height: 35px; -} -.form-row { - margin-bottom: 1rem; -} - -.form-textarea { - height: 7rem; -} - -.title { - text-align: center; -} - -.container { - width: var(--fluid-width); - max-width: var(--max-width); - margin: 0 auto; -} diff --git a/src/index.css b/src/index.css index ea0e30e..928c308 100644 --- a/src/index.css +++ b/src/index.css @@ -16,6 +16,7 @@ html { --color-green-light: #bec5ad; --color-blue-dark: #28535c; --color-blue-light: #356a82; + --color-alert: #a25646; /* OTHER colors */ --primary-50: #e0fcff; diff --git a/src/main.jsx b/src/main.jsx index 52bb2c9..1ca68e3 100644 --- a/src/main.jsx +++ b/src/main.jsx @@ -1,11 +1,13 @@ import React from 'react'; +import { ChakraProvider, defaultSystem } from '@chakra-ui/react'; import ReactDOM from 'react-dom/client'; -import './index.css'; import App from './App.jsx'; -import './global.css'; +import './index.css'; ReactDOM.createRoot(document.getElementById('root')).render( - + + + ); diff --git a/src/pages/AddDrug.jsx b/src/pages/AddDrug.jsx index 77bc6d7..31dd070 100644 --- a/src/pages/AddDrug.jsx +++ b/src/pages/AddDrug.jsx @@ -1,6 +1,7 @@ import React, { useState, useEffect } from 'react'; import PropTypes from 'prop-types'; import AddMedicineForm from '../components/AddMedicineForm'; +import Logo from '../components/Logo'; import styled from 'styled-components'; @@ -78,7 +79,8 @@ export default function AddDrug({ addDrugs }) {
-

ADD DRUG

+ +

ADD DRUG

{Object.entries(formData).map(([id, value]) => (
@@ -104,16 +106,18 @@ export default function AddDrug({ addDrugs }) { /> - - Min Amount - - +
+ + Min Amount + + +
@@ -145,77 +149,86 @@ AddDrug.propTypes = { drugs: PropTypes.arrayOf(PropTypes.object), // Optional array prop }; -export const Wrapper = styled.div` - display: flex; - justify-content: space-around; - flex-direction: row; - gap: 10px; - width: 100%; - padding: 4rem 0em 2rem 3rem; - margin: 3rem; - margin: 0; +export const Wrapper = styled.section` + min-height: 100vh; + display: grid; align-items: center; - text-align: left; - font-size: 2rem; + h4 { + text-align: center; + margin-bottom: 1.38rem; + } + .logo { + display: block; + margin: 0 auto; + margin-bottom: 1.38rem; + } `; -export const FormField = styled.div` - display: flex; - flex-direction: column; - gap: 0.4rem; /* Adjust spacing between label and input */ -`; +export const FormField = styled.div``; export const AddForm = styled.form` - display: flex; - flex-direction: column; - gap: 1rem; - padding: 1rem; - background-color: #f9f9f9; - border-radius: 8px; - width: 100%; + width: 90vw; + max-width: 400px; + border-top: 5px solid var(--color-blue-dark); + border-radius: var(--border-radius); + box-shadow: var(--shadow-2); + padding: 2rem 2.5rem; + margin: 3rem auto; `; export const StyledLabel = styled.label` - text-align: left; - font-size: 1rem; /* Smaller font size for the label */ - color: #; + text-transform: lowercase; + display: block; + font-size: var(--small-text); + margin-bottom: 0.75rem; + text-transform: capitalize; + letter-spacing: var(--letter-spacing); + line-height: 1.5; `; export const FormSection = styled.div` - display: flex; - justify-content: space-between; /* Adjust space between fields */ - gap: 1rem; /* Add space between the two fields */ + width: 90vw; + max-width: var(--fixed-width); + border-radius: var(--border-radius); + box-shadow: var(--shadow-2); + padding: 2rem 2.5rem; + margin: 3rem auto; `; export const Fieldwrapper = styled.div` - display: flex; - flex-direction: column; /* Labels and inputs stack vertically */ - gap: 0.4rem; /* Spacing between the label and input */ - flex: 1; + .form-row { + margin-bottom: 0.5rem; + } input { - padding: 0.5rem; - font-size: 1rem; - border: 1px solid #ccc; - border-radius: 4px; + text-transform: uppercase; + width: 100%; + padding: 0.375rem 0.75rem; + border-radius: var(--border-radius); + border: 1px solid var(--grey-300); + color: var(--text-color); + height: 35px; + background-color: white; } - label { font-size: 0.9rem; - color: #333; + text-transform: lowercase; } `; export const AddButton = styled.button` - background-color: rgb(34, 63, 75); - color: white; - border-radius: 8px; - border: 1px solid transparent; - padding: 0.2em 3em; /* Smaller padding */ - margin: 1em 0 4em 0; - font-size: 0.8em; /* Smaller font size */ - font-family: inherit; + margin-top: 1rem; + background-color: var(--color-blue-dark); + width: 100%; cursor: pointer; - transition: border-color 0.25s; + color: var(--white); + border: transparent; + border-radius: var(--border-radius); + letter-spacing: var(--letter-spacing); + padding: 1rem 4rem; + box-shadow: var(--shadow-1); + transition: var(--transition); + text-transform: capitalize; + display: inline-block; `; export const ButtonModal = styled.div` diff --git a/src/pages/AdminAddUser.jsx b/src/pages/AdminAddUser.jsx index 9c8a93d..b73afd3 100644 --- a/src/pages/AdminAddUser.jsx +++ b/src/pages/AdminAddUser.jsx @@ -1,9 +1,90 @@ +import styled from 'styled-components'; +import { FormRow, Logo } from '../components'; + const AdminAddUser = () => { return ( -
-

Admin Add Drug

-
+ +
+ +

Add Employee

+ + + + + + + +
); }; export default AdminAddUser; + +const Wrapper = styled.section` + display: grid; + .logo { + display: block; + margin: 0 auto; + margin-bottom: 1.38rem; + } + .form { + max-width: 400px; + border-top: 5px solid var(--color-blue-dark); + } + .form-label { + text-transform: lowercase; + } + .form-input { + background-color: var(--grey-50); + text-transform: uppercase; + } + h4 { + text-align: center; + margin-bottom: 1.38rem; + } + p { + margin-top: 1rem; + text-align: center; + line-height: 1.5; + } + .btn { + margin-top: 1rem; + } + .member-btn { + color: var(--primary-500); + letter-spacing: var(--letter-spacing); + margin-left: 0.25rem; + } +`; diff --git a/src/pages/Alerts.jsx b/src/pages/Alerts.jsx index 11d76a4..0a2c456 100644 --- a/src/pages/Alerts.jsx +++ b/src/pages/Alerts.jsx @@ -1,9 +1,38 @@ +import styled from 'styled-components'; + const Alerts = () => { return ( -
-

Alerts

-
+ +
+
+
+
+
+ ); }; export default Alerts; + +const Wrapper = styled.section` + .alert-container { + display: flex; + justify-content: space-between; + align-items: center; + } + .alert1 { + background-color: red; + height: 70vh; + width: 30vw; + } + .alert2 { + background-color: orange; + height: 70vh; + width: 30vw; + } + .alert3 { + background-color: yellow; + height: 70vh; + width: 30vw; + } +`; diff --git a/src/pages/AllDrugs.jsx b/src/pages/AllDrugs.jsx new file mode 100644 index 0000000..a43cdb2 --- /dev/null +++ b/src/pages/AllDrugs.jsx @@ -0,0 +1,157 @@ +import styled from 'styled-components'; +import { IoIosSearch } from 'react-icons/io'; +import { FaFilter } from 'react-icons/fa'; +import { drugData } from '../../data'; +import { TbBellFilled } from 'react-icons/tb'; + +const AllDrugs = () => { + const columnLabels = [ + 'name', + 'generic', + 'class', + 'quantity', + 'expiration date', + 'lot #', + 'ndc #', + 'view/edit/delete', + ]; + + return ( + + {/* */} +
+
+ +
+
+
+ +
+
+
+ +
+ +
+
+
+
+ {/* */} +
+ {/* Render column headers */} + {columnLabels.map((label, index) => ( +
+ {label} +
+ ))} + {/* Render rows dynamically */} + {drugData.map((drug, rowIndex) => + columnLabels.map((label, colIndex) => ( +
+ {drug[label] || ''} +
+ )) + )} +
+ + ); +}; + +export default AllDrugs; + +const Wrapper = styled.section` + .centered-container { + display: flex; + justify-content: space-between; + align-items: center; + height: 10vh; + background-color: #f5f5f5; + border-radius: 8px; + background-color: #fff; + box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); + } + .left-filter-box { + margin-right: 3rem; + } + .bell-icon-box { + align-self: self-start; + padding-top: 2px; + } + .filter-search-box { + display: flex; + align-items: center; + justify-content: center; + } + .filter-button { + border: 15px solid var(--color-green-light); + border-radius: 50%; + } + .filter-icon { + background: var(--color-green-light); + color: white; + font-size: 1.5rem; + } + + .bell-button { + border: 15px solid var(--color-alert); + border-radius: 50%; + } + .bell-icon { + font-size: 1.5rem; + background-color: var(--color-alert); + color: white; + } + .search-icon { + font-size: 2rem; + padding-right: 1rem; + font-weight: bold; + color: var(--color-blue-dark); + } + .search-box { + display: flex; + justify-content: center; + align-items: center; + padding: 20px; + } + + .search-input { + width: 400px; + padding: 10px; + border: 1px solid #ddd; + border-radius: 4px; + font-size: 16px; + } + + .search-input:focus { + outline: none; + border-color: var(--color-blue-dark); + box-shadow: 0 0 4px rgba(0, 123, 255, 0.5); + } + .grid-container { + display: grid; + grid-template-columns: repeat(8, 1fr); + gap: 10px; + padding: 10px; + } + + .grid-item { + padding: 20px; + border: 1px solid #ccc; + text-align: left; + font-size: 1rem; + text-transform: lowercase; + box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); + border-radius: var(--border-radius); + background-color: #fff; + } + + .grid-header { + font-weight: bold; + background-color: var(--color-green-med); + color: var(--color-blue-dark); + } +`; diff --git a/src/pages/Dashboard.jsx b/src/pages/Dashboard.jsx index 7aa37bd..9e9ef12 100644 --- a/src/pages/Dashboard.jsx +++ b/src/pages/Dashboard.jsx @@ -1,9 +1,66 @@ +import { useState, createContext, useContext } from 'react'; +import { Outlet } from 'react-router-dom'; +import styled from 'styled-components'; +import { BigSidebar, Navbar, SmallSidebar } from '../components'; + +const DashboardContext = createContext(); + const Dashboard = () => { + const user = { name: 'john' }; + const [showSidebar, setShowSidebar] = useState(false); + + const toggleSidebar = () => { + setShowSidebar(!showSidebar); + }; + + const logoutUser = async () => { + console.log('logout user'); + }; + return ( -
-

Dashboard

-
+ + +
+ + +
+ +
+ +
+
+
+ + ); }; +export const useDashboardContext = () => useContext(DashboardContext); export default Dashboard; + +const Wrapper = styled.section` + .dashboard { + display: grid; + grid-template-columns: 1fr; + } + .dashboard-page { + width: 90vw; + margin: 0 auto; + padding: 2rem 0; + } + @media (min-width: 992px) { + .dashboard { + grid-template-columns: auto 1fr; + } + .dashboard-page { + width: 90%; + } + } +`; diff --git a/src/pages/DispenseDrug.jsx b/src/pages/DispenseDrug.jsx index e53a376..c3a9e2f 100644 --- a/src/pages/DispenseDrug.jsx +++ b/src/pages/DispenseDrug.jsx @@ -1,9 +1,109 @@ +import styled from 'styled-components'; +import { FormRow, Logo } from '../components'; +import { MdOutlineQrCodeScanner } from 'react-icons/md'; + const DispenseDrug = () => { return ( -
-

Dispense a drug

-
+ +
+ +

Dispense Drug

+ + + + + + + + +
); }; export default DispenseDrug; + +const Wrapper = styled.section` + min-height: 100vh; + display: grid; + align-items: center; + .logo { + display: block; + margin: 0 auto; + margin-bottom: 1.38rem; + } + .form { + max-width: 400px; + border-top: 5px solid var(--color-blue-dark); + } + .form-label { + text-transform: lowercase; + } + .form-input { + background-color: var(--grey-50); + text-transform: uppercase; + } + h4 { + text-align: center; + margin-bottom: 1.38rem; + } + p { + margin-top: 1rem; + text-align: center; + line-height: 1.5; + } + .btn { + margin-top: 1rem; + } + .member-btn { + color: var(--primary-500); + letter-spacing: var(--letter-spacing); + margin-left: 0.25rem; + } + .secondary { + background-color: var(--color-green-med); + display: flex; + justify-content: center; + align-items: center; + padding-top: 0.6rem; + padding-bottom: 0.6rem; + } + .scan-icon { + padding-right: 10px; + font-size: 2rem; + } +`; diff --git a/src/pages/EditDrug.jsx b/src/pages/EditDrug.jsx index ca9e63f..72713f6 100644 --- a/src/pages/EditDrug.jsx +++ b/src/pages/EditDrug.jsx @@ -1,9 +1,7 @@ +import React from 'react'; + const EditDrug = () => { - return ( -
-

Edit Drug

-
- ); + return
; }; export default EditDrug; diff --git a/src/pages/Error.jsx b/src/pages/Error.jsx index a270c4d..cf66781 100644 --- a/src/pages/Error.jsx +++ b/src/pages/Error.jsx @@ -1,14 +1,59 @@ import { Link, useRouteError } from 'react-router-dom'; +import styled from 'styled-components'; +import img from '../assets/not-found.svg'; const Error = () => { const error = useRouteError(); console.log(error); + if (error.status === 404) { + return ( + +
+ not-found +

Oops! Page not found!

+

We cant seem to find the page you are looking for...

+ Go Back Home +
+ + ); + } return ( - <> -

Error Page

- Back Home - + +
+

Something Went Wrong

+ Go Back Home +
+ ); }; export default Error; + +const Wrapper = styled.main` + min-height: 100vh; + text-align: center; + display: flex; + align-items: center; + justify-content: center; + img { + width: 90vw; + max-width: 600px; + display: block; + margin-bottom: 2rem; + margin-top: -3rem; + } + h3 { + margin-bottom: 0.5rem; + } + p { + line-height: 1.5; + margin-top: 0.5rem; + margin-bottom: 1rem; + color: var(--text-secondary-color); + } + a { + color: var(--primary-500); + text-transform: capitalize; + text-decoration: underline; + } +`; diff --git a/src/pages/PastOrders.jsx b/src/pages/PastOrders.jsx new file mode 100644 index 0000000..dd004ec --- /dev/null +++ b/src/pages/PastOrders.jsx @@ -0,0 +1,157 @@ +import styled from 'styled-components'; +import { IoIosSearch } from 'react-icons/io'; +import { FaFilter } from 'react-icons/fa'; +import { drugData } from '../../data'; +import { TbBellFilled } from 'react-icons/tb'; + +const PastOrders = () => { + const columnLabels = [ + 'name', + 'generic', + 'class', + 'quantity', + 'expiration date', + 'lot #', + 'ndc #', + 'view/edit/delete', + ]; + + return ( + + {/* */} +
+
+ +
+
+
+ +
+
+
+ +
+ +
+
+
+
+ {/* */} +
+ {/* Render column headers */} + {columnLabels.map((label, index) => ( +
+ {label} +
+ ))} + {/* Render rows dynamically */} + {drugData.map((drug, rowIndex) => + columnLabels.map((label, colIndex) => ( +
+ {drug[label] || ''} +
+ )) + )} +
+ + ); +}; + +export default PastOrders; + +const Wrapper = styled.section` + .centered-container { + display: flex; + justify-content: space-between; + align-items: center; + height: 10vh; + background-color: #f5f5f5; + border-radius: 8px; + background-color: #fff; + box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); + } + .left-filter-box { + margin-right: 3rem; + } + .bell-icon-box { + align-self: self-start; + padding-top: 2px; + } + .filter-search-box { + display: flex; + align-items: center; + justify-content: center; + } + .filter-button { + border: 15px solid var(--color-green-light); + border-radius: 50%; + } + .filter-icon { + background: var(--color-green-light); + color: white; + font-size: 1.5rem; + } + + .bell-button { + border: 15px solid var(--color-alert); + border-radius: 50%; + } + .bell-icon { + font-size: 1.5rem; + background-color: var(--color-alert); + color: white; + } + .search-icon { + font-size: 2rem; + padding-right: 1rem; + font-weight: bold; + color: var(--color-blue-dark); + } + .search-box { + display: flex; + justify-content: center; + align-items: center; + padding: 20px; + } + + .search-input { + width: 400px; + padding: 10px; + border: 1px solid #ddd; + border-radius: 4px; + font-size: 16px; + } + + .search-input:focus { + outline: none; + border-color: var(--color-blue-dark); + box-shadow: 0 0 4px rgba(0, 123, 255, 0.5); + } + .grid-container { + display: grid; + grid-template-columns: repeat(8, 1fr); + gap: 10px; + padding: 10px; + } + + .grid-item { + padding: 20px; + border: 1px solid #ccc; + text-align: left; + font-size: 1rem; + text-transform: lowercase; + box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); + border-radius: var(--border-radius); + background-color: #fff; + } + + .grid-header { + font-weight: bold; + background-color: var(--color-green-med); + color: var(--color-blue-dark); + } +`; diff --git a/src/pages/Store.jsx b/src/pages/Store.jsx index 0ce1f70..1fd3a44 100644 --- a/src/pages/Store.jsx +++ b/src/pages/Store.jsx @@ -1,9 +1,88 @@ +import styled from 'styled-components'; +import { FormRow, Logo } from '../components'; +import { GoPencil } from 'react-icons/go'; + const Store = () => { return ( -
-

Store info

-
+ +
+ +

Store Info

+ + + + + +
); }; export default Store; + +const Wrapper = styled.section` + min-height: 100vh; + display: grid; + align-items: center; + .logo { + display: block; + margin: 0 auto; + margin-bottom: 1.38rem; + } + .form { + max-width: 400px; + border-top: 5px solid var(--color-blue-dark); + } + .form-label { + text-transform: lowercase; + } + .form-input { + background-color: var(--grey-50); + text-transform: uppercase; + } + h4 { + text-align: center; + margin-bottom: 1.38rem; + } + p { + margin-top: 1rem; + text-align: center; + line-height: 1.5; + } + .btn { + margin-top: 1rem; + } + .member-btn { + color: var(--primary-500); + letter-spacing: var(--letter-spacing); + margin-left: 0.25rem; + } + .secondary { + background-color: var(--color-green-med); + display: flex; + justify-content: center; + align-items: center; + padding-top: 0.6rem; + padding-bottom: 0.6rem; + } + .scan-icon { + padding-right: 10px; + font-size: 1.5rem; + } +`; diff --git a/src/pages/index.jsx b/src/pages/index.jsx index cea9006..d367320 100644 --- a/src/pages/index.jsx +++ b/src/pages/index.jsx @@ -1,11 +1,9 @@ -export { default as AddDrug } from './AddDrug'; export { default as AdminAddUser } from './AdminAddUser'; export { default as Alerts } from './Alerts'; export { default as Dashboard } from './Dashboard'; export { default as DispenseDrug } from './DispenseDrug'; export { default as Landing } from './Landing'; export { default as Login } from './Login'; - export { default as Register } from './Register'; export { default as Reports } from './Reports'; export { default as Store } from './Store'; @@ -13,3 +11,6 @@ export { default as User } from './User'; export { default as Error } from './Error'; export { default as EditDrug } from './EditDrug'; export { default as HomeLayout } from './HomeLayout'; +export { default as AllDrugs } from './AllDrugs'; +export { default as PastOrders } from './PastOrders'; +export { default as AddDrug } from './AddDrug'; diff --git a/src/utilities/links.jsx b/src/utilities/links.jsx new file mode 100644 index 0000000..5111273 --- /dev/null +++ b/src/utilities/links.jsx @@ -0,0 +1,24 @@ +import { MdSpaceDashboard } from 'react-icons/md'; +import { IoAddCircle } from 'react-icons/io5'; +import { AiFillMinusCircle } from 'react-icons/ai'; + +import { TbBellFilled } from 'react-icons/tb'; +import { BsGraphUp } from 'react-icons/bs'; +import { FaArrowCircleLeft } from 'react-icons/fa'; +import { BsPersonFillAdd } from 'react-icons/bs'; +import { FaStoreAlt } from 'react-icons/fa'; +import { CgProfile } from 'react-icons/cg'; + +const links = [ + { text: 'dashboard', path: '.', icon: }, + { text: 'add employee', path: 'adduser', icon: }, + { text: 'add product', path: 'add', icon: }, + { text: 'dispense drug', path: 'dispense', icon: }, + { text: 'alerts', path: 'alerts', icon: }, + { text: 'reports', path: 'reports', icon: }, + { text: 'past orders', path: 'past-orders', icon: }, + { text: 'store', path: 'store', icon: }, + { text: 'user', path: 'user', icon: }, +]; + +export default links;