feat: web complete

Signed-off-by: Ameya Shenoy <shenoy.ameya@gmail.com>

web/app/components/RecentTransactions.tsx

@@ -5,6 +5,65 @@ import { BsTriangleFill } from 'react-icons/bs';
 import SingleTransaction from './SingleTransaction'
 
 export default function RecentTransactions() {
+  const transactions = [
+    {
+      title: "Fenny's Banglore",
+      datetime: "Today, 11:17 am",
+      amount: "3,940",
+      tag: "Tag",
+    }, {
+      title: "Sendoor",
+      datetime: "Today, 11:45 pm",
+      amount: "35",
+      tag: "Food & Drinks",
+      icon_type: "drink",
+    }, {
+      title: "Reliance Fresh",
+      datetime: "Yesterday, 5:37 pm",
+      amount: "2,399",
+      tag: "Groceries",
+      icon_type: "groceries",
+    }, {
+      title: "Chai Point",
+      datetime: "Yesterday, 12:17 pm",
+      amount: "312",
+      tag: "Food & Drinks",
+      icon_type: "food",
+    }, {
+      title: "Uber",
+      datetime: "Jan 2, 10:32 am",
+      amount: "75",
+      tag: "Transport",
+      icon_type: "transport",
+    }, {
+      title: "Swiggy",
+      datetime: "Jan 1, 11:17 pm",
+      amount: "249",
+      tag: "Food & Drinks",
+      icon_type: "swiggy",
+    }, {
+      title: "Netflix",
+      datetime: "Dec 31, 11:59 pm",
+      amount: "199",
+      tag: "Subsciption",
+      icon_type: "netflix",
+    }
+  ]
+
+  const recent_transactions = [];
+  transactions.forEach((transaction) => {
+    recent_transactions.push(
+      <SingleTransaction
+        title={transaction.title}
+        tag={transaction.tag}
+        datetime={transaction.datetime}
+        amount={transaction.amount}
+        icon_type={transaction.icon_type}
+      />
+    )
+  })
+
+
   return (
     <div className={styles.main}>
       <div className={styles.heading}>
@@ -36,13 +95,7 @@ export default function RecentTransactions() {
       </div>
 
       <div>
-        <SingleTransaction />
-        <SingleTransaction />
-        <SingleTransaction />
-        <SingleTransaction />
-        <SingleTransaction />
-        <SingleTransaction />
-        <SingleTransaction />
+        {recent_transactions}
       </div>
     </div>
   )

web/app/components/RecurringPayment.tsx

@@ -2,17 +2,41 @@
 import React from 'react'
 import styles from './recurringPayment.module.css'
 import { BsTriangleFill, BsYoutube, BsCalendar2Date } from 'react-icons/bs'
-import { RiHome7Fill } from 'react-icons/ri'
+import { RiHome7Fill, RiBillLine } from 'react-icons/ri'
 
 export default function RecurringPayment(props) {
+  const renderIcon = (icon_type) => {
+    const iconSize = 50
+
+    if (icon_type == "rent") {
+      return (
+        <RiHome7Fill
+          className={styles.paymentIcon}
+          size={iconSize}
+        />
+      )
+    } else if (icon_type == "youtube") {
+      return (
+        <BsYoutube
+          className={styles.paymentIcon}
+          size={iconSize}
+        />
+      )
+    }
+    return (
+      <RiBillLine
+        className={styles.paymentIcon}
+        size={iconSize}
+      />
+    )
+  }
+
+
   return (
     <div className={styles.recurringPayment}>
       <div className={styles.recurringPaymentTop}>
         <div className={styles.recurringPaymentTopLeft}>
-          <RiHome7Fill
-            className={styles.paymentIcon}
-            size={50}
-          />
+          {renderIcon(props.icon_type)}
           <div className={styles.paymentTitle}>{props.title}</div>
         </div>
         <BsCalendar2Date

web/app/components/SingleTransaction.tsx

@@ -1,21 +1,75 @@
 
 import React from 'react'
 import styles from './singleTnx.module.css'
+import { MdFastfood, MdOutlineLocalGroceryStore } from 'react-icons/md';
+import { BiDrink } from 'react-icons/bi';
+import { GiKnifeFork } from 'react-icons/gi';
+import { FaCarAlt } from 'react-icons/fa';
+import { SiSwiggy, SiNetflix } from 'react-icons/si';
+
+export default function SingleTransaction(props) {
+  const renderIcon = (icon_type) => {
+    if (icon_type == "drink") {
+      return (
+        <BiDrink
+          className={styles.icon}
+          size={28}
+        />
+      )
+    } else if (icon_type == "groceries") {
+      return (
+        <MdOutlineLocalGroceryStore
+          className={styles.icon}
+          size={28}
+        />
+      )
+    } else if (icon_type == "food") {
+      return (
+        <GiKnifeFork
+          className={styles.icon}
+          size={28}
+        />
+      )
+    } else if (icon_type == "transport") {
+      return (
+        <FaCarAlt
+          className={styles.icon}
+          size={28}
+        />
+      )
+    } else if (icon_type == "swiggy") {
+      return (
+        <SiSwiggy
+          className={styles.icon}
+          size={28}
+        />
+      )
+    } else if (icon_type == "netflix") {
+      return (
+        <SiNetflix
+          className={styles.icon}
+          size={28}
+        />
+      )
+    }
+  }
 
-export default function SingleTransaction() {
   return (
     <div className={styles.tnx}>
       <div className={styles.tnxHeading}>
-        <div className={styles.tnxTitle}>Fenny's Banglore</div>
-        <div className={styles.date}>Today, 11:17 AM</div>
+        <div className={styles.tnxTitle}>{props.title}</div>
+        <div className={styles.date}>{props.datetime}</div>
       </div>
       <div className={styles.tnxInfo}>
         <div className={styles.cost}>
           <div className={styles.minus}>-</div>
           <div className={styles.rupee}>₹</div>
-          <div className={styles.amount}>3,940</div>
+          <div className={styles.amount}>{props.amount}</div>
+        </div>
+        <div className={styles.tag}>
+          {renderIcon(props.icon_type)}
+          {props.tag}
         </div>
-        <div className={styles.tag}>Tag</div>
       </div>
     </div>
   )

web/app/components/Upcoming.tsx

@@ -3,7 +3,6 @@ import React from 'react'
 import styles from './upcoming.module.css'
 import { BsTriangleFill } from 'react-icons/bs'
 import RecurringPayment from './RecurringPayment'
-import { RiHome7Fill } from 'react-icons/ri'
 
 export default function Upcoming() {
   const recurringPayments = [
@@ -11,11 +10,13 @@ export default function Upcoming() {
       title: "2568 Rent",
       amount: "36,163",
       due_in_days: "7",
+      icon_type: "rent",
     },
     {
       title: "YouTube Premium",
       amount: "130",
       due_in_days: "17",
+      icon_type: "youtube",
     },
   ]
   const recurringPaymentsDiv = []
@@ -26,6 +27,7 @@ export default function Upcoming() {
         title={payment.title}
         amount={payment.amount}
         due_in_days={payment.due_in_days}
+        icon_type={payment.icon_type}
       />
     )
   })

web/app/components/bankAccount.module.css

@@ -3,8 +3,7 @@
   background: #FFF;
   border-radius: 30px;
   width: 47.5%;
-  margin-top: 5%;
-  /* max-width: 600px; */
+  margin-bottom: 5%;;
 }
 
 .bank {

web/app/components/singleTnx.module.css

@@ -30,7 +30,14 @@
   color: #263D5F;
   padding: 10px 12px;
   font: 1.2em Sans-serif;
-  font-weight: 600;
+  font-weight: 500;
+  display: flex;
+  align-items: center;
+  text-transform: uppercase;
+}
+
+.icon {
+  margin: 0 8px;
 }
 
 .tnxTitle {