From 9bffa9f0232fb06c152aed04c15db0617adefab1 Mon Sep 17 00:00:00 2001
From: Jason Lee <jaeho52lee@gmail.com>
Date: Sun, 3 Mar 2024 15:59:44 -0600
Subject: [PATCH] changed page scrolling and fixed bugs

---
 src/pages/Order/Sorters.tsx                   |  4 +-
 src/pages/OrderManagement/OrderManagement.tsx | 24 ++++++------
 src/pages/OrderManagement/StaffOrderTable.tsx | 38 ++++++++++---------
 src/styles/OrderManagement.css                | 25 ++++++++----
 4 files changed, 52 insertions(+), 39 deletions(-)

diff --git a/src/pages/Order/Sorters.tsx b/src/pages/Order/Sorters.tsx
index 34a168f..7c8132f 100644
--- a/src/pages/Order/Sorters.tsx
+++ b/src/pages/Order/Sorters.tsx
@@ -25,7 +25,7 @@ const Sorter: React.FC<SorterProps> = ({ orders, setOrders, whichSorters, classe
 
     const sortPartnerName = () => {
         let orderCopy: Order[] = orders.slice(); 
-        orderCopy.sort((a, b) => (a.partner < b.partner ? -1 : 1)); 
+        orderCopy.sort((a, b) => (a.partner.toLowerCase() < b.partner.toLowerCase() ? -1 : 1)); 
         setOrders(orderCopy);
     }
 
@@ -44,8 +44,6 @@ const Sorter: React.FC<SorterProps> = ({ orders, setOrders, whichSorters, classe
     const statusSorter = (a: Order, b: Order) => {
         const aRank = statusRank.get(a.status); 
         const bRank = statusRank.get(b.status); 
-
-        console.log(a.status + " " + aRank + " " + b.status + " " + bRank); 
         
         if (!aRank) return -1; 
         if (!bRank) return 1; 
diff --git a/src/pages/OrderManagement/OrderManagement.tsx b/src/pages/OrderManagement/OrderManagement.tsx
index cff599f..c5c58c7 100644
--- a/src/pages/OrderManagement/OrderManagement.tsx
+++ b/src/pages/OrderManagement/OrderManagement.tsx
@@ -64,7 +64,6 @@ const OrderManagement: React.FC = () => {
                     elem.size6,
                 )
             });
-            console.log(data); 
             setOrders(data);
             setShownOrders(data); 
         }
@@ -97,16 +96,19 @@ const OrderManagement: React.FC = () => {
 
     return (
         <div className="page-wrapper">
-            <h1>Order Management</h1>
-            <Group justify="space-between" className="modifiers">
-                <div>
-                    <Filter baseOrders={orders} setOrders={setShownOrders} classes="mod-button"></Filter>
-                    <Sorter orders={orders} setOrders={setShownOrders} classes="mod-button" whichSorters={["OrderName", "PartnerName", "Date", "Num", "Status"]}></Sorter>
-                    <Button className="mod-button" onClick={reverse}><IconArrowsDownUp></IconArrowsDownUp></Button>
-                </div>
-                
-                <Autocomplete leftSection={<IconSearch></IconSearch>} data={[]} value={searchVal} onChange={searchBar}></Autocomplete>
-            </Group>
+            <div className="dont-scroll">
+                <h1 className="management-title">Order Management</h1>
+                <Group justify="space-between" className="modifiers">
+                    <div>
+                        <Filter baseOrders={orders} setOrders={setShownOrders} classes="mod-button"></Filter>
+                        <Sorter orders={orders} setOrders={setShownOrders} classes="mod-button" whichSorters={["PartnerName", "Date", "Num", "Status"]}></Sorter>
+                        <Button className="mod-button" onClick={reverse}><IconArrowsDownUp></IconArrowsDownUp></Button>
+                    </div>
+                    
+                    <Autocomplete leftSection={<IconSearch></IconSearch>} radius="md" data={[]} value={searchVal} onChange={searchBar}></Autocomplete>
+                </Group>
+            </div>
+            
             <StaffOrderTable orders={shownOrders}></StaffOrderTable>
         </div>
         
diff --git a/src/pages/OrderManagement/StaffOrderTable.tsx b/src/pages/OrderManagement/StaffOrderTable.tsx
index 8cfc56f..53136e7 100644
--- a/src/pages/OrderManagement/StaffOrderTable.tsx
+++ b/src/pages/OrderManagement/StaffOrderTable.tsx
@@ -22,24 +22,26 @@ const StaffOrderTable: React.FC<TableProps> = ({ orders }: TableProps) => {
                             <Text fw={700}>Order Status</Text>
                         </Group>
                     </Container>
-                    {orders?.map((val: Order, index: number) => {
-                        return (
-                            <Container className="OrderPopup-container" w="100%" fluid key={index}>
-                                <OrderPopup order={val}>
-                                    <Group style={{ width: '100%' }} grow gap="xl">
-                                        <Text>{val.partner}</Text>
-                                        <Text>{val.datePlaced.toDateString()}</Text>
-                                        <Text>{val.numDiapers}</Text>
-                                        <Flex direction="row" gap="sm" align={"center"}>
-                                            <StatusImage status={val.status}></StatusImage>
-                                            <Text>{val.status}</Text>
-                                        </Flex>
-                                            
-                                    </Group>
-                                </OrderPopup>
-                            </Container>
-                        )
-                    })}
+                    <div className="scrollable">
+                        {orders?.map((val: Order, index: number) => {
+                            return (
+                                <Container className="OrderPopup-container" w="100%" fluid key={index}>
+                                    <OrderPopup order={val}>
+                                        <Group style={{ width: '100%' }} grow gap="xl">
+                                            <Text>{val.partner}</Text>
+                                            <Text>{val.datePlaced.toDateString()}</Text>
+                                            <Text>{val.numDiapers}</Text>
+                                            <Flex direction="row" gap="sm" align={"center"}>
+                                                <StatusImage status={val.status}></StatusImage>
+                                                <Text>{val.status}</Text>
+                                            </Flex>
+                                                
+                                        </Group>
+                                    </OrderPopup>
+                                </Container>
+                            )
+                        })}
+                    </div>
                 </Stack>
             </div>
 
diff --git a/src/styles/OrderManagement.css b/src/styles/OrderManagement.css
index fe3d244..9d2b13b 100644
--- a/src/styles/OrderManagement.css
+++ b/src/styles/OrderManagement.css
@@ -10,20 +10,22 @@
     --dark-color-1: #201a1e;
     --dark-color-2: #4e444b;
     --gray-color: #bab6b9; 
+    --yellow-color: #ffea00; 
 }
 
-.page-wrapper {
-    background-color: var(--primary-color-20);
+.page-wrapper { 
+    background-color: var(--light-color-1);
     padding: 1rem; 
 }
 
-.modifiers {
-    background-color: var(--primary-color-50);
+.modifiers { 
+    background-color: var(--chart-color-2);
+    border-radius: 0.5rem; 
     padding: 0.5rem; 
 }
 
 .mod-button {
-    background-color: var(--primary-color-50); 
+    background-color: var(--chart-color-2); 
     color: black; 
 }
 
@@ -32,8 +34,17 @@
     border-bottom: 0.125rem solid var(--gray-color); 
 }
 
+.scrollable {
+    overflow: auto; 
+    height: 65vh; 
+}
+
+.OrderPopup-container {
+    padding: 0.5rem; 
+}
+
 .OrderPopup-container:hover {
-    background-color: var(--primary-color-50); 
+    background-color: var(--primary-color-20); 
     cursor: pointer; 
 }
 
@@ -49,7 +60,7 @@
 }
 
 .yellow_circle {
-    background-color: yellow; 
+    background-color: var(--yellow-color); 
 }
 
 .light-green_circle {