From ff18a7a60c8535a4671b8965cff505a27255410d Mon Sep 17 00:00:00 2001
From: Keannu Bernasol <noehbernasol0@gmail.com>
Date: Fri, 5 Jan 2024 19:31:37 +0800
Subject: [PATCH] Improved tally page

---
 .../EquipmentTallyPage/EquipmentTallyPage.tsx | 42 +++++++++++++++----
 1 file changed, 35 insertions(+), 7 deletions(-)

diff --git a/src/Pages/EquipmentTallyPage/EquipmentTallyPage.tsx b/src/Pages/EquipmentTallyPage/EquipmentTallyPage.tsx
index 91ce1ef..6e703ab 100644
--- a/src/Pages/EquipmentTallyPage/EquipmentTallyPage.tsx
+++ b/src/Pages/EquipmentTallyPage/EquipmentTallyPage.tsx
@@ -194,13 +194,41 @@ export default function EquipmentTallyPage() {
                         {equipment.category}
                       </TableCell>
                       <TableCell align="center" component="th" scope="row">
-                        {
-                          equipment_instances.data?.filter(
-                            (equipment_instance) =>
-                              equipment_instance.equipment_name ==
-                              equipment.name
-                          ).length
-                        }
+                        <div style={styles.flex_column}>
+                          <p style={{ ...styles.text_dark, ...styles.text_S }}>
+                            Available:
+                            {
+                              equipment_instances.data?.filter(
+                                (equipment_instance) =>
+                                  equipment_instance.equipment_name ==
+                                    equipment.name &&
+                                  equipment_instance.status == "Available"
+                              ).length
+                            }
+                          </p>
+                          <p style={{ ...styles.text_dark, ...styles.text_S }}>
+                            Pending:
+                            {
+                              equipment_instances.data?.filter(
+                                (equipment_instance) =>
+                                  equipment_instance.equipment_name ==
+                                    equipment.name &&
+                                  equipment_instance.status == "Pending"
+                              ).length
+                            }
+                          </p>
+                          <p style={{ ...styles.text_dark, ...styles.text_S }}>
+                            Broken:
+                            {
+                              equipment_instances.data?.filter(
+                                (equipment_instance) =>
+                                  equipment_instance.equipment_name ==
+                                    equipment.name &&
+                                  equipment_instance.status == "Broken"
+                              ).length
+                            }
+                          </p>
+                        </div>
                       </TableCell>
                     </TableRow>
                   ))