added option to import payments from csv file

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

@@ -12,6 +12,7 @@ import CaseObjectCreateDialog from "./CaseObjectCreateDialog.vue";
 import CaseObjectsDialog from "./CaseObjectsDialog.vue";
 import PaymentDialog from "./PaymentDialog.vue";
 import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
+import ViewPaymentsDialog from "./ViewPaymentsDialog.vue";
 import {
   faCircleInfo,
   faClock,
@@ -102,6 +103,15 @@ const contractActiveSegment = (c) => {
   return arr.find((s) => s.pivot?.active) || arr[0] || null;
 };
 const segmentName = (id) => props.segments.find((s) => s.id === id)?.name || "";
+// Sorted segment lists for dropdowns
+const sortedSegments = computed(() => {
+  const list = Array.isArray(props.segments) ? [...props.segments] : [];
+  return list.sort((a, b) => a.name.localeCompare(b.name, "sl", { sensitivity: "base" }));
+});
+const sortedAllSegments = computed(() => {
+  const list = Array.isArray(props.all_segments) ? [...props.all_segments] : [];
+  return list.sort((a, b) => a.name.localeCompare(b.name, "sl", { sensitivity: "base" }));
+});
 const confirmChange = ref({
   show: false,
   contract: null,
@@ -171,55 +181,25 @@ const submitPayment = () => {
     return;
   }
   const accountId = paymentContract.value.account.id;
-    paymentForm.post(route("accounts.payments.store", { account: accountId }), {
-      preserveScroll: true,
-      onSuccess: () => {
-        closePaymentDialog();
-        // Reload contracts and activities (new payment may create an activity)
-        router.reload({ only: ["contracts", "activities"] });
+  paymentForm.post(route("accounts.payments.store", { account: accountId }), {
+    preserveScroll: true,
+    onSuccess: () => {
+      closePaymentDialog();
+      // Reload contracts and activities (new payment may create an activity)
+      router.reload({ only: ["contracts", "activities"] });
     },
   });
 };
 
-// View Payments dialog state and logic
+// View Payments dialog state
 const showPaymentsDialog = ref(false);
-const paymentsForContract = ref([]);
-const paymentsLoading = ref(false);
-const openPaymentsDialog = async (c) => {
+const openPaymentsDialog = (c) => {
   selectedContract.value = c;
   showPaymentsDialog.value = true;
-  await loadPayments();
 };
 const closePaymentsDialog = () => {
   showPaymentsDialog.value = false;
   selectedContract.value = null;
-  paymentsForContract.value = [];
-};
-const loadPayments = async () => {
-  if (!selectedContract.value?.account?.id) return;
-  paymentsLoading.value = true;
-  try {
-    const { data } = await axios.get(route("accounts.payments.list", { account: selectedContract.value.account.id }));
-    paymentsForContract.value = data.payments || [];
-  } finally {
-    paymentsLoading.value = false;
-  }
-};
-const deletePayment = (paymentId) => {
-  if (!selectedContract.value?.account?.id) return;
-  const accountId = selectedContract.value.account.id;
-    router.delete(route("accounts.payments.destroy", { account: accountId, payment: paymentId }), {
-      preserveScroll: true,
-      preserveState: true,
-      only: ["contracts", "activities"],
-    onSuccess: async () => {
-      await loadPayments();
-    },
-    onError: async () => {
-      // Even if there is an error, try to refresh payments list
-      await loadPayments();
-    },
-  });
 };
 </script>
 
@@ -275,7 +255,7 @@ const deletePayment = (paymentId) => {
                 <span class="text-gray-700">{{
                   contractActiveSegment(c)?.name || "-"
                 }}</span>
-                <Dropdown width="64" align="left">
+                <Dropdown align="left">
                   <template #trigger>
                     <button
                       type="button"
@@ -286,8 +266,8 @@ const deletePayment = (paymentId) => {
                       }"
                       :title="
                         segments && segments.length
-                          ? 'Change segment'
-                          : 'No segments available for this case'
+                          ? 'Spremeni segment'
+                          : 'Ni segmentov na voljo za ta primer'
                       "
                     >
                       <FontAwesomeIcon
@@ -300,7 +280,7 @@ const deletePayment = (paymentId) => {
                     <div class="py-1">
                       <template v-if="segments && segments.length">
                         <button
-                          v-for="s in segments"
+                          v-for="s in sortedSegments"
                           :key="s.id"
                           type="button"
                           class="w-full px-3 py-1.5 text-left text-sm hover:bg-gray-50"
@@ -315,7 +295,7 @@ const deletePayment = (paymentId) => {
                             Ni segmentov v tem primeru. Dodaj in nastavi segment:
                           </div>
                           <button
-                            v-for="s in all_segments"
+                            v-for="s in sortedAllSegments"
                             :key="s.id"
                             type="button"
                             class="w-full px-3 py-1.5 text-left text-sm hover:bg-gray-50"
@@ -326,7 +306,7 @@ const deletePayment = (paymentId) => {
                         </template>
                         <template v-else>
                           <div class="px-3 py-2 text-sm text-gray-500">
-                            No segments configured.
+                            Ni konfiguriranih segmentov.
                           </div>
                         </template>
                       </template>
@@ -356,7 +336,11 @@ const deletePayment = (paymentId) => {
                       class="inline-flex items-center justify-center h-5 w-5 rounded-full"
                       :title="'Pokaži opis'"
                       :disabled="!hasDesc(c)"
-                      :class="hasDesc(c) ? 'hover:bg-gray-100 focus:outline-none' : text-gray-400"
+                      :class="
+                        hasDesc(c)
+                          ? 'hover:bg-gray-100 focus:outline-none'
+                          : 'text-gray-400'
+                      "
                     >
                       <FontAwesomeIcon
                         :icon="faCircleInfo"
@@ -373,7 +357,7 @@ const deletePayment = (paymentId) => {
                     </div>
                   </template>
                 </Dropdown>
-               
+
                 <!-- Promise date indicator -->
                 <Dropdown width="64" align="left">
                   <template #trigger>
@@ -431,7 +415,7 @@ const deletePayment = (paymentId) => {
                   <button
                     type="button"
                     class="inline-flex items-center justify-center h-5 w-5 rounded-full hover:bg-gray-100 focus:outline-none"
-                    :title="'Actions'"
+                    :title="'Dejanja'"
                   >
                     <FontAwesomeIcon
                       :icon="faEllipsisVertical"
@@ -440,6 +424,12 @@ const deletePayment = (paymentId) => {
                   </button>
                 </template>
                 <template #content>
+                  <!-- Urejanje -->
+                  <div
+                    class="px-3 pt-2 pb-1 text-[11px] uppercase tracking-wide text-gray-400"
+                  >
+                    Urejanje
+                  </div>
                   <button
                     type="button"
                     class="w-full px-3 py-2 text-left text-sm text-gray-700 hover:bg-gray-50 flex items-center gap-2"
@@ -449,15 +439,31 @@ const deletePayment = (paymentId) => {
                       :icon="faPenToSquare"
                       class="h-4 w-4 text-gray-600"
                     />
-                    <span>Edit</span>
+                    <span>Uredi</span>
                   </button>
+                  <button
+                    type="button"
+                    class="w-full px-3 py-2 text-left text-sm text-gray-700 hover:bg-gray-50 flex items-center gap-2"
+                    @click="onAddActivity(c)"
+                  >
+                    <FontAwesomeIcon :icon="faListCheck" class="h-4 w-4 text-gray-600" />
+                    <span>Dodaj aktivnost</span>
+                  </button>
+
+                  <div class="my-1 border-t border-gray-100" />
+                  <!-- Predmeti -->
+                  <div
+                    class="px-3 pt-2 pb-1 text-[11px] uppercase tracking-wide text-gray-400"
+                  >
+                    Predmeti
+                  </div>
                   <button
                     type="button"
                     class="w-full px-3 py-2 text-left text-sm text-gray-700 hover:bg-gray-50 flex items-center gap-2"
                     @click="openObjectsList(c)"
                   >
                     <FontAwesomeIcon :icon="faCircleInfo" class="h-4 w-4 text-gray-600" />
-                    <span>Predmeti</span>
+                    <span>Seznam predmetov</span>
                   </button>
                   <button
                     type="button"
@@ -465,35 +471,24 @@ const deletePayment = (paymentId) => {
                     @click="openObjectDialog(c)"
                   >
                     <FontAwesomeIcon :icon="faPlus" class="h-4 w-4 text-gray-600" />
-                    <span>Predmeti</span>
-                  </button>
-                  <button
-                    type="button"
-                    class="w-full px-3 py-2 text-left text-sm text-red-700 hover:bg-red-50 flex items-center gap-2"
-                    @click="onDelete(c)"
-                  >
-                    <FontAwesomeIcon :icon="faTrash" class="h-4 w-4 text-red-600" />
-                    <span>Briši</span>
+                    <span>Dodaj predmet</span>
                   </button>
+
                   <div class="my-1 border-t border-gray-100" />
+                  <!-- Plačila -->
+                  <div
+                    class="px-3 pt-2 pb-1 text-[11px] uppercase tracking-wide text-gray-400"
+                  >
+                    Plačila
+                  </div>
                   <button
                     type="button"
                     class="w-full px-3 py-2 text-left text-sm text-gray-700 hover:bg-gray-50 flex items-center gap-2"
                     @click="openPaymentsDialog(c)"
                   >
                     <FontAwesomeIcon :icon="faCircleInfo" class="h-4 w-4 text-gray-600" />
-                    <span>Plačila</span>
+                    <span>Pokaži plačila</span>
                   </button>
-                  <div class="my-1 border-t border-gray-100" />
-                  <button
-                    type="button"
-                    class="w-full px-3 py-2 text-left text-sm text-gray-700 hover:bg-gray-50 flex items-center gap-2"
-                    @click="onAddActivity(c)"
-                  >
-                    <FontAwesomeIcon :icon="faListCheck" class="h-4 w-4 text-gray-600" />
-                    <span>Aktivnost</span>
-                  </button>
-                  <div class="my-1 border-t border-gray-100" />
                   <button
                     type="button"
                     class="w-full px-3 py-2 text-left text-sm text-gray-700 hover:bg-gray-50 flex items-center gap-2"
@@ -502,6 +497,17 @@ const deletePayment = (paymentId) => {
                     <FontAwesomeIcon :icon="faPlus" class="h-4 w-4 text-gray-600" />
                     <span>Dodaj plačilo</span>
                   </button>
+
+                  <div class="my-1 border-t border-gray-100" />
+                  <!-- Destruktivno -->
+                  <button
+                    type="button"
+                    class="w-full px-3 py-2 text-left text-sm text-red-700 hover:bg-red-50 flex items-center gap-2"
+                    @click="onDelete(c)"
+                  >
+                    <FontAwesomeIcon :icon="faTrash" class="h-4 w-4 text-red-600" />
+                    <span>Izbriši</span>
+                  </button>
                 </template>
               </Dropdown>
             </FwbTableCell>
@@ -556,54 +562,16 @@ const deletePayment = (paymentId) => {
     :contract="selectedContract"
   />
 
-  <PaymentDialog :show="showPaymentDialog" :form="paymentForm" @close="closePaymentDialog" @submit="submitPayment" />
+  <PaymentDialog
+    :show="showPaymentDialog"
+    :form="paymentForm"
+    @close="closePaymentDialog"
+    @submit="submitPayment"
+  />
 
-  <!-- View Payments Dialog -->
-  <div v-if="showPaymentsDialog" class="fixed inset-0 z-50 flex items-center justify-center bg-black/30">
-    <div class="bg-white rounded-lg shadow-lg p-4 w-full max-w-lg">
-      <div class="flex items-center justify-between">
-        <div class="text-base font-medium text-gray-800">
-          Plačila za pogodbo
-          <span class="text-gray-600">{{ selectedContract?.reference }}</span>
-        </div>
-        <button type="button" class="text-sm text-gray-500 hover:text-gray-700" @click="closePaymentsDialog">Zapri</button>
-      </div>
-      <div class="mt-3">
-        <div v-if="paymentsLoading" class="text-sm text-gray-500">Nalaganje…</div>
-        <template v-else>
-          <div v-if="paymentsForContract.length === 0" class="text-sm text-gray-500">Ni plačil.</div>
-          <div v-else class="divide-y divide-gray-100 border rounded">
-            <div v-for="p in paymentsForContract" :key="p.id" class="px-3 py-2 flex items-center justify-between">
-              <div>
-                <div class="text-sm text-gray-800">
-                  {{
-                    Intl.NumberFormat('de-DE', { style: 'currency', currency: p.currency || 'EUR' }).format(p.amount ?? 0)
-                  }}
-                </div>
-                <div class="text-xs text-gray-500">
-                  <span>{{ formatDate(p.paid_at) }}</span>
-                  <span v-if="p.reference" class="ml-2">Sklic: {{ p.reference }}</span>
-                </div>
-              </div>
-              <div class="flex items-center gap-2">
-                <button
-                  type="button"
-                  class="inline-flex items-center gap-1 px-2 py-1 rounded text-red-700 hover:bg-red-50"
-                  @click="deletePayment(p.id)"
-                  title="Izbriši plačilo"
-                >
-                  <FontAwesomeIcon :icon="faTrash" class="h-4 w-4 text-red-600" />
-                  <span class="text-sm">Briši</span>
-                </button>
-              </div>
-            </div>
-          </div>
-        </template>
-      </div>
-      <div class="mt-4 flex justify-end gap-2">
-        <button type="button" class="px-3 py-2 rounded bg-gray-200 hover:bg-gray-300" @click="loadPayments">Osveži</button>
-        <button type="button" class="px-3 py-2 rounded bg-indigo-600 text-white hover:bg-indigo-700" @click="closePaymentsDialog">Zapri</button>
-      </div>
-    </div>
-  </div>
+  <ViewPaymentsDialog
+    :show="showPaymentsDialog"
+    :contract="selectedContract"
+    @close="closePaymentsDialog"
+  />
 </template>

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

@@ -0,0 +1,152 @@
+<script setup>
+import DialogModal from "@/Components/DialogModal.vue";
+import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
+import { faTrash } from "@fortawesome/free-solid-svg-icons";
+import { ref, watch, computed } from "vue";
+import axios from "axios";
+import { router } from "@inertiajs/vue3";
+
+const props = defineProps({
+  show: { type: Boolean, default: false },
+  contract: { type: Object, default: null },
+});
+
+const emit = defineEmits(["close"]);
+
+const payments = ref([]);
+const loading = ref(false);
+
+const accountId = computed(() => props.contract?.account?.id ?? null);
+const contractRef = computed(() => props.contract?.reference || "—");
+
+async function loadPayments() {
+  if (!accountId.value) {
+    payments.value = [];
+    return;
+  }
+  loading.value = true;
+  try {
+    const { data } = await axios.get(
+      route("accounts.payments.list", { account: accountId.value })
+    );
+    payments.value = data.payments || [];
+  } finally {
+    loading.value = false;
+  }
+}
+
+function close() {
+  emit("close");
+}
+
+function formatDate(d) {
+  if (!d) return "—";
+  const dt = new Date(d);
+  return isNaN(dt.getTime()) ? "—" : dt.toLocaleDateString("de");
+}
+
+function fmtMoney(amount, currency = "EUR") {
+  const num = typeof amount === "string" ? Number(amount) : amount;
+  return new Intl.NumberFormat("de-DE", { style: "currency", currency }).format(num ?? 0);
+}
+
+async function deletePayment(paymentId) {
+  if (!accountId.value) return;
+  await router.delete(
+    route("accounts.payments.destroy", { account: accountId.value, payment: paymentId }),
+    {
+      preserveScroll: true,
+      preserveState: true,
+      only: ["contracts", "activities"],
+      onSuccess: async () => {
+        await loadPayments();
+      },
+      onError: async () => {
+        await loadPayments();
+      },
+    }
+  );
+}
+
+watch(
+  () => props.show,
+  async (visible) => {
+    if (visible) {
+      await loadPayments();
+    } else {
+      payments.value = [];
+    }
+  }
+);
+
+watch(
+  () => props.contract?.account?.id,
+  async () => {
+    if (props.show) {
+      await loadPayments();
+    }
+  }
+);
+</script>
+
+<template>
+  <DialogModal :show="show" @close="close">
+    <template #title>
+      Plačila za pogodbo <span class="text-gray-600">{{ contractRef }}</span>
+    </template>
+    <template #content>
+      <div>
+        <div v-if="loading" class="text-sm text-gray-500">Nalaganje…</div>
+        <template v-else>
+          <div v-if="payments.length === 0" class="text-sm text-gray-500">Ni plačil.</div>
+          <div v-else class="divide-y divide-gray-100 border rounded">
+            <div
+              v-for="p in payments"
+              :key="p.id"
+              class="px-3 py-2 flex items-center justify-between"
+            >
+              <div>
+                <div class="text-sm text-gray-800">
+                  {{ fmtMoney(p.amount, p.currency || "EUR") }}
+                </div>
+                <div class="text-xs text-gray-500">
+                  <span>{{ formatDate(p.paid_at) }}</span>
+                  <span v-if="p.reference" class="ml-2">Sklic: {{ p.reference }}</span>
+                </div>
+              </div>
+              <div class="flex items-center gap-2">
+                <button
+                  type="button"
+                  class="inline-flex items-center gap-1 px-2 py-1 rounded text-red-700 hover:bg-red-50"
+                  @click="deletePayment(p.id)"
+                  title="Izbriši plačilo"
+                >
+                  <FontAwesomeIcon :icon="faTrash" class="h-4 w-4 text-red-600" />
+                  <span class="text-sm">Briši</span>
+                </button>
+              </div>
+            </div>
+          </div>
+        </template>
+      </div>
+    </template>
+    <template #footer>
+      <div class="mt-2 flex justify-end gap-2">
+        <button
+          type="button"
+          class="px-3 py-2 rounded bg-gray-200 hover:bg-gray-300"
+          @click="loadPayments"
+        >
+          Osveži
+        </button>
+        <button
+          type="button"
+          class="px-3 py-2 rounded bg-indigo-600 text-white hover:bg-indigo-700"
+          @click="close"
+        >
+          Zapri
+        </button>
+      </div>
+    </template>
+  </DialogModal>
+</template>

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

@@ -0,0 +1,141 @@
+<script setup>
+import DialogModal from "@/Components/DialogModal.vue";
+import { ref, watch, computed } from "vue";
+import { router } from "@inertiajs/vue3";
+import axios from "axios";
+
+const props = defineProps({
+  show: { type: Boolean, default: false },
+  contract: { type: Object, default: null },
+});
+
+const emit = defineEmits(["close"]);
+
+const payments = ref([]);
+const loading = ref(false);
+
+const contractRef = computed(() => props.contract?.reference || "—");
+const accountId = computed(() => props.contract?.account?.id || null);
+
+function formatDate(d) {
+  if (!d) return "-";
+  const dt = new Date(d);
+  return isNaN(dt.getTime()) ? "-" : dt.toLocaleDateString("de");
+}
+
+async function loadPayments() {
+  if (!accountId.value) {
+    payments.value = [];
+    return;
+  }
+  loading.value = true;
+  try {
+    const { data } = await axios.get(
+      route("accounts.payments.list", { account: accountId.value })
+    );
+    payments.value = data.payments || [];
+  } finally {
+    loading.value = false;
+  }
+}
+
+function close() {
+  emit("close");
+  payments.value = [];
+}
+
+function deletePayment(paymentId) {
+  if (!accountId.value) return;
+  router.delete(
+    route("accounts.payments.destroy", { account: accountId.value, payment: paymentId }),
+    {
+      preserveScroll: true,
+      preserveState: true,
+      only: ["contracts", "activities"],
+      onSuccess: async () => {
+        await loadPayments();
+      },
+      onError: async () => {
+        await loadPayments();
+      },
+    }
+  );
+}
+
+watch(
+  () => props.show,
+  async (visible) => {
+    if (visible) {
+      await loadPayments();
+    }
+  }
+);
+watch(
+  () => props.contract?.account?.id,
+  async () => {
+    if (props.show) {
+      await loadPayments();
+    }
+  }
+);
+</script>
+
+<template>
+  <DialogModal :show="show" @close="close">
+    <template #title>
+      Plačila za pogodbo <span class="text-gray-600">{{ contractRef }}</span>
+    </template>
+    <template #content>
+      <div>
+        <div v-if="loading" class="text-sm text-gray-500">Nalaganje…</div>
+        <template v-else>
+          <div v-if="payments.length === 0" class="text-sm text-gray-500">Ni plačil.</div>
+          <div v-else class="divide-y divide-gray-100 border rounded">
+            <div
+              v-for="p in payments"
+              :key="p.id"
+              class="px-3 py-2 flex items-center justify-between"
+            >
+              <div>
+                <div class="text-sm text-gray-800">
+                  {{
+                    Intl.NumberFormat('de-DE', { style: 'currency', currency: p.currency || 'EUR' }).format(p.amount ?? 0)
+                  }}
+                </div>
+                <div class="text-xs text-gray-500">
+                  <span>{{ formatDate(p.paid_at) }}</span>
+                  <span v-if="p.reference" class="ml-2">Sklic: {{ p.reference }}</span>
+                  <span v-if="p.balance_before !== undefined" class="ml-2">
+                    Stanje pred: {{
+                      Intl.NumberFormat('de-DE', { style: 'currency', currency: p.currency || 'EUR' }).format(p.balance_before ?? 0)
+                    }}
+                  </span>
+                </div>
+              </div>
+              <div class="flex items-center gap-2">
+                <button
+                  type="button"
+                  class="inline-flex items-center gap-1 px-2 py-1 rounded text-red-700 hover:bg-red-50"
+                  @click="deletePayment(p.id)"
+                  title="Izbriši plačilo"
+                >
+                  <span class="text-sm">Briši</span>
+                </button>
+              </div>
+            </div>
+          </div>
+        </template>
+      </div>
+    </template>
+    <template #footer>
+      <div class="flex justify-end gap-2 w-full">
+        <button type="button" class="px-3 py-2 rounded bg-gray-200 hover:bg-gray-300" @click="loadPayments">
+          Osveži
+        </button>
+        <button type="button" class="px-3 py-2 rounded bg-indigo-600 text-white hover:bg-indigo-700" @click="close">
+          Zapri
+        </button>
+      </div>
+    </template>
+  </DialogModal>
+</template>