feat: frontend

ordr-ui/app/components/OrderTableRow.tsx

@@ -0,0 +1,91 @@
+import { useState } from "react"
+import styled from "styled-components"
+import { OrderItemTable } from "./OrderItemTable"
+
+type OrderTableRowProps = {
+    orderId:    number
+    orderer:    string
+	dateDue:    string
+	datePlaced: string
+	amountPaid: number
+	orderTotal: number
+	amountDue:  number
+	filled:     boolean
+	delivered:  boolean
+}
+
+const OrderRowContainer = styled.div`
+    margin-bottom: 10px;
+    padding-top: 5px;
+    padding-bottom: 5px;
+    width: 100%;
+`
+
+const OrderFieldContainer = styled.div`
+    display: inline-block;
+    padding-left: 5px;
+    padding-right: 5px;
+`
+
+const OrderOverviewContainer = styled.div`
+    display: inline-block;
+    background-color:  #410041ff;
+    width: 100%;
+
+    &:hover {
+        background-color: #920592ff;
+        cursor: pointer;
+    }
+`
+
+const OrderDetailsContainer = styled.div`
+    display: inline-block;
+    background-color:  #6e296eff;
+    width: 100%;
+
+    &:hover {
+        background-color: #da51daff;
+        color: #000;
+        cursor: pointer;
+    }
+`
+
+export const OrderTableRow = ({orderId, orderer, dateDue, datePlaced, amountPaid, orderTotal, amountDue, filled, delivered}: OrderTableRowProps) => {
+    const dateDueDate = new Date(dateDue)
+    const datePlacedDate = new Date(datePlaced)
+
+    const [shouldShowDetails, setShouldShowDetails] = useState<boolean>(false)
+
+    return (
+        <li>
+            <OrderRowContainer>
+                <OrderOverviewContainer onClick={() => {
+                    setShouldShowDetails(!shouldShowDetails)
+                }}>
+                    <OrderFieldContainer>
+                        orderer: {orderer}
+                    </OrderFieldContainer>
+                    <OrderFieldContainer>
+                        due: {dateDueDate.toLocaleDateString()}
+                    </OrderFieldContainer>
+                </OrderOverviewContainer>
+                {shouldShowDetails && (
+                    <>
+                        <OrderDetailsContainer>
+                            <OrderFieldContainer>
+                                placed: {datePlacedDate.toLocaleDateString()}
+                            </OrderFieldContainer>
+                            <OrderFieldContainer>
+                                balance: {(Math.trunc(amountDue * 100) / 100).toString()}
+                            </OrderFieldContainer>
+                            <OrderFieldContainer>
+                                {filled ? delivered ? "delivered" : "undelivered" : "unfilled"}
+                            </OrderFieldContainer>
+                        </OrderDetailsContainer>
+                        <OrderItemTable orderId={orderId} />
+                    </>
+                )}
+            </OrderRowContainer>
+        </li>
+    )
+}