@mamut_1945/dashboard-ui 1.0.0 → 1.0.2

package/package.json

@@ -1,16 +1,8 @@
 {
   "name": "@mamut_1945/dashboard-ui",
-  "version": "1.0.0",
+  "version": "1.0.2",
   "files": [
     "resources",
     "tailwind"
-  ],
-  "description": "",
-  "main": "index.js",
-  "scripts": {
-    "test": "echo \"Error: no test specified\" && exit 1"
-  },
-  "keywords": [],
-  "author": "",
-  "license": "ISC"
+  ]
 }

package/resources/views/components/common/common-grid-shape.blade.php

@@ -0,0 +1,8 @@
+{{-- <div>
+    <div class="absolute right-0 top-0 -z-1 w-full max-w-[250px] xl:max-w-[450px]">
+        <img src="/images/shape/grid-01.svg" alt="grid" />
+    </div>
+    <div class="absolute bottom-0 left-0 -z-1 w-full max-w-[250px] rotate-180 xl:max-w-[450px]">
+        <img src="/images/shape/grid-01.svg" alt="grid" />
+    </div>
+</div> --}}

package/resources/views/components/common/component-card.blade.php

@@ -0,0 +1,25 @@
+@props([
+    'title',
+    'desc' => '',
+])
+
+<div {{ $attributes->merge(['class' => 'rounded-2xl border border-gray-200 bg-white dark:border-gray-800 dark:bg-white/[0.03]']) }}>
+    <!-- Card Header -->
+    <div class="px-6 py-5">
+        <h3 class="text-base font-medium text-gray-800 dark:text-white/90">
+            {{ $title }}
+        </h3>
+        @if($desc)
+            <p class="mt-1 text-sm text-gray-500 dark:text-gray-400">
+                {{ $desc }}
+            </p>
+        @endif
+    </div>
+
+    <!-- Card Body -->
+    <div class="p-4 border-t border-gray-100 dark:border-gray-800 sm:p-6">
+        <div class="space-y-6">
+            {{ $slot }}
+        </div>
+    </div>
+</div>

package/resources/views/components/common/dropdown-menu.blade.php

@@ -0,0 +1,22 @@
+@props(['items' => ['View More','Delete']])
+<div x-data="{openDropDown: false}" class="relative h-fit">
+    <button
+        @click="openDropDown = !openDropDown"
+        :class="openDropDown ? 'text-gray-700 dark:text-white' : 'text-gray-400 hover:text-gray-700 dark:hover:text-white'"
+    >
+        <svg class="fill-current" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+            <path fill-rule="evenodd" clip-rule="evenodd" d="M10.2441 6C10.2441 5.0335 11.0276 4.25 11.9941 4.25H12.0041C12.9706 4.25 13.7541 5.0335 13.7541 6C13.7541 6.9665 12.9706 7.75 12.0041 7.75H11.9941C11.0276 7.75 10.2441 6.9665 10.2441 6ZM10.2441 18C10.2441 17.0335 11.0276 16.25 11.9941 16.25H12.0041C12.9706 16.25 13.7541 17.0335 13.7541 18C13.7541 18.9665 12.9706 19.75 12.0041 19.75H11.9941C11.0276 19.75 10.2441 18.9665 10.2441 18ZM11.9941 10.25C11.0276 10.25 10.2441 11.0335 10.2441 12C10.2441 12.9665 11.0276 13.75 11.9941 13.75H12.0041C12.9706 13.75 13.7541 12.9665 13.7541 12C13.7541 11.0335 12.9706 10.25 12.0041 10.25H11.9941Z" fill=""/>
+        </svg>
+    </button>
+    
+    <div x-show="openDropDown" @click.outside="openDropDown = false" 
+         class="absolute right-0 z-40 w-40 p-2 space-y-1 bg-white border border-gray-200 shadow-theme-lg dark:bg-gray-dark top-full rounded-2xl dark:border-gray-800">
+        @forelse($items as $item)
+            <button class="flex w-full px-3 py-2 font-medium text-left text-gray-500 rounded-lg text-theme-xs hover:bg-gray-100 hover:text-gray-700 dark:text-gray-400 dark:hover:bg-white/5 dark:hover:text-gray-300">
+                {{ $item }}
+            </button>
+        @empty
+            {{ $slot }}
+        @endforelse
+    </div>
+</div>

package/resources/views/components/common/form.blade.php

@@ -0,0 +1,21 @@
+<form action="{{ $action }}" method="{{ $method !== 'GET' ? 'POST' : 'GET' }}">
+    @csrf
+    @if(!in_array($method, ['GET', 'POST']))
+        @method($method)
+    @endif
+
+    <div class="space-y-4">
+        @foreach ($fields as $field)
+            <x-common.input-group
+                :label="$field['label']"
+                :name="$field['name']"
+                :type="$field['type'] ?? 'text'"
+                :placeholder="$field['placeholder'] ?? ''"
+                :icon="$field['icon'] ?? null"
+                :options="$field['options'] ?? []"
+            />
+        @endforeach
+    </div>
+
+    {{ $slot }}
+</form>

package/resources/views/components/common/input-group.blade.php

@@ -0,0 +1,100 @@
+@props([
+    'type' => 'text | email | password | select | textarea',
+    'label',
+    'name',
+    'placeholder' => '',
+    'options' => [],
+    'icon' => null,
+])
+
+<div>
+    <label class="mb-1.5 block text-sm font-medium text-gray-700 dark:text-gray-400">
+        {{ $label }}
+    </label>
+
+
+        {{-- ICON --}}
+        @if($icon)
+            <span class="absolute top-1/2 left-0 -translate-y-1/2 px-3">
+                {!! $icon !!}
+            </span>
+        @endif
+
+        {{-- SELECT --}}
+        @if($type === 'select')
+        <div x-data="{ isOptionSelected: false }" class="relative z-20 bg-transparent">
+            <select
+                name="{{ $name }}"
+                {{ $attributes->merge([
+                    'class' =>
+                    'dark:bg-dark-900 shadow-theme-xs focus:border-brand-300 focus:ring-brand-500/10 dark:focus:border-brand-800 h-11 w-full appearance-none rounded-lg border border-gray-300 bg-transparent bg-none px-4 py-2.5 pr-11 text-sm text-gray-800 placeholder:text-gray-400 focus:ring-3 focus:outline-hidden dark:border-gray-700 dark:bg-gray-900 dark:text-white/90 dark:placeholder:text-white/30' .
+                    ($icon ? 'pl-[62px]' : '')
+                ]) }}
+                :class="isOptionSelected && 'text-gray-800 dark:text-white/90'" @change="isOptionSelected = true">
+                <option value="">Pilih {{ $label }}</option>
+
+                @foreach($options as $value => $text)
+                    <option value="{{ $value }}"
+                        @selected(old($name) == $value)
+                    >
+                        {{ $text }}
+                    </option>
+                @endforeach
+            </select>
+            <span
+                class="pointer-events-none absolute top-1/2 right-4 z-30 -translate-y-1/2 text-gray-500 dark:text-gray-400">
+                <svg class="stroke-current" width="20" height="20" viewBox="0 0 20 20" fill="none"
+                    xmlns="http://www.w3.org/2000/svg">
+                    <path d="M4.79175 7.396L10.0001 12.6043L15.2084 7.396" stroke="" stroke-width="1.5"
+                        stroke-linecap="round" stroke-linejoin="round" />
+                </svg>
+            </span>
+        </div>
+        {{-- TEXTAREA --}}
+        @elseif($type === 'password')
+        <div>
+            <div x-data="{ showPassword: false }" class="relative">
+            <input
+                type="{{ $type }}"
+                :type="showPassword ? 'text' : 'password'"
+                name="{{ $name }}"
+                value="{{ old($name) }}"
+                placeholder="{{ $placeholder }}"
+                {{ $attributes->merge([
+                    'class' =>
+                    'dark:bg-dark-900 shadow-theme-xs focus:border-brand-300 focus:ring-brand-500/10 dark:focus:border-brand-800 h-11 w-full appearance-none rounded-lg border border-gray-300 bg-transparent bg-none px-4 py-2.5 pr-11 pl-4 text-sm text-gray-800 placeholder:text-gray-400 focus:ring-3 focus:outline-hidden dark:border-gray-700 dark:bg-gray-900 dark:text-white/90 dark:placeholder:text-white/30' .
+                    ($icon ? 'pl-[62px]' : '')
+                ]) }}
+            />
+                <span @click="showPassword = !showPassword"
+                    class="absolute top-1/2 right-4 z-30 -translate-y-1/2 cursor-pointer">
+                    <svg x-show="!showPassword" class="fill-gray-500 dark:fill-gray-400" width="20" height="20"
+                        viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+                        <path fill-rule="evenodd" clip-rule="evenodd"
+                            d="M10.0002 13.8619C7.23361 13.8619 4.86803 12.1372 3.92328 9.70241C4.86804 7.26761 7.23361 5.54297 10.0002 5.54297C12.7667 5.54297 15.1323 7.26762 16.0771 9.70243C15.1323 12.1372 12.7667 13.8619 10.0002 13.8619ZM10.0002 4.04297C6.48191 4.04297 3.49489 6.30917 2.4155 9.4593C2.3615 9.61687 2.3615 9.78794 2.41549 9.94552C3.49488 13.0957 6.48191 15.3619 10.0002 15.3619C13.5184 15.3619 16.5055 13.0957 17.5849 9.94555C17.6389 9.78797 17.6389 9.6169 17.5849 9.45932C16.5055 6.30919 13.5184 4.04297 10.0002 4.04297ZM9.99151 7.84413C8.96527 7.84413 8.13333 8.67606 8.13333 9.70231C8.13333 10.7286 8.96527 11.5605 9.99151 11.5605H10.0064C11.0326 11.5605 11.8646 10.7286 11.8646 9.70231C11.8646 8.67606 11.0326 7.84413 10.0064 7.84413H9.99151Z" />
+                    </svg>
+
+                    <svg x-show="showPassword" class="fill-gray-500 dark:fill-gray-400" width="20" height="20"
+                        viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+                        <path fill-rule="evenodd" clip-rule="evenodd"
+                            d="M4.63803 3.57709C4.34513 3.2842 3.87026 3.2842 3.57737 3.57709C3.28447 3.86999 3.28447 4.34486 3.57737 4.63775L4.85323 5.91362C3.74609 6.84199 2.89363 8.06395 2.4155 9.45936C2.3615 9.61694 2.3615 9.78801 2.41549 9.94558C3.49488 13.0957 6.48191 15.3619 10.0002 15.3619C11.255 15.3619 12.4422 15.0737 13.4994 14.5598L15.3625 16.4229C15.6554 16.7158 16.1302 16.7158 16.4231 16.4229C16.716 16.13 16.716 15.6551 16.4231 15.3622L4.63803 3.57709ZM12.3608 13.4212L10.4475 11.5079C10.3061 11.5423 10.1584 11.5606 10.0064 11.5606H9.99151C8.96527 11.5606 8.13333 10.7286 8.13333 9.70237C8.13333 9.5461 8.15262 9.39434 8.18895 9.24933L5.91885 6.97923C5.03505 7.69015 4.34057 8.62704 3.92328 9.70247C4.86803 12.1373 7.23361 13.8619 10.0002 13.8619C10.8326 13.8619 11.6287 13.7058 12.3608 13.4212ZM16.0771 9.70249C15.7843 10.4569 15.3552 11.1432 14.8199 11.7311L15.8813 12.7925C16.6329 11.9813 17.2187 11.0143 17.5849 9.94561C17.6389 9.78803 17.6389 9.61696 17.5849 9.45938C16.5055 6.30925 13.5184 4.04303 10.0002 4.04303C9.13525 4.04303 8.30244 4.17999 7.52218 4.43338L8.75139 5.66259C9.1556 5.58413 9.57311 5.54303 10.0002 5.54303C12.7667 5.54303 15.1323 7.26768 16.0771 9.70249Z" />
+                    </svg>
+                </span>
+            </div>
+        </div>
+        
+        {{-- INPUT DEFAULT --}}
+        @else
+            <input
+                type="{{ $type }}"
+                name="{{ $name }}"
+                value="{{ old($name) }}"
+                placeholder="{{ $placeholder }}"
+                {{ $attributes->merge([
+                    'class' =>
+                    'ark:bg-dark-900 shadow-theme-xs focus:border-brand-300 focus:ring-brand-500/10 dark:focus:border-brand-800 h-11 w-full rounded-lg border border-gray-300 bg-transparent px-4 py-2.5 text-sm text-gray-800 placeholder:text-gray-400 focus:ring-3 focus:outline-hidden dark:border-gray-700 dark:bg-gray-900 dark:text-white/90 dark:placeholder:text-white/30 ' .
+                    ($icon ? 'pl-[62px]' : '')
+                ]) }}
+            />
+        @endif
+</div>

package/resources/views/components/common/page-breadcrumb.blade.php

@@ -0,0 +1,38 @@
+{{-- @props(['pageTitle' => 'Page'])
+
+<div class="flex flex-wrap items-center justify-between gap-3 mb-6">
+    <h2 class="text-xl font-semibold text-gray-800 dark:text-white/90">
+        {{ $pageTitle }}
+    </h2>
+    <nav>
+        <ol class="flex items-center gap-1.5">
+            <li>
+                <a
+                    class="inline-flex items-center gap-1.5 text-sm text-gray-500 dark:text-gray-400"
+                    href="{{ url('/') }}"
+                >
+                    Home
+                    <svg
+                        class="stroke-current"
+                        width="17"
+                        height="16"
+                        viewBox="0 0 17 16"
+                        fill="none"
+                        xmlns="http://www.w3.org/2000/svg"
+                    >
+                        <path
+                            d="M6.0765 12.667L10.2432 8.50033L6.0765 4.33366"
+                            stroke=""
+                            stroke-width="1.2"
+                            stroke-linecap="round"
+                            stroke-linejoin="round"
+                        />
+                    </svg>
+                </a>
+            </li>
+            <li class="text-sm text-gray-800 dark:text-white/90">
+                {{ $pageTitle }}
+            </li>
+        </ol>
+    </nav>
+</div> --}}

package/resources/views/components/common/preloader.blade.php

@@ -0,0 +1,9 @@
+<div
+  x-show="loaded"
+  x-init="window.addEventListener('DOMContentLoaded', () => {setTimeout(() => loaded = false, 350)})"
+  class="fixed left-0 top-0 z-999999 flex h-screen w-screen items-center justify-center bg-white dark:bg-black"
+>
+  <div
+    class="h-16 w-16 animate-spin rounded-full border-4 border-solid border-brand-500 border-t-transparent"
+  ></div>
+</div>

package/resources/views/components/common/table.blade.php

@@ -0,0 +1,73 @@
+@props([
+    'title' => null,
+    'headers' => [],
+    'rows' => [],
+])
+
+<div>
+    <div class="overflow-hidden rounded-2xl border border-gray-200 bg-white pt-4 dark:border-white/[0.05] dark:bg-white/[0.03]">
+
+        {{-- Header --}}
+        @if($title)
+        <div class="flex flex-col gap-4 px-6 mb-4 sm:flex-row sm:items-center sm:justify-between">
+            <div>
+                <h3 class="text-lg font-semibold text-gray-800 dark:text-white/90">
+                    {{ $title }}
+                </h3>
+            </div>
+        </div>
+        @endif
+
+        {{-- Table --}}
+        <div class="max-w-full overflow-x-auto">
+            <table class="w-full">
+
+                {{-- THEAD --}}
+                <thead class="border-t border-gray-100 border-y bg-gray-50 dark:border-white/[0.05] dark:bg-gray-900">
+                    <tr>
+                        @foreach($headers as $header)
+                            <th class="px-6 py-3 font-medium text-gray-500 sm:px-6 text-theme-xs dark:text-gray-400 text-start">
+                                {{ $header }}
+                            </th>
+                        @endforeach
+                        <th class="px-6 py-3 font-medium text-gray-500 sm:px-6 text-theme-xs dark:text-gray-400 text-start">
+                            Action
+                        </th>
+                    </tr>
+                </thead>
+
+                {{-- TBODY --}}
+                <tbody>
+                    @forelse($rows as $row)
+                        <tr class="border-b border-gray-100 dark:border-white/[0.05]">
+
+                            @foreach($row as $key => $cell)
+                                <td class="px-4 sm:px-6 py-3.5">
+                                    <p class="text-gray-700 text-theme-sm dark:text-gray-400">
+                                        {{ $cell }}
+                                    </p>
+                                </td>
+                            @endforeach
+                            <td class="px-4 sm:px-6 py-3.5">
+                                <button >
+                                    <svg class="text-gray-700 cursor-pointer size-5 hover:text-red-500 dark:text-gray-400 dark:hover:text-red-500" 
+                                        fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"/>
+                                    </svg>
+                                </button>
+                            </td>
+                        </tr>
+                    @empty
+                        <tr>
+                            <td colspan="{{ count($headers) }}"
+                                class="px-6 py-6 text-center text-gray-500 text-theme-sm">
+                                No data available
+                            </td>
+                        </tr>
+                    @endforelse
+                </tbody>
+
+            </table>
+        </div>
+    </div>
+</div>

package/resources/views/components/common/theme-toggle.blade.php

@@ -0,0 +1,30 @@
+<button
+    x-data="{ theme: localStorage.getItem('theme') || 'light' }"
+    x-init="
+        if (theme === 'dark') {
+            document.documentElement.classList.add('dark');
+        }
+    "
+    @click="
+        theme = theme === 'light' ? 'dark' : 'light';
+        localStorage.setItem('theme', theme);
+        if (theme === 'dark') {
+            document.documentElement.classList.add('dark');
+        } else {
+            document.documentElement.classList.remove('dark');
+        }
+    "
+    class="relative flex items-center justify-center text-gray-500 transition-colors bg-white border border-gray-200 rounded-full hover:text-dark-900 h-11 w-11 hover:bg-gray-100 hover:text-gray-700 dark:border-gray-800 dark:bg-gray-900 dark:text-gray-400 dark:hover:bg-gray-800 dark:hover:text-white"
+>
+    <!-- Dark Icon -->
+    <svg x-show="theme === 'dark'" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 20 20" width="20" height="20">
+        <path fill="currentColor" d="M9.99998 1.5415C10.4142 1.5415 10.75 1.87729 10.75 2.2915V3.5415C10.75 3.95572 10.4142 4.2915 9.99998 4.2915C9.58577 4.2915 9.24998 3.95572 9.24998 3.5415V2.2915C9.24998 1.87729 9.58577 1.5415 9.99998 1.5415Z" />
+        <!-- (rest of moon icon path here) -->
+    </svg>
+
+    <!-- Light Icon -->
+    <svg x-show="theme === 'light'" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 20 20" width="20" height="20">
+        <path fill="currentColor" d="M17.4547 11.97L18.1799 12.1611C18.265 11.8383 18.1265 11.4982 17.8401 11.3266C17.5538 11.1551 17.1885 11.1934 16.944 11.4207L17.4547 11.97Z" />
+        <!-- (rest of sun icon path here) -->
+    </svg>
+</button>

package/resources/views/components/header/user-dropdown.blade.php

@@ -0,0 +1,128 @@
+<div class="relative" x-data="{
+    dropdownOpen: false,
+    toggleDropdown() {
+        this.dropdownOpen = !this.dropdownOpen;
+    },
+    closeDropdown() {
+        this.dropdownOpen = false;
+    }
+}" @click.away="closeDropdown()">
+    <!-- User Button -->
+    <button
+        class="flex items-center text-gray-700 dark:text-gray-400"
+        @click.prevent="toggleDropdown()"
+        type="button"
+    >
+        <span class="mr-3 overflow-hidden rounded-full h-11 w-11">
+            <img src="/images/user/owner.png" alt="User" />
+        </span>
+
+       <span class="block mr-1 font-medium text-theme-sm">Musharof</span>
+
+        <!-- Chevron Icon -->
+        <svg
+            class="w-5 h-5 transition-transform duration-200"
+            :class="{ 'rotate-180': dropdownOpen }"
+            fill="none"
+            stroke="currentColor"
+            viewBox="0 0 24 24"
+        >
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path>
+        </svg>
+    </button>
+
+    <!-- Dropdown Start -->
+    <div
+        x-show="dropdownOpen"
+        x-transition:enter="transition ease-out duration-100"
+        x-transition:enter-start="transform opacity-0 scale-95"
+        x-transition:enter-end="transform opacity-100 scale-100"
+        x-transition:leave="transition ease-in duration-75"
+        x-transition:leave-start="transform opacity-100 scale-100"
+        x-transition:leave-end="transform opacity-0 scale-95"
+        class="absolute right-0 mt-[17px] flex w-[260px] flex-col rounded-2xl border border-gray-200 bg-white p-3 shadow-theme-lg dark:border-gray-800 dark:bg-gray-dark z-50"
+        style="display: none;"
+    >
+        <!-- User Info -->
+        <div>
+            <span class="block font-medium text-gray-700 text-theme-sm dark:text-gray-400">Musharof Chowdhury</span>
+            <span class="mt-0.5 block text-theme-xs text-gray-500 dark:text-gray-400">randomuser@pimjo.com</span>
+        </div>
+
+        <!-- Menu Items -->
+        <ul class="flex flex-col gap-1 pt-4 pb-3 border-b border-gray-200 dark:border-gray-800">
+            @php
+                $menuItems = [
+                    [
+                        'text' => 'Edit profile',
+                        'icon' => '<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+                            <path
+                                fill-rule="evenodd"
+                                clip-rule="evenodd"
+                                d="M12 3.5C7.30558 3.5 3.5 7.30558 3.5 12C3.5 14.1526 4.3002 16.1184 5.61936 17.616C6.17279 15.3096 8.24852 13.5955 10.7246 13.5955H13.2746C15.7509 13.5955 17.8268 15.31 18.38 17.6167C19.6996 16.119 20.5 14.153 20.5 12C20.5 7.30558 16.6944 3.5 12 3.5ZM17.0246 18.8566V18.8455C17.0246 16.7744 15.3457 15.0955 13.2746 15.0955H10.7246C8.65354 15.0955 6.97461 16.7744 6.97461 18.8455V18.856C8.38223 19.8895 10.1198 20.5 12 20.5C13.8798 20.5 15.6171 19.8898 17.0246 18.8566ZM2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12C22 17.5228 17.5228 22 12 22C6.47715 22 2 17.5228 2 12ZM11.9991 7.25C10.8847 7.25 9.98126 8.15342 9.98126 9.26784C9.98126 10.3823 10.8847 11.2857 11.9991 11.2857C13.1135 11.2857 14.0169 10.3823 14.0169 9.26784C14.0169 8.15342 13.1135 7.25 11.9991 7.25ZM8.48126 9.26784C8.48126 7.32499 10.0563 5.75 11.9991 5.75C13.9419 5.75 15.5169 7.32499 15.5169 9.26784C15.5169 11.2107 13.9419 12.7857 11.9991 12.7857C10.0563 12.7857 8.48126 11.2107 8.48126 9.26784Z"
+                                fill="currentColor"
+                            />
+                        </svg>',
+                        'path' => 'profile',
+                    ],
+                    [
+                        'text' => 'Account settings',
+                        'icon' => '<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+                           <path
+                            fill-rule="evenodd"
+                            clip-rule="evenodd"
+                            d="M10.4858 3.5L13.5182 3.5C13.9233 3.5 14.2518 3.82851 14.2518 4.23377C14.2518 5.9529 16.1129 7.02795 17.602 6.1682C17.9528 5.96567 18.4014 6.08586 18.6039 6.43667L20.1203 9.0631C20.3229 9.41407 20.2027 9.86286 19.8517 10.0655C18.3625 10.9253 18.3625 13.0747 19.8517 13.9345C20.2026 14.1372 20.3229 14.5859 20.1203 14.9369L18.6039 17.5634C18.4013 17.9142 17.9528 18.0344 17.602 17.8318C16.1129 16.9721 14.2518 18.0471 14.2518 19.7663C14.2518 20.1715 13.9233 20.5 13.5182 20.5H10.4858C10.0804 20.5 9.75182 20.1714 9.75182 19.766C9.75182 18.0461 7.88983 16.9717 6.40067 17.8314C6.04945 18.0342 5.60037 17.9139 5.39767 17.5628L3.88167 14.937C3.67903 14.586 3.79928 14.1372 4.15026 13.9346C5.63949 13.0748 5.63946 10.9253 4.15025 10.0655C3.79926 9.86282 3.67901 9.41401 3.88165 9.06303L5.39764 6.43725C5.60034 6.08617 6.04943 5.96581 6.40065 6.16858C7.88982 7.02836 9.75182 5.9539 9.75182 4.23399C9.75182 3.82862 10.0804 3.5 10.4858 3.5ZM13.5182 2L10.4858 2C9.25201 2 8.25182 3.00019 8.25182 4.23399C8.25182 4.79884 7.64013 5.15215 7.15065 4.86955C6.08213 4.25263 4.71559 4.61859 4.0986 5.68725L2.58261 8.31303C1.96575 9.38146 2.33183 10.7477 3.40025 11.3645C3.88948 11.647 3.88947 12.3531 3.40026 12.6355C2.33184 13.2524 1.96578 14.6186 2.58263 15.687L4.09863 18.3128C4.71562 19.3814 6.08215 19.7474 7.15067 19.1305C7.64015 18.8479 8.25182 19.2012 8.25182 19.766C8.25182 20.9998 9.25201 22 10.4858 22H13.5182C14.7519 22 15.7518 20.9998 15.7518 19.7663C15.7518 19.2015 16.3632 18.8487 16.852 19.1309C17.9202 19.7476 19.2862 19.3816 19.9029 18.3134L21.4193 15.6869C22.0361 14.6185 21.6701 13.2523 20.6017 12.6355C20.1125 12.3531 20.1125 11.647 20.6017 11.3645C21.6701 10.7477 22.0362 9.38152 21.4193 8.3131L19.903 5.68667C19.2862 4.61842 17.9202 4.25241 16.852 4.86917C16.3632 5.15138 15.7518 4.79856 15.7518 4.23377C15.7518 3.00024 14.7519 2 13.5182 2ZM9.6659 11.9999C9.6659 10.7103 10.7113 9.66493 12.0009 9.66493C13.2905 9.66493 14.3359 10.7103 14.3359 11.9999C14.3359 13.2895 13.2905 14.3349 12.0009 14.3349C10.7113 14.3349 9.6659 13.2895 9.6659 11.9999ZM12.0009 8.16493C9.88289 8.16493 8.1659 9.88191 8.1659 11.9999C8.1659 14.1179 9.88289 15.8349 12.0009 15.8349C14.1189 15.8349 15.8359 14.1179 15.8359 11.9999C15.8359 9.88191 14.1189 8.16493 12.0009 8.16493Z"
+                            fill="currentColor"
+                        />
+                        </svg>',
+                        'path' => 'chat'
+                    ],
+                    [
+                        'text' => 'Support',
+                        'icon' => '<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+                          <path
+                            fill-rule="evenodd"
+                            clip-rule="evenodd"
+                            d="M3.5 12C3.5 7.30558 7.30558 3.5 12 3.5C16.6944 3.5 20.5 7.30558 20.5 12C20.5 16.6944 16.6944 20.5 12 20.5C7.30558 20.5 3.5 16.6944 3.5 12ZM12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2ZM11.0991 7.52507C11.0991 8.02213 11.5021 8.42507 11.9991 8.42507H12.0001C12.4972 8.42507 12.9001 8.02213 12.9001 7.52507C12.9001 7.02802 12.4972 6.62507 12.0001 6.62507H11.9991C11.5021 6.62507 11.0991 7.02802 11.0991 7.52507ZM12.0001 17.3714C11.5859 17.3714 11.2501 17.0356 11.2501 16.6214V10.9449C11.2501 10.5307 11.5859 10.1949 12.0001 10.1949C12.4143 10.1949 12.7501 10.5307 12.7501 10.9449V16.6214C12.7501 17.0356 12.4143 17.3714 12.0001 17.3714Z"
+                            fill="currentColor"
+                          />
+                        </svg>',
+                        'path' => 'profile'
+                    ],
+                ];
+            @endphp
+
+            @foreach ($menuItems as $item)
+                <li>
+                    <a
+                        href="{{ $item['path'] }}"
+                        class="flex items-center gap-3 px-3 py-2 font-medium text-gray-700 rounded-lg group text-theme-sm hover:bg-gray-100 hover:text-gray-700 dark:text-gray-400 dark:hover:bg-white/5 dark:hover:text-gray-300"
+                    >
+                        <span class="text-gray-500 group-hover:text-gray-700 dark:group-hover:text-gray-300">
+                            {!! $item['icon'] !!}
+                        </span>
+                        {{ $item['text'] }}
+                    </a>
+                </li>
+            @endforeach
+        </ul>
+
+        <!-- Sign Out -->
+        {{-- <form method="POST" action="#">
+            @csrf --}}
+            <a
+                href="/signin"
+                class="flex items-center w-full gap-3 px-3 py-2 mt-3 font-medium text-gray-700 rounded-lg group text-theme-sm hover:bg-gray-100 hover:text-gray-700 dark:text-gray-400 dark:hover:bg-white/5 dark:hover:text-gray-300"
+                @click="closeDropdown()"
+            >
+                <span class="text-gray-500 group-hover:text-gray-700 dark:group-hover:text-gray-300">
+                    <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 16l4-4m0 0l-4-4m4 4H7m6 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h4a3 3 0 013 3v1"></path>
+                    </svg>
+                </span>
+                Sign out
+            </a>
+        {{-- </form> --}}
+    </div>
+    <!-- Dropdown End -->
+</div>

package/resources/views/components/readme.txt

@@ -0,0 +1,6 @@
+
+paste to package.json 
+
+"postinstall": "cp -r node_modules/@mamut_1945/dashboard-ui/resources/views/components resources/views/"
+
+and run npm install

package/resources/views/components/ui/alert.blade.php

@@ -0,0 +1,82 @@
+{{-- resources/views/components/alert.blade.php --}}
+
+@props([
+    'variant' => 'info',
+    'title' => '',
+    'message' => '',
+    'showLink' => false,
+    'linkHref' => '#',
+    'linkText' => 'Learn more'
+])
+
+@php
+    $variantClasses = [
+        'success' => [
+            'container' => 'border-green-500 bg-green-50 dark:border-green-500/30 dark:bg-green-500/15',
+            'icon' => 'text-green-500',
+        ],
+        'error' => [
+            'container' => 'border-red-500 bg-red-50 dark:border-red-500/30 dark:bg-red-500/15',
+            'icon' => 'text-red-500',
+        ],
+        'warning' => [
+            'container' => 'border-yellow-500 bg-yellow-50 dark:border-yellow-500/30 dark:bg-yellow-500/15',
+            'icon' => 'text-yellow-500',
+        ],
+        'info' => [
+            'container' => 'border-blue-500 bg-blue-50 dark:border-blue-500/30 dark:bg-blue-500/15',
+            'icon' => 'text-blue-500',
+        ],
+    ];
+
+    $icons = [
+        'success' => '<svg class="fill-current" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+        <path fill-rule="evenodd" clip-rule="evenodd" d="M3.70186 12.0001C3.70186 7.41711 7.41711 3.70186 12.0001 3.70186C16.5831 3.70186 20.2984 7.41711 20.2984 12.0001C20.2984 16.5831 16.5831 20.2984 12.0001 20.2984C7.41711 20.2984 3.70186 16.5831 3.70186 12.0001ZM12.0001 1.90186C6.423 1.90186 1.90186 6.423 1.90186 12.0001C1.90186 17.5772 6.423 22.0984 12.0001 22.0984C17.5772 22.0984 22.0984 17.5772 22.0984 12.0001C22.0984 6.423 17.5772 1.90186 12.0001 1.90186ZM15.6197 10.7395C15.9712 10.388 15.9712 9.81819 15.6197 9.46672C15.2683 9.11525 14.6984 9.11525 14.347 9.46672L11.1894 12.6243L9.6533 11.0883C9.30183 10.7368 8.73198 10.7368 8.38051 11.0883C8.02904 11.4397 8.02904 12.0096 8.38051 12.3611L10.553 14.5335C10.7217 14.7023 10.9507 14.7971 11.1894 14.7971C11.428 14.7971 11.657 14.7023 11.8257 14.5335L15.6197 10.7395Z" fill=""></path>
+      </svg>',
+        'error' => '<svg class="fill-current" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+        <path fill-rule="evenodd" clip-rule="evenodd" d="M3.6501 12.0001C3.6501 7.38852 7.38852 3.6501 12.0001 3.6501C16.6117 3.6501 20.3501 7.38852 20.3501 12.0001C20.3501 16.6117 16.6117 20.3501 12.0001 20.3501C7.38852 20.3501 3.6501 16.6117 3.6501 12.0001ZM12.0001 1.8501C6.39441 1.8501 1.8501 6.39441 1.8501 12.0001C1.8501 17.6058 6.39441 22.1501 12.0001 22.1501C17.6058 22.1501 22.1501 17.6058 22.1501 12.0001C22.1501 6.39441 17.6058 1.8501 12.0001 1.8501ZM10.9992 7.52517C10.9992 8.07746 11.4469 8.52517 11.9992 8.52517H12.0002C12.5525 8.52517 13.0002 8.07746 13.0002 7.52517C13.0002 6.97289 12.5525 6.52517 12.0002 6.52517H11.9992C11.4469 6.52517 10.9992 6.97289 10.9992 7.52517ZM12.0002 17.3715C11.586 17.3715 11.2502 17.0357 11.2502 16.6215V10.945C11.2502 10.5308 11.586 10.195 12.0002 10.195C12.4144 10.195 12.7502 10.5308 12.7502 10.945V16.6215C12.7502 17.0357 12.4144 17.3715 12.0002 17.3715Z" fill=""></path>
+      </svg>',
+        'warning' => '<svg class="fill-current" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+        <path fill-rule="evenodd" clip-rule="evenodd" d="M20.3499 12.0004C20.3499 16.612 16.6115 20.3504 11.9999 20.3504C7.38832 20.3504 3.6499 16.612 3.6499 12.0004C3.6499 7.38881 7.38833 3.65039 11.9999 3.65039C16.6115 3.65039 20.3499 7.38881 20.3499 12.0004ZM11.9999 22.1504C17.6056 22.1504 22.1499 17.6061 22.1499 12.0004C22.1499 6.3947 17.6056 1.85039 11.9999 1.85039C6.39421 1.85039 1.8499 6.3947 1.8499 12.0004C1.8499 17.6061 6.39421 22.1504 11.9999 22.1504ZM13.0008 16.4753C13.0008 15.923 12.5531 15.4753 12.0008 15.4753L11.9998 15.4753C11.4475 15.4753 10.9998 15.923 10.9998 16.4753C10.9998 17.0276 11.4475 17.4753 11.9998 17.4753L12.0008 17.4753C12.5531 17.4753 13.0008 17.0276 13.0008 16.4753ZM11.9998 6.62898C12.414 6.62898 12.7498 6.96476 12.7498 7.37898L12.7498 13.0555C12.7498 13.4697 12.414 13.8055 11.9998 13.8055C11.5856 13.8055 11.2498 13.4697 11.2498 13.0555L11.2498 7.37898C11.2498 6.96476 11.5856 6.62898 11.9998 6.62898Z" fill="#F04438"></path>
+      </svg>',
+        'info' => '<svg class="fill-current" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+        <path fill-rule="evenodd" clip-rule="evenodd" d="M3.6501 11.9996C3.6501 7.38803 7.38852 3.64961 12.0001 3.64961C16.6117 3.64961 20.3501 7.38803 20.3501 11.9996C20.3501 16.6112 16.6117 20.3496 12.0001 20.3496C7.38852 20.3496 3.6501 16.6112 3.6501 11.9996ZM12.0001 1.84961C6.39441 1.84961 1.8501 6.39392 1.8501 11.9996C1.8501 17.6053 6.39441 22.1496 12.0001 22.1496C17.6058 22.1496 22.1501 17.6053 22.1501 11.9996C22.1501 6.39392 17.6058 1.84961 12.0001 1.84961ZM10.9992 7.52468C10.9992 8.07697 11.4469 8.52468 11.9992 8.52468H12.0002C12.5525 8.52468 13.0002 8.07697 13.0002 7.52468C13.0002 6.9724 12.5525 6.52468 12.0002 6.52468H11.9992C11.4469 6.52468 10.9992 6.9724 10.9992 7.52468ZM12.0002 17.371C11.586 17.371 11.2502 17.0352 11.2502 16.621V10.9445C11.2502 10.5303 11.586 10.1945 12.0002 10.1945C12.4144 10.1945 12.7502 10.5303 12.7502 10.9445V16.621C12.7502 17.0352 12.4144 17.371 12.0002 17.371Z" fill=""></path>
+      </svg>',
+    ];
+
+    $containerClass = $variantClasses[$variant]['container'] ?? $variantClasses['info']['container'];
+    $iconClass = $variantClasses[$variant]['icon'] ?? $variantClasses['info']['icon'];
+    $icon = $icons[$variant] ?? $icons['info'];
+@endphp
+
+<div class="rounded-xl border p-4 {{ $containerClass }}">
+    <div class="flex items-start gap-3">
+        <div class="-mt-0.5 {{ $iconClass }}">
+            {!! $icon !!}
+        </div>
+
+        <div class="flex-1">
+            @if($title)
+                <h4 class="mb-1 text-sm font-semibold text-gray-800 dark:text-white/90">
+                    {{ $title }}
+                </h4>
+            @endif
+
+            @if($message)
+                <p class="text-sm text-gray-500 dark:text-gray-400">{{ $message }}</p>
+            @endif
+
+            @if($showLink)
+                <a 
+                    href="{{ $linkHref }}" 
+                    class="inline-block mt-3 text-sm font-medium text-gray-500 underline dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-300"
+                >
+                    {{ $linkText }}
+                </a>
+            @endif
+
+            {{-- Slot for custom content --}}
+            {{ $slot }}
+        </div>
+    </div>
+</div>

package/resources/views/components/ui/avatar.blade.php

@@ -0,0 +1,49 @@
+
+@props([
+    'src' => '',
+    'alt' => 'User Avatar',
+    'size' => 'medium',
+    'status' => 'none',
+])
+
+@php
+    $sizeClasses = [
+        'xsmall' => 'h-6 w-6 max-w-6',
+        'small' => 'h-8 w-8 max-w-8',
+        'medium' => 'h-10 w-10 max-w-10',
+        'large' => 'h-12 w-12 max-w-12',
+        'xlarge' => 'h-14 w-14 max-w-14',
+        'xxlarge' => 'h-16 w-16 max-w-16',
+    ];
+
+    $statusSizeClasses = [
+        'xsmall' => 'h-1.5 w-1.5 max-w-1.5',
+        'small' => 'h-2 w-2 max-w-2',
+        'medium' => 'h-2.5 w-2.5 max-w-2.5',
+        'large' => 'h-3 w-3 max-w-3',
+        'xlarge' => 'h-3.5 w-3.5 max-w-3.5',
+        'xxlarge' => 'h-4 w-4 max-w-4',
+    ];
+
+    $statusColorClasses = [
+        'online' => 'bg-green-500',
+        'offline' => 'bg-red-400',
+        'busy' => 'bg-yellow-500',
+    ];
+
+    $sizeClass = $sizeClasses[$size] ?? $sizeClasses['medium'];
+    $statusSizeClass = $statusSizeClasses[$size] ?? $statusSizeClasses['medium'];
+    $statusColorClass = $statusColorClasses[$status] ?? '';
+@endphp
+
+<div class="relative rounded-full {{ $sizeClass }}">
+    <img 
+        src="{{ $src }}" 
+        alt="{{ $alt }}" 
+        class="h-full w-full object-cover rounded-full"
+    />
+    
+    @if($status !== 'none')
+        <span class="absolute bottom-0 right-0 rounded-full border-[1.5px] border-white dark:border-gray-900 {{ $statusSizeClass }} {{ $statusColorClass }}"></span>
+    @endif
+</div>