From 5f069fc337ffd84dd1ed49de9edf08a8582e81df Mon Sep 17 00:00:00 2001
From: BillieFaiqul <2141720051@student.polinema.ac.id>
Date: Fri, 9 May 2025 21:57:14 +0700
Subject: [PATCH] feat : alert tips for user

---
 .../components/alert/tips-alert.blade.php     | 102 ++++++++++++++++++
 .../views/nodejs/dashboard/index.blade.php    |  19 +++-
 .../views/nodejs/projects/show.blade.php      |  16 +++
 .../views/nodejs/submissions/index.blade.php  |  18 +++-
 .../views/nodejs/submissions/show.blade.php   |  13 ++-
 5 files changed, 164 insertions(+), 4 deletions(-)
 create mode 100644 resources/views/components/alert/tips-alert.blade.php

diff --git a/resources/views/components/alert/tips-alert.blade.php b/resources/views/components/alert/tips-alert.blade.php
new file mode 100644
index 0000000..48771b7
--- /dev/null
+++ b/resources/views/components/alert/tips-alert.blade.php
@@ -0,0 +1,102 @@
+<!-- File: resources/views/components/alert/tips-alert.blade.php -->
+@props([
+    'pageId' => 'default',
+    'title' => 'Tips untuk Anda',
+    'dontShowAgainText' => 'Jangan Tampilkan Lagi'
+])
+
+<div id="tipsAlert_{{ $pageId }}" class="mb-6 bg-white dark:bg-gray-700 border-l-4 border-blue-500 shadow-md rounded-md overflow-hidden">
+    <div class="bg-blue-500 text-white px-4 py-2 flex justify-between items-center">
+        <h3 class="font-medium flex items-center">
+            <span class="mr-2 text-xl">💡</span> {{ $title }}
+        </h3>
+        <div class="flex items-center">
+            <button id="dontShowAgain_{{ $pageId }}" class="text-xs bg-blue-600 hover:bg-blue-700 text-white px-3 py-1 rounded mr-2">
+                {{ $dontShowAgainText }}
+            </button>
+            <button id="closeButton_{{ $pageId }}" class="text-white hover:text-gray-200">
+                <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
+                    <path fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd" />
+                </svg>
+            </button>
+        </div>
+    </div>
+    <div class="px-4 py-3 bg-white dark:bg-gray-800 dark:text-gray-200">
+        {{ $slot }}
+    </div>
+</div>
+
+<!-- Tombol untuk menampilkan kembali tips -->
+<div id="showTipsAgainButton_{{ $pageId }}" class="hidden mb-6">
+    <button class="flex items-center text-white font-bold hover:text-blue-200 dark:text-white dark:hover:text-blue-300">
+        <span class="mr-1 text-xl">💡</span>
+        <span>Tampilkan tips untuk halaman ini</span>
+    </button>
+</div>
+
+<script>
+    document.addEventListener('DOMContentLoaded', function() {
+        const pageId = '{{ $pageId }}';
+        const tipsAlert = document.getElementById('tipsAlert_' + pageId);
+        const closeButton = document.getElementById('closeButton_' + pageId);
+        const dontShowAgainButton = document.getElementById('dontShowAgain_' + pageId);
+        const showTipsAgainButton = document.getElementById('showTipsAgainButton_' + pageId);
+        const storageKey = 'tips_dismissed_' + pageId;
+
+        // Check if tips should be shown
+        function checkShowTips() {
+            if (localStorage.getItem(storageKey) === 'true') {
+                hideTips(true);
+            }
+        }
+
+        function hideTips(showToggleButton = false) {
+            if (tipsAlert) {
+                tipsAlert.style.display = 'none';
+            }
+            
+            // Tampilkan tombol untuk menampilkan tips kembali
+            if (showToggleButton && showTipsAgainButton) {
+                showTipsAgainButton.style.display = 'block';
+            }
+        }
+
+        function showTips() {
+            if (tipsAlert) {
+                tipsAlert.style.display = 'block';
+            }
+            
+            if (showTipsAgainButton) {
+                showTipsAgainButton.style.display = 'none';
+            }
+        }
+
+        function dontShowAgain() {
+            localStorage.setItem(storageKey, 'true');
+            hideTips(true);
+        }
+
+        function resetTipsPreference() {
+            localStorage.removeItem(storageKey);
+            showTips();
+        }
+
+        // Event listeners
+        if (closeButton) {
+            closeButton.addEventListener('click', function() {
+                hideTips(false); // Sembunyikan tips tanpa menampilkan tombol toggle
+            });
+        }
+        
+        if (dontShowAgainButton) {
+            dontShowAgainButton.addEventListener('click', dontShowAgain);
+        }
+
+        if (showTipsAgainButton) {
+            showTipsAgainButton.addEventListener('click', resetTipsPreference);
+        }
+
+        // Check on page load
+        checkShowTips();
+    });
+</script>
\ No newline at end of file
diff --git a/resources/views/nodejs/dashboard/index.blade.php b/resources/views/nodejs/dashboard/index.blade.php
index 4e2b0a2..38bbde9 100644
--- a/resources/views/nodejs/dashboard/index.blade.php
+++ b/resources/views/nodejs/dashboard/index.blade.php
@@ -5,7 +5,24 @@
         </h2>
     </x-slot>
 
-    <div class="pt-5">
+    <div class="py-4">
+        <div class="max-w-7xl mx-auto sm:px-6 lg:px-8">
+            <!-- Tips Alert for Dashboard -->
+            <x-alert.tips-alert pageId="dashboard" title="Tips untuk Anda">
+                <p>Selamat datang di dashboard! Berikut adalah beberapa tips untuk membantu Anda:</p>
+                <ul class="list-disc pl-5 mt-2">
+                    <li>Gunakan panel Projects untuk melihat detail project</li>
+                    <li>Untuk submissions bisa dilihat di panel Submissions</li>
+                    <li>Pilih proyek dari dropdown sebelum mengunggah</li>
+                    <li>Unggah file dengan cara drag & drop ZIP atau klik Browse Atau, masukkan link GitHub lengkap di kolom yang tersedia. Lalu klik tombol SUBMIT</li>
+                    <li>Maka anda akan di arahkan ke proses pengujian</li>
+                    <li>Anda bisa kemabali ke halaman dashboard untuk melihat status pengumpulan</li>
+                </ul>
+            </x-alert.tips-alert>
+        </div>
+    </div>
+
+    <div class="pb-5">
         <div class="max-w-7xl mx-auto sm:px-6 lg:px-8">
             <div class="bg-white dark:bg-gray-800 overflow-hidden shadow-sm sm:rounded-lg">
                 @include('nodejs.dashboard.partials.projects.list')
diff --git a/resources/views/nodejs/projects/show.blade.php b/resources/views/nodejs/projects/show.blade.php
index edbbda3..fcf232c 100644
--- a/resources/views/nodejs/projects/show.blade.php
+++ b/resources/views/nodejs/projects/show.blade.php
@@ -4,6 +4,22 @@
             {{ __('Project:') . ' ' . $project->title }}
         </h2>
     </x-slot>
+    <div class="py-4">
+        <div class="max-w-7xl mx-auto sm:px-6 lg:px-8">
+            <!-- Tips Alert for Dashboard -->
+            <x-alert.tips-alert pageId="project" title="Tips untuk Anda">
+                <p>Selamat datang di project! Berikut adalah beberapa tips untuk membantu Anda:</p>
+                <ul class="list-disc pl-5 mt-2">
+                    <li>Klik ikon garis 3 di sebelah nama guide untuk membuka opsi</li>
+                    <li>Pilih "View" untuk melihat PDF di halaman yang sama</li>
+                    <li>Pilih "Open in a new tab" untuk membuka di tab baru</li>
+                    <li>Pilih "Download" untuk menyimpan PDF ke perangkat Anda</li>
+                    <li>Klik "All Guides" di panel Download untuk mengunduh semua panduan sekaligus</li>
+                    <li>Klik "All Supplements" di panel Download untuk mengunduh file tambahan/pendukung</li>
+                </ul>
+            </x-alert.tips-alert>
+        </div>
+    </div>
     <div class="pt-5">
         <div class="max-w-7xl mx-auto sm:px-6 lg:px-8">
             <div class="bg-white dark:bg-gray-800 overflow-hidden shadow-sm sm:rounded-lg">
diff --git a/resources/views/nodejs/submissions/index.blade.php b/resources/views/nodejs/submissions/index.blade.php
index dc7f8f5..ac546e4 100644
--- a/resources/views/nodejs/submissions/index.blade.php
+++ b/resources/views/nodejs/submissions/index.blade.php
@@ -4,8 +4,22 @@
             {{ __('Submissions') }}
         </h2>
     </x-slot>
-
-    <div class="py-5">
+    <div class="py-4">
+        <div class="max-w-7xl mx-auto sm:px-6 lg:px-8">
+            <!-- Tips Alert for Dashboard -->
+            <x-alert.tips-alert pageId="submission-index" title="Tips untuk Anda">
+                <p>Selamat datang di Submission! Berikut adalah beberapa tips untuk membantu Anda:</p>
+                <ul class="list-disc pl-5 mt-2">
+                    <li>Perhatikan kolom "Status" untuk melihat hasil pengajuan Anda</li>
+                    <li>Klik ikon menu garis 3 untuk melihat opsi tindakan</li>
+                    <li>Pilih "Restart submission" untuk mencoba ulang pengajuan yang gagal</li>
+                    <li>Pilih "Delete submission" untuk menghapus pengajuan dari daftar</li>
+                    <li>Klik judul project untuk melihat history dan lebih detail mengenai submission</li>
+                </ul>
+            </x-alert.tips-alert>
+        </div>
+    </div>
+    <div class="py-2">
         <div class="max-w-7xl mx-auto sm:px-6 lg:px-8">
             <div class="bg-white dark:bg-gray-800 overflow-hidden shadow-sm sm:rounded-lg pb-12">
                 @include('nodejs.submissions.partials.container')
diff --git a/resources/views/nodejs/submissions/show.blade.php b/resources/views/nodejs/submissions/show.blade.php
index 4eec0b8..80a9845 100644
--- a/resources/views/nodejs/submissions/show.blade.php
+++ b/resources/views/nodejs/submissions/show.blade.php
@@ -5,7 +5,18 @@
                 {{ __('All submissions for project: ') . $project->title }}
             </h2>
         </x-slot>
-
+        <div class="py-4">
+        <div class="max-w-7xl mx-auto sm:px-6 lg:px-8">
+            <!-- Tips Alert for Dashboard -->
+            <x-alert.tips-alert pageId="submission-show" title="Tips untuk Anda">
+                <p>Selamat datang di Submission! Berikut adalah beberapa tips untuk membantu Anda:</p>
+                <ul class="list-disc pl-5 mt-2">
+                    <li>Klik "View" untuk melihat feedback atau error log dari sistem</li>
+                    <li>Klik "Download Results" untuk mengunduh laporan berupa json</li>
+                </ul>
+            </x-alert.tips-alert>
+        </div>
+        </div>
         <div class="py-5">
             <div class="max-w-7xl mx-auto sm:px-6 lg:px-8">
                 <div class="bg-white dark:bg-gray-800 overflow-hidden shadow-sm sm:rounded-lg">