GSB-Construction/docs/PLAN-material-select-tabs.md

Add Material Dialog — Toggle Tabs (Individual vs By Group)

Goal

Enhance the "Add Material to Task" dialog in Projects/Show.tsx with two tab-style modes:

• Individual — shows flat list of all available materials (current behavior)
• By Group — first pick a group, then material dropdown filters to only that group's materials

Proposed Changes

Backend

[MODIFY] ProjectController.php

• In show(), load materialGroups with their materials eagerly:

  'materialGroups' => fn ($q) => $q->with('materials:id,ulid,name,unit,unit_cost')->withCount('materials'),
  

• No new endpoints needed — all data is already available, just not nested

---

Frontend

[MODIFY] Projects/Show.tsx

1. Add state: materialMode: 'individual' | 'group' and selectedGroupId: string
2. Add toggle tabs above the material Select in the dialog:
   • Two buttons styled as tabs: Individual | By Group
3. When mode = 'individual': show availableMaterials in dropdown (current behavior)
4. When mode = 'group':
   • Show a "Group" Select dropdown populated from project.material_groups
   • Below it, show the material Select filtered to selectedGroup.materials
5. Reset selectedGroupId and materialForm.material_id when switching tabs
6. Update GroupOption interface to include optional materials array

---

Verification

• Switch between tabs → material list updates correctly
• Select a group → only its materials appear
• Submit works the same regardless of mode