Empty state

2 files changed, 59 insertions, 54 deletions

diff --git a/src/app/groups/[groupId]/page.tsx b/src/app/groups/[groupId]/page.tsx
index 9547fcc..b7dc93f 100644
--- a/src/app/groups/[groupId]/page.tsx
+++ b/src/app/groups/[groupId]/page.tsx
@@ -49,62 +49,67 @@ export default async function GroupPage({
             </Button>
           </CardHeader>
         </div>
+
         <CardContent className="p-0">
-          <Table className="">
-            <TableHeader>
-              <TableRow>
-                <TableHead>Title</TableHead>
-                <TableHead>Paid by</TableHead>
-                <TableHead>Paid for</TableHead>
-                <TableHead className="text-right">Amount</TableHead>
-                <TableHead className="w-0"></TableHead>
-              </TableRow>
-            </TableHeader>
-            <TableBody>
-              {expenses.map((expense) => (
-                <TableRow key={expense.id}>
-                  <TableCell>{expense.title}</TableCell>
-                  <TableCell>
-                    <Badge variant="secondary">
-                      {
-                        group.participants.find(
-                          (p) => p.id === expense.paidById,
-                        )?.name
-                      }
-                    </Badge>
-                  </TableCell>
-                  <TableCell className="flex flex-wrap gap-1">
-                    {expense.paidFor.map((paidFor, index) => (
-                      <Badge variant="secondary" key={index}>
+          {expenses.length > 0 ? (
+            <Table className="">
+              <TableHeader>
+                <TableRow>
+                  <TableHead>Title</TableHead>
+                  <TableHead>Paid by</TableHead>
+                  <TableHead>Paid for</TableHead>
+                  <TableHead className="text-right">Amount</TableHead>
+                  <TableHead className="w-0"></TableHead>
+                </TableRow>
+              </TableHeader>
+              <TableBody>
+                {expenses.map((expense) => (
+                  <TableRow key={expense.id}>
+                    <TableCell>{expense.title}</TableCell>
+                    <TableCell>
+                      <Badge variant="secondary">
                         {
                           group.participants.find(
-                            (p) => p.id === paidFor.participantId,
+                            (p) => p.id === expense.paidById,
                           )?.name
                         }
                       </Badge>
-                    ))}
-                  </TableCell>
-                  <TableCell className="text-right tabular-nums">
-                    $ {expense.amount.toFixed(2)}
-                  </TableCell>
-                  <TableCell>
-                    <Button
-                      size="icon"
-                      variant="link"
-                      className="-my-2"
-                      asChild
-                    >
-                      <Link
-                        href={`/groups/${groupId}/expenses/${expense.id}/edit`}
+                    </TableCell>
+                    <TableCell className="flex flex-wrap gap-1">
+                      {expense.paidFor.map((paidFor, index) => (
+                        <Badge variant="secondary" key={index}>
+                          {
+                            group.participants.find(
+                              (p) => p.id === paidFor.participantId,
+                            )?.name
+                          }
+                        </Badge>
+                      ))}
+                    </TableCell>
+                    <TableCell className="text-right tabular-nums">
+                      $&nbsp;{expense.amount.toFixed(2)}
+                    </TableCell>
+                    <TableCell>
+                      <Button
+                        size="icon"
+                        variant="link"
+                        className="-my-2"
+                        asChild
                       >
-                        <ChevronRight className="w-4 h-4" />
-                      </Link>
-                    </Button>
-                  </TableCell>
-                </TableRow>
-              ))}
-            </TableBody>
-          </Table>
+                        <Link
+                          href={`/groups/${groupId}/expenses/${expense.id}/edit`}
+                        >
+                          <ChevronRight className="w-4 h-4" />
+                        </Link>
+                      </Button>
+                    </TableCell>
+                  </TableRow>
+                ))}
+              </TableBody>
+            </Table>
+          ) : (
+            <div className="p-6">Your group doesn’t have any expense yet.</div>
+          )}
         </CardContent>
       </Card>
 
diff --git a/src/components/expense-form.tsx b/src/components/expense-form.tsx
index f7826c6..12bdb2e 100644
--- a/src/components/expense-form.tsx
+++ b/src/components/expense-form.tsx
@@ -56,12 +56,12 @@ export function ExpenseForm({ group, expense, onSubmit }: Props) {
           <CardHeader>
             <CardTitle>Expense information</CardTitle>
           </CardHeader>
-          <CardContent className="grid grid-cols-2 gap-6">
+          <CardContent className="grid grid-cols-1 sm:grid-cols-2 gap-6">
             <FormField
               control={form.control}
               name="title"
               render={({ field }) => (
-                <FormItem>
+                <FormItem className="order-1">
                   <FormLabel>Expense title</FormLabel>
                   <FormControl>
                     <Input placeholder="Monday evening restaurant" {...field} />
@@ -78,7 +78,7 @@ export function ExpenseForm({ group, expense, onSubmit }: Props) {
               control={form.control}
               name="paidBy"
               render={({ field }) => (
-                <FormItem>
+                <FormItem className="order-3 sm:order-2">
                   <FormLabel>Paid by</FormLabel>
                   <Select
                     onValueChange={field.onChange}
@@ -107,7 +107,7 @@ export function ExpenseForm({ group, expense, onSubmit }: Props) {
               control={form.control}
               name="amount"
               render={({ field }) => (
-                <FormItem>
+                <FormItem className="order-2 sm:order-3">
                   <FormLabel>Amount</FormLabel>
                   <FormControl>
                     <Input
@@ -128,7 +128,7 @@ export function ExpenseForm({ group, expense, onSubmit }: Props) {
               control={form.control}
               name="paidFor"
               render={() => (
-                <FormItem>
+                <FormItem className="order-4">
                   <div className="mb-4">
                     <FormLabel>Paid for</FormLabel>
                     <FormDescription>