fix(projects): add translation and fix minor details in Projects create modal

src/components/projects/ProjectCreateModal.tsx

@@ -6,6 +6,8 @@ import { getClients } from "../../api/clients";
 import { useWorkspace } from "../../context/WorkspaceContext";
 import { Select } from "../ui/Select";
 import { Input } from "../ui/input";
+import { TextAreaInput } from "../ui/TextAreaInput";
+import { toast } from "sonner";
 
 interface ProjectCreateModalProps {
   isOpen: boolean;
@@ -23,12 +25,15 @@ export const ProjectCreateModal: React.FC<ProjectCreateModalProps> = ({ isOpen,
     color: "#3B82F6",
     client: "",
   });
+  const [loadingClients, setLoadingClients] = useState(false);
 
   useEffect(() => {
     if (isOpen && activeWorkspace) {
+      setLoadingClients(true);
       getClients(activeWorkspace.id)
         .then((res: any) => setClients(res.results || res))
-        .catch(console.error);
+        .catch((err) => toast.error(t.projects?.clientFetchError || err.message || "Failed to load clients"))
+        .finally(() => setLoadingClients(false));
     }
   }, [isOpen, activeWorkspace]);
 
@@ -62,46 +67,75 @@ export const ProjectCreateModal: React.FC<ProjectCreateModalProps> = ({ isOpen,
         {t.actions?.cancel || "Cancel"}
       </button>
       <button onClick={handleSubmit} disabled={loading || !formData.name} type="button" className="px-4 py-2 text-sm font-medium text-white bg-blue-600 rounded-lg hover:bg-blue-700 disabled:opacity-50">
-        {loading ? "..." : t.projects.create_project}
+        {loading ? "..." : t.projects?.create}
       </button>
     </>
   );
 
   return (
-    <Modal isOpen={isOpen} onClose={onClose} title={t.projects.create_project} footer={footer}>
+    <Modal isOpen={isOpen} onClose={onClose} title={t.projects?.createProject} footer={footer}>
       <form onSubmit={handleSubmit} className="space-y-4">
+        {/* ردیف اول: عنوان و انتخاب رنگ */}
+        <div className="flex items-end gap-3">
+          <div className="flex-1">
+            <label className="block mb-1 text-sm font-medium text-slate-700 dark:text-slate-300">
+              {t.projects.titleLabel}
+            </label>
+            <Input
+              type="text"
+              required
+              value={formData.name}
+              placeholder={t.projects?.titlePlaceholder}
+              onChange={(e) => setFormData({ ...formData, name: e.target.value })}
+              className="w-full px-3 py-2 border rounded-lg dark:bg-slate-800 dark:border-slate-700 outline-none focus:ring-2 focus:ring-blue-500"
+            />
+          </div>
+          
+          <div className="flex flex-col items-center shrink-0">
+            {/* یک لیبل مخفی برای هم‌تراز شدن دقیق دایره با اینپوت */}
+            <div className="mb-1 text-sm font-medium invisible">C</div>
+            <div 
+              className="relative w-10 h-10 rounded-full overflow-hidden border border-slate-300 dark:border-slate-600 shadow-sm cursor-pointer shrink-0"
+              title={t.projects.colorLabel}
+            >
+              <input
+                type="color"
+                value={formData.color}
+                onChange={(e) => setFormData({ ...formData, color: e.target.value })}
+                className="absolute -top-2 -left-2 w-16 h-16 cursor-pointer"
+              />
+            </div>
+          </div>
+        </div>
+
         <div>
-          <label className="block mb-1 text-sm font-medium text-slate-700 dark:text-slate-300">{t.projects.project_name}</label>
+          <label className="block mb-1 text-sm font-medium text-slate-700 dark:text-slate-300">
-          <Input
+            {t.projects?.descriptionLabel || 'Description'}
-            type="text"
+          </label>
-            required
+          <TextAreaInput
-            value={formData.name}
+            value={formData.description}
-            onChange={(e) => setFormData({ ...formData, name: e.target.value })}
+            placeholder={t.projects?.titlePlaceholder}
-            className="w-full px-3 py-2 border rounded-lg dark:bg-slate-800 dark:border-slate-700 outline-none focus:ring-2 focus:ring-blue-500"
+            onChange={(e) => setFormData({ ...formData, description: e.target.value })}
+            className="w-full px-3 py-2 border rounded-lg dark:text-slate-100 dark:bg-slate-800 dark:border-slate-700 outline-none focus:ring-2 focus:ring-blue-500 min-h-[80px] resize-y"
           />
         </div>
+
         <div>
-          <label className="block mb-1 text-sm font-medium text-slate-700 dark:text-slate-300">{t.projects.select_client}</label>
+          <label className="block mb-1 text-sm font-medium text-slate-700 dark:text-slate-300">
+            {t.projects.clientLabel}
+          </label>
           <Select
             value={formData.client}
             onChange={(val) => setFormData({ ...formData, client: val })}
             options={[
-              { value: "", label: t.projects.no_client },
+              { value: "", label: t.projects.noClient },
               ...clients.map(c => ({ value: c.id, label: c.name }))
             ]}
+            isLoading={loadingClients}
             className="w-full"
             buttonClassName="w-full"
           />
         </div>
-        <div>
-          <label className="block mb-1 text-sm font-medium text-slate-700 dark:text-slate-300">{t.projects.project_color}</label>
-          <Input
-            type="color"
-            value={formData.color}
-            onChange={(e) => setFormData({ ...formData, color: e.target.value })}
-            className="w-14 h-10 p-1 border rounded-lg cursor-pointer dark:bg-slate-800 dark:border-slate-700"
-          />
-        </div>
       </form>
     </Modal>
   );

src/components/projects/ProjectEditModal.tsx

@@ -7,6 +7,8 @@ import { useWorkspace } from "../../context/WorkspaceContext";
 import { Archive, RefreshCcw } from "lucide-react";
 import { Select } from "../ui/Select";
 import { Input } from "../ui/input";
+import { TextAreaInput } from "../ui/TextAreaInput";
+import { toast } from "sonner";
 
 interface ProjectEditModalProps {
   isOpen: boolean;
@@ -25,10 +27,15 @@ export const ProjectEditModal: React.FC<ProjectEditModalProps> = ({ isOpen, onCl
     color: "#3B82F6",
     client: "",
   });
+  const [loadingClients, setLoadingClients] = useState(false);
 
   useEffect(() => {
     if (isOpen && activeWorkspace) {
-      getClients(activeWorkspace.id).then((res: any) => setClients(res.results || res));
+      setLoadingClients(true);
+      getClients(activeWorkspace.id)
+        .then((res: any) => setClients(res.results || res))
+        .catch((err) => toast.error(t.projects?.clientFetchError || err.message || "Failed to load clients"))
+        .finally(() => setLoadingClients(false));
     }
   }, [isOpen, activeWorkspace]);
 
@@ -107,29 +114,66 @@ export const ProjectEditModal: React.FC<ProjectEditModalProps> = ({ isOpen, onCl
   );
 
   return (
-    <Modal isOpen={isOpen} onClose={onClose} title={t.projects.edit_project} footer={footer}>
+    <Modal isOpen={isOpen} onClose={onClose} title={t.projects.editProject} footer={footer}>
-      <form onSubmit={handleSubmit} className="space-y-4">
+      <form onSubmit={handleSubmit} className="space-y-4 mb-6">
-        <div>
+        <div className="flex items-end gap-3">
-          <label className="block mb-1 text-sm font-medium text-slate-700 dark:text-slate-300">{t.projects.project_name}</label>
+          <div className="flex-1">
-          <Input type="text" required value={formData.name} onChange={(e) => setFormData({ ...formData, name: e.target.value })} className="w-full px-3 py-2 border rounded-lg dark:bg-slate-800 dark:border-slate-700 outline-none focus:ring-2 focus:ring-blue-500" />
+            <label className="block mb-1 text-sm font-medium text-slate-700 dark:text-slate-300">
+              {t.projects.titleLabel}
+            </label>
+            <Input
+              type="text"
+              required
+              value={formData.name}
+              placeholder={t.projects?.titlePlaceholder}
+              onChange={(e) => setFormData({ ...formData, name: e.target.value })}
+              className="w-full px-3 py-2 border rounded-lg dark:bg-slate-800 dark:border-slate-700 outline-none focus:ring-2 focus:ring-blue-500"
+            />
+          </div>
+          
+          <div className="flex flex-col items-center shrink-0">
+            <div className="mb-1 text-sm font-medium invisible">C</div>
+            <div 
+              className="relative w-10 h-10 rounded-full overflow-hidden border border-slate-300 dark:border-slate-600 shadow-sm cursor-pointer shrink-0"
+              title={t.projects.colorLabel}
+            >
+              <input
+                type="color"
+                value={formData.color}
+                onChange={(e) => setFormData({ ...formData, color: e.target.value })}
+                className="absolute -top-2 -left-2 w-16 h-16 cursor-pointer"
+              />
+            </div>
+          </div>
         </div>
+
         <div>
-          <label className="block mb-1 text-sm font-medium text-slate-700 dark:text-slate-300">{t.projects.select_client}</label>
+          <label className="block mb-1 text-sm font-medium text-slate-700 dark:text-slate-300">
+            {t.projects?.descriptionLabel || 'Description'}
+          </label>
+          <TextAreaInput
+            value={formData.description}
+            placeholder={t.projects?.titlePlaceholder}
+            onChange={(e) => setFormData({ ...formData, description: e.target.value })}
+            className="w-full px-3 py-2 border rounded-lg dark:text-slate-100 dark:bg-slate-800 dark:border-slate-700 outline-none focus:ring-2 focus:ring-blue-500 min-h-[80px] resize-y"
+          />
+        </div>
+
+        <div>
+          <label className="block mb-1 text-sm font-medium text-slate-700 dark:text-slate-300">
+            {t.projects.clientLabel}
+          </label>
           <Select
             value={formData.client}
             onChange={(val) => setFormData({ ...formData, client: val })}
             options={[
-              { value: "", label: t.projects.no_client },
+              { value: "", label: t.projects.noClient },
               ...clients.map(c => ({ value: c.id, label: c.name }))
             ]}
+            isLoading={loadingClients}
             className="w-full"
             buttonClassName="w-full"
           />
-
-        </div>
-        <div>
-          <label className="block mb-1 text-sm font-medium text-slate-700 dark:text-slate-300">{t.projects.project_color}</label>
-          <Input type="color" value={formData.color} onChange={(e) => setFormData({ ...formData, color: e.target.value })} className="w-14 h-10 p-1 border rounded-lg cursor-pointer dark:bg-slate-800 dark:border-slate-700" />
         </div>
       </form>
     </Modal>

src/components/ui/Select.tsx

@@ -1,5 +1,6 @@
 import React, { useState, useRef, useEffect } from "react";
 import { createPortal } from "react-dom";
+import { useTranslation } from "../../hooks/useTranslation";
 
 export interface SelectOption {
   value: string | number;
@@ -12,6 +13,9 @@ interface SelectProps {
   options: SelectOption[];
   className?: string;
   buttonClassName?: string;
+  isLoading?: boolean;
+  disabled?: boolean;
+  loadingText?: string;
 }
 
 export const Select: React.FC<SelectProps> = ({
@@ -20,12 +24,17 @@ export const Select: React.FC<SelectProps> = ({
   options,
   className = "",
   buttonClassName = "",
+  isLoading = false,
+  disabled = false,
+  loadingText = "",
 }) => {
   const [isOpen, setIsOpen] = useState(false);
   const [dropdownStyle, setDropdownStyle] = useState<React.CSSProperties>({});
   const buttonRef = useRef<HTMLButtonElement>(null);
   const dropdownRef = useRef<HTMLDivElement>(null);
+  const { t } = useTranslation()
 
+  loadingText = loadingText || t.loadingText
   // Close dropdown when clicking outside
   useEffect(() => {
     const handleClickOutside = (event: MouseEvent) => {
@@ -85,34 +94,36 @@ export const Select: React.FC<SelectProps> = ({
   }, [isOpen]);
 
   const selectedOption = options.find((o) => o.value === value) || options[0];
+  const isDisabled = disabled || isLoading;
 
   return (
     <div className={`relative inline-block ${className}`}>
       <button
         ref={buttonRef}
         type="button"
-        onClick={() => setIsOpen(!isOpen)}
+        disabled={isDisabled}
-        className={`flex items-center justify-between bg-white dark:bg-slate-800 border border-slate-300 dark:border-slate-700 rounded-md px-3 py-2 text-sm text-slate-700 dark:text-slate-300 outline-none focus:ring-2 focus:ring-blue-500 ${buttonClassName}`}
+        onClick={() => !isDisabled && setIsOpen(!isOpen)}
+        className={`flex items-center justify-between bg-white dark:bg-slate-800 border border-slate-300 dark:border-slate-700 rounded-md px-3 py-2 text-sm text-slate-700 dark:text-slate-300 outline-none focus:ring-2 focus:ring-blue-500 disabled:opacity-50 disabled:cursor-not-allowed ${buttonClassName}`}
       >
-        <span className="truncate">{selectedOption?.label}</span>
+        <span className="truncate">{isLoading ? loadingText : selectedOption?.label}</span>
-        <svg
+        {isLoading ? (
-          className={`w-4 h-4 ml-2 rtl:ml-0 rtl:mr-2 transition-transform ${
+          <svg className="w-4 h-4 ml-2 rtl:ml-0 rtl:mr-2 animate-spin text-slate-400" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
-            isOpen ? "rotate-180" : ""
+            <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4"></circle>
-          }`}
+            <path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
-          fill="none"
+          </svg>
-          stroke="currentColor"
+        ) : (
-          viewBox="0 0 24 24"
+          <svg
-        >
+            className={`w-4 h-4 ml-2 rtl:ml-0 rtl:mr-2 transition-transform ${isOpen ? "rotate-180" : ""}`}
-          <path
+            fill="none"
-            strokeLinecap="round"
+            stroke="currentColor"
-            strokeLinejoin="round"
+            viewBox="0 0 24 24"
-            strokeWidth="2"
+          >
-            d="M19 9l-7 7-7-7"
+            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M19 9l-7 7-7-7"></path>
-          ></path>
+          </svg>
-        </svg>
+        )}
       </button>
 
-      {isOpen &&
+      {isOpen && !isDisabled &&
         createPortal(
           <div
             ref={dropdownRef}

src/locales/en.ts

@@ -9,6 +9,7 @@ export const en = {
   save: "Save",
   lightMode: "Light Mode",
   darkMode: "Dark Mode",
+  loadingText: "Loading...",
 
   actions: {
     create: "Create",
@@ -259,6 +260,12 @@ export const en = {
     archived: "Archived Projects",
     createNew: "Create New",
     searchPlaceholder: "Search projects...",
+    titlePlaceholder: "Enter title",
+    descriptionPlaceholder: "Enter desription",
+    titleLabel: "Title",
+    clientLabel: "Client",
+    colorLabel: "Color",
+    descriptionLabel: "Description",
     loading: "Loading...",
     client: "Client",
     noClient: "No client",
@@ -268,6 +275,12 @@ export const en = {
     deleteSuccess: "Project deleted successfully",
     deleteError: "Failed to delete project",
     cancel: "Cancel",
+    create: "Create",
+    createProject: "Create New Project",
+    editProject: "Edit Project",
+    restore: "Restore",
+    archive: "Archive",
+    clientFetchError: "Failed to load clients.",
   },
 
 }

src/locales/fa.ts

@@ -9,6 +9,7 @@ export const fa = {
   save: "ذخیره",
   lightMode: "حالت روشن",
   darkMode: "حالت تاریک",
+  loadingText: "در حال بارگزاری...",
 
   actions: {
     create: "ایجاد",
@@ -253,9 +254,15 @@ export const fa = {
     title: "پروژه‌ها",
     description: (workspaceName: string) => `مدیریت پروژه‌ها برای ${workspaceName}`,
     active: "پروژه‌های فعال",
-    archived: "پروژه‌های آرشیو شده",
+    archived: "پروژه‌های بایگانی شده",
     createNew: "ایجاد پروژه جدید",
     searchPlaceholder: "جستجوی پروژه‌ها...",
+    titlePlaceholder: "عنوان پروژه",
+    descriptionPlaceholder: "توضیحات پروژه",
+    titleLabel: "عنوان",
+    descriptionLabel: "توضیحات",
+    clientLabel: "مشتری",
+    colorLabel: "رنگ",
     loading: "در حال بارگذاری...",
     client: "مشتری",
     noClient: "بدون مشتری",
@@ -264,7 +271,12 @@ export const fa = {
     deleteWarning: "برای تایید حذف، لطفاً نام پروژه را تایپ کنید:",
     deleteSuccess: "پروژه با موفقیت حذف شد",
     deleteError: "خطا در حذف پروژه",
+    create: "ایجاد",
     cancel: "انصراف",
+    createProject: "ایجاد پروژه",
+    editProject: "ویرایش پروژه",
+    restore: "بازیابی",
+    archive: "بایگانی",
+    clientFetchError: "خطا در دریافت لیست مشتریان.",
   },
-
 }

src/pages/Projects.tsx

@@ -161,8 +161,15 @@ export const Projects: React.FC = () => {
                       </CardTitle>
                     </div>
                     <p className="text-sm text-slate-500 dark:text-slate-400 line-clamp-1">
-                      {project.client ? `${t.projects?.client || "Client"}: ${project.client.name}` : t.projects?.noDescription || 'No description'}
+                      {project.client ? `${t.projects?.client || "Client"}: ${project.client.name}` : t.projects?.noClient || 'No client'}
                     </p>
+
+                    {project.description && (
+                      <p className="text-sm text-slate-600 dark:text-slate-300 mt-2 line-clamp-2">
+                        {project.description}
+                      </p>
+                    )}
+
                   </div>
 
                   <div className="flex items-center gap-2 shrink-0">