From ce49cf353bb9cf5a60e71cd4fc4b54dfe4aaedb4 Mon Sep 17 00:00:00 2001
From: SriHarshaDamarla <damarlasriharsha26@gmail.com>
Date: Thu, 7 May 2026 10:47:01 +0530
Subject: [PATCH] update default values and add bill metadata selection

---
 src/components/App.tsx        | 11 +++++
 src/components/BillHeader.tsx | 75 +++++++++++++++++++++++++++++++++++
 src/hooks/useBill.ts          |  4 +-
 3 files changed, 88 insertions(+), 2 deletions(-)
 create mode 100644 src/components/BillHeader.tsx

diff --git a/src/components/App.tsx b/src/components/App.tsx
index a810806..e995cb8 100644
--- a/src/components/App.tsx
+++ b/src/components/App.tsx
@@ -1,4 +1,5 @@
 import { useBill } from "../hooks";
+import { BillHeader } from "./BillHeader";
 import { BillItemRow } from "./BillItemRow";
 import { BillSummary } from "./BillSummary";
 import { ItemForm } from "./ItemForm";
@@ -17,6 +18,16 @@ export default function App() {
   return (
     <div className="min-h-screen bg-gray-50">
       <div className="max-w-md mx-auto">
+        <BillHeader
+          currency={bill.currency}
+          title={bill.title}
+          taxType={bill.taxType}
+          taxPercent={bill.taxPercent}
+          onCurrencyChange={updateCurrency}
+          onTitleChange={updateTitle}
+          onTaxChange={updateTax}
+        />
+
         <div className="px-4 py-4 flex flex-col gap-4">
           <ItemForm currency={bill.currency} onAdd={addItem} />
           {computedBill.items.length > 0 && (
diff --git a/src/components/BillHeader.tsx b/src/components/BillHeader.tsx
new file mode 100644
index 0000000..27d0a96
--- /dev/null
+++ b/src/components/BillHeader.tsx
@@ -0,0 +1,75 @@
+import { Currency, TaxType } from "../types";
+
+interface BillHeaderProps {
+  title: string;
+  currency: Currency;
+  taxType: TaxType;
+  taxPercent: number;
+  onTitleChange: (title: string) => void;
+  onCurrencyChange: (currency: Currency) => void;
+  onTaxChange: (taxType: TaxType, taxPercent: number) => void;
+}
+
+export function BillHeader({
+  title,
+  currency,
+  taxType,
+  taxPercent,
+  onTitleChange,
+  onCurrencyChange,
+  onTaxChange,
+}: BillHeaderProps) {
+  return (
+    <div className="bg-indigo-500 px-4 pt-12 pb-6 rounded-2xl mx-2">
+      <input
+        type="text"
+        value={title}
+        onChange={(e) => onTitleChange(e.target.value)}
+        className="w-full bg-transparent text-white text-2xl font-bold placeholder-indigo-300 focus:outline-none"
+        placeholder="Bill Title"
+      />
+      <p className="text-indigo-200 text-xs mt-1">
+        {new Date().toLocaleDateString("en-IN", {
+          day: "2-digit",
+          month: "long",
+          year: "numeric",
+        })}
+      </p>
+      <div className="flex gap-2 mt-4">
+        <select
+          value={currency}
+          onChange={(e) => onCurrencyChange(e.target.value as Currency)}
+          className="flex-1 bg-indigo-400 text-white text-sm rounded-xl px-3 py-2 focus:outline-none"
+        >
+          {Object.values(Currency).map((c) => (
+            <option key={c} value={c}>
+              {c}
+            </option>
+          ))}
+        </select>
+
+        <select
+          value={taxType}
+          onChange={(e) => onTaxChange(e.target.value as TaxType, taxPercent)}
+          className="flex-1 bg-indigo-400 text-white text-sm rounded-xl px-3 py-2 focus:outline-none"
+        >
+          {Object.values(TaxType).map((t) => (
+            <option key={t} value={t}>
+              {t}
+            </option>
+          ))}
+        </select>
+
+        <input
+          type="number"
+          value={taxPercent}
+          min={0}
+          max={100}
+          onChange={(e) => onTaxChange(taxType, Number(e.target.value))}
+          placeholder="%"
+          className="w-16 bg-indigo-400 rounded-xl px-3 py-2 text-white text-sm focus:outline-none text-center"
+        />
+      </div>
+    </div>
+  );
+}
diff --git a/src/hooks/useBill.ts b/src/hooks/useBill.ts
index 6f7a746..ebcb3f8 100644
--- a/src/hooks/useBill.ts
+++ b/src/hooks/useBill.ts
@@ -9,8 +9,8 @@ export function useBill() {
     title: "New Bill",
     currency: Currency.INR,
     createdAt: new Date(),
-    taxPercent: 18,
-    taxType: TaxType.GST,
+    taxPercent: 0,
+    taxType: TaxType.None,
     items: [],
   });