feat(workspace): add WorkspaceEdit and WorkspaceCreate pages

src/pages/WorkspaceCreate.tsx

@@ -0,0 +1,383 @@
+import React, { useState, useEffect, useRef, Fragment } from 'react';
+import { useNavigate } from 'react-router-dom';
+import { useTranslation } from '../hooks/useTranslation';
+import { AlertCircle, UserPlus, Trash2, Shield } from 'lucide-react';
+import { Dialog, Transition } from '@headlessui/react';
+import { toast } from 'sonner';
+import { createWorkspace } from '../api/workspaces';
+import { searchUserByExactMobile, type SearchedUser } from '../api/users';
+import { useAppContext } from '../context/AppContext';
+import { Button } from '../components/ui/button';
+
+const toEnglishDigits = (str: string) => {
+  return str.replace(/[۰-۹]/g, (d) => '۰۱۲۳۴۵۶۷۸۹'.indexOf(d).toString())
+            .replace(/[٠-٩]/g, (d) => '٠١٢٣٤٥٦٧٨٩'.indexOf(d).toString());
+};
+
+interface LocalMember {
+  localId: string;
+  user: SearchedUser;
+  role: 'owner' | 'admin' | 'member' | 'guest';
+}
+
+export default function WorkspaceCreate() {
+  const navigate = useNavigate();
+  const { t, lang } = useTranslation();
+  const isFa = lang === 'fa';
+
+  const toPersianNum = (num: string | number | undefined | null) => {
+    if (num === null || num === undefined) return num;
+    if (!isFa) return num;
+    return num.toString().replace(/\d/g, d => '۰۱۲۳۴۵۶۷۸۹'[d as any]);
+  };
+
+  const { user } = useAppContext();
+  const currentUserId = user?.id || '';
+
+  // Workspace Info States
+  const [name, setName] = useState('');
+  const [description, setDescription] = useState('');
+  const [isSaving, setIsSaving] = useState(false);
+
+  // Members States (Local)
+  const [members, setMembers] = useState<LocalMember[]>([]);
+  const [searchQuery, setSearchQuery] = useState('');
+  const [searchResult, setSearchResult] = useState<SearchedUser | null>(null);
+  const [searchError, setSearchError] = useState(false);
+  const [isSearching, setIsSearching] = useState(false);
+  const [newMemberRole, setNewMemberRole] = useState<'owner' | 'admin' | 'member' | 'guest'>('member');
+
+  // Modal State
+  const [isDeleteDialogOpen, setIsDeleteDialogOpen] = useState(false);
+  const [memberIdToDelete, setMemberIdToDelete] = useState<string | null>(null);
+
+  const searchTimeoutRef = useRef<NodeJS.Timeout>();
+
+  useEffect(() => {
+    if (searchTimeoutRef.current) clearTimeout(searchTimeoutRef.current);
+    const cleanQuery = toEnglishDigits(searchQuery.trim());
+    setSearchError(false);
+
+    if (cleanQuery.length >= 10) {
+      searchTimeoutRef.current = setTimeout(async () => {
+        setIsSearching(true);
+        try {
+          const user = await searchUserByExactMobile(cleanQuery);
+          if (user && user.id) {
+            // Prevent finding self
+            if (user.id === currentUserId) {
+              setSearchResult(null);
+              setSearchError(true);
+              toast.error(t.workspace?.toast?.cannotAddSelf || "You are automatically the owner.");
+            } else {
+              setSearchResult(user);
+              setSearchError(false);
+            }
+          } else {
+            setSearchResult(null);
+            setSearchError(true);
+          }
+        } catch (error) {
+          setSearchResult(null);
+          setSearchError(true);
+        } finally {
+          setIsSearching(false);
+        }
+      }, 500);
+    } else {
+      setSearchResult(null);
+    }
+    return () => { if (searchTimeoutRef.current) clearTimeout(searchTimeoutRef.current); };
+  }, [searchQuery, currentUserId, t]);
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+    if (!name.trim()) return;
+    try {
+      setIsSaving(true);
+      
+      const payload = {
+        name,
+        description,
+        members: members.map(m => ({ user_id: m.user.id, role: m.role }))
+      };
+
+      await createWorkspace(payload);
+      toast.success(t.workspace?.toast?.successCreate || "Workspace created successfully.");
+      navigate('/workspaces');
+    } catch (error) {
+      toast.error(t.workspace?.toast?.errorCreate || "Failed to create workspace.");
+    } finally {
+      setIsSaving(false);
+    }
+  };
+
+  const handleAddMember = () => {
+    if (!searchResult) return;
+    
+    if (members.some(m => m.user.id === searchResult.id)) {
+      toast.error(t.workspace?.userAlreadyAdded || "User already added.");
+      return;
+    }
+
+    const newMember: LocalMember = {
+      localId: Math.random().toString(36).substr(2, 9),
+      user: searchResult,
+      role: newMemberRole
+    };
+
+    setMembers([...members, newMember]);
+    setSearchQuery('');
+    setSearchResult(null);
+    setNewMemberRole('member');
+  };
+
+  const openDeleteModal = (localId: string) => {
+    setMemberIdToDelete(localId);
+    setIsDeleteDialogOpen(true);
+  };
+
+  const handleDeleteMember = () => {
+    if (!memberIdToDelete) return;
+    setMembers(members.filter(m => m.localId !== memberIdToDelete));
+    setIsDeleteDialogOpen(false);
+    setMemberIdToDelete(null);
+  };
+
+  const handleChangeRole = (localId: string, newRole: string) => {
+    setMembers(members.map(m => m.localId === localId ? { ...m, role: newRole as any } : m));
+  };
+
+  // Creator has full rights to manage members before creating
+  const canManageMembers = true;
+  const isFirstOwner = true;
+
+  return (
+    <div className="max-w-2xl mx-auto p-6 space-y-6">
+      <h1 className="text-2xl font-bold text-slate-900 dark:text-white mb-6">
+        {t.workspace?.createTitle || "Create Workspace"}
+      </h1>
+      
+      <form onSubmit={handleSubmit} className="bg-white dark:bg-slate-900 rounded-xl p-6 border border-slate-200 dark:border-slate-800">
+        <div className="mb-4">
+          <label className="block text-sm font-medium text-slate-700 dark:text-slate-300 mb-1">
+            {t.workspace?.nameLabel || "Name"}
+          </label>
+          <input
+            type="text"
+            value={name}
+            onChange={(e) => setName(e.target.value)}
+            className="w-full px-4 py-2 border border-slate-300 dark:border-slate-700 rounded-lg bg-transparent text-slate-900 dark:text-white focus:ring-2 focus:ring-blue-500"
+            required
+          />
+        </div>
+        <div className="mb-6">
+          <label className="block text-sm font-medium text-slate-700 dark:text-slate-300 mb-1">
+            {t.workspace?.descriptionLabel || "Description"}
+          </label>
+          <textarea
+            value={description}
+            onChange={(e) => setDescription(e.target.value)}
+            placeholder={t.workspace?.descriptionPlaceholder || "Optional description..."}
+            className="w-full px-4 py-2 border border-slate-300 dark:border-slate-700 rounded-lg bg-transparent text-slate-900 dark:text-white focus:ring-2 focus:ring-blue-500 h-32 resize-none"
+          />
+        </div>
+        <div className="flex justify-end gap-3">
+          <Button
+            type="button"
+            variant="ghost"
+            onClick={() => navigate('/workspaces')}
+          >
+            {t.workspace?.cancel || "Cancel"}
+          </Button>
+          <Button
+            type="submit"
+            disabled={isSaving || !name.trim()}
+          >
+            {isSaving ? (t.workspace?.loading || "Saving...") : (t.workspace?.create || "Create")}
+          </Button>
+        </div>
+      </form>
+
+      <div className="bg-white dark:bg-slate-900 rounded-xl p-6 border border-slate-200 dark:border-slate-800">
+        <h2 className="text-lg font-semibold text-slate-900 dark:text-white mb-4">{ t.workspace?.members || "Members" }</h2>
+        
+        {canManageMembers && (
+          <div className="mb-6 space-y-3">
+            <input
+              type="text"
+              placeholder={t.workspace?.searchMemberPlaceholder || "Search user by exact mobile number..."}
+              value={searchQuery}
+              onChange={(e) => setSearchQuery(toEnglishDigits(e.target.value))}
+              className="w-full px-4 py-2 border border-slate-300 dark:border-slate-700 rounded-lg bg-transparent text-slate-900 dark:text-white focus:ring-2 focus:ring-blue-500"
+              dir="auto"
+            />
+            
+            {isSearching && <p className="text-sm text-slate-500">{t.workspace?.searching || "Searching..."}</p>}
+
+            {searchError && !isSearching && (
+              <div className="flex items-center gap-2 p-3 text-sm text-red-600 dark:text-red-400 bg-red-50 dark:bg-red-500/10 rounded-lg border border-red-100 dark:border-red-500/20">
+                <AlertCircle className="w-4 h-4" />
+                {t.workspace?.userNotFound || "No user found with this exact number."}
+              </div>
+            )}
+
+            {searchResult && !isSearching && (
+              <div className="flex flex-col sm:flex-row items-start sm:items-center gap-3 p-3 bg-blue-50 dark:bg-blue-500/10 border border-blue-200 dark:border-blue-500/30 rounded-lg">
+                <div className="flex items-center gap-3 flex-1 w-full">
+                  {searchResult.profile_picture ? (
+                    <img src={searchResult.profile_picture} alt={searchResult.first_name} className="w-10 h-10 rounded-full object-cover" />
+                  ) : (
+                    <div className="w-10 h-10 rounded-full bg-blue-200 dark:bg-blue-900/50 flex items-center justify-center text-blue-700 dark:text-blue-300 font-bold text-sm">
+                      {searchResult.first_name?.[0] || "U"}
+                    </div>
+                  )}
+                  <div className="flex-1 min-w-0">
+                    <p className="text-sm font-medium text-slate-900 dark:text-slate-100 truncate">
+                      {searchResult.first_name} {searchResult.last_name}
+                    </p>
+                    <p className="text-xs text-slate-500 dark:text-slate-400 truncate">
+                      {toPersianNum(searchResult.mobile)}
+                    </p>
+                  </div>
+                </div>
+                
+                <div className="flex items-center gap-2 w-full sm:w-auto mt-2 sm:mt-0">
+                  <select
+                    value={newMemberRole}
+                    onChange={(e) => setNewMemberRole(e.target.value as any)}
+                    className="flex-1 sm:flex-none text-sm bg-white dark:bg-slate-800 border border-slate-300 dark:border-slate-700 rounded-md px-2 py-1.5 outline-none focus:ring-2 focus:ring-blue-500 text-slate-700 dark:text-slate-300"
+                  >
+                    {isFirstOwner && <option value="owner">{t.workspace?.roles?.owner || "Owner"}</option>}
+                    <option value="admin">{t.workspace?.roles?.admin || "Admin"}</option>
+                    <option value="member">{t.workspace?.roles?.member || "Member"}</option>
+                    <option value="guest">{t.workspace?.roles?.guest || "Guest"}</option>
+                  </select>
+                  
+                  <Button
+                    type="button"
+                    size="sm"
+                    onClick={handleAddMember}
+                    disabled={members.some(m => m.user?.id === searchResult.id)}
+                    className="gap-1.5"
+                  >
+                    <UserPlus className="w-4 h-4" />
+                    {members.some(m => m.user?.id === searchResult.id) 
+                      ? (t.workspace?.userAlreadyAdded || "Added") 
+                      : (t.workspace?.addMember || "Add")}
+                  </Button>
+                </div>
+              </div>
+            )}
+          </div>
+        )}
+
+        <div className="space-y-3">
+          {members.map((m) => {
+            return (
+              <div key={m.localId} className="flex flex-col sm:flex-row sm:items-center justify-between p-3 border border-slate-200 dark:border-slate-800 rounded-lg gap-3">
+                <div className="flex items-center gap-3">
+                  {m.user?.profile_picture ? (
+                    <img src={m.user?.profile_picture} alt={m.user?.first_name} className="w-10 h-10 rounded-full object-cover" />
+                  ) : (
+                    <div className="w-10 h-10 rounded-full bg-slate-100 dark:bg-slate-800 flex items-center justify-center text-slate-600 dark:text-slate-400 font-bold text-sm">
+                      {m.user?.first_name?.[0] || m.user?.last_name?.[0] || "U"}
+                    </div>
+                  )}
+                  <div>
+                    <p className="text-sm font-medium text-slate-900 dark:text-slate-100">
+                      {`${m.user?.first_name || ''} ${m.user?.last_name || ''}`.trim() || 'Unknown'}
+                    </p>
+                    <p className="text-xs text-slate-500">{toPersianNum(m.user?.mobile)}</p>
+                  </div>
+                </div>
+
+                <div className="flex items-center gap-3 self-end sm:self-auto">
+                  <select
+                    value={m.role}
+                    onChange={(e) => handleChangeRole(m.localId, e.target.value)}
+                    className="text-sm bg-slate-50 dark:bg-slate-800 border border-slate-200 dark:border-slate-700 rounded-md px-2 py-1 outline-none focus:ring-2 focus:ring-blue-500 text-slate-700 dark:text-slate-300"
+                  >
+                    {isFirstOwner && <option value="owner">{t.workspace?.roles?.owner || "Owner"}</option>}
+                    <option value="admin">{t.workspace?.roles?.admin || "Admin"}</option>
+                    <option value="member">{t.workspace?.roles?.member || "Member"}</option>
+                    <option value="guest">{t.workspace?.roles?.guest || "Guest"}</option>
+                  </select>
+
+                  <Button
+                    type="button"
+                    variant="ghost"
+                    size="icon"
+                    onClick={() => openDeleteModal(m.localId)}
+                    className="h-8 w-8 text-slate-400 hover:text-red-500 hover:bg-red-50 dark:hover:bg-red-500/10"
+                    title={t.workspace?.removeMemberTitle || "Remove member"}
+                  >
+                    <Trash2 className="w-4 h-4" />
+                  </Button>
+                </div>
+              </div>
+            );
+          })}
+          {members.length === 0 && (
+            <p className="text-sm text-center text-slate-500 py-4">
+              {t.workspace?.noMembers || "No members added yet."}
+            </p>
+          )}
+        </div>
+      </div>
+
+      <Transition appear show={isDeleteDialogOpen} as={Fragment}>
+        <Dialog as="div" className="relative z-50" onClose={() => setIsDeleteDialogOpen(false)}>
+          <Transition.Child
+            as={Fragment}
+            enter="ease-out duration-300"
+            enterFrom="opacity-0"
+            enterTo="opacity-100"
+            leave="ease-in duration-200"
+            leaveFrom="opacity-100"
+            leaveTo="opacity-0"
+          >
+            <div className="fixed inset-0 bg-black/40 backdrop-blur-sm" />
+          </Transition.Child>
+
+          <div className="fixed inset-0 overflow-y-auto">
+            <div className="flex min-h-full items-center justify-center p-4">
+              <Transition.Child
+                as={Fragment}
+                enter="ease-out duration-300"
+                enterFrom="opacity-0 scale-95"
+                enterTo="opacity-100 scale-100"
+                leave="ease-in duration-200"
+                leaveFrom="opacity-100 scale-100"
+                leaveTo="opacity-0 scale-95"
+              >
+                <Dialog.Panel className="w-full max-w-md transform overflow-hidden rounded-2xl bg-white dark:bg-slate-900 p-6 shadow-xl transition-all border border-slate-200 dark:border-slate-800">
+                  <Dialog.Title as="h3" className="text-lg font-semibold text-slate-900 dark:text-white mb-2">
+                    {t.workspace?.confirmDeleteTitle || "Remove Member"}
+                  </Dialog.Title>
+                  <p className="text-sm text-slate-500 dark:text-slate-400">
+                    {t.workspace?.confirmDeleteMessage || "Are you sure you want to remove this member from the workspace?"}
+                  </p>
+                  <div className="mt-6 flex justify-end gap-3">
+                    <Button
+                      variant="secondary"
+                      onClick={() => setIsDeleteDialogOpen(false)}
+                    >
+                      {t.workspace?.cancel || "Cancel"}
+                    </Button>
+                    <Button
+                      variant="destructive"
+                      onClick={handleDeleteMember}
+                    >
+                      {t.workspace?.delete || "Delete"}
+                    </Button>
+                  </div>
+                </Dialog.Panel>
+              </Transition.Child>
+            </div>
+          </div>
+        </Dialog>
+      </Transition>
+    </div>
+  );
+}