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>

resources/scripts-v2/features/installation/views/DatabaseView.vue

@@ -0,0 +1,170 @@
+<template>
+  <BaseWizardStep
+    :title="$t('wizard.database.database')"
+    :description="$t('wizard.database.desc')"
+    step-container="w-full p-8 mb-8 bg-surface border border-line-default border-solid rounded md:w-full"
+  >
+    <form @submit.prevent="next">
+      <div class="grid grid-cols-1 gap-4 mb-4 md:grid-cols-2 md:mb-6">
+        <BaseInputGroup
+          :label="$t('wizard.database.connection')"
+          required
+        >
+          <BaseMultiselect
+            v-model="databaseData.database_connection"
+            :options="databaseDrivers"
+            label="label"
+            value-prop="value"
+            :can-deselect="false"
+            :can-clear="false"
+            @update:model-value="onChangeDriver"
+          />
+        </BaseInputGroup>
+      </div>
+
+      <!-- MySQL / PostgreSQL fields -->
+      <template v-if="databaseData.database_connection !== 'sqlite'">
+        <div class="grid grid-cols-1 gap-4 mb-4 md:grid-cols-2 md:mb-6">
+          <BaseInputGroup :label="$t('wizard.database.hostname')" required>
+            <BaseInput v-model="databaseData.database_hostname" type="text" />
+          </BaseInputGroup>
+
+          <BaseInputGroup :label="$t('wizard.database.port')" required>
+            <BaseInput v-model="databaseData.database_port" type="text" />
+          </BaseInputGroup>
+        </div>
+
+        <div class="grid grid-cols-1 gap-4 mb-4 md:grid-cols-2 md:mb-6">
+          <BaseInputGroup :label="$t('wizard.database.db_name')" required>
+            <BaseInput v-model="databaseData.database_name" type="text" />
+          </BaseInputGroup>
+
+          <BaseInputGroup :label="$t('wizard.database.username')" required>
+            <BaseInput v-model="databaseData.database_username" type="text" />
+          </BaseInputGroup>
+        </div>
+
+        <div class="grid grid-cols-1 gap-4 mb-6 md:grid-cols-2">
+          <BaseInputGroup :label="$t('wizard.database.password')">
+            <BaseInput v-model="databaseData.database_password" type="password" />
+          </BaseInputGroup>
+        </div>
+      </template>
+
+      <!-- SQLite fields -->
+      <template v-else>
+        <div class="grid grid-cols-1 gap-4 mb-6 md:grid-cols-2">
+          <BaseInputGroup :label="$t('wizard.database.db_name')">
+            <BaseInput v-model="databaseData.database_name" type="text" disabled />
+          </BaseInputGroup>
+        </div>
+      </template>
+
+      <BaseButton :loading="isSaving" :disabled="isSaving" class="mt-4">
+        <template #left="slotProps">
+          <BaseIcon name="ArrowRightIcon" :class="slotProps.class" />
+        </template>
+        {{ $t('wizard.continue') }}
+      </BaseButton>
+    </form>
+  </BaseWizardStep>
+</template>
+
+<script setup lang="ts">
+import { ref, reactive, onMounted } from 'vue'
+import { useI18n } from 'vue-i18n'
+import { client } from '../../../api/client'
+
+interface DatabaseConfig {
+  database_connection: string
+  database_hostname: string
+  database_port: string
+  database_name: string | null
+  database_username: string | null
+  database_password: string | null
+  database_overwrite: boolean
+  app_url: string
+  app_locale: string | null
+}
+
+interface Emits {
+  (e: 'next', step: number): void
+}
+
+interface DatabaseDriverOption {
+  label: string
+  value: string
+}
+
+const emit = defineEmits<Emits>()
+const { t } = useI18n()
+
+const isSaving = ref<boolean>(false)
+
+const databaseDrivers = ref<DatabaseDriverOption[]>([
+  { label: 'MySQL', value: 'mysql' },
+  { label: 'PostgreSQL', value: 'pgsql' },
+  { label: 'SQLite', value: 'sqlite' },
+])
+
+const databaseData = reactive<DatabaseConfig>({
+  database_connection: 'mysql',
+  database_hostname: '127.0.0.1',
+  database_port: '3306',
+  database_name: null,
+  database_username: null,
+  database_password: null,
+  database_overwrite: false,
+  app_url: window.location.origin,
+  app_locale: null,
+})
+
+onMounted(() => {
+  getDatabaseConfig()
+})
+
+async function getDatabaseConfig(connection?: string): Promise<void> {
+  const params: Record<string, string> = {}
+  if (connection) params.connection = connection
+
+  const { data } = await client.get('/api/v1/installation/database/config', { params })
+
+  if (data.success) {
+    databaseData.database_connection = data.config.database_connection
+  }
+
+  if (data.config.database_connection === 'sqlite') {
+    databaseData.database_name = data.config.database_name
+  } else {
+    databaseData.database_name = null
+    if (data.config.database_host) {
+      databaseData.database_hostname = data.config.database_host
+    }
+    if (data.config.database_port) {
+      databaseData.database_port = data.config.database_port
+    }
+  }
+}
+
+function onChangeDriver(connection: string): void {
+  getDatabaseConfig(connection)
+}
+
+async function next(): Promise<void> {
+  isSaving.value = true
+
+  try {
+    const { data: res } = await client.post(
+      '/api/v1/installation/database/config',
+      databaseData,
+    )
+
+    if (res.success) {
+      await client.post('/api/v1/installation/finish')
+      emit('next', 3)
+    }
+  } finally {
+    isSaving.value = false
+  }
+}
+</script>