purchase order functionality, screens, and components

cubeseed_login/package.json

@@ -19,6 +19,8 @@
     "next": "13.3.0",
     "react": "18.2.0",
     "react-dom": "18.2.0",
+    "react-ionicons": "^4.2.1",
+    "react-paginate": "^8.2.0",
     "react-responsive-modal": "^6.4.2",
     "react-select": "^5.7.3",
     "sass": "^1.62.1"

cubeseed_login/src/component/dashboard/DashboardCards/ProfileCard.tsx

@@ -0,0 +1,34 @@
+import React from "react"
+import styles from "@/styles/ProfileCard.module.css"
+import Image from "next/image"
+import farmerImage from "../../../../public/assets/farmerImage1.png"
+import Button from "@/comps/Button/button"
+
+const ProfileCard = () => {
+  return (
+    <div className={styles.cardContainer}>
+      <div className="flex flex-col items-center">
+        <Image
+          src={farmerImage}
+          alt="farmer image"
+          width={130}
+          height={130}
+          style={{
+            borderRadius: "50%",
+            objectFit: "cover",
+            marginTop: 10,
+          }}
+        />
+        <p className={styles.farmerName}>Olakira</p>
+      </div>
+      <Button
+        className={styles.messageButton}
+        onClick={() => console.log("Message")}
+      >
+        {"Message"}
+      </Button>
+    </div>
+  )
+}
+
+export default ProfileCard

cubeseed_login/src/component/dashboard/DashboardTables/ActivePurchaseOrderItemsTable.tsx

@@ -0,0 +1,66 @@
+import React from "react"
+import styles from "@/styles/ActivePurchaseOrderItemsTable.module.css"
+
+interface Item {
+  id: number
+  name: string
+  quantity: number
+  price: number
+  specifications: string
+  image: string
+}
+
+interface PurchaseOrder {
+  id: number
+  farm: string
+  farmer: string
+  farmerImage: string
+  type: string
+  orderDate: string
+  deliveryDate: string
+  address: string
+  price: number
+  items: Item[]
+}
+
+interface ActivePurchaseOrderItemsTableProps {
+  purchaseOrder: PurchaseOrder
+}
+
+const ActivePurchaseOrderItemsTable: React.FC<
+  ActivePurchaseOrderItemsTableProps
+> = ({ purchaseOrder }) => {
+  return (
+    <div>
+      <div className={styles.headingRow}>
+        <h2 className={styles.heading}>Items</h2>
+      </div>
+      <table className={`${styles.table} table-auto`}>
+        <thead>
+          <tr>
+            <th className={`${styles.th} w-2/5`}>Description</th>
+            <th className={`${styles.th} w-1/5`}>QTY</th>
+            <th className={`${styles.th} w-1/5`}>Price</th>
+            <th className={`${styles.th} w-1/5`}>Total Price</th>
+          </tr>
+        </thead>
+        <tbody>
+          {purchaseOrder.items.map((item) => (
+            <tr key={item.id}>
+              <td className={`${styles.td} w-2/5`}>
+                <p>{item.name}</p>
+              </td>
+              <td className={`${styles.td} w-1/5`}>{item.quantity}</td>
+              <td className={`${styles.td} w-1/5`}>&#8358; {item.price}</td>
+              <td className={`${styles.td} w-1/5`}>
+                &#8358; {item.price * item.quantity}
+              </td>
+            </tr>
+          ))}
+        </tbody>
+      </table>
+    </div>
+  )
+}
+
+export default ActivePurchaseOrderItemsTable

cubeseed_login/src/component/dashboard/DashboardTables/ActivePurchaseOrderReceiptsTable.tsx

@@ -0,0 +1,121 @@
+import React, { useState } from "react"
+import styles from "@/styles/ActivePurchaseOrderReceiptsTable.module.css"
+import "tailwindcss/tailwind.css"
+import {
+  DocumentOutline,
+  ReceiptOutline,
+  FileTrayFullOutline,
+} from "react-ionicons"
+import Link from "next/link"
+import Button from "@/comps/Button/button"
+
+// import flag from "@cs/public/Flag_of_Nigeria.png"
+
+interface receipt {
+  id: number
+  type: number
+  date: string
+  status: string
+}
+
+interface PurchaseOrder {
+  id: number
+  farm: string
+  farmer: string
+  farmerImage: string
+  type: string
+  orderDate: string
+  deliveryDate: string
+  address: string
+  price: number
+  receipts: receipt[]
+}
+
+interface PurchaseOrderReceiptsTableProps {
+  purchaseOrder: PurchaseOrder
+}
+
+const PurchaseOrderReceiptsTable: React.FC<PurchaseOrderReceiptsTableProps> = ({
+  purchaseOrder,
+}) => {
+  const [visible, setVisible] = useState(false)
+  const toggleVisible = () => {
+    setVisible(!visible)
+  }
+  return (
+    <div>
+      <div className={styles.dropdownRow}>
+        <div className={styles.dropdown}>
+          <button onClick={toggleVisible} className={styles.ellipsisButton}>
+            ...
+          </button>
+          {visible && (
+            <div className={styles.menu}>
+              <button className={styles.menuItem}>
+                <div className={styles.menuItemContent}>
+                  <DocumentOutline
+                    height="15px"
+                    width="15px"
+                    color={"#3c7174"}
+                  />
+                  <span className="ms-2"> Send Invoice </span>
+                </div>
+              </button>
+              <button className={styles.menuItem}>
+                <div className={styles.menuItemContent}>
+                  <ReceiptOutline
+                    height="15px"
+                    width="15px"
+                    color={"#3c7174"}
+                  />
+                  <span className="ms-2"> Send Receipt </span>
+                </div>
+              </button>
+              <button className={styles.menuItem}>
+                <div className={styles.menuItemContent}>
+                  <FileTrayFullOutline
+                    height="15px"
+                    width="15px"
+                    color={"#3c7174"}
+                  />
+                  <span className="ms-2"> Send Waybill </span>
+                </div>
+              </button>
+            </div>
+          )}
+        </div>
+      </div>
+      <div className={styles.headingRow}>
+        <h2 className={styles.heading}>Invoices/waybills/receipts</h2>
+      </div>
+      <table className={`${styles.table} table-auto`}>
+        <thead>
+          <tr>
+            <th className={`${styles.th} w-2/4`}>Type</th>
+            <th className={`${styles.th} w-1/4`}>Date</th>
+            <th className={`${styles.th} w 1/4`}>Status</th>
+          </tr>
+        </thead>
+        <tbody>
+          {purchaseOrder.receipts.map((receipt) => (
+            <tr key={receipt.id}>
+              <td className={styles.td}>{receipt.type}</td>
+              <td className={styles.td}>{receipt.date}</td>
+              <td className={styles.td}>
+                {receipt.status === "Sent" ? (
+                  <p className={styles.statusSent}>Sent</p>
+                ) : receipt.status === "Pending" ? (
+                  <p className={styles.statusPending}>Pending</p>
+                ) : (
+                  <p className={styles.statusReceived}>Received</p>
+                )}
+              </td>
+            </tr>
+          ))}
+        </tbody>
+      </table>
+    </div>
+  )
+}
+
+export default PurchaseOrderReceiptsTable

cubeseed_login/src/component/dashboard/DashboardTables/PurchaseOrderItemsTable.tsx

@@ -0,0 +1,74 @@
+import React from "react"
+import styles from "@/styles/PurchaseOrderItemsTable.module.css"
+import "tailwindcss/tailwind.css"
+import Link from "next/link"
+import Image from "next/image"
+// import flag from "@cs/public/Flag_of_Nigeria.png"
+
+interface Item {
+  id: number
+  name: string
+  quantity: number
+  price: number
+  specifications: string
+  image: string
+}
+
+interface PurchaseOrder {
+  id: number
+  farm: string
+  farmer: string
+  farmerImage: string
+  type: string
+  orderDate: string
+  deliveryDate: string
+  address: string
+  price: number
+  items: Item[]
+}
+
+interface PurchaseOrderItemsTableProps {
+  purchaseOrder: PurchaseOrder
+}
+
+const PurchaseOrderItemsTable: React.FC<PurchaseOrderItemsTableProps> = ({
+  purchaseOrder,
+}) => {
+  return (
+    <div>
+      <table className={`${styles.table} table-auto`}>
+        <thead>
+          <tr>
+            <th className={styles.th}>Product Description</th>
+            <th className={styles.th}>QTY</th>
+            <th className={styles.th}>Price</th>
+            <th className={styles.th}>Specifications</th>
+          </tr>
+        </thead>
+        <tbody>
+          {purchaseOrder.items.map((item) => (
+            <tr key={item.id}>
+              <td className={styles.td}>
+                <img
+                  className="mr-3 size-10 rounded-full"
+                  src={item.image}
+                  alt=""
+                />
+                <p className="inline-block">{item.name}</p>
+              </td>
+              <td className={`${styles.td} text-center`}>{item.quantity}</td>
+              <td className={`${styles.td} text-center`}>
+                &#8358; {item.price * item.quantity}
+              </td>
+              <td className={`${styles.td} text-center`}>
+                {item.specifications}
+              </td>
+            </tr>
+          ))}
+        </tbody>
+      </table>
+    </div>
+  )
+}
+
+export default PurchaseOrderItemsTable

cubeseed_login/src/component/dashboard/DashboardTables/PurchaseOrdersTable.tsx

@@ -0,0 +1,90 @@
+import React, { useState, useEffect } from "react"
+import styles from "@/styles/PurchaseOrdersTable.module.css"
+import "tailwindcss/tailwind.css"
+import ReactPaginate from "react-paginate"
+import Link from "next/link"
+import { ArrowForwardOutline } from "react-ionicons"
+import { useRouter } from "next/router"
+
+interface PurchaseOrdersTableProps {
+  tableData: {
+    id: number
+    farm: string
+    type: string
+    delivery: string
+    price: string
+  }[]
+}
+
+const PurchaseOrdersTable: React.FC<PurchaseOrdersTableProps> = ({
+  tableData,
+}) => {
+  const [orders, setOrders] = useState([])
+  const [currentPage, setCurrentPage] = useState(0)
+  const itemsPerPage = 10
+  const startIndex = currentPage * itemsPerPage
+  const endIndex = startIndex + itemsPerPage
+  const displayedOrders = tableData.slice(startIndex, endIndex)
+
+  const handlePageClick = (selectedPage: { selected: number }) => {
+    setCurrentPage(selectedPage.selected)
+  }
+
+  const router = useRouter()
+
+  return (
+    <div className={styles.table}>
+      <div className="m-5">
+        <div className={styles.titleRow}>
+          <p className="ms-1 w-2/6">Order</p>
+          <p className="w-1/6">Type</p>
+          <p className="w-1/6">Delivery By</p>
+          <p className="w-1/6">Total Price</p>
+          <p className="w-1/6">Manage</p>
+        </div>
+        <div>
+          {displayedOrders.map((order) => (
+            <div key={order.id} className={`${styles.dataRow} flex flex-row`}>
+              <div className="ms-2 w-1/6">
+                <p>{order.id}</p>
+                <p className={styles.farmName}>{order.farm}</p>
+              </div>
+              <p className={`${styles.verticalLine} w-1/6`}>|</p>
+              <p className="w-1/6">{order.type}</p>
+              <p className="w-1/6">{order.delivery}</p>
+              <div className="flex w-1/6">
+                <p>&#8358; {order.price}</p>
+                {/* <img src={flag} alt="Nigerian Flag" /> */}
+              </div>
+              <Link className="flex w-1/6 items-center text-lg" href={""}>
+                <button className={styles.viewTab}>View</button>
+                <ArrowForwardOutline
+                  color={"#00000"}
+                  height="20px"
+                  width="20px"
+                />
+              </Link>
+            </div>
+          ))}
+        </div>
+        <ReactPaginate
+          breakLabel={"..."}
+          nextLabel={">"}
+          previousLabel={"<"}
+          pageCount={Math.ceil(tableData.length / itemsPerPage)}
+          pageRangeDisplayed={5}
+          marginPagesDisplayed={2}
+          onPageChange={handlePageClick}
+          containerClassName={styles.paginationContainer}
+          activeClassName={styles.paginationActive}
+          pageClassName={styles.paginatioPage}
+          pageLinkClassName={styles.pageLink}
+          previousClassName={styles.paginationArrow}
+          nextClassName={styles.paginationArrow}
+        />
+      </div>
+    </div>
+  )
+}
+
+export default PurchaseOrdersTable