refactor: extract BillEntryForm to dedupe price/amount-entry forms

Quality Gate still failed at exactly the 3.0% duplication threshold
after the first dedup pass — the price-history and amount-entries
'quick add' forms in bills/[id]/page.tsx were themselves duplicated
near-verbatim (amount + date inputs, notes, Cancel/Save buttons; only
the date's aria-label and the optional 'Valid until' field differ).

Extract into a shared BillEntryForm component (controlled props, a
children slot for the price-history form's extra EndDate field).
Verified pixel-identical rendering: ran the four bill visual tests
locally against a fresh production build — all four pass against the
baselines the update-visual-snapshots bot already committed, meaning
this refactor produced byte-for-byte the same output as what's on
the branch now.

lint, tsc --noEmit, npm run build, and the full Jest suite (1156
tests) all still pass.

Co-Authored-By: Claude Haiku 4.5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01CbB6xayXB6kdEAq18fEVkF

Author: claude

anything-frontend/src/app/bills/[id]/page.tsx

@@ -20,6 +20,7 @@ import {
   FREQUENCY_LABELS,
 } from "@/hooks/useBills";
 import { Button } from "@/components/ui/button";
+import { BillEntryForm } from "@/components/BillEntryForm";
 import { toast } from "sonner";
 import { isSafeUrl } from "@/lib/utils";
 import {
@@ -402,30 +403,20 @@ export default function BillDetailPage() {
 
         {/* Add price form */}
         {showAddPrice && (
-          <form
+          <BillEntryForm
             onSubmit={handleAddPrice}
-            className="bg-blue-50 dark:bg-blue-900/20 border border-blue-200 dark:border-blue-800 rounded-lg p-3 mb-3 space-y-2"
+            amount={newAmount}
+            onAmountChange={setNewAmount}
+            date={newDate}
+            onDateChange={setNewDate}
+            dateAriaLabel="Effective date"
+            notes={newNotes}
+            onNotesChange={setNewNotes}
+            onCancel={() => setShowAddPrice(false)}
+            isPending={addPrice.isPending}
+            isOnline={isOnline}
+            offlineTitle="Adding a price entry requires an internet connection"
           >
-            <div className="flex gap-2">
-              <input
-                type="number"
-                value={newAmount}
-                onChange={(e) => setNewAmount(e.target.value)}
-                placeholder="Amount"
-                min="0.01"
-                step="0.01"
-                required
-                className="flex-1 px-3 py-1.5 rounded border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800 text-sm text-gray-900 dark:text-white focus:outline-none focus:ring-2 focus:ring-blue-500"
-              />
-              <input
-                type="date"
-                value={newDate}
-                onChange={(e) => setNewDate(e.target.value)}
-                required
-                aria-label="Effective date"
-                className="px-3 py-1.5 rounded border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800 text-sm text-gray-900 dark:text-white focus:outline-none focus:ring-2 focus:ring-blue-500"
-              />
-            </div>
             <div>
               <label htmlFor="bill-price-end-date" className="block text-xs text-gray-500 dark:text-gray-400 mb-1">
                 Valid until (optional)
@@ -439,34 +430,7 @@ export default function BillDetailPage() {
                 className="w-full px-3 py-1.5 rounded border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800 text-sm text-gray-900 dark:text-white focus:outline-none focus:ring-2 focus:ring-blue-500"
               />
             </div>
-            <input
-              type="text"
-              value={newNotes}
-              onChange={(e) => setNewNotes(e.target.value)}
-              placeholder="Notes (optional)"
-              className="w-full px-3 py-1.5 rounded border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800 text-sm text-gray-900 dark:text-white focus:outline-none focus:ring-2 focus:ring-blue-500"
-            />
-            <div className="flex gap-2">
-              <Button
-                type="button"
-                variant="outline"
-                size="sm"
-                className="flex-1"
-                onClick={() => setShowAddPrice(false)}
-              >
-                Cancel
-              </Button>
-              <Button
-                type="submit"
-                size="sm"
-                className="flex-1"
-                disabled={addPrice.isPending || !isOnline}
-                title={isOnline ? undefined : "Adding a price entry requires an internet connection"}
-              >
-                {addPrice.isPending ? "Saving..." : "Save"}
-              </Button>
-            </div>
-          </form>
+          </BillEntryForm>
         )}
 
         {historyLoading && (
@@ -544,58 +508,20 @@ export default function BillDetailPage() {
           </div>
 
           {showAddAmountEntry && (
-            <form
+            <BillEntryForm
               onSubmit={handleAddAmountEntry}
-              className="bg-blue-50 dark:bg-blue-900/20 border border-blue-200 dark:border-blue-800 rounded-lg p-3 mb-3 space-y-2"
-            >
-              <div className="flex gap-2">
-                <input
-                  type="number"
-                  value={newEntryAmount}
-                  onChange={(e) => setNewEntryAmount(e.target.value)}
-                  placeholder="Amount"
-                  min="0.01"
-                  step="0.01"
-                  required
-                  className="flex-1 px-3 py-1.5 rounded border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800 text-sm text-gray-900 dark:text-white focus:outline-none focus:ring-2 focus:ring-blue-500"
-                />
-                <input
-                  type="date"
-                  value={newEntryPeriodDate}
-                  onChange={(e) => setNewEntryPeriodDate(e.target.value)}
-                  required
-                  aria-label="Period date"
-                  className="px-3 py-1.5 rounded border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800 text-sm text-gray-900 dark:text-white focus:outline-none focus:ring-2 focus:ring-blue-500"
-                />
-              </div>
-              <input
-                type="text"
-                value={newEntryNotes}
-                onChange={(e) => setNewEntryNotes(e.target.value)}
-                placeholder="Notes (optional)"
-                className="w-full px-3 py-1.5 rounded border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800 text-sm text-gray-900 dark:text-white focus:outline-none focus:ring-2 focus:ring-blue-500"
-              />
-              <div className="flex gap-2">
-                <Button
-                  type="button"
-                  variant="outline"
-                  size="sm"
-                  className="flex-1"
-                  onClick={() => setShowAddAmountEntry(false)}
-                >
-                  Cancel
-                </Button>
-                <Button
-                  type="submit"
-                  size="sm"
-                  className="flex-1"
-                  disabled={addAmountEntry.isPending || !isOnline}
-                  title={isOnline ? undefined : "Adding an amount entry requires an internet connection"}
-                >
-                  {addAmountEntry.isPending ? "Saving..." : "Save"}
-                </Button>
-              </div>
-            </form>
+              amount={newEntryAmount}
+              onAmountChange={setNewEntryAmount}
+              date={newEntryPeriodDate}
+              onDateChange={setNewEntryPeriodDate}
+              dateAriaLabel="Period date"
+              notes={newEntryNotes}
+              onNotesChange={setNewEntryNotes}
+              onCancel={() => setShowAddAmountEntry(false)}
+              isPending={addAmountEntry.isPending}
+              isOnline={isOnline}
+              offlineTitle="Adding an amount entry requires an internet connection"
+            />
           )}
 
           {amountEntriesLoading && (

anything-frontend/src/components/BillEntryForm.tsx

@@ -0,0 +1,100 @@
+"use client";
+
+import type { ReactNode } from "react";
+import { Button } from "@/components/ui/button";
+
+interface BillEntryFormProps {
+  onSubmit: (e: React.FormEvent) => void;
+  amount: string;
+  onAmountChange: (value: string) => void;
+  date: string;
+  onDateChange: (value: string) => void;
+  dateAriaLabel: string;
+  notes: string;
+  onNotesChange: (value: string) => void;
+  onCancel: () => void;
+  isPending: boolean;
+  isOnline: boolean;
+  offlineTitle: string;
+  /** Extra field(s) rendered between the amount/date row and notes — e.g. an optional end date. */
+  children?: ReactNode;
+}
+
+/**
+ * Inline "quick add" form shared by the price-history and amount-entries
+ * sections of the bill detail page: amount + date, optional extra fields,
+ * notes, then Cancel/Save. Both sections have the same shape (an amount tied
+ * to a date, plus a note) — this keeps them from drifting apart in copy or
+ * behavior as one changes.
+ */
+export function BillEntryForm({
+  onSubmit,
+  amount,
+  onAmountChange,
+  date,
+  onDateChange,
+  dateAriaLabel,
+  notes,
+  onNotesChange,
+  onCancel,
+  isPending,
+  isOnline,
+  offlineTitle,
+  children,
+}: Readonly<BillEntryFormProps>) {
+  return (
+    <form
+      onSubmit={onSubmit}
+      className="bg-blue-50 dark:bg-blue-900/20 border border-blue-200 dark:border-blue-800 rounded-lg p-3 mb-3 space-y-2"
+    >
+      <div className="flex gap-2">
+        <input
+          type="number"
+          value={amount}
+          onChange={(e) => onAmountChange(e.target.value)}
+          placeholder="Amount"
+          min="0.01"
+          step="0.01"
+          required
+          className="flex-1 px-3 py-1.5 rounded border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800 text-sm text-gray-900 dark:text-white focus:outline-none focus:ring-2 focus:ring-blue-500"
+        />
+        <input
+          type="date"
+          value={date}
+          onChange={(e) => onDateChange(e.target.value)}
+          required
+          aria-label={dateAriaLabel}
+          className="px-3 py-1.5 rounded border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800 text-sm text-gray-900 dark:text-white focus:outline-none focus:ring-2 focus:ring-blue-500"
+        />
+      </div>
+      {children}
+      <input
+        type="text"
+        value={notes}
+        onChange={(e) => onNotesChange(e.target.value)}
+        placeholder="Notes (optional)"
+        className="w-full px-3 py-1.5 rounded border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800 text-sm text-gray-900 dark:text-white focus:outline-none focus:ring-2 focus:ring-blue-500"
+      />
+      <div className="flex gap-2">
+        <Button
+          type="button"
+          variant="outline"
+          size="sm"
+          className="flex-1"
+          onClick={onCancel}
+        >
+          Cancel
+        </Button>
+        <Button
+          type="submit"
+          size="sm"
+          className="flex-1"
+          disabled={isPending || !isOnline}
+          title={isOnline ? undefined : offlineTitle}
+        >
+          {isPending ? "Saving..." : "Save"}
+        </Button>
+      </div>
+    </form>
+  );
+}