Teren-app/resources/js/Pages/Client/Show.vue

<script setup>
import AppLayout from "@/Layouts/AppLayout.vue";
import PrimaryButton from "@/Components/PrimaryButton.vue";
import { computed, ref } from "vue";
import { Link, usePage } from "@inertiajs/vue3";
import SectionTitle from "@/Components/SectionTitle.vue";
import PersonInfoGrid from "@/Components/PersonInfoGrid.vue";
import FormCreateCase from "./Partials/FormCreateCase.vue";
import DataTableServer from "@/Components/DataTable/DataTableServer.vue";
import { hasPermission } from "@/Services/permissions";

const props = defineProps({
  client: Object,
  client_cases: Object,
  urlPrev: String,
  filters: Object,
  types: Object,
});

// Removed page-level search; DataTable or server can handle filtering elsewhere if needed
// DataTable search state
const search = ref(props.filters?.search || "");
const page = usePage();
// Expose as a callable computed: use in templates as hasPerm('permission-slug')
const hasPerm = computed(() => (permission) =>
  hasPermission(page.props.auth?.user, permission)
);

const drawerCreateCase = ref(false);

const openDrawerCreateCase = () => {
  drawerCreateCase.value = true;
};
</script>

<template>
  <AppLayout title="Client">
    <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 border-l-4 border-blue-400"
        >
          <div class="mx-auto max-w-4x1 p-3">
            <div class="flex items-center justify-between">
              <SectionTitle>
                <template #title>
                  {{ client.person.full_name }}
                </template>
              </SectionTitle>
            </div>
            <nav class="mt-2 border-b border-gray-200">
              <ul class="flex gap-6 -mb-px">
                <li>
                  <Link
                    :href="route('client.show', { uuid: client.uuid })"
                    :class="[
                      'inline-flex items-center px-3 py-2 text-sm font-medium border-b-2',
                      route().current('client.show')
                        ? 'text-indigo-600 border-indigo-600'
                        : 'text-gray-600 border-transparent hover:text-gray-800 hover:border-gray-300',
                    ]"
                  >
                    Primeri
                  </Link>
                </li>
                <li>
                  <Link
                    :href="route('client.contracts', { uuid: client.uuid })"
                    :class="[
                      'inline-flex items-center px-3 py-2 text-sm font-medium border-b-2',
                      route().current('client.contracts')
                        ? 'text-indigo-600 border-indigo-600'
                        : 'text-gray-600 border-transparent hover:text-gray-800 hover:border-gray-300',
                    ]"
                  >
                    Pogodbe
                  </Link>
                </li>
              </ul>
            </nav>
          </div>
        </div>
      </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-blue-400"
        >
          <div class="mx-auto max-w-4x1 px-2">
            <PersonInfoGrid
              :types="types"
              :person="client.person"
              :edit="hasPerm('client-edit')"
            ></PersonInfoGrid>
          </div>
        </div>
      </div>
    </div>

    <div class="py-12">
      <div class="max-w-7xl mx-auto sm:px-6 lg:px-8">
        <div class="px-3 bg-white overflow-hidden shadow-xl sm:rounded-lg">
          <div class="mx-auto max-w-4x1 py-3">
            <div
              class="flex items-center justify-between gap-3"
              v-if="hasPerm('case-edit')"
            >
              <PrimaryButton @click="openDrawerCreateCase" class="bg-blue-400"
                >Dodaj</PrimaryButton
              >
            </div>
            <DataTableServer
              class="mt-3"
              :columns="[
                { key: 'nu', label: 'Št.', sortable: false, class: 'w-40' },
                { key: 'case', label: 'Primer', sortable: false },
                { key: 'tax', label: 'Davčna', sortable: false },
                {
                  key: 'active_contracts',
                  label: 'Aktivne pogodbe',
                  sortable: false,
                  align: 'right',
                },
                {
                  key: 'balance',
                  label: 'Skupaj stanje',
                  sortable: false,
                  align: 'right',
                },
              ]"
              :rows="client_cases.data || []"
              :meta="{
                current_page: client_cases.current_page,
                per_page: client_cases.per_page,
                total: client_cases.total,
                last_page: client_cases.last_page,
              }"
              route-name="client.show"
              :route-params="{ uuid: client.uuid }"
              row-key="uuid"
              :search="search"
              :only-props="['client_cases']"
            >
              <template #cell-nu="{ row }">
                {{ row.person?.nu || "-" }}
              </template>
              <template #cell-case="{ row }">
                <Link
                  :href="route('clientCase.show', { client_case: row.uuid })"
                  class="text-indigo-600 hover:underline"
                >
                  {{ row.person?.full_name || "-" }}
                </Link>
              </template>
              <template #cell-tax="{ row }">
                {{ row.person?.tax_number || "-" }}
              </template>
              <template #cell-active_contracts="{ row }">
                <div class="text-right">{{ row.active_contracts_count ?? 0 }}</div>
              </template>
              <template #cell-balance="{ row }">
                <div class="text-right">
                  {{
                    new Intl.NumberFormat("sl-SI", {
                      style: "currency",
                      currency: "EUR",
                    }).format(Number(row.active_contracts_balance_sum ?? 0))
                  }}
                </div>
              </template>
              <template #empty>
                <div class="p-6 text-center text-gray-500">Ni zadetkov.</div>
              </template>
            </DataTableServer>
          </div>
          <!-- Pagination handled by DataTableServer -->
        </div>
      </div>
    </div>
  </AppLayout>
  <FormCreateCase
    :show="drawerCreateCase"
    @close="drawerCreateCase = false"
    :client-uuid="client?.uuid"
  />
</template>