feat: Add 4 major features to BOC Dashboard

1. Balance Sheet Chart — grafisk visning med progress bars - Assets (grön), Liabilities (röd), Equity (blå) - Balance check längst ner 2. Period-väljare — dropdown för månadsval - 2026-02, 2026-03, 2026-04 3. Drill-down — klicka på konto för transaktionshistorik - Modal med Date, Description, Debit, Credit, Balance - Mock data (ersätt med API-anrop) 4. Export-knappar — SIE4, PDF, CSV - Download-funktionalitet - Loading-tillstånd Alla komponenter bygger och integreras i DashboardPage.
2026-07-29 20:17:34 +00:00
parent f793fc46a4
commit dd145bc3d9
9 changed files with 791 additions and 467 deletions
@@ -0,0 +1,105 @@
+import { useState, useEffect } from 'react'
+import { Card, CardHeader } from '@/components/ui/Card'
+import {
+  Table,
+  TableHead,
+  TableBody,
+  TableRow,
+  TableHeader,
+  TableCell,
+} from '@/components/ui/Table'
+
+interface Transaction {
+  id: string
+  date: string
+  description: string
+  debit: number
+  credit: number
+  balance: number
+}
+
+interface AccountDetailModalProps {
+  accountCode: string
+  accountName: string
+  onClose: () => void
+}
+
+export function AccountDetailModal({ accountCode, accountName, onClose }: AccountDetailModalProps) {
+  const [transactions, setTransactions] = useState<Transaction[]>([])
+  const [loading, setLoading] = useState(true)
+
+  useEffect(() => {
+    // Mock data - replace with actual API call
+    const mockTransactions: Transaction[] = [
+      { id: '1', date: '2026-02-01', description: 'Opening balance', debit: 0, credit: 0, balance: 44313 },
+      { id: '2', date: '2026-02-15', description: 'Purchase - Dell laptops', debit: 25000, credit: 0, balance: 69313 },
+      { id: '3', date: '2026-02-20', description: 'Depreciation', debit: 0, credit: 25000, balance: 44313 },
+    ]
+    setTransactions(mockTransactions)
+    setLoading(false)
+  }, [accountCode])
+
+  return (
+    <div className="fixed inset-0 bg-black/50 flex items-center justify-center z-50">
+      <div className="bg-surface rounded-lg w-full max-w-4xl max-h-[80vh] overflow-auto">
+        <Card>
+          <CardHeader
+            title={`${accountCode} - ${accountName}`}
+            subtitle="Transaction History"
+            action={
+              <button
+                onClick={onClose}
+                className="text-sm text-primary hover:underline"
+              >
+                Close
+              </button>
+            }
+          />
+          <div className="p-6">
+            {loading ? (
+              <div className="text-center py-8">Loading...</div>
+            ) : (
+              <Table>
+                <TableHeader>
+                  <TableRow>
+                    <TableHead>Date</TableHead>
+                    <TableHead>Description</TableHead>
+                    <TableHead className="text-right">Debit</TableHead>
+                    <TableHead className="text-right">Credit</TableHead>
+                    <TableHead className="text-right">Balance</TableHead>
+                  </TableRow>
+                </TableHeader>
+                <TableBody>
+                  {transactions.map((tx) => (
+                    <TableRow key={tx.id}>
+                      <TableCell>{tx.date}</TableCell>
+                      <TableCell>{tx.description}</TableCell>
+                      <TableCell className="text-right text-success">
+                        {tx.debit > 0 ? formatCurrency(tx.debit) : '-'}
+                      </TableCell>
+                      <TableCell className="text-right text-danger">
+                        {tx.credit > 0 ? formatCurrency(tx.credit) : '-'}
+                      </TableCell>
+                      <TableCell className="text-right font-medium">
+                        {formatCurrency(tx.balance)}
+                      </TableCell>
+                    </TableRow>
+                  ))}
+                </TableBody>
+              </Table>
+            )}
+          </div>
+        </Card>
+      </div>
+    </div>
+  )
+}
+
+function formatCurrency(value: number): string {
+  return new Intl.NumberFormat('sv-SE', {
+    style: 'currency',
+    currency: 'SEK',
+    minimumFractionDigits: 0,
+    maximumFractionDigits: 0,
+  }).format(value)
+}