mbmanager-dashboard/src/components/dashboard/QuickActionsWidget.vue

<script setup>
import { useRouter } from 'vue-router';

const router = useRouter();

const actions = [
    {
        title: 'ثبت ملک جدید',
        description: 'افزودن زمین، ساختمان یا آپارتمان',
        icon: 'pi pi-file-plus',
        colorClass: 'icon-blue',
        route: '/property/create-property'
    },
    {
        title: 'ثبت تراکنش انبار',
        description: 'ثبت ورود یا خروج مصالح و اقلام',
        icon: 'pi pi-plus-circle',
        colorClass: 'icon-emerald',
        route: '/warehouse-items/create-transaction'
    },
    {
        title: 'فهرست املاک',
        description: 'جستجو، فیلتر و مدیریت اسناد',
        icon: 'pi pi-list',
        colorClass: 'icon-purple',
        route: '/property/list-properties'
    },
    {
        title: 'اقلام و موجودی انبار',
        description: 'مشاهده کاردکس و موجودی انبارها',
        icon: 'pi pi-box',
        colorClass: 'icon-amber',
        route: '/warehouse-items/list'
    }
];

function navigate(route) {
    if (route) {
        router.push(route);
    }
}
</script>

<template>
    <div class="card p-5 border border-surface-200 dark:border-surface-800 rounded-2xl bg-surface-0 dark:bg-surface-900">
        <div class="flex justify-between items-center mb-4">
            <div>
                <h3 class="font-bold text-lg text-surface-900 dark:text-surface-0 mb-1">دسترسی و عملیات سریع</h3>
                <p class="text-xs text-muted-color">میانبرهای پرکاربرد برای تسهیل امور مدیریت و ثبت</p>
            </div>
            <div class="flex items-center gap-1.5 text-xs text-emerald-600 dark:text-emerald-400 bg-emerald-50 dark:bg-emerald-950/40 px-2.5 py-1 rounded-full font-medium">
                <span class="w-2 h-2 rounded-full bg-emerald-500 animate-pulse"></span>
                سیستم آنلاین
            </div>
        </div>

        <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-3.5">
            <div v-for="item in actions" :key="item.title" @click="navigate(item.route)" class="quick-action-card group">
                <div :class="['action-icon-box', item.colorClass]">
                    <i :class="[item.icon, 'text-lg']"></i>
                </div>
                <div class="action-text-wrap truncate">
                    <h4 class="action-title">
                        {{ item.title }}
                    </h4>
                    <p class="action-desc">
                        {{ item.description }}
                    </p>
                </div>
                <div class="action-arrow">
                    <i class="pi pi-arrow-left text-xs"></i>
                </div>
            </div>
        </div>
    </div>
</template>

<style scoped>
.quick-action-card {
    position: relative;
    padding: 0.95rem 1rem;
    border-radius: 14px;
    border: 1px solid #e2e8f0;
    background: #ffffff;
    display: flex;
    align-items: center;
    gap: 0.875rem;
    cursor: pointer;
    transition: all 0.22s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.03);
    font-family: 'Estedad', sans-serif !important;
}

.quick-action-card:hover {
    transform: translateY(-2px);
    border-color: #6366f1;
    background: #f8fafc;
    box-shadow: 0 6px 18px rgba(99, 102, 241, 0.12);
}

.action-icon-box {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08);
    transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.quick-action-card:hover .action-icon-box {
    transform: scale(1.08);
}

.action-text-wrap {
    flex: 1;
    min-width: 0;
}

.action-title {
    font-size: 13.5px;
    font-weight: 700;
    color: #0f172a;
    margin: 0;
    line-height: 1.4;
    transition: color 0.2s ease;
}

.quick-action-card:hover .action-title {
    color: #4f46e5;
}

.action-desc {
    font-size: 11px;
    color: #64748b;
    margin-top: 2px;
    line-height: 1.3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.action-arrow {
    opacity: 0;
    transform: translateX(4px);
    color: #94a3b8;
    transition: all 0.2s ease;
}

.quick-action-card:hover .action-arrow {
    opacity: 1;
    transform: translateX(0);
    color: #4f46e5;
}

/* ── Gradient Icon Box Styles ── */
.icon-blue {
    background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
    color: #ffffff;
}

.icon-emerald {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    color: #ffffff;
}

.icon-purple {
    background: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%);
    color: #ffffff;
}

.icon-amber {
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
    color: #ffffff;
}

/* ── Dark Mode Styles (via .app-dark selector) ── */
:global(.app-dark) .quick-action-card {
    background: #18181b;
    border-color: #27272a;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
}

:global(.app-dark) .quick-action-card:hover {
    background: #27272a;
    border-color: #6366f1;
    box-shadow:
        0 8px 24px rgba(0, 0, 0, 0.45),
        0 0 0 1px rgba(99, 102, 241, 0.3);
}

:global(.app-dark) .action-title {
    color: #f8fafc;
}

:global(.app-dark) .quick-action-card:hover .action-title {
    color: #a5b4fc;
}

:global(.app-dark) .action-desc {
    color: #94a3b8;
}

:global(.app-dark) .action-arrow {
    color: #64748b;
}

:global(.app-dark) .quick-action-card:hover .action-arrow {
    color: #a5b4fc;
}
</style>