Design: create light mode activity center page

components/mobile/MobileFooter.tsx

@@ -1,7 +1,7 @@
-'use client'
+'use client';
 
-import React from 'react'
-import Link from 'next/link'
+import React from 'react';
+import Link from 'next/link';
 
 // Navigation links data
 const footerLinks = [
@@ -13,30 +13,30 @@ const footerLinks = [
   { label: 'Terms of Service', href: '/terms' },
   { label: 'Contact', href: '/contact' },
   { label: 'FAQs', href: '/faq' },
-]
+];
 
 // Social icons data
 const socialLinks = [
   { label: 'Twitter', href: 'https://twitter.com/swiftchain', icon: '🐦' },
   { label: 'GitHub', href: 'https://github.com/swiftchain', icon: '🐙' },
   { label: 'LinkedIn', href: 'https://linkedin.com/company/swiftchain', icon: '🔗' },
   { label: 'Discord', href: 'https://discord.gg/swiftchain', icon: '💬' },
-]
+];
 
 export function MobileFooter() {
-  const currentYear = new Date().getFullYear()
+  const currentYear = new Date().getFullYear();
 
   return (
     <footer className="border-t border-gray-200 bg-white px-4 py-8 dark:border-gray-800 dark:bg-gray-950">
       <div className="mx-auto max-w-md">
-        {/* Navigation links - 2x2 grid on mobile */}
+        {/* Navigation links - 2x4 grid on mobile */}
         <nav className="mb-6 grid grid-cols-2 gap-2" aria-label="Footer navigation">
           {footerLinks.map((link) => (
             <Link
               key={link.href}
               href={link.href}
               className="rounded-lg px-3 py-2.5 text-sm text-gray-600 transition-colors hover:bg-gray-100 hover:text-gray-900 active:bg-gray-200 dark:text-gray-400 dark:hover:bg-gray-800 dark:hover:text-gray-100 dark:active:bg-gray-700"
-              style={{ minHeight: '44px' }}
+              style={{ minHeight: 44 }}
             >
               {link.label}
             </Link>
@@ -53,7 +53,7 @@ export function MobileFooter() {
               rel="noopener noreferrer"
               className="flex h-11 w-11 items-center justify-center rounded-full text-xl transition-colors hover:bg-gray-100 hover:text-gray-900 dark:hover:bg-gray-800 dark:hover:text-gray-100"
               aria-label={social.label}
-              style={{ minHeight: '44px', minWidth: '44px' }}
+              style={{ minHeight: 44, minWidth: 44 }}
             >
               <span className="sr-only">{social.label}</span>
               <span role="img" aria-hidden="true">
@@ -69,7 +69,7 @@ export function MobileFooter() {
         </p>
       </div>
     </footer>
-  )
+  );
 }
 
-export default MobileFooter
+export default MobileFooter;

components/providers/ToastProvider.tsx

@@ -118,7 +118,8 @@ export default function ToastProvider({
    * Handle toast display based on configuration
    */
   const handleToast = (config: ToastConfig): void => {
-    const { variant, message, description, duration, action } = config;
+    const { variant, description, duration, action } = config;
+    const message = config.message ?? config.title ?? '';
 
     switch (variant) {
       case 'success':

hooks/useCreateDelivery.ts

@@ -82,7 +82,7 @@ export function useCreateDelivery(): UseCreateDeliveryReturn {
 
   return {
     form,
-    isSubmitting: createDelivery.isLoading,
+    isSubmitting: createDelivery.isPending,
     isSuccess: createDelivery.isSuccess,
     onSubmit,
   };

hooks/useDisputeForm.ts

@@ -96,13 +96,6 @@ export function useDisputeForm(): UseDisputeFormReturn {
 
         const response = await escrowService.openDispute(params);
 
-        if (!response.success) {
-          const errorMessage = response.message ?? 'Failed to open dispute. Please try again.';
-          toast.error(errorMessage);
-          onError?.(errorMessage);
-          return;
-        }
-
         toast.success(
           `Dispute opened successfully! Dispute ID: ${response.disputeId}`
         );

hooks/useEscrowLock.ts

@@ -5,6 +5,7 @@ import { escrowService, LockEscrowParams } from '@/services/escrowService';
 
 interface UseEscrowLockState {
   isLoading: boolean;
+  isSuccess: boolean;
   error: string | null;
   escrowId: string | null;
   transactionHash: string | null;
@@ -17,18 +18,20 @@ interface UseEscrowLockState {
 export function useEscrowLock() {
   const [state, setState] = useState<UseEscrowLockState>({
     isLoading: false,
+    isSuccess: false,
     error: null,
     escrowId: null,
     transactionHash: null,
   });
 
   const lockEscrow = useCallback(async (params: LockEscrowParams) => {
-    setState({ isLoading: true, error: null, escrowId: null, transactionHash: null });
+    setState({ isLoading: true, isSuccess: false, error: null, escrowId: null, transactionHash: null });
 
     try {
       const response = await escrowService.lockEscrow(params);
       setState({
         isLoading: false,
+        isSuccess: true,
         error: null,
         escrowId: response.escrowId,
         transactionHash: response.transactionHash,
@@ -38,6 +41,7 @@ export function useEscrowLock() {
       const errorMessage = err instanceof Error ? err.message : 'Failed to lock escrow';
       setState({
         isLoading: false,
+        isSuccess: false,
         error: errorMessage,
         escrowId: null,
         transactionHash: null,
@@ -47,7 +51,7 @@ export function useEscrowLock() {
   }, []);
 
   const reset = useCallback(() => {
-    setState({ isLoading: false, error: null, escrowId: null, transactionHash: null });
+    setState({ isLoading: false, isSuccess: false, error: null, escrowId: null, transactionHash: null });
   }, []);
 
   return {

hooks/useEscrowRelease.ts

@@ -1,6 +1,7 @@
 import { useState, useCallback } from 'react';
 import { toast } from 'sonner';
-import { escrowService, EscrowDetails } from '@/services/escrowService';
+import { escrowService } from '@/services/escrowService';
+import type { EscrowDetails } from '@/types/escrow';
 
 export type ReleaseStep = 'idle' | 'confirming' | 'signing' | 'releasing' | 'done';
 
@@ -33,12 +34,8 @@ export function useEscrowRelease(): UseEscrowReleaseReturn {
   const fetchEscrowDetails = useCallback(async (escrowId: string) => {
     setIsLoading(true);
     try {
-      const response = await escrowService.getEscrowDetails(escrowId);
-      if (response.success && response.data) {
-        setEscrowDetails(response.data);
-      } else {
-        toast.error(response.message ?? 'Failed to load escrow details.');
-      }
+      const details = await escrowService.getEscrowDetails(escrowId);
+      setEscrowDetails(details);
     } catch {
       toast.error('Unable to fetch escrow details. Please try again.');
     } finally {
@@ -82,7 +79,7 @@ export function useEscrowRelease(): UseEscrowReleaseReturn {
             : 'Payment released successfully!'
         );
         setEscrowDetails((prev) =>
-          prev ? { ...prev, status: 'released' as const } : prev
+          prev ? { ...prev, isReleased: true } : prev
         );
       } catch (err: unknown) {
         setStep('idle');

hooks/useHandoffQR.ts

@@ -1,7 +1,7 @@
 import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
-import { shipmentHandoffService } from '../services/shipmentHandoffService';
-import { HandoffQRData } from '../types/shipment';
-import { useToast } from './useToast';
+import { shipmentHandoffService } from '@/services/shipmentHandoffService';
+import type { HandoffQRData } from '@/types/shipment';
+import { useToast } from '@/hooks/useToast';
 
 export function useHandoffQR(deliveryId: string, enabled: boolean = true) {
   return useQuery<HandoffQRData, Error>({
@@ -16,7 +16,7 @@ export function useHandoffQR(deliveryId: string, enabled: boolean = true) {
 
 export function useGenerateHandoffQR() {
   const queryClient = useQueryClient();
-  const { success, error: showError } = useToast();
+  const { toast } = useToast();
 
   return useMutation({
     mutationFn: (deliveryId: string) =>
@@ -26,17 +26,18 @@ export function useGenerateHandoffQR() {
       queryClient.invalidateQueries({
         queryKey: ['handoffQR', data.deliveryId],
       });
-      success?.('QR code generated successfully');
+      toast({ variant: 'success', message: 'QR code generated successfully' });
     },
-    onError: () => {
-      showError?.('Failed to generate QR code');
+    onError: (error) => {
+      toast({ variant: 'error', message: 'Failed to generate QR code' });
+      console.error('QR generation error:', error);
     },
   });
 }
 
 export function useVerifyHandoffQR() {
   const queryClient = useQueryClient();
-  const { success, error: showError } = useToast();
+  const { toast } = useToast();
 
   return useMutation({
     mutationFn: ({ deliveryId, token }: { deliveryId: string; token: string }) =>
@@ -49,10 +50,11 @@ export function useVerifyHandoffQR() {
       queryClient.invalidateQueries({
         queryKey: ['delivery', data.id],
       });
-      success?.('Handoff verified successfully!');
+      toast({ variant: 'success', message: 'Handoff verified successfully!' });
     },
-    onError: () => {
-      showError?.('Failed to verify handoff');
+    onError: (error) => {
+      toast({ variant: 'error', message: 'Failed to verify handoff' });
+      console.error('Handoff verification error:', error);
     },
   });
 }

hooks/useQrScanner.ts

@@ -1,12 +1,13 @@
 import { useState, useEffect, useRef, useCallback } from 'react';
 import { useMutation } from '@tanstack/react-query';
-import { qrScannerService } from '../services/qrScannerService';
+import { qrScannerService } from '@/services/qrScannerService';
 
 interface QrScannerHookResult {
   error: string | null;
   videoRef: React.RefObject<HTMLVideoElement | null>;
   isCameraActive: boolean;
-  verifyMutation: ReturnType<typeof useMutation>;
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  verifyMutation: ReturnType<typeof useMutation<any, Error, string>>;
   startCamera: () => Promise<void>;
   stopCamera: () => void;
 

hooks/useToast.ts

@@ -104,20 +104,22 @@ export function useToast(): UseToastReturn {
   }, []);
 
   const showToast = useCallback((config: ToastConfig) => {
-    const { message, description, variant, duration } = config;
+    const { title, message, description, variant = 'default', duration } = config;
+    // Support both `title` (component API) and `message` (service API)
+    const text = title ?? message ?? '';
     switch (variant) {
       case 'error':
-        toastService.error(message, description, duration);
+        toastService.error(text, description, duration);
         break;
       case 'loading':
-        toastService.loading(message, description);
+        toastService.loading(text, description);
         break;
       case 'success':
-        toastService.success(message, description, duration);
+        toastService.success(text, description, duration);
         break;
       case 'info':
       default:
-        toastService.info(message, description, duration);
+        toastService.info(text, description, duration);
         break;
     }
   }, []);

hooks/useTxTracker.ts

@@ -36,7 +36,7 @@ export function useTxTracker(transactionHash: string | null) {
       }
 
       // Active polling: increase interval over time (exponential backoff)
-      const pollCount = (query.state.dataUpdatedAt - query.state.dataUndefinedAt) / POLL_INTERVAL;
+      const pollCount = Math.floor((Date.now() - query.state.dataUpdatedAt) / POLL_INTERVAL);
       const interval = Math.min(POLL_INTERVAL * Math.pow(1.5, Math.floor(pollCount / 3)), MAX_POLL_INTERVAL);
       return interval;
     },

lib/toast.ts

@@ -11,14 +11,17 @@ const API_BASE_URL = process.env.NEXT_PUBLIC_API_URL ?? '';
 /**
  * Toast variant types
  */
-export type ToastVariant = 'success' | 'error' | 'info' | 'loading';
+export type ToastVariant = 'success' | 'error' | 'info' | 'loading' | 'default' | 'destructive';
 
 /**
  * Toast configuration from backend
  */
 export interface ToastConfig {
-  variant: ToastVariant;
-  message: string;
+  /** Short title shown in bold (alias for message when message is omitted) */
+  title?: string;
+  variant?: ToastVariant;
+  /** Main message body */
+  message?: string;
   duration?: number;
   description?: string;
   action?: {

next-env.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="next" />
 /// <reference types="next/image-types/global" />
-import "./.next/dev/types/routes.d.ts";
+import "./.next/types/routes.d.ts";
 
 // NOTE: This file should not be edited
 // see https://nextjs.org/docs/app/api-reference/config/typescript for more information.

services/deliveries.service.ts

@@ -40,5 +40,10 @@ export const deliveriesService = {
   createDelivery: async (payload: CreateDeliveryPayload): Promise<Delivery> => {
     const { data } = await apiClient.post<Delivery>('/deliveries', payload);
     return data;
-  }
+  },
+
+  getStatusTimeline: async (deliveryId: string): Promise<import('../types/delivery').StatusTimeline> => {
+    const { data } = await apiClient.get<import('../types/delivery').StatusTimeline>(`/deliveries/${deliveryId}/timeline`);
+    return data;
+  },
 };