From 1018c55bb3b73a6e36e0fa3cdd180530e1c8214b Mon Sep 17 00:00:00 2001
From: null <koga.industries@gmail.com>
Date: Fri, 3 Jul 2026 19:06:12 -0500
Subject: [PATCH] refactor(bill-modal): extract DebtDetailsSection (BM2, 1/n)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

First BillModal decompose step: the collapsible Debt/Snowball fields (interest
rate, current balance, minimum payment, snowball visibility) move to
client/components/bill-modal/DebtDetailsSection.jsx as a presentational
component; state stays in the parent (the save action reads it). Behavior-
preserving — BillModal 1723 -> 1637 lines; build + client tests green.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
---
 client/components/BillModal.jsx               | 130 +++---------------
 .../bill-modal/DebtDetailsSection.jsx         | 130 ++++++++++++++++++
 2 files changed, 152 insertions(+), 108 deletions(-)
 create mode 100644 client/components/bill-modal/DebtDetailsSection.jsx

diff --git a/client/components/BillModal.jsx b/client/components/BillModal.jsx
index 831e873..a918d95 100644
--- a/client/components/BillModal.jsx
+++ b/client/components/BillModal.jsx
@@ -1,5 +1,5 @@
 import { useActionState, useEffect, useState } from 'react';
-import { ChevronDown, Copy, Layers, Link2, Link2Off, Loader2, Pencil, Plus, RefreshCw, Trash2 } from 'lucide-react';
+import { Copy, Layers, Link2, Link2Off, Loader2, Pencil, Plus, RefreshCw, Trash2 } from 'lucide-react';
 import { formatCentsUSD, validateNonNegativeMoney } from '@/lib/money';
 import { toast } from 'sonner';
 import { Button } from '@/components/ui/button';
@@ -19,6 +19,7 @@ import {
 import { api } from '@/api';
 import { cn, fmt, fmtDate, todayStr } from '@/lib/utils';
 import BillMerchantRules from '@/components/BillMerchantRules';
+import DebtDetailsSection from '@/components/bill-modal/DebtDetailsSection';
 import {
   BILLING_SCHEDULE_OPTIONS,
   billingCycleForSchedule,
@@ -802,113 +803,26 @@ export default function BillModal({ bill, initialBill, categories, onClose, onSa
             </div>
 
             {/* Debt / Snowball Details — collapsible */}
-            <div className="col-span-2">
-              <div className="flex items-center gap-3">
-                <div className="h-px flex-1 bg-border/40" />
-                <button
-                  type="button"
-                  onClick={() => setShowDebtSection(s => !s)}
-                  className="flex items-center gap-1.5 text-[11px] uppercase tracking-wider text-muted-foreground hover:text-foreground transition-colors shrink-0"
-                >
-                  <ChevronDown
-                    className={cn('h-3 w-3 transition-transform duration-150', !showDebtSection && '-rotate-90')}
-                  />
-                  Debt / Snowball Details
-                  {isSnowballCategory && (
-                    <span className="text-[9px] text-emerald-400 font-semibold tracking-normal normal-case">
-                      · auto-detected
-                    </span>
-                  )}
-                  {!showOnSnowball && isSnowballCategory && (
-                    <span className="text-[9px] text-amber-400 font-semibold tracking-normal normal-case">
-                      · exempt
-                    </span>
-                  )}
-                </button>
-                <div className="h-px flex-1 bg-border/40" />
-              </div>
-
-              {showDebtSection && (
-                <div className="grid sm:grid-cols-2 gap-x-5 gap-y-4 mt-3 p-3 rounded-xl bg-muted/20 border border-border/30">
-
-                  {/* Interest Rate */}
-                  <div className="space-y-1.5">
-                    <Label className="text-xs uppercase tracking-wider text-muted-foreground">Interest rate (APR %)</Label>
-                    <Input
-                      className={cn(inp, 'font-mono', errors.interestRate && 'border-red-500 focus-visible:ring-red-500')}
-                      type="number" min="0" max="100" step="0.01" placeholder="Optional"
-                      value={interestRate}
-                      onChange={e => {
-                        setInterestRate(e.target.value);
-                        setTimeout(() => setErrors(prev => ({ ...prev, interestRate: validateInterestRate(e.target.value) })), 300);
-                      }}
-                      onBlur={() => handleBlur('interestRate', interestRate, validateInterestRate)}
-                    />
-                    {errors.interestRate && (
-                      <span className="text-[10px] text-red-500 font-medium">{errors.interestRate}</span>
-                    )}
-                    <p className="text-[10px] text-muted-foreground/70">Enter 29.99 for 29.99%.</p>
-                  </div>
-
-                  {/* Current Balance */}
-                  <div className="space-y-1.5">
-                    <Label className="text-xs uppercase tracking-wider text-muted-foreground">Current Balance ($)</Label>
-                    <Input
-                      className={cn(inp, 'font-mono', errors.currentBalance && 'border-red-500 focus-visible:ring-red-500')}
-                      type="number" min="0" step="0.01" placeholder="Optional"
-                      value={currentBalance}
-                      onChange={e => {
-                        setCurrentBalance(e.target.value);
-                        setTimeout(() => setErrors(prev => ({ ...prev, currentBalance: validateCurrentBalance(e.target.value) })), 300);
-                      }}
-                      onBlur={() => handleBlur('currentBalance', currentBalance, validateCurrentBalance)}
-                    />
-                    {errors.currentBalance && (
-                      <span className="text-[10px] text-red-500 font-medium">{errors.currentBalance}</span>
-                    )}
-                    <p className="text-[10px] text-muted-foreground/70">Outstanding debt balance.</p>
-                  </div>
-
-                  {/* Minimum Payment */}
-                  <div className="space-y-1.5">
-                    <Label className="text-xs uppercase tracking-wider text-muted-foreground">Minimum Payment ($)</Label>
-                    <Input
-                      className={cn(inp, 'font-mono', errors.minimumPayment && 'border-red-500 focus-visible:ring-red-500')}
-                      type="number" min="0" step="0.01" placeholder="Optional"
-                      value={minimumPayment}
-                      onChange={e => {
-                        setMinimumPayment(e.target.value);
-                        setTimeout(() => setErrors(prev => ({ ...prev, minimumPayment: validateMinimumPayment(e.target.value) })), 300);
-                      }}
-                      onBlur={() => handleBlur('minimumPayment', minimumPayment, validateMinimumPayment)}
-                    />
-                    {errors.minimumPayment && (
-                      <span className="text-[10px] text-red-500 font-medium">{errors.minimumPayment}</span>
-                    )}
-                    <p className="text-[10px] text-muted-foreground/70">Required minimum monthly payment.</p>
-                  </div>
-
-                  {/* Include in Snowball */}
-                  <div className="flex flex-col justify-end pb-1 space-y-1">
-                    <label className="flex items-center gap-2.5 cursor-pointer group">
-                      <input
-                        type="checkbox"
-                        checked={showOnSnowball}
-                        onChange={e => handleSnowballVisibilityChange(e.target.checked)}
-                        className="h-4 w-4 rounded border-border accent-emerald-500"
-                      />
-                      <span className="text-sm text-muted-foreground group-hover:text-foreground transition-colors">
-                        Show on Debt Snowball
-                      </span>
-                    </label>
-                    <p className="text-[10px] text-muted-foreground/70 pl-6">
-                      Uncheck to exempt an auto-detected snowball bill, or check to include this bill manually.
-                    </p>
-                  </div>
-
-                </div>
-              )}
-            </div>
+            <DebtDetailsSection
+              inp={inp}
+              errors={errors}
+              setErrors={setErrors}
+              showDebtSection={showDebtSection}
+              setShowDebtSection={setShowDebtSection}
+              isSnowballCategory={isSnowballCategory}
+              showOnSnowball={showOnSnowball}
+              interestRate={interestRate}
+              setInterestRate={setInterestRate}
+              currentBalance={currentBalance}
+              setCurrentBalance={setCurrentBalance}
+              minimumPayment={minimumPayment}
+              setMinimumPayment={setMinimumPayment}
+              validateInterestRate={validateInterestRate}
+              validateCurrentBalance={validateCurrentBalance}
+              validateMinimumPayment={validateMinimumPayment}
+              handleBlur={handleBlur}
+              onSnowballVisibilityChange={handleSnowballVisibilityChange}
+            />
 
             {/* Website */}
             <div className="space-y-1.5">
diff --git a/client/components/bill-modal/DebtDetailsSection.jsx b/client/components/bill-modal/DebtDetailsSection.jsx
new file mode 100644
index 0000000..ccf89ac
--- /dev/null
+++ b/client/components/bill-modal/DebtDetailsSection.jsx
@@ -0,0 +1,130 @@
+import { ChevronDown } from 'lucide-react';
+import { cn } from '@/lib/utils';
+import { Label } from '@/components/ui/label';
+import { Input } from '@/components/ui/input';
+
+// Collapsible Debt / Snowball fields (interest rate, current balance, minimum
+// payment, snowball visibility). State lives in the parent BillModal (the save
+// action reads these values); this is a presentational extraction.
+export default function DebtDetailsSection({
+  inp,
+  errors, setErrors,
+  showDebtSection, setShowDebtSection,
+  isSnowballCategory, showOnSnowball,
+  interestRate, setInterestRate,
+  currentBalance, setCurrentBalance,
+  minimumPayment, setMinimumPayment,
+  validateInterestRate, validateCurrentBalance, validateMinimumPayment,
+  handleBlur,
+  onSnowballVisibilityChange,
+}) {
+  return (
+    <div className="col-span-2">
+      <div className="flex items-center gap-3">
+        <div className="h-px flex-1 bg-border/40" />
+        <button
+          type="button"
+          onClick={() => setShowDebtSection(s => !s)}
+          className="flex items-center gap-1.5 text-[11px] uppercase tracking-wider text-muted-foreground hover:text-foreground transition-colors shrink-0"
+        >
+          <ChevronDown
+            className={cn('h-3 w-3 transition-transform duration-150', !showDebtSection && '-rotate-90')}
+          />
+          Debt / Snowball Details
+          {isSnowballCategory && (
+            <span className="text-[9px] text-emerald-400 font-semibold tracking-normal normal-case">
+              · auto-detected
+            </span>
+          )}
+          {!showOnSnowball && isSnowballCategory && (
+            <span className="text-[9px] text-amber-400 font-semibold tracking-normal normal-case">
+              · exempt
+            </span>
+          )}
+        </button>
+        <div className="h-px flex-1 bg-border/40" />
+      </div>
+
+      {showDebtSection && (
+        <div className="grid sm:grid-cols-2 gap-x-5 gap-y-4 mt-3 p-3 rounded-xl bg-muted/20 border border-border/30">
+
+          {/* Interest Rate */}
+          <div className="space-y-1.5">
+            <Label className="text-xs uppercase tracking-wider text-muted-foreground">Interest rate (APR %)</Label>
+            <Input
+              className={cn(inp, 'font-mono', errors.interestRate && 'border-red-500 focus-visible:ring-red-500')}
+              type="number" min="0" max="100" step="0.01" placeholder="Optional"
+              value={interestRate}
+              onChange={e => {
+                setInterestRate(e.target.value);
+                setTimeout(() => setErrors(prev => ({ ...prev, interestRate: validateInterestRate(e.target.value) })), 300);
+              }}
+              onBlur={() => handleBlur('interestRate', interestRate, validateInterestRate)}
+            />
+            {errors.interestRate && (
+              <span className="text-[10px] text-red-500 font-medium">{errors.interestRate}</span>
+            )}
+            <p className="text-[10px] text-muted-foreground/70">Enter 29.99 for 29.99%.</p>
+          </div>
+
+          {/* Current Balance */}
+          <div className="space-y-1.5">
+            <Label className="text-xs uppercase tracking-wider text-muted-foreground">Current Balance ($)</Label>
+            <Input
+              className={cn(inp, 'font-mono', errors.currentBalance && 'border-red-500 focus-visible:ring-red-500')}
+              type="number" min="0" step="0.01" placeholder="Optional"
+              value={currentBalance}
+              onChange={e => {
+                setCurrentBalance(e.target.value);
+                setTimeout(() => setErrors(prev => ({ ...prev, currentBalance: validateCurrentBalance(e.target.value) })), 300);
+              }}
+              onBlur={() => handleBlur('currentBalance', currentBalance, validateCurrentBalance)}
+            />
+            {errors.currentBalance && (
+              <span className="text-[10px] text-red-500 font-medium">{errors.currentBalance}</span>
+            )}
+            <p className="text-[10px] text-muted-foreground/70">Outstanding debt balance.</p>
+          </div>
+
+          {/* Minimum Payment */}
+          <div className="space-y-1.5">
+            <Label className="text-xs uppercase tracking-wider text-muted-foreground">Minimum Payment ($)</Label>
+            <Input
+              className={cn(inp, 'font-mono', errors.minimumPayment && 'border-red-500 focus-visible:ring-red-500')}
+              type="number" min="0" step="0.01" placeholder="Optional"
+              value={minimumPayment}
+              onChange={e => {
+                setMinimumPayment(e.target.value);
+                setTimeout(() => setErrors(prev => ({ ...prev, minimumPayment: validateMinimumPayment(e.target.value) })), 300);
+              }}
+              onBlur={() => handleBlur('minimumPayment', minimumPayment, validateMinimumPayment)}
+            />
+            {errors.minimumPayment && (
+              <span className="text-[10px] text-red-500 font-medium">{errors.minimumPayment}</span>
+            )}
+            <p className="text-[10px] text-muted-foreground/70">Required minimum monthly payment.</p>
+          </div>
+
+          {/* Include in Snowball */}
+          <div className="flex flex-col justify-end pb-1 space-y-1">
+            <label className="flex items-center gap-2.5 cursor-pointer group">
+              <input
+                type="checkbox"
+                checked={showOnSnowball}
+                onChange={e => onSnowballVisibilityChange(e.target.checked)}
+                className="h-4 w-4 rounded border-border accent-emerald-500"
+              />
+              <span className="text-sm text-muted-foreground group-hover:text-foreground transition-colors">
+                Show on Debt Snowball
+              </span>
+            </label>
+            <p className="text-[10px] text-muted-foreground/70 pl-6">
+              Uncheck to exempt an auto-detected snowball bill, or check to include this bill manually.
+            </p>
+          </div>
+
+        </div>
+      )}
+    </div>
+  );
+}