added action button

Author: RagoTheDev

src/app/houses/Components/HouseDetails/HouseDetails.jsx

@@ -50,7 +50,7 @@ export default function HouseDetails({ selectedHouse }) {
                             </div>
                             <div className="house--status">
                                 <p>Status</p>
-                                <h4>Occupied</h4>
+                                <h4>{house.occupied ? '🔴 Occupied' : '  🟢 Vacant'}</h4>
                             </div>
                             <div className="house--contract">
                                 <p>Contract</p>

src/app/houses/Components/HouseTable/HouseTable.css

@@ -59,9 +59,8 @@
 .house--table table thead tr {
   height: 2.8rem;
   border-radius: 16px;
-
 }
-.house--table table thead td{
+.house--table table thead td {
   background-color: #113d85;
   color: #a6a9ad;
   font-family: sans-serif;
@@ -90,6 +89,14 @@
   color: rgb(83, 83, 209);
 }
 
+.delete-btn {
+  background-color: #dc3545;
+  color: white;
+  border: none;
+  padding: 0.3rem 1rem;
+  border-radius: 6px;
+}
+
 .add-house-bg {
   width: 100%;
   height: 100dvh;
@@ -111,7 +118,7 @@
   background-color: #fefefe;
   border-radius: 20px;
   padding: 1rem;
-  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen;
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen;
   box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
 }
 
@@ -131,7 +138,8 @@
   font-size: 20px;
 }
 
-.add-house-form input, .add-house-form select {
+.add-house-form input,
+.add-house-form select {
   width: 100%;
   height: 2.4rem;
   margin-bottom: 15px;
@@ -144,7 +152,9 @@
 }
 
 .add-house-form select {
-  height: 3rem;
+  font-size: 15px;
+  padding: 0.2rem;
+  color: black;
 }
 
 .add-house-dropdown label {
@@ -153,7 +163,7 @@
   font-size: 1.1rem;
 }
 
-.add-house-form button{
+.add-house-form button {
   width: 100%;
   padding: 14px;
   background: #007aff;
@@ -166,7 +176,6 @@
 }
 
 @media screen and (max-width: 700px) {
-  
   .house--header {
     height: 100px;
     display: flex;
@@ -179,8 +188,7 @@
     width: 100%;
   }
 
-
-  .search--input input{
+  .search--input input {
     width: 100%;
     height: 2.3rem;
   }
@@ -194,6 +202,4 @@
     height: 30dvh;
     overflow-x: auto;
   }
-
- 
 }

src/app/houses/Components/HouseTable/HousesTable.jsx

@@ -133,7 +133,7 @@ export default function HousesTable({ houses = [], onHouseClick }) {
 
                                     </div>
                                     <button type='submit' disabled={isSubmitting}>
-                                        {isSubmitting ? 'Submitting...' : 'Send it' }
+                                        {isSubmitting ? 'Submitting...' : 'Send it'}
                                     </button>
                                 </form>
                             </div>
@@ -149,6 +149,7 @@ export default function HousesTable({ houses = [], onHouseClick }) {
                                 <td>Block</td>
                                 <td>Partition</td>
                                 <td>Occupied</td>
+                                <td>Action</td>
                             </tr>
                         </thead>
                         <tbody>
@@ -163,14 +164,18 @@ export default function HousesTable({ houses = [], onHouseClick }) {
                                             <td>{items.location}</td>
                                             <td>{items.block}</td>
                                             <td>{items.partition}</td>
-                                            <td style={{ color: items.occupied ? '#33ff3c' : '#ef091a' }}>
-                                                {items.occupied ? 'Occupied' : 'Vacant'}</td>
+                                            <td style={{ color: items.occupied ? '#f8d7da' : '#28a745' }}>
+                                                {items.occupied ? '🔴 Occupied' : '  🟢 Vacant'}
+                                            </td>
+                                            <td>
+                                                <button className='delete-btn'>Delete</button>
+                                            </td>
                                         </tr>
                                     );
                                 })
                             ) : (
                                 <tr>
-                                    <td colSpan={4} style={{ borderBottom: 'none' }}>
+                                    <td colSpan={5} style={{ borderBottom: 'none' }}>
                                         <div style={{ textAlign: 'center', verticalAlign: 'middle', fontSize: '16px' }}>
                                             No Houses Found
                                         </div>

src/app/payments/Components/PayHistory/PayHistory.css

@@ -53,6 +53,33 @@
   color: rgb(8, 221, 8);
 }
 
+/* action */
+.edit-btn {
+  background-color: #007bff;
+  color: white;
+  margin: 0 1rem;
+  border: none;
+  padding: .3rem 1rem;
+  border-radius: 6px;
+}
+
+.edit-btn:hover {
+  background-color: #0056b3;
+}
+
+.delete-btn {
+  background-color: #dc3545;
+  color: white;
+  border: none;
+  padding: .3rem 1rem;
+  border-radius: 6px;
+
+}
+
+.delete-btn:hover {
+  background-color: #a71d2a;
+}
+
 @media screen and (max-width: 850px) {
 
   .history-table {

src/app/payments/Components/PayHistory/PayHistory.jsx

@@ -38,6 +38,7 @@ export default function PayHistory () {
                                     <th>Location</th>
                                     <th>Block-Partition</th>
                                     <th>Amount</th>
+                                    <th style={{width: '170px'}}>Actions</th>
                                 </tr>
                             </thead>
                             <tbody>
@@ -50,12 +51,16 @@ export default function PayHistory () {
                                             <td>{item.location}</td>
                                             <td>{item.block} - {item.partition}</td>
                                             <td>{item.amount}</td>
+                                            <td>
+                                                <button className='edit-btn' >Edit</button>
+                                                <button className='delete-btn'>Delete</button>
+                                            </td>
                                         </tr>
                                     )
                                 })
                              ) : (
                                 <tr>
-                                    <td>No Payments</td>
+                                    <td colSpan={6}>No Payments Found</td>
                                 </tr>
                              )}
                             </tbody>