feat: partner invoices

apps/web-app/app/components/InvoiceCard.vue

@@ -0,0 +1,78 @@
+<template>
+  <UCard class="group/list">
+    <div class="flex flex-col gap-2.5">
+      <div class="flex flex-row justify-between">
+        <UIcon name="i-lucide-banknote-arrow-up" class="size-14 text-primary" />
+
+        <UButton
+          variant="outline"
+          color="neutral"
+          size="md"
+          icon="i-lucide-pencil"
+          class="size-10 justify-center opacity-0 group-hover/list:opacity-100 transition duration-200"
+          @click="modalUpdateInvoice.open({ invoiceId: invoice.id })"
+        />
+      </div>
+
+      <h3 class="text-xl md:text-xl/6 font-semibold">
+        {{ new Intl.NumberFormat().format(invoice.total) }} ₽
+      </h3>
+
+      <p class="text-base/5">
+        {{ invoice.title }}
+      </p>
+
+      <p class="text-sm/4 text-muted">
+        {{ invoice.description }}
+      </p>
+
+      <div class="flex flex-row flex-wrap gap-2">
+        <UBadge
+          :label="getInfoByType(invoice.type)"
+          color="neutral"
+          size="md"
+          variant="soft"
+        />
+
+        <UBadge
+          :label="getInfoByStatus(invoice.status)"
+          :color="invoice.status === 'unpaid' ? 'error' : 'success'"
+          size="md"
+          variant="soft"
+        />
+      </div>
+    </div>
+  </UCard>
+</template>
+
+<script setup lang="ts">
+import type { Invoice } from '@roll-stack/database'
+import { ModalUpdateInvoice } from '#components'
+
+defineProps<{
+  invoice: Invoice
+}>()
+
+function getInfoByType(type: Invoice['type']) {
+  switch (type) {
+    case 'replenishment':
+      return 'Пополнение'
+    case 'royalties':
+      return 'Роялти'
+    case 'other':
+      return 'Другое'
+  }
+}
+
+function getInfoByStatus(status: Invoice['status']) {
+  switch (status) {
+    case 'unpaid':
+      return 'Не оплачен'
+    case 'paid':
+      return 'Оплачен'
+  }
+}
+
+const overlay = useOverlay()
+const modalUpdateInvoice = overlay.create(ModalUpdateInvoice)
+</script>

apps/web-app/app/components/PartnerAgreementCard.vue

@@ -77,7 +77,7 @@
                 {{ kitchen.address }}
               </h3>
 
-              <h3 class="text-sm/5">
+              <h3 class="text-sm/4">
                 {{ kitchen.city }}
               </h3>
             </div>

apps/web-app/app/components/PartnerBalanceCard.vue

@@ -0,0 +1,23 @@
+<template>
+  <UCard>
+    <div class="flex flex-col gap-2.5">
+      <div class="flex flex-row items-start gap-2.5">
+        <UIcon name="i-lucide-banknote" class="size-14 text-primary" />
+      </div>
+
+      <h3 class="text-xl md:text-xl/6 font-semibold">
+        Баланс {{ new Intl.NumberFormat().format(balance) }} ₽
+      </h3>
+
+      <p class="text-base/5">
+        Может уходить в минус, если партнер не будет оплачивать выставленные ему счета.
+      </p>
+    </div>
+  </UCard>
+</template>
+
+<script setup lang="ts">
+defineProps<{
+  balance: number
+}>()
+</script>

apps/web-app/app/components/PartnerCard.vue

@@ -66,7 +66,7 @@
         variant="soft"
         size="md"
         class="rounded-lg justify-center font-semibold"
-        :label="`Баланс ${new Intl.NumberFormat().format(partner.balance)} руб`"
+        :label="`Баланс ${new Intl.NumberFormat().format(partner.balance)} ₽`"
       />
 
       <h3 class="text-sm/4 font-bold">

apps/web-app/app/components/form/CreateInvoice.vue

@@ -0,0 +1,111 @@
+<template>
+  <UForm
+    :validate="createValidator(createPartnerInvoiceSchema)"
+    :state="state"
+    class="flex flex-col gap-3"
+    @submit="onSubmit"
+  >
+    <UFormField
+      :label="$t('common.title')"
+      name="title"
+      required
+    >
+      <UInput
+        v-model="state.title"
+        size="xl"
+        class="w-full items-center justify-center"
+      />
+    </UFormField>
+
+    <UFormField
+      :label="$t('common.description')"
+      name="description"
+    >
+      <UInput
+        v-model="state.description"
+        size="xl"
+        class="w-full items-center justify-center"
+      />
+    </UFormField>
+
+    <UFormField label="Тип" name="type">
+      <USelect
+        v-model="state.type"
+        :items="[
+          { label: 'Оплата роялти', value: 'royalties' },
+          { label: 'Пополнение', value: 'replenishment' },
+          { label: 'Другое', value: 'other' },
+        ]"
+        :placeholder="$t('common.select')"
+        size="xl"
+        class="w-full"
+      />
+    </UFormField>
+
+    <UFormField
+      label="Сумма, руб"
+      name="total"
+      required
+    >
+      <UInputNumber
+        v-model="state.total"
+        orientation="vertical"
+        :step="0.1"
+        size="xl"
+        class="w-full items-center justify-center"
+      />
+    </UFormField>
+
+    <UButton
+      type="submit"
+      variant="solid"
+      color="secondary"
+      size="xl"
+      block
+      class="mt-3"
+      :label="$t('common.create')"
+    />
+  </UForm>
+</template>
+
+<script setup lang="ts">
+import type { CreatePartnerInvoice } from '#shared/services/partner'
+import type { FormSubmitEvent } from '@nuxt/ui'
+import { createPartnerInvoiceSchema } from '#shared/services/partner'
+
+const { partnerId } = defineProps<{ partnerId?: string }>()
+const emit = defineEmits(['success', 'submitted'])
+
+const { t } = useI18n()
+const actionToast = useActionToast()
+
+const partnerStore = usePartnerStore()
+
+const state = ref<Partial<CreatePartnerInvoice>>({
+  title: undefined,
+  description: undefined,
+  total: 0,
+  type: 'royalties',
+  status: 'unpaid',
+})
+
+async function onSubmit(event: FormSubmitEvent<CreatePartnerInvoice>) {
+  const toastId = actionToast.start()
+  emit('submitted')
+
+  try {
+    await $fetch(`/api/partner/id/${partnerId}/invoice`, {
+      method: 'POST',
+      body: event.data,
+    })
+
+    await partnerStore.update()
+
+    actionToast.success(toastId, t('toast.invoice-created'))
+    emit('success')
+  } catch (error) {
+    console.error(error)
+    actionToast.error(toastId)
+  }
+}
+</script>

apps/web-app/app/components/form/UpdateInvoice.vue

@@ -0,0 +1,132 @@
+<template>
+  <UForm
+    :validate="createValidator(updatePartnerInvoiceSchema)"
+    :state="state"
+    class="flex flex-col gap-3"
+    @submit="onSubmit"
+  >
+    <UFormField
+      label="Статус"
+      name="status"
+      required
+    >
+      <USelect
+        v-model="state.status"
+        :items="[
+          { label: 'Не оплачен', value: 'unpaid' },
+          { label: 'Полностью оплачен', value: 'paid' },
+        ]"
+        :placeholder="$t('common.select')"
+        size="xl"
+        class="w-full"
+      />
+    </UFormField>
+
+    <UFormField
+      :label="$t('common.title')"
+      name="title"
+      required
+    >
+      <UInput
+        v-model="state.title"
+        size="xl"
+        class="w-full items-center justify-center"
+      />
+    </UFormField>
+
+    <UFormField
+      :label="$t('common.description')"
+      name="description"
+    >
+      <UInput
+        v-model="state.description"
+        size="xl"
+        class="w-full items-center justify-center"
+      />
+    </UFormField>
+
+    <UFormField label="Тип" name="type">
+      <USelect
+        v-model="state.type"
+        :items="[
+          { label: 'Оплата роялти', value: 'royalties' },
+          { label: 'Пополнение', value: 'replenishment' },
+        ]"
+        :placeholder="$t('common.select')"
+        size="xl"
+        class="w-full"
+      />
+    </UFormField>
+
+    <UFormField
+      label="Сумма, руб"
+      name="total"
+      required
+    >
+      <UInputNumber
+        v-model="state.total"
+        orientation="vertical"
+        :step="0.1"
+        size="xl"
+        class="w-full items-center justify-center"
+      />
+    </UFormField>
+
+    <UButton
+      type="submit"
+      variant="solid"
+      color="secondary"
+      size="xl"
+      block
+      class="mt-3"
+      :label="$t('common.update')"
+    />
+  </UForm>
+</template>
+
+<script setup lang="ts">
+import type { UpdatePartnerInvoice } from '#shared/services/partner'
+import type { FormSubmitEvent } from '@nuxt/ui'
+import { updatePartnerInvoiceSchema } from '#shared/services/partner'
+
+const { invoiceId } = defineProps<{
+  invoiceId: string
+}>()
+
+const emit = defineEmits(['success', 'submitted'])
+
+const { t } = useI18n()
+const actionToast = useActionToast()
+
+const partnerStore = usePartnerStore()
+const invoices = computed(() => partnerStore.partners.flatMap((partner) => partner.invoices))
+const invoice = computed(() => invoices.value.find((invoice) => invoice.id === invoiceId))
+
+const state = ref<Partial<UpdatePartnerInvoice>>({
+  title: invoice.value?.title,
+  description: invoice.value?.description ?? undefined,
+  total: invoice.value?.total,
+  type: invoice.value?.type,
+  status: invoice.value?.status,
+})
+
+async function onSubmit(event: FormSubmitEvent<UpdatePartnerInvoice>) {
+  const toastId = actionToast.start()
+  emit('submitted')
+
+  try {
+    await $fetch(`/api/partner/invoice/id/${invoiceId}`, {
+      method: 'PATCH',
+      body: event.data,
+    })
+
+    await partnerStore.update()
+
+    actionToast.success(toastId, t('toast.invoice-updated'))
+    emit('success')
+  } catch (error) {
+    console.error(error)
+    actionToast.error(toastId)
+  }
+}
+</script>

apps/web-app/app/components/modal/CreateInvoice.vue

@@ -0,0 +1,19 @@
+<template>
+  <UModal title="Создание счета">
+    <template #body>
+      <FormCreateInvoice
+        :partner-id="partnerId ?? ''"
+        @submitted="overlay.closeAll"
+        @success="overlay.closeAll"
+      />
+    </template>
+  </UModal>
+</template>
+
+<script setup lang="ts">
+defineProps<{
+  partnerId?: string
+}>()
+
+const overlay = useOverlay()
+</script>