From 9bb312808edd2aeb78771a3fefd95512fac62812 Mon Sep 17 00:00:00 2001
From: Keannu Bernasol <noehbernasol0@gmail.com>
Date: Thu, 14 Dec 2023 20:32:12 +0800
Subject: [PATCH] Improved all rendered tables by removing redundant div

---
 .../EquipmentInstancesFilteredListPage.tsx    | 141 +++++-----
 .../EquipmentInstancesListPage.tsx            | 133 +++++-----
 .../EquipmentListPage/EquipmentListPage.tsx   | 133 +++++-----
 .../EquipmentLogsPage/EquipmentLogsPage.tsx   | 141 +++++-----
 .../TransactionsListPage.tsx                  | 251 +++++++++---------
 5 files changed, 402 insertions(+), 397 deletions(-)

diff --git a/src/Pages/EquipmentInstancesListPage/EquipmentInstancesFilteredListPage.tsx b/src/Pages/EquipmentInstancesListPage/EquipmentInstancesFilteredListPage.tsx
index 9282acb..87f26eb 100644
--- a/src/Pages/EquipmentInstancesListPage/EquipmentInstancesFilteredListPage.tsx
+++ b/src/Pages/EquipmentInstancesListPage/EquipmentInstancesFilteredListPage.tsx
@@ -67,78 +67,79 @@ export default function EquipmentInstancesFilteredListPage() {
           flexWrap: "wrap",
         }}
       >
-        <div style={{ width: "90%", overflowY: "scroll", marginTop: "2rem" }}>
-          <TableContainer component={Paper}>
-            <Table sx={{ minWidth: "32rem" }} size="medium">
-              <TableHead>
-                <TableRow style={{ backgroundColor: colors.header_color }}>
-                  <TableCell style={styles.text_light}>ID</TableCell>
-                  <TableCell align="center" style={styles.text_light}>
-                    Name
-                  </TableCell>
-                  <TableCell align="center" style={styles.text_light}>
-                    Status
-                  </TableCell>
-                  <TableCell align="center" style={styles.text_light}>
-                    Category
-                  </TableCell>
-                  <TableCell align="center" style={styles.text_light}>
-                    Last Modified
-                  </TableCell>
-                </TableRow>
-              </TableHead>
-              <TableBody>
-                {equipment_instances.data ? (
-                  equipment_instances.data
-                    .filter((equipment) => equipment.category === filter_by)
-                    .map((equipment) => (
-                      <TableRow
-                        key={equipment.id}
-                        sx={{
-                          "&:last-child td, &:last-child th": { border: 0 },
-                        }}
-                        onClick={() => {
-                          SetSelectedItem(equipment.id);
-                          SetEditModalOpen(true);
-                        }}
-                      >
-                        <TableCell align="center" component="th" scope="row">
-                          {equipment.id}
-                        </TableCell>
-                        <TableCell align="center" component="th" scope="row">
-                          {equipment.equipment_name}
-                        </TableCell>
+        <TableContainer
+          style={{ width: "90%", overflowY: "scroll", marginTop: "2rem" }}
+          component={Paper}
+        >
+          <Table sx={{ minWidth: "32rem" }} size="medium">
+            <TableHead>
+              <TableRow style={{ backgroundColor: colors.header_color }}>
+                <TableCell style={styles.text_light}>ID</TableCell>
+                <TableCell align="center" style={styles.text_light}>
+                  Name
+                </TableCell>
+                <TableCell align="center" style={styles.text_light}>
+                  Status
+                </TableCell>
+                <TableCell align="center" style={styles.text_light}>
+                  Category
+                </TableCell>
+                <TableCell align="center" style={styles.text_light}>
+                  Last Modified
+                </TableCell>
+              </TableRow>
+            </TableHead>
+            <TableBody>
+              {equipment_instances.data ? (
+                equipment_instances.data
+                  .filter((equipment) => equipment.category === filter_by)
+                  .map((equipment) => (
+                    <TableRow
+                      key={equipment.id}
+                      sx={{
+                        "&:last-child td, &:last-child th": { border: 0 },
+                      }}
+                      onClick={() => {
+                        SetSelectedItem(equipment.id);
+                        SetEditModalOpen(true);
+                      }}
+                    >
+                      <TableCell align="center" component="th" scope="row">
+                        {equipment.id}
+                      </TableCell>
+                      <TableCell align="center" component="th" scope="row">
+                        {equipment.equipment_name}
+                      </TableCell>
 
-                        <TableCell align="center" component="th" scope="row">
-                          {equipment.status}
-                        </TableCell>
-                        <TableCell align="center" component="th" scope="row">
-                          {equipment.category}
-                        </TableCell>
-                        <TableCell align="right">
-                          <div
-                            style={{
-                              ...styles.flex_column,
-                              ...{ alignItems: "center" },
-                            }}
-                          >
-                            <div>{equipment.last_updated}</div>
-                            <div>
-                              {equipment.last_updated_by
-                                ? "by " + equipment.last_updated_by
-                                : ""}
-                            </div>
+                      <TableCell align="center" component="th" scope="row">
+                        {equipment.status}
+                      </TableCell>
+                      <TableCell align="center" component="th" scope="row">
+                        {equipment.category}
+                      </TableCell>
+                      <TableCell align="right">
+                        <div
+                          style={{
+                            ...styles.flex_column,
+                            ...{ alignItems: "center" },
+                          }}
+                        >
+                          <div>{equipment.last_updated}</div>
+                          <div>
+                            {equipment.last_updated_by
+                              ? "by " + equipment.last_updated_by
+                              : ""}
                           </div>
-                        </TableCell>
-                      </TableRow>
-                    ))
-                ) : (
-                  <></>
-                )}
-              </TableBody>
-            </Table>
-          </TableContainer>
-        </div>
+                        </div>
+                      </TableCell>
+                    </TableRow>
+                  ))
+              ) : (
+                <></>
+              )}
+            </TableBody>
+          </Table>
+        </TableContainer>
       </div>
       <Popup
         open={editmodalOpen}
diff --git a/src/Pages/EquipmentInstancesListPage/EquipmentInstancesListPage.tsx b/src/Pages/EquipmentInstancesListPage/EquipmentInstancesListPage.tsx
index 5762f60..2de21a2 100644
--- a/src/Pages/EquipmentInstancesListPage/EquipmentInstancesListPage.tsx
+++ b/src/Pages/EquipmentInstancesListPage/EquipmentInstancesListPage.tsx
@@ -65,74 +65,75 @@ export default function EquipmentInstancesListPage() {
           flexWrap: "wrap",
         }}
       >
-        <div style={{ width: "90%", overflowY: "scroll", marginTop: "2rem" }}>
-          <TableContainer component={Paper}>
-            <Table sx={{ minWidth: "32rem" }} size="medium">
-              <TableHead>
-                <TableRow style={{ backgroundColor: colors.header_color }}>
-                  <TableCell style={styles.text_light}>ID</TableCell>
-                  <TableCell align="center" style={styles.text_light}>
-                    Name
-                  </TableCell>
-                  <TableCell align="center" style={styles.text_light}>
-                    Status
-                  </TableCell>
-                  <TableCell align="center" style={styles.text_light}>
-                    Category
-                  </TableCell>
-                  <TableCell align="center" style={styles.text_light}>
-                    Last Modified
-                  </TableCell>
-                </TableRow>
-              </TableHead>
-              <TableBody>
-                {equipment_instances.data ? (
-                  equipment_instances.data.map((equipment) => (
-                    <TableRow
-                      key={equipment.id}
-                      sx={{ "&:last-child td, &:last-child th": { border: 0 } }}
-                      onClick={() => {
-                        SetSelectedItem(equipment.id);
-                        SetEditModalOpen(true);
-                      }}
-                    >
-                      <TableCell align="center" component="th" scope="row">
-                        {equipment.id}
-                      </TableCell>
-                      <TableCell align="center" component="th" scope="row">
-                        {equipment.equipment_name}
-                      </TableCell>
+        <TableContainer
+          style={{ width: "90%", overflowY: "scroll", marginTop: "2rem" }}
+          component={Paper}
+        >
+          <Table sx={{ minWidth: "32rem" }} size="medium">
+            <TableHead>
+              <TableRow style={{ backgroundColor: colors.header_color }}>
+                <TableCell style={styles.text_light}>ID</TableCell>
+                <TableCell align="center" style={styles.text_light}>
+                  Name
+                </TableCell>
+                <TableCell align="center" style={styles.text_light}>
+                  Status
+                </TableCell>
+                <TableCell align="center" style={styles.text_light}>
+                  Category
+                </TableCell>
+                <TableCell align="center" style={styles.text_light}>
+                  Last Modified
+                </TableCell>
+              </TableRow>
+            </TableHead>
+            <TableBody>
+              {equipment_instances.data ? (
+                equipment_instances.data.map((equipment) => (
+                  <TableRow
+                    key={equipment.id}
+                    sx={{ "&:last-child td, &:last-child th": { border: 0 } }}
+                    onClick={() => {
+                      SetSelectedItem(equipment.id);
+                      SetEditModalOpen(true);
+                    }}
+                  >
+                    <TableCell align="center" component="th" scope="row">
+                      {equipment.id}
+                    </TableCell>
+                    <TableCell align="center" component="th" scope="row">
+                      {equipment.equipment_name}
+                    </TableCell>
 
-                      <TableCell align="center" component="th" scope="row">
-                        {equipment.status}
-                      </TableCell>
-                      <TableCell align="center" component="th" scope="row">
-                        {equipment.category}
-                      </TableCell>
-                      <TableCell align="right">
-                        <div
-                          style={{
-                            ...styles.flex_column,
-                            ...{ alignItems: "center" },
-                          }}
-                        >
-                          <div>{equipment.last_updated}</div>
-                          <div>
-                            {equipment.last_updated_by
-                              ? "by " + equipment.last_updated_by
-                              : ""}
-                          </div>
+                    <TableCell align="center" component="th" scope="row">
+                      {equipment.status}
+                    </TableCell>
+                    <TableCell align="center" component="th" scope="row">
+                      {equipment.category}
+                    </TableCell>
+                    <TableCell align="right">
+                      <div
+                        style={{
+                          ...styles.flex_column,
+                          ...{ alignItems: "center" },
+                        }}
+                      >
+                        <div>{equipment.last_updated}</div>
+                        <div>
+                          {equipment.last_updated_by
+                            ? "by " + equipment.last_updated_by
+                            : ""}
                         </div>
-                      </TableCell>
-                    </TableRow>
-                  ))
-                ) : (
-                  <></>
-                )}
-              </TableBody>
-            </Table>
-          </TableContainer>
-        </div>
+                      </div>
+                    </TableCell>
+                  </TableRow>
+                ))
+              ) : (
+                <></>
+              )}
+            </TableBody>
+          </Table>
+        </TableContainer>
       </div>
       <Popup
         open={editmodalOpen}
diff --git a/src/Pages/EquipmentListPage/EquipmentListPage.tsx b/src/Pages/EquipmentListPage/EquipmentListPage.tsx
index c2033e8..704a795 100644
--- a/src/Pages/EquipmentListPage/EquipmentListPage.tsx
+++ b/src/Pages/EquipmentListPage/EquipmentListPage.tsx
@@ -65,74 +65,75 @@ export default function EquipmentListPage() {
           flexWrap: "wrap",
         }}
       >
-        <div style={{ width: "90%", overflowY: "scroll", marginTop: "2rem" }}>
-          <TableContainer component={Paper}>
-            <Table sx={{ minWidth: "32rem" }} size="medium">
-              <TableHead>
-                <TableRow style={{ backgroundColor: colors.header_color }}>
-                  <TableCell style={styles.text_light}>ID</TableCell>
-                  <TableCell align="center" style={styles.text_light}>
-                    Name
-                  </TableCell>
-                  <TableCell align="center" style={styles.text_light}>
-                    Description
-                  </TableCell>
-                  <TableCell align="center" style={styles.text_light}>
-                    Category
-                  </TableCell>
-                  <TableCell align="center" style={styles.text_light}>
-                    Last Modified
-                  </TableCell>
-                </TableRow>
-              </TableHead>
-              <TableBody>
-                {equipments.data ? (
-                  equipments.data.map((equipment) => (
-                    <TableRow
-                      key={equipment.id}
-                      sx={{ "&:last-child td, &:last-child th": { border: 0 } }}
-                      onClick={() => {
-                        SetSelectedItem(equipment.id);
-                        SetEditModalOpen(true);
-                      }}
-                    >
-                      <TableCell align="center" component="th" scope="row">
-                        {equipment.id}
-                      </TableCell>
-                      <TableCell align="center" component="th" scope="row">
-                        {equipment.name}
-                      </TableCell>
+        <TableContainer
+          style={{ width: "90%", overflowY: "scroll", marginTop: "2rem" }}
+          component={Paper}
+        >
+          <Table sx={{ minWidth: "32rem" }} size="medium">
+            <TableHead>
+              <TableRow style={{ backgroundColor: colors.header_color }}>
+                <TableCell style={styles.text_light}>ID</TableCell>
+                <TableCell align="center" style={styles.text_light}>
+                  Name
+                </TableCell>
+                <TableCell align="center" style={styles.text_light}>
+                  Description
+                </TableCell>
+                <TableCell align="center" style={styles.text_light}>
+                  Category
+                </TableCell>
+                <TableCell align="center" style={styles.text_light}>
+                  Last Modified
+                </TableCell>
+              </TableRow>
+            </TableHead>
+            <TableBody>
+              {equipments.data ? (
+                equipments.data.map((equipment) => (
+                  <TableRow
+                    key={equipment.id}
+                    sx={{ "&:last-child td, &:last-child th": { border: 0 } }}
+                    onClick={() => {
+                      SetSelectedItem(equipment.id);
+                      SetEditModalOpen(true);
+                    }}
+                  >
+                    <TableCell align="center" component="th" scope="row">
+                      {equipment.id}
+                    </TableCell>
+                    <TableCell align="center" component="th" scope="row">
+                      {equipment.name}
+                    </TableCell>
 
-                      <TableCell align="center" component="th" scope="row">
-                        {equipment.description}
-                      </TableCell>
-                      <TableCell align="center" component="th" scope="row">
-                        {equipment.category}
-                      </TableCell>
-                      <TableCell align="right">
-                        <div
-                          style={{
-                            ...styles.flex_column,
-                            ...{ alignItems: "center" },
-                          }}
-                        >
-                          <div>{equipment.last_updated}</div>
-                          <div>
-                            {equipment.last_updated_by
-                              ? "by " + equipment.last_updated_by
-                              : ""}
-                          </div>
+                    <TableCell align="center" component="th" scope="row">
+                      {equipment.description}
+                    </TableCell>
+                    <TableCell align="center" component="th" scope="row">
+                      {equipment.category}
+                    </TableCell>
+                    <TableCell align="right">
+                      <div
+                        style={{
+                          ...styles.flex_column,
+                          ...{ alignItems: "center" },
+                        }}
+                      >
+                        <div>{equipment.last_updated}</div>
+                        <div>
+                          {equipment.last_updated_by
+                            ? "by " + equipment.last_updated_by
+                            : ""}
                         </div>
-                      </TableCell>
-                    </TableRow>
-                  ))
-                ) : (
-                  <></>
-                )}
-              </TableBody>
-            </Table>
-          </TableContainer>
-        </div>
+                      </div>
+                    </TableCell>
+                  </TableRow>
+                ))
+              ) : (
+                <></>
+              )}
+            </TableBody>
+          </Table>
+        </TableContainer>
       </div>
       <Popup
         open={editmodalOpen}
diff --git a/src/Pages/EquipmentLogsPage/EquipmentLogsPage.tsx b/src/Pages/EquipmentLogsPage/EquipmentLogsPage.tsx
index 8f30b2b..90c047a 100644
--- a/src/Pages/EquipmentLogsPage/EquipmentLogsPage.tsx
+++ b/src/Pages/EquipmentLogsPage/EquipmentLogsPage.tsx
@@ -60,78 +60,79 @@ export default function EquipmentLogsPage() {
           flexWrap: "wrap",
         }}
       >
-        <div style={{ width: "90%", overflowY: "scroll", marginTop: "2rem" }}>
-          <TableContainer component={Paper}>
-            <Table sx={{ minWidth: "32rem" }} size="medium">
-              <TableHead>
-                <TableRow style={{ backgroundColor: colors.header_color }}>
-                  <TableCell align="center" style={styles.text_light}>
-                    Transaction ID
-                  </TableCell>
-                  <TableCell align="center" style={styles.text_light}>
-                    SKU ID
-                  </TableCell>
-                  <TableCell align="center" style={styles.text_light}>
-                    Name
-                  </TableCell>
-                  <TableCell align="center" style={styles.text_light}>
-                    Description
-                  </TableCell>
-                  <TableCell align="center" style={styles.text_light}>
-                    Category
-                  </TableCell>
-                  <TableCell align="center" style={styles.text_light}>
-                    Date Modified
-                  </TableCell>
-                </TableRow>
-              </TableHead>
-              <TableBody>
-                {equipment_logs.data ? (
-                  equipment_logs.data.map((equipment_log) => (
-                    <TableRow
-                      key={equipment_log.history_id}
-                      sx={{ "&:last-child td, &:last-child th": { border: 0 } }}
-                    >
-                      <TableCell align="center" component="th" scope="row">
-                        {equipment_log.history_id}
-                      </TableCell>
-                      <TableCell align="center" component="th" scope="row">
-                        {equipment_log.id}
-                      </TableCell>
-                      <TableCell align="center" component="th" scope="row">
-                        {equipment_log.name}
-                      </TableCell>
+        <TableContainer
+          style={{ width: "90%", overflowY: "scroll", marginTop: "2rem" }}
+          component={Paper}
+        >
+          <Table sx={{ minWidth: "32rem" }} size="medium">
+            <TableHead>
+              <TableRow style={{ backgroundColor: colors.header_color }}>
+                <TableCell align="center" style={styles.text_light}>
+                  Transaction ID
+                </TableCell>
+                <TableCell align="center" style={styles.text_light}>
+                  SKU ID
+                </TableCell>
+                <TableCell align="center" style={styles.text_light}>
+                  Name
+                </TableCell>
+                <TableCell align="center" style={styles.text_light}>
+                  Description
+                </TableCell>
+                <TableCell align="center" style={styles.text_light}>
+                  Category
+                </TableCell>
+                <TableCell align="center" style={styles.text_light}>
+                  Date Modified
+                </TableCell>
+              </TableRow>
+            </TableHead>
+            <TableBody>
+              {equipment_logs.data ? (
+                equipment_logs.data.map((equipment_log) => (
+                  <TableRow
+                    key={equipment_log.history_id}
+                    sx={{ "&:last-child td, &:last-child th": { border: 0 } }}
+                  >
+                    <TableCell align="center" component="th" scope="row">
+                      {equipment_log.history_id}
+                    </TableCell>
+                    <TableCell align="center" component="th" scope="row">
+                      {equipment_log.id}
+                    </TableCell>
+                    <TableCell align="center" component="th" scope="row">
+                      {equipment_log.name}
+                    </TableCell>
 
-                      <TableCell align="center" component="th" scope="row">
-                        {equipment_log.description}
-                      </TableCell>
-                      <TableCell align="center" component="th" scope="row">
-                        {equipment_log.category}
-                      </TableCell>
-                      <TableCell align="right">
-                        <div
-                          style={{
-                            ...styles.flex_column,
-                            ...{ alignItems: "center" },
-                          }}
-                        >
-                          <div>{equipment_log.history_date}</div>
-                          <div>
-                            {equipment_log.history_user
-                              ? "by " + equipment_log.history_user
-                              : ""}
-                          </div>
+                    <TableCell align="center" component="th" scope="row">
+                      {equipment_log.description}
+                    </TableCell>
+                    <TableCell align="center" component="th" scope="row">
+                      {equipment_log.category}
+                    </TableCell>
+                    <TableCell align="right">
+                      <div
+                        style={{
+                          ...styles.flex_column,
+                          ...{ alignItems: "center" },
+                        }}
+                      >
+                        <div>{equipment_log.history_date}</div>
+                        <div>
+                          {equipment_log.history_user
+                            ? "by " + equipment_log.history_user
+                            : ""}
                         </div>
-                      </TableCell>
-                    </TableRow>
-                  ))
-                ) : (
-                  <></>
-                )}
-              </TableBody>
-            </Table>
-          </TableContainer>
-        </div>
+                      </div>
+                    </TableCell>
+                  </TableRow>
+                ))
+              ) : (
+                <></>
+              )}
+            </TableBody>
+          </Table>
+        </TableContainer>
       </div>
     </div>
   );
diff --git a/src/Pages/TransactionsListPage/TransactionsListPage.tsx b/src/Pages/TransactionsListPage/TransactionsListPage.tsx
index 0099e42..f5f480e 100644
--- a/src/Pages/TransactionsListPage/TransactionsListPage.tsx
+++ b/src/Pages/TransactionsListPage/TransactionsListPage.tsx
@@ -66,143 +66,144 @@ export default function TransactionsListPage() {
           flexWrap: "wrap",
         }}
       >
-        <div style={{ width: "90%", overflowY: "scroll", marginTop: "2rem" }}>
-          <TableContainer component={Paper}>
-            <Table sx={{ minWidth: "32rem" }} size="medium">
-              <TableHead>
-                <TableRow style={{ backgroundColor: colors.header_color }}>
-                  <TableCell align="center" style={styles.text_light}>
-                    ID
-                  </TableCell>
-                  <TableCell align="center" style={styles.text_light}>
-                    Borrower
-                  </TableCell>
-                  <TableCell align="center" style={styles.text_light}>
-                    Teacher
-                  </TableCell>
-                  <TableCell align="center" style={styles.text_light}>
-                    Status
-                  </TableCell>
-                  <TableCell align="center" style={styles.text_light}>
-                    Equipments
-                  </TableCell>
-                </TableRow>
-              </TableHead>
-              <TableBody>
-                {transactions.data ? (
-                  transactions.data.map((transaction) => (
-                    <TableRow
-                      key={transaction.id}
-                      sx={{ "&:last-child td, &:last-child th": { border: 0 } }}
+        <TableContainer
+          style={{ width: "90%", overflowY: "scroll", marginTop: "2rem" }}
+          component={Paper}
+        >
+          <Table sx={{ minWidth: "32rem" }} size="medium">
+            <TableHead>
+              <TableRow style={{ backgroundColor: colors.header_color }}>
+                <TableCell align="center" style={styles.text_light}>
+                  ID
+                </TableCell>
+                <TableCell align="center" style={styles.text_light}>
+                  Borrower
+                </TableCell>
+                <TableCell align="center" style={styles.text_light}>
+                  Teacher
+                </TableCell>
+                <TableCell align="center" style={styles.text_light}>
+                  Status
+                </TableCell>
+                <TableCell align="center" style={styles.text_light}>
+                  Equipments
+                </TableCell>
+              </TableRow>
+            </TableHead>
+            <TableBody>
+              {transactions.data ? (
+                transactions.data.map((transaction) => (
+                  <TableRow
+                    key={transaction.id}
+                    sx={{ "&:last-child td, &:last-child th": { border: 0 } }}
+                  >
+                    <TableCell
+                      align="center"
+                      component="th"
+                      scope="row"
+                      onClick={() => {
+                        SetSelectedTransaction(transaction.id);
+                        SetEditTransactionOpen(true);
+                      }}
                     >
-                      <TableCell
-                        align="center"
-                        component="th"
-                        scope="row"
-                        onClick={() => {
-                          SetSelectedTransaction(transaction.id);
-                          SetEditTransactionOpen(true);
-                        }}
-                      >
-                        {transaction.id}
-                      </TableCell>
-                      <TableCell
-                        align="center"
-                        component="th"
-                        scope="row"
-                        onClick={() => {
-                          SetSelectedTransaction(transaction.id);
-                          SetEditTransactionOpen(true);
-                        }}
-                      >
-                        {transaction.borrower.name}
-                      </TableCell>
-                      <TableCell
-                        align="center"
-                        component="th"
-                        scope="row"
-                        onClick={() => {
-                          SetSelectedTransaction(transaction.id);
-                          SetEditTransactionOpen(true);
-                        }}
-                      >
-                        {transaction.teacher.name}
-                      </TableCell>
-                      <TableCell
-                        align="center"
-                        component="th"
-                        scope="row"
-                        onClick={() => {
-                          SetSelectedTransaction(transaction.id);
-                          SetEditTransactionOpen(true);
-                        }}
-                      >
-                        {transaction.transaction_status}
-                      </TableCell>
-                      <TableCell align="center">
-                        <TableContainer component={Paper}>
-                          <Table sx={{ minWidth: "4rem" }} size="medium">
-                            <TableHead>
+                      {transaction.id}
+                    </TableCell>
+                    <TableCell
+                      align="center"
+                      component="th"
+                      scope="row"
+                      onClick={() => {
+                        SetSelectedTransaction(transaction.id);
+                        SetEditTransactionOpen(true);
+                      }}
+                    >
+                      {transaction.borrower.name}
+                    </TableCell>
+                    <TableCell
+                      align="center"
+                      component="th"
+                      scope="row"
+                      onClick={() => {
+                        SetSelectedTransaction(transaction.id);
+                        SetEditTransactionOpen(true);
+                      }}
+                    >
+                      {transaction.teacher.name}
+                    </TableCell>
+                    <TableCell
+                      align="center"
+                      component="th"
+                      scope="row"
+                      onClick={() => {
+                        SetSelectedTransaction(transaction.id);
+                        SetEditTransactionOpen(true);
+                      }}
+                    >
+                      {transaction.transaction_status}
+                    </TableCell>
+                    <TableCell style={{ overflowY: "scroll" }} align="center">
+                      <TableContainer component={Paper}>
+                        <Table sx={{ minWidth: "4rem" }} size="medium">
+                          <TableHead>
+                            <TableRow
+                              style={{ backgroundColor: colors.header_color }}
+                            >
+                              <TableCell
+                                align="center"
+                                style={styles.text_light}
+                              >
+                                ID
+                              </TableCell>
+                              <TableCell
+                                align="center"
+                                style={styles.text_light}
+                              >
+                                Name
+                              </TableCell>
+                            </TableRow>
+                          </TableHead>
+                          <TableBody>
+                            {transaction.equipments.map((equipment) => (
                               <TableRow
-                                style={{ backgroundColor: colors.header_color }}
+                                key={equipment.id}
+                                sx={{
+                                  "&:last-child td, &:last-child th": {
+                                    border: 0,
+                                  },
+                                }}
+                                onClick={() => {
+                                  SetEditTransactionOpen(false);
+                                  SetEditEquipmentsOpen(true);
+                                }}
                               >
                                 <TableCell
                                   align="center"
-                                  style={styles.text_light}
+                                  component="th"
+                                  scope="row"
                                 >
-                                  ID
+                                  {equipment.id}
                                 </TableCell>
                                 <TableCell
                                   align="center"
-                                  style={styles.text_light}
+                                  component="th"
+                                  scope="row"
                                 >
-                                  Name
+                                  {equipment.name}
                                 </TableCell>
                               </TableRow>
-                            </TableHead>
-                            <TableBody>
-                              {transaction.equipments.map((equipment) => (
-                                <TableRow
-                                  key={equipment.id}
-                                  sx={{
-                                    "&:last-child td, &:last-child th": {
-                                      border: 0,
-                                    },
-                                  }}
-                                  onClick={() => {
-                                    SetEditTransactionOpen(false);
-                                    SetEditEquipmentsOpen(true);
-                                  }}
-                                >
-                                  <TableCell
-                                    align="center"
-                                    component="th"
-                                    scope="row"
-                                  >
-                                    {equipment.id}
-                                  </TableCell>
-                                  <TableCell
-                                    align="center"
-                                    component="th"
-                                    scope="row"
-                                  >
-                                    {equipment.name}
-                                  </TableCell>
-                                </TableRow>
-                              ))}
-                            </TableBody>
-                          </Table>
-                        </TableContainer>
-                      </TableCell>
-                    </TableRow>
-                  ))
-                ) : (
-                  <></>
-                )}
-              </TableBody>
-            </Table>
-          </TableContainer>
-        </div>
+                            ))}
+                          </TableBody>
+                        </Table>
+                      </TableContainer>
+                    </TableCell>
+                  </TableRow>
+                ))
+              ) : (
+                <></>
+              )}
+            </TableBody>
+          </Table>
+        </TableContainer>
       </div>
       <Popup
         open={EditTransactionOpen}