From ab17c2bb926dc141cf09474ab3da8ce41a51e468 Mon Sep 17 00:00:00 2001
From: dimitar <taratur@gmail.com>
Date: Thu, 3 Apr 2025 01:27:07 +0200
Subject: [PATCH] translation, form fix

---
 .../src/components/adminPanel/AdminPanel.jsx  | 181 ++++++++++--------
 .../src/components/dashboard/Dashboard.jsx    |  70 ++++---
 .../src/components/documentUpload/Clients.jsx |   0
 .../documentUpload/DocumentUpload.jsx         |  32 ++--
 .../src/components/documentUpload/Users.jsx   |   0
 5 files changed, 161 insertions(+), 122 deletions(-)
 create mode 100644 frontend/src/components/documentUpload/Clients.jsx
 create mode 100644 frontend/src/components/documentUpload/Users.jsx

diff --git a/frontend/src/components/adminPanel/AdminPanel.jsx b/frontend/src/components/adminPanel/AdminPanel.jsx
index a90f68a..ba6c5d3 100644
--- a/frontend/src/components/adminPanel/AdminPanel.jsx
+++ b/frontend/src/components/adminPanel/AdminPanel.jsx
@@ -8,6 +8,7 @@ import {
 } from "../../services/api";
 import DocumentUpload from "../documentUpload/DocumentUpload";
 import { useNavigate } from "react-router-dom";
+import { motion } from "framer-motion";
 import {
   FiUsers,
   FiFile,
@@ -16,8 +17,10 @@ import {
   FiLoader,
   FiKey,
 } from "react-icons/fi";
+import { useRef } from "react";
 
 function AdminPanel() {
+  const createUserFormRef = useRef(null);
   const navigate = useNavigate();
   const [activeTab, setActiveTab] = useState("documents");
   const [users, setUsers] = useState([]);
@@ -87,15 +90,17 @@ function AdminPanel() {
     e.preventDefault();
     try {
       await createUser(newUser);
+      fetchData();
+    } catch (err) {
+      setError("Failed to create user");
+    } finally {
+      // setNewUser(initialUserFormState);
       setNewUser({
         name: "",
         email: "",
         password: "",
         isAdmin: false,
       });
-      fetchData();
-    } catch (err) {
-      setError("Failed to create user");
     }
   };
 
@@ -123,9 +128,9 @@ 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 },
+    { id: "documents", name: "Документи", icon: FiFile },
+    { id: "users", name: "Клиенти", icon: FiUsers },
+    { id: "upload", name: "Прикачи документ", icon: FiUpload },
   ];
 
   if (loading) {
@@ -146,9 +151,13 @@ function AdminPanel() {
           <h1 className="text-3xl font-bold text-white mb-2">
             Admin Dashboard
           </h1>
-          <p className="text-neutral-400">Manage users and documents</p>
+          <p className="text-neutral-400">Клиенти и доументи</p>
         </header>
-
+        {/* <motion.div
+          initial={{ opacity: 0, y: 20 }}
+          animate={{ opacity: 1, y: 0 }}
+          transition={{ duration: 0.5 }}
+        > */}
         {/* Tabs */}
         <div className="flex space-x-4 mb-6">
           {tabs.map(({ id, name, icon: Icon }) => (
@@ -180,12 +189,15 @@ function AdminPanel() {
           <div className="fixed inset-0 bg-black/50 backdrop-blur-sm flex items-center justify-center z-50">
             <div className="bg-primary-800 rounded-xl p-6 w-full max-w-md">
               <h3 className="text-xl font-bold text-white mb-4">
-                Reset Password for {resetPasswordModal.userName}
+                Ресетирај лозинка за корисникот
+              </h3>
+              <h3 className="text-xl font-bold text-white mb-4">
+                {resetPasswordModal.userName}
               </h3>
               <form onSubmit={handleResetPassword} className="space-y-4">
                 <input
                   type="password"
-                  placeholder="New Password"
+                  placeholder="Нова лозинка"
                   value={resetPasswordModal.newPassword}
                   onChange={(e) =>
                     setResetPasswordModal({
@@ -212,7 +224,7 @@ function AdminPanel() {
                     }
                     className="px-4 py-2 text-neutral-400 hover:text-white transition-colors"
                   >
-                    Cancel
+                    Откажи
                   </button>
                   <button
                     type="submit"
@@ -221,7 +233,7 @@ function AdminPanel() {
                     transition-colors shadow-lg"
                   >
                     <FiKey className="w-4 h-4" />
-                    <span>Reset Password</span>
+                    <span>Потврди</span>
                   </button>
                 </div>
               </form>
@@ -232,35 +244,40 @@ function AdminPanel() {
         <div className="grid gap-6">
           {activeTab === "documents" && (
             <div className="bg-primary-800/50 backdrop-blur-lg rounded-xl overflow-hidden shadow-xl">
-              <div className="overflow-x-auto">
-                <table className="w-full">
-                  <thead>
-                    <tr className="border-b border-primary-700">
-                      <th className="px-6 py-4 text-left text-sm text-neutral-400">
-                        Title
-                      </th>
-                      <th className="px-6 py-4 text-left text-sm text-neutral-400">
-                        Status
-                      </th>
-                      <th className="px-6 py-4 text-left text-sm text-neutral-400">
-                        Uploaded By
-                      </th>
-                      <th className="px-6 py-4 text-left text-sm text-neutral-400">
-                        Shared With
-                      </th>
-                      <th className="px-6 py-4 text-left text-sm text-neutral-400">
-                        Created At
-                      </th>
-                    </tr>
-                  </thead>
-                  <tbody>
-                    {documents.map((doc) => (
-                      <tr
-                        key={doc.id}
-                        className="border-b border-primary-700/50 hover:bg-primary-700/30"
-                      >
-                        <td className="px-6 py-4 text-white">{doc.title}</td>
-                        <td className="px-6 py-4">
+              <motion.div
+                initial={{ opacity: 0, y: 20 }}
+                animate={{ opacity: 1, y: 0 }}
+                transition={{ duration: 0.5 }}
+              >
+                <div className="overflow-x-auto">
+                  <table className="w-full">
+                    <thead>
+                      <tr className="border-b border-primary-700">
+                        <th className="px-6 py-4 text-left text-md text-neutral-400">
+                          Име
+                        </th>
+                        {/* <th className="px-6 py-4 text-left text-md text-neutral-400">
+                        Статус
+                      </th> */}
+                        <th className="px-6 py-4 text-left text-md text-neutral-400">
+                          Прикачено од
+                        </th>
+                        <th className="px-6 py-4 text-left text-md text-neutral-400">
+                          Споделено со
+                        </th>
+                        <th className="px-6 py-4 text-left text-md text-neutral-400">
+                          Креирано на
+                        </th>
+                      </tr>
+                    </thead>
+                    <tbody>
+                      {documents.map((doc) => (
+                        <tr
+                          key={doc.id}
+                          className="border-b border-primary-700/50 hover:bg-primary-700/30"
+                        >
+                          <td className="px-6 py-4 text-white">{doc.title}</td>
+                          {/* <td className="px-6 py-4">
                           <span
                             className={`px-3 py-1 rounded-full text-xs font-medium ${
                               doc.status === "completed"
@@ -274,30 +291,31 @@ function AdminPanel() {
                           >
                             {doc.status}
                           </span>
-                        </td>
-                        <td className="px-6 py-4 text-neutral-300">
-                          {doc.uploadedBy?.name} ({doc.uploadedBy?.email})
-                        </td>
-                        <td className="px-6 py-4 text-neutral-300">
-                          {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-neutral-300">
-                          {new Date(doc.createdAt).toLocaleString()}
-                        </td>
-                      </tr>
-                    ))}
-                  </tbody>
-                </table>
-              </div>
+                        </td> */}
+                          <td className="px-6 py-4 text-neutral-300">
+                            {doc.uploadedBy?.name} ({doc.uploadedBy?.email})
+                          </td>
+                          <td className="px-6 py-4 text-neutral-300">
+                            {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-neutral-300">
+                            {new Date(doc.createdAt).toLocaleString()}
+                          </td>
+                        </tr>
+                      ))}
+                    </tbody>
+                  </table>
+                </div>
+              </motion.div>
             </div>
           )}
 
@@ -305,27 +323,32 @@ function AdminPanel() {
             <>
               <div className="bg-primary-800/50 backdrop-blur-lg rounded-xl p-6 mb-6 shadow-xl">
                 <h2 className="text-xl font-bold text-white mb-4">
-                  Create New User
+                  Креирај корисник
                 </h2>
                 <form
+                  ref={createUserFormRef}
                   onSubmit={handleCreateUser}
                   className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4"
                 >
                   <input
                     type="text"
-                    placeholder="Name"
+                    placeholder="Име"
                     value={newUser.name}
+                    id="name"
+                    name="name"
+                    required
                     onChange={(e) =>
                       setNewUser({ ...newUser, name: e.target.value })
                     }
                     className="bg-primary-700/30 border border-primary-600 rounded-lg px-4 py-2
                     text-white placeholder-neutral-400 focus:outline-none focus:border-primary-500
                     focus:ring-1 focus:ring-primary-500"
-                    required
                   />
                   <input
                     type="email"
-                    placeholder="Email"
+                    id="email"
+                    name="email"
+                    placeholder="Мејл"
                     value={newUser.email}
                     onChange={(e) =>
                       setNewUser({ ...newUser, email: e.target.value })
@@ -336,8 +359,10 @@ function AdminPanel() {
                     required
                   />
                   <input
-                    type="password"
-                    placeholder="Password"
+                    // type="password"
+                    id="password"
+                    name="password"
+                    placeholder="Лозинка"
                     value={newUser.password}
                     onChange={(e) =>
                       setNewUser({ ...newUser, password: e.target.value })
@@ -359,7 +384,7 @@ function AdminPanel() {
                       focus:ring-primary-500"
                     />
                     <label htmlFor="isAdmin" className="text-white">
-                      Is Admin
+                      Дали е Администратор
                     </label>
                   </div>
                   <button
@@ -369,7 +394,7 @@ function AdminPanel() {
                     transition-colors shadow-lg"
                   >
                     <FiUserPlus className="w-4 h-4" />
-                    <span>Create User</span>
+                    <span>Креирај корисник</span>
                   </button>
                 </form>
               </div>
@@ -379,16 +404,16 @@ function AdminPanel() {
                   <thead>
                     <tr className="border-b border-primary-700">
                       <th className="px-6 py-4 text-left text-sm text-neutral-400">
-                        Name
+                        Име
                       </th>
                       <th className="px-6 py-4 text-left text-sm text-neutral-400">
-                        Email
+                        Мејл
                       </th>
                       <th className="px-6 py-4 text-left text-sm text-neutral-400">
-                        Role
+                        Улога
                       </th>
                       <th className="px-6 py-4 text-left text-sm text-neutral-400">
-                        Actions
+                        Ресетирај
                       </th>
                     </tr>
                   </thead>
@@ -421,7 +446,7 @@ function AdminPanel() {
                             className="flex items-center space-x-1 text-neutral-400 hover:text-white transition-colors"
                           >
                             <FiKey className="w-4 h-4" />
-                            <span>Reset Password</span>
+                            <span>Ресетирај лозинка</span>
                           </button>
                         </td>
                       </tr>
diff --git a/frontend/src/components/dashboard/Dashboard.jsx b/frontend/src/components/dashboard/Dashboard.jsx
index 815ccf1..5b19997 100644
--- a/frontend/src/components/dashboard/Dashboard.jsx
+++ b/frontend/src/components/dashboard/Dashboard.jsx
@@ -1,29 +1,35 @@
-import { useState, useEffect } from 'react';
-import { useAuth } from '../../hooks/useAuth';
-import { getSharedDocuments } from '../../services/api';
-import { format } from 'date-fns';
-import { FiFolder, FiFile, FiDownload, FiChevronRight, FiLoader } from 'react-icons/fi';
-import { downloadDocument } from '../../services/api';
+import { useState, useEffect } from "react";
+import { useAuth } from "../../hooks/useAuth";
+import { getSharedDocuments } from "../../services/api";
+import { format } from "date-fns";
+import {
+  FiFolder,
+  FiFile,
+  FiDownload,
+  FiChevronRight,
+  FiLoader,
+} from "react-icons/fi";
+import { downloadDocument } from "../../services/api";
 
 function Dashboard() {
   const [documents, setDocuments] = useState({});
   const [expandedFolders, setExpandedFolders] = useState({});
   const [loading, setLoading] = useState(true);
-  const [error, setError] = useState('');
+  const [error, setError] = useState("");
   const { user } = useAuth();
 
   useEffect(() => {
     const fetchDocuments = async () => {
       try {
         if (!user?.id) return;
-        
+
         const response = await getSharedDocuments(user.id);
         // Group the documents by company and date
         const groupedDocs = groupDocumentsByCompanyAndDate(response.data);
         setDocuments(groupedDocs);
       } catch (err) {
-        console.error('Error fetching documents:', err);
-        setError('Failed to fetch documents');
+        console.error("Error fetching documents:", err);
+        setError("Failed to fetch documents");
       } finally {
         setLoading(false);
       }
@@ -34,12 +40,12 @@ function Dashboard() {
 
   const groupDocumentsByCompanyAndDate = (docs) => {
     if (!Array.isArray(docs)) {
-      console.error('Expected array of documents, received:', docs);
+      console.error("Expected array of documents, received:", docs);
       return {};
     }
 
     return docs.reduce((acc, doc) => {
-      const folderName = `${doc.sharedWith?.name || 'Unknown'}-${format(new Date(doc.createdAt), 'yyyy-MM-dd')}`;
+      const folderName = `${doc.sharedWith?.name || user.name}-${format(new Date(doc.createdAt), "dd-MM-yyyy")}`;
       if (!acc[folderName]) {
         acc[folderName] = [];
       }
@@ -52,15 +58,15 @@ function Dashboard() {
     try {
       await downloadDocument(s3Key);
     } catch (err) {
-      console.error('Error downloading document:', err);
-      alert('Failed to download document. Please try again.');
+      console.error("Error downloading document:", err);
+      alert("Failed to download document. Please try again.");
     }
   };
 
   const toggleFolder = (folderName) => {
-    setExpandedFolders(prev => ({
+    setExpandedFolders((prev) => ({
       ...prev,
-      [folderName]: !prev[folderName]
+      [folderName]: !prev[folderName],
     }));
   };
 
@@ -69,7 +75,7 @@ function Dashboard() {
       <div className="min-h-screen flex items-center justify-center bg-primary-900">
         <div className="flex items-center space-x-3 text-primary-400">
           <FiLoader className="w-6 h-6 animate-spin" />
-          <span className="text-lg font-medium">Loading documents...</span>
+          <span className="text-lg font-medium">Се вчитува...</span>
         </div>
       </div>
     );
@@ -89,8 +95,12 @@ function Dashboard() {
     <div className="min-h-screen bg-gradient-to-br from-primary-900 to-primary-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">Your Documents</h1>
-          <p className="text-neutral-400">Access and manage your shared documents</p>
+          <h1 className="text-3xl font-bold text-white mb-2">
+            Вашите Документи
+          </h1>
+          <p className="text-neutral-400">
+            {/* Access and manage your shared documents */}
+          </p>
         </header>
 
         <div className="grid gap-6">
@@ -98,22 +108,24 @@ function Dashboard() {
             Object.entries(documents).map(([folderName, docs]) => (
               <div
                 key={folderName}
-                className="bg-neutral-900/80 backdrop-blur-lg rounded-xl overflow-hidden 
+                className="bg-neutral-900/80 backdrop-blur-lg rounded-xl overflow-hidden
                   transition-all duration-200 hover:bg-neutral-900/90 border border-neutral-800"
               >
                 <button
                   onClick={() => toggleFolder(folderName)}
-                  className="w-full px-6 py-4 flex items-center justify-between text-white 
+                  className="w-full px-6 py-4 flex items-center justify-between text-white
                     hover:bg-primary-900/20 transition-colors"
                 >
                   <div className="flex items-center space-x-3">
                     <FiFolder className="w-5 h-5 text-primary-400" />
                     <span className="font-medium">{folderName}</span>
-                    <span className="text-sm text-neutral-400">({docs.length} files)</span>
+                    <span className="text-sm text-neutral-400">
+                      ({docs.length} files)
+                    </span>
                   </div>
                   <FiChevronRight
                     className={`w-5 h-5 transition-transform duration-200 ${
-                      expandedFolders[folderName] ? 'rotate-90' : ''
+                      expandedFolders[folderName] ? "rotate-90" : ""
                     }`}
                   />
                 </button>
@@ -123,7 +135,7 @@ function Dashboard() {
                     {docs.map((doc) => (
                       <div
                         key={doc.id}
-                        className="px-6 py-3 flex items-center justify-between 
+                        className="px-6 py-3 flex items-center justify-between
                           hover:bg-primary-900/20 transition-colors"
                       >
                         <div className="flex items-center space-x-3">
@@ -132,7 +144,7 @@ function Dashboard() {
                         </div>
                         <button
                           onClick={() => handleDownload(doc.s3Key)}
-                          className="p-2 text-neutral-400 hover:text-primary-400 rounded-lg 
+                          className="p-2 text-neutral-400 hover:text-primary-400 rounded-lg
                             hover:bg-primary-500/10 transition-colors"
                           title="Download document"
                         >
@@ -145,8 +157,10 @@ function Dashboard() {
               </div>
             ))
           ) : (
-            <div className="text-center py-12 bg-neutral-900/80 backdrop-blur-lg rounded-xl 
-              border border-neutral-800">
+            <div
+              className="text-center py-12 bg-neutral-900/80 backdrop-blur-lg rounded-xl
+              border border-neutral-800"
+            >
               <p className="text-neutral-400">No documents available</p>
             </div>
           )}
@@ -156,4 +170,4 @@ function Dashboard() {
   );
 }
 
-export default Dashboard;
\ No newline at end of file
+export default Dashboard;
diff --git a/frontend/src/components/documentUpload/Clients.jsx b/frontend/src/components/documentUpload/Clients.jsx
new file mode 100644
index 0000000..e69de29
diff --git a/frontend/src/components/documentUpload/DocumentUpload.jsx b/frontend/src/components/documentUpload/DocumentUpload.jsx
index 975237f..d89b7b9 100644
--- a/frontend/src/components/documentUpload/DocumentUpload.jsx
+++ b/frontend/src/components/documentUpload/DocumentUpload.jsx
@@ -64,12 +64,12 @@ function DocumentUpload() {
     formData.append("uploadedById", uploadedById);
 
     // Debug log
-    console.log("Form Data:", {
-      title,
-      sharedWithId,
-      uploadedById,
-      fileName: file.name,
-    });
+    // console.log("Form Data:", {
+    //   title,
+    //   sharedWithId,
+    //   uploadedById,
+    //   fileName: file.name,
+    // });
 
     try {
       await uploadDocument(formData);
@@ -90,9 +90,9 @@ function DocumentUpload() {
       <div className="max-w-4xl mx-auto">
         <header className="mb-8 mt-20">
           <h1 className="text-3xl font-bold text-white mb-2">
-            Upload Document
+            Сподели документ
           </h1>
-          <p className="text-neutral-400">Share documents with your clients</p>
+          {/* <p className="text-neutral-400">Share documents with your clients</p> */}
         </header>
 
         <motion.div
@@ -104,8 +104,8 @@ function DocumentUpload() {
             <form onSubmit={handleSubmit} className="space-y-6">
               {/* Title Input */}
               <div>
-                <label className="block text-sm font-medium text-white mb-2">
-                  Document Title
+                <label className="block text-sm font-medium text-white mb-4">
+                  Наслов на документот
                 </label>
                 <input
                   type="text"
@@ -120,7 +120,7 @@ function DocumentUpload() {
               {/* File Input */}
               <div>
                 <label className="block text-sm font-medium text-white mb-2">
-                  File
+                  Документ
                 </label>
                 <div className="flex items-center justify-center w-full">
                   <label
@@ -130,7 +130,7 @@ function DocumentUpload() {
                   >
                     <FiUpload className="w-8 h-8 text-neutral-400" />
                     <span className="mt-2 text-sm text-neutral-400">
-                      {file ? file.name : "Select a file"}
+                      {file ? file.name : "Избери документ"}
                     </span>
                     <input
                       type="file"
@@ -145,7 +145,7 @@ function DocumentUpload() {
               {/* User Selection */}
               <div>
                 <label className="block text-sm font-medium text-white mb-2">
-                  Share with User
+                  Сподели со
                 </label>
                 <div className="relative">
                   <FiUsers className="absolute top-3 left-3 text-neutral-400" />
@@ -156,7 +156,7 @@ function DocumentUpload() {
                       text-white focus:outline-none focus:border-primary-500"
                     required
                   >
-                    <option value="">Select a user</option>
+                    <option value="">Избери корисник</option>
                     {availableUsers.map((user) => (
                       <option key={user.id} value={user.id}>
                         {user.name} ({user.email})
@@ -176,7 +176,7 @@ function DocumentUpload() {
               {/* Success Message */}
               {status === "completed" && (
                 <div className="p-4 bg-green-500/10 border border-green-500/20 rounded-lg text-green-200">
-                  Document uploaded successfully!
+                  Документот успешно е споделен!
                 </div>
               )}
 
@@ -199,7 +199,7 @@ function DocumentUpload() {
                     Upload Complete
                   </>
                 ) : (
-                  "Upload Document"
+                  "Прикачи"
                 )}
               </button>
             </form>
diff --git a/frontend/src/components/documentUpload/Users.jsx b/frontend/src/components/documentUpload/Users.jsx
new file mode 100644
index 0000000..e69de29