HeyWav Form Panels - Complete Information Architecture

Overview

This document outlines the complete Information Architecture for HeyWav's slide-out detail panels used for managing music production projects, songs, people, artists, and companies.

---

1. PROJECTS

Tab Structure

• Overview (default active)
• Deliverables

OVERVIEW TAB

Section: Basics (Collapsible, Open by default)

Icon: FileText | Color: bg-blue-600

Identity Group:

• Project Name*
  • Type: text
  • Required field
  • Placeholder: "Enter project name"
• Artists*
  • Type: creatable-multiselect
  • Required field
  • Options: [populated from Artists database]
  • Placeholder: "Select artists"
  • Chip Type: artist (violet colors)
  • Clickable chips navigate to Artists panel
• Secondary Artists
  • Type: creatable-multiselect
  • Options: [populated from Artists database]
  • Chip Type: artist (violet colors)
  • Clickable chips navigate to Artists panel

Separator Line

Metadata Group:

• Tags
  • Type: creatable-multiselect
  • Options: ["R&B", "Pop", "Alternative", "Hip-Hop"]
  • Chip Type: tag (rose colors)
• Notes
  • Type: textarea
  • Rows: 4
  • Placeholder: "Project notes..."

Separator Line

Links Group:

• Links
  • Type: array-field (repeater with boxes)
  • Fields:
    • Label (text)
    • URL (url with click-through)
  • Icon: Link

Section: Status (Collapsible, Open by default)

Icon: Settings | Color: bg-purple-600

• Status
  • Type: toggle-bar
  • Options: ["Planning", "In Progress", "Delivered", "Archived"]
  • Icons: Calendar, Play, CheckCircle, Archive

Section: Money (Collapsible, Closed by default)

Icon: DollarSign | Color: bg-yellow-600

Billing Group:

• Project Rate
  • Type: text
  • Placeholder: "$0.00"

Separator Line

Payments Group:

• Payment Status
  • Type: toggle-bar
  • Options: ["Not Started", "Partial", "Paid", "Invoiced"]
  • Icons: Circle, Clock, CheckCircle, Send
• Amount Paid
  • Type: text
  • Placeholder: "$0.00"

Section: Dates & Tasks (Collapsible, Closed by default)

Icon: Calendar | Color: bg-orange-600

Key Dates:

• Event + Date
  • Type: repeater-field (with gray boxes)
  • Fields:
    • Event (select): ["Client Sent", "Mix Review", "Final Delivery", "Deadline", "Milestone"]
    • Date (date picker)
  • Icon: Calendar

Separator Line

Tasks:

• Task Name + Status + Due Date
  • Type: repeater-field (with gray boxes)
  • Fields:
    • Task (text): "Task description"
    • Status (select): ["To Do", "In Progress", "Done", "Blocked"]
    • Due Date (date picker)
  • Icon: CheckCircle

Section: Relationships (Collapsible, Closed by default)

Icon: Users | Color: bg-green-600

• Contacts
  • Type: creatable-multiselect
  • Options: [populated from People database]
  • Chip Type: person (emerald colors)
  • Clickable chips navigate to People panel
• Companies
  • Type: creatable-multiselect
  • Options: [populated from Companies database]
  • Chip Type: company (blue colors)
  • Clickable chips navigate to Companies panel
• Artists
  • Type: creatable-multiselect
  • Options: [populated from Artists database]
  • Chip Type: artist (violet colors)
  • Clickable chips navigate to Artists panel

Section: Additional Details (Collapsible, Closed by default)

Icon: FileText | Color: bg-gray-600

• Additional Notes
  • Type: textarea
  • Rows: 4
  • Placeholder: "Free-form notes / misc fields..."

DELIVERABLES TAB

Section: Templates & Deliverables (Collapsible, Open by default)

Icon: FileText | Color: bg-emerald-600

Template Packages:

• Template Types
  • Type: creatable-multiselect (non-creatable)
  • Options: ["Mixing Package", "Mastering Package", "Production Package", "Vocal Production", "Custom Package"]
  • Chip Type: project (indigo colors)
  • Behavior: Selection triggers dynamic tag population
• Deliverables (appears when templates selected)
  • Type: creatable-multiselect
  • Dynamic options based on template selection:
    • Mixing Package: ["Stereo Mix", "Instrumental", "A Cappella", "TV Mix", "Clean Version"]
    • Mastering Package: ["Mastered Stereo", "Mastered Instrumental", "Mastered Clean", "Reference Master"]
    • Production Package: ["Full Beat", "Beat Loop", "Stems", "MIDI Files", "Project File"]
    • Vocal Production: ["Lead Vocals", "Harmonies", "Ad-libs", "Vocal Stems", "Tuned Vocals"]
    • Custom Package: ["Custom Item 1", "Custom Item 2", "Custom Item 3"]
  • Chip Type: tag (rose colors)
  • Shows count: "Deliverables (X selected)"

Separator Line

Custom Items:

• Additional Deliverables
  • Type: array-field (repeater with boxes)
  • Field: Custom deliverable (text)
  • Icon: FileText

---

2. SONGS

Tab Structure

• Overview (default active)
• Client Feedback

OVERVIEW TAB

Section: Basics (Collapsible, Open by default)

Icon: FileText | Color: bg-blue-600

Info Group:

• Song Title*
  • Type: text
  • Required field
  • Placeholder: "Enter song title"
• Linked Project*
  • Type: select
  • Required field
  • Options: [populated from Projects database]
  • Placeholder: "Select project"
• Primary Artist*
  • Type: select
  • Required field
  • Options: [populated from Artists database]
  • Placeholder: "Select primary artist"
• Featured Artists
  • Type: creatable-multiselect
  • Options: [populated from Artists database]
  • Chip Type: artist (violet colors)
  • Clickable chips navigate to Artists panel

Separator Line

Metadata Group:

• Tags
  • Type: creatable-multiselect
  • Options: ["R&B", "Pop", "Alternative", "Hip-Hop"]
  • Chip Type: tag (rose colors)
• Notes
  • Type: textarea
  • Rows: 3
  • Placeholder: "Song notes..."

Separator Line

Links Group:

• Links
  • Type: array-field (repeater with boxes)
  • Fields:
    • Label (text)
    • URL (url with click-through)
  • Icon: Link

Section: Status (Collapsible, Open by default)

Icon: Settings | Color: bg-purple-600

Workflow Group:

• Workflow Setup
  • Type: creatable-multiselect
  • Options: ["Mixing", "Mastering", "Production"]
  • Chip Type: workflow (amber colors)
  • Behavior: Selection triggers dynamic status bars below
• Workflow Status (appears when workflow types selected)
  • Dynamic status bars for each selected workflow type
  • Each workflow gets its own toggle bar:
    • Type: toggle-bar
    • Options: ["Not Started", "In Progress", "Needs Review", "Done"]
    • Icons: Circle, RefreshCw, Eye, CheckCircle
    • Displayed in gray boxes with workflow type labels
• Waiting on Client
  • Type: boolean (toggle switch)
  • Placeholder: "Waiting on client response"

Section: Money (Collapsible, Closed by default)

Icon: DollarSign | Color: bg-yellow-600

• Payment Status
  • Type: toggle-bar
  • Options: ["Not Started", "Partial", "Paid", "Invoiced"]
  • Icons: Circle, Clock, CheckCircle, Send

Section: Relationships (Collapsible, Closed by default)

Icon: Users | Color: bg-green-600

• Contacts
  • Type: creatable-multiselect
  • Placeholder: "Add contacts (engineers, collaborators)"
  • Options: [populated from People database]
  • Chip Type: person (emerald colors)
  • Clickable chips navigate to People panel
• Companies
  • Type: creatable-multiselect
  • Placeholder: "Add companies (studios, labels)"
  • Options: [populated from Companies database]
  • Chip Type: company (blue colors)
  • Clickable chips navigate to Companies panel

CLIENT FEEDBACK TAB

Section: Client Feedback (Collapsible, Open by default)

Icon: MessageSquare | Color: bg-green-600

• Date + Notes entries
  • Type: repeater-field (with gray boxes)
  • Fields:
    • Date (date picker): "Feedback date"
    • Feedback (textarea): "Client feedback notes" (4 rows)
  • Icon: MessageSquare

---

3. PEOPLE

Tab Structure

• Single tab (no tab navigation)

Section: Basics (Collapsible, Open by default)

Icon: FileText | Color: bg-blue-600

Identity Group:

• First Name*
  • Type: text
  • Required field
  • Placeholder: "First name"
• Last Name*
  • Type: text
  • Required field
  • Placeholder: "Last name"
• Roles
  • Type: creatable-multiselect
  • Options: ["Manager", "A&R", "Artist", "Engineer", "Label Rep"]
  • Chip Type: role (teal colors)

Separator Line

Contact Info Group:

• Email
  • Type: email
  • Placeholder: "Enter email address"
• Secondary Email
  • Type: email
  • Placeholder: "Alternative email"
• Mobile Phone
  • Type: phone (with formatting and phone icon)
  • Placeholder: "+1 (555) 123-4567"
• Phone
  • Type: phone (with formatting and phone icon)
  • Placeholder: "+1 (555) 987-6543"

Separator Line

Addresses Group:

• Billing Address
  • Type: address (single text field with map pin icon)
  • Placeholder: "Enter billing address"
• Mailing Address
  • Type: address (single text field with map pin icon)
  • Placeholder: "Enter mailing address"

Separator Line

Notes & Tags Group:

• Tags
  • Type: creatable-multiselect
  • Options: ["VIP", "Producer", "Executive", "Frequent"]
  • Chip Type: tag (rose colors)
• Notes
  • Type: textarea
  • Rows: 3
  • Placeholder: "Contact notes..."
• Links
  • Type: array-field (repeater with boxes)
  • Fields:
    • Label (text): "URL & Label"
    • URL (url with click-through)
  • Icon: Link

Section: Status (Collapsible, Open by default)

Icon: Settings | Color: bg-purple-600

CRM & Follow-Up Group:

• CRM Status
  • Type: toggle-bar
  • Options: ["Lead", "Active", "Dormant"]
  • Icons: Target, UserCheck, UserX
• Follow-Up Status
  • Type: toggle-bar
  • Options: ["Needs Reply", "Scheduled", "Waiting"]
  • Icons: MessageSquare, Calendar, Clock
• Priority Contact
  • Type: boolean (toggle switch)
  • Placeholder: "Mark as priority contact"
• Next Contact Date (Smart field with conditional behavior)
  • Type: select
  • Options: ["Tomorrow", "Next Week", "In 2 Weeks", "In a Month", "Pick Date..."]
  • Behavior: If "Pick Date..." selected, shows date picker below
  • Behavior: If any option selected, shows "Date Last Contacted" field

Section: Relationships (Collapsible, Closed by default)

Icon: Users | Color: bg-green-600

• Artists
  • Type: creatable-multiselect
  • Options: [populated from Artists database]
  • Chip Type: artist (violet colors)
  • Clickable chips navigate to Artists panel
• Companies
  • Type: creatable-multiselect
  • Options: [populated from Companies database]
  • Chip Type: company (blue colors)
  • Clickable chips navigate to Companies panel
• Projects
  • Type: creatable-multiselect
  • Options: [populated from Projects database]
  • Chip Type: project (indigo colors)
  • Clickable chips navigate to Projects panel

---

4. ARTISTS

Tab Structure

• Single tab (no tab navigation)

Section: Basics (Collapsible, Open by default)

Icon: FileText | Color: bg-blue-600

Identity Group:

• Artist Name*
  • Type: text
  • Required field
  • Placeholder: "Enter artist name"

Separator Line

Details Group:

• Creative Phase(s)
  • Type: toggle-bar (multi-select style)
  • Options: ["Writing", "Recording", "Mixing", "Releasing", "Touring", "On Break"]
  • Icons: PenTool, Mic, Sliders, Upload, Plane, Coffee
• Tags
  • Type: creatable-multiselect
  • Options: ["R&B", "Pop", "Alternative", "Hip-Hop"]
  • Chip Type: tag (rose colors)
• Notes
  • Type: textarea
  • Rows: 3
  • Placeholder: "Artist notes..."

Section: Relationships (Collapsible, Closed by default)

Icon: Users | Color: bg-green-600

• Contacts
  • Type: creatable-multiselect
  • Options: [populated from People database]
  • Chip Type: person (emerald colors)
  • Clickable chips navigate to People panel
• Companies
  • Type: creatable-multiselect
  • Options: [populated from Companies database]
  • Chip Type: company (blue colors)
  • Clickable chips navigate to Companies panel
• Projects
  • Type: creatable-multiselect
  • Options: [populated from Projects database]
  • Chip Type: project (indigo colors)
  • Clickable chips navigate to Projects panel

---

5. COMPANIES

Tab Structure

• Single tab (no tab navigation)

Section: Basics (Collapsible, Open by default)

Icon: FileText | Color: bg-blue-600

Identity Group:

• Company Name*
  • Type: text
  • Required field
  • Placeholder: "Enter company name"
• Company Type
  • Type: creatable-multiselect
  • Options: ["Record Label", "Management", "Publishing", "Distribution", "Studio"]
  • Chip Type: tag (rose colors)

Separator Line

Metadata Group:

• Tags
  • Type: creatable-multiselect
  • Options: ["Major Label", "Independent", "Boutique", "International"]
  • Chip Type: tag (rose colors)
• Notes
  • Type: textarea
  • Rows: 3
  • Placeholder: "Company notes..."

Section: Relationships (Collapsible, Closed by default)

Icon: Users | Color: bg-green-600

• Contacts
  • Type: creatable-multiselect
  • Options: [populated from People database]
  • Chip Type: person (emerald colors)
  • Clickable chips navigate to People panel
• Artists
  • Type: creatable-multiselect
  • Options: [populated from Artists database]
  • Chip Type: artist (violet colors)
  • Clickable chips navigate to Artists panel

---

INPUT TYPE DEFINITIONS

Layout & Structure

• Field Layout: All form fields use side-by-side layout with labels on the left and inputs on the right
• Responsive Design: Labels and inputs maintain side-by-side positioning across different screen sizes

Standard Input Types

• text: Single-line text input with focus states
• textarea: Multi-line text input with configurable rows
• email: Email input with validation
• phone: Phone input with formatting and phone icon
• date: Date picker with calendar icon
• url: URL input with click-through capability and edit icon
• address: Single text field with map pin icon for full addresses
• boolean: Toggle switch with label

Advanced Input Types

• select: Dropdown with chevron icon
• multiselect: Multi-selection dropdown (non-creatable)
• creatable-multiselect: Multi-selection with ability to create new items
• toggle-bar: Horizontal button group for status selection with icons
• array-field: Repeater component with gray boxes for multiple entries
• repeater-field: Multi-field repeater with add/remove functionality

Special Behaviors

• Smart Next Contact Date: Conditional field that shows date picker when "Pick Date..." selected, and reveals "Date Last Contacted" when any option is chosen
• Dynamic Workflow Status: Creates individual toggle bars for each selected workflow type in Songs
• Clickable Relationship Chips: Chips in relationship fields navigate to corresponding entity panels
• Template-Driven Deliverables: Selecting template packages automatically populates available deliverable options

Chip Color System

• artist: Violet (bg-violet-100, text-violet-800, border-violet-200)
• company: Blue (bg-blue-100, text-blue-800, border-blue-200)
• person: Emerald (bg-emerald-100, text-emerald-800, border-emerald-200)
• project: Indigo (bg-indigo-100, text-indigo-800, border-indigo-200)
• tag: Rose (bg-rose-100, text-rose-800, border-rose-200)
• role: Teal (bg-teal-100, text-teal-800, border-teal-200)
• workflow: Amber (bg-amber-100, text-amber-800, border-amber-200)

Section Colors

• Basics: bg-blue-600 (blue)
• Status: bg-purple-600 (purple)
• Money: bg-yellow-600 (yellow)
• Dates & Tasks: bg-orange-600 (orange)
• Relationships: bg-green-600 (green)
• Additional Details: bg-gray-600 (gray)
• Templates & Deliverables: bg-emerald-600 (emerald)
• Client Feedback: bg-green-600 (green)