Invoice card --partial commit

package.json

@@ -14,6 +14,7 @@
     "@types/react-dom": "^16.9.10",
     "@types/react-router": "^5.1.11",
     "@types/react-router-dom": "^5.1.7",
+    "date-fns": "^2.25.0",
     "ionicons": "^5.4.0",
     "node-sass": "^6.0.1",
     "react": "^17.0.1",

src/components/passbook/invoice-card/invoice.tsx

@@ -1 +1,39 @@
-export {};
+import React from 'react';
+import styles from './invoice.module.scss';
+
+
+type OwnProps = {
+    invoice: {
+        id: string,
+        date: Date,
+        status: string,
+        dateOfPayment: Date,
+    },
+    client: {
+        name: string,
+        logo: string,
+        project: {
+            name: string,
+            contract: {
+                name: string,
+                amount: number,
+            },
+        }
+    }
+}
+
+export const InvoiceCard: React.FC<OwnProps> = (props) => {
+    return <section className={styles.card}>
+        <figure>
+            <img src={props.client.logo} alt="logo"/>
+        </figure>
+        <div className="content-holder">
+            <h6> Invoice ID: { props.invoice.id } </h6>
+            <h2> ₹ { props.client.project.contract.amount } </h2>
+            <p> { props.client.project.contract.name } </p>
+        </div>
+        <div className="status">
+            <span className={props.invoice.status}> { props.invoice.status } </span>
+        </div>
+    </section>
+}

src/pages/accounts/accounts.module.scss

@@ -26,13 +26,15 @@
 
 .upfold {
     background-color: var(--black); 
-    border-bottom-left-radius: 30px;   
+    border-bottom-left-radius: 30px;
 }
 
 .segments {
     text-align: center;
-    padding: 0 15px;
+    padding: 5px 15px;
     background-color: var(--black-medium);
+    // Writing this to avoid lines that show up in certain phone
+    margin: -5px 0;    
 
     button {
         padding: 5px 12px;
@@ -123,4 +125,18 @@
             font-size: 12px;
         }
     }
+}
+
+.allTransactionsContainer {
+    position: relative;
+    background-color: var(--black);
+}
+
+.transactionCard {
+    padding: 0 15px;
+    header {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+    }
 }

src/pages/accounts/accounts.tsx

@@ -1,8 +1,46 @@
 import { IonContent, IonPage } from '@ionic/react';
 import { ReactComponent as CogIcon } from '../../assets/svg/cog-outline.svg';
-import { ReactComponent as CashIcon } from '../../assets/svg/cash-outline.svg';
 import { ReactComponent as LineChartIcon } from '../../assets/svg/line-chart.svg';
 import styles from './accounts.module.scss';
+import { InvoiceCard } from '../../components/passbook/invoice-card/invoice';
+
+const sampleInvoiceData = [{
+    invoice: {
+        id: '2021-22/50',
+        date: new Date(),
+        status: 'due',
+        dateOfPayment: new Date(),
+    },
+    client: {
+        name: 'Swasti',
+        logo: 'https://cais.usc.edu/wp-content/uploads/2019/08/swasti-logo-2.23.png',
+        project: {
+            name: 'DiceFlow',
+            contract: {
+                name: 'Retainer contract',
+                amount: 500000,
+            },
+        }
+    }
+}, {
+    invoice: {
+        id: '2021-22/51',
+        date: new Date(),
+        status: 'paid',
+        dateOfPayment: new Date(),
+    },
+    client: {
+        name: 'TechM',
+        logo: 'https://files.techmahindra.com/static/img/brandkit/logo/Logo-True-Colors-original.png',
+        project: {
+            name: 'Telecom Italia',
+            contract: {
+                name: 'Phase 1',
+                amount: 200000,
+            },
+        }
+    }
+}]
 
 const Accounts: React.FC = () => {
     return (
@@ -57,15 +95,21 @@ const Accounts: React.FC = () => {
                     </ul>
                 </section>
 
-                <section className={styles.allTransacations}>
-                    <div className={styles.card}>
-                        <header>
-                            <h5> Pending Invoices </h5>
-                            <a> See All </a>
-                        </header>
-                    </div>
-                </section>
-                
+                <div className={styles.allTransactionsContainer}>
+                    <section className={styles.allTransactions}>
+                        <div className={styles.transactionCard}>
+                            <header>
+                                <h5> Pending Invoices </h5>
+                                <a> See All </a>
+                            </header>
+
+                            {sampleInvoiceData.map((invoice, key) => {
+                                return <InvoiceCard key={key} invoice={invoice.invoice} client={invoice.client} />
+                            })}
+                        </div>
+                    </section>                    
+                </div>
+
             </IonContent>
         </IonPage>
     );