Mark latest box picked up button

app/components/Calendar.module.css

@@ -37,7 +37,7 @@
     border-radius: 0.5rem;
 }
 
-.deliveredCell {
+.pickedUpCell {
     background-color: #27db60;
 
     &:hover {
@@ -45,7 +45,7 @@
     }
 }
 
-.pickedUpCell {
+.deliveredCell {
     background-color: #a7ebb0;
 
     &:hover {
@@ -62,3 +62,77 @@
     font-size: 0.8rem;
     color: #555;
 }
+
+.latestBoxDeliveredBtn {
+    background-color: #a7ebb0;
+    padding: 10px 20px;
+    cursor: pointer;
+    margin-bottom: 2rem;
+    border: 1px solid #ccc;
+    border-radius: 10px;
+    font-size: 1.3rem;
+
+    &:hover {
+        background-color: #7dcf8c;
+    }
+
+    &:disabled {
+        background-color: #ffffff;
+        cursor: not-allowed;
+    }
+}
+
+.latestBoxPickedUpBtn {
+    background-color: #7dcf8c;
+    padding: 10px 20px;
+    cursor: pointer;
+    margin-bottom: 2rem;
+    border: 1px solid #ccc;
+    border-radius: 10px;
+    font-size: 1.3rem;
+}
+
+.latestBoxNoBoxesBtn {
+    background-color: #fff;
+    padding: 10px 20px;
+    cursor: pointer;
+    margin-bottom: 2rem;
+    border: 1px solid #ccc;
+    border-radius: 10px;
+    font-size: 1.3rem;
+}
+
+.latestBoxModal {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background-color: rgba(0, 0, 0, 0.5);
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+
+.latestBoxModalContent {
+    background-color: #fff;
+    padding: 2rem;
+    border-radius: 10px;
+    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+    text-align: center;
+}
+
+.latestBoxConfirmButton {
+    background-color: #86f56d;
+    border: none;
+    border-radius: 10px;
+    padding: 10px 20px;
+    margin-right: 1rem;
+}
+
+.latestBoxCancelButton {
+    background-color: #f56d6d;
+    border: none;
+    border-radius: 10px;
+    padding: 10px 20px;
+}

app/components/Calendar.tsx

@@ -5,17 +5,16 @@ import { customerState } from "../store";
 import { Box } from "../types";
 import { useAtom } from "jotai";
 import { markBoxDelivered, markBoxPickedUp } from "../api";
+import { Modal } from "@mui/material";
 
 export default function Calendar() {
+    const latestBoxStatuses = ["no boxes", "picked up", "delivered"]; //TODO: There's logic problem between "delivered" and "picked up"
     const [customerData, setCustomerData] = useAtom(customerState);
     const [selectedMonth, setSelectedMonth] = useState(new Date().getMonth());
     const [calendarCells, setCalendarCells] = useState<JSX.Element[]>([]);
     const [firstWeekPadding, setFirstWeekPadding] = useState<JSX.Element[]>([]);
-
+    const [showLatestBoxModal, setShowLatestBoxModal] = useState(false);
-    useEffect(() => {
+    const [latestBoxStatus, setLatestBoxStatus] = useState<string>(latestBoxStatuses[0]);
-        setCalendarCells(generateCalendarCells(selectedMonth, customerData.boxes));
-        setFirstWeekPadding(generateFirstWeekPadding(selectedMonth));
-    }, [selectedMonth, customerData.boxes]);
 
     const generateFirstWeekPadding = (month: number) => {
         const firstDay = new Date(new Date().getFullYear(), month, 1).getDay();
@@ -78,9 +77,9 @@ export default function Calendar() {
                         })}
                         <br />
                         {matchingBox.pickup_date ? (
-                            <span className={styles.statusText}>Jako</span>
-                        ) : (
                             <span className={styles.statusText}>Haettu</span>
+                        ) : (
+                            <span className={styles.statusText}>Jako</span>
                         )}
                     </div>
                 );
@@ -98,6 +97,77 @@ export default function Calendar() {
         return calendarCells;
     }
 
+    const renderLatestBoxButton = () => {
+        switch (latestBoxStatus) {
+            case "no boxes":
+                return <button
+                    className={styles.latestBoxNoBoxesBtn}
+                    disabled
+                >
+                    Ei laatikoita tässä kuussa
+                </button>;
+            case "picked up":
+                return <button
+                    className={styles.latestBoxPickedUpBtn}
+                    disabled
+                >
+                    Uusin laatikko on jo haettu
+                </button>;
+            case "delivered":
+                return <button
+                    className={styles.latestBoxDeliveredBtn}
+                    onClick={handleLatestBoxClick}
+                >
+                    Kuittaa uusin laatikko haetuksi
+                </button>;
+            default:
+                return <span className={styles.latestBoxStatus}>Virhe</span>;
+        }
+    }
+
+    useEffect(() => {
+        setCalendarCells(generateCalendarCells(selectedMonth, customerData.boxes));
+        setFirstWeekPadding(generateFirstWeekPadding(selectedMonth));
+        setLatestBoxStatus(() => {
+            if (!customerData.boxes || customerData.boxes.length === 0) {
+                return latestBoxStatuses[0]; // no boxes
+            }
+            const monthBoxes = customerData.boxes.filter(box => new Date(box.delivery_date).getMonth() === selectedMonth);
+            if (!monthBoxes || monthBoxes.length === 0) {
+                return latestBoxStatuses[0]; // no boxes
+            }
+            const latestBox = monthBoxes[monthBoxes.length - 1];
+            if (latestBox.pickup_date) {
+                return latestBoxStatuses[1]; // picked up
+            }
+            return latestBoxStatuses[2]; // delivered
+        }
+        );
+    }, [selectedMonth, customerData.boxes]);
+
+    const handleLatestBoxClick = (event: React.MouseEvent<HTMLButtonElement>) => {
+        event.preventDefault();
+        setShowLatestBoxModal(true);
+    }
+
+    const markLatestBoxPickedUp = () => {
+        const monthBoxes = customerData.boxes.filter(box => new Date(box.delivery_date).getMonth() === selectedMonth);
+        if (monthBoxes.length === 0) return;
+        console.log("Marking latest box as picked up");
+        console.log("Month boxes:", monthBoxes);
+        const latestBox = monthBoxes[monthBoxes.length - 1];
+        markBoxPickedUp(latestBox.id).then((updatedBox) => {
+            setCustomerData((prev) => ({
+                ...prev,
+                boxes: prev.boxes.map(box =>
+                    box.id === updatedBox.id ? { ...box, pickup_date: updatedBox.pickup_date } : box
+                ),
+            }));
+        }).catch((error) => {
+            console.error("Error marking latest box as picked up:", error);
+        });
+    }
+
     return (
         <>
             <h2 className={styles.monthTitle}>
@@ -111,6 +181,9 @@ export default function Calendar() {
                     Seuraava kuukausi &gt;
                 </button>
             </div>
+            <div className={styles.latestBoxBtnContainer}>
+                {renderLatestBoxButton()}
+            </div>
             <div className={styles.calendarGrid}>
                 <span>Ma</span>
                 <span>Ti</span>
@@ -122,6 +195,31 @@ export default function Calendar() {
                 {firstWeekPadding}
                 {calendarCells}
             </div>
+            <Modal
+                open={showLatestBoxModal}
+                onClose={() => setShowLatestBoxModal(false)}
+                className={styles.latestBoxModal}
+            >
+                <div className={styles.latestBoxModalContent}>
+                    <h2>Viimeisin laatikko</h2>
+                    <p>Oletko varma, että haluat kuitata viimeisimmän laatikon haetuksi?</p>
+                    <button
+                        className={styles.latestBoxConfirmButton}
+                        onClick={() => {
+                            markLatestBoxPickedUp();
+                            setShowLatestBoxModal(false);
+                        }}
+                    >
+                        Kyllä
+                    </button>
+                    <button
+                        className={styles.latestBoxCancelButton}
+                        onClick={() => setShowLatestBoxModal(false)}
+                    >
+                        Peruuta
+                    </button>
+                </div>
+            </Modal>
         </>
     );
 }

package.json

@@ -9,6 +9,10 @@
     "lint": "next lint"
   },
   "dependencies": {
+    "@emotion/react": "^11.14.0",
+    "@emotion/styled": "^11.14.0",
+    "@mui/icons-material": "^7.1.1",
+    "@mui/material": "^7.1.1",
     "jotai": "^2.12.5",
     "next": "15.3.3",
     "react": "^19.0.0",