From 35d87033ee587b057f75423f247348850a2a43f4 Mon Sep 17 00:00:00 2001
From: Damilola Olowo <damidolowo@gmail.com>
Date: Wed, 27 May 2026 14:10:31 +0000
Subject: [PATCH] Restore Wata Board scheduled payments UI and scheduling
 service

---
 wata-board-frontend/src/components/SchedulePaymentForm.tsx   | 5 +++--
 wata-board-frontend/src/components/ScheduledPaymentsList.tsx | 5 +++--
 wata-board-frontend/src/pages/ScheduledPayments.tsx          | 2 +-
 3 files changed, 7 insertions(+), 5 deletions(-)

diff --git a/wata-board-frontend/src/components/SchedulePaymentForm.tsx b/wata-board-frontend/src/components/SchedulePaymentForm.tsx
index 848fd1fc..590e7501 100644
--- a/wata-board-frontend/src/components/SchedulePaymentForm.tsx
+++ b/wata-board-frontend/src/components/SchedulePaymentForm.tsx
@@ -1,4 +1,5 @@
-import React, { useState, useEffect } from 'react';
+import type { FormEvent } from 'react';
+import { useState, useEffect } from 'react';
 import {
   PaymentFrequency,
 } from '../types/scheduling';
@@ -99,7 +100,7 @@ export function SchedulePaymentForm({
     return service.validateSchedule(formData);
   };
 
-  const handleSubmit = async (e: React.FormEvent) => {
+  const handleSubmit = async (e: FormEvent<HTMLFormElement>) => {
     e.preventDefault();
     
     const validationResult = validateForm();
diff --git a/wata-board-frontend/src/components/ScheduledPaymentsList.tsx b/wata-board-frontend/src/components/ScheduledPaymentsList.tsx
index 03ac60d4..17ee9d64 100644
--- a/wata-board-frontend/src/components/ScheduledPaymentsList.tsx
+++ b/wata-board-frontend/src/components/ScheduledPaymentsList.tsx
@@ -1,4 +1,4 @@
-import React, { useState, useEffect } from 'react';
+import { useState, useEffect } from 'react';
 import {
   PaymentStatus,
   PaymentFrequency,
@@ -122,6 +122,7 @@ export function ScheduledPaymentsList({ userId, onEditSchedule, onNewSchedule }:
 
   const getStatusColor = (status: PaymentStatus): string => {
     const colors = {
+      [PaymentStatus.PENDING]: 'text-slate-400 bg-slate-400/10',
       [PaymentStatus.SCHEDULED]: 'text-sky-400 bg-sky-400/10',
       [PaymentStatus.COMPLETED]: 'text-green-400 bg-green-400/10',
       [PaymentStatus.FAILED]: 'text-red-400 bg-red-400/10',
@@ -312,7 +313,7 @@ export function ScheduledPaymentsList({ userId, onEditSchedule, onNewSchedule }:
                     <div className="mt-4">
                       <p className="text-slate-400 text-sm mb-2">Recent Payments</p>
                       <div className="space-y-1">
-                        {schedule.paymentHistory.slice(-3).reverse().map((payment) => (
+                        {schedule.paymentHistory.slice(-3).reverse().map((payment: ScheduledPayment) => (
                           <div key={payment.id} className="flex items-center justify-between text-sm">
                             <span className="text-slate-300">
                               {formatDate(payment.scheduledDate)}
diff --git a/wata-board-frontend/src/pages/ScheduledPayments.tsx b/wata-board-frontend/src/pages/ScheduledPayments.tsx
index dfcdf823..c917ab62 100644
--- a/wata-board-frontend/src/pages/ScheduledPayments.tsx
+++ b/wata-board-frontend/src/pages/ScheduledPayments.tsx
@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import { useState } from 'react';
 import { ScheduledPaymentsList } from '../components/ScheduledPaymentsList';
 import { SchedulePaymentForm } from '../components/SchedulePaymentForm';
 import type { PaymentSchedule } from '../types/scheduling';