Rifaq whats app clone sidebar

rifaq-ahmer/01-xpense-tracker/.firebase/hosting.YnVpbGQ.cache

@@ -0,0 +1,24 @@
+asset-manifest.json,1635433423501,814af2d0a14825b75f1fe852bc52689fae47fa701acaa55433d0d1f0861ea193
+index.html,1635433423508,56e8f614e0b08b77243534f6b155ae8dce1d79f45be8052ce3a90b15e9e36c4b
+favicon.ico,1635242147992,eae62e993eb980ec8a25058c39d5a51feab118bd2100c4deebb2a9c158ec11f9
+logo192.png,1627719808000,3ee59515172ee198f3be375979df15ac5345183e656720a381b8872b2a39dc8b
+manifest.json,1627719808000,aff3449bdc238776f5d6d967f19ec491b36aed5fb7f23ccff6500736fd58494a
+logo512.png,1627719808000,ee7e2f3fdb8209c4b6fd7bef6ba50d1b9dba30a25bb5c3126df057e1cb6f5331
+robots.txt,1627719808000,bfe106a3fb878dc83461c86818bf74fc1bdc7f28538ba613cd3e775516ce8b49
+static/css/2.f4c56af9.chunk.css,1635433423500,b843650c200834366ac2c8c0456128a24102c37fcaeba1691e7c74a050e773db
+static/css/2.f4c56af9.chunk.css.map,1635433423500,fd457d32e8eb361ab7f8af25f343da5240698b041eaff08596534816fbd41d0c
+static/css/main.6095e619.chunk.css,1635433423499,de616482a40a191f7b541334a48d0e8849d7ffc6af9855fd09bd7adf48df0410
+static/css/main.6095e619.chunk.css.map,1635433423500,8d5cdc8d70e4ef99d5a3d2fdb27dcc055abab27ae257ce00b338b07c7101b790
+static/js/2.33ed4a1c.chunk.js.LICENSE.txt,1635433423500,a05f70364d3f3e654c9b5fbad5945eaedc8a66ff2d92adab51a04c84bbd4d737
+static/js/main.afc5eb93.chunk.js,1635433423500,ae9d68955bc4196f99c3faca913c018b1ee68c13d77b4a007f399745b9b9e578
+static/js/runtime-main.0f6b2d83.js,1635433423500,f8ecb69da86c688f3ab7c8acac61fe231117179f3dce72582509d94952f247ca
+static/js/main.afc5eb93.chunk.js.map,1635433423497,03fc33c226f523aa3d0e95bacaa28492c021a4bcfbfb05467f23097d8e92f04c
+static/js/runtime-main.0f6b2d83.js.map,1635433423508,9355a13e7df73cceaf836ff2212d473bb52b87632d5b2fdaf69edfac167503d5
+static/media/food.7bf88c6f.png,1635433423499,795d4e4d429c16c9abbf3cc185dafa3f3e899d49260533056b569a190ae9ed6e
+static/media/shopping.b248386d.png,1635433423499,62b3f8fcc4c99fd3d19b3ee177058a555688909b522fbb61ab6084559df16292
+static/media/healthcare.d26b4326.png,1635433423499,35c02e79f96977b6bdd0e2fc17daa41ccbc2ac138ef9b467c9754bf699700c7d
+static/media/education.f21be753.png,1635433423499,58013fc87b2e7b7955f55cbcad06ef17536af81e0f4c96772f4deae82422b4bc
+static/js/2.33ed4a1c.chunk.js,1635433423500,8651bfacf36f5b1ac0e0aa3ddce738108b13c66ee33a7e50953a66ca01bfa49f
+static/media/empty.f575b5cb.png,1635433423498,8d2506b74b5c329384a0ad681b7c675ebaa52c772ef3ebd71c1888e017b5502b
+static/media/added-image.94b293c9.png,1635433423500,c6c5a0f1be80d330019f03c519668e63d137504535ec44570e793e10698e74ec
+static/js/2.33ed4a1c.chunk.js.map,1635433423508,8b55f8ab70395a5bcec1b0cbb1581c638ef4e782871cd6e6f3b7ed3400958826

rifaq-ahmer/01-xpense-tracker/.firebaserc

@@ -0,0 +1,5 @@
+{
+  "projects": {
+    "default": "rifaq-expense-tracker-app"
+  }
+}

rifaq-ahmer/01-xpense-tracker/firebase.json

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

rifaq-ahmer/01-xpense-tracker/package.json

@@ -6,11 +6,14 @@
     "@testing-library/jest-dom": "^5.14.1",
     "@testing-library/react": "^11.2.7",
     "@testing-library/user-event": "^12.8.3",
+    "moment": "^2.29.1",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
+    "react-modal": "^3.14.3",
     "react-redux": "^7.2.5",
     "react-router-dom": "^5.3.0",
     "react-scripts": "4.0.3",
+    "react-toastify": "^8.0.3",
     "redux": "^4.1.1",
     "web-vitals": "^1.1.2"
   },

rifaq-ahmer/01-xpense-tracker/public/index.html

@@ -19,6 +19,7 @@
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
     <link href="https://fonts.googleapis.com/css2?family=Open+Sans&display=swap" rel="stylesheet">
     <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/devicons/devicon@v2.14.0/devicon.min.css">
+    <script src="https://kit.fontawesome.com/ea945e6c9f.js" crossorigin="anonymous"></script>
     <!--
       Notice the use of %PUBLIC_URL% in the tags above.
       It will be replaced with the URL of the `public` folder during the build.

rifaq-ahmer/01-xpense-tracker/src/App.js

@@ -1,13 +1,19 @@
 import "./index.css";
 import Home from "./pages/home/index";
 import Header from "./components/header/index";
+import { Route, Switch, BrowserRouter } from "react-router-dom";
+import AddExpense from "./pages/add-expense/index";
+import Footer from "./components/footer";
 function App() {
 	return (
-		<div>
+		<BrowserRouter>
 			<Header />
-			<Home />
-			<div>Footer</div>
-		</div>
+			<Switch>
+				<Route path="/" exact component={Home} />
+				<Route path="/add-expense" exact component={AddExpense} />
+			</Switch>
+			<Footer />
+		</BrowserRouter>
 	);
 }
 

rifaq-ahmer/01-xpense-tracker/src/components/add-form/add-form.css

@@ -0,0 +1,103 @@
+.add-form {
+	background: #71ccca;
+	box-shadow: 20px 20px 60px #60adac, -20px -20px 60px #82ebe8;
+	margin: 6px 12px;
+	padding: 24px;
+	display: flex;
+	flex-direction: column;
+	flex: 1;
+	height: 60vh;
+}
+.form-item {
+	margin: 12px 0px;
+	width: 70%;
+	padding: 4px;
+	border-radius: 6px;
+	background-color: white;
+}
+.form-item label {
+	background-color: lightgrey;
+	padding: 2px 12px;
+	border-radius: 0px 4px 4px 0px;
+}
+.form-item input {
+	font-size: 16px;
+	border: none;
+	width: 70%;
+	outline: none;
+}
+.category-container-parent {
+	display: flex;
+	flex-direction: column;
+	flex: 1;
+}
+.category {
+	position: relative;
+	width: 40%;
+}
+.category-dropdown {
+	display: flex;
+	justify-content: space-between;
+	align-items: center;
+	margin: 12px 0px;
+	background-color: white;
+	border-radius: 6px;
+	padding: 4px;
+}
+.category-dropdown i {
+	display: flex;
+	align-items: center;
+}
+
+.category-container {
+	display: flex;
+	position: absolute;
+	width: 100%;
+	flex-direction: column;
+	background: #ffffff;
+}
+
+.category-item {
+	width: 98%;
+	display: flex;
+	justify-content: space-between;
+	padding: 8px 0px;
+	cursor: pointer;
+}
+.category-item img {
+	height: 32px;
+	margin-right: 20px;
+}
+
+.form-add-button {
+	display: flex;
+	justify-content: flex-end;
+}
+.form-add-button div {
+	display: flex;
+	border: 1px solid black;
+	padding: 2px 8px;
+	border-radius: 6px;
+	cursor: pointer;
+}
+
+.form-add-button div i {
+	display: flex;
+	align-items: center;
+	margin-left: 6px;
+}
+
+@media only screen and (max-width: 1024px) {
+	.form-item {
+		width: 100%;
+	}
+	.form-item input {
+		width: 70%;
+	}
+	.amount-input {
+		width: 50% !important;
+	}
+	.category {
+		width: 80%;
+	}
+}