Upgrade dashboard: Flux UI, route restructuring, developer settings

- Change all /customer routes to /dashboard prefix
- Add developer settings page with display name and Stripe status
- Add plugin status tabs (Pending, Rejected, Approved)
- Move rejection reason/resubmit to top of plugin edit screen
- Upgrade auth pages to use Flux components with new auth layout
- Restructure sidebar: rename Developer Hub to Hub, add Discord link
- Show only approved paid plugins on developer hub
- Move session messages to top of dashboard

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

Author: simonhamp

app/Livewire/Customer/Developer/Dashboard.php

@@ -35,7 +35,11 @@ public function developerAccount()
     #[Computed]
     public function plugins(): Collection
     {
-        return auth()->user()->plugins()->withCount('licenses')->get();
+        return auth()->user()->plugins()
+            ->where('status', \App\Enums\PluginStatus::Approved)
+            ->where('type', \App\Enums\PluginType::Paid)
+            ->withCount('licenses')
+            ->get();
     }
 
     #[Computed]

app/Livewire/Customer/Developer/Onboarding.php

@@ -17,7 +17,6 @@ public function mount(): void
 
         if ($developerAccount && $developerAccount->hasCompletedOnboarding()) {
             $this->redirect(route('customer.developer.dashboard'), navigate: true);
-            session()->flash('message', 'Your developer account is already set up.');
         }
     }
 

app/Livewire/Customer/Developer/Settings.php

@@ -0,0 +1,40 @@
+<?php
+
+namespace App\Livewire\Customer\Developer;
+
+use App\Models\DeveloperAccount;
+use Livewire\Attributes\Computed;
+use Livewire\Attributes\Layout;
+use Livewire\Attributes\Title;
+use Livewire\Attributes\Validate;
+use Livewire\Component;
+
+#[Layout('components.layouts.dashboard')]
+#[Title('Developer Settings')]
+class Settings extends Component
+{
+    #[Validate('nullable|string|max:255')]
+    public ?string $displayName = null;
+
+    public function mount(): void
+    {
+        $this->displayName = auth()->user()->display_name;
+    }
+
+    #[Computed]
+    public function developerAccount(): ?DeveloperAccount
+    {
+        return auth()->user()->developerAccount;
+    }
+
+    public function updateDisplayName(): void
+    {
+        $this->validate();
+
+        auth()->user()->update([
+            'display_name' => $this->displayName ?: null,
+        ]);
+
+        session()->flash('success', 'Display name updated successfully!');
+    }
+}

app/Livewire/Customer/Plugins/Index.php

@@ -2,31 +2,46 @@
 
 namespace App\Livewire\Customer\Plugins;
 
+use App\Enums\PluginStatus;
 use App\Models\DeveloperAccount;
-use App\Models\Plugin;
+
 use Illuminate\Database\Eloquent\Collection;
 use Livewire\Attributes\Computed;
 use Livewire\Attributes\Layout;
 use Livewire\Attributes\Title;
-use Livewire\Attributes\Validate;
+use Livewire\Attributes\Url;
 use Livewire\Component;
 
 #[Layout('components.layouts.dashboard')]
 #[Title('Your Plugins')]
 class Index extends Component
 {
-    #[Validate('nullable|string|max:255')]
-    public ?string $displayName = null;
+    #[Url]
+    public string $status = 'pending';
 
-    public function mount(): void
+    #[Computed]
+    public function plugins(): Collection
     {
-        $this->displayName = auth()->user()->display_name;
+        return auth()->user()->plugins()
+            ->where('status', $this->status)
+            ->orderBy('created_at', 'desc')
+            ->get();
     }
 
     #[Computed]
-    public function plugins(): Collection
+    public function pluginCounts(): array
     {
-        return auth()->user()->plugins()->orderBy('created_at', 'desc')->get();
+        $counts = auth()->user()->plugins()
+            ->selectRaw('status, count(*) as count')
+            ->groupBy('status')
+            ->pluck('count', 'status')
+            ->toArray();
+
+        return [
+            PluginStatus::Approved->value => $counts[PluginStatus::Approved->value] ?? 0,
+            PluginStatus::Pending->value => $counts[PluginStatus::Pending->value] ?? 0,
+            PluginStatus::Rejected->value => $counts[PluginStatus::Rejected->value] ?? 0,
+        ];
     }
 
     #[Computed]
@@ -35,36 +50,6 @@ public function developerAccount(): ?DeveloperAccount
         return auth()->user()->developerAccount;
     }
 
-    public function updateDisplayName(): void
-    {
-        $this->validate();
-
-        auth()->user()->update([
-            'display_name' => $this->displayName ?: null,
-        ]);
-
-        session()->flash('success', 'Display name updated successfully!');
-    }
-
-    public function resubmitPlugin(int $pluginId): void
-    {
-        $plugin = Plugin::findOrFail($pluginId);
-
-        if ($plugin->user_id !== auth()->id()) {
-            abort(403);
-        }
-
-        if (! $plugin->isRejected()) {
-            session()->flash('error', 'Only rejected plugins can be resubmitted.');
-
-            return;
-        }
-
-        $plugin->resubmit();
-
-        session()->flash('success', 'Your plugin has been resubmitted for review!');
-    }
-
     public function render()
     {
         return view('livewire.customer.plugins.index');

resources/views/auth/forgot-password.blade.php

@@ -1,55 +1,28 @@
-<x-layout title="Reset Password">
-    <div class="min-h-screen flex items-center justify-center py-12 px-4 sm:px-6 lg:px-8">
-        <div class="max-w-md w-full space-y-8">
-            <div>
-                <h2 class="mt-6 text-center text-3xl font-extrabold text-gray-900 dark:text-white">
-                    Reset your password
-                </h2>
-                <p class="mt-2 text-center text-sm text-gray-600 dark:text-gray-400">
-                    Enter your email address and we'll send you a link to reset your password.
-                </p>
-            </div>
+<x-layouts.auth title="Reset Password">
+    <flux:heading size="xl" class="text-center">Reset your password</flux:heading>
+    <flux:text class="mt-2 text-center">
+        Enter your email address and we'll send you a link to reset your password.
+    </flux:text>
 
-            @if (session('status'))
-                <div class="bg-green-100 dark:bg-green-800 border border-green-400 text-green-700 dark:text-green-100 px-4 py-3 rounded">
-                    {{ session('status') }}
-                </div>
-            @endif
+    @if (session('status'))
+        <flux:callout variant="success" icon="check-circle" class="mt-6">
+            <flux:callout.text>{{ session('status') }}</flux:callout.text>
+        </flux:callout>
+    @endif
 
-            <form class="mt-8 space-y-6" action="{{ route('password.email') }}" method="POST">
-                @csrf
-                
-                <div>
-                    <label for="email" class="block text-sm font-medium text-gray-700 dark:text-gray-300">
-                        Email address
-                    </label>
-                    <input 
-                        id="email" 
-                        name="email" 
-                        type="email" 
-                        autocomplete="email" 
-                        required 
-                        value="{{ old('email') }}"
-                        class="mt-1 appearance-none relative block w-full px-3 py-2 border @error('email') border-red-300 @else border-gray-300 @enderror dark:border-gray-600 placeholder-gray-500 dark:placeholder-gray-400 text-gray-900 dark:text-white dark:bg-gray-800 rounded-md focus:outline-none focus:ring-blue-500 focus:border-blue-500 focus:z-10 sm:text-sm" 
-                        placeholder="Enter your email address"
-                    >
-                    @error('email')
-                        <p class="mt-1 text-sm text-red-600 dark:text-red-400">{{ $message }}</p>
-                    @enderror
-                </div>
+    <form action="{{ route('password.email') }}" method="POST" class="mt-8 space-y-6">
+        @csrf
 
-                <div>
-                    <button type="submit" class="group relative w-full flex justify-center py-2 px-4 border border-transparent text-sm font-medium rounded-md text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 dark:focus:ring-offset-gray-900">
-                        Send Password Reset Link
-                    </button>
-                </div>
+        <flux:field>
+            <flux:label>Email address</flux:label>
+            <flux:input name="email" type="email" autocomplete="email" required value="{{ old('email') }}" placeholder="Enter your email address" :invalid="$errors->has('email')" />
+            <flux:error name="email" />
+        </flux:field>
 
-                <div class="text-center">
-                    <a href="{{ route('customer.login') }}" class="font-medium text-blue-600 hover:text-blue-500 dark:text-blue-400 dark:hover:text-blue-300">
-                        Back to login
-                    </a>
-                </div>
-            </form>
+        <flux:button type="submit" variant="primary" class="w-full">Send Password Reset Link</flux:button>
+
+        <div class="text-center">
+            <flux:link href="{{ route('customer.login') }}">Back to login</flux:link>
         </div>
-    </div>
-</x-layout>
+    </form>
+</x-layouts.auth>

resources/views/auth/login.blade.php

@@ -1,112 +1,53 @@
-<x-layout title="Customer Login">
-    <div class="min-h-screen flex items-center justify-center py-12 px-4 sm:px-6 lg:px-8">
-        <div class="max-w-md w-full space-y-8">
-            <div>
-                <h2 class="mt-6 text-center text-3xl font-extrabold text-gray-900 dark:text-white">
-                    Sign in to your account
-                </h2>
-                <p class="mt-2 text-center text-sm text-gray-600 dark:text-gray-400">
-                    Or
-                    <a href="{{ route('customer.register') }}" class="font-medium text-blue-600 hover:text-blue-500 dark:text-blue-400 dark:hover:text-blue-300">
-                        create a new account
-                    </a>
-                </p>
+<x-layouts.auth title="Sign In">
+    <flux:heading size="xl" class="text-center">Sign in to your account</flux:heading>
+    <flux:text class="mt-2 text-center">
+        Or <flux:link href="{{ route('customer.register') }}">create a new account</flux:link>
+    </flux:text>
+
+    @if (session('status'))
+        <flux:callout variant="success" icon="check-circle" class="mt-6">
+            <flux:callout.text>{{ session('status') }}</flux:callout.text>
+        </flux:callout>
+    @endif
+
+    @if (session('message'))
+        <flux:callout variant="secondary" icon="information-circle" class="mt-6">
+            <flux:callout.text>{{ session('message') }}</flux:callout.text>
+        </flux:callout>
+    @endif
+
+    <form action="{{ route('customer.login') }}" method="POST" class="mt-8 space-y-6">
+        @csrf
+
+        <div class="space-y-4">
+            <flux:field>
+                <flux:label>Email address</flux:label>
+                <flux:input name="email" type="email" autocomplete="email" required value="{{ old('email') }}" placeholder="Enter your email address" :invalid="$errors->has('email')" />
+                <flux:error name="email" />
+            </flux:field>
+
+            <flux:field>
+                <flux:label>Password</flux:label>
+                <flux:input name="password" type="password" autocomplete="current-password" required viewable placeholder="Enter your password" :invalid="$errors->has('password')" />
+                <flux:error name="password" />
+            </flux:field>
+
+            <div class="flex items-center justify-between">
+                <flux:checkbox name="remember" label="Remember me" />
+
+                <flux:link href="{{ route('password.request') }}" class="text-sm">Forgot your password?</flux:link>
             </div>
+        </div>
 
-            @if (session('status'))
-                <div class="bg-green-100 dark:bg-green-800 border border-green-400 text-green-700 dark:text-green-100 px-4 py-3 rounded">
-                    {{ session('status') }}
-                </div>
-            @endif
-
-            <form class="mt-8 space-y-6" action="{{ route('customer.login') }}" method="POST">
-                @csrf
-
-                <div class="space-y-4">
-                    <div>
-                        <label for="email" class="block text-sm font-medium text-gray-700 dark:text-gray-300">
-                            Email address
-                        </label>
-                        <input
-                            id="email"
-                            name="email"
-                            type="email"
-                            autocomplete="email"
-                            required
-                            value="{{ old('email') }}"
-                            class="mt-1 appearance-none relative block w-full px-3 py-2 border @error('email') border-red-300 @else border-gray-300 @enderror dark:border-gray-600 placeholder-gray-500 dark:placeholder-gray-400 text-gray-900 dark:text-white dark:bg-gray-800 rounded-md focus:outline-none focus:ring-blue-500 focus:border-blue-500 focus:z-10 sm:text-sm"
-                            placeholder="Enter your email address"
-                        >
-                        @error('email')
-                            <p class="mt-1 text-sm text-red-600 dark:text-red-400">{{ $message }}</p>
-                        @enderror
-                    </div>
-
-                    <div>
-                        <label for="password" class="block text-sm font-medium text-gray-700 dark:text-gray-300">
-                            Password
-                        </label>
-                        <input
-                            id="password"
-                            name="password"
-                            type="password"
-                            autocomplete="current-password"
-                            required
-                            class="mt-1 appearance-none relative block w-full px-3 py-2 border @error('password') border-red-300 @else border-gray-300 @enderror dark:border-gray-600 placeholder-gray-500 dark:placeholder-gray-400 text-gray-900 dark:text-white dark:bg-gray-800 rounded-md focus:outline-none focus:ring-blue-500 focus:border-blue-500 focus:z-10 sm:text-sm"
-                            placeholder="Enter your password"
-                        >
-                        @error('password')
-                            <p class="mt-1 text-sm text-red-600 dark:text-red-400">{{ $message }}</p>
-                        @enderror
-                    </div>
-
-                    <div class="flex items-center justify-between">
-                        <div class="flex items-center">
-                            <input
-                                id="remember"
-                                name="remember"
-                                type="checkbox"
-                                class="h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300 rounded"
-                            >
-                            <label for="remember" class="ml-2 block text-sm text-gray-700 dark:text-gray-300">
-                                Remember me
-                            </label>
-                        </div>
-
-                        <div class="text-sm">
-                            <a href="{{ route('password.request') }}" class="font-medium text-blue-600 hover:text-blue-500 dark:text-blue-400 dark:hover:text-blue-300">
-                                Forgot your password?
-                            </a>
-                        </div>
-                    </div>
-                </div>
-
-                <div>
-                    <button type="submit" class="group relative w-full flex justify-center py-2 px-4 border border-transparent text-sm font-medium rounded-md text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 dark:focus:ring-offset-gray-900">
-                        Sign in
-                    </button>
-                </div>
-            </form>
+        <flux:button type="submit" variant="primary" class="w-full">Sign in</flux:button>
+    </form>
 
-            <div class="mt-6">
-                <div class="relative">
-                    <div class="absolute inset-0 flex items-center">
-                        <div class="w-full border-t border-gray-300 dark:border-gray-600"></div>
-                    </div>
-                    <div class="relative flex justify-center text-sm">
-                        <span class="px-2 bg-white dark:bg-gray-900 text-gray-500 dark:text-gray-400">Or continue with</span>
-                    </div>
-                </div>
+    <flux:separator text="Or" class="my-6" />
 
-                <div class="mt-6">
-                    <a href="{{ route('login.github') }}" class="w-full inline-flex justify-center py-2 px-4 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm bg-white dark:bg-gray-800 text-sm font-medium text-gray-700 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 dark:focus:ring-offset-gray-900">
-                        <svg class="w-5 h-5 mr-2" fill="currentColor" viewBox="0 0 20 20" aria-hidden="true">
-                            <path fill-rule="evenodd" d="M10 0C4.477 0 0 4.484 0 10.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0110 4.844c.85.004 1.705.115 2.504.337 1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.203 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.942.359.31.678.921.678 1.856 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.019 10.019 0 0020 10.017C20 4.484 15.522 0 10 0z" clip-rule="evenodd" />
-                        </svg>
-                        Continue with GitHub
-                    </a>
-                </div>
-            </div>
-        </div>
-    </div>
-</x-layout>
+    <flux:button href="{{ route('login.github') }}" variant="ghost" class="w-full">
+        <svg class="size-5" fill="currentColor" viewBox="0 0 20 20" aria-hidden="true">
+            <path fill-rule="evenodd" d="M10 0C4.477 0 0 4.484 0 10.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0110 4.844c.85.004 1.705.115 2.504.337 1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.203 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.942.359.31.678.921.678 1.856 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.019 10.019 0 0020 10.017C20 4.484 15.522 0 10 0z" clip-rule="evenodd" />
+        </svg>
+        Sign in with GitHub
+    </flux:button>
+</x-layouts.auth>