fsees

Author: samad13

components/escrow/DisputeForm.tsx

@@ -204,7 +204,7 @@ export default function DisputeForm({
   walletAddress,
   onSuccess,
   onError,
-}: DisputeFormProps): ReactElement {
+}: DisputeFormProps): ReactElement | null {
   const {
     register,
     handleSubmit,

components/shared/FileUpload.tsx

@@ -1,7 +1,14 @@
 'use client';
 
 import { useFileUpload } from '@/hooks/useFileUpload';
-import { Upload, X, CheckCircle2, AlertCircle, File, Image } from 'lucide-react';
+import {
+  Upload,
+  X,
+  CheckCircle2,
+  AlertCircle,
+  File,
+  Image,
+} from 'lucide-react';
 import { useCallback, useState } from 'react';
 
 interface FileUploadProps {
@@ -35,8 +42,15 @@ export function FileUpload({
   title = 'Upload Documents',
   description = 'Drag and drop your files here or click to browse',
 }: FileUploadProps) {
-  const { files, isUploading, validationErrors, addFiles, removeFile, uploadAll, clearAll } =
-    useFileUpload();
+  const {
+    files,
+    isUploading,
+    validationErrors,
+    addFiles,
+    removeFile,
+    uploadAll,
+    clearAll,
+  } = useFileUpload();
 
   const [isDragging, setIsDragging] = useState(false);
 
@@ -78,7 +92,11 @@ export function FileUpload({
   );
 
   const handleUpload = async () => {
-    const fileIds = await uploadAll(fileType);
+    await uploadAll(fileType);
+    const fileIds = files
+      .filter((file) => file.uploadStatus === 'success' && file.fileId)
+      .map((file) => file.fileId as string);
+
     if (onUploadComplete && fileIds.length > 0) {
       onUploadComplete(fileIds);
     }
@@ -97,8 +115,12 @@ export function FileUpload({
     <div className="space-y-6 rounded-xl border border-gray-200 bg-white p-6 dark:border-gray-700 dark:bg-gray-900">
       {/* Header */}
       <div>
-        <h3 className="text-lg font-semibold text-gray-900 dark:text-white">{title}</h3>
-        <p className="mt-1 text-sm text-gray-600 dark:text-gray-400">{description}</p>
+        <h3 className="text-lg font-semibold text-gray-900 dark:text-white">
+          {title}
+        </h3>
+        <p className="mt-1 text-sm text-gray-600 dark:text-gray-400">
+          {description}
+        </p>
       </div>
 
       {/* Validation Errors */}
@@ -109,7 +131,10 @@ export function FileUpload({
             <div className="flex-1">
               {validationErrors.map((error, idx) => (
                 <p key={idx} className="text-sm text-red-700 dark:text-red-300">
-                  <span className="font-semibold">{error.field.toUpperCase()}:</span> {error.message}
+                  <span className="font-semibold">
+                    {error.field.toUpperCase()}:
+                  </span>{' '}
+                  {error.message}
                 </p>
               ))}
             </div>
@@ -159,7 +184,9 @@ export function FileUpload({
                     : 'text-gray-900 dark:text-gray-100'
                 }`}
               >
-                {isDragging ? 'Drop your files here' : 'Click to upload or drag and drop'}
+                {isDragging
+                  ? 'Drop your files here'
+                  : 'Click to upload or drag and drop'}
               </p>
               <p className="text-xs text-gray-600 dark:text-gray-400">
                 JPEG, PNG, or PDF up to 5MB
@@ -226,7 +253,8 @@ export function FileUpload({
 
                 {file.uploadStatus === 'error' && (
                   <p className="mt-1 flex items-center gap-1 text-xs font-medium text-red-600 dark:text-red-400">
-                    <AlertCircle className="h-3 w-3" /> {file.error || 'Upload failed'}
+                    <AlertCircle className="h-3 w-3" />{' '}
+                    {file.error || 'Upload failed'}
                   </p>
                 )}
               </div>
@@ -278,8 +306,8 @@ export function FileUpload({
             <CheckCircle2 className="h-5 w-5 flex-shrink-0 text-green-600 dark:text-green-400" />
             <div>
               <p className="text-sm font-medium text-green-800 dark:text-green-300">
-                {successFiles.length} file{successFiles.length !== 1 ? 's' : ''} uploaded
-                successfully!
+                {successFiles.length} file{successFiles.length !== 1 ? 's' : ''}{' '}
+                uploaded successfully!
               </p>
             </div>
           </div>
@@ -288,7 +316,9 @@ export function FileUpload({
 
       {/* Constraints */}
       <div className="space-y-2 rounded-lg bg-gray-50 p-3 dark:bg-gray-800/50">
-        <p className="text-xs font-semibold text-gray-700 dark:text-gray-300">Constraints:</p>
+        <p className="text-xs font-semibold text-gray-700 dark:text-gray-300">
+          Constraints:
+        </p>
         <ul className="space-y-1 text-xs text-gray-600 dark:text-gray-400">
           <li>• Maximum file size: 5MB</li>
           <li>• Allowed formats: JPEG, PNG, PDF</li>

features/escrow/components/EscrowLock.tsx

@@ -26,8 +26,14 @@ export function EscrowLock({
 }: EscrowLockProps) {
   const [showConfirmation, setShowConfirmation] = useState(false);
   const [state, setState] = useState<LockState>('idle');
-  const { isLoading, error, escrowId, transactionHash, lockEscrow, reset } = useEscrowLock();
-  const { toast } = useToast();
+  const { isLoading, error, escrowId, transactionHash, lockEscrow, reset } =
+    useEscrowLock();
+  const {
+    error: toastError,
+    success: toastSuccess,
+    loading: toastLoading,
+    info: toastInfo,
+  } = useToast();
 
   const isWalletConnected = !!walletAddress;
   const formattedAmount = amount.toFixed(2);
@@ -48,23 +54,24 @@ export function EscrowLock({
   const handleConfirm = async () => {
     setShowConfirmation(false);
     setState('pending');
-    
+
     try {
       await lockEscrow({
         deliveryId,
         amount,
         currency,
         walletAddress: walletAddress!,
       });
-      
+
       setState('success');
       toast({
         title: 'Success!',
         description: `Escrow locked! Transaction: ${transactionHash?.slice(0, 10)}...`,
       });
       onSuccess?.(escrowId!, transactionHash!);
     } catch (err) {
-      const errorMsg = err instanceof Error ? err.message : 'Failed to lock escrow';
+      const errorMsg =
+        err instanceof Error ? err.message : 'Failed to lock escrow';
       setState('error');
       toast({
         title: 'Error',
@@ -99,7 +106,9 @@ export function EscrowLock({
             Your escrow payment has been securely locked.
           </p>
           <div className="bg-gray-50 dark:bg-gray-700 rounded p-3 w-full mb-4">
-            <p className="text-xs text-gray-500 dark:text-gray-400 mb-1">Transaction Hash</p>
+            <p className="text-xs text-gray-500 dark:text-gray-400 mb-1">
+              Transaction Hash
+            </p>
             <p className="text-sm font-mono text-gray-900 dark:text-white break-all">
               {transactionHash}
             </p>
@@ -146,7 +155,9 @@ export function EscrowLock({
     <>
       <div className="w-full max-w-md mx-auto p-6 bg-white dark:bg-gray-800 rounded-lg shadow border border-gray-200 dark:border-gray-700">
         <div className="text-center mb-6">
-          <p className="text-sm text-gray-600 dark:text-gray-400 mb-2">Total Cost</p>
+          <p className="text-sm text-gray-600 dark:text-gray-400 mb-2">
+            Total Cost
+          </p>
           <p className="text-4xl font-bold text-gray-900 dark:text-white">
             {formattedAmount} {currency}
           </p>
@@ -179,8 +190,8 @@ export function EscrowLock({
             isLoading
               ? 'bg-blue-500 text-white cursor-wait'
               : isWalletConnected
-              ? 'bg-primary text-white hover:bg-primary-dark'
-              : 'bg-gray-200 text-gray-500 dark:bg-gray-700 dark:text-gray-400 cursor-not-allowed'
+                ? 'bg-primary text-white hover:bg-primary-dark'
+                : 'bg-gray-200 text-gray-500 dark:bg-gray-700 dark:text-gray-400 cursor-not-allowed'
           }`}
         >
           {isLoading ? (
@@ -197,7 +208,9 @@ export function EscrowLock({
         </button>
 
         <p className="text-xs text-gray-500 dark:text-gray-400 text-center mt-4">
-          {isWalletConnected ? 'Wallet connected' : 'Wallet status: disconnected'}
+          {isWalletConnected
+            ? 'Wallet connected'
+            : 'Wallet status: disconnected'}
         </p>
       </div>
 

features/shipments/components/HandoffQR.tsx

@@ -1,7 +1,7 @@
 'use client';
 
 import React, { useEffect, useState } from 'react';
-import QRCode from 'qrcode.react';
+import { QRCodeCanvas } from 'qrcode.react';
 import {
   useHandoffQR,
   useGenerateHandoffQR,

hooks/useProofUpload.ts

@@ -51,19 +51,15 @@ export function useProofUpload({
   const [isCompressing, setIsCompressing] = useState(false);
   const [uploadedProofs, setUploadedProofs] = useState<UploadedProof[]>([]);
   const [errors, setErrors] = useState<string[]>([]);
-  const { toast } = useToast();
+  const { error: toastError, success: toastSuccess, loading: toastLoading, info: toastInfo } = useToast();
 
   const handleFileCapture = useCallback(
     async (file: File) => {
       // Validate file type
       if (!file.type.startsWith('image/')) {
         const errorMsg = 'Please select an image file';
         setErrors((prev) => [...prev, errorMsg]);
-        toast({
-          title: 'Invalid File',
-          description: errorMsg,
-          variant: 'destructive',
-        });
+        toastError(errorMsg);
         return;
       }
 

pnpm-lock.yaml

@@ -49,6 +49,22 @@ export interface LockEscrowResponse {
   lockedAmount: string;
 }
 
+export interface OpenDisputeParams {
+  deliveryId: string;
+  transactionId: string;
+  reason: 'damaged_items' | 'non_delivery' | 'incorrect_items' | 'other';
+  description: string;
+  evidenceFiles?: File[];
+  walletAddress: string;
+}
+
+export interface OpenDisputeResponse {
+  success: boolean;
+  message: string;
+  disputeId?: string;
+  transactionHash?: string;
+}
+
 /**
  * escrowService — responsible for all escrow-related API communication.
  * The hook calls this; components never call this directly.
@@ -84,4 +100,12 @@ export const escrowService = {
     );
     return data;
   },
+
+  async openDispute(params: OpenDisputeParams): Promise<OpenDisputeResponse> {
+    const { data } = await axios.post<OpenDisputeResponse>(
+      `${API_BASE_URL}/api/escrow/dispute`,
+      params
+    );
+    return data;
+  },
 };