orcheo-canvas 0.0.1

package/src/features/workflow/components/dialogs/user-role-management/invite-user-dialog.tsx

@@ -0,0 +1,152 @@
+import React, { useState } from "react";
+import { Button } from "@/design-system/ui/button";
+import { Input } from "@/design-system/ui/input";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from "@/design-system/ui/dialog";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/design-system/ui/select";
+import { UserPlus } from "lucide-react";
+import type { User } from "@/features/workflow/components/dialogs/user-role-management/user-role-types";
+
+interface InviteUserDialogProps {
+  onInviteUser?: (
+    user: Omit<User, "id" | "avatar" | "status" | "lastActive">,
+  ) => void;
+}
+
+export default function InviteUserDialog({
+  onInviteUser,
+}: InviteUserDialogProps) {
+  const [isOpen, setIsOpen] = useState(false);
+  const [newUser, setNewUser] = useState<{
+    name: string;
+    email: string;
+    role: User["role"];
+  }>({
+    name: "",
+    email: "",
+    role: "editor",
+  });
+
+  const resetForm = () => {
+    setNewUser({
+      name: "",
+      email: "",
+      role: "editor",
+    });
+  };
+
+  const handleInvite = () => {
+    if (!newUser.name.trim() || !newUser.email.trim()) {
+      return;
+    }
+
+    onInviteUser?.(newUser);
+    resetForm();
+    setIsOpen(false);
+  };
+
+  const handleOpenChange = (nextOpen: boolean) => {
+    if (!nextOpen) {
+      resetForm();
+    }
+    setIsOpen(nextOpen);
+  };
+
+  return (
+    <Dialog open={isOpen} onOpenChange={handleOpenChange}>
+      <DialogTrigger asChild>
+        <Button>
+          <UserPlus className="mr-2 h-4 w-4" />
+          Invite User
+        </Button>
+      </DialogTrigger>
+      <DialogContent className="sm:max-w-[500px]">
+        <DialogHeader>
+          <DialogTitle>Invite New User</DialogTitle>
+          <DialogDescription>
+            Send an invitation to collaborate on this project.
+          </DialogDescription>
+        </DialogHeader>
+        <div className="grid gap-4 py-4">
+          <div className="grid grid-cols-4 items-center gap-4">
+            <label
+              htmlFor="invite-name"
+              className="text-right text-sm font-medium"
+            >
+              Name
+            </label>
+            <Input
+              id="invite-name"
+              value={newUser.name}
+              onChange={(event) =>
+                setNewUser({ ...newUser, name: event.target.value })
+              }
+              className="col-span-3"
+              placeholder="John Doe"
+            />
+          </div>
+          <div className="grid grid-cols-4 items-center gap-4">
+            <label
+              htmlFor="invite-email"
+              className="text-right text-sm font-medium"
+            >
+              Email
+            </label>
+            <Input
+              id="invite-email"
+              type="email"
+              value={newUser.email}
+              onChange={(event) =>
+                setNewUser({ ...newUser, email: event.target.value })
+              }
+              className="col-span-3"
+              placeholder="builder@orcheo.dev"
+            />
+          </div>
+          <div className="grid grid-cols-4 items-center gap-4">
+            <label
+              htmlFor="invite-role"
+              className="text-right text-sm font-medium"
+            >
+              Role
+            </label>
+            <Select
+              value={newUser.role}
+              onValueChange={(role: User["role"]) =>
+                setNewUser({ ...newUser, role })
+              }
+            >
+              <SelectTrigger id="invite-role" className="col-span-3">
+                <SelectValue placeholder="Select role" />
+              </SelectTrigger>
+              <SelectContent>
+                <SelectItem value="admin">Admin</SelectItem>
+                <SelectItem value="editor">Editor</SelectItem>
+                <SelectItem value="viewer">Viewer</SelectItem>
+              </SelectContent>
+            </Select>
+          </div>
+        </div>
+        <DialogFooter>
+          <Button variant="outline" onClick={() => handleOpenChange(false)}>
+            Cancel
+          </Button>
+          <Button onClick={handleInvite}>Send Invitation</Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+}

package/src/features/workflow/components/dialogs/user-role-management/role-badges.tsx

@@ -0,0 +1,83 @@
+import React from "react";
+import { Badge } from "@/design-system/ui/badge";
+import { Shield, Edit, Eye, CheckCircle, XCircle } from "lucide-react";
+import type { User } from "@/features/workflow/components/dialogs/user-role-management/user-role-types";
+
+interface RoleBadgeProps {
+  role: User["role"];
+}
+
+interface StatusBadgeProps {
+  status: User["status"];
+}
+
+export function RoleBadge({ role }: RoleBadgeProps) {
+  switch (role) {
+    case "owner":
+      return (
+        <Badge className="bg-purple-100 text-purple-800 dark:bg-purple-900/30 dark:text-purple-400">
+          <Shield className="mr-1 h-3 w-3" />
+          Owner
+        </Badge>
+      );
+    case "admin":
+      return (
+        <Badge className="bg-blue-100 text-blue-800 dark:bg-blue-900/30 dark:text-blue-400">
+          <Shield className="mr-1 h-3 w-3" />
+          Admin
+        </Badge>
+      );
+    case "editor":
+      return (
+        <Badge className="bg-green-100 text-green-800 dark:bg-green-900/30 dark:text-green-400">
+          <Edit className="mr-1 h-3 w-3" />
+          Edit
+        </Badge>
+      );
+    case "viewer":
+      return (
+        <Badge className="bg-gray-100 text-gray-800 dark:bg-gray-900/30 dark:text-gray-400">
+          <Eye className="mr-1 h-3 w-3" />
+          View
+        </Badge>
+      );
+    default:
+      return null;
+  }
+}
+
+export function StatusBadge({ status }: StatusBadgeProps) {
+  switch (status) {
+    case "active":
+      return (
+        <Badge
+          variant="outline"
+          className="border-green-200 bg-green-100 text-green-800 dark:border-green-800 dark:bg-green-900/30 dark:text-green-400"
+        >
+          <CheckCircle className="mr-1 h-3 w-3" />
+          Active
+        </Badge>
+      );
+    case "invited":
+      return (
+        <Badge
+          variant="outline"
+          className="border-amber-200 bg-amber-100 text-amber-800 dark:border-amber-800 dark:bg-amber-900/30 dark:text-amber-400"
+        >
+          Invited
+        </Badge>
+      );
+    case "disabled":
+      return (
+        <Badge
+          variant="outline"
+          className="border-red-200 bg-red-100 text-red-800 dark:border-red-800 dark:bg-red-900/30 dark:text-red-400"
+        >
+          <XCircle className="mr-1 h-3 w-3" />
+          Disabled
+        </Badge>
+      );
+    default:
+      return null;
+  }
+}

package/src/features/workflow/components/dialogs/user-role-management/user-role-table.tsx

@@ -0,0 +1,188 @@
+import React from "react";
+import { Button } from "@/design-system/ui/button";
+import { Avatar, AvatarFallback, AvatarImage } from "@/design-system/ui/avatar";
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "@/design-system/ui/table";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from "@/design-system/ui/dropdown-menu";
+import { Mail, MoreHorizontal, Edit, Shield, Trash } from "lucide-react";
+import {
+  RoleBadge,
+  StatusBadge,
+} from "@/features/workflow/components/dialogs/user-role-management/role-badges";
+import type { User } from "@/features/workflow/components/dialogs/user-role-management/user-role-types";
+
+interface UserRoleTableProps {
+  users: User[];
+  searchQuery: string;
+  onUpdateUserRole?: (id: string, role: User["role"]) => void;
+  onRemoveUser?: (id: string) => void;
+  onResendInvite?: (id: string) => void;
+}
+
+export default function UserRoleTable({
+  users,
+  searchQuery,
+  onRemoveUser,
+  onResendInvite,
+  onUpdateUserRole,
+}: UserRoleTableProps) {
+  if (users.length === 0) {
+    return (
+      <div className="rounded-md border p-6 text-center">
+        <div className="text-muted-foreground">
+          No users found
+          {searchQuery && (
+            <p className="text-sm">Try adjusting your search query</p>
+          )}
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="rounded-md border">
+      <Table>
+        <TableHeader>
+          <TableRow>
+            <TableHead>User</TableHead>
+            <TableHead>Role</TableHead>
+            <TableHead>Status</TableHead>
+            <TableHead>Last Active</TableHead>
+            <TableHead className="w-[80px]"></TableHead>
+          </TableRow>
+        </TableHeader>
+        <TableBody>
+          {users.map((user) => (
+            <TableRow key={user.id}>
+              <TableCell>
+                <div className="flex items-center gap-3">
+                  <Avatar>
+                    <AvatarImage src={user.avatar} alt={user.name} />
+                    <AvatarFallback>
+                      {user.name
+                        .split(" ")
+                        .map((part) => part[0])
+                        .join("")
+                        .toUpperCase()}
+                    </AvatarFallback>
+                  </Avatar>
+                  <div>
+                    <div className="font-medium">{user.name}</div>
+                    <div className="text-sm text-muted-foreground">
+                      {user.email}
+                    </div>
+                  </div>
+                </div>
+              </TableCell>
+              <TableCell>
+                <RoleBadge role={user.role} />
+              </TableCell>
+              <TableCell>
+                <StatusBadge status={user.status} />
+              </TableCell>
+              <TableCell>
+                {user.lastActive
+                  ? new Date(user.lastActive).toLocaleDateString()
+                  : "Never"}
+              </TableCell>
+              <TableCell>
+                <ActionsMenu
+                  user={user}
+                  onRemoveUser={onRemoveUser}
+                  onResendInvite={onResendInvite}
+                  onUpdateUserRole={onUpdateUserRole}
+                />
+              </TableCell>
+            </TableRow>
+          ))}
+        </TableBody>
+      </Table>
+    </div>
+  );
+}
+
+interface ActionsMenuProps {
+  user: User;
+  onUpdateUserRole?: (id: string, role: User["role"]) => void;
+  onRemoveUser?: (id: string) => void;
+  onResendInvite?: (id: string) => void;
+}
+
+function ActionsMenu({
+  user,
+  onRemoveUser,
+  onResendInvite,
+  onUpdateUserRole,
+}: ActionsMenuProps) {
+  return (
+    <DropdownMenu>
+      <DropdownMenuTrigger asChild>
+        <Button variant="ghost" size="icon" className="h-8 w-8">
+          <MoreHorizontal className="h-4 w-4" />
+        </Button>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent align="end">
+        <DropdownMenuLabel>Actions</DropdownMenuLabel>
+        {user.role !== "owner" && (
+          <>
+            <DropdownMenuItem>
+              <Edit className="mr-2 h-4 w-4" />
+              Edit
+            </DropdownMenuItem>
+            <DropdownMenuSeparator />
+            <DropdownMenuLabel className="text-xs font-normal text-muted-foreground">
+              Change Role
+            </DropdownMenuLabel>
+            <DropdownMenuItem
+              onClick={() => onUpdateUserRole?.(user.id, "admin")}
+            >
+              <Shield className="mr-2 h-4 w-4" />
+              Admin
+            </DropdownMenuItem>
+            <DropdownMenuItem
+              onClick={() => onUpdateUserRole?.(user.id, "editor")}
+            >
+              <Edit className="mr-2 h-4 w-4" />
+              Editor
+            </DropdownMenuItem>
+            <DropdownMenuItem
+              onClick={() => onUpdateUserRole?.(user.id, "viewer")}
+            >
+              <Shield className="mr-2 h-4 w-4" />
+              Viewer
+            </DropdownMenuItem>
+            <DropdownMenuSeparator />
+          </>
+        )}
+        {user.status === "invited" && (
+          <DropdownMenuItem onClick={() => onResendInvite?.(user.id)}>
+            <Mail className="mr-2 h-4 w-4" />
+            Resend Invite
+          </DropdownMenuItem>
+        )}
+        {user.role !== "owner" && (
+          <DropdownMenuItem
+            className="text-destructive focus:text-destructive"
+            onClick={() => onRemoveUser?.(user.id)}
+          >
+            <Trash className="mr-2 h-4 w-4" />
+            Remove
+          </DropdownMenuItem>
+        )}
+      </DropdownMenuContent>
+    </DropdownMenu>
+  );
+}

package/src/features/workflow/components/dialogs/user-role-management/user-role-types.ts

@@ -0,0 +1,20 @@
+export interface User {
+  id: string;
+  name: string;
+  email: string;
+  role: "owner" | "admin" | "editor" | "viewer";
+  avatar: string;
+  status: "active" | "invited" | "disabled";
+  lastActive?: string;
+}
+
+export interface UserRoleManagementProps {
+  users?: User[];
+  onInviteUser?: (
+    user: Omit<User, "id" | "avatar" | "status" | "lastActive">,
+  ) => void;
+  onUpdateUserRole?: (id: string, role: User["role"]) => void;
+  onRemoveUser?: (id: string) => void;
+  onResendInvite?: (id: string) => void;
+  className?: string;
+}

package/src/features/workflow/components/dialogs/user-role-management.tsx

@@ -0,0 +1,61 @@
+import React, { useMemo, useState } from "react";
+import { Input } from "@/design-system/ui/input";
+import { Search } from "lucide-react";
+import { cn } from "@/lib/utils";
+import InviteUserDialog from "@/features/workflow/components/dialogs/user-role-management/invite-user-dialog";
+import UserRoleTable from "@/features/workflow/components/dialogs/user-role-management/user-role-table";
+import type {
+  UserRoleManagementProps,
+  User,
+} from "@/features/workflow/components/dialogs/user-role-management/user-role-types";
+
+export default function UserRoleManagement({
+  users = [],
+  onInviteUser,
+  onUpdateUserRole,
+  onRemoveUser,
+  onResendInvite,
+  className,
+}: UserRoleManagementProps) {
+  const [searchQuery, setSearchQuery] = useState("");
+
+  const filteredUsers = useMemo<User[]>(
+    () =>
+      users.filter((user) =>
+        [user.name, user.email, user.role]
+          .join(" ")
+          .toLowerCase()
+          .includes(searchQuery.toLowerCase()),
+      ),
+    [users, searchQuery],
+  );
+
+  return (
+    <div className={cn("space-y-4", className)}>
+      <div className="flex items-center justify-between">
+        <h2 className="text-xl font-bold">User & Role Management</h2>
+        <InviteUserDialog onInviteUser={onInviteUser} />
+      </div>
+
+      <div className="flex items-center space-x-2">
+        <div className="relative flex-1">
+          <Search className="absolute left-2 top-2.5 h-4 w-4 text-muted-foreground" />
+          <Input
+            placeholder="Search users..."
+            className="pl-8"
+            value={searchQuery}
+            onChange={(e) => setSearchQuery(e.target.value)}
+          />
+        </div>
+      </div>
+
+      <UserRoleTable
+        users={filteredUsers}
+        searchQuery={searchQuery}
+        onUpdateUserRole={onUpdateUserRole}
+        onRemoveUser={onRemoveUser}
+        onResendInvite={onResendInvite}
+      />
+    </div>
+  );
+}