From 258544d98fd3531e60f98d25285a9295837a777b Mon Sep 17 00:00:00 2001
From: Marcel Menk <marcel.menk@forepath.io>
Date: Sat, 9 Aug 2025 20:27:53 +0200
Subject: [PATCH] feat: notification indicators

---
 src/layouts/admin.blade.php    | 30 ++++++++++++++++++++++++------
 src/layouts/customer.blade.php | 14 ++++++++++++--
 src/layouts/public.blade.php   | 14 ++++++++++++--
 src/scss/app.scss              | 23 +++++++++++++++++++++++
 4 files changed, 71 insertions(+), 10 deletions(-)

diff --git a/src/layouts/admin.blade.php b/src/layouts/admin.blade.php
index 6b392e7..b900adb 100644
--- a/src/layouts/admin.blade.php
+++ b/src/layouts/admin.blade.php
@@ -127,15 +127,24 @@ class="nav-item dropdown show {{ str_contains(Request::route()?->getName(), 'adm
                         <a class="nav-link dropdown-toggle" href="#" id="dropdown04" data-toggle="dropdown"
                             aria-expanded="false" title="{{ __('interface.misc.support') }}">
                             <div>
-                                <i class="bi bi-telephone"></i>
+                                <i class="bi bi-telephone">
+                                    @if (request()->get('badges')->tickets > 0)
+                                        <span class="bubble bubble-warning bubble--on-sidebar"></span>
+                                    @endif
+                                </i>
                                 <span>{{ __('interface.misc.support') }}</span>
                             </div>
                             <i class="bi bi-chevron-down dropdown-indicator"></i>
                         </a>
                         <div class="dropdown-menu w-100" aria-labelledby="dropdown04">
-                            <a class="dropdown-item" href="{{ route('admin.support') }}"
+                            <a class="dropdown-item d-flex align-items-center justify-content-between" href="{{ route('admin.support') }}"
                                 title="{{ __('interface.misc.tickets') }}"
-                                data-toggle="tooltip">{{ __('interface.misc.tickets') }}</a>
+                                data-toggle="tooltip">
+                                {{ __('interface.misc.tickets') }}
+                                @if (request()->get('badges')->tickets > 0)
+                                    <span class="bubble bubble-warning bubble--on-dropdown"></span>
+                                @endif
+                            </a>
                             @if (Auth::user()->role == 'admin')
                                 <a class="dropdown-item" href="{{ route('admin.support.categories') }}"
                                     title="{{ __('interface.misc.categories') }}"
@@ -213,15 +222,24 @@ class="nav-item dropdown show {{ str_contains(Request::route()?->getName(), 'adm
                         <a class="nav-link dropdown-toggle" href="#" id="dropdown04" data-toggle="dropdown"
                             aria-expanded="false" title="{{ __('interface.misc.shop') }}">
                             <div>
-                                <i class="bi bi-box"></i>
+                                <i class="bi bi-box">
+                                    @if (request()->get('badges')->orders > 0)
+                                        <span class="bubble bubble-warning bubble--on-sidebar"></span>
+                                    @endif
+                                </i>
                                 <span>{{ __('interface.misc.shop') }}</span>
                             </div>
                             <i class="bi bi-chevron-down dropdown-indicator"></i>
                         </a>
                         <div class="dropdown-menu w-100" aria-labelledby="dropdown04">
-                            <a class="dropdown-item" href="{{ route('admin.shop.orders') }}"
+                            <a class="dropdown-item d-flex align-items-center justify-content-between" href="{{ route('admin.shop.orders') }}"
                                 title="{{ __('interface.misc.orders') }}"
-                                data-toggle="tooltip">{{ __('interface.misc.orders') }}</a>
+                                data-toggle="tooltip">
+                                {{ __('interface.misc.orders') }}
+                                @if (request()->get('badges')->orders > 0)
+                                    <span class="bubble bubble-warning bubble--on-dropdown"></span>
+                                @endif
+                            </a>
                             <a class="dropdown-item" href="{{ route('admin.shop.categories') }}"
                                 title="{{ __('interface.misc.configuration') }}"
                                 data-toggle="tooltip">{{ __('interface.misc.configuration') }}</a>
diff --git a/src/layouts/customer.blade.php b/src/layouts/customer.blade.php
index b6e03e0..d25b7ae 100644
--- a/src/layouts/customer.blade.php
+++ b/src/layouts/customer.blade.php
@@ -105,7 +105,11 @@ class="sidebar-heading d-flex justify-content-between align-items-center px-3 mt
                         data-toggle="tooltip">
                         <a class="nav-link" href="{{ route('customer.support') }}"
                             title="{{ __('interface.misc.tickets') }}">
-                            <i class="bi bi-ticket-fill"></i>
+                            <i class="bi bi-ticket-fill">
+                                @if (request()->get('badges')->tickets > 0)
+                                    <span class="bubble bubble-warning bubble--on-sidebar"></span>
+                                @endif
+                            </i>
                             <span>{{ __('interface.misc.tickets') }}</span>
                         </a>
                     </li>
@@ -121,7 +125,13 @@ class="nav-item {{ str_contains(Request::route()?->getName(), 'customer.contract
                         class="nav-item {{ str_contains(Request::route()?->getName(), 'customer.invoices') ? 'active' : '' }}">
                         <a class="nav-link" href="{{ route('customer.invoices') }}"
                             title="{{ __('interface.misc.invoices') }}" data-toggle="tooltip">
-                            <i class="bi bi-file-earmark-text"></i>
+                            <i class="bi bi-file-earmark-text">
+                                @if (request()->get('badges')->invoices->overdue > 0)
+                                    <span class="bubble bubble-danger bubble--on-sidebar"></span>
+                                @elseif (request()->get('badges')->invoices->total > 0)
+                                    <span class="bubble bubble-warning bubble--on-sidebar"></span>
+                                @endif
+                            </i>
                             <span>{{ __('interface.misc.invoices') }}</span>
                         </a>
                     </li>
diff --git a/src/layouts/public.blade.php b/src/layouts/public.blade.php
index 16b1d25..0761886 100644
--- a/src/layouts/public.blade.php
+++ b/src/layouts/public.blade.php
@@ -114,7 +114,11 @@ class="sidebar-heading d-flex justify-content-between align-items-center px-3 mt
                             class="nav-item {{ str_contains(Request::route()?->getName(), 'customer.support') ? 'active' : '' }}">
                             <a class="nav-link" href="{{ route('customer.support') }}"
                                 title="{{ __('interface.misc.tickets') }}" data-toggle="tooltip">
-                                <i class="bi bi-ticket-fill"></i>
+                                <i class="bi bi-ticket-fill">
+                                    @if (request()->get('badges')->tickets > 0)
+                                        <span class="bubble bubble-warning bubble--on-sidebar"></span>
+                                    @endif
+                                </i>
                                 <span>{{ __('interface.misc.tickets') }}</span>
                             </a>
                         </li>
@@ -130,7 +134,13 @@ class="nav-item {{ str_contains(Request::route()?->getName(), 'customer.contract
                             class="nav-item {{ str_contains(Request::route()?->getName(), 'customer.invoices') ? 'active' : '' }}">
                             <a class="nav-link" href="{{ route('customer.invoices') }}"
                                 title="{{ __('interface.misc.invoices') }}" data-toggle="tooltip">
-                                <i class="bi bi-file-earmark-text"></i>
+                                <i class="bi bi-file-earmark-text">
+                                    @if (request()->get('badges')->invoices->overdue > 0)
+                                        <span class="bubble bubble-danger bubble--on-sidebar"></span>
+                                    @elseif (request()->get('badges')->invoices->total > 0)
+                                        <span class="bubble bubble-warning bubble--on-sidebar"></span>
+                                    @endif
+                                </i>
                                 <span>{{ __('interface.misc.invoices') }}</span>
                             </a>
                         </li>
diff --git a/src/scss/app.scss b/src/scss/app.scss
index 60d079f..41796b4 100644
--- a/src/scss/app.scss
+++ b/src/scss/app.scss
@@ -358,6 +358,7 @@ main {
                     justify-content: center;
                     transition-duration: .25s;
                     min-width: 2.5rem;
+                    position: relative;
                 }
             }
 
@@ -803,3 +804,25 @@ h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
     text-decoration: none;
     background-color: $dropdown-link-hover-bg;
 }
+
+.bubble {
+    border-radius: 0.3rem;
+    display: block;
+    height: 0.6rem !important;
+    width: 0.6rem !important;
+
+    &.bubble-warning {
+        background-color: var(--warning);
+    }
+
+    &.bubble-danger {
+        background-color: var(--danger);
+    }
+
+    &.bubble--on-sidebar {
+        position: absolute;
+        right: 0;
+        top: 0;
+        transform: translate(50%, -50%);
+    }
+}