--partial commit invoice card details

src/assets/svg/cash-outline.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="512" height="512" viewBox="0 0 512 512"><title>ionicons-v5-l</title><rect x="32" y="80" width="448" height="256" rx="16" ry="16" transform="translate(512 416) rotate(180)" style="fill:none;stroke:#000;stroke-linejoin:round;stroke-width:32px"/><line x1="64" y1="384" x2="448" y2="384" style="fill:none;stroke:#000;stroke-linecap:round;stroke-linejoin:round;stroke-width:32px"/><line x1="96" y1="432" x2="416" y2="432" style="fill:none;stroke:#000;stroke-linecap:round;stroke-linejoin:round;stroke-width:32px"/><circle cx="256" cy="208" r="80" style="fill:none;stroke:#000;stroke-linecap:round;stroke-linejoin:round;stroke-width:32px"/><path d="M480,160a80,80,0,0,1-80-80" style="fill:none;stroke:#000;stroke-linecap:round;stroke-linejoin:round;stroke-width:32px"/><path d="M32,160a80,80,0,0,0,80-80" style="fill:none;stroke:#000;stroke-linecap:round;stroke-linejoin:round;stroke-width:32px"/><path d="M480,256a80,80,0,0,0-80,80" style="fill:none;stroke:#000;stroke-linecap:round;stroke-linejoin:round;stroke-width:32px"/><path d="M32,256a80,80,0,0,1,80,80" style="stroke-linecap:round;stroke-linejoin:round;stroke-width:32px"/></svg>

src/assets/svg/cog-outline.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="512" height="512" viewBox="0 0 512 512"><title>ionicons-v5-m</title><path d="M456.7,242.27l-26.08-4.2a8,8,0,0,1-6.6-6.82c-.5-3.2-1-6.41-1.7-9.51a8.08,8.08,0,0,1,3.9-8.62l23.09-12.82a8.05,8.05,0,0,0,3.9-9.92l-4-11a7.94,7.94,0,0,0-9.4-5l-25.89,5a8,8,0,0,1-8.59-4.11q-2.25-4.2-4.8-8.41a8.16,8.16,0,0,1,.7-9.52l17.29-19.94a8,8,0,0,0,.3-10.62l-7.49-9a7.88,7.88,0,0,0-10.5-1.51l-22.69,13.63a8,8,0,0,1-9.39-.9c-2.4-2.11-4.9-4.21-7.4-6.22a8,8,0,0,1-2.5-9.11l9.4-24.75A8,8,0,0,0,365,78.77l-10.2-5.91a8,8,0,0,0-10.39,2.21L327.77,95.91a7.15,7.15,0,0,1-8.5,2.5s-5.6-2.3-9.8-3.71A8,8,0,0,1,304,87l.4-26.45a8.07,8.07,0,0,0-6.6-8.42l-11.59-2a8.07,8.07,0,0,0-9.1,5.61l-8.6,25.05a8,8,0,0,1-7.79,5.41h-9.8a8.07,8.07,0,0,1-7.79-5.41l-8.6-25.05a8.07,8.07,0,0,0-9.1-5.61l-11.59,2a8.07,8.07,0,0,0-6.6,8.42l.4,26.45a8,8,0,0,1-5.49,7.71c-2.3.9-7.3,2.81-9.7,3.71-2.8,1-6.1.2-8.8-2.91L167.14,75.17A8,8,0,0,0,156.75,73l-10.2,5.91A7.94,7.94,0,0,0,143.25,89l9.4,24.75a8.06,8.06,0,0,1-2.5,9.11c-2.5,2-5,4.11-7.4,6.22a8,8,0,0,1-9.39.9L111,116.14a8,8,0,0,0-10.5,1.51l-7.49,9a8,8,0,0,0,.3,10.62l17.29,19.94a8,8,0,0,1,.7,9.52q-2.55,4-4.8,8.41a8.11,8.11,0,0,1-8.59,4.11l-25.89-5a8,8,0,0,0-9.4,5l-4,11a8.05,8.05,0,0,0,3.9,9.92L85.58,213a7.94,7.94,0,0,1,3.9,8.62c-.6,3.2-1.2,6.31-1.7,9.51a8.08,8.08,0,0,1-6.6,6.82l-26.08,4.2a8.09,8.09,0,0,0-7.1,7.92v11.72a7.86,7.86,0,0,0,7.1,7.92l26.08,4.2a8,8,0,0,1,6.6,6.82c.5,3.2,1,6.41,1.7,9.51a8.08,8.08,0,0,1-3.9,8.62L62.49,311.7a8.05,8.05,0,0,0-3.9,9.92l4,11a7.94,7.94,0,0,0,9.4,5l25.89-5a8,8,0,0,1,8.59,4.11q2.25,4.2,4.8,8.41a8.16,8.16,0,0,1-.7,9.52L93.28,374.62a8,8,0,0,0-.3,10.62l7.49,9a7.88,7.88,0,0,0,10.5,1.51l22.69-13.63a8,8,0,0,1,9.39.9c2.4,2.11,4.9,4.21,7.4,6.22a8,8,0,0,1,2.5,9.11l-9.4,24.75a8,8,0,0,0,3.3,10.12l10.2,5.91a8,8,0,0,0,10.39-2.21l16.79-20.64c2.1-2.6,5.5-3.7,8.2-2.6,3.4,1.4,5.7,2.2,9.9,3.61a8,8,0,0,1,5.49,7.71l-.4,26.45a8.07,8.07,0,0,0,6.6,8.42l11.59,2a8.07,8.07,0,0,0,9.1-5.61l8.6-25a8,8,0,0,1,7.79-5.41h9.8a8.07,8.07,0,0,1,7.79,5.41l8.6,25a8.07,8.07,0,0,0,9.1,5.61l11.59-2a8.07,8.07,0,0,0,6.6-8.42l-.4-26.45a8,8,0,0,1,5.49-7.71c4.2-1.41,7-2.51,9.6-3.51s5.8-1,8.3,2.1l17,20.94A8,8,0,0,0,355,439l10.2-5.91a7.93,7.93,0,0,0,3.3-10.12l-9.4-24.75a8.08,8.08,0,0,1,2.5-9.12c2.5-2,5-4.1,7.4-6.21a8,8,0,0,1,9.39-.9L401,395.66a8,8,0,0,0,10.5-1.51l7.49-9a8,8,0,0,0-.3-10.62l-17.29-19.94a8,8,0,0,1-.7-9.52q2.55-4.05,4.8-8.41a8.11,8.11,0,0,1,8.59-4.11l25.89,5a8,8,0,0,0,9.4-5l4-11a8.05,8.05,0,0,0-3.9-9.92l-23.09-12.82a7.94,7.94,0,0,1-3.9-8.62c.6-3.2,1.2-6.31,1.7-9.51a8.08,8.08,0,0,1,6.6-6.82l26.08-4.2a8.09,8.09,0,0,0,7.1-7.92V250A8.25,8.25,0,0,0,456.7,242.27ZM256,112A143.82,143.82,0,0,1,395.38,220.12,16,16,0,0,1,379.85,240l-105.24,0a16,16,0,0,1-13.91-8.09l-52.1-91.71a16,16,0,0,1,9.85-23.39A146.94,146.94,0,0,1,256,112ZM112,256a144,144,0,0,1,43.65-103.41,16,16,0,0,1,25.17,3.47L233.06,248a16,16,0,0,1,0,15.87l-52.67,91.7a16,16,0,0,1-25.18,3.36A143.94,143.94,0,0,1,112,256ZM256,400a146.9,146.9,0,0,1-38.19-4.95,16,16,0,0,1-9.76-23.44l52.58-91.55a16,16,0,0,1,13.88-8H379.9a16,16,0,0,1,15.52,19.88A143.84,143.84,0,0,1,256,400Z"/></svg>

src/assets/svg/line-chart.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="512" height="512" viewBox="0 0 512 512"><title>ionicons-v5-p</title><path d="M480,496H48a32,32,0,0,1-32-32V32a16,16,0,0,1,32,0V464H480a16,16,0,0,1,0,32Z"/><path d="M156,432H116a36,36,0,0,1-36-36V244a36,36,0,0,1,36-36h40a36,36,0,0,1,36,36V396A36,36,0,0,1,156,432Z"/><path d="M300,432H260a36,36,0,0,1-36-36V196a36,36,0,0,1,36-36h40a36,36,0,0,1,36,36V396A36,36,0,0,1,300,432Z"/><path d="M443.64,432h-40a36,36,0,0,1-36-36V132a36,36,0,0,1,36-36h40a36,36,0,0,1,36,36V396A36,36,0,0,1,443.64,432Z"/></svg>

src/components/passbook/_common.scss

@@ -1,6 +1,7 @@
 %card {
     background-color: white;
-    box-shadow: 0px 0px 10px -3px var(--light-grey);
+    border: 1px solid #ebebeb;
+    overflow: hidden;
     border-radius: 20px;
     display: flex;
     margin: 20px auto;

src/components/passbook/invoice-card/invoice.module.scss

@@ -3,7 +3,6 @@
 
 .card {
     @extend %card;
-    overflow: hidden;
 
     figure {
         background-color: var(--lighter-grey);
@@ -92,4 +91,75 @@
             }
         }
     }
+}
+
+.backdrop {
+    position: fixed;
+    left: 0;
+    top: 0;
+    z-index: 2;
+    background-color: rgba(0, 0, 0, 0.6);
+    width: 100%;
+    height: 100vh;
+    display: flex;
+    align-items: flex-end;
+    justify-content: stretch;
+    overflow: auto;
+    
+    .cardDetails {
+        border-top-right-radius: 30px;
+        border-top-left-radius: 30px;
+        background-color: white;
+        padding: 15px;
+        width: 100%;
+    }
+
+    header {
+        position: relative;
+        margin-bottom: 30px;
+
+        ion-button {
+            width: 30px;
+
+            svg {
+                width: 16px;
+                height: 16px;
+                color: var(--black);
+            }
+        }
+
+        h4 {
+            font-size: 16px;
+            text-align: center;
+            color: var(--black);
+            font-weight: 500;
+            width: calc(100% - 60px);
+            margin-right: auto;
+        }
+    }
+
+    ul {
+        li {
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+            margin-bottom: 15px;
+
+            label {
+                max-width: 50%;
+                text-align: left;
+                font-size: 11px;
+                color: var(--grey);
+                font-weight: 500;
+                letter-spacing: 0.5px;
+            }
+
+            p {
+                text-align: right;
+                font-size: 13px;
+                color: var(--dark-grey);
+                font-weight: 500;
+            }
+        }
+    }
 }

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

@@ -1,13 +1,16 @@
-import React from 'react';
+import React, { useState } from 'react';
 import styles from './invoice.module.scss';
-
+import { ReactComponent as ChevronBack } from 'ionicons/dist/svg/chevron-back.svg';
+import { format } from 'date-fns';
+import { IonButton, IonDatetime, IonInput } from '@ionic/react';
 
 type OwnProps = {
     invoice: {
         id: string,
         date: Date,
         status: string,
-        dateOfPayment: Date,
+        dateOfPayment?: Date,
+        referenceNumber?: string,
     },
     client: {
         name: string,
@@ -16,13 +19,15 @@ type OwnProps = {
             name: string,
             contract: {
                 name: string,
-                amount: number,
+                amount: string,
             },
         }
     }
 }
 
 export const InvoiceCard: React.FC<OwnProps> = (props) => {
+    const [showDetails, setShowDetails] = useState<boolean>(false);
+
     let statusClass = '';
 
     switch (props.invoice.status) {
@@ -30,20 +35,80 @@ export const InvoiceCard: React.FC<OwnProps> = (props) => {
         case 'over due': statusClass = styles.overDue; break;
         case 'paid': statusClass = styles.paid; break;
         case 'cancelled': statusClass = styles.cancelled; break;
-        default: break; 
+        default: break;
     }
 
-    return <section className={styles.card}>
-        <figure>
-            <img src={props.client.logo} alt="logo"/>
-        </figure>
-        <div className={styles.contentHolder}>
-            <h6> Invoice ID: { props.invoice.id } </h6>
-            <h2> ₹ { props.client.project.contract.amount } </h2>
-            <p> { props.client.project.contract.name } </p>
-        </div>
-        <div className={styles.status}>
-            <span className={statusClass}> { props.invoice.status } </span>
-        </div>
-    </section>
+    return <div className={styles.cardContainer}>
+        <section className={styles.card} onClick={() => setShowDetails(true)}>
+            <figure>
+                <img src={props.client.logo} alt="logo" />
+            </figure>
+            <div className={styles.contentHolder}>
+                <h6> Invoice ID: {props.invoice.id} </h6>
+                <h2> {props.client.project.contract.amount} </h2>
+                <p> {props.client.project.contract.name} </p>
+            </div>
+            <div className={styles.status}>
+                <span className={statusClass}> {props.invoice.status} </span>
+            </div>
+        </section>
+
+        { showDetails && <div className={styles.backdrop}>
+            <section className={styles.cardDetails}>
+                <header>
+                    <IonButton onClick={() => setShowDetails(false)} fill={'clear'} size={'small'}> <ChevronBack /> </IonButton>
+                    <h4> Pending Invoice </h4>
+                </header>
+                <ul>
+                    <li>
+                        <label> Invoice ID </label>
+                        <p> {props.invoice.id} </p>
+                    </li>
+
+                    <li>
+                        <label> Invoice Date </label>
+                        <p> {format(props.invoice.date, 'dd MMMM yyyy')} </p>
+                    </li>
+
+                    <li>
+                        <label> Client </label>
+                        <p> {props.client.name} </p>
+                    </li>
+
+                    <li>
+                        <label> Project </label>
+                        <p> {props.client.project.name} </p>
+                    </li>
+
+                    <li>
+                        <label> Contract </label>
+                        <p> {props.client.project.contract.name} </p>
+                    </li>
+
+                    <li>
+                        <label> Invoice Amount </label>
+                        <p> {props.client.project.contract.amount} </p>
+                    </li>
+                </ul>
+
+                <section className={styles.form}>
+                    <div className={styles.inputHolder}>
+                        <label> Payment Date </label>
+                        <IonDatetime value={props.invoice.dateOfPayment?.toString()} mode={'ios'} placeholder={'DD/MM/YYYY'} displayFormat={'DD/MM/YYYY'}></IonDatetime>
+                    </div>
+
+                    <div className={styles.inputHolder}>
+                        <label> Reference No. </label>
+                        <IonInput placeholder={'Enter here'} value={props.invoice.referenceNumber? props.invoice.referenceNumber: ''}></IonInput>
+                    </div>
+
+                    {props.invoice.status !== 'cancelled' && props.invoice.status !== 'paid' && <div className={styles.buttonsHolder}>
+                        <IonButton fill={'outline'} shape={'round'}> Cancel Invoice </IonButton>
+                        <IonButton fill={'solid'} shape={'round'}> Paid </IonButton>
+                    </div>}
+                </section>
+            </section>
+        </div> }
+
+    </div>
 }

src/pages/accounts/accounts.module.scss

@@ -136,11 +136,11 @@
 .allTransactions {
     background-color: white;
     border-top-right-radius: 30px;
-    padding: 20px 0;
 }
 
 .transactionCard {
-    padding: 0 20px;
+    padding: 20px;
+    box-shadow: 0px 10px 10px -10px var(--light-grey);
     
     header {
         display: flex;

src/pages/accounts/accounts.tsx

@@ -1,6 +1,6 @@
 import { IonContent, IonPage } from '@ionic/react';
-import { ReactComponent as CogIcon } from '../../assets/svg/cog-outline.svg';
-import { ReactComponent as LineChartIcon } from '../../assets/svg/line-chart.svg';
+import { ReactComponent as CogIcon } from 'ionicons/dist/svg/cog-outline.svg';
+import { ReactComponent as LineChartIcon } from 'ionicons/dist/svg/stats-chart.svg';
 import styles from './accounts.module.scss';
 import { InvoiceCard } from '../../components/passbook/invoice-card/invoice';
 
@@ -9,7 +9,6 @@ const sampleInvoiceData = [{
         id: '2021-22/50',
         date: new Date(),
         status: 'due',
-        dateOfPayment: new Date(),
     },
     client: {
         name: 'Swasti',
@@ -18,7 +17,7 @@ const sampleInvoiceData = [{
             name: 'DiceFlow',
             contract: {
                 name: 'Retainer contract',
-                amount: 500000,
+                amount: '₹ 5,00,000',
             },
         }
     }
@@ -28,6 +27,7 @@ const sampleInvoiceData = [{
         date: new Date(),
         status: 'paid',
         dateOfPayment: new Date(),
+        referenceNumber: '23226675560'
     },
     client: {
         name: 'TechM',
@@ -36,7 +36,7 @@ const sampleInvoiceData = [{
             name: 'Telecom Italia',
             contract: {
                 name: 'Phase 1',
-                amount: 200000,
+                amount: '₹ 20,00,000',
             },
         }
     }

src/theme/variables.css

@@ -107,6 +107,7 @@ h1, h2, h3, h4, h5, h6 {
 
 button {
     background-color: transparent;
+    color: var(--light-grey);
 }
 
 ul {
@@ -117,4 +118,13 @@ ul {
 
 figure, p {
     margin: 0;
+}
+
+ion-button {
+    --padding-start: 0px;
+    --padding-end: 0px;
+    --padding-top: 0px;
+    --padding-right: 0px;
+    margin: 0px;
+    margin-inline: 0px;
 }