From bacaf522cb670356c0e86e67193f46f301186662 Mon Sep 17 00:00:00 2001
From: dimitar <petrovskidimitar@yandex.com>
Date: Sat, 2 Nov 2024 10:01:12 +0100
Subject: [PATCH] admin panel redesign and functionality fix

---
 .../imk-backend/src/admin/admin.service.ts    |    3 +
 .../src/components/adminPanel/AdminPanel.jsx  | 1080 +++--------------
 2 files changed, 188 insertions(+), 895 deletions(-)

diff --git a/backend/imk-backend/src/admin/admin.service.ts b/backend/imk-backend/src/admin/admin.service.ts
index fce6114..7e29822 100644
--- a/backend/imk-backend/src/admin/admin.service.ts
+++ b/backend/imk-backend/src/admin/admin.service.ts
@@ -30,6 +30,9 @@ export class AdminService {
           },
         },
       },
+      orderBy: {
+        createdAt: 'desc',
+      },
     });
   }
 
diff --git a/frontend/imk/src/components/adminPanel/AdminPanel.jsx b/frontend/imk/src/components/adminPanel/AdminPanel.jsx
index 7052cb3..2c414fc 100644
--- a/frontend/imk/src/components/adminPanel/AdminPanel.jsx
+++ b/frontend/imk/src/components/adminPanel/AdminPanel.jsx
@@ -1,8 +1,8 @@
 import { useState, useEffect } from 'react';
 import { getAllUsers, getAllDocuments, getUserInfo, createUser } from '../../services/api';
 import DocumentUpload from '../documentUpload/DocumentUpload';
-//import UserCreate from '../UserCreate';
 import { useNavigate } from 'react-router-dom';
+import { FiUsers, FiFile, FiUpload, FiUserPlus, FiLoader } from 'react-icons/fi';
 
 function AdminPanel() {
   const navigate = useNavigate();
@@ -16,13 +16,19 @@ function AdminPanel() {
     name: '',
     email: '',
     password: '',
-    isAdmin: false  
+    isAdmin: false
   });
 
   useEffect(() => {
     checkAdminStatus();
   }, []);
 
+  useEffect(() => {
+    if (isAdmin) {
+      fetchData();
+    }
+  }, [activeTab, isAdmin]);
+
   const checkAdminStatus = async () => {
     try {
       const response = await getUserInfo();
@@ -38,13 +44,6 @@ function AdminPanel() {
     }
   };
 
-  useEffect(() => {
-    if (isAdmin) {
-      fetchData();
-    }
-  // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [activeTab, isAdmin]);
-
   const fetchData = async () => {
     setLoading(true);
     setError('');
@@ -54,29 +53,17 @@ function AdminPanel() {
         setUsers(response.data);
       } else if (activeTab === 'documents') {
         const response = await getAllDocuments();
+        console.log('Documents data:', response.data);
         setDocuments(response.data);
       }
     } catch (err) {
+      console.error('Fetch error:', err);
       setError('Failed to fetch data. Please try again.');
     } finally {
       setLoading(false);
     }
   };
 
-  const getStatusColor = (status) => {
-    const colors = {
-      pending: 'bg-yellow-100 text-yellow-800',
-      uploading: 'bg-blue-100 text-blue-800',
-      completed: 'bg-green-100 text-green-800',
-      failed: 'bg-red-100 text-red-800'
-    };
-    return colors[status] || 'bg-gray-100 text-gray-800';
-  };
-
-  if (!isAdmin) {
-    return null;
-  }
-
   const handleCreateUser = async (e) => {
     e.preventDefault();
     try {
@@ -85,7 +72,7 @@ function AdminPanel() {
         name: '',
         email: '',
         password: '',
-        isAdmin: false  // Reset isAdmin too
+        isAdmin: false
       });
       fetchData();
     } catch (err) {
@@ -93,892 +80,195 @@ function AdminPanel() {
     }
   };
 
+  if (!isAdmin) return null;
+
+  const tabs = [
+    { id: 'documents', name: 'Documents', icon: FiFile },
+    { id: 'users', name: 'Users', icon: FiUsers },
+    { id: 'upload', name: 'Upload Document', icon: FiUpload }
+  ];
+
+  if (loading) {
+    return (
+      <div className="min-h-screen flex items-center justify-center bg-gray-900">
+        <div className="flex items-center space-x-3 text-blue-500">
+          <FiLoader className="w-6 h-6 animate-spin" />
+          <span className="text-lg font-medium">Loading...</span>
+        </div>
+      </div>
+    );
+  }
 
   return (
-    <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
-      <div className="bg-white rounded-lg shadow">
-        {/* Admin Header */}
-        <div className="px-6 py-4 border-b border-gray-200">
-          <h1 className="text-2xl font-bold text-gray-900">Admin Dashboard</h1>
+    <div className="min-h-screen bg-gradient-to-br from-gray-900 to-gray-800 p-6">
+      <div className="max-w-7xl mx-auto">
+        <header className="mb-8 mt-20">
+          <h1 className="text-3xl font-bold text-white mb-2">Admin Dashboard</h1>
+          <p className="text-gray-400">Manage users and documents</p>
+        </header>
+
+        {/* Tabs */}
+        <div className="flex space-x-4 mb-6">
+          {tabs.map(({ id, name, icon: Icon }) => (
+            <button
+              key={id}
+              onClick={() => setActiveTab(id)}
+              className={`
+                px-4 py-2 rounded-lg flex items-center space-x-2 transition-colors
+                ${activeTab === id 
+                  ? 'bg-white/10 text-white' 
+                  : 'text-gray-400 hover:bg-white/5 hover:text-white'}
+              `}
+            >
+              <Icon className="w-4 h-4" />
+              <span>{name}</span>
+            </button>
+          ))}
         </div>
 
-        {/* Tab Navigation */}
-        <div className="border-b border-gray-200">
-          <nav className="flex -mb-px">
-            <button
-              onClick={() => setActiveTab('documents')}
-              className={`px-6 py-3 border-b-2 font-medium text-sm ${
-                activeTab === 'documents'
-                  ? 'border-indigo-500 text-indigo-600'
-                  : 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300'
-              }`}
-            >
-              Documents
-            </button>
-            <button
-              onClick={() => setActiveTab('users')}
-              className={`px-6 py-3 border-b-2 font-medium text-sm ${
-                activeTab === 'users'
-                  ? 'border-indigo-500 text-indigo-600'
-                  : 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300'
-              }`}
-            >
-              Users
-            </button>
-            <button
-              onClick={() => setActiveTab('upload')}
-              className={`px-6 py-3 border-b-2 font-medium text-sm ${
-                activeTab === 'upload'
-                  ? 'border-indigo-500 text-indigo-600'
-                  : 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300'
-              }`}
-            >
-              Upload Document
-            </button>
-          </nav>
-        </div>
+        {error && (
+          <div className="mb-6 p-4 bg-red-500/10 border border-red-500/20 rounded-lg text-red-200">
+            {error}
+          </div>
+        )}
 
-        {/* Content Area */}
-        <div className="p-6">
-          {error && (
-            <div className="mb-4 p-4 bg-red-100 text-red-700 rounded-md">
-              {error}
+        <div className="grid gap-6">
+          {activeTab === 'documents' && (
+            <div className="bg-white/5 backdrop-blur-lg rounded-xl overflow-hidden">
+              <div className="overflow-x-auto">
+                <table className="w-full">
+                  <thead>
+                    <tr className="border-b border-gray-700">
+                      <th className="px-6 py-4 text-left text-sm text-gray-400">Title</th>
+                      <th className="px-6 py-4 text-left text-sm text-gray-400">Status</th>
+                      <th className="px-6 py-4 text-left text-sm text-gray-400">Uploaded By</th>
+                      <th className="px-6 py-4 text-left text-sm text-gray-400">Shared With</th>
+                      <th className="px-6 py-4 text-left text-sm text-gray-400">Created At</th>
+                    </tr>
+                  </thead>
+                  <tbody>
+                    {documents.map((doc) => (
+                      <tr key={doc.id} className="border-b border-gray-700/50 hover:bg-white/5">
+                        <td className="px-6 py-4 text-gray-200">{doc.title}</td>
+                        <td className="px-6 py-4">
+                          <span className={`px-3 py-1 rounded-full text-xs font-medium ${
+                            doc.status === 'completed' ? 'bg-green-500/10 text-green-400' :
+                            doc.status === 'pending' ? 'bg-yellow-500/10 text-yellow-400' :
+                            doc.status === 'uploading' ? 'bg-blue-500/10 text-blue-400' :
+                            'bg-gray-500/10 text-gray-400'
+                          }`}>
+                            {doc.status}
+                          </span>
+                        </td>
+                        <td className="px-6 py-4 text-gray-400">
+                          {doc.uploadedBy?.name} ({doc.uploadedBy?.email})
+                        </td>
+                        <td className="px-6 py-4 text-gray-400">
+                          {doc.sharedWith && doc.sharedWith.length > 0 
+                            ? doc.sharedWith.map(user => (
+                                <div key={user.id} className="whitespace-nowrap">
+                                  {user.name} ({user.email})
+                                </div>
+                              ))
+                            : 'None'}
+                        </td>
+                        <td className="px-6 py-4 text-gray-400">
+                          {new Date(doc.createdAt).toLocaleString()}
+                        </td>
+                      </tr>
+                    ))}
+                  </tbody>
+                </table>
+              </div>
             </div>
           )}
 
-          {loading ? (
-            <div className="flex justify-center items-center py-8">
-              <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-indigo-600"></div>
-            </div>
-          ) : (
+          {activeTab === 'users' && (
             <>
-              {activeTab === 'documents' && (
-                <div className="overflow-x-auto">
-                  <table className="min-w-full divide-y divide-gray-200">
-                    <thead className="bg-gray-50">
-                      <tr>
-                        <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Title</th>
-                        <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Status</th>
-                        <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Shared With</th>
-                        <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Created At</th>
+              <div className="bg-white/5 backdrop-blur-lg rounded-xl p-6 mb-6">
+                <h2 className="text-xl font-bold text-white mb-4">Create New User</h2>
+                <form onSubmit={handleCreateUser} className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
+                  <input
+                    type="text"
+                    placeholder="Name"
+                    value={newUser.name}
+                    onChange={(e) => setNewUser({ ...newUser, name: e.target.value })}
+                    className="bg-white/5 border border-gray-700 rounded-lg px-4 py-2 text-white placeholder-gray-400 focus:outline-none focus:border-blue-500"
+                    required
+                  />
+                  <input
+                    type="email"
+                    placeholder="Email"
+                    value={newUser.email}
+                    onChange={(e) => setNewUser({ ...newUser, email: e.target.value })}
+                    className="bg-white/5 border border-gray-700 rounded-lg px-4 py-2 text-white placeholder-gray-400 focus:outline-none focus:border-blue-500"
+                    required
+                  />
+                  <input
+                    type="password"
+                    placeholder="Password"
+                    value={newUser.password}
+                    onChange={(e) => setNewUser({ ...newUser, password: e.target.value })}
+                    className="bg-white/5 border border-gray-700 rounded-lg px-4 py-2 text-white placeholder-gray-400 focus:outline-none focus:border-blue-500"
+                    required
+                  />
+                  <div className="flex items-center space-x-2">
+                    <input
+                      type="checkbox"
+                      id="isAdmin"
+                      checked={newUser.isAdmin}
+                      onChange={(e) => setNewUser({ ...newUser, isAdmin: e.target.checked })}
+                      className="rounded border-gray-700 bg-white/5 text-blue-500 focus:ring-blue-500"
+                    />
+                    <label htmlFor="isAdmin" className="text-gray-200">Is Admin</label>
+                  </div>
+                  <button
+                    type="submit"
+                    className="flex items-center justify-center space-x-2 px-4 py-2 bg-blue-500 hover:bg-blue-600 text-white rounded-lg transition-colors"
+                  >
+                    <FiUserPlus className="w-4 h-4" />
+                    <span>Create User</span>
+                  </button>
+                </form>
+              </div>
+
+              <div className="bg-white/5 backdrop-blur-lg rounded-xl overflow-hidden">
+                <table className="w-full">
+                  <thead>
+                    <tr className="border-b border-gray-700">
+                      <th className="px-6 py-4 text-left text-sm text-gray-400">Name</th>
+                      <th className="px-6 py-4 text-left text-sm text-gray-400">Email</th>
+                      <th className="px-6 py-4 text-left text-sm text-gray-400">Role</th>
+                    </tr>
+                  </thead>
+                  <tbody>
+                    {users.map((user) => (
+                      <tr key={user.id} className="border-b border-gray-700/50 hover:bg-white/5">
+                        <td className="px-6 py-4 text-gray-200">{user.name}</td>
+                        <td className="px-6 py-4 text-gray-200">{user.email}</td>
+                        <td className="px-6 py-4">
+                          <span className={`px-3 py-1 rounded-full text-xs font-medium
+                            ${user.isAdmin ? 'bg-purple-500/10 text-purple-400' : 'bg-gray-500/10 text-gray-400'}`}>
+                            {user.isAdmin ? 'Admin' : 'User'}
+                          </span>
+                        </td>
                       </tr>
-                    </thead>
-                    <tbody className="bg-white divide-y divide-gray-200">
-                      {documents.map((doc) => (
-                        <tr key={doc.id}>
-                          <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-900">{doc.title}</td>
-                          <td className="px-6 py-4 whitespace-nowrap">
-                            <span className={`px-2 inline-flex text-xs leading-5 font-semibold rounded-full ${getStatusColor(doc.status)}`}>
-                              {doc.status}
-                            </span>
-                          </td>
-                          {/* <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()}
-                          </td>
-                        </tr>
-                      ))}
-                    </tbody>
-                  </table>
-                </div>
-              )}
-
-              {activeTab === 'users' && (
-                <>
-<form onSubmit={handleCreateUser} className="mb-8">
-          <div className="grid grid-cols-1 gap-4 sm:grid-cols-2 md:grid-cols-4">
-            <input
-              type="text"
-              placeholder="Name"
-              value={newUser.name}
-              onChange={(e) => setNewUser({ ...newUser, name: e.target.value })}
-              className="rounded border p-2"
-            />
-            <input
-              type="email"
-              placeholder="Email"
-              value={newUser.email}
-              onChange={(e) => setNewUser({ ...newUser, email: e.target.value })}
-              className="rounded border p-2"
-            />
-            <input
-              type="password"
-              placeholder="Password"
-              value={newUser.password}
-              onChange={(e) => setNewUser({ ...newUser, password: e.target.value })}
-              className="rounded border p-2"
-            />
-            <div className="flex items-center">
-              <input
-                type="checkbox"
-                id="isAdmin"
-                checked={newUser.isAdmin}
-                onChange={(e) => setNewUser({ ...newUser, isAdmin: e.target.checked })}
-                className="mr-2"
-              />
-              <label htmlFor="isAdmin">Is Admin</label>
-            </div>
-            <button
-              type="submit"
-              className="bg-blue-500 text-white px-4 py-2 rounded hover:bg-blue-600"
-            >
-              Create User
-            </button>
-          </div>
-        </form>
-
-        <table className="min-w-full divide-y divide-gray-200">
-          <thead className="bg-gray-50">
-            <tr>
-              <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Name</th>
-              <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Email</th>
-              <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Admin Status</th>
-              <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Actions</th>
-            </tr>
-          </thead>
-          <tbody className="bg-white divide-y divide-gray-200">
-            {users.map((user) => (
-              <tr key={user.id}>
-                <td className="px-6 py-4 whitespace-nowrap">{user.name}</td>
-                <td className="px-6 py-4 whitespace-nowrap">{user.email}</td>
-                <td className="px-6 py-4 whitespace-nowrap">
-                  <span className={`px-2 py-1 text-xs rounded-full ${
-                    user.isAdmin ? 'bg-green-100 text-green-800' : 'bg-gray-100 text-gray-800'
-                  }`}>
-                    {user.isAdmin ? 'Admin' : 'User'}
-                  </span>
-                </td>
-                <td className="px-6 py-4 whitespace-nowrap">
-                  {/* Add actions if needed */}
-                </td>
-              </tr>
-            ))}
-                    </tbody>
-                  </table>
-                </>
-              )}
-
-              {activeTab === 'upload' && <DocumentUpload />}
+                    ))}
+                  </tbody>
+                </table>
+              </div>
             </>
           )}
+
+          {activeTab === 'upload' && (
+            <div className="bg-white/5 backdrop-blur-lg rounded-xl p-6">
+              <DocumentUpload />
+            </div>
+          )}
         </div>
       </div>
     </div>
   );
 }
-export default AdminPanel;
 
-// import { useState, useEffect } from 'react';
-// import { useAuth } from '../../hooks/useAuth';
-// import { format } from 'date-fns';
-// import { FiUpload, FiUsers, FiFile, FiTrash2, FiShare2, FiLoader, FiSearch, FiChevronRight } from 'react-icons/fi';
-// import api from '../../services/api';
-
-// function AdminPanel() {
-//   const [documents, setDocuments] = useState([]);
-//   const [users, setUsers] = useState([]);
-//   const [loading, setLoading] = useState(true);
-//   const [error, setError] = useState('');
-//   const [selectedFile, setSelectedFile] = useState(null);
-//   const [uploadTitle, setUploadTitle] = useState('');
-//   const [selectedUser, setSelectedUser] = useState('');
-//   const [searchTerm, setSearchTerm] = useState('');
-//   const [expandedUsers, setExpandedUsers] = useState({});
-
-//   useEffect(() => {
-//     fetchData();
-//   }, []);
-
-//   const fetchData = async () => {
-//     try {
-//       setLoading(true);
-//       const [documentsRes, usersRes] = await Promise.all([
-//         api.get('/admin/documents'),
-//         api.get('/admin/users')
-//       ]);
-      
-//       console.log('Documents response:', documentsRes.data);
-//       console.log('Users response:', usersRes.data);
-      
-//       // Group documents by user
-//       const groupedDocs = groupDocumentsByUser(documentsRes.data || []);
-//       setDocuments(groupedDocs);
-//       setUsers(usersRes.data || []);
-//     } catch (err) {
-//       setError('Failed to fetch data');
-//       console.error('Error:', err);
-//     } finally {
-//       setLoading(false);
-//     }
-//   };
-//   const groupDocumentsByUser = (docs) => {
-//     return docs.reduce((acc, doc) => {
-//       const userName = doc.sharedWith?.name || 'Unassigned';
-//       if (!acc[userName]) {
-//         acc[userName] = [];
-//       }
-//       acc[userName].push(doc);
-//       return acc;
-//     }, {});
-//   };
-
-//   const toggleUser = (userName) => {
-//     setExpandedUsers(prev => ({
-//       ...prev,
-//       [userName]: !prev[userName]
-//     }));
-//   };
-
-//   const handleFileUpload = async (e) => {
-//     e.preventDefault();
-//     if (!selectedFile || !uploadTitle || !selectedUser) {
-//       alert('Please fill in all fields');
-//       return;
-//     }
-
-//     const formData = new FormData();
-//     formData.append('file', selectedFile);
-//     formData.append('title', uploadTitle);
-//     formData.append('sharedWith', selectedUser);
-
-//     try {
-//       await api.post('/admin/documents', formData, {
-//         headers: {
-//           'Content-Type': 'multipart/form-data',
-//         },
-//       });
-
-//       setSelectedFile(null);
-//       setUploadTitle('');
-//       setSelectedUser('');
-//       fetchData();
-//       alert('Document uploaded successfully');
-//     } catch (err) {
-//       console.error('Upload error:', err);
-//       alert('Failed to upload document');
-//     }
-//   };
-
-//   const handleDelete = async (documentId) => {
-//     if (!window.confirm('Are you sure you want to delete this document?')) {
-//       return;
-//     }
-
-//     try {
-//       await api.delete(`/admin/documents/${documentId}`);
-//       fetchData();
-//       alert('Document deleted successfully');
-//     } catch (err) {
-//       console.error('Delete error:', err);
-//       alert('Failed to delete document');
-//     }
-//   };
-
-//   const handleShare = async (documentId) => {
-//     const userId = prompt('Enter user ID to share with:');
-//     if (!userId) return;
-
-//     try {
-//       await api.post(`/admin/documents/${documentId}/share`, { userId });
-//       fetchData();
-//       alert('Document shared successfully');
-//     } catch (err) {
-//       console.error('Share error:', err);
-//       alert('Failed to share document');
-//     }
-//   };
-
-//   if (loading) {
-//     return (
-//       <div className="min-h-screen flex items-center justify-center bg-gray-900">
-//         <div className="flex items-center space-x-3 text-blue-500">
-//           <FiLoader className="w-6 h-6 animate-spin" />
-//           <span className="text-lg font-medium">Loading admin panel...</span>
-//         </div>
-//       </div>
-//     );
-//   }
-
-//   if (error) {
-//     return (
-//       <div className="min-h-screen flex items-center justify-center bg-gray-900">
-//         <div className="p-4 bg-red-500/10 border border-red-500/20 rounded-lg text-red-200">
-//           {error}
-//         </div>
-//       </div>
-//     );
-//   }
-
-//   return (
-//   <div className="min-h-screen bg-gradient-to-br from-gray-900 to-gray-800 p-6">
-//       <div className="max-w-7xl mx-auto">
-//         <header className="mb-8">
-//           <h1 className="text-3xl font-bold text-white mb-2">Admin Dashboard</h1>
-//           <p className="text-gray-400">Manage documents and users</p>
-//         </header>
-
-//         {/* Upload Section - remains the same */}
-//         <div className="bg-white/5 backdrop-blur-lg rounded-xl p-6 mb-8">
-//           {/* ... upload form content remains the same ... */}
-//         </div>
-
-//         {/* Search Bar */}
-//         <div className="relative mb-6">
-//           <FiSearch className="absolute left-3 top-1/2 -translate-y-1/2 text-gray-400" />
-//           <input
-//             type="text"
-//             placeholder="Search documents..."
-//             value={searchTerm}
-//             onChange={(e) => setSearchTerm(e.target.value)}
-//             className="w-full pl-10 pr-4 py-3 bg-white/5 border border-gray-700 rounded-lg focus:outline-none focus:border-blue-500 text-white placeholder-gray-400"
-//           />
-//         </div>
-
-//         {/* Documents List - Grouped by User */}
-//         <div className="space-y-4">
-//           {Object.entries(documents).map(([userName, userDocs]) => {
-//             const filteredDocs = userDocs.filter(doc => 
-//               doc.title.toLowerCase().includes(searchTerm.toLowerCase())
-//             );
-            
-//             if (filteredDocs.length === 0) return null;
-
-//             return (
-//               <div
-//                 key={userName}
-//                 className="bg-white/5 backdrop-blur-lg rounded-xl overflow-hidden"
-//               >
-//                 <button
-//                   onClick={() => toggleUser(userName)}
-//                   className="w-full px-6 py-4 flex items-center justify-between text-white hover:bg-white/5 transition-colors"
-//                 >
-//                   <div className="flex items-center space-x-3">
-//                     <FiUsers className="w-5 h-5 text-blue-400" />
-//                     <span className="font-medium">{userName}</span>
-//                     <span className="text-sm text-gray-400">({filteredDocs.length} documents)</span>
-//                   </div>
-//                   <FiChevronRight
-//                     className={`w-5 h-5 transition-transform duration-200 ${
-//                       expandedUsers[userName] ? 'rotate-90' : ''
-//                     }`}
-//                   />
-//                 </button>
-
-//                 {expandedUsers[userName] && (
-//                   <div className="border-t border-gray-700 divide-y divide-gray-700">
-//                     {filteredDocs.map(doc => (
-//                       <div
-//                         key={doc.id}
-//                         className="px-6 py-4 flex items-center justify-between hover:bg-white/5"
-//                       >
-//                         <div className="flex items-center space-x-4">
-//                           <FiFile className="w-5 h-5 text-gray-400" />
-//                           <div>
-//                             <h3 className="text-white font-medium">{doc.title}</h3>
-//                             <p className="text-sm text-gray-400">
-//                               Added: {format(new Date(doc.createdAt), 'MMM dd, yyyy')}
-//                             </p>
-//                           </div>
-//                         </div>
-                        
-//                         <div className="flex items-center space-x-2">
-//                           <button
-//                             onClick={() => handleShare(doc.id)}
-//                             className="p-2 text-gray-400 hover:text-blue-400 rounded-lg hover:bg-blue-500/10 transition-colors"
-//                             title="Share document"
-//                           >
-//                             <FiShare2 className="w-4 h-4" />
-//                           </button>
-//                           <button
-//                             onClick={() => handleDelete(doc.id)}
-//                             className="p-2 text-gray-400 hover:text-red-400 rounded-lg hover:bg-red-500/10 transition-colors"
-//                             title="Delete document"
-//                           >
-//                             <FiTrash2 className="w-4 h-4" />
-//                           </button>
-//                         </div>
-//                       </div>
-//                     ))}
-//                   </div>
-//                 )}
-//               </div>
-//             );
-//           })}
-
-//           {Object.keys(documents).length === 0 && (
-//             <div className="text-center py-12 text-gray-400">
-//               No documents available
-//             </div>
-//           )}
-//         </div>
-//       </div>
-//     </div>
-//   )
-  
-// }
-
-// export default AdminPanel;
-// import { useState, useEffect } from 'react';
-// import { useAuth } from '../../hooks/useAuth';
-// import { format } from 'date-fns';
-// import { 
-//   FiUpload, 
-//   FiDownload,
-//   FiUsers, 
-//   FiFile, 
-//   FiTrash2, 
-//   FiShare2, 
-//   FiLoader, 
-//   FiSearch,
-//   FiChevronRight,
-//   FiUserPlus,
-//   FiEdit2,
-//   FiKey
-// } from 'react-icons/fi';
-// import api from '../../services/api';
-
-// function AdminPanel() {
-//   const [documents, setDocuments] = useState({});
-//   const [users, setUsers] = useState([]);
-//   const [expandedUsers, setExpandedUsers] = useState({});
-//   const [loading, setLoading] = useState(true);
-//   const [error, setError] = useState('');
-//   const [selectedFile, setSelectedFile] = useState(null);
-//   const [uploadTitle, setUploadTitle] = useState('');
-//   const [selectedUser, setSelectedUser] = useState('');
-//   const [searchTerm, setSearchTerm] = useState('');
-//   const [activeTab, setActiveTab] = useState('documents'); // 'documents' or 'users'
-//   const [newUser, setNewUser] = useState({ username: '', password: '', name: '', isAdmin: false });
-
-//   useEffect(() => {
-//     fetchData();
-//   }, []);
-
-//   const fetchData = async () => {
-//     try {
-//       setLoading(true);
-//       const [documentsRes, usersRes] = await Promise.all([
-//         api.get('/admin/documents'),
-//         api.get('/admin/users')
-//       ]);
-      
-//       const groupedDocs = groupDocumentsByUser(documentsRes.data || []);
-//       const initialExpandedState = Object.keys(groupedDocs).reduce((acc, userName) => {
-//         acc[userName] = false;
-//         return acc;
-//       }, {});
-      
-//       setDocuments(groupedDocs);
-//       setUsers(usersRes.data || []);
-//       setExpandedUsers(initialExpandedState);
-//     } catch (err) {
-//       setError('Failed to fetch data');
-//       console.error('Error:', err);
-//     } finally {
-//       setLoading(false);
-//     }
-//   };
-
-//   const groupDocumentsByUser = (docs) => {
-//     return docs.reduce((acc, doc) => {
-//       const userName = doc.sharedWith?.name || 'Unassigned';
-//       if (!acc[userName]) {
-//         acc[userName] = [];
-//       }
-//       acc[userName].push(doc);
-//       return acc;
-//     }, {});
-//   };
-
-//   const handleAddUser = async (e) => {
-//     e.preventDefault();
-//     try {
-//       await api.post('/admin/users', newUser);
-//       setNewUser({ username: '', password: '', name: '', isAdmin: false });
-//       fetchData();
-//       alert('User added successfully');
-//     } catch (err) {
-//       console.error('Error adding user:', err);
-//       alert('Failed to add user');
-//     }
-//   };
-
-//   const handleDeleteUser = async (userId) => {
-//     if (!window.confirm('Are you sure you want to delete this user?')) return;
-//     try {
-//       await api.delete(`/admin/users/${userId}`);
-//       fetchData();
-//       alert('User deleted successfully');
-//     } catch (err) {
-//       console.error('Error deleting user:', err);
-//       alert('Failed to delete user');
-//     }
-//   };
-
-//   const handleResetPassword = async (userId) => {
-//     const newPassword = prompt('Enter new password:');
-//     if (!newPassword) return;
-    
-//     try {
-//       await api.post(`/admin/users/${userId}/reset-password`, { password: newPassword });
-//       alert('Password reset successfully');
-//     } catch (err) {
-//       console.error('Error resetting password:', err);
-//       alert('Failed to reset password');
-//     }
-//   };
-
-//   const handleFileUpload = async (e) => {
-//         e.preventDefault();
-//         if (!selectedFile || !uploadTitle || !selectedUser) {
-//           alert('Please fill in all fields');
-//           return;
-//         }
-    
-//         const formData = new FormData();
-//         formData.append('file', selectedFile);
-//         formData.append('title', uploadTitle);
-//         formData.append('sharedWith', selectedUser);
-    
-//         try {
-//           await api.post('/admin/documents', formData, {
-//             headers: {
-//               'Content-Type': 'multipart/form-data',
-//             },
-//           });
-    
-//           setSelectedFile(null);
-//           setUploadTitle('');
-//           setSelectedUser('');
-//           fetchData();
-//           alert('Document uploaded successfully');
-//         } catch (err) {
-//           console.error('Upload error:', err);
-//           alert('Failed to upload document');
-//         }
-//       };
-//       const toggleUser = (userName) => {
-//         console.log('Toggling user:', userName); // Debug log
-//         setExpandedUsers(prev => ({
-//           ...prev,
-//           [userName]: !prev[userName]
-//         }));
-//       };
-      
-      
- 
-//   const handleDownload = async (s3Key, fileName) => {
-//     try {
-//       const token = localStorage.getItem('token');
-//       // Remove 'documents/' from the s3Key as it's already in the path
-//       const cleanS3Key = s3Key.replace('documents/', '');
-      
-//       const response = await fetch(`http://localhost:3000/admin/documents/download/${cleanS3Key}`, {
-//         headers: {
-//           'Authorization': `Bearer ${token}`
-//         }
-//       });
-
-//       if (!response.ok) {
-//         throw new Error('Download failed');
-//       }
-
-//       const blob = await response.blob();
-//       const url = window.URL.createObjectURL(blob);
-//       const link = document.createElement('a');
-//       link.href = url;
-//       link.download = fileName;
-//       document.body.appendChild(link);
-//       link.click();
-//       document.body.removeChild(link);
-//       window.URL.revokeObjectURL(url);
-//     } catch (err) {
-//       console.error('Error downloading document:', err);
-//       alert('Failed to download document. Please try again.');
-//     }
-//   };
-
-
-//   if (loading) {
-//     return (
-//       <div className="min-h-screen flex items-center justify-center bg-gray-900">
-//         <div className="flex items-center space-x-3 text-blue-500">
-//           <FiLoader className="w-6 h-6 animate-spin" />
-//           <span className="text-lg font-medium">Loading admin panel...</span>
-//         </div>
-//       </div>
-//     );
-//   }
-
-//   return (
-//     <div className="min-h-screen bg-gradient-to-br from-gray-900 to-gray-800 p-6">
-//       <div className="max-w-7xl mx-auto mt-20 text-center">
-//         <header className="mb-8">
-//           <h1 className="text-3xl font-bold text-white mb-2">Admin Dashboard</h1>
-//           <p className="text-gray-400">Manage documents and users</p>
-//         </header>
-
-//         {/* Tab Navigation */}
-//         <div className="flex space-x-4 mb-8">
-//           <button
-//             onClick={() => setActiveTab('documents')}
-//             className={`px-4 py-2 rounded-lg transition-colors ${
-//               activeTab === 'documents'
-//                 ? 'bg-blue-600 text-white'
-//                 : 'text-gray-400 hover:text-white'
-//             }`}
-//           >
-//             Documents
-//           </button>
-//           <button
-//             onClick={() => setActiveTab('users')}
-//             className={`px-4 py-2 rounded-lg transition-colors ${
-//               activeTab === 'users'
-//                 ? 'bg-blue-600 text-white'
-//                 : 'text-gray-400 hover:text-white'
-//             }`}
-//           >
-//             Users
-//           </button>
-//         </div>
-
-//         {activeTab === 'documents' ? (
-//           <>
-//             {/* Upload Section */}
-//             <div className="bg-white/5 backdrop-blur-lg rounded-xl p-6 mb-8">
-//               <h2 className="text-xl font-semibold text-white mb-4">Upload Document</h2>
-//               <form onSubmit={handleFileUpload} className="space-y-4">
-//                 <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
-//                   <div>
-//                     <label className="block text-sm font-medium text-gray-400 mb-1">Document Title</label>
-//                     <input
-//                       type="text"
-//                       value={uploadTitle}
-//                       onChange={(e) => setUploadTitle(e.target.value)}
-//                       className="w-full px-4 py-2 bg-white/5 border border-gray-700 rounded-lg focus:outline-none focus:border-blue-500 text-white placeholder-gray-400"
-//                       placeholder="Enter document title"
-//                     />
-//                   </div>
-                  
-//                   <div>
-//                     <label className="block text-sm font-medium text-gray-400 mb-1">Share With User</label>
-//                     <select
-//                       value={selectedUser}
-//                       onChange={(e) => setSelectedUser(e.target.value)}
-//                       className="w-full px-4 py-2 bg-white/5 border border-gray-700 rounded-lg focus:outline-none focus:border-blue-500 text-white"
-//                     >
-//                       <option value="">Select user</option>
-//                       {Array.isArray(users) && users.map(user => (
-//                         <option key={user.id} value={user.id}>{user.name}</option>
-//                       ))}
-//                     </select>
-//                   </div>
-
-//                   <div>
-//                     <label className="block text-sm font-medium text-gray-400 mb-1">File</label>
-//                     <input
-//                       type="file"
-//                       onChange={(e) => setSelectedFile(e.target.files[0])}
-//                       className="w-full px-4 py-2 bg-white/5 border border-gray-700 rounded-lg focus:outline-none focus:border-blue-500 text-white file:mr-4 file:py-2 file:px-4 file:rounded-lg file:border-0 file:text-sm file:font-semibold file:bg-blue-500 file:text-white hover:file:bg-blue-600"
-//                     />
-//                   </div>
-//                 </div>
-
-//                 <button
-//                   type="submit"
-//                   className="w-full md:w-auto px-6 py-2 bg-blue-600 hover:bg-blue-700 text-white font-medium rounded-lg transition-colors duration-200 flex items-center justify-center space-x-2"
-//                 >
-//                   <FiUpload className="w-4 h-4" />
-//                   <span>Upload Document</span>
-//                 </button>
-//               </form>
-//             </div>
-
-//             {/* Documents List */}
-//             <div className="space-y-4">
-//               {Object.entries(documents).map(([userName, userDocs]) => (
-//                 <div
-//                   key={userName}
-//                   className="bg-white/5 backdrop-blur-lg rounded-xl overflow-hidden"
-//                 >
-//                   <button
-//                     onClick={() => toggleUser(userName)}
-//                     className="w-full px-6 py-4 flex items-center justify-between text-white hover:bg-white/5 transition-colors"
-//                   >
-//                     <div className="flex items-center space-x-3">
-//                       <FiUsers className="w-5 h-5 text-blue-400" />
-//                       <span className="font-medium">{userName}</span>
-//                       <span className="text-sm text-gray-400">({userDocs.length} documents)</span>
-//                     </div>
-//                     <FiChevronRight
-//                       className={`w-5 h-5 transition-transform duration-200 ${
-//                         expandedUsers[userName] ? 'rotate-90' : ''
-//                       }`}
-//                     />
-//                   </button>
-//                   {expandedUsers[userName] && (
-//       <div className="border-t border-gray-700 divide-y divide-gray-700">
-//       {userDocs.map(doc => (
-//         <div
-//           key={doc.id}
-//           className="px-6 py-4 flex items-center justify-between hover:bg-white/5"
-//         >
-//           <div className="flex items-center space-x-4">
-//             <FiFile className="w-5 h-5 text-gray-400" />
-//             <div>
-//               <h3 className="text-white font-medium">{doc.title}</h3>
-//               <p className="text-sm text-gray-400">
-//                 Added: {format(new Date(doc.createdAt), 'MMM dd, yyyy')}
-//               </p>
-//             </div>
-//           </div>
-          
-//           <div className="flex items-center space-x-2">
-//             <button
-//               onClick={() => handleDownload(doc.s3Key, doc.title)}
-//               className="p-2 text-gray-400 hover:text-blue-400 rounded-lg hover:bg-blue-500/10 transition-colors"
-//               title="Download document"
-//             >
-//               <FiDownload className="w-4 h-4" />
-//               </button>
-//               <button
-//                 onClick={() => handleShare(doc.id)}
-//                 className="p-2 text-gray-400 hover:text-blue-400 rounded-lg hover:bg-blue-500/10 transition-colors"
-//                 title="Share document"
-//               >
-//                 <FiShare2 className="w-4 h-4" />
-//               </button>
-//               <button
-//                 onClick={() => handleDelete(doc.id)}
-//                 className="p-2 text-gray-400 hover:text-red-400 rounded-lg hover:bg-red-500/10 transition-colors"
-//                 title="Delete document"
-//               >
-//                 <FiTrash2 className="w-4 h-4" />
-//               </button>
-//             </div>
-//           </div>
-//                     ))}
-//                     </div>
-//                   )}
-//                 </div>
-//               ))}
-//             </div>
-//           </>
-//         ) : (
-//           // Users Management Section
-//           <div className="space-y-8">
-//             {/* Add New User Form */}
-//             <div className="bg-white/5 backdrop-blur-lg rounded-xl p-6">
-//               <h2 className="text-xl font-semibold text-white mb-4">Add New User</h2>
-//               <form onSubmit={handleAddUser} className="grid grid-cols-1 md:grid-cols-2 gap-4">
-//                 <div>
-//                   <label className="block text-sm font-medium text-gray-400 mb-1">Username</label>
-//                   <input
-//                     type="text"
-//                     value={newUser.username}
-//                     onChange={(e) => setNewUser({ ...newUser, username: e.target.value })}
-//                     className="w-full px-4 py-2 bg-white/5 border border-gray-700 rounded-lg focus:outline-none focus:border-blue-500 text-white"
-//                     required
-//                   />
-//                 </div>
-//                 <div>
-//                   <label className="block text-sm font-medium text-gray-400 mb-1">Password</label>
-//                   <input
-//                     type="password"
-//                     value={newUser.password}
-//                     onChange={(e) => setNewUser({ ...newUser, password: e.target.value })}
-//                     className="w-full px-4 py-2 bg-white/5 border border-gray-700 rounded-lg focus:outline-none focus:border-blue-500 text-white"
-//                     required
-//                   />
-//                 </div>
-//                 <div>
-//                   <label className="block text-sm font-medium text-gray-400 mb-1">Full Name</label>
-//                   <input
-//                     type="text"
-//                     value={newUser.name}
-//                     onChange={(e) => setNewUser({ ...newUser, name: e.target.value })}
-//                     className="w-full px-4 py-2 bg-white/5 border border-gray-700 rounded-lg focus:outline-none focus:border-blue-500 text-white"
-//                     required
-//                   />
-//                 </div>
-//                 <div className="flex items-center space-x-2">
-//                   <input
-//                     type="checkbox"
-//                     id="isAdmin"
-//                     checked={newUser.isAdmin}
-//                     onChange={(e) => setNewUser({ ...newUser, isAdmin: e.target.checked })}
-//                     className="w-4 h-4 rounded border-gray-700 text-blue-600 focus:ring-blue-500"
-//                   />
-//                   <label htmlFor="isAdmin" className="text-sm font-medium text-gray-400">
-//                     Admin User
-//                   </label>
-//                 </div>
-//                 <div className="md:col-span-2">
-//                   <button
-//                     type="submit"
-//                     className="w-full md:w-auto px-6 py-2 bg-blue-600 hover:bg-blue-700 text-white font-medium rounded-lg transition-colors duration-200 flex items-center justify-center space-x-2"
-//                   >
-//                     <FiUserPlus className="w-4 h-4" />
-//                     <span>Add User</span>
-//                   </button>
-//                 </div>
-//               </form>
-//             </div>
-
-//             {/* Users List */}
-//             <div className="bg-white/5 backdrop-blur-lg rounded-xl overflow-hidden">
-//               <div className="px-6 py-4 border-b border-gray-700">
-//                 <h2 className="text-xl font-semibold text-white">Users</h2>
-//               </div>
-//               <div className="divide-y divide-gray-700">
-//                 {Array.isArray(users) && users.map(user => (
-//                   <div
-//                     key={user.id}
-//                     className="px-6 py-4 flex items-center justify-between hover:bg-white/5"
-//                   >
-//                     <div className="flex items-center space-x-4">
-//                       <FiUsers className="w-5 h-5 text-gray-400" />
-//                       <div>
-//                         <h3 className="text-white font-medium">{user.name}</h3>
-//                         <p className="text-sm text-gray-400">@{user.username}</p>
-//                       </div>
-//                       {user.isAdmin && (
-//                         <span className="px-2 py-1 text-xs font-medium text-blue-400 bg-blue-400/10 rounded-full">
-//                           Admin
-//                         </span>
-//                       )}
-//                     </div>
-                    
-//                     <div className="flex items-center space-x-2">
-//                       <button
-//                         onClick={() => handleResetPassword(user.id)}
-//                         className="p-2 text-gray-400 hover:text-blue-400 rounded-lg hover:bg-blue-500/10 transition-colors"
-//                         title="Reset password"
-//                       >
-//                         <FiKey className="w-4 h-4" />
-//                       </button>
-//                       <button
-//                         onClick={() => handleDeleteUser(user.id)}
-//                         className="p-2 text-gray-400 hover:text-red-400 rounded-lg hover:bg-red-500/10 transition-colors"
-//                         title="Delete user"
-//                       >
-//                         <FiTrash2 className="w-4 h-4" />
-//                       </button>
-//                     </div>
-//                   </div>
-//                 ))}
-//               </div>
-//             </div>
-//           </div>
-//         )}
-//       </div>
-//     </div>
-//   );
-// }
-
-// export default AdminPanel;
\ No newline at end of file
+export default AdminPanel;
\ No newline at end of file