kj
/
webtrigon-accounts
1
0
Fork 0
Koodi Ongelmat 0 Pull-pyynnöt 0 Julkaisut 0 Wiki Toiminta
Selaa lähdekoodia

--partial commit invoice card details

master
kj1352 4 vuotta sitten
vanhempi
1e2af64fb4
commit
b4e9aca6d5
9 muutettua tiedostoa jossa 173 lisäystä ja 30 poistoa
Jaettu näkymä
Diff Options
Show Stats Download Patch File Download Diff File
  1. +0
    -1
      src/assets/svg/cash-outline.svg
  2. +0
    -1
      src/assets/svg/cog-outline.svg
  3. +0
    -1
      src/assets/svg/line-chart.svg
  4. +2
    -1
      src/components/passbook/_common.scss
  5. +71
    -1
      src/components/passbook/invoice-card/invoice.module.scss
  6. +83
    -18
      src/components/passbook/invoice-card/invoice.tsx
  7. +2
    -2
      src/pages/accounts/accounts.module.scss
  8. +5
    -5
      src/pages/accounts/accounts.tsx
  9. +10
    -0
      src/theme/variables.css

+ 0
- 1
src/assets/svg/cash-outline.svg Näytä tiedosto

@@ -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>

+ 0
- 1
src/assets/svg/cog-outline.svg Näytä tiedosto

@@ -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>

+ 0
- 1
src/assets/svg/line-chart.svg Näytä tiedosto

@@ -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>

+ 2
- 1
src/components/passbook/_common.scss Näytä tiedosto

@@ -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;

+ 71
- 1
src/components/passbook/invoice-card/invoice.module.scss Näytä tiedosto

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

+ 83
- 18
src/components/passbook/invoice-card/invoice.tsx Näytä tiedosto

@@ -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>
}

+ 2
- 2
src/pages/accounts/accounts.module.scss Näytä tiedosto

@@ -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;


+ 5
- 5
src/pages/accounts/accounts.tsx Näytä tiedosto

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


+ 10
- 0
src/theme/variables.css Näytä tiedosto

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

Kirjoita Esikatselu
Ladataan…
Peruuta
Tallenna