New report system and views

resources/js/Pages/Reports/Index.vue

@@ -1,27 +1,105 @@
 <script setup>
-import { Link } from '@inertiajs/vue3'
-import AppLayout from '@/Layouts/AppLayout.vue'
+import { Link } from "@inertiajs/vue3";
+import AppLayout from "@/Layouts/AppLayout.vue";
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "@/Components/ui/card";
+import { Button } from "@/Components/ui/button";
+import { BarChart3, FileText, TrendingUp, Activity } from "lucide-vue-next";
 
 defineProps({
   reports: { type: Array, required: true },
-})
+});
+
+// Icon mapping by category
+const reportIcons = {
+  contracts: FileText,
+  field: TrendingUp,
+  activities: Activity,
+  default: BarChart3,
+};
+
+function getReportIcon(category) {
+  return reportIcons[category] || reportIcons.default;
+}
+
+// Generate report URL with default date filters for reports that need them
+function getReportUrl(slug) {
+  const now = new Date();
+  const startOfMonth = new Date(now.getFullYear(), now.getMonth(), 1);
+  
+  // Format dates as YYYY-MM-DD
+  const formatDate = (date) => {
+    return date.toISOString().split('T')[0];
+  };
+  
+  // Report-specific default parameters
+  const reportDefaults = {
+    'field-jobs-completed': { 
+      from: formatDate(startOfMonth), 
+      to: formatDate(now) 
+    },
+    'decisions-counts': { 
+      from: formatDate(startOfMonth), 
+      to: formatDate(now) 
+    },
+    'activities-per-period': { 
+      from: formatDate(startOfMonth), 
+      to: formatDate(now),
+      period: 'day'
+    }
+  };
+  
+  const params = reportDefaults[slug];
+  
+  if (params) {
+    return route('reports.show', { slug, ...params });
+  }
+  
+  return route('reports.show', slug);
+}
 </script>
 
 <template>
   <AppLayout title="Poročila">
     <template #header />
-    <div class="pt-8">
-      <div class="max-w-7xl mx-auto sm:px-6 lg:px-8">
-        <div class="mb-6">
-          <h1 class="text-2xl font-semibold">Poročila</h1>
-          <p class="text-gray-600">Izberite poročilo za pregled in izvoz.</p>
+    <div class="pt-12">
+      <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+        <div class="mb-8">
+          <h1 class="text-3xl font-bold text-gray-900">Poročila</h1>
+          <p class="mt-2 text-sm text-muted-foreground">
+            Izberite poročilo za pregled in izvoz podatkov
+          </p>
         </div>
-        <div class="grid gap-4 md:grid-cols-2 lg:grid-cols-3">
-          <div v-for="r in reports" :key="r.slug" class="border rounded-lg p-4 bg-white shadow-sm hover:shadow-md transition">
-            <h2 class="text-lg font-medium mb-1">{{ r.name }}</h2>
-            <p class="text-sm text-gray-600 mb-3">{{ r.description }}</p>
-            <Link :href="route('reports.show', r.slug)" class="inline-flex items-center text-indigo-600 hover:underline">Odpri →</Link>
-          </div>
+
+        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
+          <Card
+            v-for="r in reports"
+            :key="r.slug"
+            class="hover:shadow-lg transition-shadow"
+          >
+            <CardHeader>
+              <div class="flex items-center gap-2">
+                <component
+                  :is="getReportIcon(r.category)"
+                  class="h-5 w-5 text-muted-foreground"
+                />
+                <CardTitle>{{ r.name }}</CardTitle>
+              </div>
+              <CardDescription>{{ r.description }}</CardDescription>
+            </CardHeader>
+            <CardContent>
+              <Link :href="getReportUrl(r.slug)">
+                <Button variant="ghost" size="sm" class="w-full justify-start">
+                  Odpri →
+                </Button>
+              </Link>
+            </CardContent>
+          </Card>
         </div>
       </div>
     </div>