Fix/multiple company (#203)
* Refactor onboarding and dashboard logic; add silent team creation for users - Removed unnecessary useCompany context in DashboardContent and SettingsSidebar components. - Simplified onboarding setup logic to allow direct access to the dashboard for users without companies. - Introduced WelcomeOnboarding component to handle user onboarding steps. - Added migration to create silent teams for all users at signup, backfilling existing users without teams, and cleaning up incomplete companies. * fix: update greeting logic and improve email handling in TIC extension * Redirect to onboarding for users without companies and update onboarding flow * Build issue fix * Enhance onboarding experience by adding existing companies check
This commit is contained in:
Mattsson
@@ -136,27 +136,37 @@ export async function GET(request: NextRequest) {
|
||||
}
|
||||
}
|
||||
|
||||
// Check if user has completed onboarding (for any company they belong to)
|
||||
const { data: membership } = await supabase
|
||||
.from('company_members')
|
||||
.select('company_id')
|
||||
// Ensure user has a silent team (for new signups and existing users without one)
|
||||
const { data: teamMembership } = await supabase
|
||||
.from('team_members')
|
||||
.select('team_id')
|
||||
.eq('user_id', user.id)
|
||||
.limit(1)
|
||||
.single()
|
||||
.maybeSingle()
|
||||
|
||||
if (membership?.company_id) {
|
||||
const { data: settings } = await supabase
|
||||
.from('company_settings')
|
||||
.select('onboarding_complete')
|
||||
.eq('company_id', membership.company_id)
|
||||
.single()
|
||||
if (!teamMembership) {
|
||||
// Create team via service client (RPC requires auth.uid() which isn't available here)
|
||||
const serviceClient = createServerClient(
|
||||
process.env.NEXT_PUBLIC_SUPABASE_URL!,
|
||||
process.env.SUPABASE_SERVICE_ROLE_KEY!,
|
||||
{ cookies: { getAll: () => [], setAll: () => {} } }
|
||||
)
|
||||
|
||||
if (!settings?.onboarding_complete) {
|
||||
redirectPath = '/onboarding'
|
||||
}
|
||||
} else {
|
||||
redirectPath = '/onboarding'
|
||||
const teamId = crypto.randomUUID()
|
||||
await serviceClient.from('teams').insert({
|
||||
id: teamId,
|
||||
name: 'Personal',
|
||||
created_by: user.id,
|
||||
})
|
||||
await serviceClient.from('team_members').insert({
|
||||
team_id: teamId,
|
||||
user_id: user.id,
|
||||
role: 'owner',
|
||||
})
|
||||
}
|
||||
|
||||
// Always redirect to dashboard — it handles zero-company and incomplete states
|
||||
redirectPath = '/'
|
||||
}
|
||||
|
||||
// Create redirect and explicitly set auth cookies on the response
|
||||
|
||||
@@ -127,7 +127,7 @@ function RegisterPageContent() {
|
||||
return
|
||||
}
|
||||
|
||||
router.push('/onboarding')
|
||||
router.push('/')
|
||||
router.refresh()
|
||||
} catch (error) {
|
||||
console.error('[register] BankID signup error', error)
|
||||
|
||||
@@ -12,6 +12,7 @@ import { Plus, Search, Users } from 'lucide-react'
|
||||
import CustomerForm from '@/components/customers/CustomerForm'
|
||||
import { EmptyCustomers } from '@/components/ui/empty-state'
|
||||
import Link from 'next/link'
|
||||
import { useCompany } from '@/contexts/CompanyContext'
|
||||
import type { Customer, CustomerType, CreateCustomerInput } from '@/types'
|
||||
|
||||
const customerTypeLabels: Record<CustomerType, string> = {
|
||||
@@ -31,6 +32,7 @@ function getInitials(name: string): string {
|
||||
}
|
||||
|
||||
export default function CustomersPage() {
|
||||
const { company } = useCompany()
|
||||
const [customers, setCustomers] = useState<Customer[]>([])
|
||||
const [isLoading, setIsLoading] = useState(true)
|
||||
const [searchTerm, setSearchTerm] = useState('')
|
||||
@@ -40,10 +42,12 @@ export default function CustomersPage() {
|
||||
const supabase = createClient()
|
||||
|
||||
async function fetchCustomers() {
|
||||
if (!company) return
|
||||
setIsLoading(true)
|
||||
const { data, error } = await supabase
|
||||
.from('customers')
|
||||
.select('*')
|
||||
.eq('company_id', company.id)
|
||||
.order('name', { ascending: true })
|
||||
|
||||
if (error) {
|
||||
|
||||
@@ -8,11 +8,13 @@ import { ToastAction } from '@/components/ui/toast'
|
||||
import { DeadlineList } from '@/components/deadlines/DeadlineList'
|
||||
import { PageHeader } from '@/components/ui/page-header'
|
||||
import { AlertTriangle, ArrowRight } from 'lucide-react'
|
||||
import { useCompany } from '@/contexts/CompanyContext'
|
||||
import type { Deadline } from '@/types'
|
||||
|
||||
const supabase = createClient()
|
||||
|
||||
export default function DeadlinesPage() {
|
||||
const { company } = useCompany()
|
||||
const [deadlines, setDeadlines] = useState<Deadline[]>([])
|
||||
const [customers, setCustomers] = useState<{ id: string; name: string }[]>([])
|
||||
const [overdueInvoices, setOverdueInvoices] = useState<{ count: number; total: number }>({ count: 0, total: 0 })
|
||||
@@ -20,15 +22,16 @@ export default function DeadlinesPage() {
|
||||
const { toast } = useToast()
|
||||
|
||||
const fetchData = useCallback(async () => {
|
||||
if (!company) return
|
||||
setIsLoading(true)
|
||||
|
||||
try {
|
||||
const today = new Date().toISOString().split('T')[0]
|
||||
|
||||
const [deadlinesRes, customersRes, overdueRes] = await Promise.all([
|
||||
supabase.from('deadlines').select('*, customer:customers(name)').order('due_date', { ascending: true }),
|
||||
supabase.from('customers').select('id, name').order('name', { ascending: true }),
|
||||
supabase.from('invoices').select('total_sek, total').in('status', ['sent', 'unpaid']).lt('due_date', today),
|
||||
supabase.from('deadlines').select('*, customer:customers(name)').eq('company_id', company.id).order('due_date', { ascending: true }),
|
||||
supabase.from('customers').select('id, name').eq('company_id', company.id).order('name', { ascending: true }),
|
||||
supabase.from('invoices').select('total_sek, total').eq('company_id', company.id).in('status', ['sent', 'unpaid']).lt('due_date', today),
|
||||
])
|
||||
|
||||
if (deadlinesRes.error) throw deadlinesRes.error
|
||||
|
||||
@@ -13,6 +13,7 @@ import { EmptyState } from '@/components/ui/empty-state'
|
||||
import { useToast } from '@/components/ui/use-toast'
|
||||
import { formatCurrency } from '@/lib/utils'
|
||||
import { Plus, Search, Wallet, Clock, AlertCircle } from 'lucide-react'
|
||||
import { useCompany } from '@/contexts/CompanyContext'
|
||||
import type { SupplierInvoice } from '@/types'
|
||||
|
||||
type ExpenseInvoice = SupplierInvoice & { supplier?: { id: string; name: string } }
|
||||
@@ -60,6 +61,7 @@ function getRelativeTimeLabel(dueDateStr: string, status: string): { text: strin
|
||||
}
|
||||
|
||||
export default function ExpensesPage() {
|
||||
const { company } = useCompany()
|
||||
const [invoices, setInvoices] = useState<ExpenseInvoice[]>([])
|
||||
const [isLoading, setIsLoading] = useState(true)
|
||||
const [searchTerm, setSearchTerm] = useState('')
|
||||
@@ -68,10 +70,12 @@ export default function ExpensesPage() {
|
||||
const supabase = createClient()
|
||||
|
||||
async function fetchExpenses() {
|
||||
if (!company) return
|
||||
setIsLoading(true)
|
||||
const { data, error } = await supabase
|
||||
.from('supplier_invoices')
|
||||
.select('*, supplier:suppliers(id, name)')
|
||||
.eq('company_id', company.id)
|
||||
.order('due_date', { ascending: true })
|
||||
|
||||
if (error) {
|
||||
|
||||
@@ -15,6 +15,7 @@ import { formatCurrency, formatDate } from '@/lib/utils'
|
||||
import { cn } from '@/lib/utils'
|
||||
import { Plus, Search, Receipt } from 'lucide-react'
|
||||
import { EmptyInvoices } from '@/components/ui/empty-state'
|
||||
import { useCompany } from '@/contexts/CompanyContext'
|
||||
import type { Invoice, InvoiceStatus } from '@/types'
|
||||
|
||||
const statusConfig: Record<InvoiceStatus, { label: string; variant: 'default' | 'secondary' | 'success' | 'warning' | 'destructive'; borderColor: string }> = {
|
||||
@@ -49,6 +50,7 @@ function getRelativeTimeLabel(dueDateStr: string, status: InvoiceStatus): { text
|
||||
}
|
||||
|
||||
export default function InvoicesPage() {
|
||||
const { company } = useCompany()
|
||||
const [invoices, setInvoices] = useState<Invoice[]>([])
|
||||
const [isLoading, setIsLoading] = useState(true)
|
||||
const [searchTerm, setSearchTerm] = useState('')
|
||||
@@ -57,10 +59,12 @@ export default function InvoicesPage() {
|
||||
const supabase = createClient()
|
||||
|
||||
async function fetchInvoices() {
|
||||
if (!company) return
|
||||
setIsLoading(true)
|
||||
const { data, error } = await supabase
|
||||
.from('invoices')
|
||||
.select('*, customer:customers(name)')
|
||||
.eq('company_id', company.id)
|
||||
.order('invoice_date', { ascending: false })
|
||||
|
||||
if (error) {
|
||||
|
||||
+39
-81
@@ -47,45 +47,8 @@ export default async function DashboardLayout({
|
||||
|
||||
const isTeamMember = !!teamMembership
|
||||
|
||||
// Consultant with team but no companies — show dashboard with empty state
|
||||
// No companies — redirect to onboarding
|
||||
if (!companyId) {
|
||||
if (isTeamMember) {
|
||||
const companyContextValue = {
|
||||
company: null,
|
||||
role: null,
|
||||
companies: [],
|
||||
isTeamMember: true,
|
||||
team,
|
||||
}
|
||||
|
||||
return (
|
||||
<CompanyProvider value={companyContextValue}>
|
||||
<div className="min-h-screen bg-background">
|
||||
<a
|
||||
href="#main-content"
|
||||
className="sr-only focus:not-sr-only focus:fixed focus:top-4 focus:left-4 focus:z-[100] focus:px-4 focus:py-2 focus:bg-primary focus:text-primary-foreground focus:rounded-lg focus:text-sm focus:font-medium"
|
||||
>
|
||||
Hoppa till innehåll
|
||||
</a>
|
||||
<DashboardNav
|
||||
companyName={team?.name || 'Mitt team'}
|
||||
entityType="enskild_firma"
|
||||
uncategorizedTransactionCount={0}
|
||||
pendingOperationsCount={0}
|
||||
isSandbox={false}
|
||||
extensionNavItems={getExtensionNavItems()}
|
||||
/>
|
||||
<main id="main-content" className="safe-area-main-padding md:!pb-0 md:pl-[232px]" role="main">
|
||||
<div className="max-w-5xl mx-auto px-5 py-8 md:px-8 md:py-10">
|
||||
{children}
|
||||
</div>
|
||||
</main>
|
||||
<SentryIdentify userId={user.id} email={user.email} />
|
||||
</div>
|
||||
</CompanyProvider>
|
||||
)
|
||||
}
|
||||
|
||||
redirect('/onboarding')
|
||||
}
|
||||
|
||||
@@ -102,42 +65,38 @@ export default async function DashboardLayout({
|
||||
|
||||
if (!companyRow || !memberRow) {
|
||||
// Stale cookie pointing to a deleted/inaccessible company.
|
||||
// If the user is a team member, render the empty-state dashboard
|
||||
// instead of redirecting to onboarding (which would cause a loop).
|
||||
if (isTeamMember) {
|
||||
const companyContextValue = {
|
||||
company: null,
|
||||
role: null,
|
||||
companies: (allMemberships || []).filter(m => m.companies).map((m) => ({
|
||||
company: m.companies as unknown as import('@/types').Company,
|
||||
role: m.role as CompanyRole,
|
||||
})),
|
||||
isTeamMember: true,
|
||||
team,
|
||||
}
|
||||
|
||||
return (
|
||||
<CompanyProvider value={companyContextValue}>
|
||||
<div className="min-h-screen bg-background">
|
||||
<DashboardNav
|
||||
companyName={team?.name || 'Mitt team'}
|
||||
entityType="enskild_firma"
|
||||
uncategorizedTransactionCount={0}
|
||||
pendingOperationsCount={0}
|
||||
isSandbox={false}
|
||||
extensionNavItems={getExtensionNavItems()}
|
||||
/>
|
||||
<main id="main-content" className="safe-area-main-padding md:!pb-0 md:pl-[232px]" role="main">
|
||||
<div className="max-w-5xl mx-auto px-5 py-8 md:px-8 md:py-10">
|
||||
{children}
|
||||
</div>
|
||||
</main>
|
||||
<SentryIdentify userId={user.id} email={user.email} />
|
||||
</div>
|
||||
</CompanyProvider>
|
||||
)
|
||||
// Render the empty-state dashboard so user can switch or create a company.
|
||||
const companyContextValue = {
|
||||
company: null,
|
||||
role: null,
|
||||
companies: (allMemberships || []).filter(m => m.companies).map((m) => ({
|
||||
company: m.companies as unknown as import('@/types').Company,
|
||||
role: m.role as CompanyRole,
|
||||
})),
|
||||
isTeamMember,
|
||||
team,
|
||||
}
|
||||
redirect('/onboarding')
|
||||
|
||||
return (
|
||||
<CompanyProvider value={companyContextValue}>
|
||||
<div className="min-h-screen bg-background">
|
||||
<DashboardNav
|
||||
companyName="gnubok"
|
||||
entityType="enskild_firma"
|
||||
uncategorizedTransactionCount={0}
|
||||
pendingOperationsCount={0}
|
||||
isSandbox={false}
|
||||
extensionNavItems={getExtensionNavItems()}
|
||||
/>
|
||||
<main id="main-content" className="safe-area-main-padding md:!pb-0 md:pl-[232px]" role="main">
|
||||
<div className="max-w-5xl mx-auto px-5 py-8 md:px-8 md:py-10">
|
||||
{children}
|
||||
</div>
|
||||
</main>
|
||||
<SentryIdentify userId={user.id} email={user.email} />
|
||||
</div>
|
||||
</CompanyProvider>
|
||||
)
|
||||
}
|
||||
|
||||
const [{ data: settings }, { count: uncategorizedCount }, { count: pendingOpsCount }] = await Promise.all([
|
||||
@@ -158,12 +117,11 @@ export default async function DashboardLayout({
|
||||
.eq('status', 'pending'),
|
||||
])
|
||||
|
||||
if (!settings?.onboarding_complete) {
|
||||
redirect('/onboarding')
|
||||
}
|
||||
// If onboarding incomplete, still render the dashboard — the page component
|
||||
// will show the inline onboarding card instead of the normal dashboard content.
|
||||
|
||||
// Use company_name from settings as the display name (companies.name may be stale)
|
||||
const displayName = settings.company_name || companyRow.name
|
||||
const displayName = settings?.company_name || companyRow.name
|
||||
const companyWithName = { ...companyRow, name: displayName }
|
||||
|
||||
const companyContextValue = {
|
||||
@@ -181,9 +139,9 @@ export default async function DashboardLayout({
|
||||
team,
|
||||
}
|
||||
|
||||
const entityType = (settings.entity_type as EntityType) || 'enskild_firma'
|
||||
const entityType = (settings?.entity_type as EntityType) || 'enskild_firma'
|
||||
|
||||
const isSandbox = settings.is_sandbox === true
|
||||
const isSandbox = settings?.is_sandbox === true
|
||||
|
||||
return (
|
||||
<CompanyProvider value={companyContextValue}>
|
||||
@@ -197,7 +155,7 @@ export default async function DashboardLayout({
|
||||
</a>
|
||||
{isSandbox && <SandboxBanner />}
|
||||
<DashboardNav
|
||||
companyName={settings.company_name || 'Min verksamhet'}
|
||||
companyName={settings?.company_name || 'Min verksamhet'}
|
||||
entityType={entityType}
|
||||
uncategorizedTransactionCount={uncategorizedCount ?? 0}
|
||||
pendingOperationsCount={pendingOpsCount ?? 0}
|
||||
@@ -214,7 +172,7 @@ export default async function DashboardLayout({
|
||||
<RecaptIdentify
|
||||
userId={user.id}
|
||||
email={user.email}
|
||||
displayName={settings.company_name || undefined}
|
||||
displayName={settings?.company_name || undefined}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
|
||||
@@ -2,7 +2,6 @@ import { createClient } from '@/lib/supabase/server'
|
||||
import { redirect } from 'next/navigation'
|
||||
import { cookies } from 'next/headers'
|
||||
import DashboardContent from '@/components/dashboard/DashboardContent'
|
||||
import ConsultantEmptyState from '@/components/dashboard/ConsultantEmptyState'
|
||||
import { getActiveCompanyId } from '@/lib/company/context'
|
||||
import type { Deadline, ReceiptQueueSummary, OnboardingProgress } from '@/types'
|
||||
|
||||
@@ -34,24 +33,6 @@ export default async function DashboardPage() {
|
||||
}
|
||||
|
||||
if (!companyId) {
|
||||
// Consultants (team members) see an empty state; solo users go to onboarding
|
||||
const { data: teamMembership } = await supabase
|
||||
.from('team_members')
|
||||
.select('team_id')
|
||||
.eq('user_id', user.id)
|
||||
.limit(1)
|
||||
.maybeSingle()
|
||||
|
||||
if (teamMembership) {
|
||||
const { data: profile } = await supabase
|
||||
.from('profiles')
|
||||
.select('full_name')
|
||||
.eq('id', user.id)
|
||||
.single()
|
||||
const firstName = profile?.full_name?.split(' ')[0] || null
|
||||
return <ConsultantEmptyState firstName={firstName} />
|
||||
}
|
||||
|
||||
redirect('/onboarding')
|
||||
}
|
||||
|
||||
@@ -122,6 +103,11 @@ export default async function DashboardPage() {
|
||||
|
||||
const firstName = profile?.full_name?.split(' ')[0] || null
|
||||
|
||||
// If onboarding is not complete, redirect to onboarding
|
||||
if (!settings?.onboarding_complete) {
|
||||
redirect('/onboarding')
|
||||
}
|
||||
|
||||
const onboardingProgress: OnboardingProgress = {
|
||||
hasCustomers: (customerCount || 0) > 0,
|
||||
hasInvoices: (invoiceCount || 0) > 0,
|
||||
|
||||
@@ -11,6 +11,7 @@ import { useToast } from '@/components/ui/use-toast'
|
||||
import { Plus, Search, Building2, Globe } from 'lucide-react'
|
||||
import SupplierForm from '@/components/suppliers/SupplierForm'
|
||||
import Link from 'next/link'
|
||||
import { useCompany } from '@/contexts/CompanyContext'
|
||||
import type { Supplier, SupplierType, CreateSupplierInput } from '@/types'
|
||||
|
||||
const supplierTypeLabels: Record<SupplierType, string> = {
|
||||
@@ -26,6 +27,7 @@ const supplierTypeIcons: Record<SupplierType, React.ElementType> = {
|
||||
}
|
||||
|
||||
export default function SuppliersPage() {
|
||||
const { company } = useCompany()
|
||||
const [suppliers, setSuppliers] = useState<Supplier[]>([])
|
||||
const [isLoading, setIsLoading] = useState(true)
|
||||
const [searchTerm, setSearchTerm] = useState('')
|
||||
@@ -35,10 +37,12 @@ export default function SuppliersPage() {
|
||||
const supabase = createClient()
|
||||
|
||||
async function fetchSuppliers() {
|
||||
if (!company) return
|
||||
setIsLoading(true)
|
||||
const { data, error } = await supabase
|
||||
.from('suppliers')
|
||||
.select('*')
|
||||
.eq('company_id', company.id)
|
||||
.order('name', { ascending: true })
|
||||
|
||||
if (error) {
|
||||
|
||||
@@ -104,10 +104,12 @@ export default function TransactionsPage() {
|
||||
const PAGE_SIZE = 200
|
||||
|
||||
async function fetchTransactions() {
|
||||
if (!company) return
|
||||
setIsLoading(true)
|
||||
const { data: txData, error: txError } = await supabase
|
||||
.from('transactions')
|
||||
.select('*')
|
||||
.eq('company_id', company.id)
|
||||
.order('date', { ascending: false })
|
||||
.limit(PAGE_SIZE)
|
||||
|
||||
@@ -165,11 +167,13 @@ export default function TransactionsPage() {
|
||||
}
|
||||
|
||||
async function loadMoreTransactions() {
|
||||
if (!company) return
|
||||
setIsLoadingMore(true)
|
||||
const offset = transactions.length
|
||||
const { data: txData, error: txError } = await supabase
|
||||
.from('transactions')
|
||||
.select('*')
|
||||
.eq('company_id', company.id)
|
||||
.order('date', { ascending: false })
|
||||
.range(offset, offset + PAGE_SIZE - 1)
|
||||
|
||||
|
||||
@@ -10,9 +10,11 @@ export default async function OnboardingLayout({
|
||||
const { data: { user } } = await supabase.auth.getUser()
|
||||
|
||||
return (
|
||||
<>
|
||||
{children}
|
||||
<div className="min-h-screen bg-background flex items-center justify-center">
|
||||
<div className="w-full max-w-lg px-5">
|
||||
{children}
|
||||
</div>
|
||||
{user && <SentryIdentify userId={user.id} email={user.email} />}
|
||||
</>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
@@ -1,808 +1,46 @@
|
||||
'use client'
|
||||
import { createClient } from '@/lib/supabase/server'
|
||||
import { redirect } from 'next/navigation'
|
||||
import WelcomeOnboarding from '@/components/dashboard/WelcomeOnboarding'
|
||||
|
||||
import { useState, useEffect, Suspense } from 'react'
|
||||
import { useRouter } from 'next/navigation'
|
||||
import Image from 'next/image'
|
||||
import * as Sentry from '@sentry/nextjs'
|
||||
import { createClient } from '@/lib/supabase/client'
|
||||
import { useToast } from '@/components/ui/use-toast'
|
||||
import { Loader2 } from 'lucide-react'
|
||||
import { cn } from '@/lib/utils'
|
||||
import { Button } from '@/components/ui/button'
|
||||
import { validatePeriodDuration } from '@/lib/bookkeeping/validate-period-duration'
|
||||
import { ENABLED_EXTENSION_IDS } from '@/lib/extensions/_generated/enabled-extensions'
|
||||
import type { CompanyLookupResult } from '@/lib/company-lookup/types'
|
||||
import type { CompanySettings, EntityType, MomsPeriod } from '@/types'
|
||||
import type { CompanyRole } from '@/extensions/general/tic/lib/bankid-types'
|
||||
export const dynamic = 'force-dynamic'
|
||||
|
||||
import Step1EntityType from '@/components/onboarding/Step1EntityType'
|
||||
import Step2CompanyDetails from '@/components/onboarding/Step2CompanyDetails'
|
||||
import Step3TaxRegistration from '@/components/onboarding/Step3TaxRegistration'
|
||||
import Step4VatAccounting from '@/components/onboarding/Step4VatAccounting'
|
||||
export default async function OnboardingPage() {
|
||||
const supabase = await createClient()
|
||||
|
||||
const STEP_INFO = [
|
||||
{ title: 'Välkommen', subtitle: 'Välj din företagsform för att komma igång.', label: 'Företagsform' },
|
||||
{ title: 'Ditt företag', subtitle: 'Uppgifterna visas på fakturor och dokument.', label: 'Uppgifter' },
|
||||
{ title: 'F-skatt & räkenskapsår', subtitle: 'Ange din skatteregistrering och räkenskapsår.', label: 'Skatt' },
|
||||
{ title: 'Moms & bokföring', subtitle: 'Momsregistrering och bokföringsmetod.', label: 'Moms' },
|
||||
]
|
||||
const { data: { user } } = await supabase.auth.getUser()
|
||||
if (!user) {
|
||||
redirect('/login')
|
||||
}
|
||||
|
||||
/** Map TIC legalEntityType to gnubok EntityType */
|
||||
function mapEntityType(ticType: string): EntityType | null {
|
||||
const lower = ticType.toLowerCase()
|
||||
if (lower === 'ab' || lower.includes('aktiebolag')) return 'aktiebolag'
|
||||
if (lower === 'ef' || lower.includes('enskild firma') || lower.includes('enskild')) return 'enskild_firma'
|
||||
return null
|
||||
}
|
||||
|
||||
function translatePeriodError(msg: string): string {
|
||||
if (msg.includes('end must be after')) return 'Slutdatumet måste vara efter startdatumet.'
|
||||
if (msg.includes('start must be the 1st')) return 'Startdatumet måste vara den 1:a i en månad.'
|
||||
if (msg.includes('end must be the last day')) return 'Slutdatumet måste vara sista dagen i en månad.'
|
||||
if (msg.includes('exceeds maximum 18 months')) return 'Räkenskapsåret får inte överstiga 18 månader (BFL 3 kap.).'
|
||||
return 'Ogiltigt räkenskapsår. Kontrollera datumen och försök igen.'
|
||||
}
|
||||
|
||||
export default function OnboardingPage() {
|
||||
return (
|
||||
<Suspense fallback={
|
||||
<div className="min-h-screen flex items-center justify-center">
|
||||
<Loader2 className="h-8 w-8 animate-spin text-muted-foreground" />
|
||||
</div>
|
||||
}>
|
||||
<OnboardingPageContent />
|
||||
</Suspense>
|
||||
)
|
||||
}
|
||||
|
||||
const LOG = '[onboarding]'
|
||||
|
||||
/** Log to browser console, Vercel server logs (via API), and Sentry. */
|
||||
function logError(message: string, extra?: Record<string, unknown>) {
|
||||
console.error(LOG, message, extra ?? '')
|
||||
|
||||
// Send to server so it appears in Vercel Logs
|
||||
fetch('/api/log', {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({ message, extra }),
|
||||
}).catch(() => {}) // fire-and-forget, never block the UI
|
||||
|
||||
Sentry.captureMessage(`onboarding: ${message}`, {
|
||||
level: 'error',
|
||||
extra: { ...extra, component: 'onboarding' },
|
||||
})
|
||||
}
|
||||
|
||||
function OnboardingPageContent() {
|
||||
const router = useRouter()
|
||||
const { toast } = useToast()
|
||||
const supabase = createClient()
|
||||
|
||||
const [isLoading, setIsLoading] = useState(true)
|
||||
const [isSaving, setIsSaving] = useState(false)
|
||||
const [currentStep, setCurrentStep] = useState(1)
|
||||
const [settings, setSettings] = useState<Partial<CompanySettings>>({})
|
||||
const [companyId, setCompanyId] = useState<string | null>(null)
|
||||
const ticEnabled = ENABLED_EXTENSION_IDS.has('tic')
|
||||
const [ticLookup, setTicLookup] = useState<CompanyLookupResult | null>(null)
|
||||
const [enrichmentCompanies, setEnrichmentCompanies] = useState<CompanyRole[]>([])
|
||||
const [orgNumberLocked, setOrgNumberLocked] = useState(false)
|
||||
|
||||
const totalSteps = 4
|
||||
|
||||
// Detect stuck state: onboarding marked complete but still on this page
|
||||
useEffect(() => {
|
||||
if (settings.onboarding_complete && !isLoading) {
|
||||
const timeout = setTimeout(() => {
|
||||
logError('still on onboarding page after onboarding_complete=true — redirect may have failed')
|
||||
}, 3000)
|
||||
return () => clearTimeout(timeout)
|
||||
}
|
||||
}, [settings.onboarding_complete, isLoading])
|
||||
|
||||
// Load existing settings on mount
|
||||
useEffect(() => {
|
||||
async function loadSettings() {
|
||||
const { data: { user }, error: authError } = await supabase.auth.getUser()
|
||||
|
||||
if (authError) {
|
||||
logError('auth.getUser() failed on mount', { message: authError.message })
|
||||
}
|
||||
|
||||
if (!user) {
|
||||
logError('no authenticated user on mount, redirecting to login')
|
||||
router.push('/login')
|
||||
return
|
||||
}
|
||||
|
||||
// Check for unprocessed invite token (fallback if auth callback didn't process it)
|
||||
const cookieMatch = document.cookie.match(/gnubok-invite-token=([^;]+)/)
|
||||
const inviteToken = cookieMatch?.[1]
|
||||
|
||||
if (inviteToken) {
|
||||
try {
|
||||
const res = await fetch('/api/team/accept', {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({ token: inviteToken }),
|
||||
})
|
||||
|
||||
if (res.ok) {
|
||||
// Clear the cookie
|
||||
document.cookie = 'gnubok-invite-token=; path=/; max-age=0'
|
||||
console.log(LOG, 'invite accepted via fallback — redirecting to dashboard')
|
||||
router.push('/')
|
||||
return
|
||||
}
|
||||
|
||||
// Log the failure to help diagnose
|
||||
const errBody = await res.json().catch(() => ({}))
|
||||
console.error(LOG, 'fallback invite acceptance returned non-ok', {
|
||||
status: res.status,
|
||||
error: errBody.error,
|
||||
})
|
||||
} catch (err) {
|
||||
console.error(LOG, 'fallback invite acceptance failed:', err)
|
||||
}
|
||||
// Clear cookie regardless to avoid retry loops
|
||||
document.cookie = 'gnubok-invite-token=; path=/; max-age=0'
|
||||
}
|
||||
|
||||
// Check if user is already in a team (consultant) — skip onboarding
|
||||
const { data: teamMember } = await supabase
|
||||
.from('team_members')
|
||||
.select('id')
|
||||
.eq('user_id', user.id)
|
||||
.limit(1)
|
||||
.maybeSingle()
|
||||
|
||||
if (teamMember) {
|
||||
console.log(LOG, 'user already in a team — redirecting to dashboard')
|
||||
window.location.href = '/'
|
||||
return
|
||||
}
|
||||
|
||||
// Check if user already has a company via company_members
|
||||
const { data: membership } = await supabase
|
||||
.from('company_members')
|
||||
.select('company_id')
|
||||
.eq('user_id', user.id)
|
||||
.order('created_at', { ascending: true })
|
||||
.limit(1)
|
||||
.single()
|
||||
|
||||
if (membership?.company_id) {
|
||||
const { data, error } = await supabase
|
||||
.from('company_settings')
|
||||
.select('*')
|
||||
.eq('company_id', membership.company_id)
|
||||
.single()
|
||||
|
||||
if (error && error.code !== 'PGRST116') {
|
||||
logError('failed to load settings', { message: error.message, code: error.code })
|
||||
}
|
||||
|
||||
// If this company is already onboarded (invited user joining existing company),
|
||||
// skip onboarding entirely and go to dashboard
|
||||
if (data?.onboarding_complete) {
|
||||
console.log(LOG, 'company already onboarded — redirecting to dashboard')
|
||||
router.push('/')
|
||||
return
|
||||
}
|
||||
|
||||
setCompanyId(membership.company_id)
|
||||
|
||||
if (data) {
|
||||
const step = data.onboarding_step || 1
|
||||
const clampedStep = step > totalSteps ? totalSteps : step
|
||||
if (step > totalSteps) {
|
||||
logError('onboarding_step exceeds totalSteps — clamped', { step, totalSteps })
|
||||
}
|
||||
// Important milestone: where we resume
|
||||
console.log(LOG, 'resuming at step', clampedStep, { entity_type: data.entity_type })
|
||||
setSettings(data)
|
||||
setCurrentStep(clampedStep)
|
||||
}
|
||||
}
|
||||
|
||||
// Load BankID enrichment data if available (one-time use)
|
||||
try {
|
||||
const { data: enrichmentRow } = await supabase
|
||||
.from('extension_data')
|
||||
.select('id, value')
|
||||
.eq('user_id', user.id)
|
||||
.eq('extension_id', 'tic')
|
||||
.eq('key', 'bankid_enrichment')
|
||||
.maybeSingle()
|
||||
|
||||
if (enrichmentRow?.value) {
|
||||
const enrichment = enrichmentRow.value as { spar?: Record<string, string>; companyRoles?: CompanyRole[] }
|
||||
|
||||
// Extract active companies
|
||||
const activeCompanies = (enrichment.companyRoles ?? []).filter(
|
||||
(c: CompanyRole) => c.companyStatus === 'Aktivt' && c.positionEnd === null
|
||||
)
|
||||
if (activeCompanies.length > 0) {
|
||||
setEnrichmentCompanies(activeCompanies)
|
||||
}
|
||||
|
||||
// Pre-fill SPAR address if not already set
|
||||
if (enrichment.spar && !settings.address_line1) {
|
||||
const spar = enrichment.spar
|
||||
setSettings((prev) => ({
|
||||
...prev,
|
||||
address_line1: spar.Folkbokforingsadress_SvenskAdress_Utdelningsadress1 || prev.address_line1,
|
||||
postal_code: spar.Folkbokforingsadress_SvenskAdress_PostNr || prev.postal_code,
|
||||
city: spar.Folkbokforingsadress_SvenskAdress_Postort || prev.city,
|
||||
}))
|
||||
}
|
||||
|
||||
// Delete enrichment data (one-time use)
|
||||
await supabase
|
||||
.from('extension_data')
|
||||
.delete()
|
||||
.eq('id', enrichmentRow.id)
|
||||
}
|
||||
} catch (err) {
|
||||
console.warn(LOG, 'enrichment loading failed (non-blocking)', err)
|
||||
}
|
||||
|
||||
setIsLoading(false)
|
||||
}
|
||||
|
||||
loadSettings()
|
||||
}, [supabase, router, toast])
|
||||
|
||||
const saveSettings = async (updates: Partial<CompanySettings>, nextStep?: number) => {
|
||||
const targetStep = nextStep ?? currentStep
|
||||
setIsSaving(true)
|
||||
|
||||
try {
|
||||
const { data: { user }, error: authError } = await supabase.auth.getUser()
|
||||
|
||||
if (authError) {
|
||||
logError('auth.getUser() failed during save', { message: authError.message, step: targetStep })
|
||||
}
|
||||
|
||||
if (!user) {
|
||||
logError('save aborted: no authenticated user', { step: targetStep })
|
||||
router.push('/login')
|
||||
return false
|
||||
}
|
||||
|
||||
const updatedSettings = {
|
||||
...settings,
|
||||
...updates,
|
||||
onboarding_step: targetStep,
|
||||
}
|
||||
|
||||
if (!companyId) {
|
||||
logError('save aborted: no companyId', { step: targetStep })
|
||||
return false
|
||||
}
|
||||
|
||||
// Remove read-only and transient fields before updating
|
||||
const {
|
||||
id: _id, user_id: _uid, company_id: _cid, created_at: _ca, updated_at: _ua,
|
||||
is_first_fiscal_year: _ify, first_year_start: _fys, first_year_end: _fye,
|
||||
...settingsToSave
|
||||
} = updatedSettings as Record<string, unknown>
|
||||
|
||||
const { error } = await supabase
|
||||
.from('company_settings')
|
||||
.upsert({ ...settingsToSave, company_id: companyId }, { onConflict: 'company_id' })
|
||||
|
||||
if (error) {
|
||||
logError('save failed', { message: error.message, step: targetStep, code: error.code, details: error.details })
|
||||
toast({
|
||||
title: 'Fel',
|
||||
description: error.message || 'Kunde inte spara. Försök igen.',
|
||||
variant: 'destructive',
|
||||
})
|
||||
return false
|
||||
}
|
||||
|
||||
setSettings(updatedSettings)
|
||||
return true
|
||||
} catch (err) {
|
||||
const message = err instanceof Error ? err.message : String(err)
|
||||
logError('saveSettings threw unexpectedly', { message, step: targetStep })
|
||||
Sentry.captureException(err)
|
||||
toast({
|
||||
title: 'Fel',
|
||||
description: 'Ett oväntat fel uppstod. Försök igen.',
|
||||
variant: 'destructive',
|
||||
})
|
||||
return false
|
||||
} finally {
|
||||
setIsSaving(false)
|
||||
}
|
||||
// Check if user already has companies (adding another vs first-time)
|
||||
const { data: existingMembership } = await supabase
|
||||
.from('company_members')
|
||||
.select('company_id')
|
||||
.eq('user_id', user.id)
|
||||
.limit(1)
|
||||
.maybeSingle()
|
||||
|
||||
const hasCompanies = !!existingMembership
|
||||
|
||||
// Fetch profile and team
|
||||
const [{ data: profile }, { data: teamMembership }] = await Promise.all([
|
||||
supabase.from('profiles').select('full_name').eq('id', user.id).single(),
|
||||
supabase.from('team_members').select('team_id').eq('user_id', user.id).limit(1).maybeSingle(),
|
||||
])
|
||||
|
||||
let teamId = teamMembership?.team_id
|
||||
|
||||
// Ensure user has a team (fallback for edge cases)
|
||||
if (!teamId) {
|
||||
const { data: newTeamId } = await supabase.rpc('ensure_user_team')
|
||||
teamId = newTeamId
|
||||
}
|
||||
|
||||
const handleNext = async (stepData: Partial<CompanySettings>) => {
|
||||
// Fix org number bug: clear dependent fields when entity type changes
|
||||
if (currentStep === 1 && stepData.entity_type && stepData.entity_type !== settings.entity_type) {
|
||||
console.warn(LOG, 'entity type changed from', settings.entity_type, 'to', stepData.entity_type, '— clearing dependent fields')
|
||||
stepData = { ...stepData, org_number: '', company_name: '' }
|
||||
setTicLookup(null)
|
||||
}
|
||||
|
||||
// Step 1: Create company + membership + user_preferences if no companyId yet
|
||||
let activeCompanyId = companyId
|
||||
|
||||
if (currentStep === 1 && !activeCompanyId) {
|
||||
try {
|
||||
const { data: { user }, error: authError } = await supabase.auth.getUser()
|
||||
if (authError) {
|
||||
logError('auth.getUser() failed before company creation', { message: authError.message })
|
||||
}
|
||||
if (!user) {
|
||||
logError('company creation skipped: no user')
|
||||
router.push('/login')
|
||||
return
|
||||
}
|
||||
|
||||
// Atomically create company + owner membership + set active
|
||||
const { data: newCompanyId, error: rpcError } = await supabase.rpc('create_company_with_owner', {
|
||||
p_name: 'Mitt företag',
|
||||
p_entity_type: stepData.entity_type,
|
||||
})
|
||||
|
||||
if (rpcError || !newCompanyId) {
|
||||
logError('company creation failed', { message: rpcError?.message, code: rpcError?.code })
|
||||
toast({ title: 'Fel', description: 'Kunde inte skapa företag. Försök igen.', variant: 'destructive' })
|
||||
return
|
||||
}
|
||||
|
||||
activeCompanyId = newCompanyId
|
||||
setCompanyId(activeCompanyId)
|
||||
console.log(LOG, 'created company', activeCompanyId)
|
||||
} catch (err) {
|
||||
logError('company creation threw', { error: String(err) })
|
||||
Sentry.captureException(err)
|
||||
toast({ title: 'Fel', description: 'Kunde inte skapa företag. Försök igen.', variant: 'destructive' })
|
||||
return
|
||||
}
|
||||
}
|
||||
|
||||
if (!activeCompanyId) {
|
||||
logError('handleNext aborted: no companyId', { step: currentStep })
|
||||
return
|
||||
}
|
||||
|
||||
const nextStep = currentStep + 1
|
||||
|
||||
// For step 1, companyId state may not be updated yet (React batching).
|
||||
// Save settings directly with activeCompanyId to avoid the race condition.
|
||||
const needsDirectSave = currentStep === 1 && !companyId
|
||||
const success = needsDirectSave
|
||||
? await (async () => {
|
||||
setIsSaving(true)
|
||||
try {
|
||||
const updatedSettings = { ...settings, ...stepData, onboarding_step: nextStep }
|
||||
const {
|
||||
id: _id, user_id: _uid, company_id: _cid, created_at: _ca, updated_at: _ua,
|
||||
is_first_fiscal_year: _ify, first_year_start: _fys, first_year_end: _fye,
|
||||
...settingsToSave
|
||||
} = updatedSettings as Record<string, unknown>
|
||||
|
||||
const { error } = await supabase
|
||||
.from('company_settings')
|
||||
.upsert({ ...settingsToSave, company_id: activeCompanyId }, { onConflict: 'company_id' })
|
||||
|
||||
if (error) {
|
||||
logError('save failed', { message: error.message, step: nextStep, code: error.code })
|
||||
toast({ title: 'Fel', description: error.message || 'Kunde inte spara. Försök igen.', variant: 'destructive' })
|
||||
return false
|
||||
}
|
||||
|
||||
setSettings(updatedSettings)
|
||||
return true
|
||||
} catch (err) {
|
||||
logError('saveSettings threw', { message: String(err), step: nextStep })
|
||||
Sentry.captureException(err)
|
||||
return false
|
||||
} finally {
|
||||
setIsSaving(false)
|
||||
}
|
||||
})()
|
||||
: await saveSettings(stepData, nextStep)
|
||||
|
||||
if (!success) {
|
||||
logError('handleNext aborted: saveSettings failed', { step: currentStep })
|
||||
return
|
||||
}
|
||||
|
||||
// After step 2 (company details): sync company name to companies table
|
||||
if (currentStep === 2 && stepData.company_name && activeCompanyId) {
|
||||
const { error: nameError } = await supabase
|
||||
.from('companies')
|
||||
.update({ name: stepData.company_name })
|
||||
.eq('id', activeCompanyId)
|
||||
|
||||
if (nameError) {
|
||||
logError('failed to sync company name to companies table', {
|
||||
message: nameError.message,
|
||||
code: nameError.code,
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
// After step 1 (entity type selection): seed chart of accounts
|
||||
if (currentStep === 1 && stepData.entity_type) {
|
||||
try {
|
||||
const { error: rpcError } = await supabase.rpc('seed_chart_of_accounts', {
|
||||
p_company_id: activeCompanyId,
|
||||
p_entity_type: stepData.entity_type,
|
||||
})
|
||||
if (rpcError) {
|
||||
logError('chart of accounts seeding failed', {
|
||||
entity_type: stepData.entity_type,
|
||||
message: rpcError.message,
|
||||
code: rpcError.code,
|
||||
details: rpcError.details,
|
||||
})
|
||||
}
|
||||
} catch (err) {
|
||||
logError('chart of accounts seeding threw', { error: String(err) })
|
||||
Sentry.captureException(err)
|
||||
}
|
||||
}
|
||||
|
||||
// After step 3 (tax registration): create initial fiscal period
|
||||
if (currentStep === 3 && companyId) {
|
||||
try {
|
||||
const isFirstYear = stepData.is_first_fiscal_year as boolean | undefined
|
||||
const firstYearStart = stepData.first_year_start as string | undefined
|
||||
const firstYearEnd = stepData.first_year_end as string | undefined
|
||||
|
||||
let startStr: string
|
||||
let endStr: string
|
||||
let periodName: string
|
||||
|
||||
if (isFirstYear && firstYearStart && firstYearEnd) {
|
||||
// First fiscal year: use exact dates provided
|
||||
startStr = firstYearStart
|
||||
endStr = firstYearEnd
|
||||
|
||||
const startYear = new Date(firstYearStart).getFullYear()
|
||||
const endYear = new Date(firstYearEnd).getFullYear()
|
||||
periodName = startYear === endYear
|
||||
? `Första räkenskapsåret ${startYear}`
|
||||
: `Första räkenskapsåret ${startYear}/${endYear}`
|
||||
} else {
|
||||
// Ongoing: compute 12-month period from fiscal_year_start_month
|
||||
let startMonth = stepData.fiscal_year_start_month || settings.fiscal_year_start_month || 1
|
||||
|
||||
// For enskild firma: force calendar year
|
||||
if (settings.entity_type === 'enskild_firma') {
|
||||
startMonth = 1
|
||||
}
|
||||
|
||||
const currentYear = new Date().getFullYear()
|
||||
startStr = `${currentYear}-${String(startMonth).padStart(2, '0')}-01`
|
||||
|
||||
let endYear: number
|
||||
let endMonth: number
|
||||
if (startMonth === 1) {
|
||||
endYear = currentYear
|
||||
endMonth = 12
|
||||
} else {
|
||||
endYear = currentYear + 1
|
||||
endMonth = startMonth - 1
|
||||
}
|
||||
const lastDay = new Date(endYear, endMonth, 0).getDate()
|
||||
endStr = `${endYear}-${String(endMonth).padStart(2, '0')}-${String(lastDay).padStart(2, '0')}`
|
||||
|
||||
periodName = startMonth === 1
|
||||
? `Räkenskapsår ${currentYear}`
|
||||
: `Räkenskapsår ${currentYear}/${currentYear + 1}`
|
||||
}
|
||||
|
||||
// Validate period duration
|
||||
const validationError = validatePeriodDuration(startStr, endStr)
|
||||
if (validationError) {
|
||||
logError('fiscal period validation failed', {
|
||||
validationError, startStr, endStr, isFirstYear, entity_type: settings.entity_type,
|
||||
})
|
||||
toast({
|
||||
title: 'Ogiltigt räkenskapsår',
|
||||
description: translatePeriodError(validationError),
|
||||
variant: 'destructive',
|
||||
})
|
||||
setCurrentStep(3)
|
||||
return
|
||||
}
|
||||
|
||||
// Delete any existing fiscal periods that have no journal entries,
|
||||
// so re-running onboarding with different dates doesn't create
|
||||
// overlapping periods (DB exclusion constraint would reject it).
|
||||
const { data: existingPeriods, error: fetchPeriodsError } = await supabase
|
||||
.from('fiscal_periods')
|
||||
.select('id')
|
||||
.eq('company_id', companyId)
|
||||
|
||||
if (fetchPeriodsError) {
|
||||
logError('failed to fetch existing fiscal periods', {
|
||||
message: fetchPeriodsError.message, code: fetchPeriodsError.code,
|
||||
})
|
||||
}
|
||||
|
||||
if (existingPeriods && existingPeriods.length > 0) {
|
||||
for (const ep of existingPeriods) {
|
||||
const { count, error: countError } = await supabase
|
||||
.from('journal_entries')
|
||||
.select('id', { count: 'exact', head: true })
|
||||
.eq('fiscal_period_id', ep.id)
|
||||
|
||||
if (countError) {
|
||||
logError('failed to count journal entries for period', { periodId: ep.id, message: countError.message })
|
||||
continue
|
||||
}
|
||||
|
||||
if (count === 0) {
|
||||
const { error: deleteError } = await supabase
|
||||
.from('fiscal_periods')
|
||||
.delete()
|
||||
.eq('id', ep.id)
|
||||
|
||||
if (deleteError) {
|
||||
logError('failed to delete empty fiscal period', { periodId: ep.id, message: deleteError.message })
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
const { error: upsertError } = await supabase.from('fiscal_periods').upsert({
|
||||
company_id: companyId,
|
||||
name: periodName,
|
||||
period_start: startStr,
|
||||
period_end: endStr,
|
||||
}, {
|
||||
onConflict: 'company_id,period_start,period_end',
|
||||
})
|
||||
|
||||
if (upsertError) {
|
||||
logError('fiscal period upsert failed', {
|
||||
message: upsertError.message, startStr, endStr, code: upsertError.code, details: upsertError.details,
|
||||
})
|
||||
}
|
||||
} catch (err) {
|
||||
logError('fiscal period creation threw', { error: String(err) })
|
||||
Sentry.captureException(err)
|
||||
toast({
|
||||
title: 'Kunde inte skapa räkenskapsår',
|
||||
description: 'Ett fel uppstod när räkenskapsåret skulle skapas. Försök igen.',
|
||||
variant: 'destructive',
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
if (nextStep > totalSteps) {
|
||||
const finalSuccess = await saveSettings({ onboarding_complete: true }, totalSteps)
|
||||
if (!finalSuccess) {
|
||||
logError('failed to set onboarding_complete after all steps')
|
||||
return
|
||||
}
|
||||
// Important milestone
|
||||
console.log(LOG, 'onboarding completed')
|
||||
toast({
|
||||
title: 'Välkommen!',
|
||||
description: 'Din profil är nu redo.',
|
||||
})
|
||||
router.push('/')
|
||||
} else {
|
||||
setCurrentStep(nextStep)
|
||||
}
|
||||
}
|
||||
|
||||
const handleBack = () => {
|
||||
if (currentStep > 1) {
|
||||
setCurrentStep(currentStep - 1)
|
||||
}
|
||||
}
|
||||
|
||||
const handleSkip = async () => {
|
||||
const nextStep = currentStep + 1
|
||||
const success = await saveSettings({}, nextStep)
|
||||
|
||||
if (!success) {
|
||||
logError('skip failed: saveSettings returned false', { step: currentStep })
|
||||
return
|
||||
}
|
||||
setCurrentStep(nextStep)
|
||||
if (!teamId) {
|
||||
redirect('/login')
|
||||
}
|
||||
|
||||
/** Handle selecting a company from BankID enrichment */
|
||||
const handleEnrichmentSelect = (company: CompanyRole) => {
|
||||
const entityType = mapEntityType(company.legalEntityType)
|
||||
if (!entityType) return
|
||||
|
||||
// Auto-set entity type, org number, and company name
|
||||
setSettings((prev) => ({
|
||||
...prev,
|
||||
entity_type: entityType,
|
||||
org_number: company.companyRegistrationNumber,
|
||||
company_name: company.legalName,
|
||||
}))
|
||||
setOrgNumberLocked(true)
|
||||
setEnrichmentCompanies([]) // Dismiss picker
|
||||
}
|
||||
|
||||
if (isLoading) {
|
||||
return (
|
||||
<div className="min-h-screen flex items-center justify-center bg-background">
|
||||
<Loader2 className="h-8 w-8 animate-spin text-muted-foreground" />
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
const stepInfo = STEP_INFO[currentStep - 1]
|
||||
|
||||
const renderSteps = () => (
|
||||
<>
|
||||
{currentStep === 1 && enrichmentCompanies.length > 0 && (
|
||||
<div className="mb-6 space-y-3">
|
||||
<p className="text-sm font-medium">Vi hittade dessa foretag kopplade till ditt BankID:</p>
|
||||
{enrichmentCompanies.map((company) => {
|
||||
const entityType = mapEntityType(company.legalEntityType)
|
||||
return (
|
||||
<button
|
||||
key={company.companyRegistrationNumber}
|
||||
onClick={() => handleEnrichmentSelect(company)}
|
||||
className="w-full rounded-lg border bg-card p-4 text-left transition-colors hover:border-primary/50 hover:bg-primary/[0.02]"
|
||||
>
|
||||
<p className="font-medium text-sm">{company.legalName}</p>
|
||||
<p className="text-xs text-muted-foreground mt-0.5">
|
||||
{company.companyRegistrationNumber} · {entityType === 'aktiebolag' ? 'Aktiebolag' : entityType === 'enskild_firma' ? 'Enskild firma' : company.legalEntityType}
|
||||
</p>
|
||||
</button>
|
||||
)
|
||||
})}
|
||||
<div className="relative py-2">
|
||||
<div className="absolute inset-0 flex items-center">
|
||||
<div className="w-full border-t" />
|
||||
</div>
|
||||
<div className="relative flex justify-center text-xs uppercase">
|
||||
<span className="bg-background px-2 text-muted-foreground">eller valj foretagsform manuellt</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{currentStep === 1 && (
|
||||
<Step1EntityType
|
||||
initialData={{ entity_type: settings.entity_type as EntityType }}
|
||||
onNext={(data) => handleNext(data)}
|
||||
isSaving={isSaving}
|
||||
/>
|
||||
)}
|
||||
|
||||
{currentStep === 2 && (
|
||||
<Step2CompanyDetails
|
||||
key={settings.entity_type}
|
||||
initialData={{
|
||||
company_name: settings.company_name ?? undefined,
|
||||
org_number: settings.org_number ?? undefined,
|
||||
address_line1: settings.address_line1 ?? undefined,
|
||||
postal_code: settings.postal_code ?? undefined,
|
||||
city: settings.city ?? undefined,
|
||||
}}
|
||||
entityType={settings.entity_type as EntityType}
|
||||
ticEnabled={ticEnabled}
|
||||
onTicLookup={setTicLookup}
|
||||
onNext={(data) => handleNext(data)}
|
||||
onBack={handleBack}
|
||||
isSaving={isSaving}
|
||||
orgNumberLocked={orgNumberLocked}
|
||||
/>
|
||||
)}
|
||||
|
||||
{currentStep === 3 && (
|
||||
<Step3TaxRegistration
|
||||
initialData={{
|
||||
f_skatt: settings.f_skatt ?? (ticLookup ? ticLookup.registration.fTax : undefined),
|
||||
fiscal_year_start_month: settings.fiscal_year_start_month ?? undefined,
|
||||
}}
|
||||
entityType={settings.entity_type as EntityType}
|
||||
onNext={(data) => handleNext(data)}
|
||||
onBack={handleBack}
|
||||
isSaving={isSaving}
|
||||
/>
|
||||
)}
|
||||
|
||||
{currentStep === 4 && (
|
||||
<Step4VatAccounting
|
||||
initialData={{
|
||||
vat_registered: settings.vat_registered ?? (ticLookup ? ticLookup.registration.vat : undefined),
|
||||
vat_number: settings.vat_number ?? undefined,
|
||||
moms_period: (settings.moms_period as MomsPeriod | null) ?? undefined,
|
||||
accounting_method: (settings.accounting_method as 'accrual' | 'cash') ?? undefined,
|
||||
}}
|
||||
entityType={settings.entity_type as EntityType}
|
||||
orgNumber={settings.org_number ?? undefined}
|
||||
onNext={(data) => handleNext(data)}
|
||||
onBack={handleBack}
|
||||
isSaving={isSaving}
|
||||
/>
|
||||
)}
|
||||
</>
|
||||
)
|
||||
|
||||
// ── Steps 1–4 ──
|
||||
return (
|
||||
<div className="min-h-screen flex flex-col bg-background">
|
||||
{/* ── Branded Header ── */}
|
||||
<header className="relative bg-[#141414] text-white overflow-hidden">
|
||||
{/* Decorative elements */}
|
||||
<div className="absolute inset-0 pointer-events-none" aria-hidden>
|
||||
<div
|
||||
className="absolute inset-0"
|
||||
style={{
|
||||
background: 'radial-gradient(ellipse at 30% -20%, rgba(255,255,255,0.04) 0%, transparent 50%)',
|
||||
}}
|
||||
/>
|
||||
<span className="absolute -bottom-4 right-4 md:right-10 text-[120px] md:text-[160px] font-display font-bold text-white/[0.02] leading-none select-none">
|
||||
{String(currentStep).padStart(2, '0')}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div className="relative z-10 max-w-2xl mx-auto w-full px-6 md:px-10 pt-5 pb-6 md:pt-6 md:pb-8">
|
||||
{/* Top row: Logo + step indicator + counter */}
|
||||
<div className="flex items-center justify-between mb-5 md:mb-6">
|
||||
<div className="flex items-center gap-2.5">
|
||||
<Image
|
||||
src="/gnubokiceon-removebg-preview.png"
|
||||
alt="Gnubok"
|
||||
width={30}
|
||||
height={30}
|
||||
className="invert opacity-90"
|
||||
/>
|
||||
<span className="font-display text-base tracking-tight">gnubok</span>
|
||||
</div>
|
||||
{/* Step indicator — inline with logo row */}
|
||||
<div className="flex items-center gap-1.5">
|
||||
{STEP_INFO.map((_, i) => {
|
||||
const num = i + 1
|
||||
return (
|
||||
<div
|
||||
key={i}
|
||||
className={cn(
|
||||
'h-[3px] rounded-full transition-all duration-500',
|
||||
num === currentStep && 'w-7 bg-white',
|
||||
num < currentStep && 'w-4 bg-white/50',
|
||||
num > currentStep && 'w-4 bg-white/[0.1]',
|
||||
)}
|
||||
/>
|
||||
)
|
||||
})}
|
||||
</div>
|
||||
<span className="text-[10px] text-white/30 tracking-[0.15em] uppercase">
|
||||
{currentStep} / {totalSteps}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
{/* Step title — compact */}
|
||||
<div key={`title-${currentStep}`} className="animate-fade-in">
|
||||
<h1 className="font-display text-2xl md:text-3xl font-medium tracking-tight leading-[1.1]">
|
||||
{stepInfo.title}
|
||||
</h1>
|
||||
<p className="text-white/40 mt-1.5 text-sm max-w-sm leading-relaxed">
|
||||
{stepInfo.subtitle}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
const firstName = profile?.full_name?.split(' ')[0] || null
|
||||
|
||||
{/* ── Form Content ── */}
|
||||
<main className="flex-1">
|
||||
<div className="max-w-lg mx-auto px-6 md:px-10 py-6 md:py-8">
|
||||
<div key={`step-${currentStep}`} className="animate-slide-up">
|
||||
{renderSteps()}
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
)
|
||||
return <WelcomeOnboarding firstName={firstName} teamId={teamId} skipWelcome hasExistingCompanies={hasCompanies} />
|
||||
}
|
||||
|
||||
@@ -170,9 +170,7 @@ export async function GET(request: Request) {
|
||||
.eq('company_id', companyId)
|
||||
.single()
|
||||
|
||||
const redirectTarget = userSettings?.onboarding_complete
|
||||
? `/settings/banking?bank_connected=true&connection_id=${connectionId}`
|
||||
: `/onboarding?bank_connected=true&connection_id=${connectionId}`
|
||||
const redirectTarget = `/settings/banking?bank_connected=true&connection_id=${connectionId}`
|
||||
|
||||
return NextResponse.redirect(`${baseUrl}${redirectTarget}`)
|
||||
} catch (error) {
|
||||
|
||||
@@ -77,7 +77,9 @@ function NewCompanyContent() {
|
||||
|
||||
const totalSteps = 4
|
||||
|
||||
// Just verify auth on mount
|
||||
const [teamId, setTeamId] = useState<string | null>(null)
|
||||
|
||||
// Verify auth and fetch team_id on mount
|
||||
useEffect(() => {
|
||||
async function checkAuth() {
|
||||
const { data: { user } } = await supabase.auth.getUser()
|
||||
@@ -85,6 +87,23 @@ function NewCompanyContent() {
|
||||
router.push('/login')
|
||||
return
|
||||
}
|
||||
|
||||
// Fetch user's team_id
|
||||
const { data: teamMembership } = await supabase
|
||||
.from('team_members')
|
||||
.select('team_id')
|
||||
.eq('user_id', user.id)
|
||||
.limit(1)
|
||||
.maybeSingle()
|
||||
|
||||
if (teamMembership?.team_id) {
|
||||
setTeamId(teamMembership.team_id)
|
||||
} else {
|
||||
// Ensure user has a team (fallback)
|
||||
const { data: newTeamId } = await supabase.rpc('ensure_user_team')
|
||||
setTeamId(newTeamId)
|
||||
}
|
||||
|
||||
setIsLoading(false)
|
||||
}
|
||||
checkAuth()
|
||||
@@ -162,6 +181,7 @@ function NewCompanyContent() {
|
||||
const { data: newCompanyId, error: companyError } = await supabase.rpc('create_company_with_owner', {
|
||||
p_name: 'Nytt företag',
|
||||
p_entity_type: stepData.entity_type,
|
||||
p_team_id: teamId,
|
||||
})
|
||||
|
||||
if (companyError || !newCompanyId) {
|
||||
|
||||
Reference in New Issue
Block a user