diff --git a/src/components/item-card/itemCard.tsx b/src/components/item-card/itemCard.tsx index 750f99c..360989f 100644 --- a/src/components/item-card/itemCard.tsx +++ b/src/components/item-card/itemCard.tsx @@ -19,10 +19,11 @@ type OwnProps = { name: string, value: string }>, - form?: JSX.Element + form?: JSX.Element, } -// Card - Image on the left, heading-value-description in the middle and status or any text on the right. eg: Pending invoice cards +// Card - Image on the left, heading-value-description in the middle and status or any text on the right. +// Eg: Pending invoice cards. Follow input form patter from the commented card in the end of this file export const ItemCard: React.FC = (props) => { const [showDetails, setShowDetails] = useState(false); diff --git a/src/pages/accounts/accounts.tsx b/src/pages/accounts/accounts.tsx index e92a868..dad8c2a 100644 --- a/src/pages/accounts/accounts.tsx +++ b/src/pages/accounts/accounts.tsx @@ -1,7 +1,8 @@ -import { IonContent, IonPage } from '@ionic/react'; +import { IonButton, IonContent, IonDatetime, IonInput, IonPage } from '@ionic/react'; 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 itemCardStyles from '../../components/item-card/itemCard.module.scss'; import { ItemCard } from '../../components/item-card/itemCard'; import { format } from 'date-fns'; @@ -42,6 +43,24 @@ const sampleInvoiceData = [{ }] const Accounts: React.FC = () => { + const pendingInvoiceForm = +
+
+ + +
+ +
+ + +
+ +
+ Cancel Invoice + Paid +
+
+ return ( @@ -131,6 +150,7 @@ const Accounts: React.FC = () => { name: 'Invoice Amount', value: invoice.client.project.contract.amount }]} + form={pendingInvoiceForm} /> })}