clients page

frontend/imk/src/components/adminPanel/AdminPanel.jsx

@@ -148,8 +148,11 @@ function AdminPanel() {
                               {doc.status}
                             </span>
                           </td>
-                          <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
+                          {/* <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
                             {doc.sharedWith?.map((user) => user.name).join(', ') || 'None'}
+                          </td> */}
+                          <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
+                          {doc.sharedWith ? `${doc.sharedWith.name} (${doc.sharedWith.email})` : 'None'}
                           </td>
                           <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
                             {new Date(doc.createdAt).toLocaleDateString()}

frontend/imk/src/components/clients/clients.jsx

@@ -1,11 +1,93 @@
-import React from 'react'
+import { useState, useEffect } from 'react'
+import { useAuth } from '../../hooks/useAuth';
+import { getSharedDocuments } from '../../services/api';
 
 function Clients() {
+  const [documents, setDocuments] = useState([]);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState('');
+  const { user } = useAuth();
+
+  useEffect(() => {
+    const fetchDocuments = async () => {
+      try {
+        const response = await getSharedDocuments(user.id);
+        setDocuments(response.data);
+      } catch (err) {
+        setError('Failed to fetch documents');
+        console.error('Error fetching documents:', err);
+      } finally {
+        setLoading(false);
+      }
+    };
+
+    if (user) {
+      fetchDocuments();
+    }
+  }, [user]);
+
+  if (loading) {
+    return (
+      <div className="flex justify-center items-center min-h-screen">
+        <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-gray-900"></div>
+      </div>
+    );
+  }
+
+  if (error) {
+    return (
+      <div className="text-center text-red-600 p-4">
+        {error}
+      </div>
+    );
+  }
+
   return (
-    <div>
+    <div className="container mx-auto px-4 py-8">
+      <h1 className="text-2xl font-bold mb-6">Your Documents</h1>
       
+      {documents.length === 0 ? (
+        <p className="text-gray-600">No documents have been shared with you yet.</p>
+      ) : (
+        <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-3">
+          {documents.map((doc) => (
+            <div 
+              key={doc.id} 
+              className="bg-white p-6 rounded-lg shadow-md hover:shadow-lg transition-shadow"
+            >
+              <div className="flex justify-between items-start mb-4">
+                <h2 className="text-xl font-semibold">{doc.title}</h2>
+                <span className={`px-2 py-1 text-xs rounded-full ${
+                  doc.status === 'completed' 
+                    ? 'bg-green-100 text-green-800' 
+                    : 'bg-yellow-100 text-yellow-800'
+                }`}>
+                  {doc.status}
+                </span>
+              </div>
+              
+              <div className="text-sm text-gray-600">
+                <p>Created: {new Date(doc.createdAt).toLocaleDateString()}</p>
+                {doc.content && (
+                  <p className="mt-2">{doc.content}</p>
+                )}
+              </div>
+              
+              <div className="mt-4 flex justify-end">
+                <button 
+                  onClick={() => window.open(`/api/documents/download/${doc.s3Key}`, '_blank')}
+                  className="bg-blue-500 text-white px-4 py-2 rounded hover:bg-blue-600 transition-colors"
+                >
+                  Download
+                </button>
+              </div>
+            </div>
+          ))}
+        </div>
+      )}
     </div>
-  )
+  );
 }
 
-export default Clients
+export default Clients;
+

frontend/imk/src/components/documentUpload/DocumentUpload.jsx

@@ -27,34 +27,45 @@ function DocumentUpload() {
     setFile(selectedFile);
   };
 
-  const handleSubmit = async (event) => {
+const handleSubmit = async (event) => {
     event.preventDefault();
+    
+    console.log('Form submission:', { file, title, selectedUsers });
+    
     if (!file || !title || selectedUsers.length === 0) {
       setErrorMessage('Please provide a title, file, and select at least one user');
       return;
     }
-
+  
     setStatus('uploading');
     setErrorMessage('');
-
+  
     const formData = new FormData();
     formData.append('file', file);
     formData.append('title', title);
-    formData.append('sharedWith', JSON.stringify(selectedUsers));
-
+    formData.append('sharedWith', selectedUsers[0]);
+  
     try {
-      await uploadDocument(formData);
+      console.log('Sending request with:', {
+        title,
+        sharedWith: selectedUsers[0],
+        fileSize: file.size
+      });
+      
+      const response = await uploadDocument(formData);
+      console.log('Upload response:', response);
+      
       setStatus('completed');
       setTitle('');
       setFile(null);
       setSelectedUsers([]);
       event.target.reset();
     } catch (error) {
+      console.error('Upload error:', error);
       setStatus('failed');
       setErrorMessage(error.response?.data?.message || 'Upload failed');
     }
   };
-
   return (
     <div className="max-w-md mx-auto mt-8 p-6 bg-white rounded-lg shadow-md">
       <h2 className="text-2xl font-bold mb-6">Upload Document</h2>

frontend/imk/src/services/api.js

@@ -4,7 +4,7 @@ import axios from 'axios';
 const API_URL = 'http://localhost:3000';
 
 const api = axios.create({
-  baseURL: API_URL,
+  baseURL: API_URL
 });
 
 api.interceptors.request.use((config) => {
@@ -16,26 +16,28 @@ api.interceptors.request.use((config) => {
 });
 export const createUser = (userData) => api.post('/admin/users', userData);
 export const login = (username, password) => api.post('/auth/login', { username, password });
-// export const getAllUsers = () => api.get('/admin/users');
 export const shareDocument = (documentId, userIds) => api.post(`/admin/documents/${documentId}/share`, { userIds });
 export const updateDocumentStatus = (documentId, status) => api.put(`/admin/documents/${documentId}/status`, { status });
-// export const uploadDocument = (formData) => api.post('/admin/documents', formData, {
-//   headers: { 'Content-Type': 'multipart/form-data' },
-// });
-
 
 export const uploadDocument = async (formData) => {
-  const response = await api.post('/admin/documents', formData, {
-    headers: {
-      'Content-Type': 'multipart/form-data',
-    },
-  });
-  return response.data;
+  try {
+    const response = await api.post('/admin/documents', formData, {
+      headers: {
+        'Content-Type': 'multipart/form-data',
+      },
+    });
+    console.log('Upload API response:', response.data);
+    return response.data;
+  } catch (error) {
+    console.error('Upload API error:', error);
+    throw error;
+  }
 };
 export const getUserInfo = () => api.get('/auth/user-info');
-// ... existing code ...
+
 
 export const getAllDocuments = () => api.get('/admin/documents');
+export const getSharedDocuments = (userId) => api.get(`/documents/shared/${userId}`);
 export const getAllUsers = () => api.get('/admin/users');
 
 export default api;