From b4e9aca6d568218dd071f79499ba0de5d9809ecf Mon Sep 17 00:00:00 2001 From: kj1352 Date: Fri, 8 Oct 2021 13:46:13 +0530 Subject: [PATCH] --partial commit invoice card details --- src/assets/svg/cash-outline.svg | 1 - src/assets/svg/cog-outline.svg | 1 - src/assets/svg/line-chart.svg | 1 - src/components/passbook/_common.scss | 3 +- .../passbook/invoice-card/invoice.module.scss | 72 ++++++++++++- .../passbook/invoice-card/invoice.tsx | 101 ++++++++++++++---- src/pages/accounts/accounts.module.scss | 4 +- src/pages/accounts/accounts.tsx | 10 +- src/theme/variables.css | 10 ++ 9 files changed, 173 insertions(+), 30 deletions(-) delete mode 100644 src/assets/svg/cash-outline.svg delete mode 100644 src/assets/svg/cog-outline.svg delete mode 100644 src/assets/svg/line-chart.svg diff --git a/src/assets/svg/cash-outline.svg b/src/assets/svg/cash-outline.svg deleted file mode 100644 index 4796c38..0000000 --- a/src/assets/svg/cash-outline.svg +++ /dev/null @@ -1 +0,0 @@ -ionicons-v5-l \ No newline at end of file diff --git a/src/assets/svg/cog-outline.svg b/src/assets/svg/cog-outline.svg deleted file mode 100644 index 69493f0..0000000 --- a/src/assets/svg/cog-outline.svg +++ /dev/null @@ -1 +0,0 @@ -ionicons-v5-m \ No newline at end of file diff --git a/src/assets/svg/line-chart.svg b/src/assets/svg/line-chart.svg deleted file mode 100644 index 6c1af2e..0000000 --- a/src/assets/svg/line-chart.svg +++ /dev/null @@ -1 +0,0 @@ -ionicons-v5-p \ No newline at end of file diff --git a/src/components/passbook/_common.scss b/src/components/passbook/_common.scss index 52b1222..0fdc01b 100644 --- a/src/components/passbook/_common.scss +++ b/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; diff --git a/src/components/passbook/invoice-card/invoice.module.scss b/src/components/passbook/invoice-card/invoice.module.scss index 62af7cd..269244c 100644 --- a/src/components/passbook/invoice-card/invoice.module.scss +++ b/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; + } + } + } } \ No newline at end of file diff --git a/src/components/passbook/invoice-card/invoice.tsx b/src/components/passbook/invoice-card/invoice.tsx index 20585c7..ae13261 100644 --- a/src/components/passbook/invoice-card/invoice.tsx +++ b/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 = (props) => { + const [showDetails, setShowDetails] = useState(false); + let statusClass = ''; switch (props.invoice.status) { @@ -30,20 +35,80 @@ export const InvoiceCard: React.FC = (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
-
- logo -
-
-
Invoice ID: { props.invoice.id }
-

₹ { props.client.project.contract.amount }

-

{ props.client.project.contract.name }

-
-
- { props.invoice.status } -
-
+ return
+
setShowDetails(true)}> +
+ logo +
+
+
Invoice ID: {props.invoice.id}
+

{props.client.project.contract.amount}

+

{props.client.project.contract.name}

+
+
+ {props.invoice.status} +
+
+ + { showDetails &&
+
+
+ setShowDetails(false)} fill={'clear'} size={'small'}> +

Pending Invoice

+
+
    +
  • + +

    {props.invoice.id}

    +
    • + +
  • + +

    {format(props.invoice.date, 'dd MMMM yyyy')}

    +
    • + +
  • + +

    {props.client.name}

    +
    • + +
  • + +

    {props.client.project.name}

    +
    • + +
  • + +

    {props.client.project.contract.name}

    +
    • + +
  • + +

    {props.client.project.contract.amount}

    +
    • +
+ +
+
+ + +
+ +
+ + +
+ + {props.invoice.status !== 'cancelled' && props.invoice.status !== 'paid' &&
+ Cancel Invoice + Paid +
} +
+
+
} + +
} \ No newline at end of file diff --git a/src/pages/accounts/accounts.module.scss b/src/pages/accounts/accounts.module.scss index e07bcc6..d2ddcc6 100644 --- a/src/pages/accounts/accounts.module.scss +++ b/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; diff --git a/src/pages/accounts/accounts.tsx b/src/pages/accounts/accounts.tsx index d5738c4..a0c4a21 100644 --- a/src/pages/accounts/accounts.tsx +++ b/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', }, } } diff --git a/src/theme/variables.css b/src/theme/variables.css index 68a3012..44c1c77 100644 --- a/src/theme/variables.css +++ b/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; } \ No newline at end of file