Added dummy form into the itemcard

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<OwnProps> = (props) => {
     const [showDetails, setShowDetails] = useState<boolean>(false);

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 =
+    <section className={itemCardStyles.form}>
+        <div className={itemCardStyles.inputHolder}>
+            <label> Payment Date </label>
+            <IonDatetime mode={'ios'} placeholder={'DD/MM/YYYY'} displayFormat={'DD/MM/YYYY'}></IonDatetime>
+        </div>
+
+        <div className={itemCardStyles.inputHolder}>
+            <label> Reference No. </label>
+            <IonInput placeholder={'Enter here'}></IonInput>
+        </div>
+
+        <div className={itemCardStyles.buttonsHolder}>
+            <IonButton fill={'outline'} color="dark" className={itemCardStyles.cancel} shape={'round'}> Cancel Invoice </IonButton>
+            <IonButton fill={'solid'} className={itemCardStyles.approve + ' ' + itemCardStyles.disabled} shape={'round'}> Paid </IonButton>
+        </div>
+    </section>
+
     return (
         <IonPage>
             <IonContent>
@@ -131,6 +150,7 @@ const Accounts: React.FC = () => {
                                 name: 'Invoice Amount',
                                 value: invoice.client.project.contract.amount
                             }]}
+                            form={pendingInvoiceForm}
                             />
                         })}
                     </div>