Add Rent Calculation Summary Card with Reset Functionality

package.json

@@ -52,6 +52,6 @@
     "prettier": "^3.0.1",
     "prettier-plugin-tailwindcss": "^0.4.1",
     "tailwindcss": "^3.4.17",
-    "vite": "^4.5.5"
+    "vite": "^4.5.9"
   }
 }

src/components/rent/RentCalculator.css

@@ -34,25 +34,76 @@
     border-radius: 5px;
   }
 
-  .calculate-btn {
+  .calculate-btn, .reset-btn {
     width: 100%;
     padding: 10px;
-    background-color: #2ec4b6;
-    color: white;
     font-size: 16px;
     border: none;
     border-radius: 5px;
     cursor: pointer;
     transition: background-color 0.3s ease;
   }
 
+  .calculate-btn {
+    background-color: #2ec4b6;
+    color: white;
+  }
+
   .calculate-btn:hover {
     background-color: #238e8b;
   }
-
-  .result {
+
+  .reset-btn {
+    margin-top: 10px;
+    background-color: #f44336; /* Red color */
+    color: white;
+  }
+
+  .reset-btn:hover {
+    background-color: #d32f2f;
+  }
+
+  /* Rent Summary Card */
+  .summary-card {
     margin-top: 20px;
+    padding: 15px;
+    border-radius: 8px;
+    background-color: #ffffff;
+    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+    text-align: left;
+    animation: fadeIn 0.5s ease-in-out;
+  }
+
+  .summary-card h2 {
+    font-size: 20px;
+    color: #333;
+    margin-bottom: 10px;
+  }
+
+  .summary-card p {
+    font-size: 16px;
+    color: #555;
+    margin: 5px 0;
+  }
+
+  .summary-card hr {
+    margin: 10px 0;
+    border: 1px solid #ddd;
+  }
+
+  .summary-card h3 {
     font-size: 18px;
-    font-weight: bold;
     color: #2ec4b6;
+    font-weight: bold;
+  }
+
+  @keyframes fadeIn {
+    from {
+      opacity: 0;
+      transform: translateY(-10px);
+    }
+    to {
+      opacity: 1;
+      transform: translateY(0);
+    }
   }

src/components/rent/RentCalculator.jsx

@@ -7,20 +7,39 @@ const RentCalculator = () => {
   const [waterBill, setWaterBill] = useState('');
   const [otherFees, setOtherFees] = useState('');
   const [totalRent, setTotalRent] = useState(null);
+  const [showSummary, setShowSummary] = useState(false);
+
+  const formatCurrency = (value) => {
+    return new Intl.NumberFormat("en-US", {
+      style: "currency",
+      currency: "USD",
+    }).format(value || 0);
+  };
 
   const calculateTotalRent = () => {
     const rent = parseFloat(baseRent) || 0;
     const power = parseFloat(powerBill) || 0;
     const water = parseFloat(waterBill) || 0;
     const other = parseFloat(otherFees) || 0;
     const total = rent + power + water + other;
+
     setTotalRent(total);
+    setShowSummary(true); 
   };
 
-  return (
+  const resetForm = () => {
+    setBaseRent("");
+    setPowerBill("");
+    setWaterBill("");
+    setOtherFees("");
+    setTotalRent(null);
+    setShowSummary(false);
+  };
 
+  return (
     <div id="RentCalculator" className="rent-calculator">
       <h1>Monthly Rent Calculator</h1>
+
       <div className="input-group">
         <label>Base Rent ($):</label>
         <input
@@ -30,6 +49,7 @@ const RentCalculator = () => {
           placeholder="Enter base rent amount"
         />
       </div>
+
       <div className="input-group">
         <label>Power Bill ($):</label>
         <input
@@ -39,6 +59,7 @@ const RentCalculator = () => {
           placeholder="Enter power bill amount"
         />
       </div>
+
       <div className="input-group">
         <label>Water Bill ($):</label>
         <input
@@ -48,6 +69,7 @@ const RentCalculator = () => {
           placeholder="Enter water bill amount"
         />
       </div>
+
       <div className="input-group">
         <label>Other Fees ($):</label>
         <input
@@ -57,16 +79,32 @@ const RentCalculator = () => {
           placeholder="Enter other fees"
         />
       </div>
+
       <button onClick={calculateTotalRent} className="calculate-btn">
-        Calculate Total Rent
-      </button>
-      {totalRent !== null && (
-        <div className="result">
-          <h2>Total Monthly Rent: ${totalRent.toFixed(2)}</h2>
-        </div>
-      )}
+  Calculate Total Rent
+</button>
+
+{showSummary && (
+  <>
+    <div className="summary-card">
+      <h2>🏠 Rent Summary</h2>
+      <p><strong>Base Rent:</strong> {formatCurrency(baseRent)}</p>
+      <p><strong>Power Bill:</strong> {formatCurrency(powerBill)}</p>
+      <p><strong>Water Bill:</strong> {formatCurrency(waterBill)}</p>
+      <p><strong>Other Fees:</strong> {formatCurrency(otherFees)}</p>
+      <hr />
+      <h3>Total Monthly Rent: {formatCurrency(totalRent)}</h3>
+    </div>
+
+    <button onClick={resetForm} className="reset-btn">
+      Reset
+    </button>
+  </>
+)}
+
+
     </div>
   );
 };
 
-export default RentCalculator;
+export default RentCalculator;