feat: show participant and feedback count

Author: luisstd

src/app/dashboard/retros/components/retro-card.tsx

@@ -1,18 +1,29 @@
-import { Retrospective } from '@prisma/client'
+import { Prisma } from '@prisma/client'
+import { IconArrowRight, IconUser } from '@tabler/icons-react'
+import { MessageCircle } from 'lucide-react'
 import Link from 'next/link'
 
 import { EditRetro } from '@/app/dashboard/retros/components/edit-retro'
+import { Button } from '@/app/ui/button/button'
 import {
   Card,
+  CardContent,
   CardDescription,
   CardHeader,
   CardTitle,
 } from '@/app/ui/card/card'
 import { RetrospectiveUpdateInput } from '@/types/retrospective'
 import { formatDate } from '@/utils/utils'
 
+type RetroWithRelations = Prisma.RetrospectiveGetPayload<{
+  include: {
+    items: true
+    participants: true
+  }
+}>
+
 type RetroCardProps = {
-  retrospective: Retrospective
+  retrospective: RetroWithRelations
   handleUpdateRetro: (input: RetrospectiveUpdateInput) => void
 }
 
@@ -23,7 +34,7 @@ export function RetroCard({
   return (
     <Card
       key={retrospective.id}
-      className='h-full w-full shadow-sm transition ease-in-out hover:scale-105'
+      className='h-full w-full shadow-sm transition duration-200 ease-in-out hover:ring-2 hover:ring-primary hover:ring-offset-2 dark:hover:ring-secondary'
     >
       <CardHeader>
         <CardTitle className='flex items-baseline justify-between'>
@@ -35,19 +46,41 @@ export function RetroCard({
         </CardTitle>
         <CardDescription>{formatDate(retrospective.date)}</CardDescription>
       </CardHeader>
-      <Link
-        className='hover:cursor-pointer'
-        href={{
-          pathname: '/retro',
-          query: {
-            id: retrospective.id,
-            name: retrospective.name,
-          },
-        }}
-        aria-label='Go to retro view'
-      >
-        <div className='pattern-cross h-28 pattern-bg-transparent pattern-foreground pattern-opacity-5 pattern-size-4' />
-      </Link>
+
+      <CardContent className='flex justify-between text-muted-foreground'>
+        <div className='flex flex-col gap-2'>
+          <p className='flex items-center gap-2'>
+            <IconUser size={18} />
+            {retrospective.participants.length}
+            <p>Participants</p>
+          </p>
+          <p className='flex items-center gap-2'>
+            <MessageCircle size={18} />
+            {retrospective.items.length}
+            <p>Feedback items</p>
+          </p>
+        </div>
+        <Button
+          variant='link'
+          size='lg'
+          className='self-end justify-self-end pr-0'
+        >
+          <Link
+            className='flex items-center'
+            href={{
+              pathname: '/retro',
+              query: {
+                id: retrospective.id,
+                name: retrospective.name,
+              },
+            }}
+            aria-label='Go to retro view'
+          >
+            Open
+            <IconArrowRight size={18} />
+          </Link>
+        </Button>
+      </CardContent>
     </Card>
   )
 }

src/server/api/routers/retrospective.ts

@@ -26,6 +26,10 @@ export const retrospectiveRouter = createTRPCRouter({
 
       return ctx.db.retrospective.findMany({
         where: filters,
+        include: {
+          items: true,
+          participants: true,
+        },
         orderBy: { date: 'desc' },
       })
     }),