added option to import payments from csv file

2025-10-02 22:09:05 +02:00
parent 971a9e89d1
commit 12de0186cf
21 changed files with 2828 additions and 824 deletions
@@ -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>