New report system and views

resources/js/Pages/Settings/Workflow/Index.vue

@@ -1,9 +1,12 @@
 <script setup>
 import AppLayout from "@/Layouts/AppLayout.vue";
 import { ref } from "vue";
+import AppCard from "@/Components/app/ui/card/AppCard.vue";
+import CardTitle from "@/Components/ui/card/CardTitle.vue";
+import { Workflow } from "lucide-vue-next";
 import { Tabs, TabsList, TabsTrigger, TabsContent } from "@/Components/ui/tabs";
-import ActionTable from "../Partials/ActionTable.vue";
-import DecisionTable from "../Partials/DecisionTable.vue";
+import ActionTable from "./Partials/ActionTable.vue";
+import DecisionTable from "./Partials/DecisionTable.vue";
 
 const props = defineProps({
   actions: Array,
@@ -21,11 +24,23 @@ const activeTab = ref("actions");
     <template #header></template>
     <div class="pt-12">
       <div class="max-w-7xl mx-auto sm:px-6 lg:px-8">
-        <div class="bg-white overflow-hidden shadow-xl sm:rounded-lg">
-          <Tabs v-model="activeTab" class="w-full">
-            <TabsList class="w-full justify-start border-b rounded-none bg-transparent p-0">
-              <TabsTrigger value="actions" class="rounded-none border-b-2 border-transparent data-[state=active]:border-primary">Akcije</TabsTrigger>
-              <TabsTrigger value="decisions" class="rounded-none border-b-2 border-transparent data-[state=active]:border-primary">Odločitve</TabsTrigger>
+        <AppCard
+          title=""
+          padding="none"
+          class="p-0! gap-0"
+          header-class="py-3! px-4 gap-0 text-muted-foreground"
+          body-class=""
+        >
+          <template #header>
+            <div class="flex items-center gap-2">
+              <Workflow :size="18" />
+              <CardTitle class="uppercase">Workflow</CardTitle>
+            </div>
+          </template>
+          <Tabs v-model="activeTab" class="border-t">
+            <TabsList class="border-b w-full flex flex-row justify-baseline rounded-none">
+              <TabsTrigger value="actions">Akcije</TabsTrigger>
+              <TabsTrigger value="decisions">Odločitve</TabsTrigger>
             </TabsList>
             <TabsContent value="actions" class="mt-0">
               <ActionTable
@@ -45,7 +60,7 @@ const activeTab = ref("actions");
               />
             </TabsContent>
           </Tabs>
-        </div>
+        </AppCard>
       </div>
     </div>
   </AppLayout>