Teren-app/resources/js/Pages/Settings/Reports/Edit.vue

<script setup>
import AppLayout from "@/Layouts/AppLayout.vue";
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/Components/ui/card";
import { Button } from "@/Components/ui/button";
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/Components/ui/tabs";
import { Badge } from "@/Components/ui/badge";
import { Link } from "@inertiajs/vue3";
import { ArrowLeft, BarChart3, Database, Columns, Filter, Code, ArrowUpDown } from "lucide-vue-next";
import EntitiesSection from "./Partials/EntitiesSection.vue";
import ColumnsSection from "./Partials/ColumnsSection.vue";
import FiltersSection from "./Partials/FiltersSection.vue";
import ConditionsSection from "./Partials/ConditionsSection.vue";
import OrdersSection from "./Partials/OrdersSection.vue";

const props = defineProps({
  report: Object,
});
</script>

<template>
  <AppLayout :title="`Edit Report: ${report.name}`">
    <template #header>
      <div class="flex items-center gap-4">
        <Link :href="route('settings.reports.index')">
          <Button variant="ghost" size="icon">
            <ArrowLeft class="h-5 w-5" />
          </Button>
        </Link>
        <div>
          <h2 class="text-xl font-semibold leading-tight text-gray-800 dark:text-gray-200">
            Edit Report: {{ report.name }}
          </h2>
          <p class="text-sm text-gray-500 dark:text-gray-400 mt-1">
            Configure entities, columns, filters, and conditions
          </p>
        </div>
      </div>
    </template>

    <div class="py-12">
      <div class="mx-auto max-w-7xl sm:px-6 lg:px-8">
        <!-- Report Info Header -->
        <Card class="mb-6">
          <CardHeader>
            <div class="flex items-start justify-between">
              <div class="flex items-center gap-3">
                <div class="flex h-12 w-12 items-center justify-center rounded-lg bg-primary/10">
                  <BarChart3 class="h-6 w-6 text-primary" />
                </div>
                <div>
                  <CardTitle>{{ report.name }}</CardTitle>
                  <CardDescription class="mt-1">
                    {{ report.description || "No description" }}
                  </CardDescription>
                </div>
              </div>
              <div class="flex gap-2">
                <Badge v-if="!report.enabled" variant="secondary">Disabled</Badge>
                <Badge v-if="report.category" variant="outline">{{ report.category }}</Badge>
              </div>
            </div>
          </CardHeader>
          <CardContent>
            <div class="grid grid-cols-3 gap-4 text-sm">
              <div>
                <span class="text-gray-500 dark:text-gray-400">Slug:</span>
                <span class="ml-2 font-mono text-xs">{{ report.slug }}</span>
              </div>
              <div>
                <span class="text-gray-500 dark:text-gray-400">Order:</span>
                <span class="ml-2">{{ report.order }}</span>
              </div>
              <div>
                <span class="text-gray-500 dark:text-gray-400">Status:</span>
                <span class="ml-2">{{ report.enabled ? "Enabled" : "Disabled" }}</span>
              </div>
            </div>
          </CardContent>
        </Card>

        <!-- Configuration Tabs -->
        <Tabs default-value="entities" class="space-y-6">
          <TabsList class="grid w-full grid-cols-5">
            <TabsTrigger value="entities" class="flex items-center gap-2">
              <Database class="h-4 w-4" />
              Entities
              <Badge variant="secondary" class="ml-1">{{ report.entities?.length || 0 }}</Badge>
            </TabsTrigger>
            <TabsTrigger value="columns" class="flex items-center gap-2">
              <Columns class="h-4 w-4" />
              Columns
              <Badge variant="secondary" class="ml-1">{{ report.columns?.length || 0 }}</Badge>
            </TabsTrigger>
            <TabsTrigger value="filters" class="flex items-center gap-2">
              <Filter class="h-4 w-4" />
              Filters
              <Badge variant="secondary" class="ml-1">{{ report.filters?.length || 0 }}</Badge>
            </TabsTrigger>
            <TabsTrigger value="conditions" class="flex items-center gap-2">
              <Code class="h-4 w-4" />
              Conditions
              <Badge variant="secondary" class="ml-1">{{ report.conditions?.length || 0 }}</Badge>
            </TabsTrigger>
            <TabsTrigger value="orders" class="flex items-center gap-2">
              <ArrowUpDown class="h-4 w-4" />
              Orders
              <Badge variant="secondary" class="ml-1">{{ report.orders?.length || 0 }}</Badge>
            </TabsTrigger>
          </TabsList>

          <TabsContent value="entities">
            <EntitiesSection :report="report" :entities="report.entities || []" />
          </TabsContent>

          <TabsContent value="columns">
            <ColumnsSection :report="report" :columns="report.columns || []" />
          </TabsContent>

          <TabsContent value="filters">
            <FiltersSection :report="report" :filters="report.filters || []" />
          </TabsContent>

          <TabsContent value="conditions">
            <ConditionsSection :report="report" :conditions="report.conditions || []" />
          </TabsContent>

          <TabsContent value="orders">
            <OrdersSection :report="report" :orders="report.orders || []" />
          </TabsContent>
        </Tabs>
      </div>
    </div>
  </AppLayout>
</template>