From 7034393dced2a97fc5317e3e44b0fe59fb47d34d Mon Sep 17 00:00:00 2001
From: Jesus Guerrero <jesusant.guerrero@gmail.com>
Date: Fri, 15 Mar 2024 18:03:02 -0400
Subject: [PATCH] chore: Fix .env example and budget polishing

---
 .env.docker                                   |   8 +-
 .env.example                                  |   2 +-
 .../Finance/FinancePayeeController.php        |  61 ++++
 .../Modules/occurrence/OccurrenceCard.vue     |   6 +-
 resources/js/Pages/Finance/Budget.vue         |   4 +-
 resources/js/Pages/Finance/Payee.vue          | 266 ++++++++++++++++++
 .../components/NextPaymentItem.vue            |  36 ++-
 7 files changed, 361 insertions(+), 22 deletions(-)
 create mode 100644 app/Http/Controllers/Finance/FinancePayeeController.php
 create mode 100644 resources/js/Pages/Finance/Payee.vue

diff --git a/.env.docker b/.env.docker
index 4723c2ba..83d764c8 100644
--- a/.env.docker
+++ b/.env.docker
@@ -9,11 +9,11 @@ LOG_CHANNEL=stack
 LOG_LEVEL=debug
 
 DB_CONNECTION=mysql
-DB_HOST=db
-DB_PORT=3307
+DB_HOST=localhost
+DB_PORT=3306
 DB_DATABASE=loger
 DB_USERNAME=root
-DB_PASSWORD=password
+DB_PASSWORD=noenose
 
 BROADCAST_DRIVER=mercure
 CACHE_DRIVER=file
@@ -56,7 +56,7 @@ VITE_GOOGLE_APP_KEY=
 VITE_GOOGLE_CLIENT_ID=
 VITE_WEATHER_ENDPOINT=https://fcc-weather-api.glitch.me/api/current?
 
-# MERCURE_URL=https://localhost/.well-known/mercure
+MERCURE_URL=https://localhost/.well-known/mercure
 MERCURE_SECRET="!ChangeThisMercureHubJWTSecretKey!"
 MERCURE_JWT_KEY="!ChangeThisMercureHubJWTSecretKey!"
 MERCURE_PUBLISHER_JWT_KEY="!ChangeThisMercureHubJWTSecretKey!"
diff --git a/.env.example b/.env.example
index fdf61158..d95615f9 100644
--- a/.env.example
+++ b/.env.example
@@ -10,7 +10,7 @@ LOG_LEVEL=debug
 DB_CONNECTION=mysql
 DB_HOST=127.0.0.1
 DB_PORT=3306
-DB_DATABASE=myhouse_crm
+DB_DATABASE=loger
 DB_USERNAME=root
 DB_PASSWORD=
 
diff --git a/app/Http/Controllers/Finance/FinancePayeeController.php b/app/Http/Controllers/Finance/FinancePayeeController.php
new file mode 100644
index 00000000..f5d81f95
--- /dev/null
+++ b/app/Http/Controllers/Finance/FinancePayeeController.php
@@ -0,0 +1,61 @@
+<?php
+
+namespace App\Http\Controllers\Finance;
+
+use App\Models\Setting;
+use Illuminate\Support\Facades\Gate;
+use Freesgen\Atmosphere\Http\Querify;
+use Insane\Journal\Models\Core\Payee;
+use Insane\Journal\Models\Core\Account;
+use Freesgen\Atmosphere\Http\InertiaController;
+use App\Domains\Transaction\Services\BHDService;
+use App\Domains\Transaction\Services\ReportService;
+use App\Domains\Automation\Models\AutomationService;
+
+class FinancePayeeController extends InertiaController
+{
+    use Querify;
+
+    const DateFormat = 'Y-m-d';
+
+    private $reportService;
+
+    public function __construct(Payee $payee, ReportService $reportService)
+    {
+        $this->reportService = $reportService;
+        $this->model = $payee;
+        $this->templates = [
+            'index' => 'Finance/Payee',
+            'show' => 'Finance/Payee',
+        ];
+        $this->searchable = ['id', 'date', 'concent'];
+        $this->includes = [
+            'transactions',
+        ];
+        $this->appends = [];
+    }
+
+    public function show(Payee $payee)
+    {
+        $queryParams = request()->query();
+        $response = Gate::inspect('show', $payee);
+        $settings = Setting::getByTeam(auth()->user()->current_team_id);
+        $timeZone = $settings['team_timezone'] ?? config('app.timezone');
+
+        if (! $response->allowed()) {
+            return redirect(route('finance'));
+        }
+
+        $filters = isset($queryParams['filter']) ? $queryParams['filter'] : [];
+        [$startDate, $endDate] = $this->getFilterDates($filters, $timeZone);
+
+        return inertia($this->templates['show'], [
+            'sectionTitle' => $payee->name,
+            'payeeId' => $payee->id,
+            'resource' => $payee,
+            'transactions' => $payee->transactionSplits(50, $startDate, $endDate, request()->only(['search', 'page', 'limit', 'direction'])),
+            // 'stats' => $this->reportService->getPayeeStats($payee->id, $startDate, $endDate),
+            'serverSearchOptions' => [],
+        ]);
+    }
+}
diff --git a/resources/js/Components/Modules/occurrence/OccurrenceCard.vue b/resources/js/Components/Modules/occurrence/OccurrenceCard.vue
index 4b5dad4b..729c5284 100644
--- a/resources/js/Components/Modules/occurrence/OccurrenceCard.vue
+++ b/resources/js/Components/Modules/occurrence/OccurrenceCard.vue
@@ -10,7 +10,11 @@ defineProps<{
     checks: IOccurrenceCheck[];
 }>()
 const getDayDiff = (lastDay: string): number => {
-    return differenceInCalendarDays(new Date(), parseISO(lastDay));
+    try {
+        return differenceInCalendarDays(new Date(), parseISO(lastDay));
+    } catch (e) {
+        return "--"
+    }
 }
 </script>
 
diff --git a/resources/js/Pages/Finance/Budget.vue b/resources/js/Pages/Finance/Budget.vue
index a2d8b466..d7e8d371 100644
--- a/resources/js/Pages/Finance/Budget.vue
+++ b/resources/js/Pages/Finance/Budget.vue
@@ -210,9 +210,9 @@ onMounted(() => {
 
       <section class="mx-auto mt-4 rounded-lg text-body bg-base max-w-7xl">
           <article class="w-full space-y-4">
-            <p class="text-center">
+            <!-- <p class="text-center">
                 {{ formatMoney(accountTotal) }} {{ formatMoney(available)  }} = ({{ formatMoney(accountTotal - available)}})
-            </p>
+            </p> -->
 
             <BudgetCategories :budgets="budgets" />
         </article>
diff --git a/resources/js/Pages/Finance/Payee.vue b/resources/js/Pages/Finance/Payee.vue
new file mode 100644
index 00000000..6be6b24d
--- /dev/null
+++ b/resources/js/Pages/Finance/Payee.vue
@@ -0,0 +1,266 @@
+<script setup lang="ts">
+import { computed, toRefs, provide, ref, onMounted } from "vue";
+import { router, useForm, usePage } from "@inertiajs/vue3";
+import { format } from "date-fns";
+import { AtDatePager } from "atmosphere-ui";
+import { useServerSearch, IServerSearchData } from "@/composables/useServerSearchV2";
+
+import AppLayout from "@/Components/templates/AppLayout.vue";
+import AppSearch from "@/Components/AppSearch/AppSearch.vue";
+import LogerButton from "@/Components/atoms/LogerButton.vue";
+import BackgroundCard from "@/Components/molecules/BackgroundCard.vue";
+
+import FinanceTemplate from "./Partials/FinanceTemplate.vue";
+import FinanceSectionNav from "./Partials/FinanceSectionNav.vue";
+import AccountReconciliationBanner from "./Partials/AccountReconciliationBanner.vue";
+import TransactionSearch from "@/domains/transactions/components/TransactionSearch.vue";
+import TransactionTable from "@/domains/transactions/components/TransactionTable.vue";
+import DraftButtons from "@/domains/transactions/components/DraftButtons.vue";
+
+import { useTransactionModal, TRANSACTION_DIRECTIONS, removeTransaction } from "@/domains/transactions";
+// import { IServerSearchData, useServerSearch } from "@/composables/useServerSearch";
+import { tableAccountCols } from "@/domains/transactions";
+import { useAppContextStore } from "@/store";
+import { formatMoney } from "@/utils";
+import { IAccount, ICategory, ITransaction } from "@/domains/transactions/models";
+import axios from "axios";
+import AccountReconciliationForm from "./AccountReconciliationForm.vue";
+
+
+const { openTransactionModal } = useTransactionModal();
+
+
+interface CollectionData<T> {
+    data: T[]
+}
+const props = withDefaults(defineProps<{
+    accountDetailTypes: {label: string, id: number| string}[];
+    transactions: ITransaction[];
+    stats: CollectionData<Record<string, number>>;
+    accounts: IAccount[];
+    categories: ICategory[],
+    serverSearchOptions: Partial<IServerSearchData>,
+    accountId?: number,
+}>(), {
+    serverSearchOptions: () => {
+            return {}
+    }
+});
+
+const isLoading = ref(false);
+const { serverSearchOptions, accountId, accounts } = toRefs(props);
+const { state: pageState, hasFilters, reset } =
+useServerSearch(serverSearchOptions);
+
+provide("selectedAccountId", accountId);
+
+const selectedAccount = computed(() => {
+	return accounts.value.find((account) => account.id === accountId?.value);
+});
+
+const context = useAppContextStore();
+const listComponent = computed(() => {
+	return context.isMobile ? TransactionSearch : TransactionTable;
+});
+
+const isDraft = computed(() => {
+	return serverSearchOptions.value?.filters?.status == "draft";
+});
+
+const handleDuplicate = (transaction: ITransaction) => {
+    axios.get(`/transactions/${transaction.id}?json=true`).then(({ data }) => {
+        delete data.id;
+        openTransactionModal({
+          transactionData: data,
+        });
+    })
+};
+
+const findLinked = (transaction: ITransaction) => {
+	router.patch(`/transactions/${transaction.id}/linked`, {
+		// @ts-ignore
+		onSuccess() {
+			router.reload();
+		},
+	});
+};
+
+const handleEdit = (transaction: ITransaction) => {
+	openTransactionModal({
+		transactionData: transaction,
+	});
+};
+
+
+
+onMounted(() => {
+    router.on('start', () => isLoading.value = true)
+    router.on('finish', () => isLoading.value = false)
+})
+
+const monthName = computed(() => format(pageState.dates.startDate, "MMMM"))
+
+// reconciliation
+
+const hasReconciliation = computed(() => {
+    return selectedAccount.value?.reconciliations_last
+})
+
+const reconcileForm = useForm({
+		isVisible: false,
+		date: new Date(),
+		balance: 0,
+})
+
+    const reconciliation = () => {
+        reconcileForm.transform(data => ({
+            ...data,
+            date: format(data.date, 'yyyy-MM-dd'),
+        })).post(`/finance/reconciliation/accounts/${selectedAccount.value?.id}`, {
+            preserveScroll: true,
+            only: ['transactions', 'accounts', 'stats'],
+            onFinish() {
+                reconcileForm.reset()
+                reconcileForm.isVisible = false;
+
+            }
+        });
+    };
+
+    const  { TRANSFER } = TRANSACTION_DIRECTIONS;
+    const page = usePage().props;
+
+    const creditCard = computed(() => {
+        return props.accountDetailTypes.find((type) => type.label.toLowerCase() == "credit cards");
+    });
+    const isCreditCard = computed(() => {
+        return selectedAccount.value?.account_detail_type_id == creditCard.value?.id;
+    });
+
+    const payCreditCard = () => {
+        const accountId = page.accountId
+        const debt = Math.abs(selectedAccount.value?.balance ?? 0);
+        openTransactionModal({
+            mode: TRANSFER,
+            transactionData: {
+                counter_account_id: accountId ?? "",
+                total: debt,
+                description: `Payment of ${selectedAccount.value?.name}`,
+                account_id: props.accounts.find((account) => account.balance > debt)?.id
+            },
+        })
+    }
+
+</script>
+
+<template>
+<AppLayout @back="router.visit('/finance/transactions')" :show-back-button="true">
+  <template #header>
+    <FinanceSectionNav>
+      <template #actions>
+        <div class="flex items-center w-full space-x-2">
+          <AtDatePager
+            class="w-full h-12 border-none bg-base-lvl-1 text-body"
+            v-model:startDate="pageState.dates.startDate"
+            v-model:endDate="pageState.dates.endDate"
+            controlsClass="bg-transparent text-body hover:bg-base-lvl-1"
+            next-mode="month"
+          />
+          <LogerButton
+          variant="inverse"
+          @click="reconcileForm.isVisible = true"
+          v-if="!hasReconciliation">
+            Reconciliation
+          </LogerButton>
+          <LogerButton
+            variant="inverse"
+            @click="router.visit(`/finance/reconciliation/${selectedAccount?.reconciliations_last.id}`)"
+            v-else
+          >
+            Review Reconciliation
+          </LogerButton>
+          <LogerButton
+            variant="neutral"
+            v-if="isCreditCard"
+            @click="payCreditCard"
+          >
+            Pay credit card
+          </LogerButton>
+          <DraftButtons v-if="isDraft" />
+        </div>
+      </template>
+    </FinanceSectionNav>
+  </template>
+
+  <template #title>
+    <section class="flex items-center">
+        <span>{{ selectedAccount.name }}</span>
+        <button
+            @click="router.visit(`/finance/accounts/${selectedAccount.id}/reconciliations/`)"
+            title="reconciliations"
+            class="inline-block ml-2 font-bold text-secondary"
+        >
+            <IMdiHistory />
+        </button>
+    </section>
+  </template>
+
+  <FinanceTemplate title="Transactions" :accounts="accounts">
+      <section class="flex w-full mt-4 space-x-4 flex-nowrap">
+        <BackgroundCard
+          class="w-full cursor-pointer text-body-1 bg-base-lvl-3"
+          v-for="(stat, label) in stats"
+          :value="formatMoney(stat)"
+          :label="label"
+          label-class="capitalize text-secondary font-base"
+        />
+      </section>
+
+      <section class="mt-4 bg-base-lvl-3">
+        <header class="flex items-center justify-between px-6 py-2">
+            <section>
+                <h4 class="text-lg font-bold text-body-1">
+                    All transactions in <span class="text-secondary">
+                        {{ monthName }}
+                    </span>
+                </h4>
+            </section>
+            <section class="flex items-center space-x-2">
+                <AppSearch
+                    v-model.lazy="pageState.search"
+                    class="w-full md:flex "
+                    :has-filters="hasFilters"
+                    @clear="reset()"
+                />
+
+                <span class="min-w-fit text-secondary font-bold">
+                    {{  transactions.length }} Results
+                </span>
+            </section>
+        </header>
+            <AccountReconciliationBanner
+                v-if="selectedAccount"
+                :account="selectedAccount"
+            />
+
+            <Component
+                :is="listComponent"
+                :cols="tableAccountCols(props.accountId)"
+                :transactions="transactions"
+                :server-search-options="serverSearchOptions"
+                :is-loading="isLoading"
+                @findLinked="findLinked"
+                @removed="removeTransaction($event, ['verified'])"
+                @duplicate="handleDuplicate"
+                @edit="handleEdit"
+            />
+      </section>
+
+      <AccountReconciliationForm
+          :show="reconcileForm.isVisible"
+          @close="reconcileForm.isVisible = false"
+          :account="selectedAccount"
+       />
+  </FinanceTemplate>
+</AppLayout>
+</template>
diff --git a/resources/js/domains/transactions/components/NextPaymentItem.vue b/resources/js/domains/transactions/components/NextPaymentItem.vue
index 0d86ed92..6280248d 100644
--- a/resources/js/domains/transactions/components/NextPaymentItem.vue
+++ b/resources/js/domains/transactions/components/NextPaymentItem.vue
@@ -1,28 +1,36 @@
 <script setup lang="ts">
 import SectionTitle from '@/Components/atoms/SectionTitle.vue';
-import { formatDate, formatMoney } from '@/utils';
+import { formatDate } from '@/utils';
 import { ITransaction } from '../models';
+import MoneyPresenter from '@/Components/molecules/MoneyPresenter.vue';
 
 defineProps<{
     payment: ITransaction
 }>();
+
+defineEmits(['edit', 'deleted']);
 </script>
 
 <template>
-    <section class="flex justify-between px-4 payment">
-        <div>
-            <SectionTitle>
-                {{ formatMoney(payment.total) }}
-            </SectionTitle>
-            <span class="text-sm text-body-1/80">
-                {{ payment.description }}
-            </span>
-        </div>
-        <div>
-            <span class="text-secondary bg-secondary/10 px-4 rounded-3xl py-1.5 text-xs">
+    <article class="flex justify-between px-4 payment group">
+        <section class="flex">
+            <button class="text-gray-400 hidden group-hover:inline-block transition cursor-pointer hover:text-red-400 focus:outline-none" @click="$emit('deleted', payment)">
+                <IMdiTrash />
+             </button>
+             <section>
+                 <SectionTitle>
+                     <MoneyPresenter :value="payment.total" />
+                 </SectionTitle>
+                 <span class="text-sm text-body-1/80">
+                     {{ payment.description }}
+                 </span>
+             </section>
+        </section>
+        <section class="items-center">
+            <span title="Approve transaction" class="text-secondary bg-secondary/10 px-4 rounded-3xl py-1.5 text-xs cursor-pointer" @click="$emit('edit', payment)">
                 {{ formatDate(payment.date) }}
             </span>
-        </div>
-    </section>
+        </section>
+    </article>
 </template>