From c460fec1f246c9e5d2aa4e1011b76f0ac0d5607f Mon Sep 17 00:00:00 2001
From: Yoga Pangestu <ypangestu976@gmail.com>
Date: Mon, 30 Mar 2026 13:37:34 +0700
Subject: [PATCH] feat: add support widget to Filament dashboard for user
 assistance and contact links

---
 app/Filament/Widgets/SupportWidget.php        | 14 ++++++
 .../filament/widgets/support-widget.blade.php | 43 +++++++++++++++++++
 2 files changed, 57 insertions(+)
 create mode 100644 app/Filament/Widgets/SupportWidget.php
 create mode 100644 resources/views/filament/widgets/support-widget.blade.php

diff --git a/app/Filament/Widgets/SupportWidget.php b/app/Filament/Widgets/SupportWidget.php
new file mode 100644
index 0000000..7864864
--- /dev/null
+++ b/app/Filament/Widgets/SupportWidget.php
@@ -0,0 +1,14 @@
+<?php
+
+namespace App\Filament\Widgets;
+
+use Filament\Widgets\Widget;
+
+class SupportWidget extends Widget
+{
+    protected static ?int $sort = 0;
+
+    protected int|string|array $columnSpan = 'full';
+
+    protected string $view = 'filament.widgets.support-widget';
+}
diff --git a/resources/views/filament/widgets/support-widget.blade.php b/resources/views/filament/widgets/support-widget.blade.php
new file mode 100644
index 0000000..03a7d8e
--- /dev/null
+++ b/resources/views/filament/widgets/support-widget.blade.php
@@ -0,0 +1,43 @@
+<x-filament-widgets::widget>
+    <x-filament::section
+        class="group relative overflow-hidden bg-gradient-to-br from-primary-50/50 to-white dark:from-primary-500/10 dark:to-gray-900 ring-1 ring-primary-500/30 hover:ring-primary-500/50 hover:shadow-2xl hover:shadow-primary-500/20 transition-all duration-500">
+
+        <div
+            class="absolute -right-10 -top-10 w-40 h-40 bg-primary-500/10 dark:bg-primary-500/5 rounded-full blur-3xl group-hover:bg-primary-500/20 transition-all duration-500">
+        </div>
+        <div
+            class="absolute -left-10 -bottom-10 w-40 h-40 bg-primary-500/10 dark:bg-primary-500/5 rounded-full blur-3xl group-hover:bg-primary-500/20 transition-all duration-500">
+        </div>
+
+        <div class="flex flex-col sm:flex-row sm:items-start gap-5 relative z-10">
+            <div
+                class="p-3 bg-primary-100 dark:bg-primary-500/20 rounded-2xl shrink-0 w-fit group-hover:scale-110 group-hover:rotate-3 transition-transform duration-500 shadow-sm border border-primary-200 dark:border-primary-500/20">
+                <x-filament::icon icon="heroicon-o-chat-bubble-left-ellipsis"
+                    class="w-7 h-7 text-primary-600 dark:text-primary-400 group-hover:animate-pulse" />
+            </div>
+            <div>
+                <h2
+                    class="text-xl font-bold bg-clip-text text-transparent bg-gradient-to-r from-gray-900 to-gray-600 dark:from-white dark:to-gray-300 group-hover:from-primary-600 group-hover:to-primary-400 transition-all duration-300">
+                    Informasi & Bantuan</h2>
+                <p
+                    class="text-sm text-gray-600 dark:text-gray-400 mt-2 max-w-3xl leading-relaxed group-hover:text-gray-900 dark:group-hover:text-gray-300 transition-colors duration-300">
+                    Jika Anda menemukan masalah dalam penggunaan aplikasi, membutuhkan bantuan, atau memiliki ide
+                    perbaikan serta penambahan fitur baru, jangan ragu untuk menyampaikannya. Masukan Anda sangat
+                    berarti bagi kami.
+                </p>
+                <div class="flex flex-wrap items-center gap-3 mt-5">
+                    <a href="https://wa.me/6285819894938" target="_blank"
+                        class="inline-flex items-center gap-2 px-5 py-2.5 bg-white dark:bg-gray-800 text-primary-600 dark:text-primary-400 border border-primary-200 dark:border-primary-500/30 rounded-xl hover:bg-primary-50 dark:hover:bg-primary-500/10 hover:-translate-y-1 hover:shadow-lg hover:shadow-primary-500/20 active:scale-95 transition-all duration-300 text-sm font-semibold">
+                        <x-filament::icon icon="heroicon-m-chat-bubble-oval-left" class="w-4 h-4" />
+                        Komala
+                    </a>
+                    <a href="https://wa.me/6282121495806" target="_blank"
+                        class="inline-flex items-center gap-2 px-5 py-2.5 bg-white dark:bg-gray-800 text-primary-600 dark:text-primary-400 border border-primary-200 dark:border-primary-500/30 rounded-xl hover:bg-primary-50 dark:hover:bg-primary-500/10 hover:-translate-y-1 hover:shadow-lg hover:shadow-primary-500/20 active:scale-95 transition-all duration-300 text-sm font-semibold">
+                        <x-filament::icon icon="heroicon-m-code-bracket" class="w-4 h-4" />
+                        Pengembang
+                    </a>
+                </div>
+            </div>
+        </div>
+    </x-filament::section>
+</x-filament-widgets::widget>