- {/* Potential place for more stats like '3 Members', '5 Tasks', etc. */}
+
+
+
+
Welcome to {project.name}
+
+ {project.desc || "No description provided for this project."}
+
+
+ Created on {new Date(project.created_at).toLocaleDateString()}
+
-
- {/* Placeholder for future dashboard widgets */}
-
-
- Widget Placeholder
-
-
- Widget Placeholder
-
-
- Widget Placeholder
+ {/* Placeholder for future dashboard widgets */}
+
+
+ Widget Placeholder
+
+
+ Widget Placeholder
+
+
+ Widget Placeholder
+
diff --git a/Lb-web/src/features/project/pages/ProjectUserManagement.tsx b/Lb-web/src/features/project/pages/ProjectUserManagement.tsx
new file mode 100644
index 0000000..fb2e94e
--- /dev/null
+++ b/Lb-web/src/features/project/pages/ProjectUserManagement.tsx
@@ -0,0 +1,321 @@
+import { Button } from "@/components/ui/button";
+import { Plus, Loader2, Trash2 } from "lucide-react";
+import {
+ Dialog,
+ DialogContent,
+ DialogDescription,
+ DialogFooter,
+ DialogHeader,
+ DialogTitle,
+ DialogTrigger,
+} from "@/components/ui/dialog";
+import { Input } from "@/components/ui/input";
+import { useState, useEffect } from "react";
+import { useParams } from "react-router";
+import { projectService } from "../services/projectService";
+import { Label } from "@/components/ui/label";
+import { ProjectSidebar } from "../components/ProjectSidebar";
+
+
+
+export default function ProjectUserManagement() {
+ const { id } = useParams<{ id: string }>();
+ const projectId = id ? parseInt(id) : 0;
+
+ // We need to fetch basic project info for the sidebar
+ // Ideally this should be context or passed down, but for now fetching again or assuming cached
+ const [project, setProject] = useState<{
+ id: number;
+ name: string;
+ project_users?: {
+ id: number;
+ user_id: number;
+ role: string;
+ created_at: string;
+ user?: {
+ id: number;
+ username: string;
+ email: string;
+ role: string;
+ }
+ }[]
+ } | null>(null);
+
+ const [email, setEmail] = useState("");
+ const [role, setRole] = useState("staff");
+ const [open, setOpen] = useState(false);
+
+ // Invite loading state
+ const [loading, setLoading] = useState(false);
+ const [error, setError] = useState
(null);
+
+ // User list state
+ const [fetchingUsers, setFetchingUsers] = useState(true);
+
+ // Delete Modal State
+ const [deleteDialogOpen, setDeleteDialogOpen] = useState(false);
+ const [userToDelete, setUserToDelete] = useState<{ id: number; username: string; project_user_id: number } | null>(null);
+ const [deleteLoading, setDeleteLoading] = useState(false);
+
+ // Derived users list
+ const users = project?.project_users?.map(pu => ({
+ id: pu.user?.id || pu.user_id,
+ username: pu.user?.username || "Unknown",
+ email: pu.user?.email || "Unknown",
+ role: pu.role,
+ joined_at: pu.created_at,
+ project_user_id: pu.id
+ })) || [];
+
+ const handleDeleteClick = (user: { id: number; username: string; project_user_id: number }) => {
+ setUserToDelete(user);
+ setDeleteDialogOpen(true);
+ };
+
+ const confirmDelete = async () => {
+ if (!userToDelete) return;
+ setDeleteLoading(true);
+ try {
+ await projectService.removeProjectUser(userToDelete.project_user_id);
+ setDeleteDialogOpen(false);
+ setUserToDelete(null);
+ fetchProjectInfo();
+ } catch (error) {
+ console.error("Failed to remove user:", error);
+ } finally {
+ setDeleteLoading(false);
+ }
+ };
+
+ useEffect(() => {
+ if (projectId) {
+ fetchProjectInfo();
+ }
+ }, [projectId]);
+
+ const fetchProjectInfo = async () => {
+ setFetchingUsers(true);
+ try {
+ if (!id) return;
+ const data = await projectService.getProjectById(id);
+ setProject(data);
+ } catch (e) {
+ console.error(e);
+ } finally {
+ setFetchingUsers(false);
+ }
+ }
+
+
+
+ const handleInvite = async () => {
+ if (!email || !projectId) return;
+
+ setLoading(true);
+ setError(null);
+ try {
+ await projectService.inviteUser(projectId, email, role);
+
+ setOpen(false);
+ resetForm();
+ fetchProjectInfo(); // Refresh to show new member
+ // Show success toast?
+ } catch (err) {
+ console.error("Failed to invite user:", err);
+ setError("Failed to invite user. Please try again.");
+ } finally {
+ setLoading(false);
+ }
+ };
+
+ const resetForm = () => {
+ setEmail("");
+ setRole("user");
+ setError(null);
+ setLoading(false);
+ };
+
+ if (!project) {
+ return
;
+ }
+
+ return (
+
+ {/* Reuse Sidebar Layout */}
+
+
+
+
+
+
+
+
Project Members
+
Manage users who have access to this project.
+
+
+
{
+ setOpen(val);
+ if (!val) resetForm();
+ }}>
+
+
+
+
+
+
+ Invite to Project
+
+ Send an invitation to add a user to this project.
+
+
+
+
+
+ Email address
+
+
+ Role
+ setRole(e.target.value)}
+ >
+ Lead
+ Staff
+
+
+ {error &&
{error}
}
+
+
+ {loading ? (
+ <>
+
+
+
+
+
+
+
+
+ Remove User
+
+ Are you sure you want to remove {userToDelete?.username} from this project? This action cannot be undone.
+
+
+
+ setDeleteDialogOpen(false)}
+ disabled={deleteLoading}
+ >
+ Cancel
+
+
+ {deleteLoading ? (
+ <>
+
+
+
+
+
+
+ {fetchingUsers ? (
+
+
+ ) : users.length === 0 ? (
+
+
+
No members yet
+
+ Start by inviting users to collaborate on this project.
+
+
+ ) : (
+
+
+
+
+
+ Username
+ Email
+ Role
+ Joined
+ Actions
+
+
+
+ {users.map((user) => (
+
+ {user.username}
+ {user.email}
+
+
+ {user.role}
+
+
+
+ {new Date(user.joined_at).toLocaleDateString()}
+
+
+ handleDeleteClick(user)}
+ >
+ Remove
+
+
+
+ ))}
+
+
+
+
+ )}
+
+
+
=> {
const response = await api.get(`/protected/project/${id}`);
return response.data.data;
+ },
+ inviteUser: async (projectId: number, email: string, role: string) => {
+ const response = await api.post(`/protected/project/manage/invite/${projectId}`, { email, role });
+ return response.data;
+ },
+ removeProjectUser: async (projectUserId: number) => {
+ const response = await api.delete(`/protected/project/manage/remove/${projectUserId}`);
+ return response.data;
}
};
diff --git a/Lb-web/src/main.tsx b/Lb-web/src/main.tsx
index 424efa0..b901da2 100644
--- a/Lb-web/src/main.tsx
+++ b/Lb-web/src/main.tsx
@@ -12,6 +12,7 @@ import SettingsLayout from './features/admin-setting/layout/SettingsLayout.tsx'
import UserManagement from './features/admin-setting/pages/UserManagement.tsx'
import Appearance from './features/admin-setting/pages/Appearance.tsx'
import ProjectDashboard from './features/project/pages/ProjectDashboard.tsx'
+import ProjectUserManagement from './features/project/pages/ProjectUserManagement.tsx'
const router = createBrowserRouter([
{
@@ -64,7 +65,16 @@ const router = createBrowserRouter([
},
{
path: 'project/:id',
- element:
Your Projects
-
setIsCreateProjectOpen(true)}
- >
-
+ {isAdmin && (
+
setIsCreateProjectOpen(true)}
+ >
+
+ )}
{projects.map((project: { id: number; name: string; desc: string; created_at: string }) => (
diff --git a/cmd/server/main.go b/cmd/server/main.go
index c8ad29d..3ceb2f3 100644
--- a/cmd/server/main.go
+++ b/cmd/server/main.go
@@ -61,7 +61,7 @@ func SetupApp(db *repository.DBContainer, cfg *config.Config) Routes.Deps {
authHandler := handlers.NewAuthHandler(authService)
projectRepo := repository.NewProjectRepo(db)
- projectService := services.NewProjectService(projectRepo)
+ projectService := services.NewProjectService(projectRepo, userRepo)
projectHandler := handlers.NewProjectHandler(projectService)
return Routes.Deps{