diff --git a/components/extensions/CategoryBadge.tsx b/components/extensions/CategoryBadge.tsx
index 0304df55..3dc01238 100644
--- a/components/extensions/CategoryBadge.tsx
+++ b/components/extensions/CategoryBadge.tsx
@@ -5,10 +5,10 @@ import { cn } from '@/lib/utils'
import type { ExtensionCategory } from '@/lib/extensions/types'
const CATEGORY_CONFIG: Record = {
- accounting: { label: 'Bokföring & Skatt', className: 'bg-rose-100 text-rose-700 border-rose-200' },
- reports: { label: 'Branschrapporter', className: 'bg-blue-100 text-blue-700 border-blue-200' },
- import: { label: 'Smart Import', className: 'bg-emerald-100 text-emerald-700 border-emerald-200' },
- operations: { label: 'Verktyg', className: 'bg-slate-100 text-slate-700 border-slate-200' },
+ accounting: { label: 'Bokföring & Skatt', className: 'bg-rose-100 text-rose-700 border-rose-200 dark:bg-rose-950/30 dark:text-rose-400 dark:border-rose-800' },
+ reports: { label: 'Branschrapporter', className: 'bg-blue-100 text-blue-700 border-blue-200 dark:bg-blue-950/30 dark:text-blue-400 dark:border-blue-800' },
+ import: { label: 'Smart Import', className: 'bg-emerald-100 text-emerald-700 border-emerald-200 dark:bg-emerald-950/30 dark:text-emerald-400 dark:border-emerald-800' },
+ operations: { label: 'Verktyg', className: 'bg-slate-100 text-slate-700 border-slate-200 dark:bg-slate-800/30 dark:text-slate-400 dark:border-slate-700' },
}
export default function CategoryBadge({ category }: { category: ExtensionCategory }) {
diff --git a/components/extensions/construction/ProjectCostWorkspace.tsx b/components/extensions/construction/ProjectCostWorkspace.tsx
index dbd58372..77604b8a 100644
--- a/components/extensions/construction/ProjectCostWorkspace.tsx
+++ b/components/extensions/construction/ProjectCostWorkspace.tsx
@@ -1,14 +1,864 @@
'use client'
-import { FolderKanban } from 'lucide-react'
-import EmptyExtensionState from '@/components/extensions/shared/EmptyExtensionState'
+import { useState, useMemo } from 'react'
+import type { WorkspaceComponentProps } from '@/lib/extensions/workspace-registry'
+import { useExtensionData } from '@/lib/extensions/use-extension-data'
+import KPICard from '@/components/extensions/shared/KPICard'
+import ExtensionLoadingSkeleton from '@/components/extensions/shared/ExtensionLoadingSkeleton'
+import ConfirmDeleteDialog from '@/components/extensions/shared/ConfirmDeleteDialog'
+import EditEntryDialog from '@/components/extensions/shared/EditEntryDialog'
+import DateRangeFilter from '@/components/extensions/shared/DateRangeFilter'
+import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs'
+import { Input } from '@/components/ui/input'
+import { Label } from '@/components/ui/label'
+import { Button } from '@/components/ui/button'
+import { Badge } from '@/components/ui/badge'
+import { Progress } from '@/components/ui/progress'
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
+import {
+ Select, SelectContent, SelectItem, SelectTrigger, SelectValue,
+} from '@/components/ui/select'
+import {
+ Table, TableBody, TableCell, TableHead, TableHeader, TableRow,
+} from '@/components/ui/table'
+import { Pencil, Plus, ChevronDown, ChevronUp, Trash2, AlertTriangle, CheckCircle } from 'lucide-react'
+import { cn } from '@/lib/utils'
+
+interface Project {
+ id: string
+ name: string
+ budget: number
+ status: 'active' | 'completed'
+ startDate: string
+}
+
+interface CostEntry {
+ id: string
+ projectId: string
+ description: string
+ amount: number
+ date: string
+ category: string
+}
+
+interface RevenueEntry {
+ id: string
+ projectId: string
+ description: string
+ amount: number
+ date: string
+}
+
+const COST_CATEGORIES = ['Material', 'Arbetskraft', 'Underentreprenor', 'Maskiner', 'Ovrigt']
+
+function getBudgetStatus(totalCost: number, budget: number): 'ok' | 'warning' | 'danger' {
+ if (budget <= 0) return 'ok'
+ const ratio = totalCost / budget
+ if (ratio >= 1) return 'danger'
+ if (ratio >= 0.8) return 'warning'
+ return 'ok'
+}
+
+function getProgressColor(status: 'ok' | 'warning' | 'danger'): string {
+ switch (status) {
+ case 'danger': return '[&>div]:bg-red-500'
+ case 'warning': return '[&>div]:bg-amber-500'
+ default: return ''
+ }
+}
+
+export default function ProjectCostWorkspace({}: WorkspaceComponentProps) {
+ const { data, save, remove, refresh, isLoading } = useExtensionData('construction', 'project-cost')
+
+ // --- Date range filter ---
+ const now = new Date()
+ const [dateRange, setDateRange] = useState<{ start: string; end: string } | null>(null)
+
+ // --- Parse data ---
+ const projects = useMemo(() =>
+ data.filter(d => d.key.startsWith('project:'))
+ .map(d => ({ id: d.key.replace('project:', ''), ...(d.value as Omit) }))
+ .sort((a, b) => b.startDate.localeCompare(a.startDate))
+ , [data])
+
+ const allCosts = useMemo(() =>
+ data.filter(d => d.key.startsWith('cost:'))
+ .map(d => ({ id: d.key.replace('cost:', ''), ...(d.value as Omit) }))
+ .sort((a, b) => b.date.localeCompare(a.date))
+ , [data])
+
+ const allRevenues = useMemo(() =>
+ data.filter(d => d.key.startsWith('revenue:'))
+ .map(d => ({ id: d.key.replace('revenue:', ''), ...(d.value as Omit) }))
+ .sort((a, b) => b.date.localeCompare(a.date))
+ , [data])
+
+ // Filtered costs/revenues based on date range
+ const costs = useMemo(() => {
+ if (!dateRange) return allCosts
+ return allCosts.filter(c => c.date >= dateRange.start && c.date <= dateRange.end)
+ }, [allCosts, dateRange])
+
+ const revenues = useMemo(() => {
+ if (!dateRange) return allRevenues
+ return allRevenues.filter(r => r.date >= dateRange.start && r.date <= dateRange.end)
+ }, [allRevenues, dateRange])
+
+ // --- UI state ---
+ const [expandedProject, setExpandedProject] = useState(null)
+ const [showNewProject, setShowNewProject] = useState(false)
+ const [newProjectName, setNewProjectName] = useState('')
+ const [newProjectBudget, setNewProjectBudget] = useState('')
+
+ // Cost/Revenue entry forms
+ const [costDesc, setCostDesc] = useState('')
+ const [costAmount, setCostAmount] = useState('')
+ const [costCategory, setCostCategory] = useState(COST_CATEGORIES[0])
+ const [revDesc, setRevDesc] = useState('')
+ const [revAmount, setRevAmount] = useState('')
+ const [isSubmitting, setIsSubmitting] = useState(false)
+
+ // Delete confirmation state
+ const [deleteTarget, setDeleteTarget] = useState<{
+ type: 'cost' | 'revenue' | 'project'
+ id: string
+ label: string
+ } | null>(null)
+ const [isDeleting, setIsDeleting] = useState(false)
+
+ // Edit cost/revenue entry state
+ const [editEntry, setEditEntry] = useState<{
+ type: 'cost' | 'revenue'
+ id: string
+ projectId: string
+ description: string
+ amount: string
+ date: string
+ category?: string
+ } | null>(null)
+ const [isSavingEdit, setIsSavingEdit] = useState(false)
+
+ // Edit project state
+ const [editProject, setEditProject] = useState<{
+ id: string
+ name: string
+ budget: string
+ } | null>(null)
+ const [isSavingProject, setIsSavingProject] = useState(false)
+
+ // Complete project confirmation state
+ const [completeProjectId, setCompleteProjectId] = useState(null)
+
+ // --- Computed stats ---
+ const projectStats = useMemo(() => {
+ return projects.map(p => {
+ const projectCosts = costs.filter(c => c.projectId === p.id)
+ const projectRevenues = revenues.filter(r => r.projectId === p.id)
+ const totalCost = projectCosts.reduce((s, c) => s + c.amount, 0)
+ const totalRevenue = projectRevenues.reduce((s, r) => s + r.amount, 0)
+ const margin = totalRevenue > 0 ? Math.round(((totalRevenue - totalCost) / totalRevenue) * 100) : 0
+ const budgetUsed = p.budget > 0 ? Math.round((totalCost / p.budget) * 100) : 0
+ const budgetStatus = getBudgetStatus(totalCost, p.budget)
+
+ // Cost category breakdown
+ const categoryTotals = COST_CATEGORIES.map(cat => {
+ const catTotal = projectCosts
+ .filter(c => c.category === cat)
+ .reduce((s, c) => s + c.amount, 0)
+ return {
+ category: cat,
+ total: catTotal,
+ pct: totalCost > 0 ? Math.round((catTotal / totalCost) * 100) : 0,
+ }
+ }).filter(ct => ct.total > 0)
+
+ return {
+ ...p,
+ totalCost,
+ totalRevenue,
+ margin,
+ budgetUsed,
+ budgetStatus,
+ costs: projectCosts,
+ revenues: projectRevenues,
+ categoryTotals,
+ }
+ })
+ }, [projects, costs, revenues])
+
+ const activeProjects = projectStats.filter(p => p.status === 'active')
+ const completedProjects = projectStats.filter(p => p.status === 'completed')
+ const totalRevenue = projectStats.reduce((s, p) => s + p.totalRevenue, 0)
+ const totalCosts = projectStats.reduce((s, p) => s + p.totalCost, 0)
+ const avgMargin = totalRevenue > 0 ? Math.round(((totalRevenue - totalCosts) / totalRevenue) * 100) : 0
+
+ // --- Handlers ---
+ const handleAddProject = async () => {
+ if (!newProjectName.trim()) return
+ const id = crypto.randomUUID()
+ await save(`project:${id}`, {
+ name: newProjectName.trim(),
+ budget: Math.round((parseFloat(newProjectBudget) || 0) * 100) / 100,
+ status: 'active',
+ startDate: new Date().toISOString().slice(0, 10),
+ })
+ setNewProjectName('')
+ setNewProjectBudget('')
+ setShowNewProject(false)
+ await refresh()
+ }
+
+ const handleAddCost = async (projectId: string) => {
+ const amt = parseFloat(costAmount)
+ if (isNaN(amt) || amt <= 0) return
+ setIsSubmitting(true)
+ const id = crypto.randomUUID()
+ await save(`cost:${id}`, {
+ projectId,
+ description: costDesc,
+ amount: Math.round(amt * 100) / 100,
+ date: new Date().toISOString().slice(0, 10),
+ category: costCategory,
+ })
+ setCostDesc('')
+ setCostAmount('')
+ await refresh()
+ setIsSubmitting(false)
+ }
+
+ const handleAddRevenue = async (projectId: string) => {
+ const amt = parseFloat(revAmount)
+ if (isNaN(amt) || amt <= 0) return
+ setIsSubmitting(true)
+ const id = crypto.randomUUID()
+ await save(`revenue:${id}`, {
+ projectId,
+ description: revDesc,
+ amount: Math.round(amt * 100) / 100,
+ date: new Date().toISOString().slice(0, 10),
+ })
+ setRevDesc('')
+ setRevAmount('')
+ await refresh()
+ setIsSubmitting(false)
+ }
+
+ const handleDelete = async () => {
+ if (!deleteTarget) return
+ setIsDeleting(true)
+ if (deleteTarget.type === 'project') {
+ // Delete all costs and revenues for the project, then the project itself
+ const projectCosts = allCosts.filter(c => c.projectId === deleteTarget.id)
+ const projectRevenues = allRevenues.filter(r => r.projectId === deleteTarget.id)
+ for (const c of projectCosts) {
+ await remove(`cost:${c.id}`)
+ }
+ for (const r of projectRevenues) {
+ await remove(`revenue:${r.id}`)
+ }
+ await remove(`project:${deleteTarget.id}`)
+ } else if (deleteTarget.type === 'cost') {
+ await remove(`cost:${deleteTarget.id}`)
+ } else {
+ await remove(`revenue:${deleteTarget.id}`)
+ }
+ await refresh()
+ setIsDeleting(false)
+ setDeleteTarget(null)
+ }
+
+ const handleSaveEditEntry = async () => {
+ if (!editEntry) return
+ const amt = parseFloat(editEntry.amount)
+ if (isNaN(amt) || amt <= 0) return
+ setIsSavingEdit(true)
+ if (editEntry.type === 'cost') {
+ await save(`cost:${editEntry.id}`, {
+ projectId: editEntry.projectId,
+ description: editEntry.description,
+ amount: Math.round(amt * 100) / 100,
+ date: editEntry.date,
+ category: editEntry.category || COST_CATEGORIES[0],
+ })
+ } else {
+ await save(`revenue:${editEntry.id}`, {
+ projectId: editEntry.projectId,
+ description: editEntry.description,
+ amount: Math.round(amt * 100) / 100,
+ date: editEntry.date,
+ })
+ }
+ await refresh()
+ setIsSavingEdit(false)
+ setEditEntry(null)
+ }
+
+ const handleSaveEditProject = async () => {
+ if (!editProject) return
+ const project = projects.find(p => p.id === editProject.id)
+ if (!project) return
+ setIsSavingProject(true)
+ await save(`project:${editProject.id}`, {
+ name: editProject.name.trim(),
+ budget: Math.round((parseFloat(editProject.budget) || 0) * 100) / 100,
+ status: project.status,
+ startDate: project.startDate,
+ })
+ await refresh()
+ setIsSavingProject(false)
+ setEditProject(null)
+ }
+
+ const handleCompleteProject = async () => {
+ if (!completeProjectId) return
+ const project = projects.find(p => p.id === completeProjectId)
+ if (!project) return
+ await save(`project:${completeProjectId}`, {
+ name: project.name,
+ budget: project.budget,
+ status: 'completed' as const,
+ startDate: project.startDate,
+ })
+ await refresh()
+ setCompleteProjectId(null)
+ }
+
+ if (isLoading) return
+
+
Kostnaden overskrider budgeten ({p.budgetUsed}% anvant)
+
+
+
Budgetvarning: {p.budgetUsed}% av budgeten anvand
+
+
Kostnadsfordelning per kategori
+
+
+
+
+ Kategori
+ Belopp
+ Andel
+
+
+
+ {categoryTotals.map(ct => (
+
+ {ct.category}
+
+ {ct.total.toLocaleString('sv-SE')} kr
+
+ {ct.pct}%
+
+ ))}
+
+
+
+
+
+
+
setExpandedProject(isExpanded ? null : p.id)}
+ >
+
+ {p.name}
+
+ {p.status === 'active' ? 'Aktiv' : 'Avslutad'}
+
+
+
+
+
{
+ e.stopPropagation()
+ setEditProject({
+ id: p.id,
+ name: p.name,
+ budget: String(p.budget),
+ })
+ }}
+ >
+
+
{
+ e.stopPropagation()
+ setDeleteTarget({ type: 'project', id: p.id, label: p.name })
+ }}
+ >
+
+
setExpandedProject(isExpanded ? null : p.id)}
+ >
+ {isExpanded ?
+
+
+ {isExpanded && (
+
+ {/* Budget alert banner */}
+ {renderBudgetAlert(p)}
+
+ {/* Stats row */}
+
+
+
Kostnad
+
{p.totalCost.toLocaleString('sv-SE')} kr
+
+
+
Intakt
+
{p.totalRevenue.toLocaleString('sv-SE')} kr
+
+
+
Marginal
+
{p.margin}%
+
+
+
+ Budget anvand
+ {p.budgetUsed}% av {p.budget.toLocaleString('sv-SE')} kr
+
+
+
+
Kostnader
+
+
+
+ {COST_CATEGORIES.map(c => {c} )}
+
+
+ handleAddCost(p.id)} disabled={isSubmitting}>Lagg till
+
+ {p.costs.length > 0 && (
+
+
+
+
+ Datum
+ Beskrivning
+ Kategori
+ Belopp
+
+
+
+ {p.costs.map(c => (
+
+ {c.date}
+ {c.description}
+ {c.category}
+ {c.amount.toLocaleString('sv-SE')} kr
+
+
+
setEditEntry({
+ type: 'cost',
+ id: c.id,
+ projectId: c.projectId,
+ description: c.description,
+ amount: String(c.amount),
+ date: c.date,
+ category: c.category,
+ })}
+ >
+
+
setDeleteTarget({
+ type: 'cost',
+ id: c.id,
+ label: c.description || 'kostnad',
+ })}
+ >
+
+
+
+ ))}
+
+
+
+ )}
+
+
Intakter
+
+ handleAddRevenue(p.id)} disabled={isSubmitting}>Lagg till
+
+ {p.revenues.length > 0 && (
+
+
+
+
+ Datum
+ Beskrivning
+ Belopp
+
+
+
+ {p.revenues.map(r => (
+
+ {r.date}
+ {r.description}
+ {r.amount.toLocaleString('sv-SE')} kr
+
+
+
setEditEntry({
+ type: 'revenue',
+ id: r.id,
+ projectId: r.projectId,
+ description: r.description,
+ amount: String(r.amount),
+ date: r.date,
+ })}
+ >
+
+
setDeleteTarget({
+ type: 'revenue',
+ id: r.id,
+ label: r.description || 'intakt',
+ })}
+ >
+
+
+
+ ))}
+
+
+
+ )}
+
+ setCompleteProjectId(p.id)}
+ className="text-green-700 dark:text-green-400 border-green-300 dark:border-green-700 hover:bg-green-50 dark:hover:bg-green-950/30"
+ >
+
+
+ )}
+
+ )}
+
+ )
+ }
-export default function ProjectCostWorkspace() {
return (
-
+
+
+ Oversikt
+ Projekt
+
+
+
+ setDateRange({ start, end })} />
+
+
+
+
+ {/* Active projects */}
+ {activeProjects.length > 0 && (
+
+
Aktiva projekt
+ {activeProjects.map(p => (
+
+
+ {/* Budget alert */}
+ {renderBudgetAlert(p)}
+
+
+
+
+ Marginal:
+ {p.margin}%
+
+
+ Kostnad: {p.totalCost.toLocaleString('sv-SE')} kr
+ Intakt: {p.totalRevenue.toLocaleString('sv-SE')} kr
+ {p.budget > 0 && Budget: {p.budget.toLocaleString('sv-SE')} kr }
+
+ {p.budget > 0 && (
+
+
+ ))}
+
+
Avslutade projekt
+ {completedProjects.map(p => (
+
+
+
+
+
+
= 0 ? 'text-green-600 dark:text-green-400' : 'text-red-600 dark:text-red-400'
+ )}>
+ {p.margin}% marginal
+
+
+
+ Kostnad: {p.totalCost.toLocaleString('sv-SE')} kr
+ Intakt: {p.totalRevenue.toLocaleString('sv-SE')} kr
+ Resultat: {(Math.round((p.totalRevenue - p.totalCost) * 100) / 100).toLocaleString('sv-SE')} kr
+
+
+
+ ))}
+
+
+
+ {!showNewProject ? (
+ setShowNewProject(true)}>
+
+ ) : (
+
+
+
+ Skapa
+ setShowNewProject(false)}>Avbryt
+
+
+
+ )}
+
+ {activeProjects.length > 0 && (
+
+
Aktiva projekt
+ {activeProjects.map(p => renderProjectCard(p))}
+
+ )}
+
+ {completedProjects.length > 0 && (
+
+
Avslutade projekt
+ {completedProjects.map(p => renderProjectCard(p))}
+
+ )}
+
+
+
+ {/* Delete confirmation dialog */}
+
{ if (!open) setDeleteTarget(null) }}
+ title={
+ deleteTarget?.type === 'project'
+ ? 'Ta bort projekt'
+ : deleteTarget?.type === 'cost'
+ ? 'Ta bort kostnad'
+ : 'Ta bort intakt'
+ }
+ description={
+ deleteTarget?.type === 'project'
+ ? `Vill du ta bort projektet "${deleteTarget?.label}"? Alla kostnader och intakter kopplade till projektet tas ocksa bort. Atgarden kan inte angras.`
+ : `Vill du ta bort "${deleteTarget?.label}"? Atgarden kan inte angras.`
+ }
+ onConfirm={handleDelete}
+ isDeleting={isDeleting}
+ />
+
+ {/* Edit cost/revenue entry dialog */}
+ { if (!open) setEditEntry(null) }}
+ title={editEntry?.type === 'cost' ? 'Redigera kostnad' : 'Redigera intakt'}
+ description="Andra uppgifterna och klicka Spara."
+ onSave={handleSaveEditEntry}
+ isSaving={isSavingEdit}
+ >
+ {editEntry && (
+
+
+ Beskrivning
+
+
+ Belopp (kr)
+
+
+ Datum
+
+ {editEntry.type === 'cost' && (
+
+ Kategori
+ setEditEntry({ ...editEntry, category: val })}
+ >
+
+ {COST_CATEGORIES.map(c => {c} )}
+
+
+
+ )}
+
+
+ {/* Edit project dialog */}
+ { if (!open) setEditProject(null) }}
+ title="Redigera projekt"
+ description="Andra projektnamn och budget."
+ onSave={handleSaveEditProject}
+ isSaving={isSavingProject}
+ >
+ {editProject && (
+
+ )}
+
+
+ {/* Complete project confirmation dialog */}
+ { if (!open) setCompleteProjectId(null) }}
+ title="Avsluta projekt"
+ description={`Vill du markera projektet som avslutat? Projektet flyttas till "Avslutade" och kan inte ateraktiveras.`}
+ onConfirm={handleCompleteProject}
+ />
+ (() =>
+ data.filter(d => d.key.startsWith('customer:'))
+ .map(d => ({
+ id: d.key.replace('customer:', ''),
+ ...(d.value as { name: string; personalNumber: string }),
+ }))
+ , [data])
+
+ const allJobs = useMemo(() =>
+ data.filter(d => d.key.startsWith('job:'))
+ .map(d => ({ id: d.key.replace('job:', ''), ...(d.value as Omit) }))
+ .sort((a, b) => b.date.localeCompare(a.date))
+ , [data])
+
+ // Year filter
+ const currentYear = new Date().getFullYear()
+ const [selectedYear, setSelectedYear] = useState(String(currentYear))
+ const yearOptions = useMemo(() => buildYearOptions(), [])
+
+ const jobs = useMemo(() =>
+ allJobs.filter(j => j.date.startsWith(selectedYear))
+ , [allJobs, selectedYear])
+
+ // Calculator form
+ const [selectedCustomerId, setCustomerId] = useState('')
+ const customerId = selectedCustomerId || (customers.length > 0 ? customers[0].id : '')
+ const [description, setDescription] = useState('')
+ const [total, setTotal] = useState('')
+ const [material, setMaterial] = useState('')
+ const [isSubmitting, setIsSubmitting] = useState(false)
+
+ // New customer form
+ const [newCustomerName, setNewCustomerName] = useState('')
+ const [newCustomerPnr, setNewCustomerPnr] = useState('')
+ const newCustomerPnrError = useMemo(() => {
+ if (!newCustomerPnr.trim()) return null
+ return validateSwedishPersonalNumber(newCustomerPnr.trim())
+ }, [newCustomerPnr])
+ const canAddCustomer = newCustomerName.trim().length > 0 && !newCustomerPnrError
+
+ // Edit customer dialog
+ const [editingCustomer, setEditingCustomer] = useState(null)
+ const [editCustomerName, setEditCustomerName] = useState('')
+ const [editCustomerPnr, setEditCustomerPnr] = useState('')
+ const [isSavingCustomer, setIsSavingCustomer] = useState(false)
+ const editCustomerPnrError = useMemo(() => {
+ if (!editCustomerPnr.trim()) return null
+ return validateSwedishPersonalNumber(editCustomerPnr.trim())
+ }, [editCustomerPnr])
+
+ // Edit job dialog
+ const [editingJob, setEditingJob] = useState(null)
+ const [editJobCustomerId, setEditJobCustomerId] = useState('')
+ const [editJobDescription, setEditJobDescription] = useState('')
+ const [editJobTotal, setEditJobTotal] = useState('')
+ const [editJobMaterial, setEditJobMaterial] = useState('')
+ const [isSavingJob, setIsSavingJob] = useState(false)
+
+ // Delete job dialog
+ const [deletingJobId, setDeletingJobId] = useState(null)
+ const [isDeletingJob, setIsDeletingJob] = useState(false)
+
+ // Per-customer used quota for selected year (only completed jobs count)
+ const customerYearlyUsed = useMemo(() => {
+ const map = new Map()
+ for (const job of jobs) {
+ if (job.status === 'completed') {
+ map.set(job.customerId, (map.get(job.customerId) ?? 0) + job.rotDeduction)
+ }
+ }
+ return map
+ }, [jobs])
+
+ // Calculate ROT for current form input
+ const totalNum = parseFloat(total) || 0
+ const materialNum = parseFloat(material) || 0
+ const labor = Math.max(totalNum - materialNum, 0)
+ const usedQuota = customerYearlyUsed.get(customerId) ?? 0
+ const remainingQuota = Math.max(MAX_ROT_YEARLY - usedQuota, 0)
+ const rotDeduction = Math.round(Math.min(labor * ROT_RATE, remainingQuota) * 100) / 100
+ const customerPays = Math.round((totalNum - rotDeduction) * 100) / 100
+
+ // Calculate ROT deduction respecting quota for a specific customer
+ const calculateRotDeduction = useCallback((custId: string, laborAmount: number, excludeJobId?: string) => {
+ let used = 0
+ for (const job of allJobs) {
+ if (
+ job.customerId === custId &&
+ job.status === 'completed' &&
+ job.date.startsWith(selectedYear) &&
+ job.id !== excludeJobId
+ ) {
+ used += job.rotDeduction
+ }
+ }
+ const remaining = Math.max(MAX_ROT_YEARLY - used, 0)
+ return Math.round(Math.min(laborAmount * ROT_RATE, remaining) * 100) / 100
+ }, [allJobs, selectedYear])
+
+ const handleSubmitJob = async (e: React.FormEvent) => {
+ e.preventDefault()
+ if (!customerId || totalNum <= 0) return
+ setIsSubmitting(true)
+ const customer = customers.find(c => c.id === customerId)
+ const id = crypto.randomUUID()
+ await save(`job:${id}`, {
+ customerId,
+ customerName: customer?.name ?? '',
+ description,
+ total: totalNum,
+ material: materialNum,
+ labor,
+ rotDeduction,
+ date: new Date().toISOString().slice(0, 10),
+ status: 'draft',
+ })
+ setDescription('')
+ setTotal('')
+ setMaterial('')
+ await refresh()
+ setIsSubmitting(false)
+ }
+
+ const handleAddCustomer = async () => {
+ if (!canAddCustomer) return
+ const id = crypto.randomUUID()
+ await save(`customer:${id}`, { name: newCustomerName.trim(), personalNumber: newCustomerPnr.trim() })
+ setNewCustomerName('')
+ setNewCustomerPnr('')
+ await refresh()
+ }
+
+ const openEditCustomer = (cust: Customer) => {
+ setEditingCustomer(cust)
+ setEditCustomerName(cust.name)
+ setEditCustomerPnr(cust.personalNumber)
+ }
+
+ const handleSaveCustomer = async () => {
+ if (!editingCustomer || !editCustomerName.trim() || editCustomerPnrError) return
+ setIsSavingCustomer(true)
+ await save(`customer:${editingCustomer.id}`, {
+ name: editCustomerName.trim(),
+ personalNumber: editCustomerPnr.trim(),
+ })
+ // Update customerName on all jobs belonging to this customer
+ const customerJobs = allJobs.filter(j => j.customerId === editingCustomer.id)
+ for (const job of customerJobs) {
+ await save(`job:${job.id}`, {
+ customerId: job.customerId,
+ customerName: editCustomerName.trim(),
+ description: job.description,
+ total: job.total,
+ material: job.material,
+ labor: job.labor,
+ rotDeduction: job.rotDeduction,
+ date: job.date,
+ status: job.status,
+ })
+ }
+ await refresh()
+ setIsSavingCustomer(false)
+ }
+
+ const openEditJob = (job: Job) => {
+ setEditingJob(job)
+ setEditJobCustomerId(job.customerId)
+ setEditJobDescription(job.description)
+ setEditJobTotal(String(job.total))
+ setEditJobMaterial(String(job.material))
+ }
+
+ const handleSaveJob = async () => {
+ if (!editingJob) return
+ const editTotalNum = parseFloat(editJobTotal) || 0
+ const editMaterialNum = parseFloat(editJobMaterial) || 0
+ if (editTotalNum <= 0) return
+ setIsSavingJob(true)
+ const editLabor = Math.max(editTotalNum - editMaterialNum, 0)
+ const newRot = calculateRotDeduction(editJobCustomerId, editLabor, editingJob.id)
+ const customer = customers.find(c => c.id === editJobCustomerId)
+ await save(`job:${editingJob.id}`, {
+ customerId: editJobCustomerId,
+ customerName: customer?.name ?? editingJob.customerName,
+ description: editJobDescription,
+ total: editTotalNum,
+ material: editMaterialNum,
+ labor: editLabor,
+ rotDeduction: newRot,
+ date: editingJob.date,
+ status: editingJob.status,
+ })
+ await refresh()
+ setIsSavingJob(false)
+ }
+
+ const handleDeleteJob = async () => {
+ if (!deletingJobId) return
+ setIsDeletingJob(true)
+ await remove(`job:${deletingJobId}`)
+ await refresh()
+ setIsDeletingJob(false)
+ setDeletingJobId(null)
+ }
+
+ const handleMarkCompleted = async (job: Job) => {
+ const rot = calculateRotDeduction(job.customerId, job.labor, job.id)
+ await save(`job:${job.id}`, {
+ customerId: job.customerId,
+ customerName: job.customerName,
+ description: job.description,
+ total: job.total,
+ material: job.material,
+ labor: job.labor,
+ rotDeduction: rot,
+ date: job.date,
+ status: 'completed',
+ })
+ await refresh()
+ }
+
+ const handleExportCsv = () => {
+ const completedJobs = jobs.filter(j => j.status === 'completed')
+ const header = 'Personnummer;Kundnamn;Arbetskostnad;ROTAvdrag;Datum'
+ const rows = completedJobs.map(job => {
+ const cust = customers.find(c => c.id === job.customerId)
+ const pnr = cust?.personalNumber ?? ''
+ return `${pnr};${job.customerName};${job.labor};${job.rotDeduction};${job.date}`
+ })
+ const csv = [header, ...rows].join('\n')
+ const blob = new Blob(['\uFEFF' + csv], { type: 'text/csv;charset=utf-8;' })
+ const url = URL.createObjectURL(blob)
+ const link = document.createElement('a')
+ link.href = url
+ link.download = `rot-avdrag-${selectedYear}.csv`
+ link.click()
+ URL.revokeObjectURL(url)
+ }
+
+ if (isLoading) return
+
+
+ Kalkylator
+ Kunder
+ Jobb
+
+
+
+
+ Ar:
+
+
+
+
+ {yearOptions.map(y => (
+ {y}
+ ))}
+
+
+
+
+ {customers.length === 0 ? (
+
+
+ Lagg till kunder under fliken "Kunder" for att borja berakna ROT-avdrag.
+
+
+
+
+ Kund
+
+
+ {customers.map(c => {c.name} )}
+
+
+
+
+ Beskrivning
+
+
+ Totalt belopp (inkl. moms)
+
+
+ Materialkostnad
+
+
+
+
+ Arbetskostnad:
+ {labor.toLocaleString('sv-SE')} kr
+ ROT-avdrag (30%):
+ -{rotDeduction.toLocaleString('sv-SE')} kr
+ Kunden betalar:
+ {customerPays.toLocaleString('sv-SE')} kr
+ Kvarvarande kvot:
+ {Math.max(remainingQuota - rotDeduction, 0).toLocaleString('sv-SE')} kr
+
+
+
+ )}
+
+
+ )}
+
+
+
+
+
setNewCustomerName(e.target.value)} className="max-w-xs" />
+
+
setNewCustomerPnr(e.target.value)}
+ className="max-w-xs"
+ />
+ {newCustomerPnrError && (
+
{newCustomerPnrError}
+ )}
+
+
+
+
Inga kunder tillagda annu.
+ ) : (
+
+ {customers.map(cust => {
+ const used = customerYearlyUsed.get(cust.id) ?? 0
+ const pct = Math.min(Math.round((used / MAX_ROT_YEARLY) * 100), 100)
+ return (
+
+
+
+
+
{cust.name}
+ {cust.personalNumber && (
+
{cust.personalNumber}
+ )}
+
+
+
+ {used.toLocaleString('sv-SE')} / {MAX_ROT_YEARLY.toLocaleString('sv-SE')} kr
+
+
openEditCustomer(cust)}>
+
+
+
+
+ )
+ })}
+
+
+
+
+
+ Ar:
+
+
+
+
+ {yearOptions.map(y => (
+ {y}
+ ))}
+
+
+
+ {completedJobCount > 0 && (
+
+
+ )}
+
+
+
+ {jobs.length === 0 ? (
+ Inga jobb registrerade for {selectedYear}.
+ ) : (
+
+
+
+
+ Datum
+ Kund
+ Beskrivning
+ Totalt
+ ROT-avdrag
+ Status
+
+
+
+ {jobs.map(job => (
+
+ {job.date}
+ {job.customerName}
+ {job.description}
+ {job.total.toLocaleString('sv-SE')} kr
+ {job.rotDeduction.toLocaleString('sv-SE')} kr
+
+
+ {job.status === 'completed' ? 'Klar' : 'Utkast'}
+
+
+
+
+ {job.status === 'draft' && (
+
handleMarkCompleted(job)} title="Markera som klar">
+
+ )}
+
openEditJob(job)} title="Redigera">
+
+
setDeletingJobId(job.id)} title="Ta bort">
+
+
+
+ ))}
+
+
+
+
+
+ {/* Edit Customer Dialog */}
+
{ if (!open) setEditingCustomer(null) }}
+ title="Redigera kund"
+ description="Uppdatera kunduppgifter."
+ onSave={handleSaveCustomer}
+ isSaving={isSavingCustomer}
+ >
+
+ Namn
+
+
+
Personnummer
+
setEditCustomerPnr(e.target.value)}
+ />
+ {editCustomerPnrError && (
+
{editCustomerPnrError}
+ )}
+
+
+ {/* Edit Job Dialog */}
+
{ if (!open) setEditingJob(null) }}
+ title="Redigera jobb"
+ description="Uppdatera jobbdetaljer. ROT-avdrag beraknas om automatiskt."
+ onSave={handleSaveJob}
+ isSaving={isSavingJob}
+ >
+
+ Kund
+
+
+ {customers.map(c => {c.name} )}
+
+
+
+
+ Beskrivning
+
+
+ Totalt belopp (inkl. moms)
+
+
+ Materialkostnad
+
+ {(() => {
+ const editTotalNum = parseFloat(editJobTotal) || 0
+ const editMaterialNum = parseFloat(editJobMaterial) || 0
+ const editLabor = Math.max(editTotalNum - editMaterialNum, 0)
+ const editRot = editingJob
+ ? calculateRotDeduction(editJobCustomerId, editLabor, editingJob.id)
+ : 0
+ return editTotalNum > 0 ? (
+
+
+ Arbetskostnad:
+ {editLabor.toLocaleString('sv-SE')} kr
+
+
+ ROT-avdrag (30%):
+ -{editRot.toLocaleString('sv-SE')} kr
+
+
+
+ {/* Delete Job Confirmation */}
+
{ if (!open) setDeletingJobId(null) }}
+ title="Ta bort jobb"
+ description="Ar du saker pa att du vill ta bort detta jobb? Kundens anvanda kvot minskar om jobbet var slutfort."
+ onConfirm={handleDeleteJob}
+ isDeleting={isDeletingJob}
+ />
+
+ 0%
+
+ )
+ }
+ if (previous === 0) {
+ return (
+
+ Ny
+
+ )
+ }
+ const pctChange = Math.round(((current - previous) / previous) * 1000) / 10
+ if (pctChange === 0) {
+ return (
+
+ 0%
+
+ )
+ }
+ const improving = pctChange > 0
return (
-
+ {improving
+ ? {pctChange > 0 ? '+' : ''}{pctChange}%
+
+ )
+}
+
+export default function MultichannelRevenueWorkspace({}: WorkspaceComponentProps) {
+ const now = new Date()
+ const [dateRange, setDateRange] = useState({
+ start: new Date(now.getFullYear(), 0, 1).toISOString().slice(0, 10),
+ end: new Date(now.getFullYear(), 11, 31).toISOString().slice(0, 10),
+ })
+
+ const { data, save, remove, refresh, isLoading } = useExtensionData('ecommerce', 'multichannel-revenue')
+
+ const channels = useMemo(() => {
+ const s = data.find(d => d.key === 'settings')?.value as { channels?: Channel[] } | undefined
+ return s?.channels ?? []
+ }, [data])
+
+ // All entries (unfiltered by date, needed for previous period comparison)
+ const allEntries = useMemo(() =>
+ data.filter(d => d.key.startsWith('entry:'))
+ .map(d => ({
+ id: d.key.replace('entry:', ''),
+ ...(d.value as Omit),
+ }))
+ , [data])
+
+ // Entries filtered to current date range
+ const entries = useMemo(() =>
+ allEntries
+ .filter(e => {
+ const eStart = e.month + '-01'
+ const eEnd = e.month + '-31'
+ return eEnd >= dateRange.start && eStart <= dateRange.end
+ })
+ .sort((a, b) => b.month.localeCompare(a.month))
+ , [allEntries, dateRange])
+
+ // Previous year entries for the same period
+ const prevYearEntries = useMemo(() => {
+ const startDate = new Date(dateRange.start + 'T00:00:00')
+ const endDate = new Date(dateRange.end + 'T00:00:00')
+ const prevStart = new Date(startDate)
+ prevStart.setFullYear(prevStart.getFullYear() - 1)
+ const prevEnd = new Date(endDate)
+ prevEnd.setFullYear(prevEnd.getFullYear() - 1)
+ const prevStartStr = prevStart.toISOString().slice(0, 10)
+ const prevEndStr = prevEnd.toISOString().slice(0, 10)
+ return allEntries.filter(e => {
+ const eStart = e.month + '-01'
+ const eEnd = e.month + '-31'
+ return eEnd >= prevStartStr && eStart <= prevEndStr
+ })
+ }, [allEntries, dateRange])
+
+ // Form state
+ const [entryMonth, setEntryMonth] = useState(now.toISOString().slice(0, 7))
+ const [selectedChannel, setEntryChannel] = useState('')
+ const entryChannel = selectedChannel || (channels.length > 0 ? channels[0].name : '')
+ const [entryRevenue, setEntryRevenue] = useState('')
+ const [entryOrders, setEntryOrders] = useState('')
+ const [isSubmitting, setIsSubmitting] = useState(false)
+
+ // Channel management
+ const [newChannelName, setNewChannelName] = useState('')
+ const [sortMode, setSortMode] = useState('revenue')
+
+ // Duplicate confirmation dialog state
+ const [duplicateDialogOpen, setDuplicateDialogOpen] = useState(false)
+ const [pendingEntry, setPendingEntry] = useState<{
+ month: string; channel: string; revenue: number; orderCount: number; existingId: string
+ } | null>(null)
+
+ // Edit entry dialog state
+ const [editDialogOpen, setEditDialogOpen] = useState(false)
+ const [editingEntry, setEditingEntry] = useState(null)
+ const [editMonth, setEditMonth] = useState('')
+ const [editChannel, setEditChannel] = useState('')
+ const [editRevenue, setEditRevenue] = useState('')
+ const [editOrders, setEditOrders] = useState('')
+ const [isSavingEdit, setIsSavingEdit] = useState(false)
+
+ // Delete entry dialog state
+ const [deleteDialogOpen, setDeleteDialogOpen] = useState(false)
+ const [deletingEntryId, setDeletingEntryId] = useState(null)
+ const [isDeleting, setIsDeleting] = useState(false)
+
+ // Rename channel dialog state
+ const [renameDialogOpen, setRenameDialogOpen] = useState(false)
+ const [renamingChannel, setRenamingChannel] = useState(null)
+ const [newName, setNewName] = useState('')
+ const [isSavingRename, setIsSavingRename] = useState(false)
+
+ // Color picker state
+ const [colorPickerChannel, setColorPickerChannel] = useState(null)
+
+ // ---- Computed values ----
+
+ const totalRevenue = entries.reduce((s, e) => s + e.revenue, 0)
+ const totalOrders = entries.reduce((s, e) => s + e.orderCount, 0)
+ const overallAOV = totalOrders > 0 ? Math.round(totalRevenue / totalOrders) : 0
+
+ const prevYearTotalRevenue = prevYearEntries.reduce((s, e) => s + e.revenue, 0)
+
+ // Channel totals for current period
+ const channelTotals = useMemo(() => {
+ const map = new Map()
+ for (const e of entries) {
+ const existing = map.get(e.channel) ?? { revenue: 0, orders: 0 }
+ existing.revenue += e.revenue
+ existing.orders += e.orderCount
+ map.set(e.channel, existing)
+ }
+ return Array.from(map.entries())
+ .map(([channel, d]) => ({ channel, ...d }))
+ }, [entries])
+
+ // Channel totals for previous year period
+ const prevYearChannelTotals = useMemo(() => {
+ const map = new Map()
+ for (const e of prevYearEntries) {
+ const existing = map.get(e.channel) ?? { revenue: 0, orders: 0 }
+ existing.revenue += e.revenue
+ existing.orders += e.orderCount
+ map.set(e.channel, existing)
+ }
+ return map
+ }, [prevYearEntries])
+
+ // Growth rate per channel
+ const channelGrowth = useMemo(() => {
+ const growth = new Map()
+ for (const ct of channelTotals) {
+ const prev = prevYearChannelTotals.get(ct.channel)
+ const prevRev = prev?.revenue ?? 0
+ if (prevRev > 0) {
+ growth.set(ct.channel, ((ct.revenue - prevRev) / prevRev) * 100)
+ } else if (ct.revenue > 0) {
+ growth.set(ct.channel, Infinity) // New channel
+ } else {
+ growth.set(ct.channel, 0)
+ }
+ }
+ return growth
+ }, [channelTotals, prevYearChannelTotals])
+
+ // Sorted channel totals based on sort mode
+ const sortedChannelTotals = useMemo(() => {
+ const sorted = [...channelTotals]
+ if (sortMode === 'growth') {
+ sorted.sort((a, b) => {
+ const growthA = channelGrowth.get(a.channel) ?? 0
+ const growthB = channelGrowth.get(b.channel) ?? 0
+ // Infinity (new channels) goes to the top
+ if (growthA === Infinity && growthB !== Infinity) return -1
+ if (growthB === Infinity && growthA !== Infinity) return 1
+ return growthB - growthA
+ })
+ } else {
+ sorted.sort((a, b) => b.revenue - a.revenue)
+ }
+ return sorted
+ }, [channelTotals, sortMode, channelGrowth])
+
+ const bestChannel = useMemo(() => {
+ const sorted = [...channelTotals].sort((a, b) => b.revenue - a.revenue)
+ return sorted[0]?.channel ?? '-'
+ }, [channelTotals])
+
+ // Monthly comparison (months as rows, channels as columns)
+ const monthlyComparison = useMemo(() => {
+ const monthMap = new Map>()
+ for (const e of entries) {
+ if (!monthMap.has(e.month)) monthMap.set(e.month, new Map())
+ const channelMap = monthMap.get(e.month)!
+ const existing = channelMap.get(e.channel) ?? { revenue: 0, orders: 0 }
+ existing.revenue += e.revenue
+ existing.orders += e.orderCount
+ channelMap.set(e.channel, existing)
+ }
+ return Array.from(monthMap.entries())
+ .sort(([a], [b]) => a.localeCompare(b))
+ .map(([month, channelData]) => ({
+ month,
+ channels: Object.fromEntries(
+ Array.from(channelData.entries()).map(([ch, d]) => [ch, d])
+ ) as Record,
+ total: Array.from(channelData.values()).reduce((s, v) => s + v.revenue, 0),
+ totalOrders: Array.from(channelData.values()).reduce((s, v) => s + v.orders, 0),
+ }))
+ }, [entries])
+
+ // Channel bar chart (CSS-based)
+ const maxChannelRevenue = Math.max(...sortedChannelTotals.map(c => c.revenue), 1)
+
+ // ---- Handlers ----
+
+ const findDuplicateEntry = useCallback((month: string, channel: string) => {
+ return allEntries.find(e => e.month === month && e.channel === channel) ?? null
+ }, [allEntries])
+
+ const handleSubmit = async (e: React.FormEvent) => {
+ e.preventDefault()
+ const rev = parseFloat(entryRevenue)
+ const orders = parseInt(entryOrders) || 0
+ if (isNaN(rev) || rev <= 0 || !entryChannel) return
+
+ // Check for duplicate
+ const existing = findDuplicateEntry(entryMonth, entryChannel)
+ if (existing) {
+ setPendingEntry({
+ month: entryMonth,
+ channel: entryChannel,
+ revenue: rev,
+ orderCount: orders,
+ existingId: existing.id,
+ })
+ setDuplicateDialogOpen(true)
+ return
+ }
+
+ setIsSubmitting(true)
+ const id = crypto.randomUUID()
+ await save(`entry:${id}`, {
+ month: entryMonth,
+ channel: entryChannel,
+ revenue: rev,
+ orderCount: orders,
+ })
+ setEntryRevenue('')
+ setEntryOrders('')
+ await refresh()
+ setIsSubmitting(false)
+ }
+
+ const handleDuplicateUpdate = async () => {
+ if (!pendingEntry) return
+ setIsSubmitting(true)
+ await save(`entry:${pendingEntry.existingId}`, {
+ month: pendingEntry.month,
+ channel: pendingEntry.channel,
+ revenue: pendingEntry.revenue,
+ orderCount: pendingEntry.orderCount,
+ })
+ setEntryRevenue('')
+ setEntryOrders('')
+ setDuplicateDialogOpen(false)
+ setPendingEntry(null)
+ await refresh()
+ setIsSubmitting(false)
+ }
+
+ const handleDuplicateCreateNew = async () => {
+ if (!pendingEntry) return
+ setIsSubmitting(true)
+ const id = crypto.randomUUID()
+ await save(`entry:${id}`, {
+ month: pendingEntry.month,
+ channel: pendingEntry.channel,
+ revenue: pendingEntry.revenue,
+ orderCount: pendingEntry.orderCount,
+ })
+ setEntryRevenue('')
+ setEntryOrders('')
+ setDuplicateDialogOpen(false)
+ setPendingEntry(null)
+ await refresh()
+ setIsSubmitting(false)
+ }
+
+ const handleAddChannel = async () => {
+ if (!newChannelName.trim()) return
+ const color = DEFAULT_COLORS[channels.length % DEFAULT_COLORS.length]
+ const updated = [...channels, { name: newChannelName.trim(), color }]
+ await save('settings', { channels: updated })
+ setNewChannelName('')
+ }
+
+ const handleRemoveChannel = async (name: string) => {
+ const updated = channels.filter(c => c.name !== name)
+ await save('settings', { channels: updated })
+ }
+
+ const handleChangeChannelColor = async (channelName: string, color: string) => {
+ const updated = channels.map(c =>
+ c.name === channelName ? { ...c, color } : c
+ )
+ await save('settings', { channels: updated })
+ setColorPickerChannel(null)
+ }
+
+ const handleStartRename = (channelName: string) => {
+ setRenamingChannel(channelName)
+ setNewName(channelName)
+ setRenameDialogOpen(true)
+ }
+
+ const handleRenameChannel = async () => {
+ if (!renamingChannel || !newName.trim() || newName.trim() === renamingChannel) return
+ setIsSavingRename(true)
+ const trimmedName = newName.trim()
+
+ // Update channel settings
+ const updatedChannels = channels.map(c =>
+ c.name === renamingChannel ? { ...c, name: trimmedName } : c
+ )
+ await save('settings', { channels: updatedChannels })
+
+ // Update all entries that reference the old channel name
+ const entriesToUpdate = allEntries.filter(e => e.channel === renamingChannel)
+ for (const entry of entriesToUpdate) {
+ await save(`entry:${entry.id}`, {
+ month: entry.month,
+ channel: trimmedName,
+ revenue: entry.revenue,
+ orderCount: entry.orderCount,
+ })
+ }
+
+ setIsSavingRename(false)
+ setRenameDialogOpen(false)
+ setRenamingChannel(null)
+ setNewName('')
+ await refresh()
+ }
+
+ const handleStartEdit = (entry: RevenueEntry) => {
+ setEditingEntry(entry)
+ setEditMonth(entry.month)
+ setEditChannel(entry.channel)
+ setEditRevenue(String(entry.revenue))
+ setEditOrders(String(entry.orderCount))
+ setEditDialogOpen(true)
+ }
+
+ const handleSaveEdit = async () => {
+ if (!editingEntry) return
+ const rev = parseFloat(editRevenue)
+ const orders = parseInt(editOrders) || 0
+ if (isNaN(rev) || rev <= 0 || !editChannel) return
+ setIsSavingEdit(true)
+ await save(`entry:${editingEntry.id}`, {
+ month: editMonth,
+ channel: editChannel,
+ revenue: rev,
+ orderCount: orders,
+ })
+ setIsSavingEdit(false)
+ setEditDialogOpen(false)
+ setEditingEntry(null)
+ await refresh()
+ }
+
+ const handleStartDelete = (entryId: string) => {
+ setDeletingEntryId(entryId)
+ setDeleteDialogOpen(true)
+ }
+
+ const handleConfirmDelete = async () => {
+ if (!deletingEntryId) return
+ setIsDeleting(true)
+ await remove(`entry:${deletingEntryId}`)
+ setIsDeleting(false)
+ setDeleteDialogOpen(false)
+ setDeletingEntryId(null)
+ }
+
+ const handleSetup = async (values: Record) => {
+ const names = values.channels.split(',').map(n => n.trim()).filter(Boolean)
+ const channelList = names.map((name, i) => ({
+ name,
+ color: DEFAULT_COLORS[i % DEFAULT_COLORS.length],
+ }))
+ await save('settings', { channels: channelList })
+ }
+
+ if (isLoading) return
+
setDateRange({ start, end })} />
+
+ {/* KPI Cards */}
+
+ 0 ? {
+ value: Math.round(((totalRevenue - prevYearTotalRevenue) / prevYearTotalRevenue) * 1000) / 10,
+ label: 'mot fg ar',
+ } : undefined}
+ />
+ 0 ? overallAOV.toLocaleString('sv-SE') : '-'}
+ suffix={overallAOV > 0 ? 'kr' : undefined}
+ />
+
+
+ {/* Channel management */}
+
+
Kanaler
+
+ {channels.map(ch => (
+
+ {/* Color swatch - clickable for color picker */}
+
setColorPickerChannel(
+ colorPickerChannel === ch.name ? null : ch.name
+ )}
+ title="Byt farg"
+ />
+ {ch.name}
+ handleStartRename(ch.name)}
+ title="Byt namn"
+ >
+
+ handleRemoveChannel(ch.name)}
+ title="Ta bort kanal"
+ >
+
+
+ {/* Color picker dropdown */}
+ {colorPickerChannel === ch.name && (
+
+
+ {COLOR_PRESETS.map(color => (
+ handleChangeChannelColor(ch.name, color)}
+ />
+ ))}
+
+
+ ))}
+
+
+
setNewChannelName(e.target.value)}
+ className="max-w-xs"
+ onKeyDown={e => {
+ if (e.key === 'Enter') {
+ e.preventDefault()
+ handleAddChannel()
+ }
+ }}
+ />
+
+
+
+
+
+
+ Manad
+
+
+ Kanal
+
+
+ {channels.map(c => {c.name} )}
+
+
+
+
+ Intakt (kr)
+
+
+ Antal ordrar
+
+
+
+ {/* Duplicate confirmation dialog */}
+
+
+
+ Post finns redan
+
+ Det finns redan en post for {pendingEntry?.channel} i {pendingEntry?.month}.
+ Vill du uppdatera den befintliga posten eller skapa en ny?
+
+
+
+ setDuplicateDialogOpen(false)} disabled={isSubmitting}>
+ Avbryt
+
+
+ Skapa ny
+
+
+ {isSubmitting ? 'Sparar...' : 'Uppdatera befintlig'}
+
+
+
+
+
+ {/* Channel comparison bar chart */}
+ {sortedChannelTotals.length > 0 && (
+
+
+
Kanaljamforelse
+
+ Sortera:
+ setSortMode('revenue')}
+ >
+ Intakt
+
+ setSortMode('growth')}
+ >
+
+
+
+
+ {sortedChannelTotals.map(ct => {
+ const channelConfig = channels.find(c => c.name === ct.channel)
+ const barWidth = Math.round((ct.revenue / maxChannelRevenue) * 100)
+ const prevData = prevYearChannelTotals.get(ct.channel)
+ const prevRev = prevData?.revenue ?? 0
+ const aov = ct.orders > 0 ? Math.round(ct.revenue / ct.orders) : 0
+ return (
+
+
+
{ct.channel}
+
+
+ AOV: {aov > 0 ? aov.toLocaleString('sv-SE') + ' kr' : '-'}
+
+ {formatCurrency(ct.revenue)} kr
+
+
+
+
+ )
+ })}
+
+
+
Registrerade poster
+
+
+
+
+ Manad
+ Kanal
+ Intakt
+ Ordrar
+ AOV
+ Atgarder
+
+
+
+ {entries.map(entry => {
+ const channelConfig = channels.find(c => c.name === entry.channel)
+ return (
+ handleStartEdit(entry)}
+ >
+ {entry.month}
+
+
+
+
+ {formatCurrency(entry.revenue)} kr
+
+
+ {entry.orderCount}
+
+
+ {formatAOV(entry.revenue, entry.orderCount)} {entry.orderCount > 0 ? 'kr' : ''}
+
+
+ e.stopPropagation()}>
+
handleStartEdit(entry)}
+ title="Redigera"
+ >
+
+
handleStartDelete(entry.id)}
+ title="Ta bort"
+ >
+
+
+
+ )
+ })}
+
+
+
+
+
Manadsjamforelse
+
+
+
+
+ Manad
+ {channels.map(ch => (
+ {ch.name}
+ ))}
+ Total
+ AOV
+
+
+
+ {monthlyComparison.map(row => (
+
+ {row.month}
+ {channels.map(ch => {
+ const chData = row.channels[ch.name]
+ return (
+
+ {chData ? formatCurrency(chData.revenue) : '0'}
+
+ )
+ })}
+
+ {formatCurrency(row.total)}
+
+
+ {row.totalOrders > 0
+ ? Math.round(row.total / row.totalOrders).toLocaleString('sv-SE') + ' kr'
+ : '-'}
+
+
+ ))}
+
+
+
+
+
Arsjamforelse per kanal
+
+
+
+
+ Kanal
+ Nuvarande period
+ Foregaende ar
+ Tillvaxt
+ AOV (nu)
+ AOV (fg ar)
+
+
+
+ {sortedChannelTotals.map(ct => {
+ const prevData = prevYearChannelTotals.get(ct.channel)
+ const prevRev = prevData?.revenue ?? 0
+ const prevOrd = prevData?.orders ?? 0
+ return (
+
+
+
+
c.name === ct.channel)?.color ?? '#3b82f6' }}
+ />
+ {ct.channel}
+
+
+
+ {formatCurrency(ct.revenue)} kr
+
+
+ {prevRev > 0 ? formatCurrency(prevRev) + ' kr' : '-'}
+
+
+
+
+ {formatAOV(ct.revenue, ct.orders)} {ct.orders > 0 ? 'kr' : ''}
+
+
+ {formatAOV(prevRev, prevOrd)} {prevOrd > 0 ? 'kr' : ''}
+
+
+ )
+ })}
+ {/* Totals row */}
+
+ Totalt
+
+ {formatCurrency(totalRevenue)} kr
+
+
+ {prevYearTotalRevenue > 0 ? formatCurrency(prevYearTotalRevenue) + ' kr' : '-'}
+
+
+
+
+ {overallAOV > 0 ? overallAOV.toLocaleString('sv-SE') + ' kr' : '-'}
+
+
+ {(() => {
+ const prevTotalOrders = prevYearEntries.reduce((s, e) => s + e.orderCount, 0)
+ return prevTotalOrders > 0
+ ? Math.round(prevYearTotalRevenue / prevTotalOrders).toLocaleString('sv-SE') + ' kr'
+ : '-'
+ })()}
+
+
+
+
+
+
+
+
+ Manad
+
+
+ Kanal
+
+
+ {channels.map(c => (
+ {c.name}
+ ))}
+
+
+
+
+ Intakt (kr)
+
+
+ Antal ordrar
+
+
+
+ {/* Delete confirmation dialog */}
+
+
+ Nytt namn
+
+
+ = {
+ name: 'Name',
+ createdAt: 'Created at',
+ total: 'Total',
+ subtotal: 'Subtotal',
+ shipping: 'Shipping',
+ taxes: 'Taxes',
+ paymentMethod: 'Payment Method',
+ fulfillmentStatus: 'Fulfillment Status',
+}
+
+const PAGES_SIZE = 20
+
+export default function ShopifyImportWorkspace({}: WorkspaceComponentProps) {
+ const { data, save, remove, refresh, isLoading } = useExtensionData('ecommerce', 'shopify-import')
+
+ const orders = useMemo(() =>
+ data.filter(d => d.key.startsWith('order:'))
+ .map(d => ({ id: d.key.replace('order:', ''), ...(d.value as Omit) }))
+ .sort((a, b) => b.createdAt.localeCompare(a.createdAt))
+ , [data])
+
+ const imports = useMemo(() =>
+ data.filter(d => d.key.startsWith('import:'))
+ .map(d => ({ id: d.key, ...(d.value as Omit) }))
+ .sort((a, b) => b.date.localeCompare(a.date))
+ , [data])
+
+ // ---------------------------------------------------------------------------
+ // Filter state
+ // ---------------------------------------------------------------------------
+
+ const [searchQuery, setSearchQuery] = useState('')
+ const [dateFrom, setDateFrom] = useState('')
+ const [dateTo, setDateTo] = useState('')
+ const [paymentFilter, setPaymentFilter] = useState('__all__')
+ const [fulfillmentFilter, setFulfillmentFilter] = useState('__all__')
+
+ // Pagination state
+ const [currentPage, setCurrentPage] = useState(1)
+
+ // Edit order dialog state
+ const [editOrder, setEditOrder] = useState(null)
+ const [editName, setEditName] = useState('')
+ const [editDate, setEditDate] = useState('')
+ const [editTotal, setEditTotal] = useState('')
+ const [editSubtotal, setEditSubtotal] = useState('')
+ const [editShipping, setEditShipping] = useState('')
+ const [editTaxes, setEditTaxes] = useState('')
+ const [editPaymentMethod, setEditPaymentMethod] = useState('')
+ const [editFulfillmentStatus, setEditFulfillmentStatus] = useState('')
+ const [isSavingEdit, setIsSavingEdit] = useState(false)
+
+ // Delete order dialog state
+ const [deleteOrderId, setDeleteOrderId] = useState(null)
+ const [isDeleting, setIsDeleting] = useState(false)
+
+ // Manual entry form state
+ const [manualName, setManualName] = useState('')
+ const [manualDate, setManualDate] = useState(new Date().toISOString().slice(0, 10))
+ const [manualTotal, setManualTotal] = useState('')
+ const [manualSubtotal, setManualSubtotal] = useState('')
+ const [manualShipping, setManualShipping] = useState('')
+ const [manualTaxes, setManualTaxes] = useState('')
+ const [manualPaymentMethod, setManualPaymentMethod] = useState('')
+ const [manualFulfillmentStatus, setManualFulfillmentStatus] = useState('')
+ const [isSubmittingManual, setIsSubmittingManual] = useState(false)
+
+ // ---------------------------------------------------------------------------
+ // Distinct values for filter dropdowns
+ // ---------------------------------------------------------------------------
+
+ const paymentMethods = useMemo(() => {
+ const set = new Set()
+ for (const o of orders) {
+ if (o.paymentMethod) set.add(o.paymentMethod)
+ }
+ return Array.from(set).sort()
+ }, [orders])
+
+ const fulfillmentStatuses = useMemo(() => {
+ const set = new Set()
+ for (const o of orders) {
+ if (o.fulfillmentStatus) set.add(o.fulfillmentStatus)
+ }
+ return Array.from(set).sort()
+ }, [orders])
+
+ // ---------------------------------------------------------------------------
+ // Active filter count
+ // ---------------------------------------------------------------------------
+
+ const activeFilterCount = useMemo(() => {
+ let count = 0
+ if (searchQuery.trim()) count++
+ if (dateFrom) count++
+ if (dateTo) count++
+ if (paymentFilter !== '__all__') count++
+ if (fulfillmentFilter !== '__all__') count++
+ return count
+ }, [searchQuery, dateFrom, dateTo, paymentFilter, fulfillmentFilter])
+
+ // ---------------------------------------------------------------------------
+ // CSV import handler
+ // ---------------------------------------------------------------------------
+
+ const handleImport = async (rows: Record[]) => {
+ const importId = crypto.randomUUID()
+ let count = 0
+
+ for (const row of rows) {
+ const parseNum = (v?: string) => {
+ if (!v) return 0
+ return Math.round(parseFloat(v.replace(/\s/g, '').replace(',', '.')) * 100) / 100 || 0
+ }
+
+ const orderId = crypto.randomUUID()
+ await save(`order:${orderId}`, {
+ name: row.name ?? '',
+ createdAt: row.createdAt ?? new Date().toISOString().slice(0, 10),
+ total: parseNum(row.total),
+ subtotal: parseNum(row.subtotal),
+ shipping: parseNum(row.shipping),
+ taxes: parseNum(row.taxes),
+ paymentMethod: row.paymentMethod ?? '',
+ fulfillmentStatus: row.fulfillmentStatus ?? '',
+ })
+ count++
+ }
+
+ await save(`import:${importId}`, {
+ date: new Date().toISOString().slice(0, 10),
+ rowCount: count,
+ })
+
+ await refresh()
+ }
+
+ // ---------------------------------------------------------------------------
+ // Manual order entry handler
+ // ---------------------------------------------------------------------------
+
+ const handleManualSubmit = async (e: React.FormEvent) => {
+ e.preventDefault()
+ if (!manualName.trim()) return
+ const parseNum = (v: string) => Math.round(parseFloat(v.replace(/\s/g, '').replace(',', '.')) * 100) / 100 || 0
+
+ setIsSubmittingManual(true)
+ const orderId = crypto.randomUUID()
+ await save(`order:${orderId}`, {
+ name: manualName.trim(),
+ createdAt: manualDate || new Date().toISOString().slice(0, 10),
+ total: parseNum(manualTotal),
+ subtotal: parseNum(manualSubtotal),
+ shipping: parseNum(manualShipping),
+ taxes: parseNum(manualTaxes),
+ paymentMethod: manualPaymentMethod,
+ fulfillmentStatus: manualFulfillmentStatus,
+ })
+
+ setManualName('')
+ setManualDate(new Date().toISOString().slice(0, 10))
+ setManualTotal('')
+ setManualSubtotal('')
+ setManualShipping('')
+ setManualTaxes('')
+ setManualPaymentMethod('')
+ setManualFulfillmentStatus('')
+ await refresh()
+ setIsSubmittingManual(false)
+ }
+
+ // ---------------------------------------------------------------------------
+ // Edit order handlers
+ // ---------------------------------------------------------------------------
+
+ const openEditOrder = (order: ShopifyOrder) => {
+ setEditOrder(order)
+ setEditName(order.name)
+ setEditDate(order.createdAt)
+ setEditTotal(String(order.total))
+ setEditSubtotal(String(order.subtotal))
+ setEditShipping(String(order.shipping))
+ setEditTaxes(String(order.taxes))
+ setEditPaymentMethod(order.paymentMethod)
+ setEditFulfillmentStatus(order.fulfillmentStatus)
+ }
+
+ const handleSaveEdit = async () => {
+ if (!editOrder) return
+ const parseNum = (v: string) => Math.round(parseFloat(v.replace(/\s/g, '').replace(',', '.')) * 100) / 100 || 0
+
+ setIsSavingEdit(true)
+ await save(`order:${editOrder.id}`, {
+ name: editName,
+ createdAt: editDate || new Date().toISOString().slice(0, 10),
+ total: parseNum(editTotal),
+ subtotal: parseNum(editSubtotal),
+ shipping: parseNum(editShipping),
+ taxes: parseNum(editTaxes),
+ paymentMethod: editPaymentMethod,
+ fulfillmentStatus: editFulfillmentStatus,
+ })
+ await refresh()
+ setIsSavingEdit(false)
+ }
+
+ // ---------------------------------------------------------------------------
+ // Delete order handler
+ // ---------------------------------------------------------------------------
+
+ const handleConfirmDelete = async () => {
+ if (!deleteOrderId) return
+ setIsDeleting(true)
+ await remove(`order:${deleteOrderId}`)
+ await refresh()
+ setIsDeleting(false)
+ }
+
+ // ---------------------------------------------------------------------------
+ // Stats
+ // ---------------------------------------------------------------------------
+
+ const totalRevenue = orders.reduce((s, o) => s + o.total, 0)
+ const aov = orders.length > 0 ? Math.round(totalRevenue / orders.length) : 0
+ const totalTaxes = orders.reduce((s, o) => s + o.taxes, 0)
+ const totalSubtotal = orders.reduce((s, o) => s + o.subtotal, 0)
+ const avgVatRate = totalSubtotal > 0
+ ? Math.round((totalTaxes / totalSubtotal) * 10000) / 100
+ : 0
+
+ // Monthly trend
+ const monthlyTrend = useMemo(() => {
+ const map = new Map()
+ for (const o of orders) {
+ const month = o.createdAt.slice(0, 7)
+ const existing = map.get(month) ?? { revenue: 0, count: 0 }
+ existing.revenue += o.total
+ existing.count++
+ map.set(month, existing)
+ }
+ return Array.from(map.entries())
+ .sort(([a], [b]) => a.localeCompare(b))
+ .map(([month, data]) => ({ month, value: data.revenue }))
+ }, [orders])
+
+ // Monthly VAT breakdown
+ const monthlyVat = useMemo(() => {
+ const map = new Map()
+ for (const o of orders) {
+ const month = o.createdAt.slice(0, 7)
+ const existing = map.get(month) ?? { taxes: 0, subtotal: 0 }
+ existing.taxes += o.taxes
+ existing.subtotal += o.subtotal
+ map.set(month, existing)
+ }
+ return Array.from(map.entries())
+ .sort(([a], [b]) => a.localeCompare(b))
+ .map(([month, d]) => ({
+ month,
+ taxes: Math.round(d.taxes * 100) / 100,
+ subtotal: Math.round(d.subtotal * 100) / 100,
+ rate: d.subtotal > 0 ? Math.round((d.taxes / d.subtotal) * 10000) / 100 : 0,
+ }))
+ }, [orders])
+
+ // Payment method breakdown
+ const paymentBreakdown = useMemo(() => {
+ const map = new Map()
+ for (const o of orders) {
+ const method = o.paymentMethod || 'Okant'
+ const existing = map.get(method) ?? { count: 0, total: 0 }
+ existing.count++
+ existing.total += o.total
+ map.set(method, existing)
+ }
+ return Array.from(map.entries())
+ .map(([method, data]) => ({ method, ...data }))
+ .sort((a, b) => b.total - a.total)
+ }, [orders])
+
+ // Fulfillment breakdown
+ const fulfillmentBreakdown = useMemo(() => {
+ const map = new Map()
+ for (const o of orders) {
+ const status = o.fulfillmentStatus || 'Okant'
+ map.set(status, (map.get(status) ?? 0) + 1)
+ }
+ return Array.from(map.entries())
+ .map(([status, count]) => ({ status, count }))
+ .sort((a, b) => b.count - a.count)
+ }, [orders])
+
+ // ---------------------------------------------------------------------------
+ // Filtered & paginated orders
+ // ---------------------------------------------------------------------------
+
+ const filteredOrders = useMemo(() => {
+ let result = orders
+
+ if (searchQuery.trim()) {
+ const q = searchQuery.toLowerCase()
+ result = result.filter(o =>
+ o.name.toLowerCase().includes(q) ||
+ o.paymentMethod.toLowerCase().includes(q) ||
+ o.fulfillmentStatus.toLowerCase().includes(q)
+ )
+ }
+
+ if (dateFrom) {
+ result = result.filter(o => o.createdAt >= dateFrom)
+ }
+
+ if (dateTo) {
+ result = result.filter(o => o.createdAt <= dateTo)
+ }
+
+ if (paymentFilter !== '__all__') {
+ result = result.filter(o => o.paymentMethod === paymentFilter)
+ }
+
+ if (fulfillmentFilter !== '__all__') {
+ result = result.filter(o => o.fulfillmentStatus === fulfillmentFilter)
+ }
+
+ return result
+ }, [orders, searchQuery, dateFrom, dateTo, paymentFilter, fulfillmentFilter])
+
+ const totalPages = Math.max(1, Math.ceil(filteredOrders.length / PAGES_SIZE))
+ const safePage = Math.min(currentPage, totalPages)
+ const paginatedOrders = filteredOrders.slice(
+ (safePage - 1) * PAGES_SIZE,
+ safePage * PAGES_SIZE
+ )
+
+ // Reset page when filters change
+ const resetPage = () => setCurrentPage(1)
+
+ // ---------------------------------------------------------------------------
+ // Clear filters
+ // ---------------------------------------------------------------------------
+
+ const clearFilters = () => {
+ setSearchQuery('')
+ setDateFrom('')
+ setDateTo('')
+ setPaymentFilter('__all__')
+ setFulfillmentFilter('__all__')
+ setCurrentPage(1)
+ }
+
+ // ---------------------------------------------------------------------------
+ // Render
+ // ---------------------------------------------------------------------------
+
+ if (isLoading) return
+ {/* Edit order dialog */}
+
{ if (!open) setEditOrder(null) }}
+ title="Redigera order"
+ description="Andra uppgifterna for denna order."
+ onSave={handleSaveEdit}
+ isSaving={isSavingEdit}
+ >
+
+
+
+ {/* Delete order dialog */}
+
{ if (!open) setDeleteOrderId(null) }}
+ title="Ta bort order"
+ description="Ar du saker pa att du vill ta bort denna order? Atgarden kan inte angras."
+ onConfirm={handleConfirmDelete}
+ isDeleting={isDeleting}
+ />
+
+
+
+ Import
+ Ordrar
+ Statistik
+
+
+ {/* ------------------------------------------------------------------ */}
+ {/* Import tab */}
+ {/* ------------------------------------------------------------------ */}
+
+
+
+
+
+ {imports.length > 0 && (
+
+
Importhistorik
+
+
+
+
+ Datum
+ Ordrar
+
+
+
+ {imports.map(imp => (
+
+ {imp.date}
+ {imp.rowCount}
+
+ ))}
+
+
+
+
+
+ {/* ------------------------------------------------------------------ */}
+ {/* Orders tab */}
+ {/* ------------------------------------------------------------------ */}
+
+ {/* Filters */}
+
+
+
+ Sok
+
+
+ Fran datum
+
+
+ Till datum
+
+
+ Betalmetod
+ { setPaymentFilter(v); resetPage() }}>
+
+
+
+ Alla
+ {paymentMethods.map(m => (
+ {m}
+ ))}
+
+
+
+
+ Leveransstatus
+ { setFulfillmentFilter(v); resetPage() }}>
+
+
+
+ Alla
+ {fulfillmentStatuses.map(s => (
+ {s}
+ ))}
+
+
+
+
+
+ {activeFilterCount > 0 && (
+
+ {activeFilterCount} aktiva filter
+
+ Rensa filter
+
+
+ )}
+
Inga ordrar hittades.
+ ) : (
+ <>
+
+
+
+
+ Order
+ Datum
+ Total
+ Frakt
+ Moms
+ Betalning
+ Status
+
+
+
+ {paginatedOrders.map(o => (
+
+ {o.name}
+ {o.createdAt}
+ {o.total.toLocaleString('sv-SE')} kr
+ {o.shipping.toLocaleString('sv-SE')} kr
+ {o.taxes.toLocaleString('sv-SE')} kr
+ {o.paymentMethod}
+
+
+ {o.fulfillmentStatus || 'Okant'}
+
+
+
+
+
openEditOrder(o)}>
+
+
setDeleteOrderId(o.id)}>
+
+
+
+ ))}
+
+
+
+
+ {filteredOrders.length} ordrar totalt
+
+
+ setCurrentPage(p => Math.max(1, p - 1))}
+ >
+
+
+ Sida {safePage} av {totalPages}
+
+ = totalPages}
+ onClick={() => setCurrentPage(p => Math.min(totalPages, p + 1))}
+ >
+ Nasta
+
+
+
+
+ {/* ------------------------------------------------------------------ */}
+ {/* Stats tab */}
+ {/* ------------------------------------------------------------------ */}
+
+
+
+
+ {/* VAT analytics */}
+
+
Momsanalys
+
+
+
+ {monthlyVat.length > 0 && (
+
+
+
+
+ Manad
+ Subtotal
+ Moms
+ Momssats
+
+
+
+ {monthlyVat.map(m => (
+
+ {m.month}
+ {m.subtotal.toLocaleString('sv-SE')} kr
+ {m.taxes.toLocaleString('sv-SE')} kr
+ {m.rate}%
+
+ ))}
+
+
+
+ )}
+
+
Intakt per manad
+
+
Per betalmetod
+
+
+
+
+ Betalmetod
+ Ordrar
+ Total
+
+
+
+ {paymentBreakdown.map(p => (
+
+ {p.method}
+ {p.count}
+ {p.total.toLocaleString('sv-SE')} kr
+
+ ))}
+
+
+
+
+
Per leveransstatus
+
+
+
+
+ Status
+ Ordrar
+
+
+
+ {fulfillmentBreakdown.map(f => (
+
+ {f.status}
+ {f.count}
+
+ ))}
+
+
+
+
+
+
+ 0 pp
+
+ )
+ }
+ // For occupancy: higher is better, so positive delta = green (improving)
+ const improving = delta > 0
return (
-
+ {delta > 0
+ ? {delta > 0 ? '+' : ''}{delta} pp
+
+ )
+}
+
+interface DailyEntry {
+ date: string
+ roomsOccupied: number
+ roomsOutOfOrder: number
+ reason?: OooReason
+}
+
+export default function OccupancyWorkspace({}: WorkspaceComponentProps) {
+ const now = new Date()
+ const [dateRange, setDateRange] = useState({
+ start: new Date(now.getFullYear(), now.getMonth(), 1).toISOString().slice(0, 10),
+ end: new Date(now.getFullYear(), now.getMonth() + 1, 0).toISOString().slice(0, 10),
+ })
+
+ const prevPeriod = useMemo(
+ () => computePreviousPeriod(dateRange.start, dateRange.end),
+ [dateRange.start, dateRange.end]
+ )
+
+ const { data, save, remove, refresh, isLoading } = useExtensionData('hotel', 'occupancy')
+ const settings = data.find(d => d.key === 'settings')?.value as { totalRooms?: number } | undefined
+ const totalRooms = settings?.totalRooms ?? 0
+
+ const allDailyEntries = useMemo(() =>
+ data.filter(d => d.key.startsWith('daily:'))
+ .map(d => ({
+ date: d.key.replace('daily:', ''),
+ ...(d.value as { roomsOccupied: number; roomsOutOfOrder: number; reason?: OooReason }),
+ }))
+ , [data])
+
+ const entries = useMemo(() =>
+ allDailyEntries
+ .filter(e => e.date >= dateRange.start && e.date <= dateRange.end)
+ .sort((a, b) => b.date.localeCompare(a.date))
+ , [allDailyEntries, dateRange])
+
+ const prevEntries = useMemo(() =>
+ allDailyEntries
+ .filter(e => e.date >= prevPeriod.start && e.date <= prevPeriod.end)
+ , [allDailyEntries, prevPeriod])
+
+ // Form state
+ const [entryDate, setEntryDate] = useState(now.toISOString().slice(0, 10))
+ const [roomsOccupied, setRoomsOccupied] = useState('')
+ const [roomsOutOfOrder, setRoomsOutOfOrder] = useState('')
+ const [oooReason, setOooReason] = useState('Underhall')
+ const [isSubmitting, setIsSubmitting] = useState(false)
+
+ // Edit dialog state
+ const [editDialogOpen, setEditDialogOpen] = useState(false)
+ const [editDate, setEditDate] = useState('')
+ const [editOccupied, setEditOccupied] = useState('')
+ const [editOoo, setEditOoo] = useState('')
+ const [editReason, setEditReason] = useState('Underhall')
+ const [isSavingEdit, setIsSavingEdit] = useState(false)
+
+ // Delete dialog state
+ const [deleteDialogOpen, setDeleteDialogOpen] = useState(false)
+ const [deleteDate, setDeleteDate] = useState('')
+ const [isDeleting, setIsDeleting] = useState(false)
+
+ // Settings dialog state
+ const [settingsDialogOpen, setSettingsDialogOpen] = useState(false)
+ const [newTotalRooms, setNewTotalRooms] = useState('')
+ const [isSavingSettings, setIsSavingSettings] = useState(false)
+
+ // --- Validation ---
+ const formOccupied = parseInt(roomsOccupied) || 0
+ const formOoo = parseInt(roomsOutOfOrder) || 0
+ const formExceedsTotal = totalRooms > 0 && (formOccupied + formOoo) > totalRooms
+ const formIsValid = roomsOccupied !== '' && !isNaN(parseInt(roomsOccupied)) && !formExceedsTotal
+
+ const editOccupiedNum = parseInt(editOccupied) || 0
+ const editOooNum = parseInt(editOoo) || 0
+ const editExceedsTotal = totalRooms > 0 && (editOccupiedNum + editOooNum) > totalRooms
+ const editIsValid = editOccupied !== '' && !isNaN(parseInt(editOccupied)) && !editExceedsTotal
+
+ // --- Current period KPIs ---
+ const totalOccupied = entries.reduce((s, e) => s + e.roomsOccupied, 0)
+ const totalOutOfOrder = entries.reduce((s, e) => s + e.roomsOutOfOrder, 0)
+ const daysInRange = entries.length
+ const totalAvailable = totalRooms * daysInRange
+
+ const occupancyPct = totalAvailable > 0
+ ? Math.round((totalOccupied / totalAvailable) * 10000) / 100
+ : 0
+ const avgOccupied = daysInRange > 0 ? Math.round(totalOccupied / daysInRange) : 0
+ const avgOutOfOrder = daysInRange > 0 ? Math.round((totalOutOfOrder / daysInRange) * 10) / 10 : 0
+ const avgAvailable = daysInRange > 0
+ ? Math.round(((totalRooms * daysInRange - totalOccupied - totalOutOfOrder) / daysInRange) * 10) / 10
+ : totalRooms
+
+ // --- Previous period KPIs ---
+ const prevTotalOccupied = prevEntries.reduce((s, e) => s + e.roomsOccupied, 0)
+ const prevDaysInRange = prevEntries.length
+ const prevTotalAvailable = totalRooms * prevDaysInRange
+
+ const prevOccupancyPct = prevTotalAvailable > 0
+ ? Math.round((prevTotalOccupied / prevTotalAvailable) * 10000) / 100
+ : 0
+
+ // Calendar heatmap for current month view
+ const calendarData = useMemo(() => {
+ const entryMap = new Map(entries.map(e => [e.date, e]))
+ const start = new Date(dateRange.start)
+ const end = new Date(dateRange.end)
+ const days: { date: string; occupancyPct: number; dayOfWeek: number }[] = []
+
+ const current = new Date(start)
+ while (current <= end) {
+ const dateStr = current.toISOString().slice(0, 10)
+ const entry = entryMap.get(dateStr)
+ const pct = entry && totalRooms > 0
+ ? Math.round((entry.roomsOccupied / totalRooms) * 100)
+ : 0
+ days.push({ date: dateStr, occupancyPct: pct, dayOfWeek: current.getDay() })
+ current.setDate(current.getDate() + 1)
+ }
+ return days
+ }, [entries, dateRange, totalRooms])
+
+ // --- Handlers ---
+
+ const handleSubmit = async (e: React.FormEvent) => {
+ e.preventDefault()
+ const occupied = parseInt(roomsOccupied)
+ const outOfOrder = parseInt(roomsOutOfOrder) || 0
+ if (isNaN(occupied)) return
+ if (totalRooms > 0 && (occupied + outOfOrder) > totalRooms) return
+ setIsSubmitting(true)
+ await save(`daily:${entryDate}`, {
+ roomsOccupied: occupied,
+ roomsOutOfOrder: outOfOrder,
+ reason: outOfOrder > 0 ? oooReason : undefined,
+ })
+ setRoomsOccupied('')
+ setRoomsOutOfOrder('')
+ setOooReason('Underhall')
+ await refresh()
+ setIsSubmitting(false)
+ }
+
+ const openEditDialog = (entry: DailyEntry) => {
+ setEditDate(entry.date)
+ setEditOccupied(String(entry.roomsOccupied))
+ setEditOoo(String(entry.roomsOutOfOrder))
+ setEditReason(entry.reason ?? 'Underhall')
+ setEditDialogOpen(true)
+ }
+
+ const handleSaveEdit = async () => {
+ const occupied = parseInt(editOccupied)
+ const outOfOrder = parseInt(editOoo) || 0
+ if (isNaN(occupied)) return
+ if (totalRooms > 0 && (occupied + outOfOrder) > totalRooms) return
+ setIsSavingEdit(true)
+ await save(`daily:${editDate}`, {
+ roomsOccupied: occupied,
+ roomsOutOfOrder: outOfOrder,
+ reason: outOfOrder > 0 ? editReason : undefined,
+ })
+ await refresh()
+ setIsSavingEdit(false)
+ }
+
+ const openDeleteDialog = (date: string) => {
+ setDeleteDate(date)
+ setDeleteDialogOpen(true)
+ }
+
+ const handleDelete = async () => {
+ setIsDeleting(true)
+ await remove(`daily:${deleteDate}`)
+ setIsDeleting(false)
+ }
+
+ const handleSetup = async (values: Record) => {
+ await save('settings', { totalRooms: parseInt(values.totalRooms) || 0 })
+ }
+
+ const openSettingsDialog = () => {
+ setNewTotalRooms(String(totalRooms))
+ setSettingsDialogOpen(true)
+ }
+
+ const handleSaveSettings = async () => {
+ const rooms = parseInt(newTotalRooms)
+ if (isNaN(rooms) || rooms <= 0) return
+ setIsSavingSettings(true)
+ await save('settings', { totalRooms: rooms })
+ await refresh()
+ setIsSavingSettings(false)
+ }
+
+ if (isLoading) return
+
+ setDateRange({ start, end })} />
+
+
+
+
+ {/* KPI Cards */}
+
+
+
+ {/* Period comparison */}
+
+
Periodjamforelse
+
+
+
Belaggning (nuvarande)
+
+ {occupancyPct}%
+
+
+
+
Belaggning (foregaende)
+
{prevOccupancyPct}%
+
+
+
Foregaende period
+
{prevPeriod.start} — {prevPeriod.end}
+
+
+
+
+
Belagda rum (foregaende)
+
+ {prevDaysInRange > 0
+ ? Math.round(prevTotalOccupied / prevDaysInRange)
+ : 0} snitt / dag
+
+
+
+
Dagar med data (foregaende)
+
{prevDaysInRange} dagar
+
+
+
+
+ {/* Entry form */}
+
+
+
+ Datum
+
+
+ Belagda rum
+
+
+ Ur drift
+
+
+ Orsak (ur drift)
+ setOooReason(val as OooReason)}>
+
+
+
+ {OOO_REASONS.map(r => (
+ {r}
+ ))}
+
+
+
+
+ Belagda rum ({formOccupied}) + ur drift ({formOoo}) = {formOccupied + formOoo} overstiger totalt antal rum ({totalRooms}).
+
+ )}
+
+
+ {/* Calendar heatmap */}
+ {calendarData.length > 0 && (
+
+
Belaggningskalender
+
+
+ {['Man', 'Tis', 'Ons', 'Tor', 'Fre', 'Lor', 'Son'].map(d => (
+
{d}
+ ))}
+
+
+ {/* Offset for first day of month */}
+ {calendarData.length > 0 && Array.from({ length: (calendarData[0].dayOfWeek + 6) % 7 }).map((_, i) => (
+
+ ))}
+ {calendarData.map(day => (
+
0 ? 'text-white' : 'text-muted-foreground'
+ )}
+ title={`${day.date}: ${day.occupancyPct}%`}
+ >
+ {parseInt(day.date.slice(-2))}
+
+ ))}
+
+
+
+
+ )}
+
+ {/* Daily data table */}
+
+
Daglig data
+ {entries.length === 0 ? (
+
Ingen data registrerad i vald period.
+ ) : (
+
+
+
+
+ Datum
+ Belagda
+ Ur drift
+ Orsak
+ Lediga
+ Belaggning
+
+
+
+ {entries.map(e => {
+ const pct = totalRooms > 0 ? Math.round((e.roomsOccupied / totalRooms) * 100) : 0
+ const available = totalRooms - e.roomsOccupied - e.roomsOutOfOrder
+ return (
+
+ {e.date}
+ {e.roomsOccupied} / {totalRooms}
+ {e.roomsOutOfOrder}
+
+ {e.roomsOutOfOrder > 0 ? (e.reason ?? '-') : '-'}
+
+ {available}
+ {pct}%
+
+
+
openEditDialog(e)}>
+
+
openDeleteDialog(e.date)}>
+
+
+
+ )
+ })}
+
+
+
+ )}
+
+
+ {/* Edit entry dialog */}
+
+
+
+ Datum
+
+
+ Belagda rum
+
+
+ Ur drift
+
+
+ Orsak (ur drift)
+ setEditReason(val as OooReason)}>
+
+
+
+ {OOO_REASONS.map(r => (
+ {r}
+ ))}
+
+
+
+ {editExceedsTotal && (
+
+ Belagda rum ({editOccupiedNum}) + ur drift ({editOooNum}) = {editOccupiedNum + editOooNum} overstiger totalt antal rum ({totalRooms}).
+
+ )}
+
+
+ {/* Confirm delete dialog */}
+
+
+ {/* Settings dialog */}
+
+
+ Totalt antal rum
+
+
+
+ 0
+
+ )
+ }
+ const improving = higherIsBetter ? delta > 0 : delta < 0
return (
-
+ {delta > 0
+ ? {delta > 0 ? '+' : ''}{delta.toLocaleString('sv-SE')}
+
+ )
+}
+
+interface DailyEntry {
+ date: string
+ roomsSold: number
+ roomRevenue: number
+}
+
+function computeKPIs(entries: DailyEntry[], totalRooms: number) {
+ const totalRevenue = entries.reduce((s, e) => s + e.roomRevenue, 0)
+ const totalRoomsSold = entries.reduce((s, e) => s + e.roomsSold, 0)
+ const daysInRange = entries.length
+ const totalAvailableRooms = totalRooms * daysInRange
+
+ const revpar = totalAvailableRooms > 0
+ ? Math.round((totalRevenue / totalAvailableRooms) * 100) / 100
+ : 0
+ const adr = totalRoomsSold > 0
+ ? Math.round((totalRevenue / totalRoomsSold) * 100) / 100
+ : 0
+ const occupancyPct = totalAvailableRooms > 0
+ ? Math.round((totalRoomsSold / totalAvailableRooms) * 10000) / 100
+ : 0
+
+ return { totalRevenue, totalRoomsSold, revpar, adr, occupancyPct }
+}
+
+export default function RevparWorkspace({}: WorkspaceComponentProps) {
+ const now = new Date()
+ const [dateRange, setDateRange] = useState({
+ start: new Date(now.getFullYear(), now.getMonth(), 1).toISOString().slice(0, 10),
+ end: new Date(now.getFullYear(), now.getMonth() + 1, 0).toISOString().slice(0, 10),
+ })
+
+ const prevPeriod = useMemo(
+ () => computePreviousPeriod(dateRange.start, dateRange.end),
+ [dateRange.start, dateRange.end]
+ )
+
+ const { data, save, remove, refresh, isLoading } = useExtensionData('hotel', 'revpar')
+ const settings = data.find(d => d.key === 'settings')?.value as { totalRooms?: number } | undefined
+ const totalRooms = settings?.totalRooms ?? 0
+
+ // All daily entries (unfiltered by date, for period comparison)
+ const allEntries = useMemo(() =>
+ data.filter(d => d.key.startsWith('daily:'))
+ .map(d => ({
+ date: d.key.replace('daily:', ''),
+ ...(d.value as { roomsSold: number; roomRevenue: number }),
+ }))
+ , [data])
+
+ // Current period entries
+ const entries = useMemo(() =>
+ allEntries
+ .filter(e => e.date >= dateRange.start && e.date <= dateRange.end)
+ .sort((a, b) => b.date.localeCompare(a.date))
+ , [allEntries, dateRange])
+
+ // Previous period entries
+ const prevEntries = useMemo(() =>
+ allEntries
+ .filter(e => e.date >= prevPeriod.start && e.date <= prevPeriod.end)
+ , [allEntries, prevPeriod])
+
+ // Form state
+ const [entryDate, setEntryDate] = useState(now.toISOString().slice(0, 10))
+ const [roomsSold, setRoomsSold] = useState('')
+ const [roomRevenue, setRoomRevenue] = useState('')
+ const [isSubmitting, setIsSubmitting] = useState(false)
+
+ // Edit dialog state
+ const [editDialogOpen, setEditDialogOpen] = useState(false)
+ const [editDate, setEditDate] = useState('')
+ const [editRoomsSold, setEditRoomsSold] = useState('')
+ const [editRoomRevenue, setEditRoomRevenue] = useState('')
+ const [isSavingEdit, setIsSavingEdit] = useState(false)
+
+ // Delete dialog state
+ const [deleteDialogOpen, setDeleteDialogOpen] = useState(false)
+ const [deleteDate, setDeleteDate] = useState('')
+ const [isDeleting, setIsDeleting] = useState(false)
+
+ // Settings dialog state
+ const [settingsDialogOpen, setSettingsDialogOpen] = useState(false)
+ const [settingsRoomCount, setSettingsRoomCount] = useState('')
+ const [isSavingSettings, setIsSavingSettings] = useState(false)
+
+ // Current period KPIs
+ const current = computeKPIs(entries, totalRooms)
+
+ // Previous period KPIs
+ const prev = computeKPIs(prevEntries, totalRooms)
+
+ // --- Input validation ---
+ const roomsSoldNum = parseInt(roomsSold)
+ const roomRevenueNum = parseFloat(roomRevenue)
+ const roomsSoldError = roomsSold !== ''
+ ? validateMaxNumber(roomsSold, totalRooms)
+ ? `Kan inte overskrida ${totalRooms} rum`
+ : null
+ : null
+ const roomRevenueError = roomRevenue !== ''
+ ? validatePositiveNumber(roomRevenue)
+ : null
+ const formValid = !isNaN(roomsSoldNum)
+ && roomsSoldNum >= 0
+ && roomsSoldNum <= totalRooms
+ && !isNaN(roomRevenueNum)
+ && roomRevenueNum > 0
+
+ // Edit dialog validation
+ const editRoomsSoldNum = parseInt(editRoomsSold)
+ const editRoomRevenueNum = parseFloat(editRoomRevenue)
+ const editRoomsSoldError = editRoomsSold !== ''
+ ? validateMaxNumber(editRoomsSold, totalRooms)
+ ? `Kan inte overskrida ${totalRooms} rum`
+ : null
+ : null
+ const editRoomRevenueError = editRoomRevenue !== ''
+ ? validatePositiveNumber(editRoomRevenue)
+ : null
+ const editFormValid = !isNaN(editRoomsSoldNum)
+ && editRoomsSoldNum >= 0
+ && editRoomsSoldNum <= totalRooms
+ && !isNaN(editRoomRevenueNum)
+ && editRoomRevenueNum > 0
+
+ // Settings validation
+ const settingsRoomCountNum = parseInt(settingsRoomCount)
+ const settingsValid = !isNaN(settingsRoomCountNum) && settingsRoomCountNum > 0
+
+ // Monthly trend with all three metrics
+ const monthlyTrend = useMemo(() => {
+ const map = new Map()
+ for (const e of entries) {
+ const month = e.date.slice(0, 7)
+ const existing = map.get(month) ?? { revenue: 0, rooms: 0, days: 0 }
+ existing.revenue += e.roomRevenue
+ existing.rooms += e.roomsSold
+ existing.days++
+ map.set(month, existing)
+ }
+ return Array.from(map.entries())
+ .sort(([a], [b]) => a.localeCompare(b))
+ .map(([month, d]) => {
+ const available = totalRooms * d.days
+ return {
+ month,
+ revpar: available > 0 ? Math.round((d.revenue / available) * 100) / 100 : 0,
+ adr: d.rooms > 0 ? Math.round((d.revenue / d.rooms) * 100) / 100 : 0,
+ occupancy: available > 0 ? Math.round((d.rooms / available) * 10000) / 100 : 0,
+ }
+ })
+ }, [entries, totalRooms])
+
+ // --- Handlers ---
+
+ const handleSubmit = async (e: React.FormEvent) => {
+ e.preventDefault()
+ if (!formValid) return
+ setIsSubmitting(true)
+ await save(`daily:${entryDate}`, { roomsSold: roomsSoldNum, roomRevenue: roomRevenueNum })
+ setRoomsSold('')
+ setRoomRevenue('')
+ await refresh()
+ setIsSubmitting(false)
+ }
+
+ const openEditDialog = (entry: DailyEntry) => {
+ setEditDate(entry.date)
+ setEditRoomsSold(String(entry.roomsSold))
+ setEditRoomRevenue(String(entry.roomRevenue))
+ setEditDialogOpen(true)
+ }
+
+ const handleSaveEdit = async () => {
+ if (!editFormValid) return
+ setIsSavingEdit(true)
+ await save(`daily:${editDate}`, {
+ roomsSold: editRoomsSoldNum,
+ roomRevenue: editRoomRevenueNum,
+ })
+ await refresh()
+ setIsSavingEdit(false)
+ }
+
+ const openDeleteDialog = (date: string) => {
+ setDeleteDate(date)
+ setDeleteDialogOpen(true)
+ }
+
+ const handleConfirmDelete = async () => {
+ setIsDeleting(true)
+ await remove(`daily:${deleteDate}`)
+ setIsDeleting(false)
+ }
+
+ const openSettingsDialog = () => {
+ setSettingsRoomCount(String(totalRooms))
+ setSettingsDialogOpen(true)
+ }
+
+ const handleSaveSettings = async () => {
+ if (!settingsValid) return
+ setIsSavingSettings(true)
+ await save('settings', { totalRooms: settingsRoomCountNum })
+ await refresh()
+ setIsSavingSettings(false)
+ }
+
+ const handleSetup = async (values: Record) => {
+ await save('settings', { totalRooms: parseInt(values.totalRooms) || 0 })
+ }
+
+ if (isLoading) return
+
+ setDateRange({ start, end })} />
+
+
+
+
+ {/* KPI Cards with delta indicators */}
+
+
+
+ {/* Period comparison */}
+
+
Periodjamforelse
+
+
+
RevPAR
+
+
+ {current.revpar.toLocaleString('sv-SE')} kr
+
+
+
+ Foregaende: {prev.revpar.toLocaleString('sv-SE')} kr
+
+
+
+
ADR
+
+
+ {current.adr.toLocaleString('sv-SE')} kr
+
+
+
+ Foregaende: {prev.adr.toLocaleString('sv-SE')} kr
+
+
+
+
Belaggning
+
+
+ {current.occupancyPct}%
+
+
+
+ Foregaende: {prev.occupancyPct}%
+
+
+
+
+
+ Foregaende period: {prevPeriod.start} — {prevPeriod.end}
+
+
+
+
+ {/* Data entry form with validation */}
+
+
+
+ Datum
+
+
+
Rum salda
+
setRoomsSold(e.target.value)}
+ className={cn(roomsSoldError && 'border-red-500')}
+ />
+ {roomsSoldError && (
+
{roomsSoldError}
+ )}
+
+
+
Rumsintakt (kr)
+
setRoomRevenue(e.target.value)}
+ className={cn(roomRevenueError && 'border-red-500')}
+ />
+ {roomRevenueError && (
+
{roomRevenueError}
+ )}
+
+
+
+ {/* Monthly trend with RevPAR, ADR, Occupancy */}
+ {monthlyTrend.length > 0 && (
+
+
Manadstrend
+
+
+
+
+ Period
+ RevPAR
+ ADR
+ Belaggning
+
+
+
+ {monthlyTrend.map(row => (
+
+ {row.month}
+
+ {row.revpar.toLocaleString('sv-SE')} kr
+
+
+ {row.adr.toLocaleString('sv-SE')} kr
+
+
+ {row.occupancy}%
+
+
+ ))}
+
+
+
+
+ )}
+
+ {/* Daily data table with edit and delete */}
+
+
Daglig data
+ {entries.length === 0 ? (
+
Ingen data registrerad i vald period.
+ ) : (
+
+
+
+
+ Datum
+ Rum salda
+ Intakt
+ ADR
+
+
+
+ {entries.map(e => (
+
+ {e.date}
+
+ {e.roomsSold} / {totalRooms}
+
+
+ {e.roomRevenue.toLocaleString('sv-SE')} kr
+
+
+ {e.roomsSold > 0
+ ? Math.round(e.roomRevenue / e.roomsSold).toLocaleString('sv-SE')
+ : 0} kr
+
+
+
+
openEditDialog(e)}
+ >
+
+
openDeleteDialog(e.date)}
+ >
+
+
+
+ ))}
+
+
+
+ )}
+
+
+ {/* Edit entry dialog */}
+
+
+
+ Datum
+
+
+
Rum salda
+
setEditRoomsSold(e.target.value)}
+ className={cn(editRoomsSoldError && 'border-red-500')}
+ />
+ {editRoomsSoldError && (
+
{editRoomsSoldError}
+ )}
+
+
+
Rumsintakt (kr)
+
setEditRoomRevenue(e.target.value)}
+ className={cn(editRoomRevenueError && 'border-red-500')}
+ />
+ {editRoomRevenueError && (
+
{editRoomRevenueError}
+ )}
+
+
+
+ {/* Confirm delete dialog */}
+
+
+ {/* Settings dialog */}
+
+
+
Antal rum
+
setSettingsRoomCount(e.target.value)}
+ />
+ {settingsRoomCount !== '' && !settingsValid && (
+
Ange ett giltigt antal rum (minst 1)
+ )}
+
+
(0)
- const [totalLiters, setTotalLiters] = useState(0)
- const [totalRevenue, setTotalRevenue] = useState(0)
+const DEFAULT_CATEGORIES = ['Ol', 'Vin', 'Sprit']
- // Data entry state
- const [liters, setLiters] = useState('')
- const [entryDate, setEntryDate] = useState(new Date().toISOString().slice(0, 10))
- const [isSubmitting, setIsSubmitting] = useState(false)
+const DEFAULT_PRICING: Record = {
+ Ol: 80,
+ Vin: 120,
+ Sprit: 200,
+}
+interface LiterEntry {
+ id: string
+ date: string
+ category: string
+ liters: number
+}
+
+interface Pricing {
+ [category: string]: number
+}
+
+function DeltaIndicator({ current, previous }: { current: number; previous: number }) {
+ if (previous === 0) return
+
+ )
+ }
+ if (delta < 0) {
+ return (
+
+
+ )
+ }
+ return (
+
+
+ )
+}
+
+export default function EarningsPerLiterWorkspace({}: WorkspaceComponentProps) {
const now = new Date()
const [dateRange, setDateRange] = useState({
start: new Date(now.getFullYear(), now.getMonth(), 1).toISOString().slice(0, 10),
end: new Date(now.getFullYear(), now.getMonth() + 1, 0).toISOString().slice(0, 10),
})
- useEffect(() => {
- // In a real implementation, this would fetch liter entries and revenue data
- setIsLoading(false)
- }, [dateRange, userId])
+ const { data, save, remove, refresh, isLoading: dataLoading } = useExtensionData('restaurant', 'earnings-per-liter')
+
+ // Settings: categories
+ const settings = data.find(d => d.key === 'settings')?.value as { categories?: string[] } | undefined
+ const categories = settings?.categories ?? DEFAULT_CATEGORIES
+
+ // Pricing per category (kr per liter)
+ const pricingData = data.find(d => d.key === 'pricing')?.value as Pricing | undefined
+ const pricing: Pricing = useMemo(() => {
+ const base: Pricing = {}
+ for (const cat of categories) {
+ base[cat] = pricingData?.[cat] ?? DEFAULT_PRICING[cat] ?? 100
+ }
+ return base
+ }, [categories, pricingData])
+
+ // Entries filtered by date range
+ const entries: LiterEntry[] = useMemo(() =>
+ data.filter(d => d.key.startsWith('entry:'))
+ .map(d => ({
+ id: d.key,
+ ...(d.value as { date: string; category: string; liters: number }),
+ }))
+ .filter(e => e.date >= dateRange.start && e.date <= dateRange.end)
+ .sort((a, b) => b.date.localeCompare(a.date))
+ , [data, dateRange])
+
+ // Previous period entries for comparison
+ const prevPeriodEntries: LiterEntry[] = useMemo(() => {
+ const startDate = new Date(dateRange.start)
+ const endDate = new Date(dateRange.end)
+ const durationMs = endDate.getTime() - startDate.getTime()
+ const prevStart = new Date(startDate.getTime() - durationMs - 86400000)
+ const prevEnd = new Date(startDate.getTime() - 86400000)
+ const prevStartStr = prevStart.toISOString().slice(0, 10)
+ const prevEndStr = prevEnd.toISOString().slice(0, 10)
+ return data.filter(d => d.key.startsWith('entry:'))
+ .map(d => ({
+ id: d.key,
+ ...(d.value as { date: string; category: string; liters: number }),
+ }))
+ .filter(e => e.date >= prevStartStr && e.date <= prevEndStr)
+ }, [data, dateRange])
+
+ // Form state - single entry
+ const [entryDate, setEntryDate] = useState(now.toISOString().slice(0, 10))
+ const [category, setCategory] = useState(categories[0])
+ const [liters, setLiters] = useState('')
+ const [isSubmitting, setIsSubmitting] = useState(false)
+
+ // Batch entry mode
+ const [batchMode, setBatchMode] = useState(false)
+ const [batchDate, setBatchDate] = useState(now.toISOString().slice(0, 10))
+ const [batchLiters, setBatchLiters] = useState>({})
+ const [isBatchSubmitting, setIsBatchSubmitting] = useState(false)
+
+ // Edit state
+ const [editingEntry, setEditingEntry] = useState(null)
+ const [editDate, setEditDate] = useState('')
+ const [editCategory, setEditCategory] = useState('')
+ const [editLiters, setEditLiters] = useState('')
+ const [isSavingEdit, setIsSavingEdit] = useState(false)
+
+ // Delete confirmation state
+ const [deletingEntry, setDeletingEntry] = useState(null)
+ const [isDeleting, setIsDeleting] = useState(false)
+
+ // Category management state
+ const [newCategoryName, setNewCategoryName] = useState('')
+ const [editingPricing, setEditingPricing] = useState(false)
+ const [pricingInputs, setPricingInputs] = useState>({})
+
+ // Alcohol revenue from bookkeeping (accounts 3000-3999)
+ const { totalCredit: alcoholRevenue, isLoading: revenueLoading } = useAccountTotals({
+ from: '3000', to: '3999',
+ dateFrom: dateRange.start, dateTo: dateRange.end,
+ })
+
+ // Calculations
+ const totalLiters = entries.reduce((s, e) => s + e.liters, 0)
+ const earningsPerLiter = totalLiters > 0
+ ? Math.round((alcoholRevenue / totalLiters) * 100) / 100
+ : 0
+
+ // Estimated revenue based on pricing
+ const estimatedRevenue = useMemo(() => {
+ let total = 0
+ for (const e of entries) {
+ const price = pricing[e.category] ?? 100
+ total += e.liters * price
+ }
+ return Math.round(total * 100) / 100
+ }, [entries, pricing])
+
+ // Previous period calculations
+ const prevTotalLiters = prevPeriodEntries.reduce((s, e) => s + e.liters, 0)
+ const prevEstimatedRevenue = useMemo(() => {
+ let total = 0
+ for (const e of prevPeriodEntries) {
+ const price = pricing[e.category] ?? 100
+ total += e.liters * price
+ }
+ return Math.round(total * 100) / 100
+ }, [prevPeriodEntries, pricing])
+ const prevEarningsPerLiter = prevTotalLiters > 0
+ ? Math.round((prevEstimatedRevenue / prevTotalLiters) * 100) / 100
+ : 0
+
+ // Category breakdown with per-category revenue = liters x avg price
+ const categoryBreakdown = useMemo(() => {
+ const map = new Map()
+ for (const e of entries) {
+ map.set(e.category, (map.get(e.category) ?? 0) + e.liters)
+ }
+ return categories.map(cat => {
+ const catLiters = map.get(cat) ?? 0
+ const avgPrice = pricing[cat] ?? 100
+ const estimatedRev = Math.round(catLiters * avgPrice * 100) / 100
+ const eplCategory = catLiters > 0
+ ? Math.round((estimatedRev / catLiters) * 100) / 100
+ : 0
+ return {
+ category: cat,
+ liters: catLiters,
+ avgPrice,
+ estimatedRevenue: estimatedRev,
+ earningsPerLiter: eplCategory,
+ }
+ })
+ }, [entries, categories, pricing])
+
+ // Monthly trend
+ const monthlyTrend = useMemo(() => {
+ const map = new Map()
+ for (const e of entries) {
+ const month = e.date.slice(0, 7)
+ map.set(month, (map.get(month) ?? 0) + e.liters)
+ }
+ return Array.from(map.entries())
+ .sort(([a], [b]) => a.localeCompare(b))
+ .map(([month, liters]) => ({ month, value: liters }))
+ }, [entries])
+
+ // --- Handlers ---
const handleSubmit = async (e: React.FormEvent) => {
e.preventDefault()
+ const val = parseFloat(liters)
+ if (isNaN(val) || val <= 0) return
setIsSubmitting(true)
- // In a real implementation, this would save the liter entry via API
- setIsSubmitting(false)
+ const id = crypto.randomUUID()
+ await save(`entry:${id}`, { date: entryDate, category, liters: val })
setLiters('')
+ await refresh()
+ setIsSubmitting(false)
}
- if (isLoading) return = {}
+ for (const cat of categories) {
+ inputs[cat] = String(pricing[cat] ?? 100)
+ }
+ setPricingInputs(inputs)
+ setEditingPricing(true)
+ }
+
+ if (dataLoading || revenueLoading) return
-
setDateRange({ start, end })}
- />
+
+
+ Registrera
+ Oversikt
+ Installningar
+
-
-
+ {/* ---- REGISTER TAB ---- */}
+
+ setDateRange({ start, end })} />
-
-
-
-
Datum
-
setEntryDate(e.target.value)}
+ {/* KPI row */}
+
+ 0 ? {
+ value: Math.round(((earningsPerLiter - prevEarningsPerLiter) / prevEarningsPerLiter) * 10000) / 100,
+ label: 'mot foreg. period',
+ } : undefined}
+ />
+ 0 ? {
+ value: Math.round(((totalLiters - prevTotalLiters) / prevTotalLiters) * 10000) / 100,
+ label: 'mot foreg. period',
+ } : undefined}
+ />
+
+
+ {/* Revenue comparison */}
+ {estimatedRevenue > 0 && alcoholRevenue > 0 && (
+
+
+
+
Uppskattad vs bokford intakt
+
+ Differens baserat pa snittkr/liter per kategori
+
+
+
+
+ {(Math.round((estimatedRevenue - alcoholRevenue) * 100) / 100).toLocaleString('sv-SE')} kr
+
+
+
+
+
+ )}
+
+ {/* Single entry form / batch mode toggle */}
+
+ setBatchMode(!batchMode)}
+ >
+ {batchMode ? 'Enkel registrering' : 'Registrera flera'}
+
+
+
+ {batchMode ? (
+
+
+
+ Datum
+
+
+ {categories.map(cat => (
+
+
+ {cat} (liter)
+
+
+ ))}
+
+
+ ) : (
+
+
+
+ Datum
+
+
+ Kategori
+
+
+ {categories.map(c => {c} )}
+
+
+
+
+ Antal liter
+
+
+ )}
+
+ {/* Entry history */}
+
+
Senaste registreringar
+ {entries.length === 0 ? (
+
Inga registreringar i vald period.
+ ) : (
+
+
+
+
+ Datum
+ Kategori
+ Liter
+ Uppsk. intakt
+
+
+
+ {entries.slice(0, 20).map(e => {
+ const entryRevenue = Math.round(e.liters * (pricing[e.category] ?? 100) * 100) / 100
+ return (
+
+ {e.date}
+ {e.category}
+ {e.liters.toLocaleString('sv-SE')} l
+ {entryRevenue.toLocaleString('sv-SE')} kr
+
+
+
openEdit(e)}>
+
+
setDeletingEntry(e)}>
+
+
+
+ )
+ })}
+
+
+
+ )}
+
+
+
+ {/* ---- OVERVIEW TAB ---- */}
+
+ setDateRange({ start, end })} />
+
+ {/* Period comparison KPIs */}
+
+
+
Intakt/liter (nuvarande)
+
{earningsPerLiter.toLocaleString('sv-SE')} kr/l
+ {prevEarningsPerLiter > 0 && (
+
+ Foreg: {prevEarningsPerLiter.toLocaleString('sv-SE')} kr/l
+
+ )}
+
+
+
Liter (nuvarande)
+
{(Math.round(totalLiters * 100) / 100).toLocaleString('sv-SE')} l
+ {prevTotalLiters > 0 && (
+
+ Foreg: {(Math.round(prevTotalLiters * 100) / 100).toLocaleString('sv-SE')} l
+
+ )}
+
+
+
Uppsk. intakt (nuvarande)
+
{estimatedRevenue.toLocaleString('sv-SE')} kr
+ {prevEstimatedRevenue > 0 && (
+
+ Foreg: {prevEstimatedRevenue.toLocaleString('sv-SE')} kr
+
+ )}
+
+
+
Per kategori
+
+
+
+
+ Kategori
+ Liter
+ Snittpris/l
+ Uppsk. intakt
+ Kr/liter
+
+
+
+ {categoryBreakdown.map(c => (
+
+ {c.category}
+ {c.liters.toLocaleString('sv-SE')} l
+ {c.avgPrice.toLocaleString('sv-SE')} kr
+ {c.estimatedRevenue.toLocaleString('sv-SE')} kr
+ {c.earningsPerLiter.toLocaleString('sv-SE')} kr/l
+
+ ))}
+
+ Totalt
+ {(Math.round(totalLiters * 100) / 100).toLocaleString('sv-SE')} l
+ {estimatedRevenue.toLocaleString('sv-SE')} kr
+ {earningsPerLiter.toLocaleString('sv-SE')} kr/l
+
+
+
+
+
+
Manadstrend
+
+
+ {/* ---- SETTINGS TAB ---- */}
+
+ {/* Category management */}
+
+
+
Kategorier
+
Lagg till, ta bort eller byt namn pa dryckkategorier.
+
+
+
+
setNewCategoryName(e.target.value)}
+ onKeyDown={e => e.key === 'Enter' && handleAddCategory()}
+ className="max-w-xs"
+ />
+
+
+
+
+ {categories.length > 0 && (
+
+
+
+
+ Namn
+
+
+
+ {categories.map(cat => (
+ 1}
+ onRename={(newName) => handleRenameCategory(cat, newName)}
+ onRemove={() => handleRemoveCategory(cat)}
+ />
+ ))}
+
+
+
+ )}
+
+
+
+
Snittpris per liter
+
+ Anvands for att berakna uppskattad intakt per kategori.
+
+
+ {!editingPricing && (
+
+
+ )}
+
+
+ {editingPricing ? (
+
+
+ {categories.map(cat => (
+
+ {cat} (kr/liter)
+
+ ))}
+
+
+ Spara
+ setEditingPricing(false)}>Avbryt
+
+
+ ) : (
+
+
+
+
+ Kategori
+ Pris (kr/l)
+
+
+
+ {categories.map(cat => (
+
+ {cat}
+ {(pricing[cat] ?? 100).toLocaleString('sv-SE')} kr
+
+ ))}
+
+
+
+ )}
+
+
+
+ {/* Edit entry dialog */}
+
{ if (!open) setEditingEntry(null) }}
+ title="Redigera registrering"
+ description="Andra datum, kategori eller antal liter."
+ onSave={handleSaveEdit}
+ isSaving={isSavingEdit}
+ >
+
-
+
-
-
Så fungerar det
-
- Intäkt per liter beräknas genom att dividera alkoholintäkter med totalt antal sålda
- liter. Registrera daglig literförsäljning ovan. Alkoholintäkter hämtas automatiskt
- från bokföringen.
-
-
+ {/* Delete confirmation dialog */}
+
{ if (!open) setDeletingEntry(null) }}
+ title="Ta bort registrering"
+ description={deletingEntry ? `Vill du ta bort ${deletingEntry.liters} l ${deletingEntry.category} fran ${deletingEntry.date}?` : ''}
+ onConfirm={handleConfirmDelete}
+ isDeleting={isDeleting}
+ />
)
}
+
+// Inline sub-component for category row with rename support
+function CategoryRow({
+ name,
+ canRemove,
+ onRename,
+ onRemove,
+}: {
+ name: string
+ canRemove: boolean
+ onRename: (newName: string) => Promise
+ onRemove: () => Promise
+}) {
+ const [isRenaming, setIsRenaming] = useState(false)
+ const [newName, setNewName] = useState(name)
+
+ const handleRename = async () => {
+ await onRename(newName)
+ setIsRenaming(false)
+ }
+
+ return (
+
+
+ {isRenaming ? (
+
+ Spara
+ { setIsRenaming(false); setNewName(name) }}>Avbryt
+
+ ) : (
+ {name}
+ )}
+
+
+
+ {!isRenaming && (
+
setIsRenaming(true)}>
+
+ )}
+ {canRemove && !isRenaming && (
+
+
+ )}
+
+
+ )
+}
diff --git a/components/extensions/restaurant/FoodCostWorkspace.tsx b/components/extensions/restaurant/FoodCostWorkspace.tsx
index 6312c1da..1ae12642 100644
--- a/components/extensions/restaurant/FoodCostWorkspace.tsx
+++ b/components/extensions/restaurant/FoodCostWorkspace.tsx
@@ -1,64 +1,552 @@
'use client'
-import { useState, useEffect } from 'react'
+import { useState, useMemo, useCallback } from 'react'
import type { WorkspaceComponentProps } from '@/lib/extensions/workspace-registry'
+import { useAccountTotals } from '@/lib/extensions/use-account-totals'
+import { useExtensionData } from '@/lib/extensions/use-extension-data'
import KPICard from '@/components/extensions/shared/KPICard'
import DateRangeFilter from '@/components/extensions/shared/DateRangeFilter'
+import MonthlyTrendTable from '@/components/extensions/shared/MonthlyTrendTable'
import ExtensionLoadingSkeleton from '@/components/extensions/shared/ExtensionLoadingSkeleton'
+import ConfirmDeleteDialog from '@/components/extensions/shared/ConfirmDeleteDialog'
+import EditEntryDialog from '@/components/extensions/shared/EditEntryDialog'
+import { Input } from '@/components/ui/input'
+import { Label } from '@/components/ui/label'
+import { Button } from '@/components/ui/button'
+import { Textarea } from '@/components/ui/textarea'
+import {
+ Select, SelectContent, SelectItem, SelectTrigger, SelectValue,
+} from '@/components/ui/select'
+import {
+ Table, TableBody, TableCell, TableHead, TableHeader, TableRow,
+} from '@/components/ui/table'
+import { ArrowUp, ArrowDown, Minus } from 'lucide-react'
+import { cn } from '@/lib/utils'
-export default function FoodCostWorkspace({ userId }: WorkspaceComponentProps) {
- const [isLoading, setIsLoading] = useState(true)
- const [foodCost, setFoodCost] = useState(0)
- const [revenue, setRevenue] = useState(0)
- const [purchases, setPurchases] = useState(0)
+const FOOD_CATEGORIES = ['Kott', 'Fisk', 'Gronsaker', 'Mejeri', 'Drycker', 'Ovrigt'] as const
+type FoodCategory = typeof FOOD_CATEGORIES[number]
- // Set initial date range to current month
+function computePreviousPeriod(start: string, end: string): { start: string; end: string } {
+ const startDate = new Date(start + 'T00:00:00')
+ const endDate = new Date(end + 'T00:00:00')
+ const durationMs = endDate.getTime() - startDate.getTime()
+ const prevEnd = new Date(startDate.getTime() - 1)
+ const prevStart = new Date(prevEnd.getTime() - durationMs)
+ return {
+ start: prevStart.toISOString().slice(0, 10),
+ end: prevEnd.toISOString().slice(0, 10),
+ }
+}
+
+function DeltaArrow({ current, previous }: { current: number; previous: number }) {
+ const delta = Math.round((current - previous) * 100) / 100
+ if (delta === 0 || (previous === 0 && current === 0)) {
+ return (
+
+ 0 pp
+
+ )
+ }
+ // For food cost: lower is better, so negative delta = green (improving)
+ const improving = delta < 0
+ return (
+
+ {delta < 0
+ ? {delta > 0 ? '+' : ''}{delta} pp
+
+ )
+}
+
+export default function FoodCostWorkspace({}: WorkspaceComponentProps) {
const now = new Date()
const [dateRange, setDateRange] = useState({
start: new Date(now.getFullYear(), now.getMonth(), 1).toISOString().slice(0, 10),
end: new Date(now.getFullYear(), now.getMonth() + 1, 0).toISOString().slice(0, 10),
})
- useEffect(() => {
- // In a real implementation, this would fetch journal_entry_lines
- // and calculate food cost via the API
- setIsLoading(false)
- }, [dateRange, userId])
+ const prevPeriod = useMemo(
+ () => computePreviousPeriod(dateRange.start, dateRange.end),
+ [dateRange.start, dateRange.end]
+ )
+
+ // Yearly range for monthly trend
+ const yearStart = `${now.getFullYear()}-01-01`
+ const yearEnd = `${now.getFullYear()}-12-31`
+
+ const { data: extData, save, remove, isLoading: settingsLoading } = useExtensionData('restaurant', 'food-cost')
+ const settings = extData.find(d => d.key === 'settings')?.value as { targetPct?: number } | undefined
+
+ const [targetPctInput, setTargetPct] = useState(null)
+ const [editingTarget, setEditingTarget] = useState(false)
+ const targetPct = targetPctInput ?? (settings?.targetPct != null ? String(settings.targetPct) : '')
+
+ // Category assignments from extension_data (key = "category:{accountNumber}")
+ const categoryMap = useMemo(() => {
+ const map: Record = {}
+ for (const d of extData) {
+ if (d.key.startsWith('category:')) {
+ const account = d.key.replace('category:', '')
+ map[account] = (d.value as { category: FoodCategory }).category
+ }
+ }
+ return map
+ }, [extData])
+
+ // Notes from extension_data (key = "note:YYYY-MM")
+ const currentMonth = dateRange.start.slice(0, 7)
+ const currentNote = extData.find(d => d.key === `note:${currentMonth}`)?.value as { text: string } | undefined
+ const [noteText, setNoteText] = useState('')
+ const [editingNote, setEditingNote] = useState(false)
+ const [savingNote, setSavingNote] = useState(false)
+ const [deleteNoteOpen, setDeleteNoteOpen] = useState(false)
+ const [deletingNote, setDeletingNote] = useState(false)
+
+ // Target edit dialog state
+ const [editTargetDialogOpen, setEditTargetDialogOpen] = useState(false)
+ const [newTargetInput, setNewTargetInput] = useState('')
+ const [savingTarget, setSavingTarget] = useState(false)
+
+ // --- Current period account totals ---
+ const { totals: purchaseTotals, isLoading: purchasesLoading } = useAccountTotals({
+ from: '4000', to: '4999',
+ dateFrom: dateRange.start, dateTo: dateRange.end,
+ })
+ const { totals: revenueTotals, isLoading: revenueLoading } = useAccountTotals({
+ from: '3000', to: '3999',
+ dateFrom: dateRange.start, dateTo: dateRange.end,
+ })
+
+ // --- Previous period account totals ---
+ const { totals: prevPurchaseTotals, isLoading: prevPurchasesLoading } = useAccountTotals({
+ from: '4000', to: '4999',
+ dateFrom: prevPeriod.start, dateTo: prevPeriod.end,
+ })
+ const { totals: prevRevenueTotals, isLoading: prevRevenueLoading } = useAccountTotals({
+ from: '3000', to: '3999',
+ dateFrom: prevPeriod.start, dateTo: prevPeriod.end,
+ })
+
+ // Monthly trend data
+ const { monthly: purchaseMonthly } = useAccountTotals({
+ from: '4000', to: '4999',
+ dateFrom: yearStart, dateTo: yearEnd,
+ groupBy: 'month',
+ })
+ const { monthly: revenueMonthly } = useAccountTotals({
+ from: '3000', to: '3999',
+ dateFrom: yearStart, dateTo: yearEnd,
+ groupBy: 'month',
+ })
+
+ // Current period calculations
+ const totalPurchases = purchaseTotals.reduce((sum, t) => sum + t.debit, 0)
+ const totalRevenue = revenueTotals.reduce((sum, t) => sum + t.credit, 0)
+ const foodCostPct = totalRevenue > 0
+ ? Math.round((totalPurchases / totalRevenue) * 10000) / 100
+ : 0
+
+ // Previous period calculations
+ const prevTotalPurchases = prevPurchaseTotals.reduce((sum, t) => sum + t.debit, 0)
+ const prevTotalRevenue = prevRevenueTotals.reduce((sum, t) => sum + t.credit, 0)
+ const prevFoodCostPct = prevTotalRevenue > 0
+ ? Math.round((prevTotalPurchases / prevTotalRevenue) * 10000) / 100
+ : 0
+
+ const target = settings?.targetPct ?? 30
+
+ // Monthly trend rows
+ const monthlyTrend = useMemo(() => {
+ const months = new Set([
+ ...purchaseMonthly.map(m => m.month),
+ ...revenueMonthly.map(m => m.month),
+ ])
+ return Array.from(months).sort().map(month => {
+ const purch = purchaseMonthly.filter(m => m.month === month).reduce((s, m) => s + m.debit, 0)
+ const rev = revenueMonthly.filter(m => m.month === month).reduce((s, m) => s + m.credit, 0)
+ const pct = rev > 0 ? Math.round((purch / rev) * 10000) / 100 : 0
+ return { month, value: pct }
+ })
+ }, [purchaseMonthly, revenueMonthly])
+
+ // Category breakdown
+ const categoryBreakdown = useMemo(() => {
+ const groups: Record = {}
+ for (const cat of FOOD_CATEGORIES) {
+ groups[cat] = { category: cat, total: 0, accounts: [] }
+ }
+ let uncategorizedTotal = 0
+ const uncategorizedAccounts: string[] = []
+
+ for (const t of purchaseTotals) {
+ const cat = categoryMap[t.account_number]
+ if (cat && groups[cat]) {
+ groups[cat].total += t.debit
+ groups[cat].accounts.push(t.account_number)
+ } else {
+ uncategorizedTotal += t.debit
+ uncategorizedAccounts.push(t.account_number)
+ }
+ }
+
+ const result = FOOD_CATEGORIES
+ .map(cat => groups[cat])
+ .filter(g => g.total > 0 || g.accounts.length > 0)
+
+ if (uncategorizedTotal > 0) {
+ result.push({ category: 'Ovrigt' as FoodCategory, total: uncategorizedTotal, accounts: uncategorizedAccounts })
+ }
+
+ return result
+ }, [purchaseTotals, categoryMap])
+
+ // --- Handlers ---
+
+ const saveTarget = async () => {
+ const val = parseFloat(targetPct)
+ if (!isNaN(val)) {
+ // Save target history before changing
+ const oldTarget = settings?.targetPct
+ if (oldTarget != null && oldTarget !== val) {
+ await save(`target-history:${Date.now()}`, {
+ previousTarget: oldTarget,
+ newTarget: val,
+ changedAt: new Date().toISOString(),
+ })
+ }
+ await save('settings', { targetPct: val })
+ setEditingTarget(false)
+ }
+ }
+
+ const handleSaveTargetDialog = async () => {
+ setSavingTarget(true)
+ const val = parseFloat(newTargetInput)
+ if (!isNaN(val)) {
+ const oldTarget = settings?.targetPct
+ if (oldTarget != null && oldTarget !== val) {
+ await save(`target-history:${Date.now()}`, {
+ previousTarget: oldTarget,
+ newTarget: val,
+ changedAt: new Date().toISOString(),
+ })
+ }
+ await save('settings', { targetPct: val })
+ }
+ setSavingTarget(false)
+ }
+
+ const handleCategoryChange = useCallback(async (accountNumber: string, category: string) => {
+ if (category === '__none__') {
+ await remove(`category:${accountNumber}`)
+ } else {
+ await save(`category:${accountNumber}`, { category })
+ }
+ }, [save, remove])
+
+ const handleSaveNote = async () => {
+ setSavingNote(true)
+ await save(`note:${currentMonth}`, { text: noteText })
+ setEditingNote(false)
+ setSavingNote(false)
+ }
+
+ const handleDeleteNote = async () => {
+ setDeletingNote(true)
+ await remove(`note:${currentMonth}`)
+ setNoteText('')
+ setEditingNote(false)
+ setDeletingNote(false)
+ }
+
+ const startEditNote = () => {
+ setNoteText(currentNote?.text ?? '')
+ setEditingNote(true)
+ }
+
+ const isLoading = purchasesLoading || revenueLoading || prevPurchasesLoading || prevRevenueLoading || settingsLoading
if (isLoading) return
-
setDateRange({ start, end })}
- />
+ setDateRange({ start, end })} />
+ {/* KPI Cards with period comparison */}
-
-
Så fungerar det
-
- Food Cost % beräknas automatiskt utifrån din bokföring. Varuinköp (konton 4000-4999)
- divideras med livsmedelsintäkter (konton 3000-3999). En bra riktvärde för restauranger
- är 25-35%.
-
+ {/* Period comparison */}
+
+
Periodjamforelse
+
+
+
Food Cost % (nuvarande)
+
+ {foodCostPct}%
+
+
+
+
Food Cost % (foregaende)
+
{prevFoodCostPct}%
+
+
+
Foregaende period
+
{prevPeriod.start} — {prevPeriod.end}
+
+
+
+
+
Varuinkop (foregaende)
+
{prevTotalPurchases.toLocaleString('sv-SE')} kr
+
+
+
Intakter (foregaende)
+
{prevTotalRevenue.toLocaleString('sv-SE')} kr
+
+
+
+ {/* Target setting */}
+
+
+
+
Malvarde
+
+ Riktvarde for food cost (vanligtvis 25-35%)
+
+
+ {editingTarget ? (
+
+ %
+ Spara
+ setEditingTarget(false)}>Avbryt
+
+ ) : (
+
{
+ setNewTargetInput(String(target))
+ setEditTargetDialogOpen(true)
+ }}
+ >
+ {target}% — Andra
+
+ )}
+
+
+
+ {/* Edit target dialog (saves history) */}
+
+
+ Nytt malvarde (%)
+
+
+
+ {/* Notes per period */}
+
+
+
+
Anteckningar for {currentMonth}
+
+ Notera avvikelser och forklaringar for perioden
+
+
+ {!editingNote && (
+
+ {currentNote?.text ? 'Redigera' : 'Lagg till'}
+
+ )}
+
+ {editingNote ? (
+
+