update routing + source code structure

.gitignore

@@ -4,13 +4,14 @@
 /node_modules
 /.pnp
 .pnp.js
-
+node_modules
 # testing
 /coverage
-
+server/node_modules
+package-lock.json
+/node_modules
 # production
 /build
-
 # misc
 .DS_Store
 .env.local

package.json

@@ -6,9 +6,12 @@
     "@testing-library/jest-dom": "^5.17.0",
     "@testing-library/react": "^13.4.0",
     "@testing-library/user-event": "^13.5.0",
+    "dom": "^0.0.3",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
+    "react-router-dom": "^7.0.1",
     "react-scripts": "5.0.1",
+    "router": "^1.3.8",
     "web-vitals": "^2.1.4"
   },
   "scripts": {

src/App.js

@@ -1,9 +1,30 @@
-import Login from './login'
-import Header from './header'
-import Dashboard from './dashboard';
+import React, { Fragment } from "react";
+import { Route, Routes } from "react-router-dom";
+import { routes } from "./routes";
+
 // import loginHeader from './loginHeader'
 function App() {
-  return <Dashboard/>;
+  return (
+    <div>
+      <Routes>
+        {routes.map((route, index) => {
+          const Layout = route.layout ? route.layout : Fragment;
+          const Page = route.component;
+          return (
+            <Route
+              key={index}
+              path={route.path}
+              element={
+                <Layout>
+                  <Page />
+                </Layout>
+              }
+            />
+          );
+        })}
+      </Routes>
+    </div>
+  );
 }
 
 export default App;

src/dashboard.js

@@ -1,72 +1,105 @@
 import React from "react";
 import Header from "./header";
-import logo from './component/BachKhoaLogo.png';
-import user from './component/user.png';
-import book from './component/Book.png';
-import printer from './component/printer.png';
-import payment from './component/Icon.png';
-import background from './component/bgbk.png';
+import user from "./assets/user.png";
+import book from "./assets/Book.png";
+import printer from "./assets/printer.png";
+import payment from "./assets/Icon.png";
+import background from "./assets/bgbk.png";
 import dbstyles from "./dashboard.module.css";
+import logo from "./assets/BachKhoaLogo.png";
 
 const Dashboard = () => {
   return (
     <div className={dbstyles.container}>
-    <div className={dbstyles.dashboard}>
-      <Header logo={logo}/>
+      <div className={dbstyles.dashboard}>
+        <Header
+          // @ts-ignore
+          logo={logo}
+        />
 
-      <main className={dbstyles.main}>
-      <div className={dbstyles.welcome_row}>
-        <div className={dbstyles.welcome_section}>
-          <h1 className={dbstyles.greeting}>Good Morning, Thao!</h1>
-          <p className={dbstyles.greeting_subtext}>Ready to print something?</p>
-          <p className={dbstyles.description}>
-            We provide the printing service for all students and lecturers in HCMUT campus.
-          </p>
-          <div className={dbstyles.actions}>
-          <div className={dbstyles.action_item}>
-            <img src={user} alt="User" className={dbstyles.action_icon}></img>
-            <div>
-              <p className={dbstyles.action_title}>STUDENT INFORMATION</p>
-              <p className={dbstyles.action_description}>View your information</p>
-            </div>
-            <span className={dbstyles.action_arrow}>→</span>
-          </div>
+        <main className={dbstyles.main}>
+          <div className={dbstyles.welcome_row}>
+            <div className={dbstyles.welcome_section}>
+              <h1 className={dbstyles.greeting}>Good Morning, Thao!</h1>
+              <p className={dbstyles.greeting_subtext}>
+                Ready to print something?
+              </p>
+              <p className={dbstyles.description}>
+                We provide the printing service for all students and lecturers
+                in HCMUT campus.
+              </p>
+              <div className={dbstyles.actions}>
+                <div className={dbstyles.action_item}>
+                  <img
+                    src={user}
+                    alt="User"
+                    className={dbstyles.action_icon}
+                  ></img>
+                  <div>
+                    <p className={dbstyles.action_title}>STUDENT INFORMATION</p>
+                    <p className={dbstyles.action_description}>
+                      View your information
+                    </p>
+                  </div>
+                  <span className={dbstyles.action_arrow}>→</span>
+                </div>
 
-          <div className={dbstyles.action_item}>
-          <img src={printer} alt="Printer" className={dbstyles.action_icon}></img>
-            <div>
-              <p className={dbstyles.action_title}>PRINT DOCUMENT</p>
-              <p className={dbstyles.action_description}>Print your document</p>
-            </div>
-            <span className={dbstyles.action_arrow}>→</span>
-          </div>
+                <div className={dbstyles.action_item}>
+                  <img
+                    src={printer}
+                    alt="Printer"
+                    className={dbstyles.action_icon}
+                  ></img>
+                  <div>
+                    <p className={dbstyles.action_title}>PRINT DOCUMENT</p>
+                    <p className={dbstyles.action_description}>
+                      Print your document
+                    </p>
+                  </div>
+                  <span className={dbstyles.action_arrow}>→</span>
+                </div>
 
-          <div className={dbstyles.action_item}>
-          <img src={book} alt="Book" className={dbstyles.action_icon}></img>
-            <div>
-              <p className={dbstyles.action_title}>VIEW HISTORY</p>
-              <p className={dbstyles.action_description}>View history of your printing document</p>
-            </div>
-            <span className={dbstyles.action_arrow}>→</span>
-          </div>
+                <div className={dbstyles.action_item}>
+                  <img
+                    src={book}
+                    alt="Book"
+                    className={dbstyles.action_icon}
+                  ></img>
+                  <div>
+                    <p className={dbstyles.action_title}>VIEW HISTORY</p>
+                    <p className={dbstyles.action_description}>
+                      View history of your printing document
+                    </p>
+                  </div>
+                  <span className={dbstyles.action_arrow}>→</span>
+                </div>
 
-          <div className={dbstyles.action_item}>
-          <img src={payment} alt="Payment" className={dbstyles.action_icon}></img>
-            <div>
-              <p className={dbstyles.action_title}>PAYMENT</p>
-              <p className={dbstyles.action_description}>Buy more paper to print your documents!</p>
+                <div className={dbstyles.action_item}>
+                  <img
+                    src={payment}
+                    alt="Payment"
+                    className={dbstyles.action_icon}
+                  ></img>
+                  <div>
+                    <p className={dbstyles.action_title}>PAYMENT</p>
+                    <p className={dbstyles.action_description}>
+                      Buy more paper to print your documents!
+                    </p>
+                  </div>
+                  <span className={dbstyles.action_arrow}>→</span>
+                </div>
+              </div>
+            </div>
+            <div className={dbstyles.image_section}>
+              <img
+                src={background}
+                alt=" Background Bach Khoa"
+                className={dbstyles.right_image}
+              />
             </div>
-            <span className={dbstyles.action_arrow}>→</span>
           </div>
-        </div>
-        </div>
-        <div className={dbstyles.image_section}>
-            <img src={background} alt=" Background Bach Khoa" className={dbstyles.right_image} />
-        </div>
-        </div>
-
-      </main>
-    </div>
+        </main>
+      </div>
     </div>
   );
 };

src/header.js

@@ -1,30 +1,38 @@
 import React from "react";
 import headerStyles from "./header.module.css";
-import logo from './component/BachKhoaLogo.png';
+import logo from "./assets/BachKhoaLogo.png";
 
 const Header = () => {
   return (
     <div className="SpssContainer">
-    <header className={headerStyles.header}>
-      <div className={headerStyles.logo_container}>
-        <img src={logo} alt="HCMUT SPSS Logo" className={headerStyles.logo} />
-        <div className={headerStyles.logo_text}>
-          <span className={headerStyles.logo_line}>HCMUT</span>
-          <span className={headerStyles.logo_line}>SPSS</span>
+      <header className={headerStyles.header}>
+        <div className={headerStyles.logo_container}>
+          <img src={logo} alt="HCMUT SPSS Logo" className={headerStyles.logo} />
+          <div className={headerStyles.logo_text}>
+            <span className={headerStyles.logo_line}>HCMUT</span>
+            <span className={headerStyles.logo_line}>SPSS</span>
+          </div>
         </div>
-      </div>
-      <nav className={headerStyles.header_nav}>
-        <a href="#home" className={headerStyles.nav_link}>HOME</a>
-        <a href="#print" className={headerStyles.nav_link}>PRINT</a>
-        <a href="#payment" className={headerStyles.nav_link}>PAYMENT</a>
-        <a href="#history" className={headerStyles.nav_link}>HISTORY</a>
-      </nav>
-      <div className={headerStyles.header_right}>
-        <div className={headerStyles.avatar}></div>
-        <span className={headerStyles.user_name}>LE THI PHUONG THAO</span>
-        <button className={headerStyles.logout_button}>LOG OUT</button>
-      </div>
-    </header>
+        <nav className={headerStyles.header_nav}>
+          <a href="#home" className={headerStyles.nav_link}>
+            HOME
+          </a>
+          <a href="#print" className={headerStyles.nav_link}>
+            PRINT
+          </a>
+          <a href="#payment" className={headerStyles.nav_link}>
+            PAYMENT
+          </a>
+          <a href="#history" className={headerStyles.nav_link}>
+            HISTORY
+          </a>
+        </nav>
+        <div className={headerStyles.header_right}>
+          <div className={headerStyles.avatar}></div>
+          <span className={headerStyles.user_name}>LE THI PHUONG THAO</span>
+          <button className={headerStyles.logout_button}>LOG OUT</button>
+        </div>
+      </header>
     </div>
   );
 };

src/index.js

@@ -1,15 +1,18 @@
-import React from 'react';
-import ReactDOM from 'react-dom/client';
-import './index.css';
-import App from './App';
+import React from "react";
+import { createRoot } from "react-dom/client";
+import App from "./App";
+import { BrowserRouter as Router } from "react-router-dom";
+const container = document.getElementById("root");
 
-const root = ReactDOM.createRoot(document.getElementById('root'));
-root.render(
-  <React.StrictMode>
-    <App />
-  </React.StrictMode>
-);
+if (container) {
+  const root = createRoot(container);
 
-// If you want to start measuring performance in your app, pass a function
-// to log results (for example: reportWebVitals(console.log))
-// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
+  root.render(
+    <React.StrictMode>
+      {/* <GlobalStyles /> */}
+      <Router>
+        <App />
+      </Router>
+    </React.StrictMode>
+  );
+}

src/login.js

@@ -1,27 +1,31 @@
-import React from 'react';
-import Header from './header';
-import loginStyles from './login.module.css';
-import logo from './component/BachKhoaLogo.png'; // Ensure the logo image exists in this path
-import illustration from './component/image1.png'; // Add your illustration image to this path
+import React from "react";
+import Header from "./header";
+import loginStyles from "./login.module.css";
+import logo from "./assets/BachKhoaLogo.png"; // Ensure the logo image exists in this path
+import illustration from "./assets/image1.png"; // Add your illustration image to this path
 
 function Login() {
   return (
     <div className="Container">
-      <Header logo={logo}/>
+      <Header logo={logo} />
 
       {/* Main Content */}
       <div className={loginStyles.MainContent}>
         {/* Image */}
         <div className={loginStyles.IllustrationSection}>
-          <img src={illustration} alt="Illustration" className={loginStyles.IllustrationImage} />
+          <img
+            src={illustration}
+            alt="Illustration"
+            className={loginStyles.IllustrationImage}
+          />
         </div>
 
         {/* Login Form */}
         <div className={loginStyles.LoginForm}>
           <h2 className={loginStyles.LoginHeader}>Login Account</h2>
           <form>
             <div className={loginStyles.FormGroup}>
-              <label htmlFor="username" >Username</label>
+              <label htmlFor="username">Username</label>
               <input type="text" id="username" placeholder="Username" />
             </div>
             <div className={loginStyles.FormGroup}>
@@ -32,9 +36,13 @@ function Login() {
               <label>
                 <input type="checkbox" /> Remember your account
               </label>
-              <a href="#" className={loginStyles.ForgotPassword}>Forgot your password ?</a>
+              <a href="#" className={loginStyles.ForgotPassword}>
+                Forgot your password ?
+              </a>
             </div>
-            <button type="submit" className={loginStyles.LoginButton}><b>LOG IN</b></button>
+            <button type="submit" className={loginStyles.LoginButton}>
+              <b>LOG IN</b>
+            </button>
           </form>
         </div>
       </div>