feat: create group modal

[kevinrutledge]

What needs to be built?

A dialog modal for creating a new contact group. Contains a form with Group Name (required), Description (optional), and Cancel/Submit buttons. Opens when the user clicks the "+" add card on the groups list page or the top bar action button.

Design reference

Figma — Paso Food Co-Op

Design system: Paso Brown #523019 for submit button, Paso Red #831002 for cancel button outline

Documentation

Existing patterns:

• src/components/ui/dialog.tsx — shadcn Dialog
• src/components/ui/input.tsx — shadcn Input
• src/components/ui/textarea.tsx — shadcn Textarea
• src/components/ui/label.tsx — shadcn Label
• src/components/ui/button.tsx — shadcn Button
• src/schema/contact-group.ts — CreateContactGroupSchema (name required, description optional)
• src/components/referral/referral-form.tsx — form with validation pattern

Official docs:

• shadcn Dialog
• shadcn Input
• shadcn Label

Technical notes

Create the component at src/components/groups/create-group-modal.tsx.

Modal layout:

• Title: "Create Contact Group"
• Form fields:
  • "Group Name" label with red asterisk (required) + <Input> (empty)
  • "Description (Optional)" label + <Textarea> (empty)
• Footer buttons (side by side):
  • "Cancel" — outlined button with Paso Red border and text. Dismisses the modal.
  • "Create Group" — filled button (Paso Brown #523019 fill). Calls onSubmit with form values.
• Close: X button
• Validation: Group Name is required — disable submit button if empty. Show inline error if user tries to submit with empty name.

interface CreateGroupModalProps {
  open: boolean;
  onOpenChange: (open: boolean) => void;
  onSubmit: (data: { name: string; description: string | null }) => void;
  isSubmitting?: boolean;
}

The component manages local form state. On submit, it passes { name, description } to the onSubmit callback. The tech lead handles calling the createContactGroup server action and closing the modal on success.

The Figma shows "Add Members" as part of creation, but the backend creates groups and adds members as separate operations. Adding members during creation will be handled by the tech lead opening the Add Members modal after successful group creation.

Reset form fields when the modal closes (via onOpenChange).

Acceptance criteria

• Component created at src/components/groups/create-group-modal.tsx
• Uses shadcn Dialog for modal overlay
• "Create Contact Group" title displays
• Group Name input with required indicator (red asterisk)
• Description textarea labeled "Description (Optional)"
• "Cancel" button with Paso Red outline dismisses the modal
• "Create Group" button with Paso Brown fill (#523019)
• "Create Group" button disabled when Group Name is empty
• "Create Group" button disabled and shows loading state when isSubmitting is true
• onSubmit fires with { name, description } on valid submission
• description is null when field is empty (not empty string)
• Form resets when modal closes
• X close button dismisses the modal
• Exported as named export
• npm run build passes