add group information field to group settings and Information tab (#164)

* add group information field to group and Information tab to display

* add breaks to info page

* Improve UX

---------

Co-authored-by: Sebastien Castiel <sebastien@castiel.me>

messages/en-US.json

@@ -75,6 +75,10 @@
       "placeholder": "Summer vacations",
       "description": "Enter a name for your group."
     },
+    "InformationField": {
+      "label": "Group information",
+      "placeholder": "What information is relevant to group participants?"
+    },
     "CurrencyField": {
       "label": "Currency symbol",
       "placeholder": "$, €, £…",
@@ -273,6 +277,11 @@
       "older": "Older"
     }
   },
+  "Information": {
+    "title": "Information",
+    "description": "Use this place to add any information that can be relevant to the group participants.",
+    "empty": "No group information yet."
+  },
   "Settings": {
     "title": "Settings"
   },

messages/fi.json

@@ -75,6 +75,10 @@
       "placeholder": "Kesälomareissu",
       "description": "Syötä ryhmäsi nimi."
     },
+    "InformationField": {
+      "label": "Ryhmän tiedot",
+      "placeholder": "Mitkä tiedot ovat merkityksellisiä ryhmän osallistujille?"
+    },
     "CurrencyField": {
       "label": "Valuuttamerkki",
       "placeholder": "$, €, £…",
@@ -273,6 +277,11 @@
       "older": "Vanhemmat"
     }
   },
+  "Information": {
+    "title": "Tiedot",
+    "description": "Käytä tätä paikkaa lisätäksesi kaikki tiedot, joilla voi olla merkitystä ryhmän osallistujille.",
+    "empty": "Ryhmätietoja ei vielä ole."
+  },
   "Settings": {
     "title": "Asetukset"
   },

prisma/migrations/20240531154748_add_group_information/migration.sql

@@ -0,0 +1,2 @@
+-- AlterTable
+ALTER TABLE "Group" ADD COLUMN     "information" TEXT;

prisma/schema.prisma

@@ -14,6 +14,7 @@ datasource db {
 model Group {
   id           String        @id
   name         String
+  information  String?       @db.Text
   currency     String        @default("$")
   participants Participant[]
   expenses     Expense[]

src/app/groups/[groupId]/group-tabs.tsx

@@ -25,6 +25,7 @@ export function GroupTabs({ groupId }: Props) {
       <TabsList>
         <TabsTrigger value="expenses">{t('Expenses.title')}</TabsTrigger>
         <TabsTrigger value="balances">{t('Balances.title')}</TabsTrigger>
+        <TabsTrigger value="information">{t('Information.title')}</TabsTrigger>
         <TabsTrigger value="stats">{t('Stats.title')}</TabsTrigger>
         <TabsTrigger value="activity">{t('Activity.title')}</TabsTrigger>
         <TabsTrigger value="edit">{t('Settings.title')}</TabsTrigger>

src/app/groups/[groupId]/information/page.tsx

@@ -0,0 +1,54 @@
+import { cached } from '@/app/cached-functions'
+import { Button } from '@/components/ui/button'
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from '@/components/ui/card'
+import { Pencil } from 'lucide-react'
+import { Metadata } from 'next'
+import { getTranslations } from 'next-intl/server'
+import Link from 'next/link'
+import { notFound } from 'next/navigation'
+
+export const metadata: Metadata = {
+  title: 'Totals',
+}
+
+export default async function InformationPage({
+  params: { groupId },
+}: {
+  params: { groupId: string }
+}) {
+  const group = await cached.getGroup(groupId)
+  if (!group) notFound()
+
+  const t = await getTranslations('Information')
+
+  return (
+    <>
+      <Card className="mb-4">
+        <CardHeader>
+          <CardTitle className="flex justify-between">
+            <span>{t('title')}</span>
+            <Button size="icon" asChild className="-mb-12">
+              <Link href={`/groups/${groupId}/edit`}>
+                <Pencil className="w-4 h-4" />
+              </Link>
+            </Button>
+          </CardTitle>
+          <CardDescription className="mr-12">
+            {t('description')}
+          </CardDescription>
+        </CardHeader>
+        <CardContent className="prose prose-sm sm:prose-base max-w-full whitespace-break-spaces">
+          {group.information || (
+            <p className="text-muted-foreground italic">{t('empty')}</p>
+          )}
+        </CardContent>
+      </Card>
+    </>
+  )
+}

src/components/group-form.tsx

@@ -39,6 +39,7 @@ import { useTranslations } from 'next-intl'
 import Link from 'next/link'
 import { useEffect, useState } from 'react'
 import { useFieldArray, useForm } from 'react-hook-form'
+import { Textarea } from './ui/textarea'
 
 export type Props = {
   group?: NonNullable<Awaited<ReturnType<typeof getGroup>>>
@@ -60,11 +61,13 @@ export function GroupForm({
     defaultValues: group
       ? {
           name: group.name,
+          information: group.information ?? '',
           currency: group.currency,
           participants: group.participants,
         }
       : {
           name: '',
+          information: '',
           currency: '',
           participants: [
             { name: t('Participants.John') },
@@ -162,6 +165,27 @@ export function GroupForm({
                 </FormItem>
               )}
             />
+
+            <div className="col-span-2">
+              <FormField
+                control={form.control}
+                name="information"
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>{t('InformationField.label')}</FormLabel>
+                    <FormControl>
+                      <Textarea
+                        rows={10}
+                        className="text-base"
+                        {...field}
+                        placeholder={t('InformationField.placeholder')}
+                      />
+                    </FormControl>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+            </div>
           </CardContent>
         </Card>
 

src/lib/api.ts

@@ -12,6 +12,7 @@ export async function createGroup(groupFormValues: GroupFormValues) {
     data: {
       id: randomId(),
       name: groupFormValues.name,
+      information: groupFormValues.information,
       currency: groupFormValues.currency,
       participants: {
         createMany: {
@@ -226,6 +227,7 @@ export async function updateGroup(
     where: { id: groupId },
     data: {
       name: groupFormValues.name,
+      information: groupFormValues.information,
       currency: groupFormValues.currency,
       participants: {
         deleteMany: existingGroup.participants.filter(

src/lib/schemas.ts

@@ -4,6 +4,7 @@ import * as z from 'zod'
 export const groupFormSchema = z
   .object({
     name: z.string().min(2, 'min2').max(50, 'max50'),
+    information: z.string().optional(),
     currency: z.string().min(1, 'min1').max(5, 'max5'),
     participants: z
       .array(