From 0c72d3b458ceafcf7e0d49a9cea66a1aa70ab3d3 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Se=C3=A1n=20L=2E?= <lynch.sean@pm.me>
Date: Sun, 5 Apr 2026 17:49:35 +0100
Subject: [PATCH 1/3] export data, fix unsubscribe notification

---
 CLAUDE.md                                     |   1 +
 app/Actions/Teams/DownloadTeamDataAction.php  |  13 +-
 .../Commands/SendEmailToSubscribed.php        |   8 +-
 app/Exports/CreateCSVExport.php               | 100 ++++++-
 app/Http/Controllers/API/TeamsController.php  |  22 +-
 app/Jobs/Emails/DispatchEmail.php             |   6 +
 app/Providers/AppServiceProvider.php          |   7 +-
 readme/API.md                                 |  27 +-
 readme/ExportData.md                          | 252 +++++++++++++++++
 resources/js/stores/teams/index.js            |   8 +-
 resources/js/views/Teams/TeamsHub.vue         |  71 ++++-
 .../User/Uploads/components/UploadsHeader.vue |  38 +++
 .../Feature/Email/V5AnnouncementEmailTest.php |  15 +
 tests/Feature/Teams/DownloadTeamDataTest.php  |  62 ++++-
 tests/Unit/Exports/CreateCSVExportTest.php    | 260 +++++++++++++++++-
 15 files changed, 840 insertions(+), 50 deletions(-)
 create mode 100644 readme/ExportData.md

diff --git a/CLAUDE.md b/CLAUDE.md
index e54da94f1..b8950ce56 100644
--- a/CLAUDE.md
+++ b/CLAUDE.md
@@ -214,6 +214,7 @@ Fully deployed. 1010+ tests passing. Facilitator queue (3-panel admin-like UI fo
 - `readme/Privacy.md` — Privacy Policy source content with GDPR legal basis (Vue component renders this)
 - `readme/Twitter.md` — Automated Twitter/X commands (schedule, data sources, tweet format, Browsershot config)
 - `readme/TagSuggestions.md` — Quick tags sync API (mobile presets, bulk-replace, cross-device sync)
+- `readme/ExportData.md` — CSV data export system (user/team/location exports, column layout, date filters, S3 pipeline)
 
 ## Daily Changelog
 After every change in a session, append a one-line entry to `readme/changelog/YYYY-MM-DD.md` (create the file if it doesn't exist for today's date). Group entries by session. This is the running record of all work done each day.
diff --git a/app/Actions/Teams/DownloadTeamDataAction.php b/app/Actions/Teams/DownloadTeamDataAction.php
index 5c38aa291..d1ba17164 100644
--- a/app/Actions/Teams/DownloadTeamDataAction.php
+++ b/app/Actions/Teams/DownloadTeamDataAction.php
@@ -10,16 +10,21 @@
 class DownloadTeamDataAction
 {
 
-    public function run(User $user, Team $team)
+    public function run(User $user, Team $team, array $dateFilter = [])
     {
         $path = now()->format('Y') .
             "/" . now()->format('m') .
             "/" . now()->format('d') .
-            "/" . now()->getTimestamp() .
-            '/_Team_OpenLitterMap.csv';  // 2020/10/25/unix/
+            "/" . now()->getTimestamp();
+
+        if (!empty($dateFilter)) {
+            $path .= '_from_' . $dateFilter['fromDate'] . '_to_' . $dateFilter['toDate'];
+        }
+
+        $path .= '/_Team_OpenLitterMap.csv';
 
         /* Dispatch job to create CSV file for export */
-        (new CreateCSVExport(null, null, $team->id))
+        (new CreateCSVExport(null, null, $team->id, null, $dateFilter))
             ->queue($path, 's3', null, ['visibility' => 'public'])
             ->chain([
                 // These jobs are executed when above is finished.
diff --git a/app/Console/Commands/SendEmailToSubscribed.php b/app/Console/Commands/SendEmailToSubscribed.php
index 576d82a58..ce344dbc6 100644
--- a/app/Console/Commands/SendEmailToSubscribed.php
+++ b/app/Console/Commands/SendEmailToSubscribed.php
@@ -37,9 +37,9 @@ public function handle(): int
 
         $userCount = User::where('emailsub', 1)->count();
 
-        // Subscribers not already in users table (avoid duplicates)
-        $userEmails = User::where('emailsub', 1)->pluck('email')->toArray();
-        $subscriberCount = Subscriber::whereNotIn('email', $userEmails)->count();
+        // Exclude ALL user emails from subscribers (users control their own sub via emailsub flag)
+        $userEmailSubquery = User::withoutGlobalScopes()->select('email');
+        $subscriberCount = Subscriber::whereNotIn('email', $userEmailSubquery)->count();
 
         $totalCount = $userCount + $subscriberCount;
 
@@ -78,7 +78,7 @@ public function handle(): int
             });
 
         // ─── Subscribers (deduplicated) ──────────────────────────────
-        Subscriber::whereNotIn('email', $userEmails)
+        Subscriber::whereNotIn('email', $userEmailSubquery)
             ->orderBy('id')
             ->chunk($chunkSize, function ($subscribers) use (&$dispatched, $bar) {
                 foreach ($subscribers as $subscriber) {
diff --git a/app/Exports/CreateCSVExport.php b/app/Exports/CreateCSVExport.php
index 195b7d24d..1e3b370ae 100644
--- a/app/Exports/CreateCSVExport.php
+++ b/app/Exports/CreateCSVExport.php
@@ -2,7 +2,10 @@
 
 namespace App\Exports;
 
+use App\Enums\VerificationStatus;
 use App\Models\Litter\Tags\Category;
+use App\Models\Litter\Tags\LitterObjectType;
+use App\Models\Litter\Tags\Materials;
 use App\Models\Photo;
 
 use Illuminate\Bus\Queueable;
@@ -29,6 +32,12 @@ class CreateCSVExport implements FromQuery, WithMapping, WithHeadings
      */
     private array $categoryObjects = [];
 
+    /** @var array<int, array{id: int, key: string}> */
+    private array $materials = [];
+
+    /** @var array<int, array{id: int, key: string}> */
+    private array $types = [];
+
     public $timeout = 240;
 
     public function __construct($location_type, $location_id, $team_id = null, $user_id = null, array $dateFilter = [])
@@ -51,6 +60,14 @@ public function __construct($location_type, $location_id, $team_id = null, $user
                 ])->values()->toArray(),
             ])
             ->toArray();
+
+        $this->materials = Materials::orderBy('id')->get()
+            ->map(fn ($m) => ['id' => $m->id, 'key' => $m->key])
+            ->toArray();
+
+        $this->types = LitterObjectType::orderBy('id')->get()
+            ->map(fn ($t) => ['id' => $t->id, 'key' => $t->key])
+            ->toArray();
     }
 
     /**
@@ -81,6 +98,21 @@ public function headings(): array
             }
         }
 
+        // Materials columns
+        $result[] = 'MATERIALS';
+        foreach ($this->materials as $material) {
+            $result[] = $material['key'];
+        }
+
+        // Types columns
+        $result[] = 'TYPES';
+        foreach ($this->types as $type) {
+            $result[] = $type['key'];
+        }
+
+        // Brands (single delimited column)
+        $result[] = 'brands';
+
         return array_merge($result, ['custom_tag_1', 'custom_tag_2', 'custom_tag_3']);
     }
 
@@ -105,15 +137,31 @@ public function map($row): array
         ];
 
         $tags = $row->summary['tags'] ?? [];
+        $brandKeys = $row->summary['keys']['brands'] ?? [];
 
-        // Build lookup: category_id → object_id → quantity (from flat tags array)
+        // Single pass: iterate nested summary structure
+        // Structure: { catId: { objId: { quantity, materials: {id: qty}, brands: {id: qty}, custom_tags } } }
         $tagLookup = [];
-        foreach ($tags as $tag) {
-            $catId = $tag['category_id'] ?? 0;
-            $objId = $tag['object_id'] ?? 0;
-            $tagLookup[$catId][$objId] = ($tagLookup[$catId][$objId] ?? 0) + ($tag['quantity'] ?? 0);
+        $materialLookup = [];
+        $brandParts = [];
+
+        foreach ($tags as $catId => $objects) {
+            foreach ($objects as $objId => $tagData) {
+                $qty = $tagData['quantity'] ?? 0;
+                $tagLookup[$catId][$objId] = ($tagLookup[$catId][$objId] ?? 0) + $qty;
+
+                foreach ($tagData['materials'] ?? [] as $materialId => $materialQty) {
+                    $materialLookup[$materialId] = ($materialLookup[$materialId] ?? 0) + $materialQty;
+                }
+
+                foreach ($tagData['brands'] ?? [] as $brandId => $brandQty) {
+                    $brandName = $brandKeys[$brandId] ?? "brand_{$brandId}";
+                    $brandParts[$brandName] = ($brandParts[$brandName] ?? 0) + $brandQty;
+                }
+            }
         }
 
+        // Category/object columns
         foreach ($this->categoryObjects as $category) {
             $result[] = null; // category separator column
 
@@ -122,6 +170,31 @@ public function map($row): array
             }
         }
 
+        // Materials columns
+        $result[] = null; // MATERIALS separator
+        foreach ($this->materials as $material) {
+            $result[] = $materialLookup[$material['id']] ?? null;
+        }
+
+        // Types: read from DB relationship (NOT summary — type_id doesn't exist in summary)
+        $typeLookup = [];
+        foreach ($row->photoTags as $pt) {
+            if ($pt->litter_object_type_id) {
+                $typeLookup[$pt->litter_object_type_id] =
+                    ($typeLookup[$pt->litter_object_type_id] ?? 0) + $pt->quantity;
+            }
+        }
+
+        $result[] = null; // TYPES separator
+        foreach ($this->types as $type) {
+            $result[] = $typeLookup[$type['id']] ?? null;
+        }
+
+        // Brands: single delimited column
+        $result[] = !empty($brandParts)
+            ? implode(';', array_map(fn ($name, $qty) => "{$name}:{$qty}", array_keys($brandParts), array_values($brandParts)))
+            : null;
+
         // Custom tags from extra_tags (eager-loaded in query())
         $customTagNames = $row->photoTags
             ->flatMap(fn ($pt) => $pt->extraTags->where('tag_type', 'custom_tag'))
@@ -148,15 +221,20 @@ public function query()
         }
 
         if ($this->user_id) {
-            return $query->where(['user_id' => $this->user_id]);
-        } elseif ($this->team_id) {
-            return $query->where(['team_id' => $this->team_id, 'verified' => 2]);
+            return $query->where('user_id', $this->user_id);
+        }
+
+        // Team/location exports: only approved photos (ADMIN_APPROVED and above)
+        $query->where('verified', '>=', VerificationStatus::ADMIN_APPROVED->value);
+
+        if ($this->team_id) {
+            return $query->where('team_id', $this->team_id);
         } elseif ($this->location_type === 'city') {
-            return $query->where(['city_id' => $this->location_id, 'verified' => 2]);
+            return $query->where('city_id', $this->location_id);
         } elseif ($this->location_type === 'state') {
-            return $query->where(['state_id' => $this->location_id, 'verified' => 2]);
+            return $query->where('state_id', $this->location_id);
         } else {
-            return $query->where(['country_id' => $this->location_id, 'verified' => 2]);
+            return $query->where('country_id', $this->location_id);
         }
     }
 }
diff --git a/app/Http/Controllers/API/TeamsController.php b/app/Http/Controllers/API/TeamsController.php
index 685f6c6ad..da4b67632 100644
--- a/app/Http/Controllers/API/TeamsController.php
+++ b/app/Http/Controllers/API/TeamsController.php
@@ -4,6 +4,7 @@
 
 use App\Actions\Teams\CreateTeamAction;
 use App\Actions\Teams\DownloadTeamDataAction;
+use Carbon\Carbon;
 use App\Actions\Teams\JoinTeamAction;
 use App\Actions\Teams\LeaveTeamAction;
 use App\Actions\Teams\ListTeamMembersAction;
@@ -232,7 +233,26 @@ public function download (Request $request, DownloadTeamDataAction $action): arr
             return $this->fail('not-a-member');
         }
 
-        $action->run($user, $team);
+        if (!$team->isLeader($user->id) && !$user->hasRole('school_manager')) {
+            return $this->fail('not-authorized');
+        }
+
+        $dateFilter = [];
+        if ($request->dateField && ($request->fromDate || $request->toDate)) {
+            $dateFilter = [
+                'column' => in_array($request->dateField, ['created_at', 'datetime', 'updated_at'])
+                    ? $request->dateField
+                    : 'datetime',
+                'fromDate' => $request->fromDate
+                    ? Carbon::parse($request->fromDate)->toDateString()
+                    : '2017-01-01',
+                'toDate' => $request->toDate
+                    ? Carbon::parse($request->toDate)->toDateString()
+                    : now()->toDateString(),
+            ];
+        }
+
+        $action->run($user, $team, $dateFilter);
 
         return $this->success();
     }
diff --git a/app/Jobs/Emails/DispatchEmail.php b/app/Jobs/Emails/DispatchEmail.php
index 2a38946e9..c4eab4e58 100644
--- a/app/Jobs/Emails/DispatchEmail.php
+++ b/app/Jobs/Emails/DispatchEmail.php
@@ -9,6 +9,7 @@
 use Illuminate\Queue\InteractsWithQueue;
 use Illuminate\Queue\SerializesModels;
 use Illuminate\Support\Facades\Mail;
+use Illuminate\Queue\Middleware\RateLimited;
 
 class DispatchEmail implements ShouldQueue
 {
@@ -25,6 +26,11 @@ public function __construct($user)
         $this->user = $user;
     }
 
+    public function middleware(): array
+    {
+        return [new RateLimited('ses-emails')];
+    }
+
     public function handle(): void
     {
         Mail::to($this->user->email)->send(new EmailUpdate($this->user));
diff --git a/app/Providers/AppServiceProvider.php b/app/Providers/AppServiceProvider.php
index 9d48f4803..7a90f8747 100644
--- a/app/Providers/AppServiceProvider.php
+++ b/app/Providers/AppServiceProvider.php
@@ -9,11 +9,12 @@
 use App\Models\Users\User;
 use App\Observers\PhotoObserver;
 use App\Services\Clustering\ClusteringService;
-use Illuminate\Auth\Notifications\ResetPassword;
 use Illuminate\Database\Eloquent\Relations\Relation;
 use Illuminate\Support\Facades\Gate;
 use Illuminate\Support\ServiceProvider;
 use Laravel\Cashier\Cashier;
+use Illuminate\Cache\RateLimiting\Limit;
+use Illuminate\Support\Facades\RateLimiter;
 
 class AppServiceProvider extends ServiceProvider
 {
@@ -47,5 +48,9 @@ public function boot()
         Gate::define('viewPulse', function (User $user) {
             return $user->hasRole('superadmin');
         });
+
+        RateLimiter::for('ses-emails', function () {
+            return Limit::perSecond(12);
+        });
     }
 }
diff --git a/readme/API.md b/readme/API.md
index 3d60719bb..975bdf27c 100644
--- a/readme/API.md
+++ b/readme/API.md
@@ -1990,13 +1990,32 @@ Returns max 5000 points with `id`, `lat`, `lng`, `tags`, `verified`, `is_public`
 
 ### POST /api/teams/download — Download Team Data
 
-**Auth:** Required (Sanctum)
+**Auth:** Required (Sanctum). Must be team leader or have `school_manager` role.
+
+**Request:**
+```json
+{
+  "team_id": 1,
+  "dateField": "datetime",
+  "fromDate": "2025-01-01",
+  "toDate": "2025-12-31"
+}
+```
+
+| Param | Type | Required | Description |
+|-------|------|----------|-------------|
+| `team_id` | int | Yes | Team ID |
+| `dateField` | string | No | Column to filter: `created_at`, `datetime`, or `updated_at` |
+| `fromDate` | string | No | Start date (YYYY-MM-DD). Default: `2017-01-01` |
+| `toDate` | string | No | End date (YYYY-MM-DD). Default: today |
 
-**Request:** `{ "team_id": 1 }`
 **Response:** `{ "success": true }`
-**Error:** `{ "success": false, "message": "not-a-member" }`
+**Errors:**
+- `{ "success": false, "message": "team-not-found" }` — invalid team_id
+- `{ "success": false, "message": "not-a-member" }` — user not on team
+- `{ "success": false, "message": "not-authorized" }` — member but not leader/school_manager
 
-Queues background export job.
+Queues background CSV export (only `verified >= ADMIN_APPROVED` photos). Emails S3 download link when ready. See `readme/ExportData.md` for full CSV column layout.
 
 ---
 
diff --git a/readme/ExportData.md b/readme/ExportData.md
new file mode 100644
index 000000000..58bc3c971
--- /dev/null
+++ b/readme/ExportData.md
@@ -0,0 +1,252 @@
+# Data Export System
+
+CSV export for users, teams, and locations. Queued via Maatwebsite/Excel to S3, then an email with a download link is sent to the user.
+
+## Architecture
+
+```
+User/Team/Location triggers export
+    ↓
+Controller validates auth + builds date filter
+    ↓
+CreateCSVExport queued to S3 (Maatwebsite/Excel FromQuery)
+    ↓
+EmailUserExportCompleted job chains → sends ExportWithLink mailable
+    ↓
+User receives email with S3 download URL
+```
+
+## Key Files
+
+| File | Purpose |
+|------|---------|
+| `app/Exports/CreateCSVExport.php` | Core CSV export class (headings, mapping, query) |
+| `app/Actions/Teams/DownloadTeamDataAction.php` | Orchestrates team export dispatch |
+| `app/Http/Controllers/User/ProfileController.php` | User export endpoint (`download()`) |
+| `app/Http/Controllers/API/TeamsController.php` | Team export endpoint (`download()`) |
+| `app/Http/Controllers/DownloadControllerNew.php` | Location-based export endpoint |
+| `app/Jobs/EmailUserExportCompleted.php` | Queued job — sends download email |
+| `app/Mail/ExportWithLink.php` | Mailable with S3 URL |
+| `config/excel.php` | Maatwebsite/Excel config (chunk size: 1000) |
+
+### Frontend
+
+| File | Purpose |
+|------|---------|
+| `resources/js/views/User/Uploads/components/UploadsHeader.vue` | Export CSV button on Uploads page |
+| `resources/js/views/Teams/TeamsHub.vue` | Export CSV button on Teams page |
+| `resources/js/stores/teams/index.js` | `downloadTeamData()` store action |
+
+### Tests
+
+| File | Coverage |
+|------|----------|
+| `tests/Unit/Exports/CreateCSVExportTest.php` | Headings, mapping, materials aggregation, brands format, types from DB, null values |
+| `tests/Feature/Teams/DownloadTeamDataTest.php` | Member auth, non-member rejection, date filter |
+
+## API Endpoints
+
+### GET /api/user/profile/download — User Data Export
+
+**Auth:** Required (Sanctum)
+
+**Query params (all optional):**
+
+| Param | Type | Description |
+|-------|------|-------------|
+| `dateField` | string | Column to filter: `created_at`, `datetime`, or `updated_at` |
+| `fromDate` | string | Start date (YYYY-MM-DD). Default: `2017-01-01` |
+| `toDate` | string | End date (YYYY-MM-DD). Default: today |
+
+**Response:** `{ "success": true }`
+
+Exports **all** user photos (any verification status). Email sent when ready.
+
+### POST /api/teams/download — Team Data Export
+
+**Auth:** Required (Sanctum). Must be a team member.
+
+**Request body:**
+
+| Param | Type | Required | Description |
+|-------|------|----------|-------------|
+| `team_id` | int | Yes | Team ID |
+| `dateField` | string | No | Column to filter: `created_at`, `datetime`, or `updated_at` |
+| `fromDate` | string | No | Start date (YYYY-MM-DD). Default: `2017-01-01` |
+| `toDate` | string | No | End date (YYYY-MM-DD). Default: today |
+
+**Response:** `{ "success": true }`
+**Error:** `{ "success": false, "message": "not-a-member" }`
+
+Only team leaders and `school_manager` role can export. Returns `{ "success": false, "message": "not-authorized" }` for other members.
+
+Exports only `verified >= ADMIN_APPROVED` team photos (includes BBOX_APPLIED, BBOX_VERIFIED, AI_READY). Email sent when ready.
+
+### POST /api/download — Location Data Export
+
+**Auth:** Optional (uses `email` param if unauthenticated)
+
+**Request body:**
+
+| Param | Type | Required | Description |
+|-------|------|----------|-------------|
+| `locationType` | string | Yes | `country`, `state`, or `city` |
+| `locationId` | int | Yes | Location ID |
+| `email` | string | No | Required if unauthenticated |
+
+**Response:** `{ "success": true }`
+
+Exports only `verified >= ADMIN_APPROVED` photos for the location.
+
+## CSV Column Layout
+
+The CSV has four sections:
+
+### 1. Fixed columns (10)
+
+| Column | Source |
+|--------|--------|
+| `id` | `photos.id` |
+| `verification` | `photos.verified` (VerificationStatus enum value) |
+| `phone` | `photos.model` (device model) |
+| `date_taken` | `photos.datetime` |
+| `date_uploaded` | `photos.created_at` |
+| `lat` | `photos.lat` |
+| `lon` | `photos.lon` |
+| `picked up` | Inverted from `photos.remaining` (`Yes`/`No`) |
+| `address` | `photos.display_name` accessor (derived from `address_array` JSON) |
+| `total_tags` | `summary.totals.litter` (fallback: `photos.total_tags`) |
+
+### 2. Category/object columns (~180 dynamic)
+
+One separator column per category (uppercase key, always null in data rows), then one column per litter object in that category. Value = aggregated quantity from `summary.tags.{catId}.{objId}.quantity`.
+
+```
+ALCOHOL, can, bottle, wrapper, ...
+SMOKING, butts, lighters, ...
+FOOD, sweetwrappers, ...
+...
+```
+
+### 3. Materials, types, and brands columns (~76)
+
+| Section | Columns | Source | Format |
+|---------|---------|--------|--------|
+| Materials | `MATERIALS` separator + 40 material keys | `summary.tags.{catId}.{objId}.materials` (`{materialId: qty}`) | Integer quantity per material, aggregated across all tags |
+| Types | `TYPES` separator + 33 type keys | `photo_tags.litter_object_type_id` (DB relationship) | Integer quantity per type, aggregated across all photo_tags |
+| Brands | Single `brands` column | `summary.tags.{catId}.{objId}.brands` (`{brandId: qty}`) + `summary.keys.brands` for name resolution | Semicolon-delimited string: `brandname:qty;brandname:qty` |
+
+**Why types come from DB, not summary:** The `summary.tags` JSON does not include `type_id`. Types live on `photo_tags.litter_object_type_id` in the database. The `photoTags` relationship is eager-loaded in the export query.
+
+**Why brands are a single column:** There are 2,600+ brands in the database. One column per brand would make the CSV unusable. The delimited format is parseable with Excel `TEXTSPLIT()` or Python `str.split(';')`.
+
+### 4. Custom tags (3 fixed)
+
+| Column | Source |
+|--------|--------|
+| `custom_tag_1` | First custom tag key from `photo_tags.extraTags` where `tag_type = 'custom_tag'` |
+| `custom_tag_2` | Second custom tag key |
+| `custom_tag_3` | Third custom tag key |
+
+Extracted from the eager-loaded `photoTags.extraTags.extraTag` relationship. Limited to 3 columns for backward compatibility.
+
+## Summary JSON Structure
+
+The `map()` method reads from the nested `photos.summary` JSON:
+
+```json
+{
+    "tags": {
+        "2": {
+            "15": {
+                "quantity": 5,
+                "materials": { "3": 5, "7": 5 },
+                "brands": { "12": 3 },
+                "custom_tags": {}
+            }
+        }
+    },
+    "totals": {
+        "litter": 15,
+        "materials": 10,
+        "brands": 3,
+        "custom_tags": 0
+    },
+    "keys": {
+        "categories": { "2": "smoking" },
+        "objects": { "15": "butts" },
+        "materials": { "3": "plastic", "7": "paper" },
+        "brands": { "12": "marlboro" }
+    }
+}
+```
+
+- **Tags**: Nested `{ categoryId: { objectId: { quantity, materials, brands, custom_tags } } }`
+- **Materials**: `{ materialId: quantity }` objects (NOT arrays of IDs)
+- **Brands**: `{ brandId: quantity }` objects with independent quantities
+- **Custom tags**: `{ customTagId: quantity }` objects
+- **Keys**: Human-readable name lookups by ID (used for brand name resolution in CSV)
+
+## Date Filter Plumbing
+
+Both user and team exports support the same date filter contract:
+
+```php
+$dateFilter = [
+    'column' => 'datetime',     // or 'created_at' or 'updated_at'
+    'fromDate' => '2025-01-01', // YYYY-MM-DD
+    'toDate' => '2025-12-31',   // YYYY-MM-DD
+];
+```
+
+- **User exports** (`ProfileController::download()`): Parses from query params. Defaults: `fromDate = 2017-01-01`, `toDate = now()`.
+- **Team exports** (`TeamsController::download()`): Parses from request body. Same defaults. Whitelists `dateField` to `created_at`, `datetime`, `updated_at`.
+- **`CreateCSVExport`**: Applies via `whereBetween($column, [$fromDate, $toDate])` in `query()`.
+
+## S3 Path Patterns
+
+| Scope | Path |
+|-------|------|
+| User (no filter) | `YYYY/MM/DD/UNIX_MyData_OpenLitterMap.csv` |
+| User (date filter) | `YYYY/MM/DD/UNIX_from_DATE_to_DATE_MyData_OpenLitterMap.csv` |
+| Team (no filter) | `YYYY/MM/DD/UNIX/_Team_OpenLitterMap.csv` |
+| Team (date filter) | `YYYY/MM/DD/UNIX_from_DATE_to_DATE/_Team_OpenLitterMap.csv` |
+| Location | `YYYY/MM/DD/UNIX/{LocationName}_OpenLitterMap.csv` |
+
+## Frontend Integration
+
+### Uploads Page (`UploadsHeader.vue`)
+
+- "Export CSV" button next to the "Apply" filter button
+- Sends `GET /api/user/profile/download` with `dateField: 'datetime'` and the current `dateFrom`/`dateTo` filter values
+- Shows inline success message: "Export started — check your email for the download link."
+
+### Teams Page (`TeamsHub.vue`)
+
+- "Export CSV" button next to the period selector in the team header
+- Converts the period selector value (`today`, `week`, `month`, `year`, `all`) to `fromDate`/`toDate` date strings
+- Sends `POST /api/teams/download` with `team_id` and date filter
+- Uses toast notification for success/error feedback
+- Only visible/functional for team leaders and school managers (server returns `not-authorized` for other members)
+
+### Teams Store (`stores/teams/index.js`)
+
+```js
+async downloadTeamData(teamId, dateFilter = {}) {
+    await axios.post('/api/teams/download', { team_id: teamId, ...dateFilter });
+}
+```
+
+## Query Scoping Rules
+
+| Export Type | Verification Filter | Auth | Photos Included |
+|-------------|-------------------|------|-----------------|
+| User | None | Any authenticated user (own data) | All photos (any status) |
+| Team | `verified >= ADMIN_APPROVED` | Team leader or `school_manager` only | Approved photos (ADMIN_APPROVED, BBOX_APPLIED, BBOX_VERIFIED, AI_READY) |
+| Location | `verified >= ADMIN_APPROVED` | Optional (email param for guests) | Approved photos (same as above) |
+
+School team photos with `is_public = false` are excluded because teacher approval is required to reach `ADMIN_APPROVED`, and approval also sets `is_public = true`.
+
+## Timeout
+
+Export job timeout: 240 seconds. The `FromQuery` concern chunks automatically (1000 rows per chunk via `config/excel.php`).
diff --git a/resources/js/stores/teams/index.js b/resources/js/stores/teams/index.js
index ba9cba5dd..6cc51ffd5 100644
--- a/resources/js/stores/teams/index.js
+++ b/resources/js/stores/teams/index.js
@@ -290,11 +290,15 @@ export const useTeamsStore = defineStore('teams', {
             }
         },
 
-        async downloadTeamData(teamId) {
+        async downloadTeamData(teamId, dateFilter = {}) {
             try {
-                await axios.post('/api/teams/download', { team_id: teamId });
+                await axios.post('/api/teams/download', {
+                    team_id: teamId,
+                    ...dateFilter,
+                });
             } catch (e) {
                 console.error('downloadTeamData', e);
+                throw e;
             }
         },
 
diff --git a/resources/js/views/Teams/TeamsHub.vue b/resources/js/views/Teams/TeamsHub.vue
index 8dcd89059..007224b91 100644
--- a/resources/js/views/Teams/TeamsHub.vue
+++ b/resources/js/views/Teams/TeamsHub.vue
@@ -274,17 +274,28 @@
                             </p>
                         </div>
 
-                        <select
-                            v-model="period"
-                            class="bg-white/5 border border-white/20 rounded-lg px-3 py-2 text-sm text-white focus:border-emerald-500/50 focus:outline-none w-auto"
-                            @change="loadDashboard"
-                        >
-                            <option value="all" class="bg-slate-800">{{ $t('All Time') }}</option>
-                            <option value="today" class="bg-slate-800">{{ $t('Today') }}</option>
-                            <option value="week" class="bg-slate-800">{{ $t('This Week') }}</option>
-                            <option value="month" class="bg-slate-800">{{ $t('This Month') }}</option>
-                            <option value="year" class="bg-slate-800">{{ $t('This Year') }}</option>
-                        </select>
+                        <div class="flex items-center gap-2">
+                            <select
+                                v-model="period"
+                                class="bg-white/5 border border-white/20 rounded-lg px-3 py-2 text-sm text-white focus:border-emerald-500/50 focus:outline-none w-auto"
+                                @change="loadDashboard"
+                            >
+                                <option value="all" class="bg-slate-800">{{ $t('All Time') }}</option>
+                                <option value="today" class="bg-slate-800">{{ $t('Today') }}</option>
+                                <option value="week" class="bg-slate-800">{{ $t('This Week') }}</option>
+                                <option value="month" class="bg-slate-800">{{ $t('This Month') }}</option>
+                                <option value="year" class="bg-slate-800">{{ $t('This Year') }}</option>
+                            </select>
+
+                            <button
+                                v-if="isLeader || isSchoolManager"
+                                @click="exportTeamCsv"
+                                :disabled="exporting"
+                                class="bg-white/5 border border-white/20 rounded-lg px-3 py-2 text-sm text-white hover:bg-white/10 disabled:opacity-50 disabled:cursor-not-allowed transition-colors focus:border-emerald-500/50 focus:outline-none"
+                            >
+                                {{ exporting ? $t('Exporting...') : $t('Export CSV') }}
+                            </button>
+                        </div>
                     </div>
 
                     <!-- Stats row -->
@@ -392,6 +403,44 @@ const isSchoolManager = computed(() => {
     return roles.some((r) => r.name === 'school_manager');
 });
 const joinErrors = computed(() => teamsStore.errors);
+const exporting = ref(false);
+
+const getPeriodDateFilter = () => {
+    const now = new Date();
+    const toDate = now.toISOString().split('T')[0];
+    let fromDate = null;
+
+    if (period.value === 'today') {
+        fromDate = toDate;
+    } else if (period.value === 'week') {
+        const d = new Date(now);
+        d.setDate(d.getDate() - 7);
+        fromDate = d.toISOString().split('T')[0];
+    } else if (period.value === 'month') {
+        const d = new Date(now);
+        d.setMonth(d.getMonth() - 1);
+        fromDate = d.toISOString().split('T')[0];
+    } else if (period.value === 'year') {
+        const d = new Date(now);
+        d.setFullYear(d.getFullYear() - 1);
+        fromDate = d.toISOString().split('T')[0];
+    }
+
+    if (!fromDate) return {};
+    return { dateField: 'datetime', fromDate, toDate };
+};
+
+const exportTeamCsv = async () => {
+    exporting.value = true;
+    try {
+        await teamsStore.downloadTeamData(selectedTeamId.value, getPeriodDateFilter());
+        toast.success('Export started — check your email for the download link.');
+    } catch {
+        toast.error('Export failed. Please try again.');
+    } finally {
+        exporting.value = false;
+    }
+};
 
 // Show "try OLM yourself first" banner for school managers who haven't uploaded yet
 const showFacilitatorOnboarding = computed(() => {
diff --git a/resources/js/views/User/Uploads/components/UploadsHeader.vue b/resources/js/views/User/Uploads/components/UploadsHeader.vue
index 4f9e2fc31..83ee624ba 100644
--- a/resources/js/views/User/Uploads/components/UploadsHeader.vue
+++ b/resources/js/views/User/Uploads/components/UploadsHeader.vue
@@ -1,9 +1,33 @@
 <script setup>
 import { usePhotosStore } from '@/stores/photos';
+import axios from 'axios';
 import { computed, ref, onMounted } from 'vue';
 
 const store = usePhotosStore();
 
+const exporting = ref(false);
+const exportMessage = ref('');
+
+const exportCsv = async () => {
+    exporting.value = true;
+    exportMessage.value = '';
+
+    try {
+        const params = {
+            dateField: 'datetime',
+        };
+        if (filters.value.dateFrom) params.fromDate = filters.value.dateFrom;
+        if (filters.value.dateTo) params.toDate = filters.value.dateTo;
+
+        await axios.get('/api/user/profile/download', { params });
+        exportMessage.value = 'Export started — check your email for the download link.';
+    } catch {
+        exportMessage.value = 'Export failed. Please try again.';
+    } finally {
+        exporting.value = false;
+    }
+};
+
 const filters = ref({
     id: '',
     idOperator: '=',
@@ -246,6 +270,20 @@ onMounted(async () => {
             >
                 {{ $t('Apply') }}
             </button>
+
+            <!-- Export CSV Button -->
+            <button
+                @click="exportCsv"
+                :disabled="exporting"
+                class="px-4 py-1.5 bg-green-500 hover:bg-green-600 disabled:opacity-50 disabled:cursor-not-allowed text-white text-xs font-medium rounded transition-colors focus:outline-none focus:ring-2 focus:ring-green-500 focus:ring-offset-1"
+            >
+                {{ exporting ? $t('Exporting...') : $t('Export CSV') }}
+            </button>
+        </div>
+
+        <!-- Export message -->
+        <div v-if="exportMessage" class="px-6 pb-3">
+            <p class="text-xs text-green-600">{{ exportMessage }}</p>
         </div>
     </div>
 </template>
diff --git a/tests/Feature/Email/V5AnnouncementEmailTest.php b/tests/Feature/Email/V5AnnouncementEmailTest.php
index 8be884619..92e60660f 100644
--- a/tests/Feature/Email/V5AnnouncementEmailTest.php
+++ b/tests/Feature/Email/V5AnnouncementEmailTest.php
@@ -95,6 +95,21 @@ public function test_subscribers_overlapping_with_users_are_excluded(): void
             ->assertSuccessful();
     }
 
+    public function test_unsubscribed_user_with_subscriber_row_is_fully_excluded(): void
+    {
+        Bus::fake();
+
+        // User opted out (emailsub=0) but also has a row in subscribers table
+        $user = User::factory()->create(['emailsub' => 0, 'email' => 'optout@test.com']);
+        Subscriber::create(['email' => 'optout@test.com']);
+
+        $this->artisan('olm:send-email-to-subscribed --dry-run')
+            ->expectsOutputToContain('Users (emailsub=1): 0')
+            ->expectsOutputToContain('Subscribers (unique): 0')
+            ->expectsOutputToContain('Total: 0')
+            ->assertSuccessful();
+    }
+
     // ─── Command: respects unsubscribe ───────────────────────────────
 
     public function test_unsubscribed_users_are_excluded(): void
diff --git a/tests/Feature/Teams/DownloadTeamDataTest.php b/tests/Feature/Teams/DownloadTeamDataTest.php
index 156d9bfcb..ebda24c44 100644
--- a/tests/Feature/Teams/DownloadTeamDataTest.php
+++ b/tests/Feature/Teams/DownloadTeamDataTest.php
@@ -12,24 +12,24 @@
 
 class DownloadTeamDataTest extends TestCase
 {
-    public function test_a_member_can_download_a_teams_data()
+    public function test_a_leader_can_download_a_teams_data()
     {
         Mail::fake();
         Storage::fake('s3');
         Carbon::setTestNow(now());
-        /** @var User $member */
-        $member = User::factory()->create();
+        /** @var User $leader */
+        $leader = User::factory()->create();
         /** @var Team $team */
-        $team = Team::factory()->create();
-        $member->teams()->attach($team);
+        $team = Team::factory()->create(['leader' => $leader->id]);
+        $leader->teams()->attach($team);
 
-        $response = $this->actingAs($member)->postJson("api/teams/download?team_id=$team->id");
+        $response = $this->actingAs($leader)->postJson("api/teams/download?team_id=$team->id");
 
         $response->assertOk();
         $response->assertJson(['success' => true]);
-        Mail::assertSent(function (ExportWithLink $mail) use ($member) {
+        Mail::assertSent(function (ExportWithLink $mail) use ($leader) {
             $expectedPath = now()->year . "/" . now()->format('m') . "/" . now()->format('d') . "/" . now()->getTimestamp() . "/_Team_OpenLitterMap.csv";
-            $this->assertTrue($mail->hasTo($member->email));
+            $this->assertTrue($mail->hasTo($leader->email));
             $this->assertEquals($expectedPath, $mail->path);
             return true;
         });
@@ -50,4 +50,50 @@ public function test_only_a_member_can_download_a_teams_data()
         $response->assertJsonFragment(['success' => false, 'message' => 'not-a-member']);
         Mail::assertNothingSent();
     }
+
+    public function test_a_regular_member_cannot_download_a_teams_data()
+    {
+        Mail::fake();
+        Storage::fake('s3');
+        /** @var User $member */
+        $member = User::factory()->create();
+        /** @var User $leader */
+        $leader = User::factory()->create();
+        /** @var Team $team */
+        $team = Team::factory()->create(['leader' => $leader->id]);
+        $member->teams()->attach($team);
+
+        $response = $this->actingAs($member)->postJson("api/teams/download?team_id=$team->id");
+
+        $response->assertOk();
+        $response->assertJsonFragment(['success' => false, 'message' => 'not-authorized']);
+        Mail::assertNothingSent();
+    }
+
+    public function test_a_leader_can_download_with_date_filter()
+    {
+        Mail::fake();
+        Storage::fake('s3');
+        Carbon::setTestNow(now());
+        /** @var User $leader */
+        $leader = User::factory()->create();
+        /** @var Team $team */
+        $team = Team::factory()->create(['leader' => $leader->id]);
+        $leader->teams()->attach($team);
+
+        $response = $this->actingAs($leader)->postJson("api/teams/download?team_id=$team->id", [
+            'dateField' => 'datetime',
+            'fromDate' => '2025-01-01',
+            'toDate' => '2025-12-31',
+        ]);
+
+        $response->assertOk();
+        $response->assertJson(['success' => true]);
+        Mail::assertSent(function (ExportWithLink $mail) use ($leader) {
+            $expectedPath = now()->year . "/" . now()->format('m') . "/" . now()->format('d') . "/" . now()->getTimestamp() . "_from_2025-01-01_to_2025-12-31/_Team_OpenLitterMap.csv";
+            $this->assertTrue($mail->hasTo($leader->email));
+            $this->assertEquals($expectedPath, $mail->path);
+            return true;
+        });
+    }
 }
diff --git a/tests/Unit/Exports/CreateCSVExportTest.php b/tests/Unit/Exports/CreateCSVExportTest.php
index bdf77fcd6..5bc44772d 100644
--- a/tests/Unit/Exports/CreateCSVExportTest.php
+++ b/tests/Unit/Exports/CreateCSVExportTest.php
@@ -3,9 +3,12 @@
 namespace Tests\Unit\Exports;
 
 use App\Exports\CreateCSVExport;
+use App\Models\Litter\Tags\BrandList;
 use App\Models\Litter\Tags\Category;
 use App\Models\Litter\Tags\CategoryObject;
 use App\Models\Litter\Tags\CustomTagNew;
+use App\Models\Litter\Tags\LitterObjectType;
+use App\Models\Litter\Tags\Materials;
 use App\Models\Litter\Tags\PhotoTag;
 use App\Models\Litter\Tags\PhotoTagExtraTags;
 use App\Models\Photo;
@@ -31,6 +34,21 @@ public function test_it_has_correct_headings_for_all_categories_and_tags()
                 $expected[] = $object->key;
             }
         }
+
+        // Materials columns
+        $expected[] = 'MATERIALS';
+        foreach (Materials::orderBy('id')->get() as $material) {
+            $expected[] = $material->key;
+        }
+
+        // Types columns
+        $expected[] = 'TYPES';
+        foreach (LitterObjectType::orderBy('id')->get() as $type) {
+            $expected[] = $type->key;
+        }
+
+        // Brands + custom tags
+        $expected[] = 'brands';
         $expected = array_merge($expected, ['custom_tag_1', 'custom_tag_2', 'custom_tag_3']);
 
         $this->assertDatabaseCount('photos', 0);
@@ -55,6 +73,13 @@ public function test_it_has_correct_mappings_for_all_categories_and_tags()
         $cloId1 = CategoryObject::where('category_id', $category->id)->where('litter_object_id', $obj1->id)->value('id');
         $cloId2 = CategoryObject::where('category_id', $category->id)->where('litter_object_id', $obj2->id)->value('id');
 
+        // Get a material for testing (seeded by GenerateTagsSeeder)
+        $material = Materials::orderBy('id')->first();
+
+        // Create a brand (not seeded)
+        $brand = BrandList::firstOrCreate(['key' => 'test_brand_export']);
+
+        // Nested summary format: { catId: { objId: { quantity, materials: {id: qty}, brands: {id: qty} } } }
         $photo = Photo::factory()->create([
             'verified' => 2,
             'model' => 'Redmi Note 8 pro',
@@ -66,10 +91,25 @@ public function test_it_has_correct_mappings_for_all_categories_and_tags()
             'total_tags' => 15,
             'summary' => [
                 'tags' => [
-                    ['clo_id' => $cloId1, 'category_id' => $category->id, 'object_id' => $obj1->id, 'quantity' => 5, 'materials' => [], 'brands' => (object) [], 'custom_tags' => []],
-                    ['clo_id' => $cloId2, 'category_id' => $category->id, 'object_id' => $obj2->id, 'quantity' => 10, 'materials' => [], 'brands' => (object) [], 'custom_tags' => []],
+                    (string) $category->id => [
+                        (string) $obj1->id => [
+                            'quantity' => 5,
+                            'materials' => [(string) $material->id => 5],
+                            'brands' => [(string) $brand->id => 2],
+                            'custom_tags' => (object) [],
+                        ],
+                        (string) $obj2->id => [
+                            'quantity' => 10,
+                            'materials' => (object) [],
+                            'brands' => (object) [],
+                            'custom_tags' => (object) [],
+                        ],
+                    ],
+                ],
+                'totals' => ['litter' => 15, 'materials' => 5, 'brands' => 2, 'custom_tags' => 0],
+                'keys' => [
+                    'brands' => [(string) $brand->id => 'test_brand_export'],
                 ],
-                'totals' => ['litter' => 15, 'materials' => 0, 'brands' => 0, 'custom_tags' => 0],
             ],
         ]);
 
@@ -118,6 +158,21 @@ public function test_it_has_correct_mappings_for_all_categories_and_tags()
             }
         }
 
+        // Materials columns — material has qty 5 (from the nested materials object)
+        $expected[] = null; // MATERIALS separator
+        foreach (Materials::orderBy('id')->get() as $mat) {
+            $expected[] = $mat->id === $material->id ? 5 : null;
+        }
+
+        // Types columns — no photo_tags with litter_object_type_id in this test
+        $expected[] = null; // TYPES separator
+        foreach (LitterObjectType::orderBy('id')->get() as $type) {
+            $expected[] = null;
+        }
+
+        // Brands column
+        $expected[] = 'test_brand_export:2';
+
         $expected = array_merge($expected, ['my_custom_1', 'my_custom_2', 'my_custom_3']);
 
         $this->assertEquals($expected, $export->map($photo->fresh()));
@@ -135,7 +190,7 @@ public function test_it_maps_to_null_values_for_all_missing_categories()
             'remaining' => true,
             'address_array' => ['road' => '12345 Street', 'country' => 'Ireland'],
             'summary' => [
-                'tags' => [],
+                'tags' => (object) [],
                 'totals' => ['litter' => 0, 'materials' => 0, 'brands' => 0, 'custom_tags' => 0],
             ],
         ]);
@@ -161,10 +216,207 @@ public function test_it_maps_to_null_values_for_all_missing_categories()
             }
         }
 
+        // Materials — all null
+        $expected[] = null;
+        foreach (Materials::orderBy('id')->get() as $mat) {
+            $expected[] = null;
+        }
+
+        // Types — all null
+        $expected[] = null;
+        foreach (LitterObjectType::orderBy('id')->get() as $type) {
+            $expected[] = null;
+        }
+
+        // Brands — null
+        $expected[] = null;
+
         $expected = array_merge($expected, [null, null, null]);
 
         $export = new CreateCSVExport('null', 1, null, null);
 
         $this->assertEquals($expected, $export->map($photo->fresh()));
     }
+
+    public function test_materials_are_aggregated_across_multiple_tags()
+    {
+        $category = Category::with(['litterObjects' => fn ($q) => $q->orderBy('litter_objects.id')])
+            ->orderBy('id')
+            ->get()
+            ->first(fn ($c) => $c->litterObjects->count() >= 2);
+        $objects = $category->litterObjects;
+        $obj1 = $objects[0];
+        $obj2 = $objects[1];
+
+        $material = Materials::orderBy('id')->first();
+
+        // Nested summary: both objects have the same material with different quantities
+        $photo = Photo::factory()->create([
+            'verified' => 2,
+            'datetime' => now()->toDateTimeString(),
+            'lat' => 42.0,
+            'lon' => 42.0,
+            'address_array' => ['country' => 'Ireland'],
+            'summary' => [
+                'tags' => [
+                    (string) $category->id => [
+                        (string) $obj1->id => [
+                            'quantity' => 3,
+                            'materials' => [(string) $material->id => 3],
+                            'brands' => (object) [],
+                            'custom_tags' => (object) [],
+                        ],
+                        (string) $obj2->id => [
+                            'quantity' => 7,
+                            'materials' => [(string) $material->id => 7],
+                            'brands' => (object) [],
+                            'custom_tags' => (object) [],
+                        ],
+                    ],
+                ],
+                'totals' => ['litter' => 10, 'materials' => 10, 'brands' => 0, 'custom_tags' => 0],
+            ],
+        ]);
+
+        $export = new CreateCSVExport('null', 1, null, null);
+        $mapped = $export->map($photo->fresh());
+        $headings = $export->headings();
+
+        // Find the material column — search after the MATERIALS separator
+        $materialsHeaderIndex = array_search('MATERIALS', $headings);
+        $materialIndex = null;
+        for ($i = $materialsHeaderIndex + 1; $i < count($headings); $i++) {
+            if ($headings[$i] === $material->key) {
+                $materialIndex = $i;
+                break;
+            }
+        }
+
+        $this->assertNotNull($materialIndex, "Material column '{$material->key}' not found in headings");
+        // Material should be 3 + 7 = 10 (sum of both tag quantities)
+        $this->assertEquals(10, $mapped[$materialIndex]);
+    }
+
+    public function test_brands_formatted_as_delimited_string()
+    {
+        $category = Category::with(['litterObjects' => fn ($q) => $q->orderBy('litter_objects.id')])
+            ->orderBy('id')
+            ->get()
+            ->first(fn ($c) => $c->litterObjects->count() >= 1);
+        $obj = $category->litterObjects->first();
+
+        $brand1 = BrandList::firstOrCreate(['key' => 'test_brand_1']);
+        $brand2 = BrandList::firstOrCreate(['key' => 'test_brand_2']);
+
+        // Nested summary with brands as {id: qty} objects
+        $photo = Photo::factory()->create([
+            'verified' => 2,
+            'datetime' => now()->toDateTimeString(),
+            'lat' => 42.0,
+            'lon' => 42.0,
+            'address_array' => ['country' => 'Ireland'],
+            'summary' => [
+                'tags' => [
+                    (string) $category->id => [
+                        (string) $obj->id => [
+                            'quantity' => 5,
+                            'materials' => (object) [],
+                            'brands' => [(string) $brand1->id => 1, (string) $brand2->id => 3],
+                            'custom_tags' => (object) [],
+                        ],
+                    ],
+                ],
+                'totals' => ['litter' => 5, 'materials' => 0, 'brands' => 4, 'custom_tags' => 0],
+                'keys' => [
+                    'brands' => [(string) $brand1->id => 'test_brand_1', (string) $brand2->id => 'test_brand_2'],
+                ],
+            ],
+        ]);
+
+        $export = new CreateCSVExport('null', 1, null, null);
+        $mapped = $export->map($photo->fresh());
+        $headings = $export->headings();
+
+        $brandsIndex = array_search('brands', $headings);
+        $brandsValue = $mapped[$brandsIndex];
+
+        $this->assertNotNull($brandsValue);
+        $this->assertStringContainsString('test_brand_1:1', $brandsValue);
+        $this->assertStringContainsString('test_brand_2:3', $brandsValue);
+        $this->assertStringContainsString(';', $brandsValue);
+    }
+
+    public function test_types_are_mapped_from_photo_tags()
+    {
+        $category = Category::with(['litterObjects' => fn ($q) => $q->orderBy('litter_objects.id')])
+            ->orderBy('id')
+            ->get()
+            ->first(fn ($c) => $c->litterObjects->count() >= 1);
+        $obj = $category->litterObjects->first();
+        $cloId = CategoryObject::where('category_id', $category->id)->where('litter_object_id', $obj->id)->value('id');
+
+        $type = LitterObjectType::orderBy('id')->first();
+
+        // Summary doesn't contain type_id — types come from photo_tags DB rows
+        $photo = Photo::factory()->create([
+            'verified' => 2,
+            'datetime' => now()->toDateTimeString(),
+            'lat' => 42.0,
+            'lon' => 42.0,
+            'address_array' => ['country' => 'Ireland'],
+            'summary' => [
+                'tags' => [
+                    (string) $category->id => [
+                        (string) $obj->id => [
+                            'quantity' => 8,
+                            'materials' => (object) [],
+                            'brands' => (object) [],
+                            'custom_tags' => (object) [],
+                        ],
+                    ],
+                ],
+                'totals' => ['litter' => 8, 'materials' => 0, 'brands' => 0, 'custom_tags' => 0],
+            ],
+        ]);
+
+        // Create a photo_tag row with litter_object_type_id — this is the DB source for types
+        PhotoTag::create([
+            'photo_id' => $photo->id,
+            'category_id' => $category->id,
+            'litter_object_id' => $obj->id,
+            'category_litter_object_id' => $cloId,
+            'litter_object_type_id' => $type->id,
+            'quantity' => 8,
+        ]);
+
+        $export = new CreateCSVExport('null', 1, null, null);
+        $mapped = $export->map($photo->fresh());
+        $headings = $export->headings();
+
+        // Find the type column — search after TYPES separator
+        $typesHeaderIndex = array_search('TYPES', $headings);
+        $typeIndex = null;
+        for ($i = $typesHeaderIndex + 1; $i < count($headings); $i++) {
+            if ($headings[$i] === $type->key) {
+                $typeIndex = $i;
+                break;
+            }
+        }
+
+        $this->assertNotNull($typeIndex, "Type column '{$type->key}' not found in headings");
+        $this->assertEquals(8, $mapped[$typeIndex]);
+
+        // Other types should be null
+        $otherType = LitterObjectType::where('id', '!=', $type->id)->orderBy('id')->first();
+        if ($otherType) {
+            $otherIndex = null;
+            for ($i = $typesHeaderIndex + 1; $i < count($headings); $i++) {
+                if ($headings[$i] === $otherType->key) {
+                    $otherIndex = $i;
+                    break;
+                }
+            }
+            $this->assertNull($mapped[$otherIndex]);
+        }
+    }
 }

From 2e6f5d89f7705845e4f8065e9bcb0aa4d8c1f347 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Se=C3=A1n=20L=2E?= <lynch.sean@pm.me>
Date: Sun, 5 Apr 2026 18:36:20 +0100
Subject: [PATCH 2/3] filter used columns only, bug fixes

---
 app/Exports/CreateCSVExport.php               | 214 +++++++---
 app/Http/Controllers/API/TeamsController.php  |  26 +-
 .../User/Photos/UsersUploadsController.php    | 177 ++++----
 package.json                                  |   2 +-
 readme/ExportData.md                          |  56 +--
 readme/changelog/2026-04-05.md                |   3 +
 resources/js/stores/photos/index.js           |  15 +-
 resources/js/stores/photos/requests.js        |  21 +-
 .../User/Uploads/components/UploadsHeader.vue |  17 +-
 tests/Feature/Teams/DownloadTeamDataTest.php  |  25 ++
 tests/Unit/Exports/CreateCSVExportTest.php    | 387 ++++++++----------
 11 files changed, 531 insertions(+), 412 deletions(-)

diff --git a/app/Exports/CreateCSVExport.php b/app/Exports/CreateCSVExport.php
index 1e3b370ae..ac85b18d8 100644
--- a/app/Exports/CreateCSVExport.php
+++ b/app/Exports/CreateCSVExport.php
@@ -6,6 +6,8 @@
 use App\Models\Litter\Tags\Category;
 use App\Models\Litter\Tags\LitterObjectType;
 use App\Models\Litter\Tags\Materials;
+use App\Models\Litter\Tags\PhotoTag;
+use App\Models\Litter\Tags\PhotoTagExtraTags;
 use App\Models\Photo;
 
 use Illuminate\Bus\Queueable;
@@ -38,6 +40,9 @@ class CreateCSVExport implements FromQuery, WithMapping, WithHeadings
     /** @var array<int, array{id: int, key: string}> */
     private array $types = [];
 
+    private bool $hasBrands = false;
+    private bool $hasCustomTags = false;
+
     public $timeout = 240;
 
     public function __construct($location_type, $location_id, $team_id = null, $user_id = null, array $dateFilter = [])
@@ -48,26 +53,69 @@ public function __construct($location_type, $location_id, $team_id = null, $user
         $this->user_id = $user_id;
         $this->dateFilter = $dateFilter;
 
+        // Pre-scan: find which columns actually have data for this export scope.
+        // Use subqueries (not pluck) so MySQL optimizes internally for large exports.
+        $photoIdQuery = $this->scopeQuery(Photo::query())->select('id');
+        $tagIdQuery = PhotoTag::whereIn('photo_id', $photoIdQuery)->select('id');
+
+        $activeObjectIds = PhotoTag::whereIn('photo_id', $photoIdQuery)
+            ->whereNotNull('category_id')
+            ->whereNotNull('litter_object_id')
+            ->select('category_id', 'litter_object_id')
+            ->distinct()
+            ->get();
+
+        $activeCatIds = $activeObjectIds->pluck('category_id')->unique()->all();
+        $activeObjMap = $activeObjectIds->groupBy('category_id')
+            ->map(fn ($rows) => $rows->pluck('litter_object_id')->all())
+            ->all();
+
+        // Single query for all extra tag types
+        $extraTagTypes = PhotoTagExtraTags::whereIn('photo_tag_id', $tagIdQuery)
+            ->select('tag_type', 'tag_type_id')
+            ->distinct()
+            ->get();
+
+        $activeMaterialIds = $extraTagTypes->where('tag_type', 'material')->pluck('tag_type_id')->all();
+        $this->hasBrands = $extraTagTypes->where('tag_type', 'brand')->isNotEmpty();
+        $this->hasCustomTags = $extraTagTypes->where('tag_type', 'custom_tag')->isNotEmpty();
+
+        $activeTypeIds = PhotoTag::whereIn('photo_id', $photoIdQuery)
+            ->whereNotNull('litter_object_type_id')
+            ->distinct()
+            ->pluck('litter_object_type_id')
+            ->all();
+
+        // Load and filter category/object columns to only those with data
         $this->categoryObjects = Category::with(['litterObjects' => fn ($q) => $q->orderBy('litter_objects.id')])
+            ->whereIn('id', $activeCatIds)
             ->orderBy('id')
             ->get()
             ->map(fn ($cat) => [
                 'id' => $cat->id,
                 'key' => $cat->key,
-                'objects' => $cat->litterObjects->map(fn ($obj) => [
-                    'id' => $obj->id,
-                    'key' => $obj->key,
-                ])->values()->toArray(),
+                'objects' => $cat->litterObjects
+                    ->filter(fn ($obj) => in_array($obj->id, $activeObjMap[$cat->id] ?? []))
+                    ->map(fn ($obj) => ['id' => $obj->id, 'key' => $obj->key])
+                    ->values()
+                    ->toArray(),
             ])
+            ->filter(fn ($cat) => !empty($cat['objects']))
+            ->values()
             ->toArray();
 
-        $this->materials = Materials::orderBy('id')->get()
-            ->map(fn ($m) => ['id' => $m->id, 'key' => $m->key])
-            ->toArray();
-
-        $this->types = LitterObjectType::orderBy('id')->get()
-            ->map(fn ($t) => ['id' => $t->id, 'key' => $t->key])
-            ->toArray();
+        // Filter materials and types to only those with data
+        $this->materials = !empty($activeMaterialIds)
+            ? Materials::whereIn('id', $activeMaterialIds)->orderBy('id')->get()
+                ->map(fn ($m) => ['id' => $m->id, 'key' => $m->key])
+                ->toArray()
+            : [];
+
+        $this->types = !empty($activeTypeIds)
+            ? LitterObjectType::whereIn('id', $activeTypeIds)->orderBy('id')->get()
+                ->map(fn ($t) => ['id' => $t->id, 'key' => $t->key])
+                ->toArray()
+            : [];
     }
 
     /**
@@ -98,22 +146,29 @@ public function headings(): array
             }
         }
 
-        // Materials columns
-        $result[] = 'MATERIALS';
-        foreach ($this->materials as $material) {
-            $result[] = $material['key'];
+        if (!empty($this->materials)) {
+            $result[] = 'MATERIALS';
+            foreach ($this->materials as $material) {
+                $result[] = $material['key'];
+            }
+        }
+
+        if (!empty($this->types)) {
+            $result[] = 'TYPES';
+            foreach ($this->types as $type) {
+                $result[] = $type['key'];
+            }
         }
 
-        // Types columns
-        $result[] = 'TYPES';
-        foreach ($this->types as $type) {
-            $result[] = $type['key'];
+        if ($this->hasBrands) {
+            $result[] = 'brands';
         }
 
-        // Brands (single delimited column)
-        $result[] = 'brands';
+        if ($this->hasCustomTags) {
+            $result = array_merge($result, ['custom_tag_1', 'custom_tag_2', 'custom_tag_3']);
+        }
 
-        return array_merge($result, ['custom_tag_1', 'custom_tag_2', 'custom_tag_3']);
+        return $result;
     }
 
     /**
@@ -125,13 +180,13 @@ public function map($row): array
     {
         $result = [
             $row->id,
-            $row->verified,
+            $row->verified->value,
             $row->model,
             $row->datetime,
             $row->created_at,
             $row->lat,
             $row->lon,
-            $row->remaining ? 'No' : 'Yes',
+            $row->picked_up ? 'Yes' : 'No',
             $row->display_name,
             $row->summary['totals']['litter'] ?? $row->total_tags,
         ];
@@ -139,25 +194,35 @@ public function map($row): array
         $tags = $row->summary['tags'] ?? [];
         $brandKeys = $row->summary['keys']['brands'] ?? [];
 
-        // Single pass: iterate nested summary structure
-        // Structure: { catId: { objId: { quantity, materials: {id: qty}, brands: {id: qty}, custom_tags } } }
+        // Single pass: iterate flat tags array
+        // Structure: [ { clo_id, category_id, object_id, type_id, quantity, materials: [id, ...], brands: {id: qty}, custom_tags: [id, ...] } ]
         $tagLookup = [];
         $materialLookup = [];
+        $typeLookup = [];
         $brandParts = [];
 
-        foreach ($tags as $catId => $objects) {
-            foreach ($objects as $objId => $tagData) {
-                $qty = $tagData['quantity'] ?? 0;
-                $tagLookup[$catId][$objId] = ($tagLookup[$catId][$objId] ?? 0) + $qty;
+        foreach ($tags as $tag) {
+            $catId = $tag['category_id'] ?? 0;
+            $objId = $tag['object_id'] ?? 0;
+            $qty = $tag['quantity'] ?? 0;
+
+            $tagLookup[$catId][$objId] = ($tagLookup[$catId][$objId] ?? 0) + $qty;
 
-                foreach ($tagData['materials'] ?? [] as $materialId => $materialQty) {
-                    $materialLookup[$materialId] = ($materialLookup[$materialId] ?? 0) + $materialQty;
-                }
+            // Materials: array of IDs — each gets the parent tag's quantity
+            foreach ($tag['materials'] ?? [] as $materialId) {
+                $materialLookup[$materialId] = ($materialLookup[$materialId] ?? 0) + $qty;
+            }
+
+            // Types: type_id is in the summary
+            $typeId = $tag['type_id'] ?? null;
+            if ($typeId) {
+                $typeLookup[$typeId] = ($typeLookup[$typeId] ?? 0) + $qty;
+            }
 
-                foreach ($tagData['brands'] ?? [] as $brandId => $brandQty) {
-                    $brandName = $brandKeys[$brandId] ?? "brand_{$brandId}";
-                    $brandParts[$brandName] = ($brandParts[$brandName] ?? 0) + $brandQty;
-                }
+            // Brands: {id: qty} objects with independent quantities
+            foreach ($tag['brands'] ?? [] as $brandId => $brandQty) {
+                $brandName = $brandKeys[$brandId] ?? "brand_{$brandId}";
+                $brandParts[$brandName] = ($brandParts[$brandName] ?? 0) + $brandQty;
             }
         }
 
@@ -170,40 +235,42 @@ public function map($row): array
             }
         }
 
-        // Materials columns
-        $result[] = null; // MATERIALS separator
-        foreach ($this->materials as $material) {
-            $result[] = $materialLookup[$material['id']] ?? null;
+        // Materials columns (only if any exist in export scope)
+        if (!empty($this->materials)) {
+            $result[] = null; // MATERIALS separator
+            foreach ($this->materials as $material) {
+                $result[] = $materialLookup[$material['id']] ?? null;
+            }
         }
 
-        // Types: read from DB relationship (NOT summary — type_id doesn't exist in summary)
-        $typeLookup = [];
-        foreach ($row->photoTags as $pt) {
-            if ($pt->litter_object_type_id) {
-                $typeLookup[$pt->litter_object_type_id] =
-                    ($typeLookup[$pt->litter_object_type_id] ?? 0) + $pt->quantity;
+        // Types columns (only if any exist in export scope)
+        if (!empty($this->types)) {
+            $result[] = null; // TYPES separator
+            foreach ($this->types as $type) {
+                $result[] = $typeLookup[$type['id']] ?? null;
             }
         }
 
-        $result[] = null; // TYPES separator
-        foreach ($this->types as $type) {
-            $result[] = $typeLookup[$type['id']] ?? null;
+        // Brands: single delimited column (only if any exist in export scope)
+        if ($this->hasBrands) {
+            $result[] = !empty($brandParts)
+                ? implode(';', array_map(fn ($name, $qty) => "{$name}:{$qty}", array_keys($brandParts), array_values($brandParts)))
+                : null;
         }
 
-        // Brands: single delimited column
-        $result[] = !empty($brandParts)
-            ? implode(';', array_map(fn ($name, $qty) => "{$name}:{$qty}", array_keys($brandParts), array_values($brandParts)))
-            : null;
+        // Custom tags (only if any exist in export scope)
+        if ($this->hasCustomTags) {
+            $customTagNames = $row->photoTags
+                ->flatMap(fn ($pt) => $pt->extraTags->where('tag_type', 'custom_tag'))
+                ->take(3)
+                ->map(fn ($extra) => $extra->extraTag?->key)
+                ->values()
+                ->toArray();
 
-        // Custom tags from extra_tags (eager-loaded in query())
-        $customTagNames = $row->photoTags
-            ->flatMap(fn ($pt) => $pt->extraTags->where('tag_type', 'custom_tag'))
-            ->take(3)
-            ->map(fn ($extra) => $extra->extraTag?->key)
-            ->values()
-            ->toArray();
+            $result = array_merge($result, array_pad($customTagNames, 3, null));
+        }
 
-        return array_merge($result, array_pad($customTagNames, 3, null));
+        return $result;
     }
 
     /**
@@ -211,13 +278,26 @@ public function map($row): array
      */
     public function query()
     {
-        $query = Photo::with(['photoTags.extraTags.extraTag']);
+        return $this->scopeQuery(
+            Photo::with(['photoTags.extraTags.extraTag'])
+        );
+    }
 
+    /**
+     * Apply the export scope (user/team/location + date filter + verification) to a query.
+     */
+    private function scopeQuery($query)
+    {
         if (!empty($this->dateFilter)) {
-            $query->whereBetween(
-                $this->dateFilter['column'],
-                [$this->dateFilter['fromDate'], $this->dateFilter['toDate']]
-            );
+            $allowedColumns = ['created_at', 'datetime', 'updated_at'];
+            $column = in_array($this->dateFilter['column'], $allowedColumns, true)
+                ? $this->dateFilter['column']
+                : 'datetime';
+
+            $query->whereBetween($column, [
+                $this->dateFilter['fromDate'],
+                $this->dateFilter['toDate'],
+            ]);
         }
 
         if ($this->user_id) {
diff --git a/app/Http/Controllers/API/TeamsController.php b/app/Http/Controllers/API/TeamsController.php
index da4b67632..6d63792c6 100644
--- a/app/Http/Controllers/API/TeamsController.php
+++ b/app/Http/Controllers/API/TeamsController.php
@@ -239,17 +239,21 @@ public function download (Request $request, DownloadTeamDataAction $action): arr
 
         $dateFilter = [];
         if ($request->dateField && ($request->fromDate || $request->toDate)) {
-            $dateFilter = [
-                'column' => in_array($request->dateField, ['created_at', 'datetime', 'updated_at'])
-                    ? $request->dateField
-                    : 'datetime',
-                'fromDate' => $request->fromDate
-                    ? Carbon::parse($request->fromDate)->toDateString()
-                    : '2017-01-01',
-                'toDate' => $request->toDate
-                    ? Carbon::parse($request->toDate)->toDateString()
-                    : now()->toDateString(),
-            ];
+            try {
+                $dateFilter = [
+                    'column' => in_array($request->dateField, ['created_at', 'datetime', 'updated_at'], true)
+                        ? $request->dateField
+                        : 'datetime',
+                    'fromDate' => $request->fromDate
+                        ? Carbon::parse($request->fromDate)->toDateString()
+                        : '2017-01-01',
+                    'toDate' => $request->toDate
+                        ? Carbon::parse($request->toDate)->toDateString()
+                        : now()->toDateString(),
+                ];
+            } catch (\Exception) {
+                // Invalid date format — ignore filter and export all data
+            }
         }
 
         $action->run($user, $team, $dateFilter);
diff --git a/app/Http/Controllers/User/Photos/UsersUploadsController.php b/app/Http/Controllers/User/Photos/UsersUploadsController.php
index 9540e0046..6ce2c6d36 100644
--- a/app/Http/Controllers/User/Photos/UsersUploadsController.php
+++ b/app/Http/Controllers/User/Photos/UsersUploadsController.php
@@ -24,79 +24,7 @@ public function index(Request $request): JsonResponse
         $query = Photo::where('user_id', $user->id)
             ->where('filename', '!=', '/assets/verified.jpg');
 
-        // Tagged/Untagged filter — uses summary column (set by GeneratePhotoSummaryService on tagging)
-        if ($request->has('tagged')) {
-            $request->boolean('tagged')
-                ? $query->whereNotNull('summary')
-                : $query->whereNull('summary');
-        }
-
-        // ID filter
-        if ($request->filled('id')) {
-            $id = $request->integer('id');
-            $operator = $request->input('id_operator', '=');
-            if (! in_array($operator, ['=', '>', '<'], true)) {
-                $operator = '=';
-            }
-            $query->where('id', $operator, $id);
-        }
-
-        // Tag filter (search by litter object key)
-        if ($request->filled('tag')) {
-            $tag = $request->input('tag');
-            $query->whereHas('photoTags.object', function($q) use ($tag) {
-                $q->where('key', 'like', "%{$tag}%");
-            });
-        }
-
-        // Custom tag filter (search through extra tags)
-        if ($request->filled('custom_tag')) {
-            $customTag = $request->input('custom_tag');
-            $query->whereHas('photoTags.extraTags', function($q) use ($customTag) {
-                $q->where('tag_type', 'custom_tag')
-                    ->whereHas('extraTag', function($q2) use ($customTag) {
-                        $q2->where('key', 'like', "%{$customTag}%");
-                    });
-            });
-        }
-
-        // Picked up filter (per-tag level: true, false, or null=no info)
-        if ($request->has('picked_up')) {
-            $pickedUp = $request->input('picked_up');
-            if ($pickedUp === 'true') {
-                $query->whereHas('photoTags', fn($q) => $q->where('picked_up', true));
-            } elseif ($pickedUp === 'false') {
-                $query->whereHas('photoTags', fn($q) => $q->where('picked_up', false));
-            }
-        }
-
-        // Country filter
-        if ($request->filled('country')) {
-            $query->whereHas('countryRelation', fn($q) => $q->where('country', $request->input('country')));
-        }
-
-        // State filter
-        if ($request->filled('state')) {
-            $query->whereHas('stateRelation', fn($q) => $q->where('state', $request->input('state')));
-        }
-
-        // City filter
-        if ($request->filled('city')) {
-            $query->whereHas('cityRelation', fn($q) => $q->where('city', $request->input('city')));
-        }
-
-        // Verified status filter
-        if ($request->has('verified') && $request->input('verified') !== null) {
-            $query->where('verified', (int) $request->input('verified'));
-        }
-
-        // Date range filter
-        if ($request->filled('date_from')) {
-            $query->where('datetime', '>=', $request->input('date_from'));
-        }
-        if ($request->filled('date_to')) {
-            $query->where('datetime', '<=', $request->input('date_to'));
-        }
+        $this->applyFilters($query, $request);
 
         $photos = $query
             ->with([
@@ -204,7 +132,13 @@ public function stats(Request $request): JsonResponse
         $user = $request->user();
         $userId = $user->id;
 
-        // Use photo count in cache key for auto-invalidation on upload
+        $hasFilters = $request->hasAny(['tagged', 'id', 'tag', 'custom_tag', 'picked_up', 'country', 'state', 'city', 'verified', 'date_from', 'date_to']);
+
+        if ($hasFilters) {
+            return $this->filteredStats($request, $userId);
+        }
+
+        // Unfiltered: use cached global stats
         $baseQuery = Photo::where('user_id', $userId)
             ->where('filename', '!=', '/assets/verified.jpg');
         $totalPhotos = $baseQuery->count();
@@ -241,6 +175,30 @@ public function stats(Request $request): JsonResponse
         return response()->json($data);
     }
 
+    private function filteredStats(Request $request, int $userId): JsonResponse
+    {
+        $query = Photo::where('user_id', $userId)
+            ->where('filename', '!=', '/assets/verified.jpg');
+
+        $this->applyFilters($query, $request);
+
+        $totalPhotos = (clone $query)->count();
+        $leftToTag = (clone $query)->whereNull('summary')->count();
+        $totalTags = (int) (clone $query)->sum('total_tags');
+
+        $taggedPhotos = max(0, $totalPhotos - $leftToTag);
+        $taggedPercentage = $totalPhotos > 0
+            ? (int) round(($taggedPhotos / $totalPhotos) * 100)
+            : 0;
+
+        return response()->json([
+            'totalPhotos' => $totalPhotos,
+            'totalTags' => $totalTags,
+            'leftToTag' => $leftToTag,
+            'taggedPercentage' => $taggedPercentage,
+        ]);
+    }
+
     /**
      * Get hierarchical location data for the user's photos
      */
@@ -412,4 +370,75 @@ private function getNewTags($photo): array
 
         return $newTags;
     }
+
+    /**
+     * Apply shared filters to a user photos query.
+     */
+    private function applyFilters($query, Request $request): void
+    {
+        if ($request->has('tagged')) {
+            $request->boolean('tagged')
+                ? $query->whereNotNull('summary')
+                : $query->whereNull('summary');
+        }
+
+        if ($request->filled('id')) {
+            $id = $request->integer('id');
+            $operator = $request->input('id_operator', '=');
+            if (! in_array($operator, ['=', '>', '<'], true)) {
+                $operator = '=';
+            }
+            $query->where('id', $operator, $id);
+        }
+
+        if ($request->filled('tag')) {
+            $tag = $request->input('tag');
+            $query->whereHas('photoTags.object', function ($q) use ($tag) {
+                $q->where('key', 'like', "%{$tag}%");
+            });
+        }
+
+        if ($request->filled('custom_tag')) {
+            $customTag = $request->input('custom_tag');
+            $query->whereHas('photoTags.extraTags', function ($q) use ($customTag) {
+                $q->where('tag_type', 'custom_tag')
+                    ->whereHas('extraTag', function ($q2) use ($customTag) {
+                        $q2->where('key', 'like', "%{$customTag}%");
+                    });
+            });
+        }
+
+        if ($request->has('picked_up')) {
+            $pickedUp = $request->input('picked_up');
+            if ($pickedUp === 'true') {
+                $query->whereHas('photoTags', fn ($q) => $q->where('picked_up', true));
+            } elseif ($pickedUp === 'false') {
+                $query->whereHas('photoTags', fn ($q) => $q->where('picked_up', false));
+            }
+        }
+
+        if ($request->filled('country')) {
+            $query->whereHas('countryRelation', fn ($q) => $q->where('country', $request->input('country')));
+        }
+
+        if ($request->filled('state')) {
+            $query->whereHas('stateRelation', fn ($q) => $q->where('state', $request->input('state')));
+        }
+
+        if ($request->filled('city')) {
+            $query->whereHas('cityRelation', fn ($q) => $q->where('city', $request->input('city')));
+        }
+
+        if ($request->has('verified') && $request->input('verified') !== null) {
+            $query->where('verified', (int) $request->input('verified'));
+        }
+
+        if ($request->filled('date_from')) {
+            $query->where('datetime', '>=', $request->input('date_from'));
+        }
+
+        if ($request->filled('date_to')) {
+            $query->where('datetime', '<=', $request->input('date_to'));
+        }
+    }
 }
diff --git a/package.json b/package.json
index 2ff21cc96..5d1954b21 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "openlittermap-web",
-  "version": "5.7.5",
+  "version": "5.8.0",
   "type": "module",
   "author": "Seán Lynch",
   "license": "GPL v3",
diff --git a/readme/ExportData.md b/readme/ExportData.md
index 58bc3c971..0a85601fd 100644
--- a/readme/ExportData.md
+++ b/readme/ExportData.md
@@ -132,11 +132,9 @@ FOOD, sweetwrappers, ...
 
 | Section | Columns | Source | Format |
 |---------|---------|--------|--------|
-| Materials | `MATERIALS` separator + 40 material keys | `summary.tags.{catId}.{objId}.materials` (`{materialId: qty}`) | Integer quantity per material, aggregated across all tags |
-| Types | `TYPES` separator + 33 type keys | `photo_tags.litter_object_type_id` (DB relationship) | Integer quantity per type, aggregated across all photo_tags |
-| Brands | Single `brands` column | `summary.tags.{catId}.{objId}.brands` (`{brandId: qty}`) + `summary.keys.brands` for name resolution | Semicolon-delimited string: `brandname:qty;brandname:qty` |
-
-**Why types come from DB, not summary:** The `summary.tags` JSON does not include `type_id`. Types live on `photo_tags.litter_object_type_id` in the database. The `photoTags` relationship is eager-loaded in the export query.
+| Materials | `MATERIALS` separator + 40 material keys | `summary.tags[*].materials` (array of material IDs) | Integer quantity per material (inherits parent tag quantity), aggregated across all tags |
+| Types | `TYPES` separator + 33 type keys | `summary.tags[*].type_id` | Integer quantity per type, aggregated across all tags |
+| Brands | Single `brands` column | `summary.tags[*].brands` (`{brandId: qty}`) + `summary.keys.brands` for name resolution | Semicolon-delimited string: `brandname:qty;brandname:qty` |
 
 **Why brands are a single column:** There are 2,600+ brands in the database. One column per brand would make the CSV unusable. The delimited format is parseable with Excel `TEXTSPLIT()` or Python `str.split(';')`.
 
@@ -152,39 +150,45 @@ Extracted from the eager-loaded `photoTags.extraTags.extraTag` relationship. Lim
 
 ## Summary JSON Structure
 
-The `map()` method reads from the nested `photos.summary` JSON:
+The `map()` method reads from the `photos.summary` JSON (v5.1 flat array format):
 
 ```json
 {
-    "tags": {
-        "2": {
-            "15": {
-                "quantity": 5,
-                "materials": { "3": 5, "7": 5 },
-                "brands": { "12": 3 },
-                "custom_tags": {}
-            }
+    "tags": [
+        {
+            "clo_id": 152,
+            "category_id": 16,
+            "object_id": 5,
+            "type_id": 24,
+            "quantity": 1,
+            "picked_up": true,
+            "materials": [5],
+            "brands": {"77": 1},
+            "custom_tags": [321]
         }
-    },
+    ],
     "totals": {
-        "litter": 15,
-        "materials": 10,
-        "brands": 3,
-        "custom_tags": 0
+        "litter": 1,
+        "materials": 1,
+        "brands": 1,
+        "custom_tags": 1
     },
     "keys": {
-        "categories": { "2": "smoking" },
-        "objects": { "15": "butts" },
-        "materials": { "3": "plastic", "7": "paper" },
-        "brands": { "12": "marlboro" }
+        "categories": { "16": "softdrinks" },
+        "objects": { "5": "can" },
+        "types": { "24": "soda" },
+        "materials": { "5": "aluminium" },
+        "brands": { "77": "pepsi" },
+        "custom_tags": { "321": "bn:Alani Nu" }
     }
 }
 ```
 
-- **Tags**: Nested `{ categoryId: { objectId: { quantity, materials, brands, custom_tags } } }`
-- **Materials**: `{ materialId: quantity }` objects (NOT arrays of IDs)
+- **Tags**: Flat array — each entry has `category_id`, `object_id`, `type_id`, `quantity`
+- **Materials**: Array of material IDs `[5]` — quantity is inherited from parent tag
 - **Brands**: `{ brandId: quantity }` objects with independent quantities
-- **Custom tags**: `{ customTagId: quantity }` objects
+- **Custom tags**: Array of custom tag IDs `[321]` — quantity inherited from parent tag
+- **type_id**: Present in the summary (can be null) — used for type column mapping
 - **Keys**: Human-readable name lookups by ID (used for brand name resolution in CSV)
 
 ## Date Filter Plumbing
diff --git a/readme/changelog/2026-04-05.md b/readme/changelog/2026-04-05.md
index 7d5eab4a9..10c0ce9e7 100644
--- a/readme/changelog/2026-04-05.md
+++ b/readme/changelog/2026-04-05.md
@@ -1,5 +1,8 @@
 # 2026-04-05
 
+## v5.8.0
+- feat(export): CSV data export for users and teams — full v5 tag data (materials, types, brands), date filters, export buttons on Uploads + Teams pages, leader/school_manager auth, `verified >= ADMIN_APPROVED`, filtered stats, new `readme/ExportData.md`
+
 ## v5.7.5
 - fix(tagging): remove `.other` object extra-tag requirement — `other.other` is a valid standalone tag for "I don't know what this is" fallback; fixes mobile quickTag submission error
 
diff --git a/resources/js/stores/photos/index.js b/resources/js/stores/photos/index.js
index dc590a9c3..34e31f34c 100644
--- a/resources/js/stores/photos/index.js
+++ b/resources/js/stores/photos/index.js
@@ -71,7 +71,10 @@ export const usePhotosStore = defineStore('photos', {
             this.loading.stats = true;
             this.currentFilters = { ...this.currentFilters, ...filters };
             try {
-                await Promise.all([this.GET_USERS_PHOTOS(page, this.currentFilters), this.GET_UNTAGGED_STATS()]);
+                await Promise.all([
+                    this.GET_USERS_PHOTOS(page, this.currentFilters),
+                    this.GET_UNTAGGED_STATS(this.currentFilters),
+                ]);
             } finally {
                 this.loading.photos = false;
                 this.loading.stats = false;
@@ -79,16 +82,10 @@ export const usePhotosStore = defineStore('photos', {
         },
 
         /**
-         * Just fetch photos (for pagination)
+         * Fetch photos and refresh stats (for filter/pagination changes)
          */
         async fetchPhotosOnly(page = 1, filters = {}) {
-            this.loading.photos = true;
-            this.currentFilters = { ...this.currentFilters, ...filters };
-            try {
-                await this.GET_USERS_PHOTOS(page, this.currentFilters);
-            } finally {
-                this.loading.photos = false;
-            }
+            return this.fetchUntaggedData(page, filters);
         },
 
         /**
diff --git a/resources/js/stores/photos/requests.js b/resources/js/stores/photos/requests.js
index ce7eabad5..9241c01ff 100644
--- a/resources/js/stores/photos/requests.js
+++ b/resources/js/stores/photos/requests.js
@@ -94,9 +94,26 @@ export const requests = {
     /**
      * Fetch stats separately (can be cached)
      */
-    async GET_UNTAGGED_STATS() {
+    async GET_UNTAGGED_STATS(filters = {}) {
         try {
-            const response = await axios.get('/api/v3/user/photos/stats');
+            const params = {};
+
+            if (filters.tagged !== null && filters.tagged !== undefined) {
+                params.tagged = filters.tagged ? 1 : 0;
+            }
+            if (filters.id) {
+                params.id = filters.id;
+                params.id_operator = filters.idOperator || '=';
+            }
+            if (filters.pickedUp && filters.pickedUp !== 'all') {
+                params.picked_up = filters.pickedUp;
+            }
+            if (filters.tag) params.tag = filters.tag;
+            if (filters.customTag) params.custom_tag = filters.customTag;
+            if (filters.dateFrom) params.date_from = filters.dateFrom;
+            if (filters.dateTo) params.date_to = filters.dateTo;
+
+            const response = await axios.get('/api/v3/user/photos/stats', { params });
 
             this.untaggedStats = {
                 totalPhotos: response.data.totalPhotos || 0,
diff --git a/resources/js/views/User/Uploads/components/UploadsHeader.vue b/resources/js/views/User/Uploads/components/UploadsHeader.vue
index 83ee624ba..a92474a77 100644
--- a/resources/js/views/User/Uploads/components/UploadsHeader.vue
+++ b/resources/js/views/User/Uploads/components/UploadsHeader.vue
@@ -8,6 +8,8 @@ const store = usePhotosStore();
 const exporting = ref(false);
 const exportMessage = ref('');
 
+const exportSuccess = ref(false);
+
 const exportCsv = async () => {
     exporting.value = true;
     exportMessage.value = '';
@@ -20,8 +22,10 @@ const exportCsv = async () => {
         if (filters.value.dateTo) params.toDate = filters.value.dateTo;
 
         await axios.get('/api/user/profile/download', { params });
+        exportSuccess.value = true;
         exportMessage.value = 'Export started — check your email for the download link.';
     } catch {
+        exportSuccess.value = false;
         exportMessage.value = 'Export failed. Please try again.';
     } finally {
         exporting.value = false;
@@ -40,12 +44,15 @@ const filters = ref({
     pickedUp: 'all', // 'all' | 'true' | 'false'
 });
 
-// Get stats from store
+// Get stats from store (updates when filters are applied)
 const totalPhotos = computed(() => store.untaggedStats.totalPhotos);
 const totalTags = computed(() => store.untaggedStats.totalTags);
 const leftToTag = computed(() => store.untaggedStats.leftToTag);
 const taggedPercentage = computed(() => store.untaggedStats.taggedPercentage);
 
+// Show header once data has loaded (even if filtered to 0)
+const hasEverLoaded = computed(() => store.pagination.total !== undefined);
+
 // Convert taggedState to API parameter
 const getTaggedParam = () => {
     if (filters.value.taggedState === 'tagged') return true;
@@ -101,9 +108,9 @@ onMounted(async () => {
 </script>
 
 <template>
-    <div v-if="totalPhotos > 0" class="bg-white rounded-lg shadow-sm mb-6">
+    <div v-if="hasEverLoaded" class="bg-white rounded-lg shadow-sm mb-6">
         <!-- Stats Row -->
-        <div class="grid grid-cols-4 px-6 py-2 border-b border-gray-100">
+        <div v-if="totalPhotos > 0" class="grid grid-cols-4 px-6 py-2 border-b border-gray-100">
             <!-- Total Photos Column -->
             <div class="flex items-center justify-center">
                 <div class="text-center">
@@ -147,7 +154,7 @@ onMounted(async () => {
         <div class="flex items-end gap-3 px-6 py-4 flex-wrap justify-center">
             <!-- Three-state Toggle for Tagged/Untagged/All -->
             <div class="flex flex-col gap-1">
-                <label class="text-xs font-medium text-gray-600 uppercase tracking-wider">{{ $t('Photo Status') }}</label>
+                <label class="text-xs font-medium text-gray-600 uppercase tracking-wider">{{ $t('Tagged') }}</label>
                 <button
                     @click="cycleTaggedState"
                     class="px-3 py-1.5 text-xs font-medium border rounded transition-colors min-w-[90px]"
@@ -283,7 +290,7 @@ onMounted(async () => {
 
         <!-- Export message -->
         <div v-if="exportMessage" class="px-6 pb-3">
-            <p class="text-xs text-green-600">{{ exportMessage }}</p>
+            <p class="text-xs" :class="exportSuccess ? 'text-green-600' : 'text-red-600'">{{ exportMessage }}</p>
         </div>
     </div>
 </template>
diff --git a/tests/Feature/Teams/DownloadTeamDataTest.php b/tests/Feature/Teams/DownloadTeamDataTest.php
index ebda24c44..8adcfeeb6 100644
--- a/tests/Feature/Teams/DownloadTeamDataTest.php
+++ b/tests/Feature/Teams/DownloadTeamDataTest.php
@@ -8,6 +8,8 @@
 use Illuminate\Support\Carbon;
 use Illuminate\Support\Facades\Mail;
 use Illuminate\Support\Facades\Storage;
+use Spatie\Permission\Models\Role;
+use Spatie\Permission\PermissionRegistrar;
 use Tests\TestCase;
 
 class DownloadTeamDataTest extends TestCase
@@ -96,4 +98,27 @@ public function test_a_leader_can_download_with_date_filter()
             return true;
         });
     }
+
+    public function test_a_school_manager_can_download_a_teams_data()
+    {
+        Mail::fake();
+        Storage::fake('s3');
+        Carbon::setTestNow(now());
+
+        Role::firstOrCreate(['name' => 'school_manager', 'guard_name' => 'web']);
+        app()[PermissionRegistrar::class]->forgetCachedPermissions();
+
+        /** @var User $manager */
+        $manager = User::factory()->create();
+        $manager->assignRole('school_manager');
+        /** @var Team $team */
+        $team = Team::factory()->create();
+        $manager->teams()->attach($team);
+
+        $response = $this->actingAs($manager)->postJson("api/teams/download?team_id=$team->id");
+
+        $response->assertOk();
+        $response->assertJson(['success' => true]);
+        Mail::assertSent(ExportWithLink::class);
+    }
 }
diff --git a/tests/Unit/Exports/CreateCSVExportTest.php b/tests/Unit/Exports/CreateCSVExportTest.php
index 5bc44772d..64dddd312 100644
--- a/tests/Unit/Exports/CreateCSVExportTest.php
+++ b/tests/Unit/Exports/CreateCSVExportTest.php
@@ -12,6 +12,7 @@
 use App\Models\Litter\Tags\PhotoTag;
 use App\Models\Litter\Tags\PhotoTagExtraTags;
 use App\Models\Photo;
+use App\Models\Users\User;
 use Database\Seeders\Tags\GenerateTagsSeeder;
 use Tests\TestCase;
 
@@ -23,65 +24,93 @@ protected function setUp(): void
         $this->seed(GenerateTagsSeeder::class);
     }
 
-    public function test_it_has_correct_headings_for_all_categories_and_tags()
+    public function test_empty_export_has_only_fixed_columns()
     {
         $expected = ['id', 'verification', 'phone', 'date_taken', 'date_uploaded', 'lat', 'lon', 'picked up', 'address', 'total_tags'];
 
-        $categories = Category::with(['litterObjects' => fn ($q) => $q->orderBy('litter_objects.id')])->orderBy('id')->get();
-        foreach ($categories as $category) {
-            $expected[] = strtoupper($category->key);
-            foreach ($category->litterObjects as $object) {
-                $expected[] = $object->key;
-            }
-        }
+        $export = new CreateCSVExport('null', 1, null, null);
 
-        // Materials columns
-        $expected[] = 'MATERIALS';
-        foreach (Materials::orderBy('id')->get() as $material) {
-            $expected[] = $material->key;
-        }
+        $this->assertEquals($expected, $export->headings());
+    }
 
-        // Types columns
-        $expected[] = 'TYPES';
-        foreach (LitterObjectType::orderBy('id')->get() as $type) {
-            $expected[] = $type->key;
-        }
+    public function test_headings_include_only_columns_with_data()
+    {
+        $category = Category::with(['litterObjects' => fn ($q) => $q->orderBy('litter_objects.id')])
+            ->orderBy('id')
+            ->get()
+            ->first(fn ($c) => $c->litterObjects->count() >= 2);
+        $obj1 = $category->litterObjects[0];
+        $obj2 = $category->litterObjects[1];
 
-        // Brands + custom tags
-        $expected[] = 'brands';
-        $expected = array_merge($expected, ['custom_tag_1', 'custom_tag_2', 'custom_tag_3']);
+        $cloId1 = CategoryObject::where('category_id', $category->id)->where('litter_object_id', $obj1->id)->value('id');
 
-        $this->assertDatabaseCount('photos', 0);
+        $material = Materials::orderBy('id')->first();
+        $type = LitterObjectType::orderBy('id')->first();
+        $brand = BrandList::firstOrCreate(['key' => 'test_brand']);
+        $customTag = CustomTagNew::firstOrCreate(['key' => 'my_custom']);
 
-        $export = new CreateCSVExport('null', 1, null, null);
+        // Create a user photo with specific tags
+        $user = User::factory()->create();
+        $photo = Photo::factory()->create(['verified' => 2, 'user_id' => $user->id]);
+        $pt = PhotoTag::create([
+            'photo_id' => $photo->id,
+            'category_id' => $category->id,
+            'litter_object_id' => $obj1->id,
+            'category_litter_object_id' => $cloId1,
+            'litter_object_type_id' => $type->id,
+            'quantity' => 3,
+        ]);
+        PhotoTagExtraTags::create(['photo_tag_id' => $pt->id, 'tag_type' => 'material', 'tag_type_id' => $material->id, 'quantity' => 1]);
+        PhotoTagExtraTags::create(['photo_tag_id' => $pt->id, 'tag_type' => 'brand', 'tag_type_id' => $brand->id, 'quantity' => 1]);
+        PhotoTagExtraTags::create(['photo_tag_id' => $pt->id, 'tag_type' => 'custom_tag', 'tag_type_id' => $customTag->id, 'quantity' => 1]);
 
-        $this->assertEquals($expected, $export->headings());
-        $this->assertDatabaseCount('photos', 0);
+        $export = new CreateCSVExport(null, null, null, $user->id);
+        $headings = $export->headings();
+
+        // Fixed columns always present
+        $this->assertEquals('id', $headings[0]);
+        $this->assertEquals('total_tags', $headings[9]);
+
+        // Only the used category + its used object should appear (not all categories)
+        $this->assertContains(strtoupper($category->key), $headings);
+        $this->assertContains($obj1->key, $headings);
+        // obj2 is in the same category but has no photo_tags — should be excluded
+        $this->assertNotContains($obj2->key, $headings);
+
+        // Only the used material, type, brand, custom_tag sections should appear
+        $this->assertContains('MATERIALS', $headings);
+        $this->assertContains($material->key, $headings);
+        $this->assertContains('TYPES', $headings);
+        $this->assertContains($type->key, $headings);
+        $this->assertContains('brands', $headings);
+        $this->assertContains('custom_tag_1', $headings);
+
+        // Unused materials/types should NOT appear
+        $otherMaterial = Materials::where('id', '!=', $material->id)->orderBy('id')->first();
+        if ($otherMaterial) {
+            $this->assertNotContains($otherMaterial->key, $headings);
+        }
     }
 
-    public function test_it_has_correct_mappings_for_all_categories_and_tags()
+    public function test_it_has_correct_mappings()
     {
-        // Pick a category with at least 2 objects (unclassified only has 1)
         $category = Category::with(['litterObjects' => fn ($q) => $q->orderBy('litter_objects.id')])
             ->orderBy('id')
             ->get()
             ->first(fn ($c) => $c->litterObjects->count() >= 2);
-        $objects = $category->litterObjects;
-        $obj1 = $objects[0];
-        $obj2 = $objects[1];
+        $obj1 = $category->litterObjects[0];
+        $obj2 = $category->litterObjects[1];
 
         $cloId1 = CategoryObject::where('category_id', $category->id)->where('litter_object_id', $obj1->id)->value('id');
         $cloId2 = CategoryObject::where('category_id', $category->id)->where('litter_object_id', $obj2->id)->value('id');
 
-        // Get a material for testing (seeded by GenerateTagsSeeder)
         $material = Materials::orderBy('id')->first();
-
-        // Create a brand (not seeded)
         $brand = BrandList::firstOrCreate(['key' => 'test_brand_export']);
 
-        // Nested summary format: { catId: { objId: { quantity, materials: {id: qty}, brands: {id: qty} } } }
+        $user = User::factory()->create();
         $photo = Photo::factory()->create([
             'verified' => 2,
+            'user_id' => $user->id,
             'model' => 'Redmi Note 8 pro',
             'datetime' => now()->toDateTimeString(),
             'lat' => 42.0,
@@ -91,151 +120,100 @@ public function test_it_has_correct_mappings_for_all_categories_and_tags()
             'total_tags' => 15,
             'summary' => [
                 'tags' => [
-                    (string) $category->id => [
-                        (string) $obj1->id => [
-                            'quantity' => 5,
-                            'materials' => [(string) $material->id => 5],
-                            'brands' => [(string) $brand->id => 2],
-                            'custom_tags' => (object) [],
-                        ],
-                        (string) $obj2->id => [
-                            'quantity' => 10,
-                            'materials' => (object) [],
-                            'brands' => (object) [],
-                            'custom_tags' => (object) [],
-                        ],
-                    ],
+                    ['clo_id' => $cloId1, 'category_id' => $category->id, 'object_id' => $obj1->id, 'type_id' => null, 'quantity' => 5, 'materials' => [$material->id], 'brands' => [$brand->id => 2], 'custom_tags' => []],
+                    ['clo_id' => $cloId2, 'category_id' => $category->id, 'object_id' => $obj2->id, 'type_id' => null, 'quantity' => 10, 'materials' => [], 'brands' => (object) [], 'custom_tags' => []],
                 ],
                 'totals' => ['litter' => 15, 'materials' => 5, 'brands' => 2, 'custom_tags' => 0],
-                'keys' => [
-                    'brands' => [(string) $brand->id => 'test_brand_export'],
-                ],
+                'keys' => ['brands' => [(string) $brand->id => 'test_brand_export']],
             ],
         ]);
 
-        // Create custom tags via v5 photo_tags
+        // Create photo_tags so the pre-scan finds columns
+        $pt1 = PhotoTag::create(['photo_id' => $photo->id, 'category_id' => $category->id, 'litter_object_id' => $obj1->id, 'category_litter_object_id' => $cloId1, 'quantity' => 5]);
+        PhotoTagExtraTags::create(['photo_tag_id' => $pt1->id, 'tag_type' => 'material', 'tag_type_id' => $material->id, 'quantity' => 1]);
+        PhotoTagExtraTags::create(['photo_tag_id' => $pt1->id, 'tag_type' => 'brand', 'tag_type_id' => $brand->id, 'quantity' => 2]);
+        PhotoTag::create(['photo_id' => $photo->id, 'category_id' => $category->id, 'litter_object_id' => $obj2->id, 'category_litter_object_id' => $cloId2, 'quantity' => 10]);
+
+        // Add custom tags
         $customTag1 = CustomTagNew::firstOrCreate(['key' => 'my_custom_1']);
         $customTag2 = CustomTagNew::firstOrCreate(['key' => 'my_custom_2']);
         $customTag3 = CustomTagNew::firstOrCreate(['key' => 'my_custom_3']);
         $unclassifiedCloId = $this->getUnclassifiedOtherCloId();
-        $pt1 = PhotoTag::create(['photo_id' => $photo->id, 'category_litter_object_id' => $unclassifiedCloId, 'quantity' => 1]);
-        PhotoTagExtraTags::create(['photo_tag_id' => $pt1->id, 'tag_type' => 'custom_tag', 'tag_type_id' => $customTag1->id, 'quantity' => 1]);
-        $pt2 = PhotoTag::create(['photo_id' => $photo->id, 'category_litter_object_id' => $unclassifiedCloId, 'quantity' => 1]);
-        PhotoTagExtraTags::create(['photo_tag_id' => $pt2->id, 'tag_type' => 'custom_tag', 'tag_type_id' => $customTag2->id, 'quantity' => 1]);
-        $pt3 = PhotoTag::create(['photo_id' => $photo->id, 'category_litter_object_id' => $unclassifiedCloId, 'quantity' => 1]);
-        PhotoTagExtraTags::create(['photo_tag_id' => $pt3->id, 'tag_type' => 'custom_tag', 'tag_type_id' => $customTag3->id, 'quantity' => 1]);
-
-        $this->assertDatabaseCount('photos', 1);
-
-        $export = new CreateCSVExport('null', 1, null, null);
+        $ptc1 = PhotoTag::create(['photo_id' => $photo->id, 'category_litter_object_id' => $unclassifiedCloId, 'quantity' => 1]);
+        PhotoTagExtraTags::create(['photo_tag_id' => $ptc1->id, 'tag_type' => 'custom_tag', 'tag_type_id' => $customTag1->id, 'quantity' => 1]);
+        $ptc2 = PhotoTag::create(['photo_id' => $photo->id, 'category_litter_object_id' => $unclassifiedCloId, 'quantity' => 1]);
+        PhotoTagExtraTags::create(['photo_tag_id' => $ptc2->id, 'tag_type' => 'custom_tag', 'tag_type_id' => $customTag2->id, 'quantity' => 1]);
+        $ptc3 = PhotoTag::create(['photo_id' => $photo->id, 'category_litter_object_id' => $unclassifiedCloId, 'quantity' => 1]);
+        PhotoTagExtraTags::create(['photo_tag_id' => $ptc3->id, 'tag_type' => 'custom_tag', 'tag_type_id' => $customTag3->id, 'quantity' => 1]);
+
+        $export = new CreateCSVExport(null, null, null, $user->id);
+        $mapped = $export->map($photo->fresh());
+        $headings = $export->headings();
 
-        // Build expected row
-        $expected = [
-            $photo->id,
-            $photo->verified,
-            'Redmi Note 8 pro',
-            $photo->datetime,
-            $photo->created_at,
-            42.0,
-            42.0,
-            'No', // remaining=true means not picked up
-            $photo->display_name,
-            15, // total_objects from summary
-        ];
-
-        // Category/object columns — only the two tagged objects have values
-        $allCategories = Category::with(['litterObjects' => fn ($q) => $q->orderBy('litter_objects.id')])->orderBy('id')->get();
-        foreach ($allCategories as $cat) {
-            $expected[] = null; // category separator
-            foreach ($cat->litterObjects as $obj) {
-                if ($cat->id === $category->id && $obj->id === $obj1->id) {
-                    $expected[] = 5;
-                } elseif ($cat->id === $category->id && $obj->id === $obj2->id) {
-                    $expected[] = 10;
-                } else {
-                    $expected[] = null;
-                }
-            }
-        }
+        // Fixed columns
+        $this->assertEquals($photo->id, $mapped[0]);
+        $this->assertEquals(2, $mapped[1]); // verified->value
+        $this->assertEquals('No', $mapped[7]); // picked_up = false (remaining=true)
+        $this->assertEquals(15, $mapped[9]); // total_tags
 
-        // Materials columns — material has qty 5 (from the nested materials object)
-        $expected[] = null; // MATERIALS separator
-        foreach (Materials::orderBy('id')->get() as $mat) {
-            $expected[] = $mat->id === $material->id ? 5 : null;
-        }
+        // Object quantities in correct columns
+        $obj1Index = array_search($obj1->key, $headings);
+        $obj2Index = array_search($obj2->key, $headings);
+        $this->assertEquals(5, $mapped[$obj1Index]);
+        $this->assertEquals(10, $mapped[$obj2Index]);
 
-        // Types columns — no photo_tags with litter_object_type_id in this test
-        $expected[] = null; // TYPES separator
-        foreach (LitterObjectType::orderBy('id')->get() as $type) {
-            $expected[] = null;
-        }
-
-        // Brands column
-        $expected[] = 'test_brand_export:2';
+        // Material in correct column
+        $matIndex = array_search($material->key, $headings);
+        $this->assertEquals(5, $mapped[$matIndex]); // inherits parent tag qty
 
-        $expected = array_merge($expected, ['my_custom_1', 'my_custom_2', 'my_custom_3']);
+        // Brands
+        $brandsIndex = array_search('brands', $headings);
+        $this->assertEquals('test_brand_export:2', $mapped[$brandsIndex]);
 
-        $this->assertEquals($expected, $export->map($photo->fresh()));
-        $this->assertDatabaseCount('photos', 1);
+        // Custom tags
+        $ct1Index = array_search('custom_tag_1', $headings);
+        $this->assertEquals('my_custom_1', $mapped[$ct1Index]);
+        $this->assertEquals('my_custom_2', $mapped[$ct1Index + 1]);
+        $this->assertEquals('my_custom_3', $mapped[$ct1Index + 2]);
     }
 
-    public function test_it_maps_to_null_values_for_all_missing_categories()
+    public function test_it_maps_to_null_values_for_empty_tags()
     {
+        $category = Category::with(['litterObjects' => fn ($q) => $q->orderBy('litter_objects.id')])
+            ->orderBy('id')
+            ->get()
+            ->first(fn ($c) => $c->litterObjects->count() >= 1);
+        $obj = $category->litterObjects->first();
+        $cloId = CategoryObject::where('category_id', $category->id)->where('litter_object_id', $obj->id)->value('id');
+
+        // Photo with empty summary but has a photo_tag (so category appears in pre-scan)
+        $user = User::factory()->create();
         $photo = Photo::factory()->create([
             'verified' => 2,
-            'model' => 'Redmi Note 8 pro',
+            'user_id' => $user->id,
+            'model' => 'Test',
             'datetime' => now()->toDateTimeString(),
             'lat' => 42.0,
             'lon' => 42.0,
             'remaining' => true,
-            'address_array' => ['road' => '12345 Street', 'country' => 'Ireland'],
-            'summary' => [
-                'tags' => (object) [],
-                'totals' => ['litter' => 0, 'materials' => 0, 'brands' => 0, 'custom_tags' => 0],
-            ],
+            'address_array' => ['country' => 'Ireland'],
+            'summary' => ['tags' => [], 'totals' => ['litter' => 0, 'materials' => 0, 'brands' => 0, 'custom_tags' => 0]],
         ]);
+        PhotoTag::create(['photo_id' => $photo->id, 'category_id' => $category->id, 'litter_object_id' => $obj->id, 'category_litter_object_id' => $cloId, 'quantity' => 0]);
 
-        $expected = [
-            $photo->id,
-            $photo->verified,
-            'Redmi Note 8 pro',
-            $photo->datetime,
-            $photo->created_at,
-            42.0,
-            42.0,
-            'No',
-            $photo->display_name,
-            0, // total_objects from summary
-        ];
-
-        $allCategories = Category::with(['litterObjects' => fn ($q) => $q->orderBy('litter_objects.id')])->orderBy('id')->get();
-        foreach ($allCategories as $cat) {
-            $expected[] = null; // category separator
-            foreach ($cat->litterObjects as $obj) {
-                $expected[] = null;
-            }
-        }
-
-        // Materials — all null
-        $expected[] = null;
-        foreach (Materials::orderBy('id')->get() as $mat) {
-            $expected[] = null;
-        }
-
-        // Types — all null
-        $expected[] = null;
-        foreach (LitterObjectType::orderBy('id')->get() as $type) {
-            $expected[] = null;
-        }
-
-        // Brands — null
-        $expected[] = null;
-
-        $expected = array_merge($expected, [null, null, null]);
+        $export = new CreateCSVExport(null, null, null, $user->id);
+        $mapped = $export->map($photo->fresh());
+        $headings = $export->headings();
 
-        $export = new CreateCSVExport('null', 1, null, null);
+        // Object column should be null (summary has no tags)
+        $objIndex = array_search($obj->key, $headings);
+        $this->assertNull($mapped[$objIndex]);
 
-        $this->assertEquals($expected, $export->map($photo->fresh()));
+        // No materials/types/brands/custom_tags sections
+        $this->assertNotContains('MATERIALS', $headings);
+        $this->assertNotContains('TYPES', $headings);
+        $this->assertNotContains('brands', $headings);
+        $this->assertNotContains('custom_tag_1', $headings);
     }
 
     public function test_materials_are_aggregated_across_multiple_tags()
@@ -244,46 +222,44 @@ public function test_materials_are_aggregated_across_multiple_tags()
             ->orderBy('id')
             ->get()
             ->first(fn ($c) => $c->litterObjects->count() >= 2);
-        $objects = $category->litterObjects;
-        $obj1 = $objects[0];
-        $obj2 = $objects[1];
+        $obj1 = $category->litterObjects[0];
+        $obj2 = $category->litterObjects[1];
+
+        $cloId1 = CategoryObject::where('category_id', $category->id)->where('litter_object_id', $obj1->id)->value('id');
+        $cloId2 = CategoryObject::where('category_id', $category->id)->where('litter_object_id', $obj2->id)->value('id');
 
         $material = Materials::orderBy('id')->first();
 
-        // Nested summary: both objects have the same material with different quantities
+        $user = User::factory()->create();
         $photo = Photo::factory()->create([
             'verified' => 2,
+            'user_id' => $user->id,
             'datetime' => now()->toDateTimeString(),
             'lat' => 42.0,
             'lon' => 42.0,
             'address_array' => ['country' => 'Ireland'],
             'summary' => [
                 'tags' => [
-                    (string) $category->id => [
-                        (string) $obj1->id => [
-                            'quantity' => 3,
-                            'materials' => [(string) $material->id => 3],
-                            'brands' => (object) [],
-                            'custom_tags' => (object) [],
-                        ],
-                        (string) $obj2->id => [
-                            'quantity' => 7,
-                            'materials' => [(string) $material->id => 7],
-                            'brands' => (object) [],
-                            'custom_tags' => (object) [],
-                        ],
-                    ],
+                    ['clo_id' => $cloId1, 'category_id' => $category->id, 'object_id' => $obj1->id, 'type_id' => null, 'quantity' => 3, 'materials' => [$material->id], 'brands' => (object) [], 'custom_tags' => []],
+                    ['clo_id' => $cloId2, 'category_id' => $category->id, 'object_id' => $obj2->id, 'type_id' => null, 'quantity' => 7, 'materials' => [$material->id], 'brands' => (object) [], 'custom_tags' => []],
                 ],
                 'totals' => ['litter' => 10, 'materials' => 10, 'brands' => 0, 'custom_tags' => 0],
             ],
         ]);
 
-        $export = new CreateCSVExport('null', 1, null, null);
+        // Photo tags for pre-scan
+        $pt1 = PhotoTag::create(['photo_id' => $photo->id, 'category_id' => $category->id, 'litter_object_id' => $obj1->id, 'category_litter_object_id' => $cloId1, 'quantity' => 3]);
+        PhotoTagExtraTags::create(['photo_tag_id' => $pt1->id, 'tag_type' => 'material', 'tag_type_id' => $material->id, 'quantity' => 1]);
+        $pt2 = PhotoTag::create(['photo_id' => $photo->id, 'category_id' => $category->id, 'litter_object_id' => $obj2->id, 'category_litter_object_id' => $cloId2, 'quantity' => 7]);
+        PhotoTagExtraTags::create(['photo_tag_id' => $pt2->id, 'tag_type' => 'material', 'tag_type_id' => $material->id, 'quantity' => 1]);
+
+        $export = new CreateCSVExport(null, null, null, $user->id);
         $mapped = $export->map($photo->fresh());
         $headings = $export->headings();
 
-        // Find the material column — search after the MATERIALS separator
         $materialsHeaderIndex = array_search('MATERIALS', $headings);
+        $this->assertNotFalse($materialsHeaderIndex);
+
         $materialIndex = null;
         for ($i = $materialsHeaderIndex + 1; $i < count($headings); $i++) {
             if ($headings[$i] === $material->key) {
@@ -292,9 +268,8 @@ public function test_materials_are_aggregated_across_multiple_tags()
             }
         }
 
-        $this->assertNotNull($materialIndex, "Material column '{$material->key}' not found in headings");
-        // Material should be 3 + 7 = 10 (sum of both tag quantities)
-        $this->assertEquals(10, $mapped[$materialIndex]);
+        $this->assertNotNull($materialIndex);
+        $this->assertEquals(10, $mapped[$materialIndex]); // 3 + 7
     }
 
     public function test_brands_formatted_as_delimited_string()
@@ -304,49 +279,46 @@ public function test_brands_formatted_as_delimited_string()
             ->get()
             ->first(fn ($c) => $c->litterObjects->count() >= 1);
         $obj = $category->litterObjects->first();
+        $cloId = CategoryObject::where('category_id', $category->id)->where('litter_object_id', $obj->id)->value('id');
 
         $brand1 = BrandList::firstOrCreate(['key' => 'test_brand_1']);
         $brand2 = BrandList::firstOrCreate(['key' => 'test_brand_2']);
 
-        // Nested summary with brands as {id: qty} objects
+        $user = User::factory()->create();
         $photo = Photo::factory()->create([
             'verified' => 2,
+            'user_id' => $user->id,
             'datetime' => now()->toDateTimeString(),
             'lat' => 42.0,
             'lon' => 42.0,
             'address_array' => ['country' => 'Ireland'],
             'summary' => [
                 'tags' => [
-                    (string) $category->id => [
-                        (string) $obj->id => [
-                            'quantity' => 5,
-                            'materials' => (object) [],
-                            'brands' => [(string) $brand1->id => 1, (string) $brand2->id => 3],
-                            'custom_tags' => (object) [],
-                        ],
-                    ],
+                    ['clo_id' => $cloId, 'category_id' => $category->id, 'object_id' => $obj->id, 'type_id' => null, 'quantity' => 5, 'materials' => [], 'brands' => [(string) $brand1->id => 1, (string) $brand2->id => 3], 'custom_tags' => []],
                 ],
                 'totals' => ['litter' => 5, 'materials' => 0, 'brands' => 4, 'custom_tags' => 0],
-                'keys' => [
-                    'brands' => [(string) $brand1->id => 'test_brand_1', (string) $brand2->id => 'test_brand_2'],
-                ],
+                'keys' => ['brands' => [(string) $brand1->id => 'test_brand_1', (string) $brand2->id => 'test_brand_2']],
             ],
         ]);
 
-        $export = new CreateCSVExport('null', 1, null, null);
+        $pt = PhotoTag::create(['photo_id' => $photo->id, 'category_id' => $category->id, 'litter_object_id' => $obj->id, 'category_litter_object_id' => $cloId, 'quantity' => 5]);
+        PhotoTagExtraTags::create(['photo_tag_id' => $pt->id, 'tag_type' => 'brand', 'tag_type_id' => $brand1->id, 'quantity' => 1]);
+        PhotoTagExtraTags::create(['photo_tag_id' => $pt->id, 'tag_type' => 'brand', 'tag_type_id' => $brand2->id, 'quantity' => 3]);
+
+        $export = new CreateCSVExport(null, null, null, $user->id);
         $mapped = $export->map($photo->fresh());
         $headings = $export->headings();
 
         $brandsIndex = array_search('brands', $headings);
-        $brandsValue = $mapped[$brandsIndex];
+        $this->assertNotFalse($brandsIndex);
 
-        $this->assertNotNull($brandsValue);
+        $brandsValue = $mapped[$brandsIndex];
         $this->assertStringContainsString('test_brand_1:1', $brandsValue);
         $this->assertStringContainsString('test_brand_2:3', $brandsValue);
         $this->assertStringContainsString(';', $brandsValue);
     }
 
-    public function test_types_are_mapped_from_photo_tags()
+    public function test_types_are_mapped_from_summary()
     {
         $category = Category::with(['litterObjects' => fn ($q) => $q->orderBy('litter_objects.id')])
             ->orderBy('id')
@@ -357,29 +329,22 @@ public function test_types_are_mapped_from_photo_tags()
 
         $type = LitterObjectType::orderBy('id')->first();
 
-        // Summary doesn't contain type_id — types come from photo_tags DB rows
+        $user = User::factory()->create();
         $photo = Photo::factory()->create([
             'verified' => 2,
+            'user_id' => $user->id,
             'datetime' => now()->toDateTimeString(),
             'lat' => 42.0,
             'lon' => 42.0,
             'address_array' => ['country' => 'Ireland'],
             'summary' => [
                 'tags' => [
-                    (string) $category->id => [
-                        (string) $obj->id => [
-                            'quantity' => 8,
-                            'materials' => (object) [],
-                            'brands' => (object) [],
-                            'custom_tags' => (object) [],
-                        ],
-                    ],
+                    ['clo_id' => $cloId, 'category_id' => $category->id, 'object_id' => $obj->id, 'type_id' => $type->id, 'quantity' => 8, 'materials' => [], 'brands' => (object) [], 'custom_tags' => []],
                 ],
                 'totals' => ['litter' => 8, 'materials' => 0, 'brands' => 0, 'custom_tags' => 0],
             ],
         ]);
 
-        // Create a photo_tag row with litter_object_type_id — this is the DB source for types
         PhotoTag::create([
             'photo_id' => $photo->id,
             'category_id' => $category->id,
@@ -389,12 +354,13 @@ public function test_types_are_mapped_from_photo_tags()
             'quantity' => 8,
         ]);
 
-        $export = new CreateCSVExport('null', 1, null, null);
+        $export = new CreateCSVExport(null, null, null, $user->id);
         $mapped = $export->map($photo->fresh());
         $headings = $export->headings();
 
-        // Find the type column — search after TYPES separator
         $typesHeaderIndex = array_search('TYPES', $headings);
+        $this->assertNotFalse($typesHeaderIndex);
+
         $typeIndex = null;
         for ($i = $typesHeaderIndex + 1; $i < count($headings); $i++) {
             if ($headings[$i] === $type->key) {
@@ -403,20 +369,7 @@ public function test_types_are_mapped_from_photo_tags()
             }
         }
 
-        $this->assertNotNull($typeIndex, "Type column '{$type->key}' not found in headings");
+        $this->assertNotNull($typeIndex);
         $this->assertEquals(8, $mapped[$typeIndex]);
-
-        // Other types should be null
-        $otherType = LitterObjectType::where('id', '!=', $type->id)->orderBy('id')->first();
-        if ($otherType) {
-            $otherIndex = null;
-            for ($i = $typesHeaderIndex + 1; $i < count($headings); $i++) {
-                if ($headings[$i] === $otherType->key) {
-                    $otherIndex = $i;
-                    break;
-                }
-            }
-            $this->assertNull($mapped[$otherIndex]);
-        }
     }
 }

From 768b05f7877cadee0c70e493a7e9f86da4a1423d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Se=C3=A1n=20L=2E?= <lynch.sean@pm.me>
Date: Mon, 6 Apr 2026 17:52:07 +0100
Subject: [PATCH 3/3] team ui updates

---
 .../Teams/TeamPhotosController.php            | 42 ++++++++++++----
 package.json                                  |  2 +-
 readme/changelog/2026-04-05.md                |  3 ++
 readme/changelog/2026-04-06.md                |  6 +++
 resources/js/composables/usePhotoUrl.js       | 12 +++++
 .../Tagging/v2/components/PhotoViewer.vue     | 17 ++++---
 resources/js/views/Teams/CreateTeam.vue       | 26 +++++-----
 resources/js/views/Teams/FacilitatorQueue.vue |  6 +--
 resources/js/views/Teams/ParticipantEntry.vue |  4 +-
 .../js/views/Teams/ParticipantWorkspace.vue   | 21 ++++----
 .../js/views/Teams/TeamApprovalQueue.vue      | 11 +++--
 resources/js/views/Teams/TeamOverview.vue     | 24 ++++-----
 resources/js/views/Teams/TeamPhotoEdit.vue    |  5 +-
 resources/js/views/Teams/TeamPhotoList.vue    | 13 ++---
 resources/js/views/Teams/TeamPhotoMap.vue     | 49 ++++++++++++++++---
 resources/js/views/Teams/TeamSettingsTab.vue  | 20 ++++----
 resources/js/views/Teams/TeamsHub.vue         | 24 ++++-----
 resources/js/views/Teams/TeamsLeaderboard.vue | 28 +++++------
 .../components/FacilitatorQueueFilters.vue    |  8 +--
 .../components/FacilitatorQueueHeader.vue     |  6 +--
 .../Teams/components/ParticipantGrid.vue      | 12 ++---
 .../Teams/components/TeamMembersList.vue      |  6 +--
 .../js/views/User/Uploads/PhotoPreview.vue    | 12 +----
 resources/js/views/User/Uploads/Uploads.vue   |  3 +-
 24 files changed, 218 insertions(+), 142 deletions(-)
 create mode 100644 readme/changelog/2026-04-06.md
 create mode 100644 resources/js/composables/usePhotoUrl.js

diff --git a/app/Http/Controllers/Teams/TeamPhotosController.php b/app/Http/Controllers/Teams/TeamPhotosController.php
index 0e512e167..2a5501934 100644
--- a/app/Http/Controllers/Teams/TeamPhotosController.php
+++ b/app/Http/Controllers/Teams/TeamPhotosController.php
@@ -446,19 +446,41 @@ public function mapPoints(Request $request): JsonResponse
         $points = Photo::where('team_id', $team->id)
             ->whereNotNull('lat')
             ->whereNotNull('lon')
-            ->select(['id', 'lat', 'lon', 'verified', 'is_public', 'total_tags', 'created_at'])
+            ->with(['user:id,name,username,show_username_maps,show_name_maps,global_flag'])
+            ->select([
+                'id', 'user_id', 'lat', 'lon', 'verified', 'is_public',
+                'total_tags', 'remaining', 'filename', 'datetime', 'summary',
+                'created_at',
+            ])
             ->orderByDesc('created_at')
             ->limit(5000)
             ->get()
-            ->map(fn ($photo) => [
-                'id' => $photo->id,
-                'lat' => $photo->lat,
-                'lng' => $photo->lon,
-                'tags' => $photo->total_tags,
-                'verified' => $photo->verified->value,
-                'is_public' => $photo->is_public,
-                'date' => $photo->created_at->toDateString(),
-            ]);
+            ->map(function ($photo) use ($team) {
+                $applySafeguarding = $team->safeguarding;
+
+                return [
+                    'id' => $photo->id,
+                    'lat' => $photo->lat,
+                    'lng' => $photo->lon,
+                    'tags' => $photo->total_tags,
+                    'verified' => $photo->verified->value,
+                    'is_public' => $photo->is_public,
+                    'date' => $photo->created_at->toDateString(),
+                    // Popup fields — same shape as global map PointsController::show
+                    'filename' => $photo->filename,
+                    'datetime' => $photo->datetime,
+                    'picked_up' => $photo->picked_up,
+                    'summary' => $photo->summary,
+                    'team' => $team->name,
+                    'name' => $applySafeguarding ? null : (
+                        $photo->user && $photo->user->show_name_maps ? $photo->user->name : null
+                    ),
+                    'username' => $applySafeguarding ? null : (
+                        $photo->user && $photo->user->show_username_maps ? $photo->user->username : null
+                    ),
+                    'flag' => $applySafeguarding ? null : $photo->user?->global_flag,
+                ];
+            });
 
         return response()->json([
             'success' => true,
diff --git a/package.json b/package.json
index 5d1954b21..0f371bed5 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "openlittermap-web",
-  "version": "5.8.0",
+  "version": "5.8.2",
   "type": "module",
   "author": "Seán Lynch",
   "license": "GPL v3",
diff --git a/readme/changelog/2026-04-05.md b/readme/changelog/2026-04-05.md
index 10c0ce9e7..9a445d917 100644
--- a/readme/changelog/2026-04-05.md
+++ b/readme/changelog/2026-04-05.md
@@ -1,5 +1,8 @@
 # 2026-04-05
 
+## v5.8.1
+- fix(export): hide empty CSV columns via pre-scan, subquery-based pre-scan (no `pluck` memory bloat), single extra-tags query, DRY `scopeQuery()`, SQL injection whitelist, `picked_up` accessor, leader/school_manager auth test, filtered stats on Uploads page, error message color fix
+
 ## v5.8.0
 - feat(export): CSV data export for users and teams — full v5 tag data (materials, types, brands), date filters, export buttons on Uploads + Teams pages, leader/school_manager auth, `verified >= ADMIN_APPROVED`, filtered stats, new `readme/ExportData.md`
 
diff --git a/readme/changelog/2026-04-06.md b/readme/changelog/2026-04-06.md
new file mode 100644
index 000000000..063daeb87
--- /dev/null
+++ b/readme/changelog/2026-04-06.md
@@ -0,0 +1,6 @@
+# 2026-04-06
+
+## v5.8.2
+- fix(photos): add shared `resolvePhotoUrl()` composable for S3/MinIO URL handling — fixes broken images in TeamPhotoList, TeamPhotoEdit, TeamApprovalQueue, ParticipantWorkspace; refactors Uploads.vue, PhotoPreview.vue, and PhotoViewer.vue to use same helper (covers FacilitatorQueue, AdminQueue, AddTags automatically)
+- feat(teams): team map popup now matches global map — shows photo image, tag summary, user attribution, picked-up status, and date via `popupHelper`; images load directly via `resolvePhotoUrl` (bypasses signed-url endpoint for pending private photos)
+- fix(teams): improve text readability across 14 team Vue components — bump `text-white/30`→`/50`, `text-white/40`→`/60`, `text-white/50`→`/60` (section headers), `placeholder-white/30`→`/50`, `text-slate-400`→`slate-500` (light theme), `text-gray-400`→`gray-300` (facilitator queue); skip disabled button states
diff --git a/resources/js/composables/usePhotoUrl.js b/resources/js/composables/usePhotoUrl.js
new file mode 100644
index 000000000..e8ba15947
--- /dev/null
+++ b/resources/js/composables/usePhotoUrl.js
@@ -0,0 +1,12 @@
+/**
+ * Resolve a photo filename to a displayable URL.
+ *
+ * In production, filename is a full S3 URL (https://olm-s3.s3...).
+ * In local dev with MinIO, filename is a full MinIO URL (http://localhost:9000/...).
+ * If filename is a relative path, prepend the current origin.
+ */
+export function resolvePhotoUrl(filename) {
+    if (!filename) return '/assets/images/waiting.png';
+    if (filename.startsWith('http') || filename.startsWith('//')) return filename;
+    return `${window.location.origin}${filename}`;
+}
diff --git a/resources/js/views/General/Tagging/v2/components/PhotoViewer.vue b/resources/js/views/General/Tagging/v2/components/PhotoViewer.vue
index e811fd527..a4b754d86 100644
--- a/resources/js/views/General/Tagging/v2/components/PhotoViewer.vue
+++ b/resources/js/views/General/Tagging/v2/components/PhotoViewer.vue
@@ -3,7 +3,7 @@
         <div class="relative w-full h-full flex items-center justify-center">
             <!-- Delete button -->
             <button
-                v-if="photoSrc && !loading && !error"
+                v-if="resolvedSrc && !loading && !error"
                 @click.stop="emit('delete')"
                 :disabled="deleting"
                 class="absolute top-2 right-2 z-10 bg-red-600 hover:bg-red-700 disabled:opacity-50 disabled:cursor-not-allowed text-white rounded-lg p-2 transition-colors shadow-lg"
@@ -19,7 +19,7 @@
             </button>
 
             <!-- Empty state: no photo available -->
-            <div v-if="!photoSrc && !loading" class="bg-white/5 border border-white/10 rounded-lg aspect-video flex flex-col items-center justify-center">
+            <div v-if="!resolvedSrc && !loading" class="bg-white/5 border border-white/10 rounded-lg aspect-video flex flex-col items-center justify-center">
                 <svg class="w-16 h-16 text-white/10 mb-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                     <path
                         stroke-linecap="round"
@@ -48,8 +48,8 @@
 
             <!-- Actual image -->
             <img
-                v-show="!loading && !error && photoSrc"
-                :src="photoSrc"
+                v-show="!loading && !error && resolvedSrc"
+                :src="resolvedSrc"
                 @load="handleLoad"
                 @error="handleError"
                 alt="Photo to tag"
@@ -80,13 +80,14 @@
             @click="toggleZoom"
             class="fixed inset-0 z-50 bg-black/90 backdrop-blur-sm flex items-center justify-center cursor-zoom-out"
         >
-            <img :src="photoSrc" alt="Zoomed photo" class="max-w-[90vw] max-h-[90vh] object-contain" />
+            <img :src="resolvedSrc" alt="Zoomed photo" class="max-w-[90vw] max-h-[90vh] object-contain" />
         </div>
     </div>
 </template>
 
 <script setup>
-import { ref, watch } from 'vue';
+import { ref, computed, watch } from 'vue';
+import { resolvePhotoUrl } from '@/composables/usePhotoUrl';
 
 const props = defineProps({
     photoSrc: String,
@@ -102,6 +103,8 @@ const props = defineProps({
 
 const emit = defineEmits(['image-loaded', 'delete']);
 
+const resolvedSrc = computed(() => props.photoSrc ? resolvePhotoUrl(props.photoSrc) : null);
+
 const error = ref(false);
 const zoomed = ref(false);
 
@@ -123,7 +126,7 @@ const handleError = () => {
 };
 
 const toggleZoom = () => {
-    if (!error.value && props.photoSrc) {
+    if (!error.value && resolvedSrc.value) {
         zoomed.value = !zoomed.value;
     }
 };
diff --git a/resources/js/views/Teams/CreateTeam.vue b/resources/js/views/Teams/CreateTeam.vue
index 47fac0bf5..cc2e79b49 100644
--- a/resources/js/views/Teams/CreateTeam.vue
+++ b/resources/js/views/Teams/CreateTeam.vue
@@ -1,7 +1,7 @@
 <template>
     <div class="min-h-screen bg-gradient-to-br from-slate-900 via-blue-900 to-emerald-900 py-8 px-4">
         <div class="max-w-lg mx-auto">
-            <router-link to="/teams" class="inline-flex items-center text-sm text-white/40 hover:text-white/60 mb-4 transition-colors">
+            <router-link to="/teams" class="inline-flex items-center text-sm text-white/60 hover:text-white/80 mb-4 transition-colors">
                 <svg class="w-4 h-4 mr-1" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                     <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7" />
                 </svg>
@@ -11,7 +11,7 @@
             <!-- No remaining teams and not a school manager -->
             <div v-if="remaining <= 0 && !isSchoolManager" class="bg-white/5 border border-white/10 rounded-xl p-6">
                 <h2 class="text-lg font-semibold text-white mb-2">{{ $t('Want to set up a team?') }}</h2>
-                <p class="text-white/50 text-sm">
+                <p class="text-white/60 text-sm">
                     {{ $t("Contact us to set up a team for your school. We'll assign you as a school manager so you can create and manage your team.") }}
                 </p>
                 <a
@@ -46,7 +46,7 @@
                             type="text"
                             required
                             placeholder="My Awesome Team"
-                            class="w-full bg-white/5 border border-white/20 rounded-lg px-3 py-2 text-sm text-white placeholder-white/30 focus:outline-none focus:border-emerald-500/50 focus:ring-1 focus:ring-emerald-500/50"
+                            class="w-full bg-white/5 border border-white/20 rounded-lg px-3 py-2 text-sm text-white placeholder-white/50 focus:outline-none focus:border-emerald-500/50 focus:ring-1 focus:ring-emerald-500/50"
                             :class="errors.name ? 'border-red-400/50' : ''"
                             @input="teamsStore.clearError('name')"
                         />
@@ -56,13 +56,13 @@
                     <!-- Identifier -->
                     <div>
                         <label class="block text-sm font-medium text-white/70 mb-1">{{ $t('Unique team ID') }}</label>
-                        <p class="text-xs text-white/30 mb-1">{{ $t('Share this code so others can join your team.') }}</p>
+                        <p class="text-xs text-white/50 mb-1">{{ $t('Share this code so others can join your team.') }}</p>
                         <input
                             v-model="identifier"
                             type="text"
                             required
                             placeholder="Awesome2026"
-                            class="w-full bg-white/5 border border-white/20 rounded-lg px-3 py-2 text-sm text-white placeholder-white/30 focus:outline-none focus:border-emerald-500/50 focus:ring-1 focus:ring-emerald-500/50"
+                            class="w-full bg-white/5 border border-white/20 rounded-lg px-3 py-2 text-sm text-white placeholder-white/50 focus:outline-none focus:border-emerald-500/50 focus:ring-1 focus:ring-emerald-500/50"
                             :class="errors.identifier ? 'border-red-400/50' : ''"
                             @input="teamsStore.clearError('identifier')"
                         />
@@ -88,7 +88,7 @@
                                     alt="Logo preview"
                                 />
                                 <template v-else>
-                                    <p class="text-white/30 text-sm">{{ $t('Click or drag to upload logo') }}</p>
+                                    <p class="text-white/50 text-sm">{{ $t('Click or drag to upload logo') }}</p>
                                     <p class="text-white/20 text-xs mt-1">PNG, JPG — max 2MB</p>
                                 </template>
                                 <button
@@ -117,7 +117,7 @@
                                 type="email"
                                 required
                                 placeholder="teacher@school.ie"
-                                class="w-full bg-white/5 border border-white/20 rounded-lg px-3 py-2 text-sm text-white placeholder-white/30 focus:outline-none focus:border-emerald-500/50 focus:ring-1 focus:ring-emerald-500/50"
+                                class="w-full bg-white/5 border border-white/20 rounded-lg px-3 py-2 text-sm text-white placeholder-white/50 focus:outline-none focus:border-emerald-500/50 focus:ring-1 focus:ring-emerald-500/50"
                                 :class="errors.contact_email ? 'border-red-400/50' : ''"
                                 @input="teamsStore.clearError('contact_email')"
                             />
@@ -129,7 +129,7 @@
                                 v-model="county"
                                 type="text"
                                 placeholder="Roscommon"
-                                class="w-full bg-white/5 border border-white/20 rounded-lg px-3 py-2 text-sm text-white placeholder-white/30 focus:outline-none focus:border-emerald-500/50 focus:ring-1 focus:ring-emerald-500/50"
+                                class="w-full bg-white/5 border border-white/20 rounded-lg px-3 py-2 text-sm text-white placeholder-white/50 focus:outline-none focus:border-emerald-500/50 focus:ring-1 focus:ring-emerald-500/50"
                             />
                         </div>
                         <div class="grid grid-cols-2 gap-4">
@@ -139,7 +139,7 @@
                                     v-model="academicYear"
                                     type="text"
                                     placeholder="2025/2026"
-                                    class="w-full bg-white/5 border border-white/20 rounded-lg px-3 py-2 text-sm text-white placeholder-white/30 focus:outline-none focus:border-emerald-500/50 focus:ring-1 focus:ring-emerald-500/50"
+                                    class="w-full bg-white/5 border border-white/20 rounded-lg px-3 py-2 text-sm text-white placeholder-white/50 focus:outline-none focus:border-emerald-500/50 focus:ring-1 focus:ring-emerald-500/50"
                                 />
                             </div>
                             <div>
@@ -148,20 +148,20 @@
                                     v-model="classGroup"
                                     type="text"
                                     placeholder="5th Class"
-                                    class="w-full bg-white/5 border border-white/20 rounded-lg px-3 py-2 text-sm text-white placeholder-white/30 focus:outline-none focus:border-emerald-500/50 focus:ring-1 focus:ring-emerald-500/50"
+                                    class="w-full bg-white/5 border border-white/20 rounded-lg px-3 py-2 text-sm text-white placeholder-white/50 focus:outline-none focus:border-emerald-500/50 focus:ring-1 focus:ring-emerald-500/50"
                                 />
                             </div>
                         </div>
                         <div>
                             <label class="block text-sm font-medium text-white/70 mb-1">{{ $t('Max participants') }}</label>
-                            <p class="text-xs text-white/30 mb-1">{{ $t('Maximum number of students who can join this team.') }}</p>
+                            <p class="text-xs text-white/50 mb-1">{{ $t('Maximum number of students who can join this team.') }}</p>
                             <input
                                 v-model.number="maxParticipants"
                                 type="number"
                                 min="1"
                                 max="500"
                                 placeholder="30"
-                                class="w-full bg-white/5 border border-white/20 rounded-lg px-3 py-2 text-sm text-white placeholder-white/30 focus:outline-none focus:border-emerald-500/50 focus:ring-1 focus:ring-emerald-500/50"
+                                class="w-full bg-white/5 border border-white/20 rounded-lg px-3 py-2 text-sm text-white placeholder-white/50 focus:outline-none focus:border-emerald-500/50 focus:ring-1 focus:ring-emerald-500/50"
                                 :class="errors.max_participants ? 'border-red-400/50' : ''"
                                 @input="teamsStore.clearError('max_participants')"
                             />
@@ -178,7 +178,7 @@
                                 <label for="participant_sessions" class="block text-sm font-medium text-white/70">
                                     {{ $t('Enable participant sessions') }}
                                 </label>
-                                <p class="text-xs text-white/30 mt-0.5">
+                                <p class="text-xs text-white/50 mt-0.5">
                                     {{ $t('Students join with session codes instead of creating accounts. Photos are owned by the facilitator.') }}
                                 </p>
                             </div>
diff --git a/resources/js/views/Teams/FacilitatorQueue.vue b/resources/js/views/Teams/FacilitatorQueue.vue
index b0d871757..c427b977d 100644
--- a/resources/js/views/Teams/FacilitatorQueue.vue
+++ b/resources/js/views/Teams/FacilitatorQueue.vue
@@ -37,7 +37,7 @@
 
         <!-- Loading -->
         <div v-if="photosStore.loading" class="flex-1 flex items-center justify-center">
-            <div class="text-gray-400">Loading photos...</div>
+            <div class="text-gray-300">Loading photos...</div>
         </div>
 
         <!-- Empty state -->
@@ -54,7 +54,7 @@
                 />
             </svg>
             <h2 class="text-white text-xl font-semibold mb-2">Queue is clear!</h2>
-            <p class="text-gray-400">No photos match the current filters.</p>
+            <p class="text-gray-300">No photos match the current filters.</p>
         </div>
 
         <!-- Main content: 3-panel layout -->
@@ -128,7 +128,7 @@
             >
                 Prev Page
             </button>
-            <span class="text-gray-400 text-sm">
+            <span class="text-gray-300 text-sm">
                 Page {{ photosStore.photos.current_page }} / {{ photosStore.photos.last_page }}
             </span>
             <button
diff --git a/resources/js/views/Teams/ParticipantEntry.vue b/resources/js/views/Teams/ParticipantEntry.vue
index c740322f2..800a401ac 100644
--- a/resources/js/views/Teams/ParticipantEntry.vue
+++ b/resources/js/views/Teams/ParticipantEntry.vue
@@ -3,7 +3,7 @@
         <div class="max-w-md w-full">
             <div class="text-center mb-8">
                 <h1 class="text-2xl font-bold text-white">Join a Session</h1>
-                <p class="text-white/50 mt-2 text-sm">
+                <p class="text-white/60 mt-2 text-sm">
                     Enter the session code provided by your teacher to start collecting litter data.
                 </p>
             </div>
@@ -15,7 +15,7 @@
                         v-model="token"
                         type="text"
                         placeholder="Paste your session code here"
-                        class="w-full bg-white/5 border border-white/20 rounded-lg px-3 py-2 text-sm font-mono text-white placeholder-white/30 focus:outline-none focus:border-emerald-500/50 focus:ring-1 focus:ring-emerald-500/50"
+                        class="w-full bg-white/5 border border-white/20 rounded-lg px-3 py-2 text-sm font-mono text-white placeholder-white/50 focus:outline-none focus:border-emerald-500/50 focus:ring-1 focus:ring-emerald-500/50"
                         :class="error ? 'border-red-400/50' : ''"
                         @input="error = ''"
                     />
diff --git a/resources/js/views/Teams/ParticipantWorkspace.vue b/resources/js/views/Teams/ParticipantWorkspace.vue
index b84a3c3f5..36545b62b 100644
--- a/resources/js/views/Teams/ParticipantWorkspace.vue
+++ b/resources/js/views/Teams/ParticipantWorkspace.vue
@@ -5,7 +5,7 @@
             <div class="max-w-4xl mx-auto flex items-center justify-between">
                 <div>
                     <h1 class="text-lg font-semibold text-white">{{ session?.team_name }}</h1>
-                    <p class="text-sm text-white/40">{{ session?.display_name }} (Slot {{ session?.slot_number }})</p>
+                    <p class="text-sm text-white/60">{{ session?.display_name }} (Slot {{ session?.slot_number }})</p>
                 </div>
                 <button
                     class="text-sm text-red-400 hover:text-red-300 font-medium transition-colors"
@@ -25,7 +25,7 @@
                     class="px-4 py-3 text-sm font-medium border-b-2 -mb-px transition-colors"
                     :class="activeTab === tab.id
                         ? 'border-emerald-400 text-emerald-400'
-                        : 'border-transparent text-white/40 hover:text-white/60'"
+                        : 'border-transparent text-white/60 hover:text-white/80'"
                     @click="activeTab = tab.id"
                 >
                     {{ tab.label }}
@@ -60,7 +60,7 @@
                             class="hidden"
                             @change="handleFileSelect"
                         />
-                        <p v-if="!uploadPreview" class="text-white/30">
+                        <p v-if="!uploadPreview" class="text-white/50">
                             Click to take a photo or select from gallery
                         </p>
                         <img
@@ -88,11 +88,11 @@
 
             <!-- My Photos Tab -->
             <div v-if="activeTab === 'photos'">
-                <div v-if="photos.length === 0 && !loadingPhotos" class="text-center py-12 text-white/30">
+                <div v-if="photos.length === 0 && !loadingPhotos" class="text-center py-12 text-white/50">
                     No photos yet. Upload your first photo!
                 </div>
 
-                <div v-else-if="loadingPhotos" class="text-center py-12 text-white/30">Loading...</div>
+                <div v-else-if="loadingPhotos" class="text-center py-12 text-white/50">Loading...</div>
 
                 <div v-else class="grid grid-cols-2 sm:grid-cols-3 gap-4">
                     <div
@@ -102,7 +102,7 @@
                     >
                         <div class="aspect-square bg-white/5 relative">
                             <img
-                                :src="`/storage/${photo.filename}`"
+                                :src="resolvePhotoUrl(photo.filename)"
                                 class="w-full h-full object-cover"
                                 alt="Uploaded photo"
                             />
@@ -116,7 +116,7 @@
                             </span>
                         </div>
                         <div class="p-3 space-y-2">
-                            <p class="text-xs text-white/30">{{ formatDate(photo.created_at) }}</p>
+                            <p class="text-xs text-white/50">{{ formatDate(photo.created_at) }}</p>
                             <div class="flex gap-2">
                                 <button
                                     v-if="photo.total_tags === 0"
@@ -140,12 +140,12 @@
 
             <!-- Tag Tab -->
             <div v-if="activeTab === 'tag'">
-                <div v-if="!selectedPhotoId" class="text-center py-12 text-white/30">
+                <div v-if="!selectedPhotoId" class="text-center py-12 text-white/50">
                     Select a photo from "My Photos" to start tagging.
                 </div>
                 <div v-else class="bg-white/5 border border-white/10 rounded-xl p-6">
-                    <p class="text-sm text-white/50 mb-4">Tagging photo #{{ selectedPhotoId }}</p>
-                    <p class="text-white/40 text-sm">
+                    <p class="text-sm text-white/60 mb-4">Tagging photo #{{ selectedPhotoId }}</p>
+                    <p class="text-white/60 text-sm">
                         Use the full tagging interface at
                         <router-link :to="`/tag?photo=${selectedPhotoId}`" class="text-emerald-400 hover:underline">
                             /tag?photo={{ selectedPhotoId }}
@@ -162,6 +162,7 @@ import { ref, computed, onMounted, onUnmounted } from 'vue';
 import { useRouter } from 'vue-router';
 import axios from 'axios';
 import { useToast } from 'vue-toastification';
+import { resolvePhotoUrl } from '@/composables/usePhotoUrl';
 
 const router = useRouter();
 const toast = useToast();
diff --git a/resources/js/views/Teams/TeamApprovalQueue.vue b/resources/js/views/Teams/TeamApprovalQueue.vue
index cf54a850c..96bcdb9fa 100644
--- a/resources/js/views/Teams/TeamApprovalQueue.vue
+++ b/resources/js/views/Teams/TeamApprovalQueue.vue
@@ -28,7 +28,7 @@
         <div v-if="!loading && photos.data.length === 0" class="text-center py-12">
             <div class="text-4xl mb-3">&#10003;</div>
             <p class="text-slate-500 font-medium">All caught up!</p>
-            <p class="text-sm text-slate-400 mt-1">No photos pending approval.</p>
+            <p class="text-sm text-slate-500 mt-1">No photos pending approval.</p>
         </div>
 
         <!-- Photo cards -->
@@ -42,7 +42,7 @@
                 <div class="w-24 h-24 shrink-0 rounded-lg bg-slate-100 overflow-hidden">
                     <img
                         v-if="photo.filename"
-                        :src="`/storage/photos/${photo.filename}`"
+                        :src="resolvePhotoUrl(photo.filename)"
                         class="w-full h-full object-cover"
                         loading="lazy"
                     />
@@ -57,7 +57,7 @@
                                 &middot;
                                 {{ photo.total_tags || 0 }} items
                             </p>
-                            <p class="text-xs text-slate-400 mt-0.5">
+                            <p class="text-xs text-slate-500 mt-0.5">
                                 by {{ photo.user?.name || 'Unknown' }}
                                 &middot;
                                 {{ formatDate(photo.created_at) }}
@@ -98,7 +98,7 @@
                         </span>
                         <span
                             v-if="(photo.photo_tags || []).length > 6"
-                            class="px-2 py-0.5 text-xs bg-slate-100 text-slate-400 rounded"
+                            class="px-2 py-0.5 text-xs bg-slate-100 text-slate-500 rounded"
                         >
                             +{{ photo.photo_tags.length - 6 }} more
                         </span>
@@ -145,6 +145,7 @@
 <script>
 import { ref, computed, onMounted } from 'vue';
 import { useTeamPhotosStore } from '@/stores/teamPhotos';
+import { resolvePhotoUrl } from '@/composables/usePhotoUrl';
 import TeamPhotoEdit from './TeamPhotoEdit.vue';
 
 export default {
@@ -222,7 +223,7 @@ export default {
 
         return {
             photos, stats, loading, approving, editingPhoto, successMessage,
-            approveOne, approveAll, deletePhoto, editPhoto, onEditSaved, onPhotoDeleted, changePage, formatDate,
+            approveOne, approveAll, deletePhoto, editPhoto, onEditSaved, onPhotoDeleted, changePage, formatDate, resolvePhotoUrl,
         };
     },
 };
diff --git a/resources/js/views/Teams/TeamOverview.vue b/resources/js/views/Teams/TeamOverview.vue
index 1c4653873..8b10a23e8 100644
--- a/resources/js/views/Teams/TeamOverview.vue
+++ b/resources/js/views/Teams/TeamOverview.vue
@@ -96,7 +96,7 @@
 
             <!-- Join code block -->
             <div v-if="!team?.participant_sessions_enabled" class="mt-6 pt-5 border-t border-white/10">
-                <p class="text-white/50 text-[11px] font-semibold uppercase tracking-widest mb-2">{{ $t('Your join code') }}</p>
+                <p class="text-white/60 text-[11px] font-semibold uppercase tracking-widest mb-2">{{ $t('Your join code') }}</p>
                 <div class="flex items-center gap-3">
                     <code class="text-lg font-mono font-bold text-white bg-white/5 border border-white/10 px-4 py-2 rounded-lg tracking-wider">
                         {{ team?.identifier }}
@@ -108,24 +108,24 @@
                         {{ $t('Copy') }}
                     </button>
                 </div>
-                <p class="text-white/30 text-xs mt-2">
+                <p class="text-white/50 text-xs mt-2">
                     {{ $t('Share this code with students so they can join your team after creating an account.') }}
                 </p>
             </div>
 
             <!-- Onboarding paths explainer (school teams) -->
             <div v-if="isSchoolTeam && !onboardingDone" class="mt-6 pt-5 border-t border-white/10">
-                <p class="text-white/50 text-[11px] font-semibold uppercase tracking-widest mb-3">{{ $t('Two ways to onboard students') }}</p>
+                <p class="text-white/60 text-[11px] font-semibold uppercase tracking-widest mb-3">{{ $t('Two ways to onboard students') }}</p>
                 <div class="grid grid-cols-1 sm:grid-cols-2 gap-3">
                     <div class="bg-white/5 border border-white/10 rounded-lg p-4">
                         <p class="text-sm font-medium text-white mb-1">{{ $t('Join code') }}</p>
-                        <p class="text-xs text-white/40">
+                        <p class="text-xs text-white/60">
                             {{ $t('Students create their own OpenLitterMap accounts and join your team. Best for older students or ongoing programs.') }}
                         </p>
                     </div>
                     <div class="bg-white/5 border border-white/10 rounded-lg p-4">
                         <p class="text-sm font-medium text-white mb-1">{{ $t('Participant sessions') }}</p>
-                        <p class="text-xs text-white/40">
+                        <p class="text-xs text-white/60">
                             {{ $t('You create numbered slots. Students enter a code — no accounts needed. Best for younger students or one-off workshops.') }}
                         </p>
                         <button
@@ -143,11 +143,11 @@
         <div class="bg-white/5 border border-white/10 rounded-xl p-6">
             <div class="grid grid-cols-1 sm:grid-cols-3 gap-6">
                 <div>
-                    <p class="text-white/50 text-[11px] font-semibold uppercase tracking-widest mb-1">{{ $t('Team Identifier') }}</p>
+                    <p class="text-white/60 text-[11px] font-semibold uppercase tracking-widest mb-1">{{ $t('Team Identifier') }}</p>
                     <div class="flex items-center gap-2">
                         <code class="text-sm font-mono bg-white/5 border border-white/10 px-2 py-1 rounded text-white">{{ team?.identifier }}</code>
                         <button
-                            class="p-1 text-white/30 hover:text-white/60 transition-colors"
+                            class="p-1 text-white/50 hover:text-white/70 transition-colors"
                             :title="$t('Copy identifier')"
                             @click="copyIdentifier"
                         >
@@ -156,14 +156,14 @@
                             </svg>
                         </button>
                     </div>
-                    <p class="text-xs text-white/30 mt-1">{{ $t('Share this code so others can join.') }}</p>
+                    <p class="text-xs text-white/50 mt-1">{{ $t('Share this code so others can join.') }}</p>
                 </div>
                 <div>
-                    <p class="text-white/50 text-[11px] font-semibold uppercase tracking-widest mb-1">{{ $t('Created') }}</p>
+                    <p class="text-white/60 text-[11px] font-semibold uppercase tracking-widest mb-1">{{ $t('Created') }}</p>
                     <p class="text-sm text-white/70">{{ formatDate(team?.created_at) }}</p>
                 </div>
                 <div>
-                    <p class="text-white/50 text-[11px] font-semibold uppercase tracking-widest mb-1">{{ $t('Members') }}</p>
+                    <p class="text-white/60 text-[11px] font-semibold uppercase tracking-widest mb-1">{{ $t('Members') }}</p>
                     <p class="text-sm text-white/70">{{ team?.members ?? 0 }}</p>
                 </div>
             </div>
@@ -185,7 +185,7 @@
                                 {{ $t('Name') }}
                                 <span v-if="sortKey === 'name'" class="ml-0.5">{{ sortAsc ? '↑' : '↓' }}</span>
                             </th>
-                            <th class="px-4 py-3 font-medium text-white/50 text-left text-[11px] uppercase tracking-widest">{{ $t('Type') }}</th>
+                            <th class="px-4 py-3 font-medium text-white/60 text-left text-[11px] uppercase tracking-widest">{{ $t('Type') }}</th>
                             <th
                                 class="px-4 py-3 font-medium text-right text-[11px] uppercase tracking-widest cursor-pointer select-none transition-colors"
                                 :class="sortKey === 'members' ? 'text-emerald-400' : 'text-white/50 hover:text-white/70'"
@@ -241,7 +241,7 @@
                                 >{{ $t('Active') }}</span>
                                 <button
                                     v-else
-                                    class="text-xs text-white/40 hover:text-emerald-400 font-medium transition-colors"
+                                    class="text-xs text-white/60 hover:text-emerald-400 font-medium transition-colors"
                                     @click="$emit('switch-team', t.id)"
                                 >
                                     {{ $t('Switch') }}
diff --git a/resources/js/views/Teams/TeamPhotoEdit.vue b/resources/js/views/Teams/TeamPhotoEdit.vue
index 1051300f4..48c6b8067 100644
--- a/resources/js/views/Teams/TeamPhotoEdit.vue
+++ b/resources/js/views/Teams/TeamPhotoEdit.vue
@@ -18,7 +18,7 @@
                 <div class="aspect-video bg-slate-100 rounded-lg overflow-hidden mb-4">
                     <img
                         v-if="photo.filename"
-                        :src="`/storage/photos/${photo.filename}`"
+                        :src="resolvePhotoUrl(photo.filename)"
                         class="w-full h-full object-contain"
                     />
                 </div>
@@ -130,6 +130,7 @@
 <script>
 import { ref, computed, onMounted } from 'vue';
 import { useTeamPhotosStore } from '@/stores/teamPhotos';
+import { resolvePhotoUrl } from '@/composables/usePhotoUrl';
 
 export default {
     name: 'TeamPhotoEdit',
@@ -220,7 +221,7 @@ export default {
 
         return {
             editTags, saving, deleting, error, canEdit,
-            addTag, removeTag, save, deletePhoto, formatDate,
+            addTag, removeTag, save, deletePhoto, formatDate, resolvePhotoUrl,
         };
     },
 };
diff --git a/resources/js/views/Teams/TeamPhotoList.vue b/resources/js/views/Teams/TeamPhotoList.vue
index c1cddc53d..6e8244398 100644
--- a/resources/js/views/Teams/TeamPhotoList.vue
+++ b/resources/js/views/Teams/TeamPhotoList.vue
@@ -16,12 +16,12 @@
         </div>
 
         <!-- Loading -->
-        <div v-if="loading" class="text-center py-12 text-slate-400">Loading photos...</div>
+        <div v-if="loading" class="text-center py-12 text-slate-500">Loading photos...</div>
 
         <!-- Empty state -->
         <div v-else-if="photos.data.length === 0" class="text-center py-12">
             <p class="text-slate-500">No photos found.</p>
-            <p class="text-sm text-slate-400 mt-1">Upload photos with this team set as active to see them here.</p>
+            <p class="text-sm text-slate-500 mt-1">Upload photos with this team set as active to see them here.</p>
         </div>
 
         <!-- Photo grid -->
@@ -36,7 +36,7 @@
                 <div class="aspect-square bg-slate-100 relative">
                     <img
                         v-if="photo.filename"
-                        :src="`/storage/photos/${photo.filename}`"
+                        :src="resolvePhotoUrl(photo.filename)"
                         :alt="`Photo ${photo.id}`"
                         class="w-full h-full object-cover"
                         loading="lazy"
@@ -68,9 +68,9 @@
                 <div class="p-3">
                     <div class="flex justify-between items-center">
                         <span class="text-sm text-slate-500">{{ photo.photo_tags?.length || 0 }} tags</span>
-                        <span class="text-xs text-slate-400">{{ formatDate(photo.created_at) }}</span>
+                        <span class="text-xs text-slate-500">{{ formatDate(photo.created_at) }}</span>
                     </div>
-                    <p v-if="photo.user" class="text-xs text-slate-400 mt-1 truncate">
+                    <p v-if="photo.user" class="text-xs text-slate-500 mt-1 truncate">
                         by {{ photo.user.name }}
                     </p>
                     <button
@@ -122,6 +122,7 @@
 <script>
 import { ref, computed } from 'vue';
 import { useTeamPhotosStore } from '@/stores/teamPhotos';
+import { resolvePhotoUrl } from '@/composables/usePhotoUrl';
 import TeamPhotoEdit from './TeamPhotoEdit.vue';
 
 const VERIFICATION_LABELS = {
@@ -202,7 +203,7 @@ export default {
         return {
             photos, loading, filter, filters, selectedPhoto,
             setFilter, changePage, openPhoto, onPhotoSaved, onPhotoDeleted, revokePhoto,
-            formatDate, verificationLabel, verificationClass,
+            formatDate, verificationLabel, verificationClass, resolvePhotoUrl,
         };
     },
 };
diff --git a/resources/js/views/Teams/TeamPhotoMap.vue b/resources/js/views/Teams/TeamPhotoMap.vue
index 5f809e575..dd9565f95 100644
--- a/resources/js/views/Teams/TeamPhotoMap.vue
+++ b/resources/js/views/Teams/TeamPhotoMap.vue
@@ -36,6 +36,8 @@
 <script>
 import { ref, computed, watch, onMounted, onUnmounted, nextTick } from 'vue';
 import { useTeamPhotosStore } from '@/stores/teamPhotos';
+import { popupHelper } from '@/views/Maps/helpers/popup.js';
+import { resolvePhotoUrl } from '@/composables/usePhotoUrl';
 
 export default {
     name: 'TeamPhotoMap',
@@ -57,7 +59,7 @@ export default {
         const initMap = () => {
             if (!mapContainer.value || !window.L) return;
 
-            map = window.L.map(mapContainer.value).setView([53.35, -6.26], 7); // Cork/Dublin default
+            map = window.L.map(mapContainer.value).setView([53.35, -6.26], 7);
 
             window.L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
                 attribution: '&copy; OpenStreetMap contributors',
@@ -69,6 +71,33 @@ export default {
             renderMarkers();
         };
 
+        const loadPopupImage = (popupEl, point) => {
+            const img = popupEl?.querySelector('.leaflet-litter-img');
+            if (!img) return;
+
+            if (point.filename) {
+                const url = resolvePhotoUrl(point.filename);
+                img.src = url;
+                img.onload = () => {
+                    img.classList.remove('leaflet-litter-img--hidden');
+                    const wrap = img.closest('.popup-image-wrap');
+                    if (wrap) wrap.classList.remove('popup-image-wrap--loading');
+                };
+                img.style.cursor = 'pointer';
+                img.title = 'View full image';
+                img.onclick = () => window.open(url, '_blank');
+
+                const wrap = img.closest('.popup-image-wrap');
+                if (wrap && !wrap.querySelector('.popup-image-gradient')) {
+                    const gradient = document.createElement('div');
+                    gradient.className = 'popup-image-gradient';
+                    wrap.appendChild(gradient);
+                }
+            } else {
+                popupHelper.showAwaitingVerification(img);
+            }
+        };
+
         const renderMarkers = () => {
             if (!markerGroup) return;
             markerGroup.clearLayers();
@@ -88,13 +117,17 @@ export default {
                     fillOpacity: 0.8,
                 });
 
-                marker.bindPopup(`
-                    <strong>${point.tags} items</strong><br/>
-                    <span style="font-size:12px;color:#64748b">${point.date}</span><br/>
-                    <span style="font-size:11px;color:${point.is_public ? '#22c55e' : '#f59e0b'}">
-                        ${point.is_public ? 'Published' : 'Pending'}
-                    </span>
-                `);
+                marker.on('click', () => {
+                    const content = popupHelper.getContent(point);
+
+                    const popup = window.L.popup(popupHelper.popupOptions)
+                        .setLatLng([point.lat, point.lng])
+                        .setContent(content)
+                        .openOn(map);
+
+                    // Load image directly (not via signed-url — pending team photos are is_public=false)
+                    loadPopupImage(popup.getElement(), point);
+                });
 
                 markerGroup.addLayer(marker);
             });
diff --git a/resources/js/views/Teams/TeamSettingsTab.vue b/resources/js/views/Teams/TeamSettingsTab.vue
index 137d00d40..1d3f7e63e 100644
--- a/resources/js/views/Teams/TeamSettingsTab.vue
+++ b/resources/js/views/Teams/TeamSettingsTab.vue
@@ -2,7 +2,7 @@
     <div class="space-y-8 max-w-3xl">
         <!-- Edit Team (leader only) -->
         <section v-if="isLeader" class="bg-white/5 border border-white/10 rounded-xl p-6">
-            <h2 class="text-white/50 text-[11px] font-semibold uppercase tracking-widest mb-4">{{ $t('Team Details') }}</h2>
+            <h2 class="text-white/60 text-[11px] font-semibold uppercase tracking-widest mb-4">{{ $t('Team Details') }}</h2>
 
             <div class="space-y-4">
                 <SettingsField
@@ -21,14 +21,14 @@
 
         <!-- Privacy & Safeguarding (school teams) -->
         <section v-if="isSchoolTeam" class="bg-white/5 border border-white/10 rounded-xl p-6">
-            <h2 class="text-white/50 text-[11px] font-semibold uppercase tracking-widest mb-4">{{ $t('Privacy & Safeguarding') }}</h2>
+            <h2 class="text-white/60 text-[11px] font-semibold uppercase tracking-widest mb-4">{{ $t('Privacy & Safeguarding') }}</h2>
 
             <div class="space-y-4">
                 <!-- Safeguarding is always on for school teams — informational -->
                 <div class="flex items-center justify-between gap-4 py-1">
                     <div>
                         <div class="text-white text-sm">{{ $t('Mask student identities') }}</div>
-                        <div class="text-white/30 text-xs">{{ $t('Student names and usernames are never visible. All contributions attributed to the school.') }}</div>
+                        <div class="text-white/50 text-xs">{{ $t('Student names and usernames are never visible. All contributions attributed to the school.') }}</div>
                     </div>
                     <div class="relative w-11 h-6 rounded-full bg-emerald-500 opacity-60 cursor-not-allowed">
                         <span class="absolute top-0.5 left-0.5 w-5 h-5 bg-white rounded-full translate-x-5"></span>
@@ -48,13 +48,13 @@
 
         <!-- Privacy Settings (community teams only) -->
         <section v-if="!isSchoolTeam" class="bg-white/5 border border-white/10 rounded-xl p-6">
-            <h2 class="text-white/50 text-[11px] font-semibold uppercase tracking-widest mb-4">{{ $t('Privacy') }}</h2>
-            <p class="text-sm text-white/30 mb-4">
+            <h2 class="text-white/60 text-[11px] font-semibold uppercase tracking-widest mb-4">{{ $t('Privacy') }}</h2>
+            <p class="text-sm text-white/50 mb-4">
                 {{ $t('Control how your name and username appear on this team\'s maps and leaderboards.') }}
             </p>
 
             <div v-if="privacyTeam" class="space-y-3">
-                <p class="text-white/50 text-[11px] font-semibold uppercase tracking-widest">{{ $t('Team Map') }}</p>
+                <p class="text-white/60 text-[11px] font-semibold uppercase tracking-widest">{{ $t('Team Map') }}</p>
                 <label class="flex items-center gap-2 cursor-pointer">
                     <input type="checkbox" v-model="privacy.show_name_maps" class="rounded bg-white/5 border-white/20 text-emerald-500 focus:ring-emerald-500" />
                     <span class="text-sm text-white/70">{{ $t('Show my name') }}</span>
@@ -71,7 +71,7 @@
                     {{ $t("You won't appear on the team map.") }}
                 </p>
 
-                <p class="text-white/50 text-[11px] font-semibold uppercase tracking-widest mt-4">{{ $t('Team Leaderboard') }}</p>
+                <p class="text-white/60 text-[11px] font-semibold uppercase tracking-widest mt-4">{{ $t('Team Leaderboard') }}</p>
                 <label class="flex items-center gap-2 cursor-pointer">
                     <input type="checkbox" v-model="privacy.show_name_leaderboards" class="rounded bg-white/5 border-white/20 text-emerald-500 focus:ring-emerald-500" />
                     <span class="text-sm text-white/70">{{ $t('Show my name') }}</span>
@@ -103,7 +103,7 @@
 
         <!-- Visibility & Data (leader only) -->
         <section v-if="isLeader" class="bg-white/5 border border-white/10 rounded-xl p-6">
-            <h2 class="text-white/50 text-[11px] font-semibold uppercase tracking-widest mb-4">{{ $t('Visibility & Data') }}</h2>
+            <h2 class="text-white/60 text-[11px] font-semibold uppercase tracking-widest mb-4">{{ $t('Visibility & Data') }}</h2>
 
             <div class="space-y-4">
                 <SettingsToggle
@@ -116,7 +116,7 @@
                 <div class="flex items-center justify-between pt-4 border-t border-white/10">
                     <div>
                         <p class="text-sm text-white">{{ $t('Download team data') }}</p>
-                        <p class="text-xs text-white/30">{{ $t('Export all team photo data as CSV.') }}</p>
+                        <p class="text-xs text-white/50">{{ $t('Export all team photo data as CSV.') }}</p>
                     </div>
                     <button
                         class="px-3 py-1.5 text-sm font-medium rounded-lg border border-white/20 text-white/60 hover:bg-white/5 transition-colors"
@@ -135,7 +135,7 @@
             <div class="flex items-center justify-between">
                 <div>
                     <p class="text-sm text-white">{{ $t('Leave this team') }}</p>
-                    <p class="text-xs text-white/30">
+                    <p class="text-xs text-white/50">
                         {{ team?.members <= 1
                             ? $t('You are the only member — leaving will leave the team empty.')
                             : $t('Your uploads will remain attributed to this team.')
diff --git a/resources/js/views/Teams/TeamsHub.vue b/resources/js/views/Teams/TeamsHub.vue
index 007224b91..d96178d36 100644
--- a/resources/js/views/Teams/TeamsHub.vue
+++ b/resources/js/views/Teams/TeamsHub.vue
@@ -18,7 +18,7 @@
         <!-- State 1: No teams -->
         <div v-else-if="!hasTeams" class="relative max-w-xl mx-auto py-16 px-4">
             <h1 class="text-3xl font-bold text-white mb-2">{{ $t('Teams') }}</h1>
-            <p class="text-white/50 mb-8">
+            <p class="text-white/60 mb-8">
                 {{ $t('Join a team to contribute together, or create your own.') }}
             </p>
 
@@ -28,7 +28,7 @@
                 class="bg-emerald-500/10 border border-emerald-500/20 rounded-xl p-5 mb-6"
             >
                 <h3 class="text-white font-semibold text-sm mb-1">{{ $t('Before you create your team, try OpenLitterMap yourself.') }}</h3>
-                <p class="text-white/40 text-sm mb-3">
+                <p class="text-white/60 text-sm mb-3">
                     {{ $t('Go for a short walk, photograph some litter, upload it, and tag it. This takes about 30 minutes and you\'ll understand exactly what your students will do.') }}
                 </p>
                 <router-link
@@ -43,7 +43,7 @@
                 <!-- Join -->
                 <div class="bg-white/5 border border-white/10 rounded-xl p-6">
                     <h2 class="text-lg font-semibold text-white mb-1">{{ $t('Join a Team') }}</h2>
-                    <p class="text-sm text-white/40 mb-4">
+                    <p class="text-sm text-white/60 mb-4">
                         {{ $t('Enter the team identifier shared by your team leader.') }}
                     </p>
                     <form class="space-y-3" @submit.prevent="submitJoin">
@@ -52,7 +52,7 @@
                             type="text"
                             required
                             :placeholder="$t('e.g. Awesome2026')"
-                            class="w-full bg-white/5 border border-white/20 rounded-lg px-3 py-2 text-sm text-white placeholder-white/30 focus:border-emerald-500/50 focus:outline-none"
+                            class="w-full bg-white/5 border border-white/20 rounded-lg px-3 py-2 text-sm text-white placeholder-white/50 focus:border-emerald-500/50 focus:outline-none"
                             :class="joinErrors.identifier ? 'border-red-500/50' : ''"
                             @input="teamsStore.clearError('identifier')"
                         />
@@ -75,7 +75,7 @@
                 <!-- Create -->
                 <div class="bg-white/5 border border-white/10 rounded-xl p-6 flex flex-col">
                     <h2 class="text-lg font-semibold text-white mb-1">{{ $t('Create a Team') }}</h2>
-                    <p class="text-sm text-white/40 mb-4 flex-1">
+                    <p class="text-sm text-white/60 mb-4 flex-1">
                         {{ $t('Start a new team for your school or community.') }}
                     </p>
                     <router-link
@@ -217,7 +217,7 @@
                             v-model="joinIdentifier"
                             type="text"
                             :placeholder="$t('Team identifier...')"
-                            class="flex-1 bg-white/5 border border-white/20 rounded-lg px-3 py-2 text-sm text-white placeholder-white/30 focus:border-emerald-500/50 focus:outline-none"
+                            class="flex-1 bg-white/5 border border-white/20 rounded-lg px-3 py-2 text-sm text-white placeholder-white/50 focus:border-emerald-500/50 focus:outline-none"
                             @input="teamsStore.clearError('identifier')"
                             @keyup.enter="submitJoin"
                         />
@@ -231,7 +231,7 @@
                         >
                             {{ joinProcessing ? $t('Joining...') : $t('Join') }}
                         </button>
-                        <button class="px-2 py-2 text-white/30 hover:text-white/50" @click="showJoinForm = false">
+                        <button class="px-2 py-2 text-white/50 hover:text-white/70" @click="showJoinForm = false">
                             <svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                 <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
                             </svg>
@@ -267,7 +267,7 @@
                                     {{ isSchoolTeam ? $t('School') : $t('Community') }}
                                 </span>
                             </div>
-                            <p v-if="isSchoolTeam && (team?.class_group || team?.academic_year)" class="text-sm text-white/40 mt-0.5">
+                            <p v-if="isSchoolTeam && (team?.class_group || team?.academic_year)" class="text-sm text-white/60 mt-0.5">
                                 <span v-if="team?.class_group">{{ team.class_group }}</span>
                                 <span v-if="team?.class_group && team?.academic_year"> — </span>
                                 <span v-if="team?.academic_year">{{ team.academic_year }}</span>
@@ -301,15 +301,15 @@
                     <!-- Stats row -->
                     <div class="grid grid-cols-2 md:grid-cols-4 gap-4 mt-4">
                         <div class="bg-white/5 border border-white/10 rounded-xl px-5 py-4">
-                            <div class="text-white/50 text-[11px] font-semibold uppercase tracking-widest mb-1">{{ $t('Photos') }}</div>
+                            <div class="text-white/60 text-[11px] font-semibold uppercase tracking-widest mb-1">{{ $t('Photos') }}</div>
                             <div class="text-white text-2xl font-bold tabular-nums tracking-tight">{{ dashboard.photos_count }}</div>
                         </div>
                         <div class="bg-white/5 border border-white/10 rounded-xl px-5 py-4">
-                            <div class="text-white/50 text-[11px] font-semibold uppercase tracking-widest mb-1">{{ $t('Litter Tagged') }}</div>
+                            <div class="text-white/60 text-[11px] font-semibold uppercase tracking-widest mb-1">{{ $t('Litter Tagged') }}</div>
                             <div class="text-white text-2xl font-bold tabular-nums tracking-tight">{{ dashboard.litter_count }}</div>
                         </div>
                         <div class="bg-white/5 border border-white/10 rounded-xl px-5 py-4">
-                            <div class="text-white/50 text-[11px] font-semibold uppercase tracking-widest mb-1">{{ $t('Members') }}</div>
+                            <div class="text-white/60 text-[11px] font-semibold uppercase tracking-widest mb-1">{{ $t('Members') }}</div>
                             <div class="text-white text-2xl font-bold tabular-nums tracking-tight">{{ dashboard.members_count }}</div>
                         </div>
                         <div
@@ -319,7 +319,7 @@
                                 : 'border-white/10'"
                             @click="isSchoolTeam && photoStats.pending > 0 && setTab('approval')"
                         >
-                            <div class="text-white/50 text-[11px] font-semibold uppercase tracking-widest mb-1">
+                            <div class="text-white/60 text-[11px] font-semibold uppercase tracking-widest mb-1">
                                 {{ isSchoolTeam ? $t('Pending') : $t('Approved') }}
                             </div>
                             <div
diff --git a/resources/js/views/Teams/TeamsLeaderboard.vue b/resources/js/views/Teams/TeamsLeaderboard.vue
index 497b206a2..df3cf438c 100644
--- a/resources/js/views/Teams/TeamsLeaderboard.vue
+++ b/resources/js/views/Teams/TeamsLeaderboard.vue
@@ -1,13 +1,13 @@
 <template>
     <div>
-        <h1 class="text-2xl font-bold text-slate-800 mb-6">Teams Leaderboard</h1>
+        <h1 class="text-2xl font-bold text-white mb-6">Teams Leaderboard</h1>
 
-        <p v-if="loading" class="text-slate-500">Loading leaderboard...</p>
+        <p v-if="loading" class="text-white/60">Loading leaderboard...</p>
 
         <template v-else>
-            <div class="bg-white rounded-xl shadow-sm overflow-x-auto">
+            <div class="bg-white/5 border border-white/10 rounded-xl overflow-x-auto">
                 <table class="w-full text-sm">
-                    <thead class="bg-slate-50 text-slate-600 text-left">
+                    <thead class="border-b border-white/10 text-white/60 text-left">
                         <tr>
                             <th class="px-4 py-3 font-medium text-center w-16">#</th>
                             <th class="px-4 py-3 font-medium">Team</th>
@@ -16,11 +16,11 @@
                             <th class="px-4 py-3 font-medium text-right">Created</th>
                         </tr>
                     </thead>
-                    <tbody class="divide-y divide-slate-100">
+                    <tbody class="divide-y divide-white/5">
                         <tr
                             v-for="(team, i) in teams"
                             :key="team.id"
-                            class="hover:bg-slate-50"
+                            class="hover:bg-white/[0.03]"
                         >
                             <td class="px-4 py-3 text-center font-medium"
                                 :class="{
@@ -32,24 +32,24 @@
                             >
                                 {{ rank(i) }}
                             </td>
-                            <td class="px-4 py-3 font-medium">{{ team.name }}</td>
-                            <td class="px-4 py-3 text-right tabular-nums">{{ team.total_tags?.toLocaleString() }}</td>
-                            <td class="px-4 py-3 text-right tabular-nums">{{ team.total_photos?.toLocaleString() }}</td>
-                            <td class="px-4 py-3 text-right text-slate-500 text-xs">
+                            <td class="px-4 py-3 font-medium text-white">{{ team.name }}</td>
+                            <td class="px-4 py-3 text-right tabular-nums text-white/70">{{ team.total_tags?.toLocaleString() }}</td>
+                            <td class="px-4 py-3 text-right tabular-nums text-white/70">{{ team.total_photos?.toLocaleString() }}</td>
+                            <td class="px-4 py-3 text-right text-white/50 text-xs">
                                 {{ formatDate(team.created_at) }}
                             </td>
                         </tr>
                     </tbody>
                 </table>
 
-                <p v-if="!teams.length" class="p-6 text-center text-slate-400">
+                <p v-if="!teams.length" class="p-6 text-center text-white/50">
                     No teams on the leaderboard yet.
                 </p>
             </div>
 
             <!-- Pagination -->
             <div v-if="lastPage > 1" class="flex items-center justify-between mt-4">
-                <p class="text-sm text-slate-500">
+                <p class="text-sm text-white/50">
                     {{ total }} {{ total === 1 ? 'team' : 'teams' }}
                 </p>
                 <div class="flex gap-1">
@@ -58,8 +58,8 @@
                         :key="p"
                         class="px-3 py-1 rounded text-sm font-medium transition-colors"
                         :class="p === currentPage
-                            ? 'bg-blue-600 text-white'
-                            : 'bg-white text-slate-600 hover:bg-slate-100 border border-slate-200'"
+                            ? 'bg-emerald-500 text-white'
+                            : 'bg-white/5 text-white/60 hover:bg-white/10 border border-white/10'"
                         @click="goToPage(p)"
                     >
                         {{ p }}
diff --git a/resources/js/views/Teams/components/FacilitatorQueueFilters.vue b/resources/js/views/Teams/components/FacilitatorQueueFilters.vue
index bf4dc1c19..0f54aaaee 100644
--- a/resources/js/views/Teams/components/FacilitatorQueueFilters.vue
+++ b/resources/js/views/Teams/components/FacilitatorQueueFilters.vue
@@ -4,7 +4,7 @@
 
         <!-- Status -->
         <div>
-            <label class="text-xs text-gray-400 block mb-1.5">Status</label>
+            <label class="text-xs text-gray-300 block mb-1.5">Status</label>
             <div class="space-y-1">
                 <button
                     v-for="opt in statusOptions"
@@ -22,7 +22,7 @@
 
         <!-- Date range -->
         <div>
-            <label class="text-xs text-gray-400 block mb-1.5">Date From</label>
+            <label class="text-xs text-gray-300 block mb-1.5">Date From</label>
             <input
                 type="date"
                 :value="dateFrom"
@@ -32,7 +32,7 @@
         </div>
 
         <div>
-            <label class="text-xs text-gray-400 block mb-1.5">Date To</label>
+            <label class="text-xs text-gray-300 block mb-1.5">Date To</label>
             <input
                 type="date"
                 :value="dateTo"
@@ -44,7 +44,7 @@
         <!-- Reset -->
         <button
             @click="$emit('reset')"
-            class="w-full px-3 py-1.5 text-sm text-gray-400 hover:text-white border border-gray-600 rounded hover:border-gray-500 transition-colors"
+            class="w-full px-3 py-1.5 text-sm text-gray-300 hover:text-white border border-gray-600 rounded hover:border-gray-500 transition-colors"
         >
             Reset Filters
         </button>
diff --git a/resources/js/views/Teams/components/FacilitatorQueueHeader.vue b/resources/js/views/Teams/components/FacilitatorQueueHeader.vue
index 72ceb7679..0efd9238b 100644
--- a/resources/js/views/Teams/components/FacilitatorQueueHeader.vue
+++ b/resources/js/views/Teams/components/FacilitatorQueueHeader.vue
@@ -4,10 +4,10 @@
         <div class="flex items-center gap-4">
             <div class="text-sm">
                 <span class="text-yellow-400 font-semibold">{{ pendingCount }}</span>
-                <span class="text-gray-400"> pending</span>
+                <span class="text-gray-300"> pending</span>
             </div>
 
-            <div v-if="photo" class="flex items-center gap-3 text-sm text-gray-400">
+            <div v-if="photo" class="flex items-center gap-3 text-sm text-gray-300">
                 <span>
                     Photo <span class="text-white font-mono">#{{ photo.id }}</span>
                 </span>
@@ -27,7 +27,7 @@
             >
                 <span class="hidden sm:inline text-gray-500 text-xs mr-1">J</span> Prev
             </button>
-            <span class="text-gray-400 text-sm">
+            <span class="text-gray-300 text-sm">
                 {{ currentIndex + 1 }} / {{ totalOnPage }}
             </span>
             <button
diff --git a/resources/js/views/Teams/components/ParticipantGrid.vue b/resources/js/views/Teams/components/ParticipantGrid.vue
index d3be2fa98..46e08fd3d 100644
--- a/resources/js/views/Teams/components/ParticipantGrid.vue
+++ b/resources/js/views/Teams/components/ParticipantGrid.vue
@@ -3,7 +3,7 @@
         <p v-if="error" class="text-red-500 text-sm mb-4">{{ error }}</p>
 
         <!-- Loading -->
-        <div v-if="loading" class="text-center py-12 text-white/40">{{ $t('Loading...') }}</div>
+        <div v-if="loading" class="text-center py-12 text-white/60">{{ $t('Loading...') }}</div>
 
         <!-- Empty state with guided setup -->
         <div v-else-if="participants.length === 0" class="max-w-lg mx-auto py-8">
@@ -12,12 +12,12 @@
                     <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z" />
                 </svg>
                 <h3 class="text-lg font-semibold text-white mb-2">{{ $t('Create participant slots') }}</h3>
-                <p class="text-sm text-white/40 mb-6">
+                <p class="text-sm text-white/60 mb-6">
                     {{ $t('Each slot gets a unique session code that a student enters to start uploading photos. No accounts needed.') }}
                 </p>
 
                 <div class="flex items-center justify-center gap-3">
-                    <label class="text-sm text-white/50">{{ $t('How many students?') }}</label>
+                    <label class="text-sm text-white/60">{{ $t('How many students?') }}</label>
                     <input
                         v-model.number="slotCount"
                         type="number"
@@ -80,7 +80,7 @@
                 >
                     <div class="flex items-center justify-between mb-3">
                         <div>
-                            <span class="text-xs font-mono text-white/30">Slot {{ p.slot_number }}</span>
+                            <span class="text-xs font-mono text-white/50">Slot {{ p.slot_number }}</span>
                             <h3 class="font-medium text-white">{{ p.display_name }}</h3>
                         </div>
                         <span
@@ -93,14 +93,14 @@
                         </span>
                     </div>
 
-                    <div class="text-sm text-white/40 space-y-1 mb-3">
+                    <div class="text-sm text-white/60 space-y-1 mb-3">
                         <p>{{ $t('Photos') }}: {{ p.photo_count ?? 0 }}</p>
                         <p v-if="p.last_active_at">{{ $t('Last active') }}: {{ formatDate(p.last_active_at) }}</p>
                     </div>
 
                     <!-- Token display (only after create/reset) -->
                     <div v-if="revealedTokens[p.id]" class="mb-3">
-                        <p class="text-xs text-white/30 mb-1">{{ $t('Session Code') }}:</p>
+                        <p class="text-xs text-white/50 mb-1">{{ $t('Session Code') }}:</p>
                         <div class="flex items-center gap-2">
                             <code class="text-xs bg-white/5 border border-white/10 px-2 py-1 rounded font-mono break-all flex-1 text-white/70">
                                 {{ revealedTokens[p.id] }}
diff --git a/resources/js/views/Teams/components/TeamMembersList.vue b/resources/js/views/Teams/components/TeamMembersList.vue
index db84d7e50..eb8f09361 100644
--- a/resources/js/views/Teams/components/TeamMembersList.vue
+++ b/resources/js/views/Teams/components/TeamMembersList.vue
@@ -1,6 +1,6 @@
 <template>
     <div>
-        <div v-if="photosStore.memberStats.length === 0" class="text-center py-12 text-slate-400">
+        <div v-if="photosStore.memberStats.length === 0" class="text-center py-12 text-slate-500">
             No members found.
         </div>
 
@@ -24,7 +24,7 @@
                     >
                         <td class="px-4 py-3">
                             <div class="font-medium text-slate-800">{{ member.name }}</div>
-                            <div v-if="member.username" class="text-xs text-slate-400">
+                            <div v-if="member.username" class="text-xs text-slate-500">
                                 @{{ member.username }}
                             </div>
                         </td>
@@ -33,7 +33,7 @@
                         </td>
                         <td class="px-4 py-3 text-right text-sm">
                             <span
-                                :class="member.pending > 0 ? 'text-amber-600 font-semibold' : 'text-slate-400'"
+                                :class="member.pending > 0 ? 'text-amber-600 font-semibold' : 'text-slate-500'"
                             >
                                 {{ member.pending }}
                             </span>
diff --git a/resources/js/views/User/Uploads/PhotoPreview.vue b/resources/js/views/User/Uploads/PhotoPreview.vue
index 95debb8f5..aba500f6c 100644
--- a/resources/js/views/User/Uploads/PhotoPreview.vue
+++ b/resources/js/views/User/Uploads/PhotoPreview.vue
@@ -21,6 +21,7 @@
 
 <script setup>
 import { ref, computed } from 'vue';
+import { resolvePhotoUrl } from '@/composables/usePhotoUrl';
 
 const props = defineProps({
     filename: {
@@ -36,16 +37,7 @@ const props = defineProps({
 const imageError = ref(false);
 const imageLoaded = ref(false);
 
-// Construct full image URL
-const imageSrc = computed(() => {
-    // If it's already a full URL, use it as is
-    if (props.filename.startsWith('http')) {
-        return props.filename;
-    }
-    // Otherwise, prepend the base URL (adjust this to match your setup)
-    // You might need to use an environment variable or config here
-    return `${window.location.origin}${props.filename}`;
-});
+const imageSrc = computed(() => resolvePhotoUrl(props.filename));
 
 const fileName = computed(() => {
     if (!props.filename) return 'No filename';
diff --git a/resources/js/views/User/Uploads/Uploads.vue b/resources/js/views/User/Uploads/Uploads.vue
index b95d4c92b..74b63df23 100644
--- a/resources/js/views/User/Uploads/Uploads.vue
+++ b/resources/js/views/User/Uploads/Uploads.vue
@@ -21,7 +21,7 @@
             >
                 <!-- Photo Thumbnail -->
                 <div class="relative h-44 bg-gray-100">
-                    <img :src="photo.filename" :alt="`Photo ${photo.id}`" class="w-full h-full object-cover" />
+                    <img :src="resolvePhotoUrl(photo.filename)" :alt="`Photo ${photo.id}`" class="w-full h-full object-cover" />
 
                     <!-- Untagged badge -->
                     <span
@@ -197,6 +197,7 @@ import { ref, computed } from 'vue';
 import { useRouter } from 'vue-router';
 import axios from 'axios';
 import { usePhotosStore } from '@/stores/photos';
+import { resolvePhotoUrl } from '@/composables/usePhotoUrl';
 import UploadTags from './UploadTags.vue';
 import UploadsHeader from './components/UploadsHeader.vue';
 import UploadsPagination from './components/UploadsPagination.vue';