@@ -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> |
@@ -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> |
@@ -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> |
@@ -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; |
@@ -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; | |||
} | |||
} | |||
} | |||
} |
@@ -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> | |||
} |
@@ -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; | |||
@@ -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', | |||
}, | |||
} | |||
} | |||
@@ -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; | |||
} |