WIP Account Work

PeteBishwhip · PeteBishwhip · commit 647c54200f51 · 2025-05-07T08:51:41.000+01:00
diff --git a/app/Models/SupportTicket/Reply.php b/app/Models/SupportTicket/Reply.php
@@ -26,9 +26,16 @@ class Reply extends Model
         'note' => 'boolean',
     ];
 
+    public function isFromAdmin(): Attribute
+    {
+        return Attribute::get(fn () => $this->user->is_admin)
+            ->shouldCache();
+    }
+
     public function isFromUser(): Attribute
     {
-        return Attribute::get(fn () => $this->user_id === auth()->user()->id);
+        return Attribute::get(fn () => $this->user_id === auth()->user()->id)
+            ->shouldCache();
     }
 
     public function user(): BelongsTo
diff --git a/app/Models/User.php b/app/Models/User.php
@@ -23,6 +23,7 @@ class User extends Authenticatable
 
     protected $casts = [
         'email_verified_at' => 'datetime',
+        'is_admin' => 'boolean',
         'password' => 'hashed',
     ];
 
diff --git a/database/migrations/2025_04_29_141211_update_users_table_add_admin_flag.php b/database/migrations/2025_04_29_141211_update_users_table_add_admin_flag.php
@@ -0,0 +1,30 @@
+<?php
+
+use Illuminate\Database\Migrations\Migration;
+use Illuminate\Database\Schema\Blueprint;
+use Illuminate\Support\Facades\Schema;
+
+return new class extends Migration
+{
+    /**
+     * Run the migrations.
+     */
+    public function up(): void
+    {
+        Schema::table('users', function (Blueprint $table) {
+            $table->boolean('is_admin')
+                ->after('remember_token')
+                ->default(false);
+        });
+    }
+
+    /**
+     * Reverse the migrations.
+     */
+    public function down(): void
+    {
+        Schema::table('users', function (Blueprint $table) {
+            $table->dropColumn('is_admin');
+        });
+    }
+};
diff --git a/resources/views/support/index.blade.php b/resources/views/support/index.blade.php
@@ -9,6 +9,14 @@
             </p>
         </header>
 
+        {{-- Additional Support Information --}}
+        <div class="my-10 rounded-xl bg-gradient-to-br from-[#FFF0DC] to-[#E8EEFF] p-8 dark:from-blue-900/10 dark:to-[#4c407f]/25">
+            <h2 class="mb-4 text-2xl font-medium">Need more help?</h2>
+            <p class="text-lg text-gray-700 dark:text-gray-300">
+                Check out our <a href="/docs" class="font-medium text-violet-600 hover:text-violet-700 dark:text-violet-400 dark:hover:text-violet-300">documentation</a> for comprehensive guides and tutorials to help you get the most out of NativePHP.
+            </p>
+        </div>
+
         {{-- Support Grid --}}
         <div class="grid w-full grid-cols-1 gap-8 md:grid-cols-2">
 
@@ -38,40 +46,6 @@ class="group flex w-full flex-col items-center rounded-xl bg-gray-100/80 p-8 tex
                 <p class="mt-2 text-gray-600 dark:text-gray-400">Join the community and get real-time help</p>
             </a>
 
-            {{-- Email Box --}}
-            <a href="mailto:support@nativephp.com"
-               class="group flex w-full flex-col items-center rounded-xl bg-gray-100/80 p-8 text-center transition duration-300 hover:-translate-y-1 hover:bg-gray-200/80 hover:shadow-lg dark:bg-gray-800/50 dark:hover:bg-gray-700/50 dark:hover:shadow-gray-900/30"
-               aria-label="Contact us via email">
-                <div class="mb-5 grid size-16 place-items-center rounded-full bg-white ring-1 ring-black/5 transition duration-300 group-hover:rotate-3 dark:bg-gray-900 dark:ring-white/10">
-                    <x-icons.email-document class="size-8" />
-                </div>
-                <h2 class="text-xl font-medium">Email</h2>
-                <p class="mt-2 text-gray-600 dark:text-gray-400">Get in touch with our support team</p>
-            </a>
-
-            {{-- Support Tickets Box --}}
-            <a href="{{ route('support.tickets') }}"
-               target="_blank"
-               rel="noopener"
-               class="group flex w-full flex-col items-center rounded-xl bg-gray-100/80 p-8 text-center transition duration-300 hover:-translate-y-1 hover:bg-gray-200/80 hover:shadow-lg dark:bg-gray-800/50 dark:hover:bg-gray-700/50 dark:hover:shadow-gray-900/30"
-               aria-label="Submit a support ticket">
-                <div class="mb-5 grid size-16 place-items-center rounded-full bg-white text-violet-500 ring-1 ring-black/5 transition duration-300 group-hover:-rotate-3 dark:bg-gray-900 dark:ring-white/10">
-                    <svg class="size-8" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M18.364 5.636l-3.536 3.536m0 5.656l3.536 3.536M9.172 9.172L5.636 5.636m3.536 9.192l-3.536 3.536M21 12a9 9 0 11-18 0 9 9 0 0118 0zm-5 0a4 4 0 11-8 0 4 4 0 018 0z" />
-                    </svg>
-                </div>
-                <h2 class="text-xl font-medium">Support Tickets</h2>
-                <p class="mt-2 text-gray-600 dark:text-gray-400">Submit a detailed help request</p>
-            </a>
-
-        </div>
-
-        {{-- Additional Support Information --}}
-        <div class="mt-20 rounded-xl bg-gradient-to-br from-[#FFF0DC] to-[#E8EEFF] p-8 dark:from-blue-900/10 dark:to-[#4c407f]/25">
-            <h2 class="mb-4 text-2xl font-medium">Need more help?</h2>
-            <p class="text-lg text-gray-700 dark:text-gray-300">
-                Check out our <a href="/docs" class="font-medium text-violet-600 hover:text-violet-700 dark:text-violet-400 dark:hover:text-violet-300">documentation</a> for comprehensive guides and tutorials to help you get the most out of NativePHP.
-            </p>
         </div>
     </section>
 </x-layout>
diff --git a/resources/views/support/tickets/show.blade.php b/resources/views/support/tickets/show.blade.php
@@ -1,4 +1,5 @@
 <x-layout-three-columns>
+    <div x-data="{ showReplyModal: false }">
     {{-- Desktop Buttons - Hidden on Mobile --}}
     <div class="hidden md:flex justify-between items-center mb-4">
         <a href="/support/tickets" class="inline-flex items-center px-4 py-2 text-sm font-medium text-gray-700 bg-white border border-gray-300 rounded-lg hover:bg-gray-50 dark:bg-gray-800 dark:text-gray-300 dark:border-gray-600 dark:hover:bg-gray-700">
@@ -9,7 +10,11 @@
         </a>
         <div class="flex space-x-3">
             @if($supportTicket->status !== \App\SupportTicket\Status::CLOSED)
-                <button type="button" class="inline-flex items-center px-4 py-2 text-sm font-medium text-violet-700 bg-violet-100 border border-violet-200 rounded-lg hover:bg-violet-200 dark:bg-violet-900/30 dark:text-violet-300 dark:border-violet-800 dark:hover:bg-violet-900/50">
+                <button
+                    type="button"
+                    @click="showReplyModal = true"
+                    class="inline-flex items-center px-4 py-2 text-sm font-medium text-violet-700 bg-violet-100 border border-violet-200 rounded-lg hover:bg-violet-200 dark:bg-violet-900/30 dark:text-violet-300 dark:border-violet-800 dark:hover:bg-violet-900/50"
+                >
                     <svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                         <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 10h10a8 8 0 018 8v2M3 10l6 6m-6-6l6-6"/>
                     </svg>
@@ -48,7 +53,14 @@
                     <div class="flex flex-col w-full mb-6">
                         <div class="relative w-full">
                             <div class="{{ $reply->is_from_user ? 'bg-blue-100/50 dark:bg-blue-900/20 border-blue-200/50 dark:border-blue-800/30 mr-10' : 'bg-gray-100/70 dark:bg-gray-700/20 border-gray-200/50 dark:border-gray-700/30 ml-10' }} p-4 rounded-lg border">
-                                <p class="font-medium text-gray-900 dark:text-gray-100">{{ $reply->user->name }}</p>
+                                <p class="font-medium text-gray-900 dark:text-gray-100">
+                                    {{ $reply->user->name }}
+                                    @if($reply->is_from_user)
+                                        <span class="text-sm text-gray-500 dark:text-gray-400">(You)</span>
+                                    @elseif($reply->is_from_admin)
+                                        <span class="text-sm text-gray-500 dark:text-gray-400">(Staff)</span>
+                                    @endif
+                                </p>
                                 <p class="mt-1 text-gray-800 dark:text-gray-200">{{ $reply->message }}</p>
                             </div>
                         </div>
@@ -77,7 +89,11 @@
             </svg>
             Back
         </a>
-        <button type="button" class="flex-1 inline-flex items-center justify-center px-3 py-2 text-sm font-medium text-violet-700 bg-violet-100 border border-violet-200 rounded-lg hover:bg-violet-200 dark:bg-violet-900/30 dark:text-violet-300 dark:border-violet-800 dark:hover:bg-violet-900/50 mx-1">
+        <button
+            type="button"
+            @click="showReplyModal = true"
+            class="flex-1 inline-flex items-center justify-center px-3 py-2 text-sm font-medium text-violet-700 bg-violet-100 border border-violet-200 rounded-lg hover:bg-violet-200 dark:bg-violet-900/30 dark:text-violet-300 dark:border-violet-800 dark:hover:bg-violet-900/50 mx-1"
+        >
             <svg class="w-4 h-4 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                 <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 10h10a8 8 0 018 8v2M3 10l6 6m-6-6l6-6"/>
             </svg>
@@ -98,4 +114,106 @@
     <form action="{{ route('support.tickets.close', $supportTicket) }}" method="POST" id="closeTicketForm">
         @csrf
     </form>
+
+    {{-- Reply Modal --}}
+    <div
+        x-show="showReplyModal"
+        x-cloak
+        class="fixed inset-0 z-50 overflow-y-auto"
+        aria-labelledby="modal-title"
+        role="dialog"
+        aria-modal="true"
+    >
+        <div
+            class="flex items-end justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0"
+            x-transition:enter="ease-out duration-300"
+            x-transition:enter-start="opacity-0"
+            x-transition:enter-end="opacity-100"
+            x-transition:leave="ease-in duration-200"
+            x-transition:leave-start="opacity-100"
+            x-transition:leave-end="opacity-0"
+        >
+            {{-- Modal backdrop --}}
+            <div
+                class="fixed inset-0 bg-gray-500 bg-opacity-75 dark:bg-gray-900 dark:bg-opacity-75 transition-opacity"
+                aria-hidden="true"
+                @click="showReplyModal = false"
+            ></div>
+
+            {{-- Modal positioning trick --}}
+            <span class="hidden sm:inline-block sm:align-middle sm:h-screen" aria-hidden="true">&#8203;</span>
+
+            {{-- Modal content --}}
+            <div
+                class="inline-block align-bottom bg-white dark:bg-gray-800 rounded-lg text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-lg sm:w-full"
+                x-transition:enter="ease-out duration-300"
+                x-transition:enter-start="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
+                x-transition:enter-end="opacity-100 translate-y-0 sm:scale-100"
+                x-transition:leave="ease-in duration-200"
+                x-transition:leave-start="opacity-100 translate-y-0 sm:scale-100"
+                x-transition:leave-end="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
+            >
+                <div class="absolute top-0 right-0 pt-4 pr-4">
+                    <button
+                        type="button"
+                        class="bg-white dark:bg-gray-800 rounded-md text-gray-400 hover:text-gray-500 dark:hover:text-gray-300 focus:outline-none"
+                        @click="showReplyModal = false"
+                    >
+                        <span class="sr-only">Close</span>
+                        <svg class="h-6 w-6" 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>
+                    </button>
+                </div>
+                <div class="px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
+                    <div class="sm:flex sm:items-start">
+                        <div class="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left w-full">
+                            <h3 class="text-lg leading-6 font-medium text-gray-900 dark:text-white" id="modal-title">
+                                Reply to Ticket #{{ $supportTicket->mask }}
+                            </h3>
+                            <div class="mt-4">
+                                <form action="#" method="POST">
+                                    @csrf
+                                    <div class="mb-4">
+                                        <label for="message" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
+                                            Your message
+                                        </label>
+                                        <textarea
+                                            id="message"
+                                            name="message"
+                                            rows="5"
+                                            class="shadow-sm focus:ring-violet-500 focus:border-violet-500 block w-full sm:text-sm border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-white rounded-md"
+                                            placeholder="Type your reply here..."
+                                            required
+                                        ></textarea>
+                                    </div>
+                                    <div class="mt-5 sm:mt-6 sm:flex sm:flex-row-reverse">
+                                        <button
+                                            type="submit"
+                                            class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-violet-600 text-base font-medium text-white hover:bg-violet-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-violet-500 sm:ml-3 sm:w-auto sm:text-sm dark:bg-violet-700 dark:hover:bg-violet-600"
+                                        >
+                                            Send Reply
+                                        </button>
+                                        <button
+                                            type="button"
+                                            class="mt-3 w-full inline-flex justify-center rounded-md border border-gray-300 shadow-sm px-4 py-2 bg-white text-base font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-violet-500 sm:mt-0 sm:w-auto sm:text-sm dark:bg-gray-800 dark:text-gray-300 dark:border-gray-600 dark:hover:bg-gray-700"
+                                            @click="showReplyModal = false"
+                                        >
+                                            Cancel
+                                        </button>
+                                    </div>
+                                </form>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    {{-- Add Alpine.js x-cloak style to hide elements with x-cloak before Alpine initializes --}}
+    <style>
+        [x-cloak] { display: none !important; }
+    </style>
+    </div>
 </x-layout-three-columns>
