ai error

Author: Arcka1n

client/src/views/pages/LegalPanel/complains.js

@@ -4,6 +4,7 @@ import axiosInstance from '../../../utils/axiosInstance';
 const Complains = () => {
     const [complaints, setComplaints] = useState([]);
     const [loading, setLoading] = useState(false);
+    const [error, setError] = useState(null);
 
     // Fetch complaints on component mount only
     useEffect(() => {
@@ -13,35 +14,54 @@ const Complains = () => {
     const fetchComplains = async () => {
         try {
             setLoading(true);
+            setError(null);
             const response = await axiosInstance.get('/complains/get-complains');
             setComplaints(response.data);
         } catch (error) {
             console.error('Error fetching complaints:', error);
+            setError('Failed to load complaints. Please try again.');
         } finally {
             setLoading(false);
         }
     };
 
     const resolveComplaintWithAI = async (complaint) => {
         try {
-            await axiosInstance.post('/complains/ai-resolve', {
+            setError(null);
+            // Update UI immediately to show processing
+            setComplaints(prevComplaints => 
+                prevComplaints.map(c => 
+                    c._id === complaint._id 
+                        ? {...c, status: 'Processing'} 
+                        : c
+                )
+            );
+
+            // Make API call with the exact route that matches the backend
+            const response = await axiosInstance.post('/complains/ai-resolve', {
                 complaintText: complaint.complaintText,
                 complaintId: complaint._id
             });
 
-            // Instead of fetching all complaints, update this specific complaint locally
+            // Update the complaint with the response data
             setComplaints(prevComplaints => 
                 prevComplaints.map(c => 
                     c._id === complaint._id 
-                        ? {...c, status: 'Processing'} // Mark as processing until next fetch
+                        ? response.data
                         : c
                 )
             );
-            
-            // Optional: Fetch all complaints after a small delay to get the updated data
-            setTimeout(fetchComplains, 1000);
         } catch (error) {
             console.error('Error resolving with AI:', error);
+            setError('Failed to resolve complaint. Please try again.');
+            // Revert the complaint status on error
+            setComplaints(prevComplaints => 
+                prevComplaints.map(c => 
+                    c._id === complaint._id 
+                        ? {...c, status: 'Pending'}
+                        : c
+                )
+            );
         }
     };
 
@@ -55,17 +75,33 @@ const Complains = () => {
     return (
         <div style={{ padding: '20px' }}>
             <h1>Complaints Management</h1>
+            
+            {error && (
+                <div style={{ color: 'red', margin: '10px 0', padding: '10px', backgroundColor: '#ffecec', borderRadius: '4px' }}>
+                    {error}
+                </div>
+            )}
+            
+            <button 
+                onClick={fetchComplains} 
+                disabled={loading}
+                style={{ 
+                    marginBottom: '15px', 
+                    padding: '8px 12px',
+                    backgroundColor: loading ? '#cccccc' : '#4285f4',
+                    color: 'white',
+                    border: 'none',
+                    borderRadius: '4px',
+                    cursor: loading ? 'not-allowed' : 'pointer'
+                }}
+            >
+                {loading ? 'Loading...' : 'Refresh Complaints'}
+            </button>
+            
             {loading ? (
                 <p>Loading complaints...</p>
             ) : (
                 <>
-                    <button 
-                        onClick={fetchComplains} 
-                        style={{ marginBottom: '15px', padding: '8px 12px' }}
-                    >
-                        Refresh Complaints
-                    </button>
-                    
                     {complaints.length === 0 ? (
                         <p>No complaints found.</p>
                     ) : (
@@ -77,21 +113,39 @@ const Complains = () => {
                                     borderRadius: '4px',
                                     margin: '10px 0', 
                                     padding: '15px',
-                                    backgroundColor: c.status === 'Resolved' ? '#f0f7f0' : '#fff'
+                                    backgroundColor: c.status === 'Resolved' ? '#f0f7f0' : 
+                                                    c.status === 'Processing' ? '#fff8e1' : '#fff'
                                 }}
                             >
                                 <p><strong>User:</strong> {c.userId}</p>
                                 <p><strong>Complaint:</strong> {c.complaintText}</p>
-                                <p><strong>Status:</strong> {c.status}</p>
+                                <p>
+                                    <strong>Status:</strong> 
+                                    <span style={{ 
+                                        color: c.status === 'Resolved' ? 'green' : 
+                                               c.status === 'Processing' ? 'orange' : 'gray',
+                                        fontWeight: 'bold'
+                                    }}>
+                                        {c.status}
+                                    </span>
+                                </p>
                                 {c.resolutionText && (
-                                    <div style={{ marginTop: '10px', padding: '10px', backgroundColor: '#f5f5f5' }}>
+                                    <div style={{ marginTop: '10px', padding: '10px', backgroundColor: '#f5f5f5', borderRadius: '4px' }}>
                                         <p><strong>AI Resolution:</strong> {c.resolutionText}</p>
                                     </div>
                                 )}
                                 {c.status === 'Pending' && (
                                     <button 
                                         onClick={() => handleResolveClick(c)}
-                                        style={{ marginTop: '10px', padding: '5px 10px' }}
+                                        style={{ 
+                                            marginTop: '10px', 
+                                            padding: '5px 10px',
+                                            backgroundColor: '#34a853',
+                                            color: 'white',
+                                            border: 'none',
+                                            borderRadius: '4px',
+                                            cursor: 'pointer'
+                                        }}
                                     >
                                         Resolve with AI
                                     </button>

server/routes/legal/complains.js

@@ -8,6 +8,6 @@ const router = express.Router();
 
 router.post('/postComplains', createComplaint);
 router.get('/get-complains', getComplaints);
-router.patch('/ai-resolve', resolveComplaintWithAI);
+router.post('/ai-resolve', resolveComplaintWithAI);
 
 export default router;