added more css, added buttons for modify and returned on items

Author: sylee212

client/src/components/ui/button_quick_actions.tsx

@@ -3,6 +3,8 @@
 import Link from "next/link";
 import React from "react";
 
+// tmr night, wed night, friday night, sat mornign and sun morning
+
 const Quick_Actions = () => {
   return (
     <div className="quick-actions-card">
@@ -12,8 +14,16 @@ const Quick_Actions = () => {
         {/* 2. RIGHT COLUMN: Quick Actions */}
         <aside className="actions-panel">
           {/* This is where the Quick_Actions component will go */}
-          {/* Button 1: Add Product */}
-          <Link href="/organization_add_product">
+          {/* Button 1: Add Product, this is to pass some mode to the add page to tell what mode and data to do*/}
+          <Link
+            href={{
+              pathname: "/organization_add_product",
+              query: {
+                mode: "add",
+                data: null,
+              },
+            }}
+          >
             <button className="action-button primary">
               <span className="icon-plus">+</span>
               Add Product

client/src/components/ui/card_organization_inventory_details_modal.tsx

@@ -15,6 +15,7 @@ Key components
 3. The overlay component itself
 */
 
+import Link from "next/link";
 import React from "react";
 
 // Define the shape of the data this modal expects
@@ -75,6 +76,35 @@ const Inventory_Details_Modal: React.FC<Inventory_Details_Modal_Interface> = ({
           <p>Due On: {itemData.dueOn}</p>
           <p>Expiry Date: {itemData.expiryDate}</p>
         </div>
+
+        {/* NEW ACTION BUTTONS */}
+        <div className="modal-actions">
+          <Link
+            href={{
+              pathname: "/organization_add_product",
+              query: {
+                mode: "lend",
+                data: JSON.stringify(itemData),
+              },
+            }}
+          >
+            <div className="modal-action-button secondary">
+              Returned? <br /> Click me
+            </div>
+          </Link>
+
+          <Link
+            href={{
+              pathname: "/organization_add_product",
+              query: {
+                mode: "modify",
+                data: JSON.stringify(itemData),
+              },
+            }}
+          >
+            <div className="modal-action-button secondary">Modify</div>
+          </Link>
+        </div>
       </div>
     </div>
   );

client/src/helpers/helper_functions.tsx

@@ -32,3 +32,12 @@ export const calcTime = (dateString: string | undefined): string => {
     return "invalid date: " + error;
   }
 };
+
+export const formatDateForInput = (dateString: string | undefined): string => {
+  if (!dateString) return "";
+  const d = new Date(dateString);
+  if (isNaN(d.getTime())) return "";
+
+  // This extracts the "2026-01-07" part of an ISO string
+  return d.toISOString().split("T")[0];
+};

client/src/pages/organization_add_product.tsx

@@ -5,11 +5,20 @@ import { useSWRConfig } from "swr/_internal";
 
 import { Inventory_Details_Interface } from "@/components/ui/card_organization_inventory_details_modal";
 import Header from "@/components/ui/navbar_organization";
+import { formatDateForInput } from "@/helpers/helper_functions";
 import { BASE_URL } from "@/hooks/organization_call_backend";
 import { createNewItemClean } from "@/hooks/organization_clean_backend_calls";
 // import { createItem } from '../hooks/organization_call_backend';
 
 const Organization_Add_Product = () => {
+  // get the query from the other buttons
+  const { mode, data } = useRouter().query;
+
+  // covnert the data back from json
+  const parsedData: Inventory_Details_Interface | null = data
+    ? JSON.parse(data as string)
+    : null;
+
   // it creates a page stack that we can use to navigate
   // when to use and should we replace all href with router.push?
   // we only use this when we want to have buttons that go back to certain pages or after finishing a task
@@ -24,21 +33,24 @@ const Organization_Add_Product = () => {
   >({
     // id is excluded because it will be auto generated by backend
     // id: number,
-    name: "",
-    details: "",
-    categories: "",
-    availability: "",
+    name: mode === "add" ? "" : parsedData?.name,
+    details: mode === "add" ? "" : parsedData?.details,
+    categories: mode === "add" ? "" : parsedData?.categories,
+    availability: mode === "add" ? "" : parsedData?.availability,
 
     // organization is kept away because we will fix it to the name of the organization that is logged in
     // organization: "",
 
-    collectionPoint: "",
-    borrowerName: "",
-    borrowedOn: "",
-    returnedOn: "",
-    dueOn: "",
-    expiryDate: "",
-    dateAdded: "",
+    collectionPoint: mode === "add" ? "" : parsedData?.collectionPoint,
+    borrowerName: mode === "add" ? "" : parsedData?.borrowerName,
+    borrowedOn:
+      mode === "add" ? "" : formatDateForInput(parsedData?.borrowedOn),
+    returnedOn:
+      mode === "add" ? "" : formatDateForInput(parsedData?.returnedOn),
+    dueOn: mode === "add" ? "" : formatDateForInput(parsedData?.dueOn),
+    expiryDate:
+      mode === "add" ? "" : formatDateForInput(parsedData?.expiryDate),
+    dateAdded: mode === "add" ? "" : formatDateForInput(parsedData?.dateAdded),
   });
 
   // used whenever you type in the form fields

client/src/styles/organization.css

@@ -640,6 +640,55 @@ gap: 30px: adds space between the two columns
     text-align: center;
 }
 
+/* src/styles/organization.css */
+
+/* Container for the bottom buttons */
+.modal-actions {
+    display: flex;
+    justify-content: space-between;
+    gap: 20px;
+    margin-top: 30px;
+}
+
+/* Individual large grey buttons */
+.modal-action-button.secondary {
+    flex: 1; /* Makes both buttons equal width */
+    background-color: #e0e0e0; /* The light grey from your image */
+    border: none;
+    border-radius: 4px; /* Slight rounding as seen in image */
+    padding: 15px 10px;
+    font-size: 24px; /* Large text like your screenshot */
+    font-weight: 500;
+    color: #000000;
+    cursor: pointer;
+    line-height: 1.2;
+    transition: background-color 0.2s;
+}
+
+.modal-action-button.secondary:hover {
+    background-color: #d0d0d0; /* Slightly darker on hover */
+}
+
+/* Styling the body list for better alignment */
+.modal-details-list {
+    margin-top: 20px;
+    text-align: left;
+}
+
+.modal-details-list p {
+    display: flex;
+    justify-content: space-between;
+    margin-bottom: 8px;
+    border-bottom: 1px solid #f0f0f0;
+    padding-bottom: 4px;
+}
+
+.modal-title {
+    font-size: 28px;
+    text-align: center;
+    margin-bottom: 10px;
+}
+
 .returned-button {
     background-color: #e0e0e0;
     color: #333;