Merge pull request #62 from nashtech-garage/feat/remove-from-ws

Feat/remove from ws

Author: nguyenvanhadncntt

backend/app/repositories/WorkspaceRepository.scala

@@ -160,15 +160,14 @@ class WorkspaceRepository @Inject()(
     (for {
       uw <- userWorkspaces if uw.workspaceId === workspaceId
       u <- userTables if u.id === uw.userId
-      w <- workspaces if w.id === workspaceId && !w.isDeleted
     } yield (u, uw)).result.map { rows =>
       rows.map { case (user, userWorkspace) =>
         UserWorkspaceDTO(
           userId = user.id.getOrElse(0),
-          name = user.name,
-          email = user.email,
-          role = userWorkspace.role.toString,
-          joinedAt = Some(userWorkspace.joinedAt)
+          name = Option(user.name).getOrElse(""),
+          email = Option(user.email).getOrElse(""),
+          role = Option(userWorkspace.role.toString).getOrElse("")
+//          joinedAt = Option(userWorkspace.joinedAt)
         )
       }
     }

backend/conf/application.conf

@@ -126,7 +126,9 @@ play.mailer {
   port = ${?MAIL_PORT}
   tls = yes
   ssl = no
+  user = "358c8a28e1dbff"
   user = ${?MAIL_USER}
+  password = "225cc91d69eb94"
   password = ${?MAIL_PASSWORD}
 }
 

frontend/src/index.css

@@ -68,14 +68,22 @@
     box-sizing: border-box;
 }
 
+/* Smooth theme transitions - increased from 0.01s to 0.3s */
 * {
-  transition: background-color 0.01s ease, color 0.01s ease, border-color 0.01s ease;
+    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
+}
+
+/* Respect user's motion preferences for accessibility */
+@media (prefers-reduced-motion: reduce) {
+    * {
+        transition: none !important;
+        animation: none !important;
+    }
 }
 
 /* Scrollbar Track */
 ::-webkit-scrollbar {
     width: 6px;
-    /* or height for horizontal scrollbar */
 }
 
 /* Scrollbar Track Background */
@@ -90,7 +98,6 @@
     background-color: var(--scrollbar-thumb-bg);
     border-radius: 10px;
     border: 2px solid transparent;
-    /* space around thumb */
 }
 
 /* On hover */
@@ -100,7 +107,6 @@
 
 body {
     scrollbar-gutter: stable;
-    /* optional: prevent layout shift */
 }
 
 @theme inline {

frontend/src/pages/workspace/WorkspaceCollaborators.tsx

@@ -1,5 +1,5 @@
 import type { Guest, JoinRequest, Member } from "@/types/collaboration";
-import { UserPlus } from "lucide-react";
+import { UserPlus, ChevronLeft, ChevronRight, Users, UserCheck, UserPlus2 } from "lucide-react";
 import { useState } from "react";
 import MembersTab from "./member/MembersTab";
 import GuestsTab from "./member/GuestsTab";
@@ -9,13 +9,13 @@ import InviteModal from "./member/InviteModal";
 type TabType = 'members' | 'guests' | 'requests';
 
 const sampleMembers: Member[] = [
-    { id: '1', name: 'Ha.NguyenVan', username: '@hanguyenvan9', lastActive: 'November 2025', boardCount: 1, isAdmin: true },
-    { id: '2', name: 'Long.LeVanQuoc', username: '@longlevanquoc1', lastActive: 'October 2025', boardCount: 1, isAdmin: true },
-    { id: '3', name: 'Lâm Nhất Nguyên', username: '@nguyenlamnhat', lastActive: 'November 2025', boardCount: 2, isAdmin: true },
-    { id: '4', name: 'Nhien Tran Duc', username: '@nhientranduc', lastActive: 'November 2025', boardCount: 1, isAdmin: true },
-    { id: '5', name: 'Hiển Lương', username: '@tranhienluong2003', lastActive: 'November 2025', boardCount: 4, isAdmin: true },
-    { id: '6', name: 'Vu Tran', username: '@vutran308', lastActive: 'November 2025', boardCount: 3, isAdmin: true },
-    { id: '7', name: 'NguyenHuuTuan', username: '@tuungnhu12', lastActive: 'September 2025', boardCount: 1, isAdmin: true },
+    { userId: '1', name: 'Ha.NguyenVan', username: '@hanguyenvan9', lastActive: 'November 2025', boardCount: 1, isAdmin: true },
+    { userId: '2', name: 'Long.LeVanQuoc', username: '@longlevanquoc1', lastActive: 'October 2025', boardCount: 1, isAdmin: true },
+    { userId: '3', name: 'Lâm Nhất Nguyên', username: '@nguyenlamnhat', lastActive: 'November 2025', boardCount: 2, isAdmin: true },
+    { userId: '4', name: 'Nhien Tran Duc', username: '@nhientranduc', lastActive: 'November 2025', boardCount: 1, isAdmin: true },
+    { userId: '5', name: 'Hiển Lương', username: '@tranhienluong2003', lastActive: 'November 2025', boardCount: 4, isAdmin: true },
+    { userId: '6', name: 'Vu Tran', username: '@vutran308', lastActive: 'November 2025', boardCount: 3, isAdmin: true },
+    { userId: '7', name: 'NguyenHuuTuan', username: '@tuungnhu12', lastActive: 'September 2025', boardCount: 1, isAdmin: true },
 ];
 
 const sampleGuests: Guest[] = [];
@@ -25,54 +25,133 @@ const sampleRequests: JoinRequest[] = [];
 const WorkspaceCollaborators: React.FC = () => {
     const [activeTab, setActiveTab] = useState<TabType>('members');
     const [isInviteModalOpen, setIsInviteModalOpen] = useState(false);
+    const [isSidebarCollapsed, setIsSidebarCollapsed] = useState(false);
     const [members] = useState<Member[]>(sampleMembers);
     const [guests] = useState<Guest[]>(sampleGuests);
     const [requests] = useState<JoinRequest[]>(sampleRequests);
 
     const totalCollaborators = members.length + guests.length;
 
+    const getTabIcon = (tab: TabType) => {
+        switch (tab) {
+            case 'members': return <Users size={20} />;
+            case 'guests': return <UserCheck size={20} />;
+            case 'requests': return <UserPlus2 size={20} />;
+        }
+    };
+
+    const getTabLabel = (tab: TabType, count: number) => {
+        switch (tab) {
+            case 'members': return `Workspace members (${count})`;
+            case 'guests': return `Guests (${count})`;
+            case 'requests': return `Join requests (${count})`;
+        }
+    };
+
     return (
-        <div className="h-full bg-[#1F1F21] text-white p-8">
-            <div className="w-full">
-                <div className="flex justify-between items-center mb-6">
-                    <h1 className="text-xl font-bold">
-                        Collaborators <span className="text-gray-400">{totalCollaborators} / 10</span>
+        <div className="h-full bg-background text-foreground p-8 overflow-auto">
+            <div className="w-full max-w-7xl mx-auto">
+                <div className="flex justify-between items-center mb-6 animate-in fade-in slide-in-from-top-4 duration-500">
+                    <h1 className="text-xl font-bold text-foreground">
+                        Collaborators <span className="text-muted-foreground">{totalCollaborators} / 10</span>
                     </h1>
                     <button
                         onClick={() => setIsInviteModalOpen(true)}
-                        className="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded flex items-center gap-2"
+                        className="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded flex items-center gap-2 
+                                 transition-all duration-200 
+                                 hover:scale-105 hover:shadow-lg hover:shadow-blue-500/50
+                                 active:scale-95
+                                 group"
                     >
-                        <UserPlus size={18} />
+                        <UserPlus size={18} className="group-hover:scale-110 transition-transform duration-200" />
                         Invite Workspace members
                     </button>
                 </div>
 
                 <div className="flex gap-6">
-                    <div className="w-64 space-y-2">
+                    {/* Collapsible Sidebar */}
+                    <div
+                        className={`relative space-y-2 animate-in fade-in slide-in-from-left-4 duration-500 delay-100 
+                            ${isSidebarCollapsed ? 'w-16' : 'w-64'}
+                            transition-all duration-500 ease-in-out`}
+                    >
+                        {/* Collapse Toggle Button */}
+                        <button
+                            onClick={() => setIsSidebarCollapsed(!isSidebarCollapsed)}
+                            className="absolute -right-3 top-0 z-10 bg-blue-600 hover:bg-blue-700 text-white rounded-full p-1.5
+                                     transition-all duration-300 hover:scale-110 hover:rotate-180 shadow-lg active:scale-95"
+                            title={isSidebarCollapsed ? "Expand sidebar" : "Collapse sidebar"}
+                        >
+                            {isSidebarCollapsed ? <ChevronRight size={16} /> : <ChevronLeft size={16} />}
+                        </button>
+
+                        {/* Tab Buttons */}
                         <button
                             onClick={() => setActiveTab('members')}
-                            className={`cursor-pointer w-full text-left px-4 py-2 rounded ${activeTab === 'members' ? 'bg-blue-600 text-white' : 'text-gray-400 hover:bg-neutral-800'
-                                }`}
+                            className={`relative w-full ${isSidebarCollapsed ? 'px-2 justify-center' : 'px-4 justify-start'} text-left py-2 rounded overflow-hidden flex items-center gap-3
+                                transition-all duration-500 ease-in-out
+                                ${activeTab === 'members'
+                                    ? 'bg-blue-600 text-white shadow-lg shadow-blue-500/50'
+                                    : 'text-muted-foreground hover:bg-muted hover:text-foreground hover:scale-105'
+                                }
+                            `}
+                            title={isSidebarCollapsed ? getTabLabel('members', members.length) : undefined}
                         >
-                            Workspace members ({members.length})
+                            {activeTab === 'members' && (
+                                <div className="absolute inset-0 bg-gradient-to-r from-blue-600 to-blue-500 animate-in fade-in duration-300"></div>
+                            )}
+                            <span className="relative z-10 transition-transform duration-300">{getTabIcon('members')}</span>
+                            <span className={`relative z-10 whitespace-nowrap transition-all duration-500 ease-in-out
+                                ${isSidebarCollapsed ? 'opacity-0 w-0 overflow-hidden' : 'opacity-100'}`}>
+                                Workspace members ({members.length})
+                            </span>
                         </button>
+
                         <button
                             onClick={() => setActiveTab('guests')}
-                            className={`cursor-pointer w-full text-left px-4 py-2 rounded ${activeTab === 'guests' ? 'bg-blue-600 text-white' : 'text-gray-400 hover:bg-neutral-800'
-                                }`}
+                            className={`relative w-full ${isSidebarCollapsed ? 'px-2 justify-center' : 'px-4 justify-start'} text-left py-2 rounded overflow-hidden flex items-center gap-3
+                                transition-all duration-500 ease-in-out
+                                ${activeTab === 'guests'
+                                    ? 'bg-blue-600 text-white shadow-lg shadow-blue-500/50'
+                                    : 'text-muted-foreground hover:bg-muted hover:text-foreground hover:scale-105'
+                                }
+                            `}
+                            title={isSidebarCollapsed ? getTabLabel('guests', guests.length) : undefined}
                         >
-                            Guests ({guests.length})
+                            {activeTab === 'guests' && (
+                                <div className="absolute inset-0 bg-gradient-to-r from-blue-600 to-blue-500 animate-in fade-in duration-300"></div>
+                            )}
+                            <span className="relative z-10 transition-transform duration-300">{getTabIcon('guests')}</span>
+                            <span className={`relative z-10 whitespace-nowrap transition-all duration-500 ease-in-out
+                                ${isSidebarCollapsed ? 'opacity-0 w-0 overflow-hidden' : 'opacity-100'}`}>
+                                Guests ({guests.length})
+                            </span>
                         </button>
+
                         <button
                             onClick={() => setActiveTab('requests')}
-                            className={`cursor-pointer w-full text-left px-4 py-2 rounded ${activeTab === 'requests' ? 'bg-blue-600 text-white' : 'text-gray-400 hover:bg-neutral-800'
-                                }`}
+                            className={`relative w-full ${isSidebarCollapsed ? 'px-2 justify-center' : 'px-4 justify-start'} text-left py-2 rounded overflow-hidden flex items-center gap-3
+                                transition-all duration-500 ease-in-out
+                                ${activeTab === 'requests'
+                                    ? 'bg-blue-600 text-white shadow-lg shadow-blue-500/50'
+                                    : 'text-muted-foreground hover:bg-muted hover:text-foreground hover:scale-105'
+                                }
+                            `}
+                            title={isSidebarCollapsed ? getTabLabel('requests', requests.length) : undefined}
                         >
-                            Join requests ({requests.length})
+                            {activeTab === 'requests' && (
+                                <div className="absolute inset-0 bg-gradient-to-r from-blue-600 to-blue-500 animate-in fade-in duration-300"></div>
+                            )}
+                            <span className="relative z-10 transition-transform duration-300">{getTabIcon('requests')}</span>
+                            <span className={`relative z-10 whitespace-nowrap transition-all duration-500 ease-in-out
+                                ${isSidebarCollapsed ? 'opacity-0 w-0 overflow-hidden' : 'opacity-100'}`}>
+                                Join requests ({requests.length})
+                            </span>
                         </button>
                     </div>
 
-                    <div className="flex-1">
+                    {/* Main Content */}
+                    <div className="flex-1 min-w-0">
                         {activeTab === 'members' && <MembersTab members={members} />}
                         {activeTab === 'guests' && <GuestsTab guests={guests} />}
                         {activeTab === 'requests' && <JoinRequestsTab requests={requests} />}

frontend/src/pages/workspace/member/ConfirmationModal.tsx

@@ -0,0 +1,86 @@
+import { X } from "lucide-react";
+
+interface ConfirmationModalProps {
+    isOpen: boolean;
+    onClose: () => void;
+    onConfirm: () => void;
+    title: string;
+    message: string;
+    confirmText?: string;
+    cancelText?: string;
+    isLoading?: boolean;
+}
+
+const ConfirmationModal: React.FC<ConfirmationModalProps> = ({
+    isOpen,
+    onClose,
+    onConfirm,
+    title,
+    message,
+    confirmText = "Confirm",
+    cancelText = "Cancel",
+    isLoading = false
+}) => {
+    if (!isOpen) return null;
+
+    return (
+        <div
+            className="fixed inset-0 bg-black/50 flex items-center justify-center z-50 animate-in fade-in duration-200"
+            onClick={(e) => {
+                if (e.target === e.currentTarget && !isLoading) {
+                    onClose();
+                }
+            }}
+        >
+            <div className="bg-neutral-800 rounded-lg w-full max-w-md p-6 animate-in zoom-in-95 slide-in-from-bottom-4 duration-300">
+                <div className="flex justify-between items-center mb-4">
+                    <h2 className="text-white text-lg font-semibold">{title}</h2>
+                    <button
+                        onClick={onClose}
+                        className="text-gray-400 hover:text-white transition-all duration-200 hover:rotate-90 hover:scale-110"
+                        disabled={isLoading}
+                    >
+                        <X size={20} />
+                    </button>
+                </div>
+
+                <p className="text-gray-300 mb-6">{message}</p>
+
+                <div className="flex justify-end gap-3">
+                    <button
+                        onClick={onClose}
+                        disabled={isLoading}
+                        className="px-4 py-2 bg-neutral-700 hover:bg-neutral-600 text-white rounded 
+                                 transition-all duration-200 
+                                 hover:scale-105 hover:shadow-lg
+                                 active:scale-95
+                                 disabled:opacity-50 disabled:cursor-not-allowed disabled:hover:scale-100"
+                    >
+                        {cancelText}
+                    </button>
+                    <button
+                        onClick={onConfirm}
+                        disabled={isLoading}
+                        className="px-4 py-2 bg-red-600 hover:bg-red-700 text-white rounded 
+                                 transition-all duration-200 
+                                 hover:scale-105 hover:shadow-lg hover:shadow-red-500/50
+                                 active:scale-95
+                                 disabled:opacity-50 disabled:cursor-not-allowed disabled:hover:scale-100"
+                    >
+                        {isLoading ? (
+                            <span className="flex items-center gap-2">
+                                <svg className="animate-spin h-4 w-4" viewBox="0 0 24 24">
+                                    <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4" fill="none"></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>
+                                </svg>
+                                Removing...
+                            </span>
+                        ) : confirmText}
+                    </button>
+                </div>
+            </div>
+        </div>
+    );
+};
+
+export default ConfirmationModal;