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 {
@@ -61,4 +61,78 @@
 .statusText {
     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;
 }