add payment option

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

@@ -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>