Changes to UI and other stuff

resources/js/Pages/Cases/Show.vue

@@ -3,6 +3,7 @@ import PersonInfoGrid from "@/Components/PersonInfo/PersonInfoGrid.vue";
 import SectionTitle from "@/Components/SectionTitle.vue";
 import AppLayout from "@/Layouts/AppLayout.vue";
 import { Button } from "@/Components/ui/button";
+import { Card } from "@/Components/ui/card";
 import { onBeforeMount, ref, computed } from "vue";
 import ContractDrawer from "./Partials/ContractDrawer.vue";
 import ContractTable from "./Partials/ContractTable.vue";
@@ -21,38 +22,39 @@ import CreateDialog from "@/Components/Dialogs/CreateDialog.vue";
 import { hasPermission } from "@/Services/permissions";
 import ActionMenuItem from "@/Components/DataTable/ActionMenuItem.vue";
 import { faPlus } from "@fortawesome/free-solid-svg-icons";
+import { DropdownMenu } from "@/Components/ui/dropdown-menu";
+import DropdownMenuContent from "@/Components/ui/dropdown-menu/DropdownMenuContent.vue";
+import { Badge } from "@/Components/ui/badge";
 
 const props = defineProps({
   client: Object,
   client_case: Object,
-  contracts: [Object, Array], // Can be paginated object or array (backward compatibility)
-  activities: Object,
+  contracts: Object, // Resource Collection with data/links/meta
+  activities: Object, // Resource Collection with data/links/meta
   contract_types: Array,
   account_types: { type: Array, default: () => [] },
   actions: Array,
   types: Object,
-  documents: Array,
+  documents: Object, // Resource Collection with data property
   segments: { type: Array, default: () => [] },
   all_segments: { type: Array, default: () => [] },
   current_segment: { type: Object, default: null },
   contract_doc_templates: { type: Array, default: () => [] },
 });
 
-// Extract contracts array from paginated object or use array directly
+// Extract contracts array from Resource Collection
 const contractsArray = computed(() => {
-  if (Array.isArray(props.contracts)) {
-    return props.contracts;
-  }
-  // Handle paginated contracts
-  if (props.contracts?.data) {
-    return props.contracts.data;
-  }
-  return [];
+  return props.contracts?.data || [];
 });
 
-// Check if contracts are paginated
+// Contracts are always paginated now (Resource Collection)
 const contractsPaginated = computed(() => {
-  return props.contracts && !Array.isArray(props.contracts) && props.contracts.data;
+  return props.contracts?.links !== undefined;
+});
+
+// Extract documents array from Resource Collection
+const documentsArray = computed(() => {
+  return props.documents?.data || [];
 });
 
 const page = usePage();
@@ -245,6 +247,7 @@ const submitAttachSegment = () => {
   <AppLayout title="Client case">
     <template #header></template>
     <div class="pt-12">
+      <!-- Client details -->
       <div class="max-w-7xl mx-auto sm:px-6 lg:px-8">
         <!-- Current segment badge (right aligned, above the card) -->
         <div v-if="current_segment" class="flex justify-end pb-3">
@@ -257,9 +260,7 @@ const submitAttachSegment = () => {
             </span>
           </div>
         </div>
-        <div
-          class="bg-white overflow-hidden shadow-xl sm:rounded-lg border-l-4 border-blue-500"
-        >
+        <Card class="border-l-4 border-blue-500">
           <div class="mx-auto max-w-4x1 p-3 flex justify-between items-center">
             <SectionTitle>
               <template #title>
@@ -268,21 +269,16 @@ const submitAttachSegment = () => {
                 </a>
               </template>
             </SectionTitle>
-            <button @click="showClientDetails" :hidden="clientDetails ? false : true">
-              <AngleUpIcon />
-            </button>
-            <button :hidden="clientDetails" @click="hideClietnDetails">
-              <AngleDownIcon />
-            </button>
+            <Badge variant="secondary" class="bg-blue-500 text-white dark:bg-blue-600">
+              Naročnik
+            </Badge>
           </div>
-        </div>
+        </Card>
       </div>
     </div>
     <div class="pt-1" :hidden="clientDetails">
       <div class="max-w-7xl mx-auto sm:px-6 lg:px-8">
-        <div
-          class="bg-white overflow-hidden shadow-xl sm:rounded-lg border-l-4 border-blue-400"
-        >
+        <Card class="border-l-4 border-blue-400">
           <div class="mx-auto max-w-4x1 p-3">
             <PersonInfoGrid
               :types="types"
@@ -290,37 +286,37 @@ const submitAttachSegment = () => {
               :edit="hasPerm('client-edit')"
             />
           </div>
-        </div>
+        </Card>
       </div>
     </div>
+    <!-- Case details -->
     <div class="pt-6">
       <div class="max-w-7xl mx-auto sm:px-6 lg:px-8">
-        <div
-          class="bg-white overflow-hidden shadow-xl sm:rounded-lg border-l-4 border-red-400"
-        >
+        <Card class="border-l-4 border-red-400">
           <div class="mx-auto max-w-4x1 p-3 flex items-center justify-between">
             <SectionTitle>
-              <template #title> Primer - oseba </template>
+              <template #title>{{ client_case.person.full_name }}</template>
             </SectionTitle>
-            <div
-              v-if="client_case && client_case.client_ref"
-              class="text-xs text-gray-600"
-            >
-              <span class="mr-1">Ref:</span>
-              <span
-                class="inline-block px-2 py-0.5 rounded border bg-gray-50 font-mono text-gray-700"
-                >{{ client_case.client_ref }}</span
+            <div class="flex items-center gap-2">
+              <div
+                v-if="client_case && client_case.client_ref"
+                class="text-xs text-gray-600"
               >
+                <span class="mr-1">Ref:</span>
+                <span
+                  class="inline-block px-2 py-0.5 rounded border bg-gray-50 font-mono text-gray-700"
+                  >{{ client_case.client_ref }}</span
+                >
+              </div>
+              <Badge variant="destructive" class="text-white"> Primer </Badge>
             </div>
           </div>
-        </div>
+        </Card>
       </div>
     </div>
     <div class="pt-1">
       <div class="max-w-7xl mx-auto sm:px-6 lg:px-8">
-        <div
-          class="bg-white overflow-hidden shadow-xl sm:rounded-lg border-l-4 border-red-400"
-        >
+        <Card class="border-l-4 border-red-400">
           <div class="mx-auto max-w-4x1 p-3">
             <PersonInfoGrid
               :types="types"
@@ -331,31 +327,18 @@ const submitAttachSegment = () => {
               :client-case-uuid="client_case.uuid"
             />
           </div>
-        </div>
+        </Card>
       </div>
     </div>
+    <!-- Contracts section -->
     <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 border-l-4">
+        <Card>
           <div class="mx-auto max-w-4x1">
-            <div class="flex justify-between p-3">
+            <div class="p-3">
               <SectionTitle>
                 <template #title> Pogodbe </template>
               </SectionTitle>
-              <div class="flex items-center gap-2" v-if="hasPerm('contract-edit')">
-                <Button @click="openDrawerCreateContract">Nova</Button>
-                <Button
-                  variant="outline"
-                  :disabled="availableSegments.length === 0"
-                  @click="openAttachSegment"
-                >
-                  {{
-                    availableSegments.length
-                      ? "Dodaj segment"
-                      : "Ni razpoložljivih segmentov"
-                  }}
-                </Button>
-              </div>
             </div>
             <ContractTable
               :client="client"
@@ -363,29 +346,37 @@ const submitAttachSegment = () => {
               :contracts="contractsArray"
               :contract_types="contract_types"
               :segments="segments"
+              :all_segments="all_segments"
               :templates="contract_doc_templates"
               :edit="hasPerm('contract-edit')"
               :create-doc="hasPerm('create-docs')"
               @edit="openDrawerEditContract"
               @delete="requestDeleteContract"
               @add-activity="openDrawerAddActivity"
+              @create="openDrawerCreateContract"
+              @attach-segment="openAttachSegment"
             />
-            <div v-if="contractsPaginated" class="border-t border-gray-200">
+            <div v-if="contractsPaginated" class="border-t border-gray-200 p-4">
               <Pagination
                 :links="contracts.links"
                 :from="contracts.from"
                 :to="contracts.to"
                 :total="contracts.total"
+                :per-page="contracts.per_page || 50"
+                :last-page="contracts.last_page"
+                :current-page="contracts.current_page"
+                per-page-param="contracts_per_page"
+                page-param="contracts_page"
               />
             </div>
           </div>
-        </div>
+        </Card>
       </div>
     </div>
-
-    <div class="pt-12 pb-6">
+    <!-- Activities section -->
+    <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 border-l-4">
+        <Card>
           <div class="mx-auto max-w-4x1">
             <div class="flex justify-between p-4">
               <SectionTitle>
@@ -396,39 +387,49 @@ const submitAttachSegment = () => {
               :client_case="client_case"
               :activities="activities"
               :edit="hasPerm('activity-edit')"
+              :actions="actions"
+              :contracts="contractsArray"
+              :page-size="activities.per_page || 20"
             >
               <template #add>
-                <ActionMenuItem
-                  label="Nova aktivnost"
-                  :icon="faPlus"
-                  @click="openDrawerAddActivity"
-                />
+                <Button variant="outline" size="sm" @click="openDrawerAddActivity">
+                  Nova aktivnost
+                </Button>
               </template>
             </ActivityTable>
-            <Pagination
-              :links="activities.links"
-              :from="activities.from"
-              :to="activities.to"
-              :total="activities.total"
-            />
+            <div class="border-t border-gray-200 p-4">
+              <Pagination
+                :links="activities.links"
+                :from="activities.from"
+                :to="activities.to"
+                :total="activities.total"
+                :per-page="activities.per_page || 15"
+                :last-page="activities.last_page"
+                :current-page="activities.current_page"
+                per-page-param="activities_per_page"
+                page-param="activities_page"
+              />
+            </div>
           </div>
-        </div>
+        </Card>
       </div>
     </div>
     <!-- Documents section -->
     <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 border-l-4">
+        <Card>
           <div class="mx-auto max-w-4x1">
-            <div class="flex justify-between p-4">
+            <div class="p-4">
               <SectionTitle>
                 <template #title>Dokumenti</template>
               </SectionTitle>
-              <Button @click="openUpload">Dodaj</Button>
             </div>
             <DocumentsTable
               :documents="documents"
+              :client-case="client_case"
               :edit="hasPerm('doc-edit')"
+              :page-size="documents.per_page || 15"
+              :page-size-options="[10, 15, 25, 50, 100]"
               @view="openViewer"
               @edit="openDocEdit"
               :download-url-builder="
@@ -447,9 +448,26 @@ const submitAttachSegment = () => {
                       });
                 }
               "
-            />
+            >
+              <template #add>
+                <Button variant="outline" @click="openUpload">Novi document</Button>
+              </template>
+            </DocumentsTable>
+            <div class="border-t border-gray-200 p-4">
+              <Pagination
+                :links="documents.links"
+                :from="documents.from"
+                :to="documents.to"
+                :total="documents.total"
+                :per-page="documents.per_page || 15"
+                :last-page="documents.last_page"
+                :current-page="documents.current_page"
+                per-page-param="documentsPerPage"
+                page-param="documentsPage"
+              />
+            </div>
           </div>
-        </div>
+        </Card>
       </div>
     </div>
     <DocumentUploadDialog
@@ -483,15 +501,15 @@ const submitAttachSegment = () => {
     :client_case="client_case"
     :contract="contractEditing"
   />
-    <ActivityDrawer
-      :show="drawerAddActivity"
-      @close="closeDrawer"
-      :client_case="client_case"
-      :actions="actions"
-      :contract-uuid="activityContractUuid"
-      :documents="documents"
-      :contracts="contractsArray"
-    />
+  <ActivityDrawer
+    :show="drawerAddActivity"
+    @close="closeDrawer"
+    :client_case="client_case"
+    :actions="actions"
+    :contract-uuid="activityContractUuid"
+    :documents="documentsArray"
+    :contracts="contractsArray"
+  />
   <DeleteDialog
     :show="confirmDelete.show"
     title="Izbriši pogodbo"