update default values and add bill metadata selection

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 && (

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>
+  );
+}

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: [],
   });