1 files changed, 58 insertions, 0 deletions
diff --git a/src/components/Display/ItemsDisplay.tsx b/src/components/Display/ItemsDisplay.tsx
new file mode 100644
index 0000000..db3d336
--- /dev/null
+++ b/src/components/Display/ItemsDisplay.tsx
@@ -0,0 +1,58 @@
+/*
+ * OpenBills - Self hosted browser app to generate and keep track of simple invoices
+ * Version - 0
+ * Licensed under the MIT license - https://opensource.org/licenses/MIT
+ *
+ * Copyright (c) 2021 Vidhu Kant Sharma
+*/
+
+import React from "react";
+import { Item } from "./../../interfaces";
+import "./Display.scss";
+import DisplayItem from "./DisplayItem";
+// import {SummaryDisplayTR} from "./SummaryDisplay";
+
+interface Props {
+  items: Item[]
+  defGSTValue: number
+}
+
+const ItemsDisplay: React.FC<Props> = (props) => {
+  const items = props.items;
+  // TODO: remove mutability
+  let itemNumber = 0;
+
+  return (
+    <table className={"ItemsDisplay"}>
+      <tbody>
+        <tr className="legend">
+          <th>S. Num</th>
+          <th className={"leftAlign"}>Item</th>
+          <th className={"leftAlign"}>Description</th>
+          <th>HSN</th>
+          <th>Quantity</th>
+          <th>Unit Price</th>
+          <th>Discount</th>
+          <th>sgst</th>
+          <th>cgst</th>
+          <th>igst</th>
+          <th>Price</th>
+        </tr>
+
+        {items.map( 
+          (item) => {
+            itemNumber++
+            return (
+              <DisplayItem key={itemNumber} itemNumber={itemNumber} item={item} defGSTValue={props.defGSTValue}/>
+            );
+          }
+        )}
+
+      </tbody>
+    </table>
+  );
+  // this goes right before </tbody>
+        //<SummaryDisplayTR items={props.items}/>
+}
+
+export default ItemsDisplay;