Teren-app/resources/js/Pages/Admin/Index.vue

<script setup>
import AdminLayout from "@/Layouts/AdminLayout.vue";
import { Link } from "@inertiajs/vue3";
import {
  UsersIcon,
  KeyRoundIcon,
  Settings2Icon,
  FileTextIcon,
  MailOpenIcon,
  InboxIcon,
  AtSignIcon,
  BookUserIcon,
  MessageSquareIcon,
  ArrowRightIcon,
} from "lucide-vue-next";
import {
  Card,
  CardContent,
  CardDescription,
  CardHeader,
  CardTitle,
} from "@/Components/ui/card";
import { Separator } from "@/Components/ui/separator";

const cards = [
  {
    category: "Uporabniki & Dovoljenja",
    items: [
      {
        title: "Uporabniki",
        description: "Upravljanje uporabnikov in njihovih vlog",
        route: "admin.users.index",
        icon: UsersIcon,
      },
      {
        title: "Novo dovoljenje",
        description: "Dodaj in konfiguriraj novo dovoljenje",
        route: "admin.permissions.create",
        icon: KeyRoundIcon,
      },
    ],
  },
  {
    category: "Dokumenti",
    items: [
      {
        title: "Nastavitve dokumentov",
        description: "Privzete sistemske nastavitve za dokumente",
        route: "admin.document-settings.index",
        icon: Settings2Icon,
      },
      {
        title: "Predloge dokumentov",
        description: "Upravljanje in verzioniranje DOCX predlog",
        route: "admin.document-templates.index",
        icon: FileTextIcon,
      },
    ],
  },
  {
    category: "Email",
    items: [
      {
        title: "Email predloge",
        description: "Upravljanje HTML / tekst email predlog",
        route: "admin.email-templates.index",
        icon: MailOpenIcon,
      },
      {
        title: "Email dnevniki",
        description: "Pregled poslanih emailov in statusov",
        route: "admin.email-logs.index",
        icon: InboxIcon,
      },
      {
        title: "Mail profili",
        description: "SMTP profili, nastavitve in testiranje povezave",
        route: "admin.mail-profiles.index",
        icon: AtSignIcon,
      },
    ],
  },
  {
    category: "Komunikacije",
    items: [
      {
        title: "SMS profili",
        description: "Nastavitve SMS profilov, testno pošiljanje in stanje kreditov",
        route: "admin.sms-profiles.index",
        icon: Settings2Icon,
      },
      {
        title: "SMS pošiljatelji",
        description: "Upravljanje nazivov pošiljateljev (Sender ID) za SMS profile",
        route: "admin.sms-senders.index",
        icon: BookUserIcon,
      },
      {
        title: "SMS predloge",
        description: "Tekstovne predloge za SMS obvestila in opomnike",
        route: "admin.sms-templates.index",
        icon: FileTextIcon,
      },
      {
        title: "SMS dnevniki",
        description: "Pregled poslanih SMSov in statusov",
        route: "admin.sms-logs.index",
        icon: InboxIcon,
      },
      {
        title: "SMS paketi",
        description: "Kreiranje in pošiljanje serijskih SMS paketov",
        route: "admin.packages.index",
        icon: MessageSquareIcon,
      },
    ],
  },
];
</script>

<template>
  <AdminLayout title="Administrator">
    <div class="space-y-8">
      <div v-for="(group, i) in cards" :key="group.category">
        <Separator v-if="i > 0" class="my-8" />
        <div class="mb-6">
          <h2
            class="text-xs font-semibold tracking-wider uppercase text-muted-foreground"
          >
            {{ group.category }}
          </h2>
        </div>
        <div class="grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
          <Link
            v-for="item in group.items"
            :key="item.title"
            :href="route(item.route)"
            class="group"
          >
            <Card class="h-full transition-all hover:border-primary hover:shadow-md">
              <CardHeader class="pb-3">
                <div class="flex items-start gap-4">
                  <div
                    class="inline-flex items-center justify-center w-10 h-10 rounded-lg bg-primary/10 text-primary group-hover:bg-primary/20 transition-colors shrink-0"
                  >
                    <component :is="item.icon" class="w-5 h-5" />
                  </div>
                  <div class="flex-1 min-w-0">
                    <CardTitle class="text-base flex items-center gap-2 group">
                      {{ item.title }}
                      <ArrowRightIcon
                        class="w-3.5 h-3.5 opacity-0 group-hover:opacity-100 transition-opacity text-primary"
                      />
                    </CardTitle>
                  </div>
                </div>
              </CardHeader>
              <CardContent>
                <CardDescription class="text-sm leading-relaxed line-clamp-2">
                  {{ item.description }}
                </CardDescription>
              </CardContent>
            </Card>
          </Link>
        </div>
      </div>
    </div>
  </AdminLayout>
</template>