add payment option

2025-10-02 18:35:02 +02:00
parent 0e0912c81b
commit 971a9e89d1
27 changed files with 1327 additions and 34 deletions
@@ -10,6 +10,7 @@ import {
 import Dropdown from "@/Components/Dropdown.vue";
 import CaseObjectCreateDialog from "./CaseObjectCreateDialog.vue";
 import CaseObjectsDialog from "./CaseObjectsDialog.vue";
+import PaymentDialog from "./PaymentDialog.vue";
 import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
 import {
  faCircleInfo,
@@ -48,7 +49,8 @@ const onAddActivity = (c) => emit("add-activity", c);

 // CaseObject dialog state
 import { ref, computed } from "vue";
-import { router } from "@inertiajs/vue3";
+import { router, useForm } from "@inertiajs/vue3";
+import axios from "axios";
 const showObjectDialog = ref(false);
 const showObjectsList = ref(false);
 const selectedContract = ref(null);
@@ -144,6 +146,81 @@ const doChangeSegment = () => {
    );
  }
 };
+
+// Add Payment modal state
+const showPaymentDialog = ref(false);
+const paymentContract = ref(null);
+const paymentForm = useForm({
+  amount: null,
+  currency: "EUR",
+  paid_at: null,
+  reference: "",
+});
+const openPaymentDialog = (c) => {
+  paymentContract.value = c;
+  paymentForm.reset();
+  paymentForm.paid_at = todayStr.value;
+  showPaymentDialog.value = true;
+};
+const closePaymentDialog = () => {
+  showPaymentDialog.value = false;
+  paymentContract.value = null;
+};
+const submitPayment = () => {
+  if (!paymentContract.value?.account?.id) {
+    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"] });
+    },
+  });
+};
+
+// View Payments dialog state and logic
+const showPaymentsDialog = ref(false);
+const paymentsForContract = ref([]);
+const paymentsLoading = ref(false);
+const openPaymentsDialog = async (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>

 <template>
@@ -399,6 +476,15 @@ const doChangeSegment = () => {
                    <span>Briši</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="openPaymentsDialog(c)"
+                  >
+                    <FontAwesomeIcon :icon="faCircleInfo" class="h-4 w-4 text-gray-600" />
+                    <span>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"
@@ -407,6 +493,15 @@ const doChangeSegment = () => {
                    <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"
+                    @click="openPaymentDialog(c)"
+                  >
+                    <FontAwesomeIcon :icon="faPlus" class="h-4 w-4 text-gray-600" />
+                    <span>Dodaj plačilo</span>
+                  </button>
                </template>
              </Dropdown>
            </FwbTableCell>
@@ -460,4 +555,55 @@ const doChangeSegment = () => {
    :client_case="client_case"
    :contract="selectedContract"
  />
+
+  <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>
 </template>
@@ -0,0 +1,78 @@
+<script setup>
+import DialogModal from "@/Components/DialogModal.vue";
+
+const props = defineProps({
+  show: { type: Boolean, default: false },
+  form: { type: Object, required: true },
+});
+
+const emit = defineEmits(["close", "submit"]);
+
+const onClose = () => emit("close");
+const onSubmit = () => emit("submit");
+</script>
+
+<template>
+  <DialogModal :show="show" @close="onClose">
+    <template #title>Dodaj plačilo</template>
+    <template #content>
+      <div class="space-y-3">
+        <div>
+          <label class="block text-sm text-gray-700 mb-1">Znesek</label>
+          <input
+            type="number"
+            step="0.01"
+            min="0"
+            v-model.number="form.amount"
+            class="w-full rounded border-gray-300"
+          />
+          <div v-if="form.errors?.amount" class="text-sm text-red-600 mt-0.5">
+            {{ form.errors.amount }}
+          </div>
+        </div>
+        <div class="flex gap-2">
+          <div class="flex-1">
+            <label class="block text-sm text-gray-700 mb-1">Valuta</label>
+            <input
+              type="text"
+              v-model="form.currency"
+              class="w-full rounded border-gray-300"
+              maxlength="3"
+            />
+            <div v-if="form.errors?.currency" class="text-sm text-red-600 mt-0.5">
+              {{ form.errors.currency }}
+            </div>
+          </div>
+          <div class="flex-1">
+            <label class="block text-sm text-gray-700 mb-1">Datum</label>
+            <input type="date" v-model="form.paid_at" class="w-full rounded border-gray-300" />
+            <div v-if="form.errors?.paid_at" class="text-sm text-red-600 mt-0.5">
+              {{ form.errors.paid_at }}
+            </div>
+          </div>
+        </div>
+        <div>
+          <label class="block text-sm text-gray-700 mb-1">Sklic</label>
+          <input type="text" v-model="form.reference" class="w-full rounded border-gray-300" />
+          <div v-if="form.errors?.reference" class="text-sm text-red-600 mt-0.5">
+            {{ form.errors.reference }}
+          </div>
+        </div>
+      </div>
+    </template>
+    <template #footer>
+      <button type="button" class="px-4 py-2 rounded bg-gray-200 hover:bg-gray-300" @click="onClose">
+        Prekliči
+      </button>
+      <button
+        type="button"
+        class="px-4 py-2 rounded bg-indigo-600 text-white hover:bg-indigo-700"
+        :disabled="form.processing"
+        @click="onSubmit"
+      >
+        Shrani
+      </button>
+    </template>
+  </DialogModal>
+  
+</template>