From 6939115f6cb4122da801eddf2bd8281a987059ca Mon Sep 17 00:00:00 2001
From: Thomas Joise <thomas.joise@tecnostac.com>
Date: Sun, 19 Jul 2026 19:00:40 +0530
Subject: [PATCH] fix(ui): pager alignment, one-line billing kinds, Fields
 explanation
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Table pagers (Modules roster, Client 360 tickets) used an unstyled .wf-pager so the
  summary text and Prev/Next butted together. Add .wf-pager flex styling: summary on the
  left, Prev/page/Next pushed to the right end.
- Module Details: 'Billing kinds' label + checkboxes now on one line (was stacked).
- Module Fields: add a plain-language explainer — what the fields are (with an SMS
  example) and WHERE they show up (each client's Modules tab + Catalog → Module data).

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
---
 apps/hq-web/src/app.css           |  4 ++++
 apps/hq-web/src/pages/Modules.tsx | 25 ++++++++++++++++---------
 2 files changed, 20 insertions(+), 9 deletions(-)

diff --git a/apps/hq-web/src/app.css b/apps/hq-web/src/app.css
index 26ac478..18ce189 100644
--- a/apps/hq-web/src/app.css
+++ b/apps/hq-web/src/app.css
@@ -149,6 +149,10 @@
 .dash-seg button { border: none; background: none; cursor: pointer; font: 600 12.5px var(--font); color: var(--text-dim); padding: 5px 14px; border-radius: 999px; }
 .dash-seg button.on { background: var(--bg-raised); color: var(--text); box-shadow: var(--shadow-md); }
 
+/* Table pager: summary text on the left, Prev / page / Next grouped at the right end. */
+.wf-pager { display: flex; align-items: center; gap: 10px; margin-top: 10px; flex-wrap: wrap; font-size: 13px; color: var(--text-dim); }
+.wf-pager > span:first-child { margin-right: auto; }
+
 /* Section header shared by the queue block and the bento cards */
 .dash-head { display: flex; align-items: center; gap: 10px; padding: 2px 0 10px; }
 .dash-head h3 { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.07em; color: var(--text-dim); margin: 0; }
diff --git a/apps/hq-web/src/pages/Modules.tsx b/apps/hq-web/src/pages/Modules.tsx
index b8fee61..f5c0907 100644
--- a/apps/hq-web/src/pages/Modules.tsx
+++ b/apps/hq-web/src/pages/Modules.tsx
@@ -386,15 +386,13 @@ function ModuleDetails(props: { module: Module; isOwner: boolean; onSaved: () =>
           <Field label="Name"><input className="wf" style={{ width: 260 }} value={name} onChange={(e) => setName(e.target.value)} /></Field>
           <Field label="SAC"><input className="wf mono" style={{ width: 120 }} value={sac} onChange={(e) => setSac(e.target.value)} /></Field>
         </div>
-        <div style={{ marginTop: 12 }}>
-          <div style={{ fontSize: 12, opacity: 0.7, marginBottom: 4 }}>Billing kinds</div>
-          <div style={{ display: 'flex', gap: 14, flexWrap: 'wrap' }}>
-            {ALL_KINDS.map((k) => (
-              <label key={k} style={{ display: 'inline-flex', gap: 6, alignItems: 'center' }}>
-                <input type="checkbox" checked={kinds.includes(k)} onChange={() => toggleKind(k)} /> {KIND_LABEL[k]}
-              </label>
-            ))}
-          </div>
+        <div style={{ display: 'flex', gap: 14, alignItems: 'center', flexWrap: 'wrap', marginTop: 12 }}>
+          <span style={{ fontSize: 12, opacity: 0.7 }}>Billing kinds:</span>
+          {ALL_KINDS.map((k) => (
+            <label key={k} style={{ display: 'inline-flex', gap: 6, alignItems: 'center' }}>
+              <input type="checkbox" checked={kinds.includes(k)} onChange={() => toggleKind(k)} /> {KIND_LABEL[k]}
+            </label>
+          ))}
         </div>
         <div style={{ display: 'flex', gap: 20, marginTop: 12 }}>
           <label style={{ display: 'inline-flex', gap: 6, alignItems: 'center' }}><input type="checkbox" checked={multi} onChange={(e) => setMulti(e.target.checked)} /> Multi-subscription</label>
@@ -545,6 +543,15 @@ function FieldSpecEditor(props: { module: Module; isOwner: boolean; onSaved: ()
     <>
       <h3 style={{ marginTop: 20 }}>Fields <span style={{ fontWeight: 400, fontSize: 13, opacity: 0.65 }}>— the details you record for each client on this module</span></h3>
 
+      <div className="wf-card" style={{ padding: '10px 14px', marginBottom: 10, fontSize: 13, color: 'var(--text-dim)', lineHeight: 1.5 }}>
+        <strong style={{ color: 'var(--text)' }}>What are these?</strong> The pieces of information you keep for every client on
+        the <strong>{props.module.name}</strong> module — e.g. for SMS: username, SMS balance, provider.
+        Define a field once here and it appears everywhere for that module, no developer needed.
+        <br />
+        <strong style={{ color: 'var(--text)' }}>Where do they show up?</strong> On each client’s page → <em>Modules</em> tab
+        (fill them in per client), and side-by-side for all clients under <em>Catalog → Module data</em>.
+      </div>
+
       {fields.length === 0 ? (
         <EmptyState>No fields yet{props.isOwner ? ' — add the first with the button below.' : '.'}</EmptyState>
       ) : (