06_js-debug/uebungen/u15_product-sales-table/src/App.tsx

@@ -0,0 +1,42 @@
+import { useState, useEffect } from 'react';
+
+import Table from './components/Table';
+
+function App() {
+  const [salesData, setSalesData] = useState(null);
+
+  const fetchSalesData = async () => {
+    const response = await fetch('./src/lib/db/sales.json');
+    const data = await response.json();
+    setSalesData(data);
+  };
+
+  useEffect(() => {
+    fetchSalesData();
+  }, []);
+
+  return (
+    <main>
+      <div className="wrapper">
+        <div className="header-container">
+          <div className="header-title-wrapper">
+            <h1 className="title">Product Sales</h1>
+            <p className="subtitle">
+              A table of product sales data for the current month.
+            </p>
+          </div>
+        </div>
+
+        <div className="table-wrapper">
+          <div className="table-container">
+            <div className="table-box">
+              {salesData && <Table salesData={salesData} />}
+            </div>
+          </div>
+        </div>
+      </div>
+    </main>
+  );
+}
+
+export default App;

06_js-debug/uebungen/u15_product-sales-table/src/components/Table.tsx

@@ -0,0 +1,32 @@
+import TableRow from './TableRow';
+import { Product } from '../lib/datatypes';
+
+const Table = ({ salesData }: { salesData: Product[] }) => {
+  return (
+    <table className="divide-y divide-gray-300">
+      <thead>
+        <tr>
+          <th scope="col">ID</th>
+          <th scope="col">Product</th>
+          <th scope="col">Code</th>
+          <th scope="col">Quantity</th>
+          <th scope="col">Price</th>
+          <th scope="col">Profit</th>
+        </tr>
+      </thead>
+
+      <tbody className="divide-y divide-gray-200">
+        {salesData.length > 0 &&
+          salesData.map(
+            (product) =>
+              // Aro
+              // wenn product == null (böse json datei :) wird trotzdem versucht auf die id zuzugreifen
+              // ==> Fehler...
+              product && <TableRow key={product.id} product={product} />,
+          )}
+      </tbody>
+    </table>
+  );
+};
+
+export default Table;

06_js-debug/uebungen/u15_product-sales-table/src/components/TableRow.tsx

@@ -0,0 +1,25 @@
+import { Product } from '../lib/datatypes';
+
+const TableRow = ({ product }: { product: Product }) => {
+  const {
+    id,
+    product: productName,
+    productCode,
+    quantity,
+    price,
+    profit,
+  } = product;
+
+  return (
+    <tr>
+      <td className="id-column">{id}</td>
+      <td className="product-info-column">{productName}</td>
+      <td className="product-info-column">{productCode}</td>
+      <td className="product-num-column">{quantity}</td>
+      <td className="product-num-column">${price.toFixed(2)}</td>
+      <td className="product-num-column">${profit.toFixed(2)}</td>
+    </tr>
+  );
+};
+
+export default TableRow;

06_js-debug/uebungen/u15_product-sales-table/src/index.css

@@ -0,0 +1,187 @@
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+}
+
+*,
+html,
+body {
+  margin: 0;
+  padding: 0;
+  color: #171717;
+  font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
+    Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
+}
+
+button {
+  border: none;
+}
+
+.screen-reader-text {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border-width: 0;
+}
+
+/* ===== App Component ===== */
+main {
+  max-width: 80rem; /* 1280px */
+  margin: 0 auto;
+  padding: 3rem 0.75rem; /* 48px 12px */
+}
+
+.wrapper {
+  padding: 0 1rem; /* 0 16px */
+}
+
+.header-container {
+  display: block;
+}
+
+.header-title-wrapper {
+  display: block;
+}
+
+.title {
+  font-size: 1rem; /* 16px */
+  line-height: 1.5rem; /* 24px */
+  line-height: 1.5rem; /* 24px */
+  font-weight: 600;
+  color: #111827;
+}
+
+.subtitle {
+  margin-top: 0.5rem; /* 8px */
+  font-size: 0.875rem; /* 14px */
+  line-height: 1.25rem; /* 20px */
+  color: #374151;
+}
+
+.table-wrapper {
+  display: flow-root;
+  margin-top: 2rem; /* 32px */
+}
+
+.table-container {
+  margin: -0.5rem -1rem; /* -8px -16px */
+  overflow-x: auto;
+}
+
+.table-box {
+  display: inline-block;
+  min-width: 100%;
+  padding: 0.5rem 0 /* 8px 0 */;
+  vertical-align: middle;
+}
+
+/* ===== Table Component ===== */
+table {
+  min-width: 100%;
+  border-collapse: collapse;
+}
+
+th {
+  white-space: nowrap;
+  padding-top: 0.875rem /* 14px */;
+  padding-bottom: 0.875rem /* 14px */;
+  padding-left: 1rem /* 16px */;
+  padding-right: 0.75rem /* 12px */;
+  text-align: left;
+  font-weight: 600;
+  font-size: 0.875rem /* 14px */;
+  line-height: 1.25rem /* 20px */;
+  color: #111827;
+}
+
+tbody {
+  background-color: white;
+}
+
+thead tr {
+  border-bottom: 1px solid #d1d5db;
+}
+
+tbody tr {
+  border-bottom: 1px solid #e5e7eb;
+}
+
+.id-column {
+  white-space: nowrap;
+  padding-top: 0.5rem /* 8px */;
+  padding-bottom: 0.5rem /* 8px */;
+  padding-left: 1rem /* 16px */;
+  padding-right: 0.75rem /* 12px */;
+  font-size: 0.875rem /* 14px */;
+  line-height: 1.25rem /* 20px */;
+  color: #6b7280;
+}
+
+.product-info-column {
+  white-space: nowrap;
+  padding: 0.5rem /* 8px */;
+  font-size: 0.875rem /* 14px */;
+  line-height: 1.25rem /* 20px */;
+  font-weight: 500;
+  color: #111827;
+}
+
+.product-num-column {
+  white-space: nowrap;
+  padding: 0.5rem /* 8px */;
+  font-size: 0.875rem /* 14px */;
+  line-height: 1.25rem /* 20px */;
+  color: #6b7280;
+}
+
+/* ===== Breakpoints ===== */
+@media (min-width: 640px) {
+  .wrapper {
+    padding: 0 1.5rem; /* 0 24px */
+  }
+
+  .header-container {
+    display: flex;
+    align-items: center;
+  }
+
+  .header-title-wrapper {
+    flex: 1 1 auto;
+  }
+
+  .table-container {
+    margin: -0.5rem -1.5rem; /* -8px -24px */
+  }
+
+  .table-box {
+    padding: 0.5rem 1.5rem /* 8px 24px */;
+  }
+
+  th {
+    padding-left: 0px;
+  }
+
+  .id-column {
+    padding-left: 0px;
+  }
+}
+
+@media (min-width: 1024px) {
+  .wrapper {
+    padding: 0 2rem; /* 0 32px */
+  }
+
+  .table-container {
+    margin: -0.5rem -2rem; /* -8px -32px */
+  }
+
+  .table-box {
+    padding: 0.5rem 2rem /* 8px 32px */;
+  }
+}

06_js-debug/uebungen/u15_product-sales-table/src/lib/datatypes.ts

@@ -0,0 +1,8 @@
+export interface Product {
+  id: number;
+  product: string;
+  productCode: string;
+  quantity: number;
+  price: number;
+  profit: number;
+}

06_js-debug/uebungen/u15_product-sales-table/src/lib/db/sales.json

@@ -0,0 +1,115 @@
+[
+  {
+    "id": 1,
+    "product": "Laptop",
+    "productCode": "LPT",
+    "quantity": 352,
+    "price": 1200.0,
+    "profit": 200.0
+  },
+  {
+    "id": 2,
+    "product": "Smartphone",
+    "productCode": "SPH",
+    "quantity": 500,
+    "price": 800.0,
+    "profit": 123.0
+  },
+  {
+    "id": 3,
+    "product": "Headphones",
+    "productCode": "HDP",
+    "quantity": 432,
+    "price": 150.0,
+    "profit": 50.0
+  },
+  {
+    "id": 4,
+    "product": "Keyboard",
+    "productCode": "KBD",
+    "quantity": 431,
+    "price": 75.0,
+    "profit": 25.0
+  },
+  null,
+  {
+    "id": 6,
+    "product": "Monitor",
+    "productCode": "MNT",
+    "quantity": 234,
+    "price": 300.0,
+    "profit": 50.0
+  },
+  {
+    "id": 7,
+    "product": "Tablet",
+    "productCode": "TBL",
+    "quantity": 68,
+    "price": 350.0,
+    "profit": 100.0
+  },
+  {
+    "id": 8,
+    "product": "Printer",
+    "productCode": "PRT",
+    "quantity": 642,
+    "price": 200.0,
+    "profit": 50.0
+  },
+  {
+    "id": 9,
+    "product": "Webcam",
+    "productCode": "WCM",
+    "quantity": 123,
+    "price": 90.0,
+    "profit": 20.0
+  },
+  {
+    "id": 10,
+    "product": "Desk Lamp",
+    "productCode": "DLP",
+    "quantity": 1921,
+    "price": 30.0,
+    "profit": 5.0
+  },
+  {
+    "id": 11,
+    "product": "Chair",
+    "productCode": "CHR",
+    "quantity": 4854,
+    "price": 120.0,
+    "profit": 20.0
+  },
+  {
+    "id": 12,
+    "product": "External Hard Drive",
+    "productCode": "EHD",
+    "quantity": 483,
+    "price": 100.0,
+    "profit": 20.0
+  },
+  {
+    "id": 13,
+    "product": "USB-C Adapter",
+    "productCode": "USC",
+    "quantity": 10239,
+    "price": 19.99,
+    "profit": 5.0
+  },
+  {
+    "id": 14,
+    "product": "Smart Watch",
+    "productCode": "SWT",
+    "quantity": 483,
+    "price": 199.99,
+    "profit": 50.0
+  },
+  {
+    "id": 15,
+    "product": "Speakers",
+    "productCode": "SPK",
+    "quantity": 394,
+    "price": 85.0,
+    "profit": 20.0
+  }
+]

06_js-debug/uebungen/u15_product-sales-table/src/main.tsx

@@ -0,0 +1,10 @@
+import React from 'react'
+import ReactDOM from 'react-dom/client'
+import App from './App.tsx'
+import './index.css'
+
+ReactDOM.createRoot(document.getElementById('root')!).render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>,
+)

06_js-debug/uebungen/u15_product-sales-table/src/vite-env.d.ts

@@ -0,0 +1 @@
+/// <reference types="vite/client" />