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

<script setup>
import AppLayout from "@/Layouts/AppLayout.vue";
import { computed, ref } from "vue";
import { Link, usePage } from "@inertiajs/vue3";
import SectionTitle from "@/Components/SectionTitle.vue";
import PersonInfoGrid from "@/Components/PersonInfo/PersonInfoGrid.vue";
import FormCreateCase from "./Partials/FormCreateCase.vue";
import DataTable from "@/Components/DataTable/DataTable.vue";
import { hasPermission } from "@/Services/permissions";
import { Button } from "@/Components/ui/button";
import { ButtonGroup } from "@/Components/ui/button-group";
import ActionMenuItem from "@/Components/DataTable/ActionMenuItem.vue";
import { faPlus } from "@fortawesome/free-solid-svg-icons";

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>
          </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="mb-4">
              <ButtonGroup>
                <Button
                  as-child
                  :variant="route().current('client.show') ? 'default' : 'ghost'"
                >
                  <Link :href="route('client.show', { uuid: client.uuid })">
                    Primeri
                  </Link>
                </Button>
                <Button
                  as-child
                  :variant="route().current('client.contracts') ? 'default' : 'ghost'"
                >
                  <Link :href="route('client.contracts', { uuid: client.uuid })">
                    Pogodbe
                  </Link>
                </Button>
              </ButtonGroup>
            </div>
            <DataTable
              :show-search="true"
              :show-page-size="true"
              :show-add="true"
              :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,
                from: client_cases.from,
                to: client_cases.to,
                links: client_cases.links,
              }"
              route-name="client.show"
              :route-params="{ uuid: client.uuid }"
              row-key="uuid"
              :search="search"
              :only-props="['client_cases']"
            >
              <template #toolbar-add>
                <ActionMenuItem
                  v-if="hasPerm('case-edit')"
                  label="Dodaj primer"
                  :icon="faPlus"
                  @click="openDrawerCreateCase"
                />
              </template>
              <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>
            </DataTable>
          </div>
          <!-- Pagination handled by DataTableServer -->
        </div>
      </div>
    </div>
  </AppLayout>
  <FormCreateCase
    :show="drawerCreateCase"
    @close="drawerCreateCase = false"
    :client-uuid="client?.uuid"
  />
</template>