Fix create-business owner grid and edit renewal date.

Use title/first/last as 3-4-5, repair formFull spans, and fall back renewal to created date.

Co-authored-by: Cursor <cursoragent@cursor.com>

apps/super-admin/src/pages/BusinessesPage.module.css

@@ -739,10 +739,18 @@
   grid-column: span 2 !important;
 }
 
+.formCol3 {
+  grid-column: span 3 !important;
+}
+
 .formCol4 {
   grid-column: span 4 !important;
 }
 
+.formCol5 {
+  grid-column: span 5 !important;
+}
+
 .formCol8 {
   grid-column: span 8 !important;
 }
@@ -755,8 +763,8 @@
   color: var(--text-secondary);
 }
 
-.formFull {
-  grid-column: 1 / -1;
+.formGrid > .formFull {
+  grid-column: 1 / -1 !important;
 }
 
 .field textarea {
@@ -867,7 +875,9 @@
 
   .formGrid > .field,
   .formCol2,
+  .formCol3,
   .formCol4,
+  .formCol5,
   .formCol8 {
     grid-column: 1 / -1 !important;
   }

apps/super-admin/src/pages/BusinessesPage.tsx

@@ -125,6 +125,16 @@ function nextAnnualRenewal(contractAt: string, now = new Date()) {
   return { next, year: next.getFullYear(), daysRemaining }
 }
 
+function toDateInputValue(iso: string | null | undefined): string {
+  if (!iso) return ''
+  const d = new Date(iso)
+  if (Number.isNaN(d.getTime())) return ''
+  const y = d.getFullYear()
+  const m = String(d.getMonth() + 1).padStart(2, '0')
+  const day = String(d.getDate()).padStart(2, '0')
+  return `${y}-${m}-${day}`
+}
+
 function renewalTone(daysRemaining: number): 'ok' | 'warn' | 'danger' {
   const months = daysRemaining / 30.437
   if (months > 8) return 'ok'
@@ -132,11 +142,15 @@ function renewalTone(daysRemaining: number): 'ok' | 'warn' | 'danger' {
   return 'danger'
 }
 
-function formatRenewalCell(annualRenewalAt: string | null) {
-  if (!annualRenewalAt) {
+function formatRenewalCell(
+  annualRenewalAt: string | null,
+  createdAt?: string | null,
+) {
+  const contractAt = annualRenewalAt || createdAt || null
+  if (!contractAt) {
     return { yearLabel: '—', daysLabel: null as string | null, tone: null as 'ok' | 'warn' | 'danger' | null }
   }
-  const next = nextAnnualRenewal(annualRenewalAt)
+  const next = nextAnnualRenewal(contractAt)
   if (!next) {
     return { yearLabel: '—', daysLabel: null, tone: null }
   }
@@ -283,6 +297,7 @@ export function BusinessesPage() {
   const [editName, setEditName] = useState('')
   const [editNameFa, setEditNameFa] = useState('')
   const [editAbout, setEditAbout] = useState('')
+  const [editAnnualRenewalAt, setEditAnnualRenewalAt] = useState('')
   const [editSubmitting, setEditSubmitting] = useState(false)
   const [editError, setEditError] = useState('')
 
@@ -444,6 +459,9 @@ export function BusinessesPage() {
     setEditName(b.name)
     setEditNameFa(b.nameFa ?? '')
     setEditAbout(b.about ?? '')
+    setEditAnnualRenewalAt(
+      toDateInputValue(b.annualRenewalAt || b.createdAt),
+    )
     setEditError('')
     setEditOpen(true)
   }
@@ -650,11 +668,17 @@ export function BusinessesPage() {
 
     setEditSubmitting(true)
     setEditError('')
+    const annualRenewalAt = editAnnualRenewalAt
+      ? new Date(editAnnualRenewalAt).toISOString()
+      : editBusiness.createdAt
+        ? new Date(editBusiness.createdAt).toISOString()
+        : null
     try {
       await updateBusiness(editBusiness.id, {
         name,
         nameFa,
         about: editAbout.trim(),
+        annualRenewalAt,
       })
       setData((prev) => {
         if (!prev) return prev
@@ -667,6 +691,7 @@ export function BusinessesPage() {
                   name,
                   nameFa,
                   about: editAbout.trim() || null,
+                  annualRenewalAt,
                 }
               : item,
           ),
@@ -1020,7 +1045,7 @@ export function BusinessesPage() {
     setCreateNameFa('')
     setCreateAbout('')
     setCreateCategoryIds([])
-    setCreateAnnualRenewalAt('')
+    setCreateAnnualRenewalAt(toDateInputValue(new Date().toISOString()))
     setCreateOwnerTitleId('')
     setCreateOwnerFirstName('')
     setCreateOwnerLastName('')
@@ -1260,7 +1285,10 @@ export function BusinessesPage() {
 
                 {!loading &&
                   data?.items?.map((b) => {
-                    const renewal = formatRenewalCell(b.annualRenewalAt ?? null)
+                    const renewal = formatRenewalCell(
+                      b.annualRenewalAt ?? null,
+                      b.createdAt,
+                    )
                     return (
                     <tr key={b.id}>
                       <td className={styles.td}>{b.name}</td>
@@ -1502,6 +1530,16 @@ export function BusinessesPage() {
             disabled={editSubmitting}
           />
         </div>
+        <div className={styles.field}>
+          <label htmlFor="edit-annual-renewal">Annual renewal</label>
+          <input
+            id="edit-annual-renewal"
+            type="date"
+            value={editAnnualRenewalAt}
+            onChange={(e) => setEditAnnualRenewalAt(e.target.value)}
+            disabled={editSubmitting}
+          />
+        </div>
         <div className={styles.field}>
           <label htmlFor="edit-about">About business</label>
           <textarea
@@ -2052,7 +2090,7 @@ export function BusinessesPage() {
             <div className={styles.sectionLabel}>Owner</div>
           </div>
 
-          <div className={`${styles.field} ${styles.formCol2}`}>
+          <div className={`${styles.field} ${styles.formCol3}`}>
             <label htmlFor="create-owner-title">Title</label>
             <select
               id="create-owner-title"
@@ -2080,7 +2118,7 @@ export function BusinessesPage() {
             />
           </div>
 
-          <div className={`${styles.field} ${styles.formCol4}`}>
+          <div className={`${styles.field} ${styles.formCol5}`}>
             <label htmlFor="create-owner-last-name-en">Last name (EN)</label>
             <input
               id="create-owner-last-name-en"
@@ -2091,9 +2129,7 @@ export function BusinessesPage() {
             />
           </div>
 
-          <div className={`${styles.field} ${styles.formCol2}`} aria-hidden="true" />
-
-          <div className={`${styles.field} ${styles.formCol4}`}>
+          <div className={styles.field}>
             <label htmlFor="create-owner-first-name">First name (FA)</label>
             <input
               id="create-owner-first-name"
@@ -2107,7 +2143,7 @@ export function BusinessesPage() {
             />
           </div>
 
-          <div className={`${styles.field} ${styles.formCol4}`}>
+          <div className={styles.field}>
             <label htmlFor="create-owner-last-name">Last name (FA)</label>
             <input
               id="create-owner-last-name"
@@ -2121,7 +2157,7 @@ export function BusinessesPage() {
             />
           </div>
 
-          <div className={`${styles.field} ${styles.formFull}`}>
+          <div className={styles.field}>
             <label htmlFor="create-owner-cell">Cell number</label>
             <input
               id="create-owner-cell"
@@ -2134,7 +2170,7 @@ export function BusinessesPage() {
             />
           </div>
 
-          <div className={`${styles.field} ${styles.formFull}`}>
+          <div className={styles.field}>
             <label htmlFor="create-owner-password">Password</label>
             <input
               id="create-owner-password"