mirror of
https://github.com/InvoiceShelf/InvoiceShelf.git
synced 2026-04-20 19:54:08 +00:00
Phase 4b: Remaining features — payments, expenses, recurring
invoices, members, reports, settings, customer portal, modules, installation 82 files, 14293 lines. Completes all feature modules: - payments: CRUD with send/preview, payment modes - expenses: CRUD with receipt upload, categories - recurring-invoices: full frequency logic, limit by date/count - members: list with roles, invite modal, pending invitations - reports: sales, profit/loss, expenses, tax with date ranges - settings: 14 settings views, number customizer, mail config - customer-portal: consolidated store, 8 views, portal layout - modules: marketplace index, detail/install, module cards - installation: 8-step wizard with requirements/db/mail/account Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
Darko Gjorgjijoski
254
resources/scripts-v2/features/installation/views/CompanyView.vue
Normal file
254
resources/scripts-v2/features/installation/views/CompanyView.vue
Normal file
@@ -0,0 +1,254 @@
|
||||
<template>
|
||||
<BaseWizardStep
|
||||
:title="$t('wizard.company_info')"
|
||||
:description="$t('wizard.company_info_desc')"
|
||||
step-container="bg-surface border border-line-default border-solid mb-8 md:w-full p-8 rounded w-full"
|
||||
>
|
||||
<form @submit.prevent="next">
|
||||
<div class="grid grid-cols-1 mb-4 md:grid-cols-2 md:mb-6">
|
||||
<BaseInputGroup :label="$t('settings.company_info.company_logo')">
|
||||
<BaseFileUploader
|
||||
base64
|
||||
:preview-image="previewLogo"
|
||||
@change="onFileInputChange"
|
||||
@remove="onFileInputRemove"
|
||||
/>
|
||||
</BaseInputGroup>
|
||||
</div>
|
||||
|
||||
<div class="grid grid-cols-1 gap-4 mb-4 md:grid-cols-2 md:mb-6">
|
||||
<BaseInputGroup
|
||||
:label="$t('wizard.company_name')"
|
||||
:error="v$.name.$error ? String(v$.name.$errors[0]?.$message) : undefined"
|
||||
required
|
||||
>
|
||||
<BaseInput
|
||||
v-model.trim="companyForm.name"
|
||||
:invalid="v$.name.$error"
|
||||
type="text"
|
||||
name="name"
|
||||
@input="v$.name.$touch()"
|
||||
/>
|
||||
</BaseInputGroup>
|
||||
|
||||
<BaseInputGroup
|
||||
:label="$t('wizard.country')"
|
||||
:error="v$.country_id.$error ? String(v$.country_id.$errors[0]?.$message) : undefined"
|
||||
:content-loading="isFetchingInitialData"
|
||||
required
|
||||
>
|
||||
<BaseMultiselect
|
||||
v-model="companyForm.address.country_id"
|
||||
label="name"
|
||||
:invalid="v$.country_id.$error"
|
||||
:options="countries"
|
||||
value-prop="id"
|
||||
:can-deselect="false"
|
||||
:can-clear="false"
|
||||
:content-loading="isFetchingInitialData"
|
||||
:placeholder="$t('general.select_country')"
|
||||
searchable
|
||||
track-by="name"
|
||||
/>
|
||||
</BaseInputGroup>
|
||||
</div>
|
||||
|
||||
<div class="grid grid-cols-1 gap-4 mb-4 md:grid-cols-2 md:mb-6">
|
||||
<BaseInputGroup :label="$t('wizard.state')">
|
||||
<BaseInput v-model="companyForm.address.state" name="state" type="text" />
|
||||
</BaseInputGroup>
|
||||
|
||||
<BaseInputGroup :label="$t('wizard.city')">
|
||||
<BaseInput v-model="companyForm.address.city" name="city" type="text" />
|
||||
</BaseInputGroup>
|
||||
</div>
|
||||
|
||||
<div class="grid grid-cols-1 gap-4 mb-6 md:grid-cols-2">
|
||||
<div>
|
||||
<BaseInputGroup
|
||||
:label="$t('wizard.address')"
|
||||
:error="v$.address_street_1.$error ? String(v$.address_street_1.$errors[0]?.$message) : undefined"
|
||||
>
|
||||
<BaseTextarea
|
||||
v-model.trim="companyForm.address.address_street_1"
|
||||
:invalid="v$.address_street_1.$error"
|
||||
:placeholder="$t('general.street_1')"
|
||||
name="billing_street1"
|
||||
rows="2"
|
||||
@input="v$.address_street_1.$touch()"
|
||||
/>
|
||||
</BaseInputGroup>
|
||||
|
||||
<BaseInputGroup class="mt-1 lg:mt-2 md:mt-2">
|
||||
<BaseTextarea
|
||||
v-model="companyForm.address.address_street_2"
|
||||
:placeholder="$t('general.street_2')"
|
||||
name="billing_street2"
|
||||
rows="2"
|
||||
/>
|
||||
</BaseInputGroup>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<BaseInputGroup :label="$t('wizard.zip_code')">
|
||||
<BaseInput v-model.trim="companyForm.address.zip" type="text" name="zip" />
|
||||
</BaseInputGroup>
|
||||
|
||||
<BaseInputGroup :label="$t('wizard.phone')" class="mt-4">
|
||||
<BaseInput v-model.trim="companyForm.address.phone" type="text" name="phone" />
|
||||
</BaseInputGroup>
|
||||
</div>
|
||||
|
||||
<BaseInputGroup :label="$t('settings.company_info.tax_id')">
|
||||
<BaseInput v-model.trim="companyForm.tax_id" type="text" name="tax_id" />
|
||||
</BaseInputGroup>
|
||||
|
||||
<BaseInputGroup :label="$t('settings.company_info.vat_id')">
|
||||
<BaseInput v-model.trim="companyForm.vat_id" type="text" name="vat_id" />
|
||||
</BaseInputGroup>
|
||||
</div>
|
||||
|
||||
<BaseButton :loading="isSaving" :disabled="isSaving" class="mt-4">
|
||||
<template #left="slotProps">
|
||||
<BaseIcon v-if="!isSaving" name="ArrowDownOnSquareIcon" :class="slotProps.class" />
|
||||
</template>
|
||||
{{ $t('wizard.save_cont') }}
|
||||
</BaseButton>
|
||||
</form>
|
||||
</BaseWizardStep>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, reactive, computed, onMounted } from 'vue'
|
||||
import { useI18n } from 'vue-i18n'
|
||||
import { required, maxLength, helpers } from '@vuelidate/validators'
|
||||
import { useVuelidate } from '@vuelidate/core'
|
||||
import { client } from '../../../api/client'
|
||||
import { API } from '../../../api/endpoints'
|
||||
import type { Country } from '../../../types/domain/customer'
|
||||
|
||||
interface CompanyAddress {
|
||||
address_street_1: string
|
||||
address_street_2: string
|
||||
website: string
|
||||
country_id: number | null
|
||||
state: string
|
||||
city: string
|
||||
phone: string
|
||||
zip: string
|
||||
}
|
||||
|
||||
interface CompanyFormData {
|
||||
name: string | null
|
||||
tax_id: string | null
|
||||
vat_id: string | null
|
||||
address: CompanyAddress
|
||||
}
|
||||
|
||||
interface Emits {
|
||||
(e: 'next', step: number): void
|
||||
}
|
||||
|
||||
const emit = defineEmits<Emits>()
|
||||
const { t } = useI18n()
|
||||
|
||||
const isFetchingInitialData = ref<boolean>(false)
|
||||
const isSaving = ref<boolean>(false)
|
||||
const previewLogo = ref<string | null>(null)
|
||||
const logoFileBlob = ref<string | null>(null)
|
||||
const logoFileName = ref<string | null>(null)
|
||||
const countries = ref<Country[]>([])
|
||||
|
||||
const companyForm = reactive<CompanyFormData>({
|
||||
name: null,
|
||||
tax_id: null,
|
||||
vat_id: null,
|
||||
address: {
|
||||
address_street_1: '',
|
||||
address_street_2: '',
|
||||
website: '',
|
||||
country_id: null,
|
||||
state: '',
|
||||
city: '',
|
||||
phone: '',
|
||||
zip: '',
|
||||
},
|
||||
})
|
||||
|
||||
const rules = computed(() => ({
|
||||
name: {
|
||||
required: helpers.withMessage(t('validation.required'), required),
|
||||
},
|
||||
country_id: {
|
||||
required: helpers.withMessage(t('validation.required'), required),
|
||||
},
|
||||
address_street_1: {
|
||||
maxLength: helpers.withMessage(
|
||||
t('validation.address_maxlength', { count: 255 }),
|
||||
maxLength(255),
|
||||
),
|
||||
},
|
||||
}))
|
||||
|
||||
const validationState = computed(() => ({
|
||||
name: companyForm.name,
|
||||
country_id: companyForm.address.country_id,
|
||||
address_street_1: companyForm.address.address_street_1,
|
||||
}))
|
||||
|
||||
const v$ = useVuelidate(rules, validationState)
|
||||
|
||||
onMounted(async () => {
|
||||
isFetchingInitialData.value = true
|
||||
try {
|
||||
const { data } = await client.get(API.COUNTRIES)
|
||||
countries.value = data.data ?? data
|
||||
// Default to US
|
||||
const us = countries.value.find((c) => c.code === 'US')
|
||||
if (us) companyForm.address.country_id = us.id
|
||||
} finally {
|
||||
isFetchingInitialData.value = false
|
||||
}
|
||||
})
|
||||
|
||||
function onFileInputChange(
|
||||
_fileName: string,
|
||||
file: string,
|
||||
_fileCount: number,
|
||||
fileList: { name: string },
|
||||
): void {
|
||||
logoFileName.value = fileList.name
|
||||
logoFileBlob.value = file
|
||||
}
|
||||
|
||||
function onFileInputRemove(): void {
|
||||
logoFileBlob.value = null
|
||||
}
|
||||
|
||||
async function next(): Promise<void> {
|
||||
v$.value.$touch()
|
||||
if (v$.value.$invalid) return
|
||||
|
||||
isSaving.value = true
|
||||
|
||||
try {
|
||||
await client.put(API.COMPANY, companyForm)
|
||||
|
||||
if (logoFileBlob.value) {
|
||||
const logoData = new FormData()
|
||||
logoData.append(
|
||||
'company_logo',
|
||||
JSON.stringify({
|
||||
name: logoFileName.value,
|
||||
data: logoFileBlob.value,
|
||||
}),
|
||||
)
|
||||
await client.post(API.COMPANY_UPLOAD_LOGO, logoData)
|
||||
}
|
||||
|
||||
emit('next', 7)
|
||||
} finally {
|
||||
isSaving.value = false
|
||||
}
|
||||
}
|
||||
</script>
|
||||
Reference in New Issue
Block a user