Phone view case updated

resources/js/Pages/Cases/Partials/ActivityDrawerMobile.vue

@@ -0,0 +1,582 @@
+<script setup>
+import DatePicker from "@/Components/DatePicker.vue";
+import CurrencyInput from "@/Components/CurrencyInput.vue";
+import { useForm as useInertiaForm, usePage } from "@inertiajs/vue3";
+import { Textarea } from "@/Components/ui/textarea";
+import { Label } from "@/Components/ui/label";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/Components/ui/select";
+import { Switch } from "@/Components/ui/switch";
+import { Button } from "@/Components/ui/button";
+import AppMultiSelect from "@/Components/app/ui/AppMultiSelect.vue";
+import {
+  Drawer,
+  DrawerContent,
+  DrawerHeader,
+  DrawerTitle,
+  DrawerFooter,
+  DrawerClose,
+} from "@/Components/ui/drawer";
+import { ScrollArea } from "@/Components/ui/scroll-area";
+import { ref, watch, computed } from "vue";
+
+const props = defineProps({
+  show: { type: Boolean, default: false },
+  client_case: { type: Object, required: true },
+  actions: { type: Array, default: () => [] },
+  contractUuid: { type: String, default: null },
+  phoneMode: { type: Boolean, default: false },
+  documents: { type: Array, default: null },
+  contracts: { type: Array, default: null },
+});
+
+const page = usePage();
+
+const decisions = ref(
+  Array.isArray(props.actions) && props.actions.length > 0
+    ? props.actions[0].decisions || []
+    : []
+);
+
+const emit = defineEmits(["close", "saved"]);
+const close = () => emit("close");
+
+const form = useInertiaForm({
+  due_date: null,
+  amount: null,
+  note: "",
+  action_id:
+    Array.isArray(props.actions) && props.actions.length > 0 ? props.actions[0].id : null,
+  decision_id:
+    Array.isArray(props.actions) &&
+    props.actions.length > 0 &&
+    Array.isArray(props.actions[0].decisions) &&
+    props.actions[0].decisions.length > 0
+      ? props.actions[0].decisions[0].id
+      : null,
+  contract_uuids: props.contractUuid
+    ? [props.contractUuid]
+    : (props.contracts || []).filter((item) => item.active == 1).map((c) => c.uuid),
+  send_auto_mail: true,
+  attach_documents: false,
+  attachment_document_ids: [],
+  call_back_at_date: null,
+  call_back_at_time: null,
+});
+
+watch(
+  () => props.actions,
+  (list) => {
+    if (!Array.isArray(list) || list.length === 0) {
+      decisions.value = [];
+      form.action_id = null;
+      form.decision_id = null;
+      return;
+    }
+    if (!form.action_id) {
+      form.action_id = list[0].id;
+    }
+    const found = list.find((el) => el.id === form.action_id) || list[0];
+    decisions.value = Array.isArray(found.decisions) ? found.decisions : [];
+    if (!form.decision_id && decisions.value.length > 0) {
+      form.decision_id = decisions.value[0].id;
+    }
+  },
+  { immediate: true }
+);
+
+watch(
+  () => form.action_id,
+  (action_id) => {
+    const a = Array.isArray(props.actions)
+      ? props.actions.find((el) => el.id === action_id)
+      : null;
+    decisions.value = Array.isArray(a?.decisions) ? a.decisions : [];
+    form.decision_id = decisions.value[0]?.id ?? null;
+    form.send_auto_mail = true;
+  }
+);
+
+watch(
+  () => props.contractUuid,
+  (cu) => {
+    form.contract_uuids = cu
+      ? [cu]
+      : (props.contracts || []).filter((item) => item.active == 1).map((c) => c.uuid);
+  }
+);
+
+watch(
+  () => props.show,
+  (visible) => {
+    if (visible) {
+      form.contract_uuids = props.contractUuid
+        ? [props.contractUuid]
+        : (props.contracts || []).filter((item) => item.active == 1).map((c) => c.uuid);
+    }
+  }
+);
+
+const store = async () => {
+  const formatDateForSubmit = (value) => {
+    if (!value) return null;
+    const d = value instanceof Date ? value : new Date(value);
+    if (isNaN(d.getTime())) return null;
+    const y = d.getFullYear();
+    const m = String(d.getMonth() + 1).padStart(2, "0");
+    const day = String(d.getDate()).padStart(2, "0");
+    return `${y}-${m}-${day}`;
+  };
+
+  const contractUuids =
+    Array.isArray(form.contract_uuids) && form.contract_uuids.length > 0
+      ? form.contract_uuids
+      : null;
+
+  const isMultipleContracts = contractUuids && contractUuids.length > 1;
+
+  const buildCallBackAt = (date, time) => {
+    if (!date) return null;
+    const t = time || "00:00";
+    const [h, m] = t.split(":");
+    const d = date instanceof Date ? date : new Date(date);
+    if (isNaN(d.getTime())) return null;
+    const y = d.getFullYear();
+    const mo = String(d.getMonth() + 1).padStart(2, "0");
+    const dy = String(d.getDate()).padStart(2, "0");
+    const hh = String(Number(h || 0)).padStart(2, "0");
+    const mm = String(Number(m || 0)).padStart(2, "0");
+    return `${y}-${mo}-${dy} ${hh}:${mm}:00`;
+  };
+
+  form
+    .transform((data) => ({
+      ...data,
+      phone_view: props.phoneMode,
+      due_date: formatDateForSubmit(data.due_date),
+      contract_uuids: contractUuids,
+      create_for_all_contracts: isMultipleContracts,
+      attachment_document_ids:
+        templateAllowsAttachments.value && data.attach_documents && !isMultipleContracts
+          ? data.attachment_document_ids
+          : [],
+      call_back_at: hasCallLaterEvent.value
+        ? buildCallBackAt(data.call_back_at_date, data.call_back_at_time)
+        : null,
+      call_back_at_date: undefined,
+      call_back_at_time: undefined,
+    }))
+    .post(route("clientCase.activity.store", props.client_case), {
+      onSuccess: () => {
+        close();
+        form.reset(
+          "due_date",
+          "amount",
+          "note",
+          "contract_uuids",
+          "call_back_at_date",
+          "call_back_at_time"
+        );
+        emit("saved");
+      },
+    });
+};
+
+const currentDecision = () => {
+  if (!Array.isArray(decisions.value) || decisions.value.length === 0) {
+    return null;
+  }
+  return (
+    decisions.value.find((d) => d.id === form.decision_id) || decisions.value[0] || null
+  );
+};
+
+const hasCallLaterEvent = computed(() => {
+  const d = currentDecision();
+  if (!d) return false;
+  return Array.isArray(d.events) && d.events.some((e) => e.key === "add_call_later");
+});
+
+watch(
+  () => hasCallLaterEvent.value,
+  (has) => {
+    if (!has) {
+      form.call_back_at_date = null;
+      form.call_back_at_time = null;
+    }
+  }
+);
+
+const showSendAutoMail = () => {
+  const d = currentDecision();
+  return !!(d && d.auto_mail && d.email_template_id);
+};
+
+const templateAllowsAttachments = computed(() => {
+  const d = currentDecision();
+  const tmpl = d?.email_template || d?.emailTemplate || null;
+  return !!(tmpl && tmpl.allow_attachments);
+});
+
+const autoMailRequiresContract = computed(() => {
+  const d = currentDecision();
+  if (!d) return false;
+  const tmpl = d.email_template || d.emailTemplate || null;
+  const types = Array.isArray(tmpl?.entity_types) ? tmpl.entity_types : [];
+  return types.includes("contract");
+});
+
+const contractItems = computed(() => {
+  return pageContracts.value.map((c) => ({
+    value: c.uuid,
+    label: c.active == 1 ? `${c.reference}` : `${c.reference} (Arhivirano)`,
+  }));
+});
+
+const autoMailDisabled = computed(() => {
+  if (!showSendAutoMail()) return false;
+  if (form.contract_uuids && form.contract_uuids.length > 1) return true;
+  if (
+    autoMailRequiresContract.value &&
+    (!form.contract_uuids || form.contract_uuids.length === 0)
+  ) {
+    return true;
+  }
+  return false;
+});
+
+const autoMailDisabledHint = computed(() => {
+  if (!showSendAutoMail()) return "";
+  if (form.contract_uuids && form.contract_uuids.length > 1) {
+    return "Avtomatska e-pošta ni na voljo pri več pogodbah.";
+  }
+  if (
+    autoMailRequiresContract.value &&
+    (!form.contract_uuids || form.contract_uuids.length === 0)
+  ) {
+    return "Ta e-poštna predloga zahteva pogodbo. Najprej izberite pogodbo.";
+  }
+  return "";
+});
+
+watch(
+  () => autoMailDisabled.value,
+  (disabled) => {
+    if (disabled) {
+      form.send_auto_mail = false;
+    }
+  }
+);
+
+const isToday = (val) => {
+  try {
+    if (!val) return false;
+    let d;
+    if (val instanceof Date) {
+      d = val;
+    } else if (typeof val === "string") {
+      const s = val.includes("T") ? val : val.replace(" ", "T");
+      d = new Date(s);
+      if (isNaN(d.getTime())) {
+        const m = val.match(/^(\d{4})-(\d{2})-(\d{2})[ T](\d{2}):(\d{2})(?::(\d{2}))?/);
+        if (m) {
+          const [_, yy, mm, dd, hh, mi, ss] = m;
+          d = new Date(
+            Number(yy),
+            Number(mm) - 1,
+            Number(dd),
+            Number(hh),
+            Number(mi),
+            Number(ss || "0")
+          );
+        }
+      }
+    } else if (typeof val === "number") {
+      d = new Date(val);
+    } else {
+      return false;
+    }
+    if (isNaN(d.getTime())) return false;
+    const today = new Date();
+    return (
+      d.getFullYear() === today.getFullYear() &&
+      d.getMonth() === today.getMonth() &&
+      d.getDate() === today.getDate()
+    );
+  } catch {
+    return false;
+  }
+};
+
+const docsSource = computed(() => {
+  if (Array.isArray(props.documents)) {
+    return props.documents;
+  }
+  const propsVal = page?.props?.value || {};
+  return Array.isArray(propsVal.documents) ? propsVal.documents : [];
+});
+
+const availableContractDocs = computed(() => {
+  if (!form.contract_uuids || form.contract_uuids.length === 0) return [];
+  if (form.contract_uuids.length > 1) return [];
+  const selectedUuid = form.contract_uuids[0];
+  const docs = docsSource.value;
+  const all = docs.filter((d) => d.contract_uuid === selectedUuid);
+  if (!props.phoneMode) return all;
+  return all.filter((d) => {
+    const mime = (d.mime_type || "").toLowerCase();
+    const isImage =
+      mime.startsWith("image/") ||
+      ["jpg", "jpeg", "png", "gif", "webp", "heic", "heif"].includes(
+        (d.extension || "").toLowerCase()
+      );
+    return isImage && isToday(d.created_at || d.createdAt);
+  });
+});
+
+const pageContracts = computed(() => {
+  if (Array.isArray(props.contracts)) {
+    return props.contracts;
+  }
+  if (props.contracts?.data) {
+    return props.contracts.data;
+  }
+  const propsVal = page?.props?.value || {};
+  if (propsVal.contracts?.data) {
+    return propsVal.contracts.data;
+  }
+  return Array.isArray(propsVal.contracts) ? propsVal.contracts : [];
+});
+
+watch(
+  [
+    () => props.phoneMode,
+    () => templateAllowsAttachments.value,
+    () => form.contract_uuids,
+    () => form.decision_id,
+    () => availableContractDocs.value.length,
+  ],
+  () => {
+    if (!props.phoneMode) return;
+    if (!templateAllowsAttachments.value) return;
+    if (!form.contract_uuids || form.contract_uuids.length !== 1) return;
+    const docs = availableContractDocs.value;
+    if (docs.length === 0) return;
+    form.attach_documents = true;
+    if (
+      !Array.isArray(form.attachment_document_ids) ||
+      form.attachment_document_ids.length === 0
+    ) {
+      form.attachment_document_ids = docs.map((d) => d.id);
+    }
+  }
+);
+</script>
+
+<template>
+  <Drawer :open="show" @update:open="(val) => !val && close()">
+    <DrawerContent class="flex flex-col max-h-[90vh]">
+      <DrawerHeader class="border-b px-4 py-3 shrink-0">
+        <DrawerTitle>Dodaj aktivnost</DrawerTitle>
+      </DrawerHeader>
+
+      <ScrollArea class="flex-1 min-h-0">
+        <form @submit.prevent="store" class="px-4 py-4 space-y-4">
+          <div class="space-y-2">
+            <Label>Akcija</Label>
+            <Select v-model="form.action_id" :disabled="!actions || !actions.length">
+              <SelectTrigger>
+                <SelectValue placeholder="Izberi akcijo" />
+              </SelectTrigger>
+              <SelectContent>
+                <SelectItem v-for="a in actions" :key="a.id" :value="a.id">
+                  {{ a.name }}
+                </SelectItem>
+              </SelectContent>
+            </Select>
+          </div>
+
+          <div class="space-y-2">
+            <Label>Odločitev</Label>
+            <Select v-model="form.decision_id" :disabled="!decisions || !decisions.length">
+              <SelectTrigger>
+                <SelectValue placeholder="Izberi odločitev" />
+              </SelectTrigger>
+              <SelectContent>
+                <SelectItem v-for="d in decisions" :key="d.id" :value="d.id">
+                  {{ d.name }}
+                </SelectItem>
+              </SelectContent>
+            </Select>
+          </div>
+
+          <div class="space-y-2">
+            <Label>Pogodbe</Label>
+            <AppMultiSelect
+              v-model="form.contract_uuids"
+              :items="contractItems"
+              placeholder="Izberi pogodbe (neobvezno)"
+              search-placeholder="Išči pogodbo..."
+              empty-text="Ni pogodb."
+              :clearable="true"
+              :show-selected-chips="true"
+            />
+            <p
+              v-if="form.contract_uuids && form.contract_uuids.length > 1"
+              class="text-xs text-muted-foreground"
+            >
+              Bo ustvarjenih {{ form.contract_uuids.length }} aktivnosti (ena za vsako
+              pogodbo).
+            </p>
+          </div>
+
+          <div class="space-y-2">
+            <Label for="activityNote">Opomba</Label>
+            <Textarea
+              id="activityNote"
+              v-model="form.note"
+              class="block w-full max-h-40"
+              placeholder="Opomba"
+            />
+          </div>
+
+          <div class="space-y-2">
+            <Label for="activityDueDate">Datum zapadlosti</Label>
+            <DatePicker
+              id="activityDueDate"
+              v-model="form.due_date"
+              format="dd.MM.yyyy"
+              :error="form.errors.due_date"
+            />
+          </div>
+
+          <div v-if="hasCallLaterEvent" class="space-y-2">
+            <Label>Datum in ura povratnega klica</Label>
+            <div class="flex gap-2">
+              <DatePicker
+                v-model="form.call_back_at_date"
+                format="dd.MM.yyyy"
+                :error="form.errors.call_back_at"
+                class="flex-1"
+              />
+              <input
+                v-model="form.call_back_at_time"
+                type="time"
+                class="flex-1 border rounded-md px-3 py-2 text-sm bg-background focus:outline-none focus:ring-2 focus:ring-ring"
+              />
+            </div>
+            <p v-if="form.errors.call_back_at" class="text-xs text-destructive">
+              {{ form.errors.call_back_at }}
+            </p>
+          </div>
+
+          <div class="space-y-2">
+            <Label for="activityAmount">Znesek</Label>
+            <CurrencyInput
+              id="activityAmount"
+              v-model="form.amount"
+              :precision="{ min: 0, max: 4 }"
+              placeholder="0,00"
+              class="w-full"
+            />
+          </div>
+
+          <div v-if="showSendAutoMail()" class="space-y-2">
+            <div class="flex items-center space-x-2">
+              <Switch v-model="form.send_auto_mail" :disabled="autoMailDisabled" />
+              <Label class="cursor-pointer">Pošlji samodejno e-pošto</Label>
+            </div>
+            <p v-if="autoMailDisabled" class="text-xs text-amber-600">
+              {{ autoMailDisabledHint }}
+            </p>
+
+            <div
+              v-if="
+                templateAllowsAttachments &&
+                form.contract_uuids &&
+                form.contract_uuids.length === 1
+              "
+              class="mt-3"
+            >
+              <label class="inline-flex items-center gap-2">
+                <Switch v-model="form.attach_documents" />
+                <span class="text-sm">Dodaj priponke iz izbrane pogodbe</span>
+              </label>
+              <div
+                v-if="form.attach_documents"
+                class="mt-2 border rounded p-2 max-h-40 overflow-auto"
+              >
+                <div class="text-xs text-gray-600 mb-2">
+                  Izberite dokumente, ki bodo poslani kot priponke:
+                </div>
+                <div class="space-y-1">
+                  <template v-for="c in pageContracts" :key="c.uuid || c.id">
+                    <div v-if="c.uuid === form.contract_uuids[0]">
+                      <div class="font-medium text-sm text-gray-700 mb-1">
+                        Pogodba {{ c.reference }}
+                      </div>
+                      <div class="space-y-1">
+                        <div
+                          v-for="doc in availableContractDocs"
+                          :key="doc.uuid || doc.id"
+                          class="flex items-center max-w-sm gap-2 text-sm"
+                        >
+                          <Switch
+                            :model-value="form.attachment_document_ids.includes(doc.id)"
+                            @update:model-value="
+                              (checked) => {
+                                if (checked) {
+                                  if (!form.attachment_document_ids.includes(doc.id)) {
+                                    form.attachment_document_ids.push(doc.id);
+                                  }
+                                } else {
+                                  form.attachment_document_ids =
+                                    form.attachment_document_ids.filter(
+                                      (id) => id !== doc.id
+                                    );
+                                }
+                              }
+                            "
+                          />
+                          <div class="wrap-anywhere">
+                            <p>
+                              <span>{{ doc.name }}.{{ doc.extension }}</span>
+                            </p>
+                            <span class="text-xs text-gray-400"
+                              >({{ doc.extension?.toUpperCase() || "" }},
+                              {{ (doc.size / 1024 / 1024).toFixed(2) }} MB)</span
+                            >
+                          </div>
+                        </div>
+                      </div>
+                    </div>
+                  </template>
+                  <div
+                    v-if="availableContractDocs.length === 0"
+                    class="text-sm text-gray-500"
+                  >
+                    Ni dokumentov, povezanih s to pogodbo.
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </form>
+      </ScrollArea>
+
+      <DrawerFooter class="border-t shrink-0 flex-row gap-2 px-4 py-3">
+        <Button class="flex-1" :disabled="form.processing" @click="store">
+          Shrani
+        </Button>
+        <DrawerClose as-child>
+          <Button variant="outline" class="flex-1" @click="close">Prekliči</Button>
+        </DrawerClose>
+      </DrawerFooter>
+    </DrawerContent>
+  </Drawer>
+</template>

resources/js/Pages/Phone/Case/Index.vue

@@ -1,11 +1,11 @@
 <script setup>
 import AppPhoneLayout from "@/Layouts/AppPhoneLayout.vue";
 import PersonDetailPhone from "@/Components/PersonDetailPhone.vue";
-import DocumentViewerDialog from "@/Components/DocumentsTable/DocumentViewerDialog.vue";
+import DocumentViewerDrawer from "@/Components/DocumentsTable/DocumentViewerDrawer.vue";
 import { classifyDocument } from "@/Services/documents";
 import { reactive, ref, computed, watch } from "vue";
 import { useForm, router } from "@inertiajs/vue3";
-import ActivityDrawer from "@/Pages/Cases/Partials/ActivityDrawer.vue";
+import ActivityDrawerMobile from "@/Pages/Cases/Partials/ActivityDrawerMobile.vue";
 import {
   Card,
   CardContent,
@@ -24,13 +24,14 @@ import {
   AccordionTrigger,
 } from "@/Components/ui/accordion";
 import {
-  Dialog,
-  DialogContent,
-  DialogDescription,
-  DialogFooter,
-  DialogHeader,
-  DialogTitle,
-} from "@/Components/ui/dialog";
+  Drawer,
+  DrawerContent,
+  DrawerHeader,
+  DrawerTitle,
+  DrawerFooter,
+  DrawerClose,
+} from "@/Components/ui/drawer";
+import { ScrollArea } from "@/Components/ui/scroll-area";
 import {
   AlertDialog,
   AlertDialogAction,
@@ -57,7 +58,14 @@ import {
   Eye,
   Building2,
   Activity,
+  ChevronDown,
+  ChevronUp,
+  NotebookIcon,
+  NotebookPenIcon,
+  ListPlusIcon,
+  HouseIcon,
 } from "lucide-vue-next";
+import { fmtCurrency, fmtDateDMY } from "@/Utilities/functions";
 
 const props = defineProps({
   client: Object,
@@ -136,6 +144,14 @@ function formatDateShort(val) {
   }
 }
 
+function textTrancate(text, maxLength = 100, showAll = false) {
+  if (!text) return "";
+
+  if (showAll) return text;
+
+  return text.length > maxLength ? text.slice(0, maxLength) + "…" : text;
+}
+
 function activityActionLine(a) {
   const base = a?.action?.name || "";
   const decision = a?.decision?.name ? ` → ${a.decision.name}` : "";
@@ -264,6 +280,18 @@ function closeObjectsModal() {
   objectsModal.contract = null;
 }
 
+// Expanded activity notes
+const expandedNotes = ref(new Set());
+const toggleNote = (id) => {
+  const next = new Set(expandedNotes.value);
+  if (next.has(id)) {
+    next.delete(id);
+  } else {
+    next.add(id);
+  }
+  expandedNotes.value = next;
+};
+
 // Client details (Stranka) summary
 const clientSummary = computed(() => {
   const p = props.client?.person || {};
@@ -313,16 +341,17 @@ const clientSummary = computed(() => {
     <div class="py-4 sm:py-2">
       <div class="mx-auto max-w-5xl px-2 sm:px-4 space-y-4">
         <!-- Client details (account holder) -->
-        <Card class="p-0 py-3 gap-3">
-          <CardHeader class="px-3 py-2">
-            <CardTitle class="flex items-center gap-2 text-base">
-              <Building2 class="w-5 h-5 text-gray-500" />
-              <span class="truncate">{{ clientSummary.name }}</span>
+        <Card class="p-0 py-2! gap-2">
+          <CardHeader class="px-3 py-2! border-b">
+            <CardTitle class="flex items-center gap-2 text-base justify-between">
+              <div class="flex flex-row items-center gap-1">
+                <Building2 class="w-5 h-5" />
+                <p class="wrap-break-word max-w-36">{{ clientSummary.name }}</p>
+              </div>
               <Badge variant="secondary">Naročnik</Badge>
             </CardTitle>
           </CardHeader>
-          <CardContent class="px-3">
-            <Separator class="mb-4" />
+          <CardContent class="px-2">
             <PersonDetailPhone
               :types="types"
               :person="client.person"
@@ -332,11 +361,13 @@ const clientSummary = computed(() => {
         </Card>
 
         <!-- Person (case person) -->
-        <Card class="p-0 py-3 gap-3">
-          <CardHeader class="px-3 py-2">
-            <CardTitle class="flex items-center gap-2 text-base">
-              <User class="w-5 h-5 text-gray-500" />
-              <span class="truncate">{{ client_case.person.full_name }}</span>
+        <Card class="p-0 py-2! gap-2">
+          <CardHeader class="px-3 py-2! border-b">
+            <CardTitle class="flex items-center gap-2 text-base justify-between">
+              <div class="flex flex-row items-center gap-1">
+                <User class="w-5 h-5" />
+                <p class="wrap-break-word max-w-36">{{ client_case.person.full_name }}</p>
+              </div>
               <Badge variant="secondary">Primer</Badge>
             </CardTitle>
             <CardDescription
@@ -353,8 +384,7 @@ const clientSummary = computed(() => {
               {{ client_case.person.employer }}
             </p>
           </CardHeader>
-          <CardContent class="px-3">
-            <Separator class="mb-4" />
+          <CardContent class="px-2">
             <PersonDetailPhone
               :types="types"
               :person="client_case.person"
@@ -364,186 +394,120 @@ const clientSummary = computed(() => {
         </Card>
 
         <!-- Contracts assigned to me -->
-        <Card class="p-0 py-3 gap-1">
-          <CardHeader class="px-3 py-2 pb-0">
-            <CardTitle class="flex items-center gap-2">
-              <FileText class="w-5 h-5" />
-              Pogodbe
+        <Card class="p-0 py-2! gap-2">
+          <CardHeader class="px-3 py-2! border-b">
+            <CardTitle class="flex items-center justify-between">
+              <div class="flex flex-row items-center gap-1">
+                <FileText class="w-5 h-5" />
+                <span>Pogodbe</span>
+              </div>
+              <Badge v-if="contracts?.length" variant="secondary" class="ml-1 text-sm">
+                {{ contracts.length }}
+              </Badge>
             </CardTitle>
           </CardHeader>
-          <CardContent class="p-2 space-y-1">
-            <Card
-              v-for="c in contracts"
-              :key="c.uuid || c.id"
-              class="overflow-hidden p-0 gap-2"
-            >
-              <!-- Contract header: reference + type badge -->
-              <CardHeader class="p-3 pb-2 gap-0">
-                <div class="flex items-center flex-wrap">
-                  <CardTitle class="text-base font-semibold">
-                    {{ c.reference || "Šifra pogodbe ni določena" }}
-                  </CardTitle>
-                </div>
-              </CardHeader>
-
-              <!-- Balance row -->
-              <div
-                v-if="c.account"
-                class="mx-3 rounded-xl bg-red-50 dark:bg-red-950/20 border border-red-100 dark:border-red-900 px-2 py-2 flex items-center justify-between"
+          <CardContent class="px-0">
+            <Accordion v-if="contracts?.length" type="multiple" class="w-full mb-2">
+              <AccordionItem
+                v-for="c in contracts"
+                :key="c.uuid || c.id"
+                :value="c.uuid || c.id"
+                class="py-2 last:border-b-0"
               >
-                <div class="flex items-center gap-2 text-red-500">
-                  <Euro class="w-4 h-4 shrink-0" />
-                  <span class="text-xs font-medium uppercase tracking-wide text-red-400"
-                    >Odprto</span
-                  >
-                </div>
-                <span
-                  class="text-2xl font-bold text-red-600 dark:text-red-400 tabular-nums"
+                <AccordionTrigger
+                  class="px-3 py-2 text-sm font-medium tracking-wide flex items-center gap-2"
                 >
-                  {{ formatAmount(c.account.balance_amount) }} €
-                </span>
-              </div>
-
-              <!-- Collapsibles: description, meta, last object -->
-              <CardContent
-                v-if="
-                  c.description ||
-                  c.latest_object ||
-                  (c.meta && Object.keys(c.meta).length)
-                "
-                class="pt-0 px-0 space-y-0"
-              >
-                <!-- Description + Meta + Latest Object Accordion -->
-                <template
-                  v-if="
-                    c.description ||
-                    (c.meta && Object.keys(c.meta).length) ||
-                    c.latest_object
-                  "
-                >
-                  <Separator />
-                  <Accordion type="multiple" class="w-full">
-                    <AccordionItem
-                      v-if="c.description"
-                      value="description"
-                      class="border-b-0"
+                  <div class="flex items-center gap-2">
+                    <p
+                      class="font-bold rounded-md bg-accent max-w-36 px-3 py-2 wrap-break-word"
                     >
-                      <AccordionTrigger
-                        class="px-3 py-2 text-xs font-medium uppercase tracking-wide hover:no-underline"
-                      >
-                        Opis
-                      </AccordionTrigger>
-                      <AccordionContent class="px-3 pb-3">
-                        <p
-                          class="text-sm text-gray-700 dark:text-gray-300 whitespace-pre-line rounded-lg bg-gray-50 dark:bg-gray-800/50 px-3 py-2.5"
-                        >
-                          {{ c.description }}
-                        </p>
-                      </AccordionContent>
-                    </AccordionItem>
-                    <AccordionItem
-                      v-if="c.meta && Object.keys(c.meta).length"
-                      value="meta"
-                      class="border-b-0"
-                      :class="c.description ? 'border-t' : ''"
+                      {{ c.reference || "Šifra pogodbe ni določena" }}
+                    </p>
+                    <span
+                      class="font-bold rounded-md px-3 py-2 bg-red-50 text-red-600 border-red-100 tabular-nums"
+                      >{{ fmtCurrency(c.account.balance_amount) }}
+                    </span>
+                  </div>
+                  <div class="flex flex-row gap-2 flex-1 justify-end-safe pr-3">
+                    <Button variant="outline" @click.stop="openDrawerAddActivity(c)">
+                      <Activity class="w-4 h-4" />
+                    </Button>
+                    <Button variant="outline" @click.stop="openDocDialog(c)">
+                      <Upload class="w-4 h-4" />
+                    </Button>
+                  </div>
+                </AccordionTrigger>
+                <AccordionContent class="px-4">
+                  <div class="flex flex-col gap-1">
+                    <div class="flex items-center justify-between border-b p-2">
+                      <span class="font-bold"> Opis </span>
+                      <NotebookPenIcon :size="18" />
+                    </div>
+                    <p class="wrap-break-word p-2 max-w-xs">
+                      {{ textTrancate(c.description, 50, false) }}
+                    </p>
+                  </div>
+                  <template v-if="c.meta && Object.keys(c.meta).length > 0">
+                    <Separator class="my-1" />
+                    <div
+                      v-if="c.meta && Object.keys(c.meta).length > 0"
+                      class="flex flex-col gap-1"
                     >
-                      <AccordionTrigger
-                        class="px-3 py-2 text-xs font-medium uppercase tracking-wide hover:no-underline"
-                      >
-                        <div>
-                          <span class="mr-1">Dodatni podatki</span>
-                          <Badge
-                            class="bg-blue-500 text-white dark:bg-blue-600 h-5 min-w-5 rounded-full px-2 font-mono tabular-nums"
-                            >{{ Object.keys(c.meta).length }}</Badge
-                          >
-                        </div>
-                      </AccordionTrigger>
-                      <AccordionContent class="pb-2">
+                      <div class="flex items-center justify-between border-b p-2">
+                        <span class="font-bold"> Dodatno </span>
+                        <ListPlusIcon :size="18" />
+                      </div>
+                      <div class="grid grid-cols-2 gap-1">
                         <div
-                          class="divide-y divide-gray-100 dark:divide-gray-700 rounded-lg border border-gray-100 dark:border-gray-700 overflow-hidden"
+                          v-for="(val, key) in c.meta"
+                          :key="key"
+                          class="flex items-center justify-between gap-3 px-3 py-2 bg-gray-50 dark:bg-gray-800/50 even:bg-gray-100 dark:even:bg-gray-700/50 rounded-lg"
                         >
-                          <div
-                            v-for="(val, key) in c.meta"
-                            :key="key"
-                            class="flex items-center justify-between gap-3 px-3 py-2 bg-white dark:bg-gray-900 even:bg-gray-50/60 dark:even:bg-gray-800/40"
+                          <span
+                            class="text-xs text-gray-500 dark:text-gray-400 shrink-0 uppercase"
+                            >{{ val?.title?.replace(/_/g, " ") || key }}</span
                           >
-                            <span
-                              class="text-xs text-gray-500 dark:text-gray-400 shrink-0"
-                              >{{ val?.title || key }}</span
-                            >
-                            <span
-                              class="text-xs font-semibold text-gray-800 dark:text-gray-200 text-right"
-                            >
-                              <template v-if="val?.type === 'date'">{{
-                                formatDateShort(val.value) || val.value || "—"
-                              }}</template>
-                              <template v-else-if="val?.type === 'number'">{{
-                                val.value ?? "—"
-                              }}</template>
-                              <template v-else>{{ val?.value ?? val ?? "—" }}</template>
-                            </span>
-                          </div>
-                        </div>
-                      </AccordionContent>
-                    </AccordionItem>
-                    <AccordionItem
-                      v-if="c.latest_object"
-                      value="latest_object"
-                      class="border-b-0"
-                      :class="
-                        c.description || (c.meta && Object.keys(c.meta).length)
-                          ? 'border-t'
-                          : ''
-                      "
-                    >
-                      <AccordionTrigger
-                        class="px-3 py-2 text-xs font-medium uppercase tracking-wide hover:no-underline"
-                      >
-                        Zadnji predmet
-                      </AccordionTrigger>
-                      <AccordionContent class="px-3 pb-3">
-                        <div
-                          class="text-sm text-gray-700 dark:text-gray-300 whitespace-pre-line rounded-lg bg-gray-50 dark:bg-gray-800/50 px-3 py-2.5"
-                        >
-                          <p class="text-sm font-medium text-gray-800 dark:text-gray-200">
-                            {{ c.latest_object.name || c.latest_object.reference }}
-                            <span
-                              v-if="c.latest_object.type"
-                              class="ml-1.5 text-xs font-normal text-gray-400"
-                              >({{ c.latest_object.type }})</span
-                            >
-                          </p>
                           <p
-                            v-if="c.latest_object.description"
-                            class="text-xs text-gray-500 dark:text-gray-400 mt-1"
+                            class="text-xs wrap-break-word font-semibold text-gray-800 dark:text-gray-200 text-right"
                           >
-                            {{ c.latest_object.description }}
+                            <template v-if="val?.type === 'date'">{{
+                              formatDateShort(val.value) || val.value || ""
+                            }}</template>
+                            <template v-else-if="val?.type === 'number'">{{
+                              val.value.toString().replace(/\./, ",") ?? ""
+                            }}</template>
+                            <template v-else>{{ val?.value ?? val ?? "" }}</template>
                           </p>
                         </div>
-                      </AccordionContent>
-                    </AccordionItem>
-                  </Accordion>
-                </template>
-              </CardContent>
-
-              <!-- Action buttons: full-width row at bottom -->
-              <div class="grid grid-cols-2 gap-0 border-t mt-0">
-                <button
-                  class="flex items-center justify-center gap-2 py-3 bg-secondary text-sm font-medium text-accent-foreground hover:bg-secondary/5 active:bg-secondary/10 transition-colors border-r"
-                  @click="openDrawerAddActivity(c)"
-                >
-                  <Plus class="w-4 h-4" />
-                  Aktivnost
-                </button>
-                <button
-                  class="flex items-center justify-center gap-2 py-3 bg-secondary text-sm font-medium text-accent-foreground hover:bg-secondary/5 active:bg-secondary/10 transition-colors"
-                  @click="openDocDialog(c)"
-                >
-                  <Upload class="w-4 h-4" />
-                  Dokument
-                </button>
-              </div>
-            </Card>
+                      </div>
+                    </div>
+                  </template>
+                  <template v-if="c.latest_object">
+                    <Separator class="my-1" />
+                    <div class="flex flex-col gap-1">
+                      <div class="flex items-center justify-between border-b p-2">
+                        <span class="font-bold"> Zadnji predmet </span>
+                        <HouseIcon :size="18" />
+                      </div>
+                      <div class="p-2 max-w-xs flex items-center gap-1">
+                        <p class="font-medium wrap-break-word">
+                          {{ c.latest_object.name || c.latest_object.reference }}
+                        </p>
+                        <Badge variant="outline" v-if="c.latest_object.type">{{
+                          c.latest_object.type
+                        }}</Badge>
+                        <p
+                          v-if="c.latest_object.description"
+                          class="text-xs text-gray-500 dark:text-gray-400 mt-1"
+                        >
+                          {{ c.latest_object.description }}
+                        </p>
+                      </div>
+                    </div>
+                  </template>
+                </AccordionContent>
+              </AccordionItem>
+            </Accordion>
             <p
               v-if="!contracts?.length"
               class="text-sm text-gray-600 dark:text-gray-400 text-center py-4"
@@ -555,29 +519,56 @@ const clientSummary = computed(() => {
 
         <!-- Activities -->
         <Card class="p-0 py-2 gap-2">
-          <CardHeader class="px-3 py-2">
+          <CardHeader class="px-3 py-1! border-b">
             <div class="flex items-center justify-between">
               <CardTitle class="flex items-center gap-2">
-                <Activity class="w-5 h-5" />
+                <Activity class="w-4 h-4" />
                 Aktivnosti
               </CardTitle>
               <Button size="lg" @click="openDrawerAddActivity()">
-                <Plus class="w-6 h-6" />
-                <span class=" text-lg">Dodaj aktivnost</span>
+                <span class="text-sm">Nova Aktivnost</span>
+                <Plus :size="14" />
               </Button>
             </div>
           </CardHeader>
-          <CardContent class="space-y-1 px-2">
+          <CardContent class="p-0">
             <Card
               v-for="a in activities"
               :key="a.id"
-              class="bg-gray-50/70 dark:bg-gray-800/50 p-0 py-2 gap-2"
+              class="p-0 py-2 gap-0 rounded-none border-x-0 border-t-0 border-b border-gray-200 dark:border-gray-700 last:border-b-0 shadow-none"
             >
               <CardHeader class="px-3 py-2">
                 <div class="flex items-start justify-between">
-                  <CardTitle class="text-sm font-medium truncate">
-                    {{ activityActionLine(a) || "Aktivnost" }}
-                  </CardTitle>
+                  <div class="flex flex-col gap-1">
+                    <CardTitle class="text-sm font-medium truncate">
+                      {{ activityActionLine(a) || "Aktivnost" }}
+                    </CardTitle>
+                    <CardDescription class="flex flex-wrap gap-1.5">
+                      <Badge v-if="a.contract" variant="secondary" class="text-xs">
+                        <FileText class="w-3 h-3" />
+                        Pogodba: {{ a.contract.reference }}
+                      </Badge>
+                      <Badge
+                        v-if="a.due_date"
+                        variant="secondary"
+                        class="bg-amber-100 text-amber-700 hover:bg-amber-100"
+                      >
+                        <Calendar class="w-3 h-3" />
+                        Zapadlost: {{ fmtDateDMY(a.due_date) || "" }}
+                      </Badge>
+                      <Badge
+                        v-if="a.amount != null"
+                        variant="secondary"
+                        class="bg-emerald-100 text-emerald-700 hover:bg-emerald-100"
+                      >
+                        <Euro class="w-3 h-3" />
+                        Znesek: {{ fmtCurrency(a.amount) }}
+                      </Badge>
+                      <Badge v-if="a.status" variant="outline" class="text-[10px]">
+                        {{ a.status }}
+                      </Badge>
+                    </CardDescription>
+                  </div>
                   <div
                     class="shrink-0 text-right text-xs text-gray-500 dark:text-gray-400"
                   >
@@ -595,38 +586,23 @@ const clientSummary = computed(() => {
                   </div>
                 </div>
               </CardHeader>
-              <CardContent class="p-2 pt-0 space-y-2">
-                <div class="flex flex-wrap gap-1.5">
-                  <Badge v-if="a.contract" variant="secondary" class="text-[10px]">
-                    <FileText class="w-3 h-3 mr-1" />
-                    Pogodba: {{ a.contract.reference }}
-                  </Badge>
-                  <Badge
-                    v-if="a.due_date"
-                    variant="secondary"
-                    class="bg-amber-100 text-amber-700 hover:bg-amber-100 text-[10px]"
-                  >
-                    <Calendar class="w-3 h-3 mr-1" />
-                    Zapadlost: {{ formatDateShort(a.due_date) || a.due_date }}
-                  </Badge>
-                  <Badge
-                    v-if="a.amount != null"
-                    variant="secondary"
-                    class="bg-emerald-100 text-emerald-700 hover:bg-emerald-100 text-[10px]"
-                  >
-                    <Euro class="w-3 h-3 mr-1" />
-                    Znesek: {{ formatAmount(a.amount) }} €
-                  </Badge>
-                  <Badge v-if="a.status" variant="outline" class="text-[10px]">
-                    {{ a.status }}
-                  </Badge>
-                </div>
-                <p
+              <CardContent class="px-2 py-0">
+                <div
                   v-if="a.note"
-                  class="text-sm text-gray-900 dark:text-gray-300 whitespace-pre-line rounded-lg bg-secondary dark:bg-gray-800/50 p-2"
+                  class="flex flex-col gap-1 cursor-pointer bg-accent rounded-lg p-2"
+                  @click="toggleNote(a.id)"
                 >
-                  {{ a.note }}
-                </p>
+                  <p class="leading-7 wrap-break-word text-sm whitespace-pre-line">
+                    {{ textTrancate(a.note, 50, expandedNotes.has(a.id)) }}
+                  </p>
+                  <div class="flex justify-end">
+                    <Badge variant="outline" v-if="a.note?.length > 50">
+                      <ChevronDown v-if="!expandedNotes.has(a.id)" :size="14" />
+                      <ChevronUp v-else :size="14" />
+                      {{ expandedNotes.has(a.id) ? "Skrij" : "Pokaži več" }}</Badge
+                    >
+                  </div>
+                </div>
               </CardContent>
             </Card>
             <p
@@ -640,28 +616,28 @@ const clientSummary = computed(() => {
 
         <!-- Documents (case + assigned contracts) -->
         <Card class="p-0 py-2 gap-2">
-          <CardHeader class="px-3 py-2">
+          <CardHeader class="px-3 py-1! border-b">
             <div class="flex items-center justify-between">
-              <CardTitle class="flex items-center gap-2">
-                <FileText class="w-5 h-5" />
+              <CardTitle class="flex items-center gap-1">
+                <FileText class="w-4 h-4" />
                 Dokumenti
               </CardTitle>
-              <Button size="sm" variant="secondary" @click="openDocDialog()">
-                <Upload class="w-4 h-4 mr-1" />
+              <Button size="lg" variant="secondary" @click="openDocDialog()">
                 Dodaj
+                <Upload class="w-4 h-4" />
               </Button>
             </div>
           </CardHeader>
-          <CardContent>
+          <CardContent class="p-0">
             <div class="divide-y">
-              <div v-for="d in documents" :key="d.uuid || d.id" class="py-3 first:pt-0">
+              <div v-for="d in documents" :key="d.uuid || d.id" class="p-3 first:pt-0">
                 <div class="flex items-start justify-between gap-3">
-                  <div class="min-w-0 flex-1">
+                  <div class="flex-1">
                     <div
-                      class="font-medium text-gray-900 dark:text-gray-100 truncate flex items-center gap-2"
+                      class="font-medium text-gray-900 dark:text-gray-100 flex items-center gap-2"
                     >
                       <FileText class="w-4 h-4 text-gray-400 shrink-0" />
-                      {{ d.name || d.original_name }}
+                      <p class="wrap-break-word">{{ d.name || d.original_name }}</p>
                     </div>
                     <div
                       class="text-xs text-gray-500 dark:text-gray-400 mt-1 flex items-center gap-2 flex-wrap"
@@ -691,7 +667,7 @@ const clientSummary = computed(() => {
                       {{ d.description }}
                     </p>
                   </div>
-                  <div class="shrink-0 flex gap-2">
+                  <div class="flex gap-1">
                     <Button size="sm" variant="ghost" @click="openViewer(d)">
                       <Eye class="w-4 h-4" />
                     </Button>
@@ -733,7 +709,7 @@ const clientSummary = computed(() => {
       </div>
     </div>
 
-    <DocumentViewerDialog
+    <DocumentViewerDrawer
       :show="viewer.open"
       :src="viewer.src"
       :title="viewer.title"
@@ -741,7 +717,7 @@ const clientSummary = computed(() => {
       :filename="viewer.filename"
       @close="closeViewer"
     />
-    <ActivityDrawer
+    <ActivityDrawerMobile
       :show="drawerAddActivity"
       @close="closeDrawer"
       @saved="onActivitySaved"
@@ -776,51 +752,61 @@ const clientSummary = computed(() => {
       </AlertDialogContent>
     </AlertDialog>
 
-    <!-- Upload Document Dialog -->
-    <Dialog :open="docDialogOpen" @update:open="docDialogOpen = $event">
-      <DialogContent class="max-w-md">
-        <DialogHeader>
-          <DialogTitle>Dodaj dokument</DialogTitle>
-          <DialogDescription v-if="selectedContract">
+    <!-- Upload Document Drawer -->
+    <Drawer :open="docDialogOpen" @update:open="(val) => !val && closeDocDialog()">
+      <DrawerContent class="flex flex-col max-h-[90vh]">
+        <DrawerHeader class="border-b px-4 py-3 shrink-0">
+          <DrawerTitle>Dodaj dokument</DrawerTitle>
+          <p v-if="selectedContract" class="text-sm text-muted-foreground mt-1">
             Dokument bo dodan k pogodbi:
             <strong>{{ selectedContract.reference || selectedContract.uuid }}</strong>
-          </DialogDescription>
-        </DialogHeader>
-        <div class="space-y-4">
-          <div>
-            <Label for="docFile">Datoteka</Label>
-            <Input id="docFile" type="file" class="mt-1" @change="onPickDocument" />
-            <p v-if="docForm.errors.file" class="text-sm text-red-600 mt-1">
-              {{ docForm.errors.file }}
-            </p>
+          </p>
+        </DrawerHeader>
+        <ScrollArea class="flex-1 min-h-0">
+          <div class="px-4 py-4 space-y-4">
+            <div>
+              <Label for="docFile">Datoteka</Label>
+              <Input id="docFile" type="file" class="mt-1" @change="onPickDocument" />
+              <p v-if="docForm.errors.file" class="text-sm text-red-600 mt-1">
+                {{ docForm.errors.file }}
+              </p>
+            </div>
+            <div>
+              <Label for="docName">Ime</Label>
+              <Input id="docName" v-model="docForm.name" class="mt-1" />
+              <p v-if="docForm.errors.name" class="text-sm text-red-600 mt-1">
+                {{ docForm.errors.name }}
+              </p>
+            </div>
+            <div>
+              <Label for="docDesc">Opis</Label>
+              <Input id="docDesc" v-model="docForm.description" class="mt-1" />
+              <p v-if="docForm.errors.description" class="text-sm text-red-600 mt-1">
+                {{ docForm.errors.description }}
+              </p>
+            </div>
+            <div class="flex items-center gap-2">
+              <Checkbox id="docPublic" :model-value="docForm.is_public" />
+              <Label for="docPublic">Javno</Label>
+            </div>
           </div>
-          <div>
-            <Label for="docName">Ime</Label>
-            <Input id="docName" v-model="docForm.name" class="mt-1" />
-            <p v-if="docForm.errors.name" class="text-sm text-red-600 mt-1">
-              {{ docForm.errors.name }}
-            </p>
-          </div>
-          <div>
-            <Label for="docDesc">Opis</Label>
-            <Input id="docDesc" v-model="docForm.description" class="mt-1" />
-            <p v-if="docForm.errors.description" class="text-sm text-red-600 mt-1">
-              {{ docForm.errors.description }}
-            </p>
-          </div>
-          <div class="flex items-center gap-2">
-            <Checkbox id="docPublic" :model-value="docForm.is_public" />
-            <Label for="docPublic">Javno</Label>
-          </div>
-        </div>
-        <DialogFooter>
-          <Button variant="outline" @click="closeDocDialog"> Prekliči </Button>
-          <Button :disabled="docForm.processing || !docForm.file" @click="submitDocument">
-            <Upload class="w-4 h-4 mr-2" />
+        </ScrollArea>
+        <DrawerFooter class="border-t shrink-0 flex-row gap-2 px-4 py-3">
+          <Button
+            class="flex-1"
+            :disabled="docForm.processing || !docForm.file"
+            @click="submitDocument"
+          >
+            <Upload class="w-4 h-4" />
             Naloži
           </Button>
-        </DialogFooter>
-      </DialogContent>
-    </Dialog>
+          <DrawerClose as-child>
+            <Button variant="outline" class="flex-1" @click="closeDocDialog"
+              >Prekliči</Button
+            >
+          </DrawerClose>
+        </DrawerFooter>
+      </DrawerContent>
+    </Drawer>
   </AppPhoneLayout>
 </template>