@spacemade/ui 0.0.1

package/src/components/projects/actions/RenameProjectModal.tsx

@@ -0,0 +1,120 @@
+import {
+  AlertDialog,
+  AlertDialogBody,
+  AlertDialogContent,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogOverlay,
+} from '@chakra-ui/react'
+import Button from '@components/common/button/Button'
+import Input from '@components/common/forms/Input'
+import { DEFAULT_ERROR_MESSAGE } from '@helpers/constants'
+import { useRef } from 'react'
+import { FieldValues, SubmitHandler, useForm } from 'react-hook-form'
+import { toast } from 'react-toastify'
+
+interface FormValues extends FieldValues {
+  name: string
+}
+
+export const RenameProjectModal = ({
+  project,
+  isOpen,
+  onClose,
+  onRename,
+}: {
+  project: { id: string; name: string }
+  isOpen: boolean
+  onClose: () => void
+  onRename: (id: string, newName: string) => void
+}) => {
+  const cancelRef = useRef<HTMLButtonElement>(null!)
+
+  const {
+    register,
+    handleSubmit,
+    getValues,
+    setError,
+    clearErrors,
+    formState: { errors, isSubmitting },
+  } = useForm<FormValues>({
+    defaultValues: {
+      name: project.name,
+    },
+  })
+
+  const onSubmit: SubmitHandler<FormValues> = async (data) => {
+    try {
+      onRename(project.id, data.name)
+      toast.success('Your project has been renamed')
+      onClose()
+    } catch (error: any) {
+      setError('server-error', { type: 'custom', message: 'server-error' })
+      toast.error(DEFAULT_ERROR_MESSAGE)
+    }
+  }
+
+  return (
+    <AlertDialog
+      isOpen={isOpen}
+      leastDestructiveRef={cancelRef}
+      onClose={onClose}
+      isCentered
+    >
+      <AlertDialogOverlay className="dialog">
+        <AlertDialogContent>
+          <div className="w-xs-300p w-md-450p">
+            <AlertDialogHeader>Rename this project</AlertDialogHeader>
+
+            <AlertDialogBody>
+              <form onSubmit={handleSubmit(onSubmit)}>
+                <Input
+                  register={register('name', {
+                    required: 'This field is required',
+                    maxLength: {
+                      value: 100,
+                      message: 'Name cannot exceed 100 characters',
+                    },
+                    minLength: {
+                      value: 2,
+                      message: 'Name must be at least 2 characters',
+                    },
+                  })}
+                  errors={errors}
+                  placeholder="Project Name"
+                  label="Name"
+                  getValues={getValues}
+                />
+              </form>
+            </AlertDialogBody>
+
+            <AlertDialogFooter className="d-flex justify-content-end gap-3">
+              <Button
+                className="me-2"
+                ariaLabel="Close Rename Dialog"
+                buttonRef={cancelRef}
+                onClick={onClose}
+              >
+                Cancel
+              </Button>
+
+              <Button
+                className="text-white"
+                ariaLabel={`Rename project`}
+                color="primary"
+                onClick={() => {
+                  clearErrors('server-error')
+                  handleSubmit(onSubmit)()
+                }}
+                isLoading={isSubmitting}
+                disabled={isSubmitting}
+              >
+                Rename
+              </Button>
+            </AlertDialogFooter>
+          </div>
+        </AlertDialogContent>
+      </AlertDialogOverlay>
+    </AlertDialog>
+  )
+}

package/src/components/projects/actions/index.tsx

@@ -0,0 +1,98 @@
+'use client';
+
+import { useRouter } from '@lib/next-router';
+import { useState } from 'react';
+import { useUpdateProjectMutation, useDeleteProjectMutation } from '@store/slice/api/projectApiSlice';
+import { useProjectContext } from '@context/ProjectContext';
+import ProjectActionsMenu from './ProjectActionsMenu';
+import ProjectFilesButton from './ProjectFilesPicker';
+import ProjectInstructions from './ProjectInstructions';
+import ProjectEditModal from './ProjectEditModal';
+import { DeleteDialog } from '@components/common/dialog/DeleteDialog';
+
+const ProjectActions = () => {
+  const router = useRouter();
+  const { projectId, project, refetchProject } = useProjectContext();
+
+  const [updateProject, { isLoading: isUpdating }] = useUpdateProjectMutation();
+  const [deleteProject] = useDeleteProjectMutation();
+
+  const [isFilesOpen, setFilesOpen] = useState(false);
+  const [isInstructionsOpen, setInstructionsOpen] = useState(false);
+  const [isEditOpen, setEditOpen] = useState(false);
+  const [isDeleteOpen, setDeleteOpen] = useState(false);
+
+  const handleUpdateProject = async (data: {
+    id: string
+    name: string
+    description: string
+    providerSettingId?: string
+    vectorStoreId?: string
+  }) => {
+    if (!project) return;
+
+    await updateProject({
+      id: project.id,
+      name: data.name,
+      description: data.description || null,
+
+      providerSettingId: data.providerSettingId,
+      vectorStoreId: data.vectorStoreId,
+    }).unwrap();
+
+    refetchProject();
+  };
+
+  const handleUpdateInstructions = async (newInstructions: string | null) => {
+    if (!project) return;
+    await updateProject({ id: project.id, instructions: newInstructions }).unwrap();
+    refetchProject();
+  };
+
+  const confirmDelete = async () => {
+    if (!projectId) return;
+    await deleteProject({ id: projectId }).unwrap();
+    router.push('/projects');
+    setDeleteOpen(false);
+  };
+
+  return (
+    <>
+      <ProjectActionsMenu
+        onEdit={() => setEditOpen(true)}
+        onInstructions={() => setInstructionsOpen(true)}
+        onDelete={() => setDeleteOpen(true)}
+      />
+      {project && (
+        <ProjectInstructions
+          project={project}
+          isOpen={isInstructionsOpen}
+          onClose={() => setInstructionsOpen(false)}
+          isUpdating={isUpdating}
+          onUpdateInstructions={handleUpdateInstructions}
+        />
+      )}
+
+      {project && (
+        <ProjectEditModal
+          isOpen={isEditOpen}
+          onClose={() => setEditOpen(false)}
+          onUpdate={handleUpdateProject}
+          project={project}
+        />
+      )}
+
+      {project && (
+        <DeleteDialog
+          isOpen={isDeleteOpen}
+          onClose={() => setDeleteOpen(false)}
+          titleOverride={`Delete "${project.name}" project?`}
+          entityDescription="project"
+          onDelete={confirmDelete}
+        />
+      )}
+    </>
+  );
+};
+
+export default ProjectActions;

package/src/components/projects/block/HeaderProjectImagePicker.tsx

@@ -0,0 +1,52 @@
+import { useDisclosure } from '@chakra-ui/react'
+import { OptimizedImage } from '@components/common/Image/OptimizedImage'
+import { MediaPickerModal } from '@components/media/modal/MediaPickerModal'
+import { Media } from '@store/model'
+import { defaultAvatar, getDefaultColoredImage } from '@helpers/images'
+import { useState } from 'react'
+
+interface Props {
+    media?: Media
+    onSelectMedia?: (mediaId: string | null) => void
+}
+
+const HeaderProjectAvatar = ({ media, onSelectMedia }: Props) => {
+    const { isOpen, onOpen, onClose } = useDisclosure()
+    const [selected, setSelected] = useState<Media | null>(media ?? null)
+
+    return (
+        <>
+            <button
+                type="button"
+                onClick={onOpen}
+                className="border rounded overflow-hidden p-0 bg-white flex-shrink-0 d-flex align-items-center justify-content-center"
+                style={{
+                    width: 48,
+                    aspectRatio: '1 / 1',
+                }}
+            >
+                <OptimizedImage
+                    src={selected?.sourceUrl ?? getDefaultColoredImage()}
+                    alt={selected?.details?.altText || ''}
+                    width={48}
+                    height={48}
+                    className="w-100 h-100 object-fit-contain"
+                />
+            </button>
+
+
+
+            <MediaPickerModal
+                isOpen={isOpen}
+                onClose={onClose}
+                defaultSelectedMedia={selected ? [selected] : undefined}
+                onMediaSelected={([media]) => {
+                    setSelected(media)
+                    onSelectMedia?.(media.id)
+                }}
+            />
+        </>
+    )
+}
+
+export default HeaderProjectAvatar

package/src/components/projects/permission/ProjectPermissionInviteModal.tsx

@@ -0,0 +1,181 @@
+'use client'
+
+import { useEffect, useState } from 'react'
+import {
+  Drawer,
+  DrawerBody,
+  DrawerCloseButton,
+  DrawerContent,
+  DrawerFooter,
+  DrawerHeader,
+  DrawerOverlay,
+} from '@chakra-ui/react'
+import { useGoogleReCaptcha } from 'react-google-recaptcha-v3'
+import { toast } from 'react-toastify'
+
+import Button from '@components/common/button/Button'
+import AdvanceAccordion from '@components/common/forms/AdvanceAccordion'
+import UserInvitePicker, {
+  type UserInviteSelection,
+} from '@components/common/forms/UserInvitePicker'
+
+import {
+  ReCaptchaActions,
+  WithReCaptcha,
+  isReCaptchaAvailable,
+} from '@components/hoc/WithReCaptcha'
+
+import type { ProjectUserRole } from '@store/slice/api/projectUserPermissionApiSlice'
+
+type InvitePayload = {
+  email?: string
+  userId?: string
+  orgGroupId?: string
+  role: ProjectUserRole
+  captcha: string | null
+}
+
+interface Props {
+  isOpen: boolean
+  onClose: () => void
+  onSave: (data: InvitePayload) => Promise<void>
+  onDelete?: () => Promise<void>
+  permissionId?: string
+  orgId?: string | null
+}
+
+const ProjectPermissionInviteModal = WithReCaptcha(
+  ({ isOpen, onClose, onSave, onDelete, permissionId, orgId }: Props) => {
+    const { executeRecaptcha } = useGoogleReCaptcha()
+
+    const [selectedInvites, setSelectedInvites] = useState<UserInviteSelection[]>([])
+    const [isSubmitting, setIsSubmitting] = useState(false)
+
+    const roleOptions: { value: ProjectUserRole; label: string }[] = [
+      { value: 'admin', label: 'Admin' },
+      { value: 'editor', label: 'Editor' },
+      { value: 'viewer', label: 'Viewer' },
+    ]
+
+    useEffect(() => {
+      if (!isOpen) {
+        setSelectedInvites([])
+        setIsSubmitting(false)
+      }
+    }, [isOpen])
+
+    const handleInvite = async () => {
+      if (!selectedInvites.length) {
+        toast.error('Add at least one user, group, or email to continue')
+        return
+      }
+
+      try {
+        if (isSubmitting) return
+        if (!executeRecaptcha && isReCaptchaAvailable) {
+          toast.error('ReCaptcha not ready. Please try again.')
+          return
+        }
+
+        setIsSubmitting(true)
+        await Promise.all(
+          selectedInvites.map(async (invite) => {
+            const captcha = executeRecaptcha
+              ? await executeRecaptcha(ReCaptchaActions.project_invite)
+              : null
+
+            if (invite.type === 'user') {
+              await onSave({
+                ...(invite.email
+                  ? { email: invite.email.toLowerCase() }
+                  : { userId: invite.user?.id }),
+                role: (invite.role || 'viewer') as ProjectUserRole,
+                captcha,
+              })
+              return
+            }
+
+            if (invite.type === 'group') {
+              await onSave({
+                orgGroupId: invite.group?.id,
+                role: (invite.role || 'viewer') as ProjectUserRole,
+                captcha,
+              })
+              return
+            }
+
+            await onSave({
+              email: String(invite.email || '').toLowerCase(),
+              role: (invite.role || 'viewer') as ProjectUserRole,
+              captcha,
+            })
+          })
+        )
+
+        toast.success(
+          `${selectedInvites.length > 1 ? 'Access updates' : 'Access update'} saved successfully!`
+        )
+        setSelectedInvites([])
+        onClose()
+      } catch (err: any) {
+        toast.error(err?.data?.message ?? 'Failed to send invite. Please try again.')
+      } finally {
+        setIsSubmitting(false)
+      }
+    }
+
+    return (
+      <Drawer isOpen={isOpen} onClose={onClose} size="lg">
+        <DrawerOverlay />
+        <DrawerContent className="drawer">
+          <DrawerCloseButton />
+          <DrawerHeader>Add access</DrawerHeader>
+
+          <DrawerBody>
+            <div className="mt-3">
+              <p className="text-muted mb-4">
+                Add access by selecting an org user, an org group, or an email address for an external invite.
+              </p>
+
+              <UserInvitePicker
+                inputId="project-user-search"
+                label="Search by user, group, or email address"
+                value={selectedInvites}
+                onChange={setSelectedInvites}
+                defaultRole="viewer"
+                roleOptions={roleOptions}
+                orgId={orgId || undefined}
+                includeGroups={!!orgId}
+              />
+            </div>
+
+            {permissionId && onDelete ? (
+              <div className="mt-4">
+                <AdvanceAccordion
+                  objectName="this user access"
+                  entityName="permission"
+                  onDelete={onDelete}
+                />
+              </div>
+            ) : null}
+          </DrawerBody>
+
+          <DrawerFooter>
+            <Button onClick={onClose}>Cancel</Button>
+            <Button
+              onClick={handleInvite}
+              color="primary"
+              className="text-white"
+              isLoading={isSubmitting}
+              disabled={!selectedInvites.length || isSubmitting}
+            >
+              Send invites
+            </Button>
+          </DrawerFooter>
+        </DrawerContent>
+      </Drawer>
+    )
+  }
+)
+
+export default ProjectPermissionInviteModal

package/src/components/projects/permission/ProjectUserPermission.tsx

@@ -0,0 +1,170 @@
+'use client'
+
+import { useState, useRef } from 'react'
+import Spinner from '@components/common/loading/Spinner'
+import Button from '@components/common/button/Button'
+import type {
+  ProjectUserPermissionUI,
+  ProjectUserRole,
+  ProjectUserPermissionStatus,
+} from '@store/slice/api/projectUserPermissionApiSlice'
+
+type Props = {
+  permissions: ProjectUserPermissionUI[]
+  isLoading?: boolean
+  onRoleChange: (permissionId: string, role: ProjectUserRole) => Promise<void>
+  onRemove: (permissionId: string) => Promise<void>
+}
+
+const ROLE_OPTIONS: ProjectUserRole[] = ['admin', 'editor', 'viewer']
+
+const statusLabel = (status:   ProjectUserPermissionStatus,
+) =>
+  status === 'active' ? 'Active' : 'Pending Invite'
+
+const getInitials = (first?: string, last?: string, name?: string, email?: string) => {
+  if (first || last) {
+    return `${first?.[0] ?? ''}${last?.[0] ?? ''}`.toUpperCase()
+  }
+  const fallback = name || email
+  return fallback?.[0]?.toUpperCase() ?? '?'
+}
+
+export default function ProjectPermissionGrid({
+  permissions,
+  isLoading,
+  onRoleChange,
+  onRemove,
+}: Props) {
+  const [hoveredId, setHoveredId] = useState<string | null>(null)
+  const containerRef = useRef<HTMLDivElement | null>(null)
+
+  if (isLoading) {
+    return (
+      <div className="d-flex justify-content-center align-items-center py-4">
+        <Spinner />
+      </div>
+    )
+  }
+
+  if (!permissions?.length) {
+    return (
+      <div className="text-center text-muted py-4">
+        No users or groups have access yet. Click “+” to add access.
+      </div>
+    )
+  }
+
+  return (
+    <div
+      ref={containerRef}
+      className="border-top pt-2 no-scrollbar"
+      style={{
+        maxHeight: '50vh',
+        overflowY: 'auto',
+        overflowX: 'hidden',
+        scrollbarWidth: 'none',
+      }}
+    >
+      <table className="table table-hover align-middle mb-0">
+        <tbody>
+          {permissions.map((item) => {
+            const isHovered = hoveredId === item.id
+            const isGroup = item.permissionType === 'group'
+            const isPending = item.status === 'pending'
+
+            const first = item.user?.firstName
+            const last = item.user?.lastName
+            const name = item.user?.name
+            const email = item.user?.email
+            const full = `${first ?? ''} ${last ?? ''}`.trim()
+            const displayName = isGroup
+              ? item.group?.name || 'Unknown group'
+              : full || name || email || 'Unknown user'
+
+            const imageUrl = item.user?.profileMedia?.media?.sourceUrl
+            const initials = getInitials(first, last, name, email)
+
+            return (
+              <tr
+                key={item.id}
+                onMouseEnter={() => setHoveredId(item.id)}
+                onMouseLeave={() => setHoveredId(null)}
+                className={isHovered ? 'table-active bg-light' : ''}
+                style={{ height: 56 }}
+              >
+                <td>
+                  <div className="d-flex align-items-center gap-2">
+                    {isGroup ? (
+                      <div
+                        className="rounded-circle bg-success-subtle text-success d-flex align-items-center justify-content-center fw-semibold"
+                        style={{ width: 32, height: 32, fontSize: 12 }}
+                      >
+                        <i className="bi bi-people" />
+                      </div>
+                    ) : imageUrl ? (
+                      <img
+                        src={imageUrl}
+                        alt={displayName}
+                        className="rounded-circle"
+                        style={{ width: 32, height: 32, objectFit: 'cover' }}
+                      />
+                    ) : (
+                      <div
+                        className="rounded-circle bg-secondary text-white d-flex align-items-center justify-content-center fw-semibold"
+                        style={{ width: 32, height: 32, fontSize: 12 }}
+                      >
+                        {initials}
+                      </div>
+                    )}
+                    <div>
+                      <div className="fw-semibold">{displayName}</div>
+                      {isGroup && item.group?.description ? (
+                        <div className="small text-muted">{item.group.description}</div>
+                      ) : null}
+                    </div>
+                  </div>
+                </td>
+
+                <td>
+                  <span
+                    className={`badge ${
+                      !isPending
+                        ? 'bg-success'
+                        : 'bg-light text-dark border'
+                    }`}
+                  >
+                    {isGroup ? 'Group Access' : statusLabel(item.status || 'pending')}
+                  </span>
+                </td>
+
+                <td>
+                  <select
+                    className="form-select form-select-sm"
+                    value={item.role}
+                    disabled={isPending}
+                    onChange={(e) =>
+                      onRoleChange(item.id, e.target.value as ProjectUserRole)
+                    }
+                  >
+                    {ROLE_OPTIONS.map((role) => (
+                      <option key={role} value={role}>
+                        {role}
+                      </option>
+                    ))}
+                  </select>
+                </td>
+
+                <td className="text-end">
+                  <Button size="sm" onClick={() => onRemove(item.id)}>
+                    <i className="bi bi-trash" />
+                  </Button>
+                </td>
+              </tr>
+            )
+          })}
+        </tbody>
+      </table>
+    </div>
+  )
+}