feat(home_page): add component Orders, Slides, images and Edit Homepa…

…ge and AppLayout

.env.example

@@ -1 +0,0 @@
-VITE_BACKEND_URL=

db.json

@@ -0,0 +1,54 @@
+{
+  "orders": [
+    {
+      "id": "1233-defc",
+      "status": "Progressing",
+      "location": "Thu Duc, Ho Chi Minh, Viet Nam",
+      "number": 2,
+      "fileName": "file1.pdf",
+      "pageNumber": 10,
+      "coins": 50,
+      "paid": "Paid"
+    },
+    {
+      "id": "1245-afce",
+      "status": "Ready",
+      "location": "Tan Phu, Ho Chi Minh, Viet Nam",
+      "number": 2,
+      "fileName": "file2.docx",
+      "pageNumber": 20,
+      "coins": 75,
+      "paid": "Paid"
+    },
+    {
+      "id": "1267-rfce",
+      "status": "Done",
+      "location": "Tan Phu, Ho Chi Minh, Viet Nam",
+      "number": 2,
+      "fileName": "file3.txt",
+      "pageNumber": 5,
+      "coins": 30,
+      "paid": "Not Paid"
+    },
+    {
+      "id": "1267-rfce",
+      "status": "Canceled",
+      "location": "Tan Phu, Ho Chi Minh, Viet Nam",
+      "number": 2,
+      "fileName": "file3.txt",
+      "pageNumber": 5,
+      "coins": 30,
+      "paid": "Not Paid"
+    },
+    {
+      "id": "1267-rfce",
+      "status": "Done",
+      "location": "Tan Phu, Ho Chi Minh, Viet Nam",
+      "number": 2,
+      "fileName": "file3.txt",
+      "pageNumber": 5,
+      "coins": 30,
+      "paid": "Paid"
+    }
+  ]
+}

package.json

@@ -42,6 +42,7 @@
     "eslint-config-prettier": "^9.0.0",
     "eslint-plugin-react-hooks": "^4.6.0",
     "husky": "^8.0.3",
+    "json-server": "^0.17.3",
     "lint-staged": "^14.0.0",
     "postcss": "^8.4.27",
     "prettier": "3.0.1",

src/components/Orders.tsx

@@ -0,0 +1,94 @@
+import { ArrowLeftIcon, ArrowRightIcon } from '@heroicons/react/24/outline';
+import { useRef } from 'react';
+import location from '../assets/location-marker.jpg';
+import coin from '../assets/coin.png';
+import { FC } from 'react';
+interface Order {
+  id: string;
+  status: string;
+  location: string;
+  number: number;
+  fileName: string;
+  pageNumber: number;
+  coins: number;
+  paid: string;
+}
+
+interface OrdersProps {
+  orders: Order[];
+}
+const Orders: FC<OrdersProps> = ({ orders }) => {
+  const sliderRef = useRef(null);
+
+  const scrollLeft = () => {
+    sliderRef.current.scrollLeft -= 400;
+  };
+  const scrollRight = () => {
+    sliderRef.current.scrollLeft += 400;
+  };
+  return (
+    <div className='relative'>
+      <div className='flex justify-between items-center mb-4'>
+        <h3 className='text-[#495057] text-xl lg:text-4xl'>Order in progress</h3>
+        <div className='flex cursor-pointer opacity-40'>
+          <span className='text-[#495057] text-sm lg:text-lg mr-[5px] font-semibold opacity-40 hover:opacity-100'>
+            See more
+          </span>
+          <ArrowRightIcon className='w-3' />
+        </div>
+      </div>
+      <div className='flex gap-[8px] lg:gap-[24px] slider-container' ref={sliderRef}>
+        {orders.map((order, index) => {
+          return (
+            <div
+              key={index}
+              className='p-2 lg:p-4 bg-white grow shrink-0 flex flex-col rounded-lg border-[1px] shadow-[rgba(0, 0, 0, 0.05)] shadow-md'
+            >
+              <div className='text-xs flex justify-between mb-2 lg:mb-4'>
+                <span className='font-semibold leading-[18px]'>{order.id}</span>
+                <span
+                  className={
+                    order.status === 'Progressing'
+                      ? 'text-[#C27803]'
+                      : order.status === 'Ready'
+                      ? 'text-[#0E9F6E]'
+                      : order.status === 'Done'
+                      ? 'text-[#6875F5]'
+                      : 'text-[#F05252]'
+                  }
+                >
+                  {order.status}
+                </span>
+              </div>
+              <div className=''>
+                <span className='text-[#1488D8] mr-1'>{order.fileName}</span>
+                <span className='text-[#495057] opacity-40'>+{order.number}</span>
+              </div>
+              <div className='flex items-center mb-4'>
+                <img src={location} width={20} height={20} className='mr-2' />
+                <span className='text-[#ACB5BD]'>{order.location}</span>
+              </div>
+              <hr className='h-[1px] mb-4' />
+              <div className='flex items-center justify-between'>
+                <span className='text-[#495057] font-medium'>{order.pageNumber} pages</span>
+                <div className='flex'>
+                  <img src={coin} width={20} />
+                  <span className='mr-2'>{order.coins}</span>
+                  <span className='text-[#495057] opacity-40'>({order.paid})</span>
+                </div>
+              </div>
+            </div>
+          );
+        })}
+        <div className='prevButton hidden lg:block left-[-72px] opacity-60 hover:opacity-100 bg-white '>
+          <ArrowLeftIcon className='w-4 text-[#1488D8]' onClick={scrollLeft} />
+        </div>
+        <div className='nextButton hidden lg:block right-[-72px] opacity-60 hover:opacity-100 bg-white'>
+          <ArrowRightIcon className='w-4 text-[#1488D8]' onClick={scrollRight} />
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default Orders;

src/components/Slides.tsx

@@ -0,0 +1,61 @@
+import { useState } from 'react';
+import { FC } from 'react';
+import { ArrowLeftIcon, ArrowRightIcon } from '@heroicons/react/24/outline';
+
+interface Slide {
+  src: string;
+  alt: string;
+}
+interface SlidesProps {
+  children: Slide[];
+}
+export const Slides: FC<SlidesProps> = ({ children }) => {
+  const [slide, setSlide] = useState(0);
+  const slideLength = children.length;
+  const handleleftArrow = () => {
+    const previousSlide = slide === 0 ? slideLength - 1 : slide - 1;
+    setSlide(previousSlide);
+  };
+  const handleRightArrow = () => {
+    const nextSlide = slide === slideLength - 1 ? 0 : slide + 1;
+    setSlide(nextSlide);
+  };
+  setTimeout(handleRightArrow, 3000);
+  return (
+    <div className='relative mb-4 w-full lg:mb-12'>
+      <div className='absolute top-[40%] left-[5%] p-[5px] rounded-[999px] bg-white opacity-40 cursor-pointer hover:opacity-100'>
+        <ArrowLeftIcon className='w-4' onClick={handleleftArrow} />
+      </div>
+      {children.map((child, index) => {
+        return (
+          <img
+            src={child.src}
+            alt={child.alt}
+            key={index}
+            className={
+              slide === index ? 'rounded-lg h-[200px] object-cover w-full lg:h-[400px]' : 'hidden'
+            }
+          />
+        );
+      })}
+      <div className='absolute top-[40%] right-[5%] p-[5px] rounded-[999px] bg-white opacity-40 cursor-pointer hover:opacity-100'>
+        <ArrowRightIcon className='w-4 ' onClick={handleRightArrow} />
+      </div>
+      <span className='flex absolute bottom-[1rem] left-[40%] lg:left-[50%]'>
+        {children.map((_, idx) => {
+          return (
+            <button
+              key={idx}
+              onClick={() => setSlide(idx)}
+              className={
+                slide === idx
+                  ? 'bg-white h-[0.5rem] w-[0.5rem] rounded-full border-0 outline-0 my-0 mx-[0.2rem] cursor-pointer'
+                  : 'h-[0.5rem] w-[0.5rem] rounded-full border-0 outline-0 my-0 mx-[0.2rem] cursor-pointer bg-[#9CA3AF]'
+              }
+            ></button>
+          );
+        })}
+      </span>
+    </div>
+  );
+};

src/components/index.ts

@@ -5,4 +5,6 @@
 export * from './AppDrawer';
 export * from './AppNavigation';
 export * from './AppSkeleton';
+export * from './Orders';
+export * from './Slides';
 export * from './ToggleSidebarBtn';

src/index.css

@@ -2,4 +2,27 @@
 
 @tailwind base;
 @tailwind components;
-@tailwind utilities;
+@tailwind utilities;
+
+.slider-container {
+    display: flex;
+    overflow-x: auto; 
+    padding: 10px 0; 
+    scrollbar-width: none; 
+    -ms-overflow-style: none; 
+}
+
+.slider-container::-webkit-scrollbar {
+    width: 0; 
+}
+
+.prevButton,
+.nextButton {
+  cursor: pointer;
+  padding: 15px;
+  border: 1px solid #ccc;
+  border-radius: 50%;
+  position: absolute;
+  top: 50%;
+  z-index: 1;
+}

src/layouts/AppLayout.tsx

@@ -22,7 +22,7 @@ export const AppLayout: Component<{ menu: RouteMenu }> = ({ menu }) => {
   return (
     <div className='flex flex-col h-screen sm:min-h-screen'>
       <AppNavigation menu={menu} />
-      <div className='lg:p-4 flex-1 h-full'>
+      <div className='lg:p-4 flex-1 h-100vh bg-[#f8f9fa] '>
         <Routes>
           {routeItems.map((item) => (
             <Route path={item.path} element={item.element} key={item.path} />

src/pages/HomePage.tsx

@@ -1,5 +1,58 @@
-// Tan's task in here
+import { Slides } from '../components/Slides';
+import printerPicture from '../assets/printer.jpg';
+import { ArrowRightIcon } from '@heroicons/react/24/outline';
+import axios from 'axios';
+import { useEffect, useState } from 'react';
+import Orders from '../components/Orders';
 
 export function HomePage() {
-  return <div>Đăng nhập thành công</div>;
+  const [orders, setOrders] = useState([]);
+  useEffect(() => {
+    const getOrders = async () => {
+      try {
+        const result = await axios.get('http://localhost:3002/orders');
+        setOrders(result.data);
+      } catch (e) {
+        console.log(e);
+      }
+    };
+    getOrders();
+  }, []);
+  const slidePictures = [
+    {
+      src: 'https://e-learning.hcmut.edu.vn/theme/boost/images/slbktv.jpg?1695219022292',
+      alt: 'slide1'
+    },
+    {
+      src: 'https://e-learning.hcmut.edu.vn/theme/boost/images/slbk.jpg?1695219022805',
+      alt: 'slide2'
+    },
+    {
+      src: 'https://static.tuoitre.vn/tto/i/s626/2016/04/05/dai-hoc-bach-khoa-tp-hcm-cong-bo-phuong-an-tuyen-sinh-2015jpg-1459820200.jpg',
+      alt: 'slide3'
+    },
+    {
+      src: 'https://we25.vn/media2018/Img_News/2020/06/08/khuon-vien-dh-bach-khoa-tp-hcm-khien-dan-tinh-me-man-voi-nhung-hanh-cay-xanh-tham-toa-bong-mat-quanh-nam-14_20200608150159.jpg',
+      alt: 'slide4'
+    }
+  ];
+  return (
+    <div className='p-6 lg:py-5 lg:px-56'>
+      <div className='mb-4 lg:mb-6'>
+        <h4 className='text-[#1488D8] text-base lg:text-2xl'>
+          Student Smart Printing Service (SSPS)
+        </h4>
+        <h3 className='text-[#030391] text-xl lg:text-4xl font-bold'>Welcome Username!</h3>
+      </div>
+      <Slides children={slidePictures} />
+      <div className='flex p-4 bg-[#1488D8] rounded-lg items-center mb-16 lg:mb-24 lg:h-[120px] lg:px-6 relative'>
+        <div className='p-[10px] rounded-full bg-white mr-4'>
+          <img src={printerPicture} />
+        </div>
+        <span className='text-white font-bold lg:text-2xl'>Order printing</span>
+        <ArrowRightIcon className='w-4 text-white absolute top-50 right-[24px] lg:w-6' />
+      </div>
+      <Orders orders={orders} />
+    </div>
+  );
 }