fix(payouts): prevent crash when preview has zero recipients

Backend: initialise BatchPreview.Lines to []BatchPreviewLine{} so it
serialises as [] not null when no approved recipients exist.

Frontend: guard all p.lines accesses with ?? [] and mark the type as
BatchPreviewLine[] | null so the compiler enforces null-checks going
forward. Fixes 'can't access property length, V.lines is null' crash
on /steward/payouts.

Author: ObeeJ

internal/service/payout.go

@@ -107,7 +107,10 @@ func (s *PayoutService) Preview() (*BatchPreview, error) {
 	}
 
 	weekStart := models.WeekStartOf(time.Now()).AddDate(0, 0, -7)
-	preview := &BatchPreview{WeekStart: weekStart.Format("2006-01-02")}
+	preview := &BatchPreview{
+		WeekStart: weekStart.Format("2006-01-02"),
+		Lines:     []BatchPreviewLine{},
+	}
 
 	for _, r := range recipients {
 		line := BatchPreviewLine{

web/app/src/routes/steward/StewardPayouts.tsx

@@ -18,7 +18,7 @@ type BatchPreviewLine = {
 
 type BatchPreview = {
   weekStart: string
-  lines: BatchPreviewLine[]
+  lines: BatchPreviewLine[] | null
   totalKobo: number
   eligible: number
   skipped: number
@@ -173,7 +173,7 @@ export function StewardPayouts() {
                   <div className="w-16 h-3 rounded bg-[var(--color-cream-2)]" />
                 </div>
               ))
-            : p?.lines.length === 0
+            : (p?.lines ?? []).length === 0
               ? (
                 <div className="px-5 py-8 text-center">
                   <p className="text-[13px] font-medium text-[var(--color-indigo)]">No approved recipients yet</p>
@@ -182,7 +182,7 @@ export function StewardPayouts() {
                   </p>
                 </div>
               )
-              : p?.lines.map((line, i) => {
+              : (p?.lines ?? []).map((line, i) => {
                 const skip = line.skipReason ? SKIP_LABELS[line.skipReason] : null
                 return (
                   <motion.div
@@ -267,7 +267,7 @@ export function StewardPayouts() {
                 <>
                   {!p || preview.isLoading ? (
                     <p className="text-[11px] text-[var(--color-stone)] flex-1">Calculating eligible recipients…</p>
-                  ) : p.lines.length === 0 ? (
+                  ) : (p.lines ?? []).length === 0 ? (
                     <p className="text-[11px] text-[var(--color-stone)] flex-1">
                       No recipients to pay out yet. Approve applications on the{' '}
                       <Link to="/steward" className="underline underline-offset-2 text-[var(--color-indigo)]">Queue</Link>{' '}