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

The save-as-template toggle + name input move to their own presentational
component. Behavior-preserving — BillModal 1105 -> 1090 lines.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
---
 client/components/BillModal.jsx               | 33 +++++-----------
 .../components/bill-modal/TemplateSection.jsx | 38 +++++++++++++++++++
 2 files changed, 47 insertions(+), 24 deletions(-)
 create mode 100644 client/components/bill-modal/TemplateSection.jsx

diff --git a/client/components/BillModal.jsx b/client/components/BillModal.jsx
index a5d66d9..808568d 100644
--- a/client/components/BillModal.jsx
+++ b/client/components/BillModal.jsx
@@ -23,6 +23,7 @@ import PaymentHistoryList from '@/components/bill-modal/PaymentHistoryList';
 import PaymentFormFields from '@/components/bill-modal/PaymentFormFields';
 import UnmatchDialogs from '@/components/bill-modal/UnmatchDialogs';
 import LinkedTransactionsSection from '@/components/bill-modal/LinkedTransactionsSection';
+import TemplateSection from '@/components/bill-modal/TemplateSection';
 import { transactionTitle, isSimilarPayee } from '@/components/bill-modal/transactionDisplay';
 import {
   BILLING_SCHEDULE_OPTIONS,
@@ -916,30 +917,14 @@ export default function BillModal({ bill, initialBill, categories, onClose, onSa
               />
             </div>
 
-            <div className="col-span-2 rounded-lg border border-border/60 bg-muted/20 p-3">
-              <label className="flex items-center gap-2.5 cursor-pointer group">
-                <input
-                  type="checkbox"
-                  checked={saveTemplate}
-                  onChange={e => setSaveTemplate(e.target.checked)}
-                  className="h-4 w-4 rounded border-border accent-primary"
-                />
-                <span className="text-sm text-muted-foreground group-hover:text-foreground transition-colors">
-                  Save this setup as a reusable template
-                </span>
-              </label>
-              {saveTemplate && (
-                <div className="mt-2 space-y-1.5">
-                  <Label className="text-xs uppercase tracking-wider text-muted-foreground">Template Name</Label>
-                  <Input
-                    className={inp}
-                    value={templateName}
-                    onChange={e => setTemplateName(e.target.value)}
-                    placeholder={name || 'My bill template'}
-                  />
-                </div>
-              )}
-            </div>
+            <TemplateSection
+              inp={inp}
+              saveTemplate={saveTemplate}
+              setSaveTemplate={setSaveTemplate}
+              templateName={templateName}
+              setTemplateName={setTemplateName}
+              namePlaceholder={name}
+            />
 
           </div>
         </form>
diff --git a/client/components/bill-modal/TemplateSection.jsx b/client/components/bill-modal/TemplateSection.jsx
new file mode 100644
index 0000000..af36b5b
--- /dev/null
+++ b/client/components/bill-modal/TemplateSection.jsx
@@ -0,0 +1,38 @@
+import { Label } from '@/components/ui/label';
+import { Input } from '@/components/ui/input';
+
+// "Save this setup as a reusable template" toggle + optional template name.
+// Presentational — the parent owns the state and performs the save.
+export default function TemplateSection({
+  inp,
+  saveTemplate, setSaveTemplate,
+  templateName, setTemplateName,
+  namePlaceholder,
+}) {
+  return (
+    <div className="col-span-2 rounded-lg border border-border/60 bg-muted/20 p-3">
+      <label className="flex items-center gap-2.5 cursor-pointer group">
+        <input
+          type="checkbox"
+          checked={saveTemplate}
+          onChange={e => setSaveTemplate(e.target.checked)}
+          className="h-4 w-4 rounded border-border accent-primary"
+        />
+        <span className="text-sm text-muted-foreground group-hover:text-foreground transition-colors">
+          Save this setup as a reusable template
+        </span>
+      </label>
+      {saveTemplate && (
+        <div className="mt-2 space-y-1.5">
+          <Label className="text-xs uppercase tracking-wider text-muted-foreground">Template Name</Label>
+          <Input
+            className={inp}
+            value={templateName}
+            onChange={e => setTemplateName(e.target.value)}
+            placeholder={namePlaceholder || 'My bill template'}
+          />
+        </div>
+      )}
+    </div>
+  );
+}