updation

.firebase/hosting.ZGlzdA.cache

@@ -0,0 +1,5 @@
+404.html,1699870317875,b7bab6b83fa074653ff28c8d2a64135d3434575f70a12ab3d3ba8080461b9537
+index.html,1699870318343,1eca0b54329db93c819b2fb87069bc6e6d1ae14e3ecaba2f1a88d60ba4725d2b
+vite.svg,1699870317875,7ec9c8a9811a8079f229d974045de07d24c24528c9c9f8d247233aaea7a9e831
+assets/index-b5e6d8c2.css,1699870318343,2c8498ab35a32b4bf06bef6d2e4387575c12cc4a372b5a9cae46be078890d21c
+assets/index-094ea10d.js,1699870318343,c98e7e783cfcdf2abbea9c3fd1cff37234d708afd52d790efefc2accd86a35fd

firebase.json

@@ -1,10 +1,12 @@
 {
   "hosting": {
     "public": "dist",
-    "ignore": [
-      "firebase.json",
-      "**/.*",
-      "**/node_modules/**"
+    "ignore": ["firebase.json", "**/.*", "**/node_modules/**"],
+    "rewrites": [
+      {
+        "source": "**",
+        "destination": "/index.html"
+      }
     ]
   }
 }

package.json

@@ -14,7 +14,8 @@
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-icons": "^4.11.0",
-    "react-router-dom": "^6.18.0"
+    "react-router-dom": "^6.18.0",
+    "react-toastify": "^9.1.3"
   },
   "devDependencies": {
     "@types/react": "^18.2.15",

src/App.jsx

@@ -1,6 +1,8 @@
 import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
 import Login from "./pages/Login";
 import ExpenseTracker from "./pages/ExpenseTracker";
+import { ToastContainer } from "react-toastify";
+import 'react-toastify/dist/ReactToastify.css';
 
 const App = () => {
   return (
@@ -10,6 +12,7 @@ const App = () => {
           <Route path="/" element={<Login />} />
           <Route path="/expense-tracker" element={<ExpenseTracker />} />
         </Routes>
+        <ToastContainer />
       </Router>
     </>
   );

src/components/AddTransaction.jsx

@@ -0,0 +1,82 @@
+import { toast } from "react-toastify";
+
+/* eslint-disable react/prop-types */
+const AddTransaction = ({
+  setDescription,
+  description,
+  handleTransaction,
+  setTransactionType,
+  transactionType,
+  transactionAmount,
+  setTransactionAmount,
+}) => {
+
+  return (
+    <form onSubmit={(e)=>{
+        handleTransaction(e)
+        toast('Transaction added')
+    }} className="border border-gray-600">
+      <h3 className="text-center text-3xl bg-[#1c2c4f] py-3">
+        Add Transaction
+      </h3>
+      <div className="w-11/12 max-w-md m-auto text-black text-xl">
+        <input
+          className="w-full py-2 px-4 my-4 outline-none"
+          type="text"
+          placeholder="Description.."
+          required
+          value={description}
+          onChange={(e) => setDescription(e.target.value)}
+        />
+      </div>
+      <div className="w-11/12 max-w-md m-auto text-black text-xl">
+        <input
+          className="w-full py-2 px-4 mb-4 outline-none"
+          type="number"
+          min={1}
+          placeholder="Amount.."
+          required
+          value={transactionAmount}
+          onChange={(e) => setTransactionAmount(e.target.value)}
+        />
+      </div>
+      <div className="w-11/12 max-w-md m-auto text-xl flex flex-wrap items-center gap-3 mb-4">
+        <p>Type:</p>
+        <div className="flex items-center leading-none gap-1">
+          <input
+            className="w-5 h-5"
+            type="radio"
+            value={"expense"}
+            id="expense"
+            name="expense"
+            checked={transactionType == "expense"}
+            onChange={(e) => setTransactionType(e.target.value)}
+          />
+          <label htmlFor="expense">Expense</label>
+        </div>
+        <div className="flex items-center leading-none gap-1">
+          <input
+            className="w-5 h-5"
+            type="radio"
+            value={"income"}
+            id="income"
+            name="income"
+            onChange={(e) => setTransactionType(e.target.value)}
+            checked={transactionType == "income"}
+          />
+          <label htmlFor="income">Income</label>
+        </div>
+      </div>
+      <div className="w-11/12 max-w-md m-auto">
+        <button
+          className="bg-green-400 py-1 mb-6 text-2xl text-black font-extrabold w-full hover:bg-green-500"
+          type="submit"
+        >
+          Add
+        </button>
+      </div>
+    </form>
+  );
+};
+
+export default AddTransaction;

src/components/DropDown.jsx

@@ -0,0 +1,22 @@
+import { BiLogOut } from "react-icons/bi";
+
+// eslint-disable-next-line react/prop-types
+const DropDown = ({ isAccountOpen, handleSignout }) => {
+  return (
+    <div
+      className={`dropDownOpened absolute -bottom-[84px] right-0 bg-[#0D1117] rounded-lg w-44 flex items-center justify-center overflow-hidden ${
+        isAccountOpen ? "h-20 border border-gray-800" : "h-0 invisible"
+      }`}
+    >
+      <button onClick={handleSignout}
+        className="dropDownOpened p-2 rounded-lg transition-all duration-300 hover:bg-gray-700 flex items-center gap-2 text-xl leading-none"
+        type="button"
+        title="Logout"
+      >
+        <BiLogOut className="text-2xl" /> Logout
+      </button>
+    </div>
+  );
+};
+
+export default DropDown;

src/components/Navbar.jsx

@@ -1,6 +1,6 @@
 const Navbar = () => {
   return (
-    <nav className="text-4xl text-blue-500 font-extrabold py-4 border-b-2 border-b-gray-500">
+    <nav className="text-4xl text-blue-500 font-extrabold py-4 border-b-2 border-b-gray-500 max-[330px]:text-2xl">
       <div className="w-11/12 m-auto max-w-7xl">
         <p>Expense Tracker</p>
       </div>

src/components/TransactionsDetails.jsx

@@ -0,0 +1,72 @@
+/* eslint-disable react/prop-types */
+import { MdDelete } from "react-icons/md";
+import { toast } from "react-toastify";
+
+const TransactionsDetails = ({ transactions, UsDollar, deleteTransaction }) => {
+  const subHeading = ["description", "amount", "type", "delete"];
+
+  const emptyTransactions = (
+    <p className="my-4 text-gray-400 text-xl">
+      Transactions list is empty <br />
+      Add transaction above
+    </p>
+  );
+
+  return (
+    <main className="my-8">
+      <h3 className="text-center text-3xl bg-[#1c2c4f] py-3">Details</h3>
+      <div className="flex py-3 text-2xl text-center bg-gray-900 max-[435px]:text-base max-[360px]:text-sm">
+        {subHeading.map((heading) => {
+          return (
+            <p className="capitalize flex-1" key={heading}>
+              {heading}
+            </p>
+          );
+        })}
+      </div>
+      <div className="text-center">
+        {transactions.length == 0
+          ? emptyTransactions
+          : transactions.map((transaction) => {
+              const {
+                description,
+                transactionID,
+                transactionAmount,
+                transactionType,
+              } = transaction;
+              return (
+                <article
+                  className="grid grid-cols-4 capitalize my-4 text-xl border-b border-b-gray-700 pb-3 text-blue-400 max-[435px]:text-base max-[360px]:text-sm"
+                  key={transactionID}
+                >
+                  <p className="flex-1">{description}</p>
+                  <p className="flex-1 break-words">
+                    {UsDollar.format(transactionAmount)}
+                  </p>
+                  <p
+                    className={`flex-1 ${
+                      transactionType == "expense"
+                        ? "text-red-500"
+                        : "text-green-500"
+                    }`}
+                  >
+                    {transactionType}
+                  </p>
+                  <div className="flex items-center justify-center">
+                    <MdDelete
+                      onClick={() => {
+                        deleteTransaction(transactionID);
+                        toast("Transaction deleted");
+                      }}
+                      className=" text-red-600 text-3xl cursor-pointer"
+                    />
+                  </div>
+                </article>
+              );
+            })}
+      </div>
+    </main>
+  );
+};
+
+export default TransactionsDetails;

src/index.css

@@ -2,11 +2,15 @@
 @tailwind components;
 @tailwind utilities;
 
-*{
-    font-family: Arial, Helvetica, sans-serif;
+* {
+  font-family: Arial, Helvetica, sans-serif;
 }
 
-body{
-    background-color: #333;
-    color: white;
-}
+body {
+  background-color: #0d1117;
+  color: white;
+}
+
+.gridCard {
+  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
+}