Phase 3: Typed Vue components in scripts-v2/

Migrate all shared components to TypeScript SFCs with script setup
lang=ts. 72 files, 7144 lines, zero any types.

- components/base/ (42 files): Button, Input, Textarea, Checkbox,
  Radio, Switch, Badge, Card, Modal, Dialog, Dropdown, DatePicker,
  TimePicker, Money, FileUploader, Select, Icon, Loader, Multiselect,
  TabGroup, Wizard, CustomerSelect, ItemSelect, CustomInput, alerts,
  status badges (Invoice/Estimate/Paid/RecurringInvoice), List/ListItem
- components/table/ (3 files): DataTable, TablePagination
- components/form/ (4 files): FormGroup, FormGrid, SwitchSection
- components/layout/ (11 files): Page, PageHeader, Breadcrumb,
  FilterWrapper, EmptyPlaceholder, ContentPlaceholders, SettingCard
- components/editor/ (2 files): RichEditor with Tiptap
- components/charts/ (2 files): LineChart with Chart.js
- components/notifications/ (3 files): NotificationRoot, NotificationItem
- components/icons/ (2 files): MainLogo

All use defineProps<Props>(), defineEmits<Emits>(), typed refs,
and import domain types from types/domain.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

resources/scripts-v2/components/charts/LineChart.vue

@@ -0,0 +1,214 @@
+<template>
+  <div class="graph-container h-[300px]">
+    <canvas id="graph" ref="graph" />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { Chart } from 'chart.js/auto'
+import type { ChartConfiguration, ChartDataset } from 'chart.js/auto'
+import { ref, computed, onMounted, watchEffect, inject } from 'vue'
+import { useCompanyStore } from '@/scripts/admin/stores/company'
+
+interface FormatUtils {
+  formatMoney: (amount: number, currency: CurrencyInfo) => string
+}
+
+interface CurrencyInfo {
+  [key: string]: unknown
+}
+
+interface Props {
+  labels?: string[]
+  values?: number[]
+  invoices?: number[]
+  expenses?: number[]
+  receipts?: number[]
+  income?: number[]
+}
+
+const utils = inject<FormatUtils>('utils')
+
+const props = withDefaults(defineProps<Props>(), {
+  labels: () => [],
+  values: () => [],
+  invoices: () => [],
+  expenses: () => [],
+  receipts: () => [],
+  income: () => [],
+})
+
+let myLineChart: Chart | null = null
+const graph = ref<HTMLCanvasElement | null>(null)
+const companyStore = useCompanyStore()
+const defaultCurrency = computed<CurrencyInfo>(() => {
+  return companyStore.selectedCompanyCurrency
+})
+
+watchEffect(() => {
+  if (props.labels) {
+    if (myLineChart) {
+      myLineChart.reset()
+      update()
+    }
+  }
+})
+
+onMounted(() => {
+  if (!graph.value) return
+  const context = graph.value.getContext('2d')
+  if (!context) return
+
+  const style = getComputedStyle(document.documentElement)
+  const gridColor =
+    style.getPropertyValue('--color-line-light').trim() || 'rgba(0,0,0,0.1)'
+  const tickColor =
+    style.getPropertyValue('--color-muted').trim() || '#6b7280'
+  const surfaceColor =
+    style.getPropertyValue('--color-surface').trim() || '#fff'
+
+  const datasets: ChartDataset<'line', number[]>[] = [
+    {
+      label: 'Sales',
+      fill: false,
+      tension: 0.3,
+      backgroundColor: 'rgba(230, 254, 249)',
+      borderColor: tickColor,
+      borderCapStyle: 'butt',
+      borderDash: [],
+      borderDashOffset: 0.0,
+      borderJoinStyle: 'miter',
+      pointBorderColor: tickColor,
+      pointBackgroundColor: surfaceColor,
+      pointBorderWidth: 1,
+      pointHoverRadius: 5,
+      pointHoverBackgroundColor: tickColor,
+      pointHoverBorderColor: 'rgba(220,220,220,1)',
+      pointHoverBorderWidth: 2,
+      pointRadius: 4,
+      pointHitRadius: 10,
+      data: props.invoices.map((invoice) => invoice / 100),
+    },
+    {
+      label: 'Receipts',
+      fill: false,
+      tension: 0.3,
+      backgroundColor: 'rgba(230, 254, 249)',
+      borderColor: 'rgb(2, 201, 156)',
+      borderCapStyle: 'butt',
+      borderDash: [],
+      borderDashOffset: 0.0,
+      borderJoinStyle: 'miter',
+      pointBorderColor: 'rgb(2, 201, 156)',
+      pointBackgroundColor: surfaceColor,
+      pointBorderWidth: 1,
+      pointHoverRadius: 5,
+      pointHoverBackgroundColor: 'rgb(2, 201, 156)',
+      pointHoverBorderColor: 'rgba(220,220,220,1)',
+      pointHoverBorderWidth: 2,
+      pointRadius: 4,
+      pointHitRadius: 10,
+      data: props.receipts.map((receipt) => receipt / 100),
+    },
+    {
+      label: 'Expenses',
+      fill: false,
+      tension: 0.3,
+      backgroundColor: 'rgba(245, 235, 242)',
+      borderColor: 'rgb(255,0,0)',
+      borderCapStyle: 'butt',
+      borderDash: [],
+      borderDashOffset: 0.0,
+      borderJoinStyle: 'miter',
+      pointBorderColor: 'rgb(255,0,0)',
+      pointBackgroundColor: surfaceColor,
+      pointBorderWidth: 1,
+      pointHoverRadius: 5,
+      pointHoverBackgroundColor: 'rgb(255,0,0)',
+      pointHoverBorderColor: 'rgba(220,220,220,1)',
+      pointHoverBorderWidth: 2,
+      pointRadius: 4,
+      pointHitRadius: 10,
+      data: props.expenses.map((expense) => expense / 100),
+    },
+    {
+      label: 'Net Income',
+      fill: false,
+      tension: 0.3,
+      backgroundColor: 'rgba(236, 235, 249)',
+      borderColor: 'rgba(88, 81, 216, 1)',
+      borderCapStyle: 'butt',
+      borderDash: [],
+      borderDashOffset: 0.0,
+      borderJoinStyle: 'miter',
+      pointBorderColor: 'rgba(88, 81, 216, 1)',
+      pointBackgroundColor: surfaceColor,
+      pointBorderWidth: 1,
+      pointHoverRadius: 5,
+      pointHoverBackgroundColor: 'rgba(88, 81, 216, 1)',
+      pointHoverBorderColor: 'rgba(220,220,220,1)',
+      pointHoverBorderWidth: 2,
+      pointRadius: 4,
+      pointHitRadius: 10,
+      data: props.income.map((i) => i / 100),
+    },
+  ]
+
+  const config: ChartConfiguration<'line', number[], string> = {
+    type: 'line',
+    data: {
+      labels: props.labels,
+      datasets,
+    },
+    options: {
+      responsive: true,
+      maintainAspectRatio: false,
+      scales: {
+        x: {
+          grid: { color: gridColor },
+          ticks: { color: tickColor },
+        },
+        y: {
+          grid: { color: gridColor },
+          ticks: { color: tickColor },
+        },
+      },
+      plugins: {
+        tooltip: {
+          enabled: true,
+          callbacks: {
+            label: function (tooltipContext) {
+              if (!utils) return ''
+              return utils.formatMoney(
+                Math.round(tooltipContext.parsed.y * 100),
+                defaultCurrency.value
+              )
+            },
+          },
+        },
+        legend: {
+          display: false,
+        },
+      },
+    },
+  }
+
+  myLineChart = new Chart(context, config)
+})
+
+function update(): void {
+  if (!myLineChart) return
+  myLineChart.data.labels = props.labels
+  myLineChart.data.datasets[0].data = props.invoices.map(
+    (invoice) => invoice / 100
+  )
+  myLineChart.data.datasets[1].data = props.receipts.map(
+    (receipt) => receipt / 100
+  )
+  myLineChart.data.datasets[2].data = props.expenses.map(
+    (expense) => expense / 100
+  )
+  myLineChart.data.datasets[3].data = props.income.map((i) => i / 100)
+  myLineChart.update('none')
+}
+</script>