Migration script, improvements in expenses list

src/app/groups/[groupId]/expenses/expense-list.tsx

@@ -1,5 +1,4 @@
 'use client'
-import { Badge } from '@/components/ui/badge'
 import { Button } from '@/components/ui/button'
 import { getGroupExpenses } from '@/lib/api'
 import { cn } from '@/lib/utils'
@@ -7,6 +6,7 @@ import { Participant } from '@prisma/client'
 import { ChevronRight } from 'lucide-react'
 import Link from 'next/link'
 import { useRouter } from 'next/navigation'
+import { Fragment } from 'react'
 
 type Props = {
   expenses: Awaited<ReturnType<typeof getGroupExpenses>>
@@ -37,22 +37,32 @@ export function ExpenseList({
         }}
       >
         <div>
-          <div className="mb-1">{expense.title}</div>
+          <div className={cn('mb-1', expense.isReimbursement && 'italic')}>
+            {expense.title}
+          </div>
           <div className="text-xs text-muted-foreground">
-            Paid by{' '}
-            <Badge variant="secondary">
-              {getParticipant(expense.paidById)?.name}
-            </Badge>{' '}
+            Paid by <strong>{getParticipant(expense.paidById)?.name}</strong>{' '}
             for{' '}
             {expense.paidFor.map((paidFor, index) => (
-              <Badge variant="secondary" key={index} className="mr-1 mb-1">
-                {participants.find((p) => p.id === paidFor.participantId)?.name}
-              </Badge>
+              <Fragment key={index}>
+                {index !== 0 && <>, </>}
+                <strong>
+                  {
+                    participants.find((p) => p.id === paidFor.participantId)
+                      ?.name
+                  }
+                </strong>
+              </Fragment>
             ))}
           </div>
         </div>
         <div className="flex items-center">
-          <div className="tabular-nums whitespace-nowrap font-bold">
+          <div
+            className={cn(
+              'tabular-nums whitespace-nowrap',
+              expense.isReimbursement ? 'italic' : 'font-bold',
+            )}
+          >
             {currency} {(expense.amount / 100).toFixed(2)}
           </div>
           <Button size="icon" variant="link" className="-my-2" asChild>

src/app/groups/recent-group-list.tsx

@@ -2,7 +2,7 @@
 import { getRecentGroups } from '@/app/groups/recent-groups-helpers'
 import { Button } from '@/components/ui/button'
 import { getGroups } from '@/lib/api'
-import { Loader2 } from 'lucide-react'
+import { Calendar, Loader2, Users } from 'lucide-react'
 import Link from 'next/link'
 import { useEffect, useState } from 'react'
 import { z } from 'zod'
@@ -58,14 +58,24 @@ export function RecentGroupList({ getGroupsAction }: Props) {
           <li key={group.id}>
             <Button variant="outline" className="h-fit w-full py-3" asChild>
               <Link href={`/groups/${group.id}`} className="text-base">
-                <div className="w-full flex flex-col items-start gap-1">
+                <div className="w-full flex flex-col gap-1">
                   <div className="text-base">{group.name}</div>
                   <div className="text-muted-foreground font-normal text-xs">
                     {details ? (
-                      <>
-                        {details._count.participants} participants ·{' '}
-                        {details.currency}
-                      </>
+                      <div className="w-full flex items-center justify-between">
+                        <div className="flex items-center">
+                          <Users className="w-3 h-3 inline mr-1" />
+                          <span>{details._count.participants}</span>
+                        </div>
+                        <div className="flex items-center">
+                          <Calendar className="w-3 h-3 inline mx-1" />
+                          <span>
+                            {details.createdAt.toLocaleDateString('en-US', {
+                              dateStyle: 'medium',
+                            })}
+                          </span>
+                        </div>
+                      </div>
                     ) : (
                       <>
                         <Loader2 className="w-3 h-3 mr-1 inline animate-spin" />