@spacemade/ui 0.0.1

package/src/components/user/modal/UpdateUserDetailsModal.tsx

@@ -0,0 +1,319 @@
+/* eslint-disable @next/next/no-img-element */
+
+import { useEffect } from 'react'
+import {
+	Drawer,
+	DrawerBody,
+	DrawerCloseButton,
+	DrawerContent,
+	DrawerFooter,
+	DrawerHeader,
+	DrawerOverlay,
+} from '@chakra-ui/react'
+import { FieldValues, SubmitHandler, useForm } from 'react-hook-form'
+import { toast } from 'react-toastify'
+import { User, UserPayload, UserSystemRoles } from '@store/model'
+import {
+	useUpdateUserForAdminMutation,
+	useUpdateUserMutation,
+} from '@store/slice/api/userApiSlice'
+import { OptimizedImage } from '@components/common/Image/OptimizedImage'
+import Button from '@components/common/button/Button'
+import Input from '@components/common/forms/Input'
+import Select from '@components/common/forms/Select'
+import Textarea from '@components/common/forms/Textarea'
+import { FullDateAndTimeFormat } from '@helpers/date'
+import { defaultAvatar } from '@helpers/images'
+import { DEFAULT_ERROR_MESSAGE } from '@helpers/constants'
+import { BadgesBlock } from '../block/BadgesBlock'
+
+interface FormValues extends FieldValues {
+	firstName: string
+	lastName: string
+	email: string
+	bio: string
+	systemRole: UserSystemRoles | null | 'null'
+}
+
+export const UpdateUserDetailsModal = ({
+	user,
+	isOpen,
+	onClose,
+	canEditDetails = false,
+	showAdminSettings = true,
+}: {
+	user: User
+	isOpen: boolean
+	onClose: () => void
+	canEditDetails?: boolean
+	showAdminSettings?: boolean
+}) => {
+	const [updateUser, { isLoading: isUpdatingUser }] = useUpdateUserMutation()
+	const [updateUserForAdmin] = useUpdateUserForAdminMutation()
+
+	const {
+		register,
+		handleSubmit,
+		reset,
+		control,
+		getValues,
+		formState: { errors },
+	} = useForm<FormValues>({
+		defaultValues: {
+			firstName: user.firstName || '',
+			lastName: user.lastName || '',
+			email: user.email || '',
+			bio: user.bio || '',
+			systemRole: user.systemRole || 'null',
+		},
+	})
+
+	useEffect(() => {
+		reset({
+			firstName: user.firstName || '',
+			lastName: user.lastName || '',
+			email: user.email || '',
+			bio: user.bio || '',
+			systemRole: user.systemRole || 'null',
+		})
+	}, [user, reset])
+
+	const onSubmit: SubmitHandler<FormValues> = async (data) => {
+		if (!canEditDetails) return
+
+		try {
+			const payload: UserPayload = {
+				id: user.id,
+				firstName: data.firstName,
+				lastName: data.lastName,
+				email: user.email,
+				bio: data.bio,
+			}
+			await updateUser(payload).unwrap()
+			toast.success('User details updated successfully')
+			onClose()
+		} catch (error: any) {
+			toast.error(error?.data?.message || DEFAULT_ERROR_MESSAGE)
+		}
+	}
+
+	const UserInfo = ({
+		label,
+		value,
+	}: {
+		label: string
+		value?: string | null
+	}) => (
+		<>
+			<strong className='small'>{label}: </strong>
+			<span className='d-block'>{value || 'Not Defined'}</span>
+		</>
+	)
+
+	return (
+		<Drawer isOpen={isOpen} onClose={onClose} size='xl'>
+			<DrawerOverlay />
+			<DrawerContent className='drawer'>
+				<DrawerCloseButton />
+				<DrawerHeader>
+					{canEditDetails ? 'Modify' : `User: ${user.name}`}
+				</DrawerHeader>
+
+				<DrawerBody>
+					<div className='mt-3'>
+						{!canEditDetails && (
+							<div className='d-md-flex gap-3 align-items-center'>
+								<OptimizedImage
+									src={user.profileMedia?.media.sourceUrl || defaultAvatar}
+									alt={user.profileMedia?.media.details?.altText || ''}
+									width={100}
+									height={100}
+									className='object-fit-cover rounded-pill'
+								/>
+								<div>
+									{user.firstName && (
+										<h2 className='h5 mb-0 mt-2 mt-md-0'>
+											{user.firstName} {user.lastName}
+										</h2>
+									)}
+									<div className='mt-2 w-md-450p'>
+										<BadgesBlock user={user} />
+									</div>
+									<div className='mt-2'>
+										<UserInfo
+											label='Joined On'
+											value={FullDateAndTimeFormat(user.createdAt || '')}
+										/>
+									</div>
+								</div>
+							</div>
+						)}
+
+						{showAdminSettings && (
+							<div>
+								<h2 className='h5 mt-5'>Settings</h2>
+								<hr className='text-light-gray opacity-100' />
+								<div className='mt-4 form w-100 w-lg-50'>
+									<Select
+										register={register('systemRole')}
+										label='System Role'
+										options={[
+											{
+												label: 'None',
+												value: 'null',
+											},
+											{
+												label: 'Editor',
+												value: UserSystemRoles.editor,
+											},
+											{
+												label: 'Admin',
+												value: UserSystemRoles.admin,
+											},
+										]}
+										onSelectChange={(value) => {
+											const valueAsString = value?.toString()
+											const systemRoleValue =
+												valueAsString === 'null' ? null : (valueAsString as UserSystemRoles)
+											updateUserForAdmin({
+												payload: { id: user.id, systemRole: systemRoleValue },
+											})
+										}}
+										control={control}
+										getValues={getValues}
+										errors={errors}
+									/>
+								</div>
+							</div>
+						)}
+
+						{canEditDetails ? (
+							<form id='update-user-details-form' onSubmit={handleSubmit(onSubmit)}>
+								<div className='row gx-4 mt-4'>
+									<div className='col-lg-6'>
+										<Input
+											register={register('firstName')}
+											errors={errors}
+											placeholder='Enter first name'
+											label='First Name'
+											getValues={getValues}
+										/>
+									</div>
+									<div className='col-lg-6 mt-4 mt-lg-0'>
+										<Input
+											register={register('lastName')}
+											errors={errors}
+											placeholder='Enter last name'
+											label='Last Name'
+											getValues={getValues}
+										/>
+									</div>
+								</div>
+								<div className='mt-4'>
+									<Input
+										register={register('email')}
+										errors={errors}
+										type='email'
+										placeholder='Email address'
+										label='Email Address'
+										getValues={getValues}
+										readOnly
+										appendInput={<span className='bi bi-lock text-muted' aria-hidden='true' />}
+									/>
+								</div>
+								<div className='mt-4'>
+									<Textarea
+										register={register('bio')}
+										errors={errors}
+										placeholder='Enter bio'
+										label='Bio'
+										getValues={getValues}
+										rows={5}
+									/>
+								</div>
+							</form>
+						) : (
+							<div>
+								<h2 className='h5 mt-5'>Info</h2>
+								<hr className='text-light-gray opacity-100' />
+								<div className='mt-2'>
+									<UserInfo label='Username' value={user.name} />
+								</div>
+								<div className='mt-2'>
+									<UserInfo label='Email' value={user.email} />
+								</div>
+								<div className='mt-2'>
+									<UserInfo label='First Name' value={user.firstName} />
+								</div>
+								<div className='mt-2'>
+									<UserInfo label='Last Name' value={user.lastName} />
+								</div>
+								<div className='mt-2'>
+									<UserInfo label='Short Bio' value={user.shortBio} />
+								</div>
+
+								<h2 className='h5 mt-5'>Social Media</h2>
+								<hr className='text-light-gray opacity-100' />
+
+								<div className='mt-2'>
+									<UserInfo label='X' value={user.twitterUsername} />
+								</div>
+								<div className='mt-2'>
+									<UserInfo label='Instagram' value={user.instagramUsername} />
+								</div>
+								<div className='mt-2'>
+									<UserInfo label='LinkedIn' value={user.linkedinUsername} />
+								</div>
+								<div className='mt-2'>
+									<UserInfo label='Site URL' value={user.siteUrl} />
+								</div>
+
+								<h2 className='h5 mt-5'>Address</h2>
+								<hr className='text-light-gray opacity-100' />
+								<div className='mt-2'>
+									<UserInfo
+										label='Stree Address'
+										value={user.address?.streetAddress}
+									/>
+								</div>
+								<div className='mt-2'>
+									<UserInfo label='City' value={user.address?.city} />
+								</div>
+								<div className='mt-2'>
+									<UserInfo label='State' value={user.address?.state} />
+								</div>
+								<div className='mt-2'>
+									<UserInfo
+										label='Postal Code'
+										value={user.address?.postalCode}
+									/>
+								</div>
+								<div className='mt-2'>
+									<UserInfo label='Country' value={user.address?.country} />
+								</div>
+							</div>
+						)}
+					</div>
+				</DrawerBody>
+
+				{canEditDetails && (
+					<DrawerFooter>
+						<Button onClick={onClose} disabled={isUpdatingUser}>
+							Cancel
+						</Button>
+						<Button
+							type='submit'
+							form='update-user-details-form'
+							color='primary'
+							className='text-white'
+							isLoading={isUpdatingUser}
+							disabled={isUpdatingUser}
+						>
+							Save
+						</Button>
+					</DrawerFooter>
+				)}
+			</DrawerContent>
+		</Drawer>
+	)
+}

package/src/components/user/modal/UpgradeUserLimitModal.tsx

@@ -0,0 +1,123 @@
+'use client'
+
+import { createPortal } from 'react-dom'
+
+export default function UpgradeUserLimitModal({
+	isOpen,
+	onClose,
+	onUpgrade,
+	currentPlanName,
+	maxUsers,
+	currentUserCount,
+}: {
+	isOpen: boolean
+	onClose: () => void
+	onUpgrade: () => void
+	currentPlanName: string
+	maxUsers: number
+	currentUserCount: number
+}) {
+	if (!isOpen || typeof window === 'undefined') return null
+
+	return createPortal(
+		<div
+			className="upgrade-modal-backdrop"
+			role="dialog"
+			aria-modal="true"
+			aria-labelledby="user-limit-modal-title"
+		>
+			<style jsx global>{`
+				.upgrade-modal-backdrop {
+					position: fixed;
+					inset: 0;
+					background: rgba(0, 0, 0, 0.45);
+					z-index: 999999;
+					display: flex;
+					align-items: center;
+					justify-content: center;
+				}
+				.upgrade-modal {
+					background: #ffffff;
+					border-radius: 16px;
+					width: 100%;
+					max-width: 480px;
+					padding: 24px 28px;
+					box-shadow: 0 12px 30px rgba(0, 0, 0, 0.18);
+					display: flex;
+					flex-direction: column;
+				}
+				.upgrade-modal-title {
+					font-size: 20px;
+					font-weight: 600;
+					margin-bottom: 8px;
+				}
+				.upgrade-modal-body {
+					font-size: 15px;
+					color: #4a4a4a;
+					margin-bottom: 20px;
+				}
+				.upgrade-modal-actions {
+					display: flex;
+					justify-content: flex-end;
+					gap: 12px;
+				}
+				.upgrade-btn-secondary {
+					border-radius: 999px;
+					padding: 8px 14px;
+					font-size: 14px;
+					border: 1px solid rgba(0, 0, 0, 0.12);
+					background: #fff;
+					color: #333;
+				}
+				.upgrade-btn-primary {
+					border-radius: 999px;
+					padding: 8px 18px;
+					font-size: 14px;
+					border: none;
+					background: #0d6efd;
+					color: #fff;
+				}
+			`}</style>
+
+			<div className="upgrade-modal">
+				<div className="d-flex justify-content-between align-items-start mb-1">
+					<h2 id="user-limit-modal-title" className="upgrade-modal-title">
+						User Limit Reached
+					</h2>
+					<button
+						type="button"
+						className="btn btn-link p-0 text-muted"
+						aria-label="Close dialog"
+						onClick={onClose}
+					>
+						<i className="bi bi-x-lg" />
+					</button>
+				</div>
+				<p className="upgrade-modal-body">
+					Your <strong>{currentPlanName}</strong> plan includes{' '}
+					<strong>{maxUsers} user{maxUsers !== 1 ? 's' : ''}</strong>.
+					You currently have{' '}
+					<strong>{currentUserCount} user{currentUserCount !== 1 ? 's' : ''}</strong>.
+					Upgrade your plan to add more users to your organization.
+				</p>
+				<div className="upgrade-modal-actions">
+					<button
+						type="button"
+						className="upgrade-btn-secondary"
+						onClick={onClose}
+					>
+						Cancel
+					</button>
+					<button
+						type="button"
+						className="upgrade-btn-primary"
+						onClick={onUpgrade}
+					>
+						Upgrade Plan
+					</button>
+				</div>
+			</div>
+		</div>,
+		document.body
+	)
+}

package/src/components/user/modal/UserPermissionsModal.tsx

@@ -0,0 +1,251 @@
+"use client"
+
+import { useEffect, useMemo, useState } from "react"
+import {
+  Drawer,
+  DrawerBody,
+  DrawerCloseButton,
+  DrawerContent,
+  DrawerHeader,
+  DrawerOverlay,
+} from "@chakra-ui/react"
+import {
+  APP_PERMISSION_DEFS,
+  ROLE_PRESETS,
+  buildEmptyPermissions,
+  permissionTreeToRows,
+  roleFromActions,
+  rowsToPermissionTree,
+} from "@helpers/permissions"
+import type {
+  PermissionAction,
+  PermissionRole,
+} from "@store/model/user-permission.model"
+import {
+  useGetUserPermissionsQuery,
+  useUpdateUserPermissionsMutation,
+} from "@store/slice/api/userApiSlice"
+
+const ROLE_OPTIONS: PermissionRole[] = [
+  "admin",
+  "editor",
+  "viewer",
+  "none",
+  "custom",
+]
+
+const roleLabel = (role: PermissionRole) =>
+  role === "none" ? "No access" : role.charAt(0).toUpperCase() + role.slice(1)
+
+export const UserPermissionsModal = ({
+  userId,
+  isOpen,
+  onClose,
+}: {
+  userId: string
+  isOpen: boolean
+  onClose: () => void
+}) => {
+  const { data, isFetching } = useGetUserPermissionsQuery(
+    { userId },
+    { skip: !isOpen }
+  )
+  const [updatePermissions, { isLoading }] =
+    useUpdateUserPermissionsMutation()
+
+  const [permissions, setPermissions] = useState(
+    buildEmptyPermissions()
+  )
+
+  useEffect(() => {
+    setPermissions(rowsToPermissionTree(data?.directPermissions ?? []))
+  }, [data])
+
+  const onRoleChange = (appKey: string, role: PermissionRole) => {
+    setPermissions((prev) => {
+      const next = rowsToPermissionTree(permissionTreeToRows(userId, prev))
+      const preset = ROLE_PRESETS[role] ?? ROLE_PRESETS.none
+      next.apps[appKey] = {
+        ...next.apps[appKey],
+        role,
+        actions: { ...preset },
+      }
+      if (next.apps[appKey].special) {
+        const specialDefault =
+          role === "admin"
+            ? Object.keys(next.apps[appKey].special || {}).reduce(
+                (acc, key) => {
+                  acc[key] = true
+                  return acc
+                },
+                {} as Record<string, boolean>
+              )
+            : Object.keys(next.apps[appKey].special || {}).reduce(
+                (acc, key) => {
+                  acc[key] = false
+                  return acc
+                },
+                {} as Record<string, boolean>
+              )
+        next.apps[appKey].special = specialDefault
+      }
+      return next
+    })
+  }
+
+  const onToggleAction = (appKey: string, action: PermissionAction) => {
+    setPermissions((prev) => {
+      const next = rowsToPermissionTree(permissionTreeToRows(userId, prev))
+      const current = !!next.apps[appKey].actions[action]
+      next.apps[appKey].actions[action] = !current
+      next.apps[appKey].role = roleFromActions(next.apps[appKey].actions)
+      return next
+    })
+  }
+
+  const onToggleSpecial = (appKey: string, key: string) => {
+    setPermissions((prev) => {
+      const next = rowsToPermissionTree(permissionTreeToRows(userId, prev))
+      if (!next.apps[appKey].special) next.apps[appKey].special = {}
+      const current = !!next.apps[appKey].special?.[key]
+      next.apps[appKey].special![key] = !current
+      return next
+    })
+  }
+
+  const onSave = async () => {
+    const rows = permissionTreeToRows(userId, permissions)
+    await updatePermissions({ userId, permissions: rows }).unwrap()
+    onClose()
+  }
+
+  const summary = useMemo(
+    () =>
+      APP_PERMISSION_DEFS.map((app) => ({
+        key: app.key,
+        label: app.label,
+        role: permissions.apps?.[app.key]?.role ?? "none",
+      })),
+    [permissions]
+  )
+
+  return (
+    <Drawer isOpen={isOpen} onClose={onClose} size="xl">
+      <DrawerOverlay />
+      <DrawerContent className="drawer">
+        <DrawerCloseButton />
+        <DrawerHeader>User Permissions</DrawerHeader>
+
+        <DrawerBody>
+          <div className="d-flex flex-column gap-4">
+            <div className="d-flex flex-wrap gap-3">
+              {summary.map((item) => (
+                <span
+                  key={item.key}
+                  className="badge rounded-pill bg-light text-dark border"
+                >
+                  {item.label}: {roleLabel(item.role as PermissionRole)}
+                </span>
+              ))}
+            </div>
+
+            {APP_PERMISSION_DEFS.map((app) => {
+              const appPerm = permissions.apps?.[app.key]
+              return (
+                <div key={app.key} className="border rounded-3 p-3">
+                  <div className="d-flex justify-content-between align-items-center">
+                    <h5 className="mb-0">{app.label}</h5>
+                    <select
+                      className="form-select form-select-sm w-auto"
+                      value={appPerm?.role ?? "none"}
+                      onChange={(e) =>
+                        onRoleChange(app.key, e.target.value as PermissionRole)
+                      }
+                    >
+                      {ROLE_OPTIONS.map((role) => (
+                        <option key={role} value={role}>
+                          {roleLabel(role)}
+                        </option>
+                      ))}
+                    </select>
+                  </div>
+
+                  <div className="mt-3">
+                    <div className="small fw-semibold text-uppercase text-muted mb-2">
+                      CRUD Actions
+                    </div>
+                    <div className="d-flex flex-wrap gap-3">
+                      {app.actions.map((action) => (
+                        <label
+                          key={action}
+                          className="form-check form-check-inline m-0"
+                        >
+                          <input
+                            className="form-check-input"
+                            type="checkbox"
+                            checked={!!appPerm?.actions?.[action]}
+                            onChange={() => onToggleAction(app.key, action)}
+                          />
+                          <span className="form-check-label text-capitalize">
+                            {action}
+                          </span>
+                        </label>
+                      ))}
+                    </div>
+                  </div>
+
+                  {app.special && (
+                    <div className="mt-3">
+                      <div className="small fw-semibold text-uppercase text-muted mb-2">
+                        Special
+                      </div>
+                      <div className="d-flex flex-column gap-2">
+                        {app.special.map((special) => (
+                          <label
+                            key={special.key}
+                            className="form-check form-check-inline m-0"
+                          >
+                            <input
+                              className="form-check-input"
+                              type="checkbox"
+                              checked={!!appPerm?.special?.[special.key]}
+                              onChange={() =>
+                                onToggleSpecial(app.key, special.key)
+                              }
+                            />
+                            <span className="form-check-label">
+                              {special.label}
+                            </span>
+                          </label>
+                        ))}
+                      </div>
+                    </div>
+                  )}
+                </div>
+              )
+            })}
+
+            <div className="d-flex justify-content-end gap-2">
+              <button
+                type="button"
+                className="btn btn-outline-secondary"
+                onClick={onClose}
+                disabled={isLoading || isFetching}
+              >
+                Cancel
+              </button>
+              <button
+                type="button"
+                className="btn btn-primary"
+                onClick={onSave}
+                disabled={isLoading || isFetching}
+              >
+                {isLoading ? "Saving..." : "Save"}
+              </button>
+            </div>
+          </div>
+        </DrawerBody>
+      </DrawerContent>
+    </Drawer>
+  )
+}