feat: add user admin UI

src/app/admin/layout.tsx

@@ -0,0 +1,39 @@
+'use client'
+
+import { Card, CardBody, CardHeader, Tab, Tabs } from '@nextui-org/react'
+import NextLink from 'next/link'
+import { usePathname } from 'next/navigation'
+import { ReactNode } from 'react'
+
+export default function Layout({ children }: { children: ReactNode }) {
+  const pathname = usePathname()
+
+  return (
+    <>
+      <Card className="flex flex-col gap-2 w-full p-1">
+        <CardHeader>
+          <div className="h1 font-bold text-2xl">Gestión de usuarios</div>
+        </CardHeader>
+        <CardBody className="overflow-hidden">
+          <Tabs
+            size="lg"
+            aria-label="Options"
+            selectedKey={pathname}
+            classNames={{
+              tab: 'max-w-fit',
+              tabList: 'w-full',
+            }}
+          >
+            <Tab
+              key="/admin/users"
+              href="/admin/users"
+              title="Usuarios"
+              as={NextLink}
+            />
+          </Tabs>
+          <div className="mt-4">{children}</div>
+        </CardBody>
+      </Card>
+    </>
+  )
+}

src/app/admin/users/page.tsx

@@ -0,0 +1,13 @@
+'use server'
+
+import UsersTable from '@/components/users-table/users-table'
+import { findUsers } from '@/core/user/infrastructure/actions/find-users'
+
+export default async function Page() {
+  const users = await findUsers()
+  return (
+    <>
+      <UsersTable users={users} />
+    </>
+  )
+}

src/app/books/[id]/page.tsx

@@ -1,8 +1,10 @@
 import { notFound } from 'next/navigation'
 
-import BookPage from '@/components/book-page'
+import BookPage from '@/components/book-page/book-page'
 import { findBook } from '@/core/book/infrastructure/actions/find-book'
 import getHistoricalLoans from '@/core/loan/infrastructure/actions/get-historical-loans'
+import UserResponse from '@/core/user/dto/responses/user.response'
+import me from '@/core/user/infrastructure/actions/me'
 
 interface PageParameters {
   id: string
@@ -11,14 +13,15 @@ interface PageParameters {
 export default async function Page({ params }: { params: PageParameters }) {
   const book = await findBook(params.id)
   const historicalLoans = await getHistoricalLoans(params.id)
+  const user = (await me()) as UserResponse
 
   if (!book) {
     return notFound()
   }
 
   return (
     <>
-      <BookPage book={book} historicalLoans={historicalLoans} />
+      <BookPage user={user} book={book} historicalLoans={historicalLoans} />
     </>
   )
 }

src/components/book-card/book-card-form.tsx

@@ -21,9 +21,9 @@ function useController(properties: BookCardFormProperties) {
   const { book, me } = properties
 
   const isLoaned = !!book.loan
-  const isLogged = !!me
-  const isOwned = isLoaned && isLogged && book.loan.user.id === me.id
-  const isActive = isLogged && (!isLoaned || isOwned)
+  const isMember = !!me && me.roles.includes('ROLE_MEMBER')
+  const isOwned = isLoaned && isMember && book.loan.user.id === me.id
+  const isActive = isMember && (!isLoaned || isOwned)
 
   const currentAction = useFormState(
     isOwned ? returnBook : loanBook,

src/components/book-page.tsx → src/components/book-page/book-page.tsx

@@ -11,32 +11,28 @@ import {
 } from '@nextui-org/react'
 import { format } from 'date-fns'
 import { es } from 'date-fns/locale'
-import Image from 'next/image'
 import Link from 'next/link'
 
 import BookBreadcrumbs from '@/components/book-breadcrubs/book-breadcrubs'
+import BookCard from '@/components/book-card/book-card'
 import BookResponse from '@/core/book/dto/responses/book.response'
 import HistoricalLoansResponse from '@/core/loan/dto/responses/historical-loans.response'
+import UserResponse from '@/core/user/dto/responses/user.response'
 
 interface BookPageProperties {
   book: BookResponse
   historicalLoans: HistoricalLoansResponse[]
+  user: UserResponse
 }
 
 export default function BookPage(properties: BookPageProperties) {
-  const { book, historicalLoans } = properties
+  const { book, historicalLoans, user } = properties
   return (
     <>
       <main className="flex flex-col gap-4 px-4 md:px-0">
         <BookBreadcrumbs title={book.title} />
         <div className="flex flex-col md:flex-row gap-4">
-          <Image
-            className="h-[297px] object-scale-down w-auto"
-            alt={book.title}
-            width={297}
-            height={387}
-            src={book.image}
-          />
+          <BookCard book={book} me={user} />
           <div className="flex flex-col gap-4">
             <h1 className="font-bold text-4xl text-default-800">
               {book.title}
@@ -45,14 +41,16 @@ export default function BookPage(properties: BookPageProperties) {
               {book.authors.join(', ')}
             </div>
             <div className="flex-grow">
-              <Button
-                as={Link}
-                href={`/books/${book.id}/edit`}
-                prefetch
-                variant="ghost"
-              >
-                Editar
-              </Button>
+              {user.roles.includes('ROLE_ADMIN') ? (
+                <Button
+                  as={Link}
+                  href={`/books/${book.id}/edit`}
+                  prefetch
+                  variant="ghost"
+                >
+                  Editar
+                </Button>
+              ) : null}
             </div>
             <LoanBy book={book} />
           </div>

src/components/header/header-authenticated-menu.tsx

@@ -1,6 +1,6 @@
 import {
-  ArrowLeftOnRectangleIcon,
-  BookOpenIcon,
+  AdjustmentsHorizontalIcon,
+  ArrowLeftEndOnRectangleIcon,
   PlusIcon,
   UserIcon,
 } from '@heroicons/react/24/outline'
@@ -21,14 +21,25 @@ interface HeaderAuthenticatedMenuProperties {
   user: UserResponse
 }
 
+const OPTIONS = [
+  { key: 'profile', roles: ['ROLE_USER'], url: '/settings/profile' },
+  { key: 'add_book', roles: ['ROLE_ADMIN'], url: '/books/new' },
+  { key: 'admin', roles: ['ROLE_ADMIN'], url: '/admin/users' },
+  { key: 'signout', roles: ['ROLE_USER'], url: '/signout' },
+]
+
 export default function HeaderAuthenticatedMenu(
   properties: HeaderAuthenticatedMenuProperties,
 ) {
   const router = useRouter()
   const {
-    user: { email, image, name },
+    user: { email, image, name, roles },
   } = properties
 
+  const disabledKeys = OPTIONS.filter(
+    (option) => !option.roles.some((role) => roles.includes(role)),
+  ).map((option) => option.key)
+
   return (
     <>
       <Dropdown placement="bottom-end">
@@ -42,7 +53,11 @@ export default function HeaderAuthenticatedMenu(
             fallback={<UserIcon width={24} height={24} />}
           />
         </DropdownTrigger>
-        <DropdownMenu aria-label="Profile actions" variant="flat">
+        <DropdownMenu
+          aria-label="Profile actions"
+          variant="flat"
+          disabledKeys={disabledKeys}
+        >
           <DropdownItem
             key="profile"
             onClick={() => router.push('/settings/profile')}
@@ -63,15 +78,18 @@ export default function HeaderAuthenticatedMenu(
             Añadir libro
           </DropdownItem>
           <DropdownItem
-            key="books"
-            startContent={<BookOpenIcon width={24} height={24} />}
+            key="admin"
+            startContent={<AdjustmentsHorizontalIcon width={24} height={24} />}
+            onClick={() => router.push('/admin/users')}
           >
-            Mis libros
+            Administrar
           </DropdownItem>
           <DropdownItem
             key="signout"
             onClick={() => router.push('/signout')}
-            startContent={<ArrowLeftOnRectangleIcon width={24} height={24} />}
+            startContent={
+              <ArrowLeftEndOnRectangleIcon width={24} height={24} />
+            }
           >
             Cerrar sesión
           </DropdownItem>

src/components/users-table/users-table-cell-action.tsx

@@ -0,0 +1,30 @@
+'use client'
+
+import { Switch } from '@nextui-org/react'
+
+import UserResponse from '@/core/user/dto/responses/user.response'
+import enableUser from '@/core/user/infrastructure/actions/enable-user'
+
+interface UsersTableCellActionProperties {
+  user: UserResponse
+}
+
+export function UsersTableCellAction(
+  properties: UsersTableCellActionProperties,
+) {
+  const { user } = properties
+  const enabled = user.roles.includes('ROLE_MEMBER')
+  if (user.roles.includes('ROLE_ADMIN')) {
+    return null
+  }
+
+  const selectHandler = async (isSelected: boolean) => {
+    await enableUser(user.email, isSelected)
+  }
+
+  return (
+    <Switch defaultSelected={enabled} onValueChange={selectHandler}>
+      Activar
+    </Switch>
+  )
+}

src/components/users-table/users-table-cell.tsx

@@ -0,0 +1,46 @@
+'use client'
+
+import { User } from '@nextui-org/react'
+import { Key } from 'react'
+
+import { UsersTableCellAction } from '@/components/users-table/users-table-cell-action'
+import UserResponse from '@/core/user/dto/responses/user.response'
+import gravatar from '@/lib/utils/gravatar'
+
+interface UsersTableCellProperties {
+  columnKey: Key
+  user: UserResponse
+}
+
+export default function UsersTableCell(properties: UsersTableCellProperties) {
+  const { columnKey, user } = properties
+
+  switch (columnKey) {
+    case 'email': {
+      return (
+        <User
+          avatarProps={{ radius: 'lg', src: gravatar(user.email) }}
+          description={user.email}
+          name={user.name}
+        >
+          {user.email}
+        </User>
+      )
+    }
+    case 'roles': {
+      return (
+        <div className="flex flex-col">
+          <p className="text-bold text-sm capitalize pl-1">
+            {user.roles.join(', ')}
+          </p>
+        </div>
+      )
+    }
+    case 'actions': {
+      return <UsersTableCellAction user={user} />
+    }
+    default: {
+      return user[columnKey as keyof UserResponse]
+    }
+  }
+}