What Was Implemented

Backend Updates ✅

1. API Route Changes (src/routes/integrations/storage.ts):

• ✅ Added scope field to list endpoint response
• ✅ List endpoint now returns both USER and COMPANY connections via OR query
• ✅ Connect endpoint accepts scope parameter (default: 'USER')
• ✅ Permission check: Only admins can create COMPANY connections
• ✅ OAuth callback saves connection with correct scope
• ✅ Browse/Import endpoints check access via OR query (userId OR companyId)
• ✅ Delete endpoint enforces permissions based on scope:
  • COMPANY: Only admins can delete
  • USER: Only creator can delete

2. Permission Model:

// COMPANY connections
- Create: OWNER or ADMIN only
- Access: All team members
- Delete: OWNER or ADMIN only

// USER connections  
- Create: Anyone
- Access: Creator only
- Delete: Creator only

Frontend Updates ✅

1. StorageConnections Component (components/integrations/StorageConnections.tsx):

• ✅ Grouped display: Company Connections / My Personal Connections
• ✅ Company section only shown to admins
• ✅ Separate grid for each scope with appropriate connect buttons
• ✅ Scope badges: Building icon (company) / User icon (personal)
• ✅ Permission-aware delete buttons
• ✅ Extracted ConnectionCard component for reusability

2. CloudStorageBrowser Component (components/media/CloudStorageBrowser.tsx):

• ✅ Shows scope badges in connection sidebar
• ✅ Visual distinction between company and personal drives

3. Integrations Page (pages/Integrations.tsx):

• ✅ Fetches user role from storage/JWT
• ✅ Passes role to StorageConnections for admin features

Visual Design

Company Connections Section (Admins Only)

+--------------------------------------------------+
| 🏢 Company Connections                          |
| Shared with all team members                    |
|                                                 |
| [Google Drive Card]  [Dropbox Card]  [OneDrive]|
|  🏢 Company badge    🏢 Company badge           |
|  Connect button      Connect button             |
+--------------------------------------------------+

Personal Connections Section (All Users)

+--------------------------------------------------+
| 👤 My Personal Connections                      |
| Only visible to you                             |
|                                                 |
| [Google Drive Card]  [Dropbox Card]  [OneDrive]|
|  Connected           Not connected              |
|  [Disconnect]        [Connect]                  |
+--------------------------------------------------+

Testing Checklist

As Admin:

• [ ] Can see both Company and Personal sections
• [ ] Can create COMPANY connection
• [ ] Can create USER connection
• [ ] Can delete any COMPANY connection
• [ ] Can only delete own USER connections
• [ ] Company connections visible to all team members

As Regular User:

• [ ] Cannot see Company Connections section
• [ ] Can only see Personal Connections
• [ ] Can create USER connection
• [ ] Cannot create COMPANY connection (403 error)
• [ ] Can delete only own connections
• [ ] Can browse/import from both COMPANY and own USER connections

OAuth Flow:

• [ ] COMPANY scope passed in state and saved correctly
• [ ] USER scope passed in state and saved correctly
• [ ] Redirects work after OAuth callback
• [ ] Connections appear in correct section after connecting

Key Files Modified

Backend:

• apps/backend/prisma/schema.prisma - Added ConnectionScope enum and scope field
• apps/backend/src/routes/integrations/storage.ts - Updated all endpoints

Frontend:

• apps/marketing/src/components/integrations/StorageConnections.tsx - Hybrid display
• apps/marketing/src/components/media/CloudStorageBrowser.tsx - Scope badges
• apps/marketing/src/pages/Integrations.tsx - Role management

Applies To All Providers

This hybrid design applies uniformly to:

• ✅ Google Drive
• ⏳ Dropbox (when implemented)
• ⏳ OneDrive (when implemented)
• ⏳ Canva (when implemented)

Each provider follows the same scope pattern for consistency.