diff --git a/apps/api/src/routes.js b/apps/api/src/routes.js
index db0b8c4..3977703 100644
--- a/apps/api/src/routes.js
+++ b/apps/api/src/routes.js
@@ -1437,7 +1437,12 @@ apiRouter.get('/transaction-categories', requireAuth, (req, res) => {
       type,
       name,
       is_active AS isActive,
-      sort_order AS sortOrder
+      sort_order AS sortOrder,
+      (
+        SELECT COUNT(*)
+        FROM transactions
+        WHERE transactions.category_id = transaction_categories.id
+      ) AS transactionCount
     FROM transaction_categories
     ${where}
     ORDER BY type ASC, sort_order ASC, name ASC
@@ -1485,7 +1490,16 @@ apiRouter.put('/transaction-categories/:id', requireAuth, requireRole('ADMIN'),
     return res.status(422).json({ message: 'Kategori belum valid.', errors: parsed.error.flatten().fieldErrors });
   }
 
-  const existing = db.prepare('SELECT id FROM transaction_categories WHERE id = ?').get(req.params.id);
+  const existing = db.prepare(`
+    SELECT
+      id,
+      type,
+      name,
+      is_active AS isActive,
+      sort_order AS sortOrder
+    FROM transaction_categories
+    WHERE id = ?
+  `).get(req.params.id);
   if (!existing) return res.status(404).json({ message: 'Kategori tidak ditemukan.' });
 
   try {
@@ -1500,7 +1514,20 @@ apiRouter.put('/transaction-categories/:id', requireAuth, requireRole('ADMIN'),
       action: 'TRANSACTION_CATEGORY_UPDATE',
       entityType: 'TRANSACTION_CATEGORY',
       entityId: existing.id,
-      details: { type: input.type, name: input.name, isActive: input.isActive }
+      details: {
+        before: {
+          type: existing.type,
+          name: existing.name,
+          isActive: Boolean(existing.isActive),
+          sortOrder: existing.sortOrder
+        },
+        after: {
+          type: input.type,
+          name: input.name,
+          isActive: input.isActive,
+          sortOrder: input.sortOrder
+        }
+      }
     });
 
     return res.json({ id: existing.id });
diff --git a/apps/web/src/components/settings/CategorySettings.jsx b/apps/web/src/components/settings/CategorySettings.jsx
index a5b991f..f207c99 100644
--- a/apps/web/src/components/settings/CategorySettings.jsx
+++ b/apps/web/src/components/settings/CategorySettings.jsx
@@ -1,10 +1,9 @@
 import { useState } from 'react';
-import { IconDots, IconPlus } from '@tabler/icons-react';
+import { IconPlus } from '@tabler/icons-react';
 import { toast } from 'sonner';
 import { Button } from '@/components/ui/button';
 import { Badge } from '@/components/ui/badge';
 import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle } from '@/components/ui/dialog';
-import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from '@/components/ui/dropdown-menu';
 import { Field, FieldGroup, FieldLabel } from '@/components/ui/field';
 import { Input } from '@/components/ui/input';
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
@@ -51,25 +50,33 @@ export function CategorySettings({ categories, api, reload }) {
   return (
     <section className="overflow-hidden rounded-xl border bg-card">
       <div className="flex flex-col gap-3 border-b bg-muted/25 px-4 py-4 sm:flex-row sm:items-center sm:justify-between sm:px-5">
-        <div><h2 className="text-lg font-semibold">Kategori</h2><p className="mt-1 text-sm text-muted-foreground">Kelola kategori kas masuk dan kas keluar.</p></div>
+        <div><h2 className="text-lg font-semibold">Kategori</h2><p className="mt-1 text-sm text-muted-foreground">Nonaktifkan kategori yang tidak dipakai lagi. Transaksi lama tetap tersimpan dan tetap dapat diaudit.</p></div>
         <Button className="w-full sm:w-auto" onClick={() => setOpen(true)}><IconPlus />Tambah kategori</Button>
       </div>
       <Table>
-        <TableHeader><TableRow><TableHead>Nama</TableHead><TableHead>Jenis</TableHead><TableHead>Urutan</TableHead><TableHead>Status</TableHead><TableHead className="w-16" /></TableRow></TableHeader>
+        <TableHeader><TableRow><TableHead>Nama</TableHead><TableHead>Jenis</TableHead><TableHead>Urutan</TableHead><TableHead>Transaksi</TableHead><TableHead>Status</TableHead><TableHead className="w-32">Aksi</TableHead></TableRow></TableHeader>
         <TableBody>
           {categories.map((category) => <TableRow key={category.id}>
             <TableCell className="font-medium">{category.name}</TableCell>
             <TableCell>{category.type === 'INCOME' ? 'Kas Masuk' : 'Kas Keluar'}</TableCell>
             <TableCell>{category.sortOrder}</TableCell>
+            <TableCell>
+              <span className="text-sm font-medium">{category.transactionCount ?? 0}</span>
+              <span className="ml-1 text-xs text-muted-foreground">tercatat</span>
+            </TableCell>
             <TableCell><Badge variant={category.isActive ? 'success' : 'outline'}>{category.isActive ? 'Aktif' : 'Nonaktif'}</Badge></TableCell>
             <TableCell>
-              <DropdownMenu>
-                <DropdownMenuTrigger asChild><Button variant="ghost" size="icon-sm" aria-label={`Aksi ${category.name}`}><IconDots /></Button></DropdownMenuTrigger>
-                <DropdownMenuContent align="end"><DropdownMenuItem onSelect={() => toggle(category)}>{category.isActive ? 'Nonaktifkan' : 'Aktifkan'}</DropdownMenuItem></DropdownMenuContent>
-              </DropdownMenu>
+              <Button
+                type="button"
+                variant={category.isActive ? 'outline' : 'secondary'}
+                size="sm"
+                onClick={() => toggle(category)}
+              >
+                {category.isActive ? 'Nonaktifkan' : 'Aktifkan'}
+              </Button>
             </TableCell>
           </TableRow>)}
-          {categories.length === 0 && <TableRow><TableCell colSpan={5} className="py-10 text-center text-muted-foreground">Belum ada kategori.</TableCell></TableRow>}
+          {categories.length === 0 && <TableRow><TableCell colSpan={6} className="py-10 text-center text-muted-foreground">Belum ada kategori.</TableCell></TableRow>}
         </TableBody>
       </Table>
 
diff --git a/apps/web/src/components/settings/SettingsNav.jsx b/apps/web/src/components/settings/SettingsNav.jsx
index 88fd3f5..2d48dbe 100644
--- a/apps/web/src/components/settings/SettingsNav.jsx
+++ b/apps/web/src/components/settings/SettingsNav.jsx
@@ -26,7 +26,7 @@ export function SettingsNav({ value, onChange }) {
             key={id}
             type="button"
             onClick={() => onChange(id)}
-            className={`flex w-full appearance-none items-center rounded-r-md border-0 border-l-2 bg-transparent px-3 py-2.5 text-left text-sm transition-colors ${value === id ? 'border-primary font-semibold text-foreground' : 'border-transparent font-medium text-muted-foreground hover:border-border hover:bg-muted/60 hover:text-foreground'}`}
+            className={`flex w-full appearance-none items-center rounded-r-md border-0 border-l-2 bg-transparent px-3 py-2.5 text-left text-sm transition-colors ${value === id ? 'border-primary bg-accent/35 font-semibold text-foreground' : 'border-transparent font-medium text-muted-foreground hover:border-border hover:bg-muted/60 hover:text-foreground'}`}
           >
             {label}
           </button>
diff --git a/apps/web/src/components/ui/button.jsx b/apps/web/src/components/ui/button.jsx
index f24853f..2135f61 100644
--- a/apps/web/src/components/ui/button.jsx
+++ b/apps/web/src/components/ui/button.jsx
@@ -11,9 +11,9 @@ const buttonVariants = cva(
         default: 'bg-primary px-4 text-primary-foreground hover:bg-primary/92',
         secondary: 'border border-transparent bg-secondary px-4 text-secondary-foreground hover:border-border hover:bg-secondary/80',
         outline: 'border-input bg-card px-4 text-foreground hover:border-ring/70 hover:bg-muted',
-        ghost: 'px-3 text-foreground hover:bg-accent hover:text-accent-foreground',
+        ghost: 'bg-transparent px-3 text-foreground hover:bg-accent hover:text-accent-foreground',
         destructive: 'bg-destructive px-4 text-white hover:bg-destructive/90',
-        link: 'px-1 text-primary underline-offset-4 hover:underline'
+        link: 'bg-transparent px-1 text-primary underline-offset-4 hover:underline'
       },
       size: {
         default: 'h-10',
diff --git a/apps/web/src/components/ui/input-group.jsx b/apps/web/src/components/ui/input-group.jsx
index b8155ef..82081f9 100644
--- a/apps/web/src/components/ui/input-group.jsx
+++ b/apps/web/src/components/ui/input-group.jsx
@@ -15,7 +15,7 @@ function InputGroup({
       data-slot="input-group"
       role="group"
       className={cn(
-        "group/input-group relative flex h-8 w-full min-w-0 items-center rounded-lg border border-input bg-card shadow-[0_1px_1px_rgba(23,33,30,0.03)] transition-[border-color,box-shadow,background-color] outline-none hover:border-ring/70 in-data-[slot=combobox-content]:focus-within:border-inherit in-data-[slot=combobox-content]:focus-within:ring-0 has-disabled:bg-input/50 has-disabled:opacity-50 has-[[data-slot=input-group-control]:focus-visible]:border-ring has-[[data-slot=input-group-control]:focus-visible]:ring-3 has-[[data-slot=input-group-control]:focus-visible]:ring-ring/25 has-[[data-slot][aria-invalid=true]]:border-destructive has-[[data-slot][aria-invalid=true]]:ring-3 has-[[data-slot][aria-invalid=true]]:ring-destructive/20 has-[>[data-align=block-end]]:h-auto has-[>[data-align=block-end]]:flex-col has-[>[data-align=block-start]]:h-auto has-[>[data-align=block-start]]:flex-col has-[>textarea]:h-auto dark:bg-input/30 dark:has-disabled:bg-input/80 dark:has-[[data-slot][aria-invalid=true]]:ring-destructive/40 has-[>[data-align=block-end]]:[&>input]:pt-3 has-[>[data-align=block-start]]:[&>input]:pb-3 has-[>[data-align=inline-end]]:[&>input]:pr-1.5 has-[>[data-align=inline-start]]:[&>input]:pl-1.5",
+        "group/input-group relative flex h-8 w-full min-w-0 items-center rounded-lg border border-input bg-card transition-[border-color,box-shadow,background-color] outline-none hover:border-ring/70 in-data-[slot=combobox-content]:focus-within:border-inherit in-data-[slot=combobox-content]:focus-within:ring-0 has-disabled:bg-input/50 has-disabled:opacity-50 has-[[data-slot=input-group-control]:focus-visible]:border-ring has-[[data-slot=input-group-control]:focus-visible]:ring-3 has-[[data-slot=input-group-control]:focus-visible]:ring-ring/25 has-[[data-slot][aria-invalid=true]]:border-destructive has-[[data-slot][aria-invalid=true]]:ring-3 has-[[data-slot][aria-invalid=true]]:ring-destructive/20 has-[>[data-align=block-end]]:h-auto has-[>[data-align=block-end]]:flex-col has-[>[data-align=block-start]]:h-auto has-[>[data-align=block-start]]:flex-col has-[>textarea]:h-auto dark:bg-input/30 dark:has-disabled:bg-input/80 dark:has-[[data-slot][aria-invalid=true]]:ring-destructive/40 has-[>[data-align=block-end]]:[&>input]:pt-3 has-[>[data-align=block-start]]:[&>input]:pb-3 has-[>[data-align=inline-end]]:[&>input]:pr-1.5 has-[>[data-align=inline-start]]:[&>input]:pl-1.5",
         className
       )}
       {...props}
diff --git a/apps/web/src/components/ui/input.jsx b/apps/web/src/components/ui/input.jsx
index c150751..32c9819 100644
--- a/apps/web/src/components/ui/input.jsx
+++ b/apps/web/src/components/ui/input.jsx
@@ -7,7 +7,7 @@ const Input = React.forwardRef(function Input({ className, type = 'text', ...pro
       ref={ref}
       type={type}
       className={cn(
-        'flex h-10 w-full rounded-md border border-input bg-card px-3 py-2 text-sm text-foreground shadow-[0_1px_1px_rgba(23,33,30,0.03)] outline-none transition-[border-color,box-shadow,background-color] placeholder:text-muted-foreground hover:border-ring/70 focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/20 disabled:cursor-not-allowed disabled:bg-muted disabled:text-muted-foreground disabled:opacity-80',
+        'flex h-10 w-full rounded-md border border-input bg-card px-3 py-2 text-sm text-foreground outline-none transition-[border-color,box-shadow,background-color] placeholder:text-muted-foreground hover:border-ring/70 focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/20 disabled:cursor-not-allowed disabled:bg-muted disabled:text-muted-foreground disabled:opacity-80',
         className
       )}
       {...props}
diff --git a/apps/web/src/components/ui/select.jsx b/apps/web/src/components/ui/select.jsx
index fe37584..79def4b 100644
--- a/apps/web/src/components/ui/select.jsx
+++ b/apps/web/src/components/ui/select.jsx
@@ -39,7 +39,7 @@ function SelectTrigger({
       data-slot="select-trigger"
       data-size={size}
       className={cn(
-        "flex w-fit items-center justify-between gap-1.5 rounded-lg border border-input bg-card py-2 pr-2 pl-2.5 text-sm whitespace-nowrap shadow-[0_1px_1px_rgba(23,33,30,0.03)] transition-[border-color,box-shadow,background-color] outline-none select-none hover:border-ring/70 focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/25 disabled:cursor-not-allowed disabled:bg-muted disabled:opacity-80 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 data-placeholder:text-muted-foreground data-[size=default]:h-8 data-[size=sm]:h-7 data-[size=sm]:rounded-[min(var(--radius-md),10px)] *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-1.5 dark:bg-input/30 dark:hover:bg-input/50 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        "flex w-fit appearance-none items-center justify-between gap-1.5 rounded-lg border border-input bg-card py-2 pr-2 pl-2.5 text-sm whitespace-nowrap transition-[border-color,box-shadow,background-color] outline-none select-none hover:border-ring/70 focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/25 disabled:cursor-not-allowed disabled:bg-muted disabled:opacity-80 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 data-placeholder:text-muted-foreground data-[size=default]:h-8 data-[size=sm]:h-7 data-[size=sm]:rounded-[min(var(--radius-md),10px)] *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-1.5 dark:bg-input/30 dark:hover:bg-input/50 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
         className
       )}
       {...props}
diff --git a/apps/web/src/components/ui/sidebar.jsx b/apps/web/src/components/ui/sidebar.jsx
index bbb2b32..0e243a4 100644
--- a/apps/web/src/components/ui/sidebar.jsx
+++ b/apps/web/src/components/ui/sidebar.jsx
@@ -45,7 +45,8 @@ function Sidebar({ className, children }) {
     <aside
       data-state={open ? 'expanded' : 'collapsed'}
       className={cn(
-        'hidden min-h-screen shrink-0 border-r border-sidebar-border bg-sidebar text-sidebar-foreground transition-[width] duration-200 lg:flex lg:w-64 lg:flex-col lg:data-[state=collapsed]:w-[72px]',
+        'hidden min-h-screen shrink-0 border-r border-sidebar-border bg-sidebar text-sidebar-foreground transition-[width] duration-200 lg:flex lg:flex-col',
+        open ? 'lg:w-64' : 'lg:w-[72px]',
         className
       )}
     >
@@ -97,7 +98,7 @@ function SidebarMenuButton({ className, active = false, asChild = false, ...prop
   return (
     <Comp
       className={cn(
-        'flex min-h-10 w-full items-center gap-3 rounded-md px-3 text-left text-[13px] font-medium text-sidebar-foreground/78 transition-colors hover:bg-sidebar-accent hover:text-sidebar-accent-foreground [&_svg]:size-[18px] [&_svg]:shrink-0',
+        'flex min-h-10 w-full appearance-none items-center gap-3 rounded-md border-0 bg-transparent px-3 text-left text-[13px] font-medium text-sidebar-foreground/78 transition-colors hover:bg-sidebar-accent hover:text-sidebar-accent-foreground [&_svg]:size-[18px] [&_svg]:shrink-0',
         active && 'bg-sidebar-accent text-sidebar-accent-foreground',
         className
       )}
diff --git a/apps/web/src/components/ui/textarea.jsx b/apps/web/src/components/ui/textarea.jsx
index a463eb5..ae1059d 100644
--- a/apps/web/src/components/ui/textarea.jsx
+++ b/apps/web/src/components/ui/textarea.jsx
@@ -9,7 +9,7 @@ function Textarea({
     <textarea
       data-slot="textarea"
       className={cn(
-        "flex field-sizing-content min-h-16 w-full rounded-lg border border-input bg-card px-2.5 py-2 text-base shadow-[0_1px_1px_rgba(23,33,30,0.03)] transition-[border-color,box-shadow,background-color] outline-none placeholder:text-muted-foreground hover:border-ring/70 focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/25 disabled:cursor-not-allowed disabled:bg-muted disabled:text-muted-foreground disabled:opacity-80 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 md:text-sm dark:bg-input/30 dark:disabled:bg-input/80 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40",
+        "flex field-sizing-content min-h-16 w-full rounded-lg border border-input bg-card px-2.5 py-2 text-base transition-[border-color,box-shadow,background-color] outline-none placeholder:text-muted-foreground hover:border-ring/70 focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/25 disabled:cursor-not-allowed disabled:bg-muted disabled:text-muted-foreground disabled:opacity-80 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 md:text-sm dark:bg-input/30 dark:disabled:bg-input/80 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40",
         className
       )}
       {...props}
diff --git a/apps/web/src/features/transactions/TransactionEditSheet.jsx b/apps/web/src/features/transactions/TransactionEditSheet.jsx
index 7f83213..69e5a23 100644
--- a/apps/web/src/features/transactions/TransactionEditSheet.jsx
+++ b/apps/web/src/features/transactions/TransactionEditSheet.jsx
@@ -163,7 +163,9 @@ export function TransactionEditSheet({ transaction, open, onOpenChange, onSaved
                   </SelectTrigger>
                   <SelectContent>
                     {categories.map((category) => (
-                      <SelectItem key={category.id} value={String(category.id)}>{category.name}</SelectItem>
+                      <SelectItem key={category.id} value={String(category.id)}>
+                        {category.name}{category.isActive ? '' : ' (nonaktif, transaksi lama)'}
+                      </SelectItem>
                     ))}
                   </SelectContent>
                 </Select>
diff --git a/apps/web/src/pages/Dashboard.jsx b/apps/web/src/pages/Dashboard.jsx
index 4efb839..4b73943 100644
--- a/apps/web/src/pages/Dashboard.jsx
+++ b/apps/web/src/pages/Dashboard.jsx
@@ -35,6 +35,11 @@ function formatAxisAmount(value) {
   return new Intl.NumberFormat('id-ID', { maximumFractionDigits: 0 }).format(number);
 }
 
+function CashflowDot({ cx, cy, payload, dataKey, color }) {
+  if (!payload || Number(payload[dataKey] ?? 0) <= 0) return null;
+  return <circle cx={cx} cy={cy} r="3" fill={color} stroke="var(--ui-card)" strokeWidth="1.5" />;
+}
+
 function Metric({ label, value, tone = 'default', caption, featured = false }) {
   const valueClass = tone === 'income'
     ? 'text-primary'
@@ -188,8 +193,8 @@ export default function Dashboard() {
                         formatter={(value) => formatRupiah(value)}
                       />}
                     />
-                    <Area type="monotone" dataKey="income" stroke="var(--color-income)" strokeWidth={2.5} fill="url(#incomeFill)" dot={false} activeDot={{ r: 4 }} isAnimationActive={false} />
-                    <Area type="monotone" dataKey="expense" stroke="var(--color-expense)" strokeWidth={2.5} fill="url(#expenseFill)" dot={false} activeDot={{ r: 4 }} isAnimationActive={false} />
+                    <Area type="monotone" dataKey="income" stroke="var(--color-income)" strokeWidth={2.5} fill="url(#incomeFill)" dot={(props) => <CashflowDot {...props} dataKey="income" color="var(--color-income)" />} activeDot={{ r: 4 }} isAnimationActive={false} />
+                    <Area type="monotone" dataKey="expense" stroke="var(--color-expense)" strokeWidth={2.5} fill="url(#expenseFill)" dot={(props) => <CashflowDot {...props} dataKey="expense" color="var(--color-expense)" />} activeDot={{ r: 4 }} isAnimationActive={false} />
                   </AreaChart>
                 </ChartContainer>
               </CardContent>
diff --git a/apps/web/src/pages/PublicDisplay.jsx b/apps/web/src/pages/PublicDisplay.jsx
index 9acb577..9dec81d 100644
--- a/apps/web/src/pages/PublicDisplay.jsx
+++ b/apps/web/src/pages/PublicDisplay.jsx
@@ -22,6 +22,16 @@ const FINANCE_CAROUSEL_INTERVAL_MS = 8500;
 const DISPLAY_TIMEZONE = 'Asia/Jakarta';
 const RECENT_TRANSACTION_LIMIT = 4;
 
+function formatCompactRupiah(value) {
+  const amount = Number(value ?? 0);
+  const compact = (number, suffix) => `Rp ${new Intl.NumberFormat('id-ID', { maximumFractionDigits: 2 }).format(number)} ${suffix}`;
+
+  if (Math.abs(amount) >= 1_000_000_000) return compact(amount / 1_000_000_000, 'M');
+  if (Math.abs(amount) >= 1_000_000) return compact(amount / 1_000_000, 'jt');
+  if (Math.abs(amount) >= 1_000) return compact(amount / 1_000, 'rb');
+  return formatRupiah(amount);
+}
+
 function displayDateIso(date = new Date()) {
   const parts = new Intl.DateTimeFormat('en-US', {
     timeZone: DISPLAY_TIMEZONE,
@@ -371,17 +381,17 @@ export default function PublicDisplay() {
 
           <div className="finance-balance">
             <span>Saldo saat ini</span>
-            <strong>{formatRupiah(data?.finance?.currentBalance ?? 0)}</strong>
+            <strong title={formatRupiah(data?.finance?.currentBalance ?? 0)}>{formatCompactRupiah(data?.finance?.currentBalance ?? 0)}</strong>
           </div>
 
           <div className="finance-flow-summary">
             <div>
               <span>Kas masuk</span>
-              <strong className="finance-income">+{formatRupiah(data?.finance?.totalIncome ?? 0)}</strong>
+              <strong className="finance-income" title={formatRupiah(data?.finance?.totalIncome ?? 0)}>+{formatCompactRupiah(data?.finance?.totalIncome ?? 0)}</strong>
             </div>
             <div>
               <span>Kas keluar</span>
-              <strong className="finance-expense">-{formatRupiah(data?.finance?.totalExpense ?? 0)}</strong>
+              <strong className="finance-expense" title={formatRupiah(data?.finance?.totalExpense ?? 0)}>-{formatCompactRupiah(data?.finance?.totalExpense ?? 0)}</strong>
             </div>
           </div>
 
diff --git a/apps/web/src/pages/Reports.jsx b/apps/web/src/pages/Reports.jsx
index 5bd701f..7a4b7b7 100644
--- a/apps/web/src/pages/Reports.jsx
+++ b/apps/web/src/pages/Reports.jsx
@@ -196,8 +196,8 @@ export default function Reports() {
                         formatter={(value) => formatRupiah(value)}
                       />}
                     />
-                    <Bar dataKey="income" fill="var(--color-income)" radius={[4, 4, 0, 0]} maxBarSize={22} isAnimationActive={false} />
-                    <Bar dataKey="expense" fill="var(--color-expense)" radius={[4, 4, 0, 0]} maxBarSize={22} isAnimationActive={false} />
+                    <Bar dataKey="income" fill="var(--color-income)" radius={[4, 4, 0, 0]} maxBarSize={22} minPointSize={4} isAnimationActive={false} />
+                    <Bar dataKey="expense" fill="var(--color-expense)" radius={[4, 4, 0, 0]} maxBarSize={22} minPointSize={4} isAnimationActive={false} />
                   </BarChart>
                 </ChartContainer>
               </CardContent>
@@ -221,7 +221,7 @@ export default function Reports() {
                           formatter={(value) => formatRupiah(value)}
                         />}
                       />
-                      <Bar dataKey="total" radius={[0, 4, 4, 0]} maxBarSize={22} isAnimationActive={false}>
+                      <Bar dataKey="total" radius={[0, 4, 4, 0]} maxBarSize={22} minPointSize={5} isAnimationActive={false}>
                         {categoryData.map((item) => (
                           <Cell key={`${item.type}-${item.category}`} fill={item.type === 'INCOME' ? 'var(--ui-chart-1)' : 'var(--ui-chart-2)'} />
                         ))}
diff --git a/apps/web/src/pages/Schedule.jsx b/apps/web/src/pages/Schedule.jsx
index 42188a4..358c482 100644
--- a/apps/web/src/pages/Schedule.jsx
+++ b/apps/web/src/pages/Schedule.jsx
@@ -69,12 +69,31 @@ function formatAgendaDate(date) {
 
 function FridayEditor({ open, onOpenChange, row, onSaved }) {
   const [form, setForm] = useState({ imam: '', khatib: '', bilal: '' });
+  const [sameImamKhatib, setSameImamKhatib] = useState(false);
   const [saving, setSaving] = useState(false);
 
   useEffect(() => {
-    if (row) setForm({ imam: row.imam ?? '', khatib: row.khatib ?? '', bilal: row.bilal ?? '' });
+    if (!row) return;
+    const imam = row.imam ?? '';
+    const khatib = row.khatib ?? '';
+    setForm({ imam, khatib, bilal: row.bilal ?? '' });
+    setSameImamKhatib(Boolean(imam.trim()) && imam.trim() === khatib.trim());
   }, [row]);
 
+  function updateImam(value) {
+    setForm((current) => ({
+      ...current,
+      imam: value,
+      khatib: sameImamKhatib ? value : current.khatib
+    }));
+  }
+
+  function toggleSameImamKhatib() {
+    const next = !sameImamKhatib;
+    setSameImamKhatib(next);
+    if (next) setForm((value) => ({ ...value, khatib: value.imam }));
+  }
+
   async function submit(event) {
     event.preventDefault();
     if (!row) return;
@@ -100,8 +119,35 @@ function FridayEditor({ open, onOpenChange, row, onSaved }) {
         </DialogHeader>
         <form className="grid gap-5" onSubmit={submit}>
           <FieldGroup>
-            <Field><FieldLabel>Imam</FieldLabel><Input value={form.imam} onChange={(e) => setForm((x) => ({ ...x, imam: e.target.value }))} placeholder="Nama imam" required /></Field>
-            <Field><FieldLabel>Khatib</FieldLabel><Input value={form.khatib} onChange={(e) => setForm((x) => ({ ...x, khatib: e.target.value }))} placeholder="Nama khatib" required /></Field>
+            <Field>
+              <FieldLabel>Imam</FieldLabel>
+              <Input value={form.imam} onChange={(e) => updateImam(e.target.value)} placeholder="Nama imam" required />
+            </Field>
+            <div className="flex items-center justify-between gap-3 rounded-lg border bg-muted/25 p-3">
+              <div>
+                <strong className="block text-sm font-medium">Imam juga menjadi Khatib</strong>
+                <span className="text-xs text-muted-foreground">Aktifkan jika satu orang bertugas sebagai imam sekaligus khatib.</span>
+              </div>
+              <Button
+                type="button"
+                size="sm"
+                variant={sameImamKhatib ? 'secondary' : 'outline'}
+                aria-pressed={sameImamKhatib}
+                onClick={toggleSameImamKhatib}
+              >
+                {sameImamKhatib ? 'Sama' : 'Samakan'}
+              </Button>
+            </div>
+            <Field>
+              <FieldLabel>Khatib</FieldLabel>
+              <Input
+                value={form.khatib}
+                onChange={(e) => setForm((x) => ({ ...x, khatib: e.target.value }))}
+                placeholder="Nama khatib"
+                disabled={sameImamKhatib}
+                required
+              />
+            </Field>
             <Field><FieldLabel>Bilal</FieldLabel><Input value={form.bilal} onChange={(e) => setForm((x) => ({ ...x, bilal: e.target.value }))} placeholder="Nama bilal" required /></Field>
           </FieldGroup>
           <DialogFooter>
diff --git a/apps/web/src/pages/Transactions.jsx b/apps/web/src/pages/Transactions.jsx
index aecba9a..cba88b5 100644
--- a/apps/web/src/pages/Transactions.jsx
+++ b/apps/web/src/pages/Transactions.jsx
@@ -207,26 +207,26 @@ export default function Transactions() {
           <Card className="overflow-hidden">
             <div className="grid divide-y sm:grid-cols-2 sm:divide-x sm:divide-y-0 xl:grid-cols-4">
               <Metric
-                label="Saldo saat ini"
-                value={formatRupiah(data.summary.currentBalance)}
-                caption="Saldo berjalan seluruh periode"
+                label="Saldo awal"
+                value={formatRupiah(data.summary.openingBalance)}
+                caption="Basis awal perhitungan kas"
               />
               <Metric
-                label="Total kas masuk"
+                label="Masuk"
                 value={'+' + formatRupiah(data.summary.totalIncome)}
                 tone="income"
-                caption="Akumulasi seluruh transaksi masuk"
+                caption="Total seluruh kas masuk"
               />
               <Metric
-                label="Total kas keluar"
+                label="Keluar"
                 value={'-' + formatRupiah(data.summary.totalExpense)}
                 tone="expense"
-                caption="Akumulasi seluruh transaksi keluar"
+                caption="Total seluruh kas keluar"
               />
               <Metric
-                label="Transaksi tampil"
-                value={String(filtered.length)}
-                caption={hasFilters ? 'Hasil filter aktif' : 'Maks. 500 transaksi terbaru'}
+                label="Sisa saldo"
+                value={formatRupiah(data.summary.currentBalance)}
+                caption="Saldo berjalan saat ini"
               />
             </div>
           </Card>
diff --git a/tests/dashboard-overhaul.test.mjs b/tests/dashboard-overhaul.test.mjs
index d910eb5..6b7825a 100644
--- a/tests/dashboard-overhaul.test.mjs
+++ b/tests/dashboard-overhaul.test.mjs
@@ -315,7 +315,7 @@ test('phase 6a collapsed sidebar becomes a true icon rail with a stable account
   const sidebar = await source('apps/web/src/components/app/AppSidebar.jsx');
   const userMenu = await source('apps/web/src/components/app/UserMenu.jsx');
 
-  assert.match(sidebarUi, /lg:data-\[state=collapsed\]:w-\[72px\]/);
+  assert.match(sidebarUi, /open \? 'lg:w-64' : 'lg:w-\[72px\]'/);
   assert.match(sidebarUi, /IconLayoutSidebarLeftExpand/);
   assert.match(sidebarUi, /Lebarkan navigasi/);
   assert.match(sidebar, /justify-center px-0/);
@@ -403,7 +403,7 @@ test('phase 6b primitives expose clear borders, focus and selected states', asyn
   assert.match(alert, /ui-danger-border/);
   assert.doesNotMatch(alert, /opacity-90/);
   assert.match(settingsNav, /border-l-2 bg-transparent/);
-  assert.match(settingsNav, /border-primary font-semibold text-foreground/);
+  assert.match(settingsNav, /border-primary bg-accent\/35 font-semibold text-foreground/);
 });
 
 
@@ -508,6 +508,92 @@ test('visual hotfix flattens buttons and fixes breadcrumb composition', async ()
   assert.doesNotMatch(header, /className="contents"/);
 
   assert.match(settingsNav, /border-l-2 bg-transparent/);
-  assert.match(settingsNav, /border-primary font-semibold text-foreground/);
+  assert.match(settingsNav, /border-primary bg-accent\/35 font-semibold text-foreground/);
   assert.doesNotMatch(settingsNav, /shadow-\[/);
 });
+
+
+test('final visual QA fixes browser chrome, control surfaces and deterministic sidebar width', async () => {
+  const sidebar = await source('apps/web/src/components/ui/sidebar.jsx');
+  const button = await source('apps/web/src/components/ui/button.jsx');
+  const input = await source('apps/web/src/components/ui/input.jsx');
+  const inputGroup = await source('apps/web/src/components/ui/input-group.jsx');
+  const select = await source('apps/web/src/components/ui/select.jsx');
+  const textarea = await source('apps/web/src/components/ui/textarea.jsx');
+  const settingsNav = await source('apps/web/src/components/settings/SettingsNav.jsx');
+  const reports = await source('apps/web/src/pages/Reports.jsx');
+  const dashboard = await source('apps/web/src/pages/Dashboard.jsx');
+
+  assert.match(sidebar, /open \? 'lg:w-64' : 'lg:w-\[72px\]'/);
+  assert.doesNotMatch(sidebar, /lg:data-\[state=collapsed\]:w-\[72px\]/);
+  assert.match(sidebar, /appearance-none/);
+  assert.match(sidebar, /border-0 bg-transparent/);
+
+  assert.match(button, /ghost: 'bg-transparent/);
+  assert.match(button, /link: 'bg-transparent/);
+
+  assert.doesNotMatch(input, /shadow-\[/);
+  assert.doesNotMatch(inputGroup, /shadow-\[/);
+  assert.match(select, /appearance-none/);
+  assert.doesNotMatch(select, /shadow-\[/);
+  assert.doesNotMatch(textarea, /shadow-\[/);
+
+  assert.match(settingsNav, /border-primary bg-accent\/35 font-semibold text-foreground/);
+
+  assert.match(dashboard, /function CashflowDot/);
+  assert.match(dashboard, /payload\[dataKey\]/);
+  assert.match(reports, /minPointSize=\{4\}/);
+  assert.match(reports, /minPointSize=\{5\}/);
+});
+
+test('transaction summary cards use requested cash accounting labels', async () => {
+  const transactions = await source('apps/web/src/pages/Transactions.jsx');
+
+  assert.match(transactions, /label="Saldo awal"/);
+  assert.match(transactions, /data\.summary\.openingBalance/);
+  assert.match(transactions, /label="Masuk"/);
+  assert.match(transactions, /data\.summary\.totalIncome/);
+  assert.match(transactions, /label="Keluar"/);
+  assert.match(transactions, /data\.summary\.totalExpense/);
+  assert.match(transactions, /label="Sisa saldo"/);
+  assert.match(transactions, /data\.summary\.currentBalance/);
+  assert.doesNotMatch(transactions, /label="Transaksi tampil"/);
+});
+
+test('Friday editor can keep Imam and Khatib synchronized as one officer', async () => {
+  const schedule = await source('apps/web/src/pages/Schedule.jsx');
+
+  assert.match(schedule, /sameImamKhatib/);
+  assert.match(schedule, /Imam juga menjadi Khatib/);
+  assert.match(schedule, /Aktifkan jika satu orang bertugas sebagai imam sekaligus khatib/);
+  assert.match(schedule, /aria-pressed=\{sameImamKhatib\}/);
+  assert.match(schedule, /disabled=\{sameImamKhatib\}/);
+  assert.match(schedule, /khatib: sameImamKhatib \? value : current\.khatib/);
+  assert.match(schedule, /if \(next\) setForm\(\(value\) => \(\{ \.\.\.value, khatib: value\.imam \}\)\)/);
+});
+
+test('inactive transaction categories stay auditable but are excluded from new transaction entry', async () => {
+  const routes = await source('apps/api/src/routes.js');
+  const settings = await source('apps/web/src/components/settings/CategorySettings.jsx');
+  const createForm = await source('apps/web/src/pages/TransactionForm.jsx');
+  const editSheet = await source('apps/web/src/features/transactions/TransactionEditSheet.jsx');
+
+  assert.match(routes, /AS transactionCount/);
+  assert.match(routes, /transactions\.category_id = transaction_categories\.id/);
+  assert.match(routes, /!category\.isActive/);
+  assert.match(routes, /Kategori transaksi tidak valid atau sudah dinonaktifkan/);
+  assert.match(routes, /!category\.isActive && Number\(category\.id\) !== Number\(existing\.categoryId\)/);
+  assert.match(routes, /TRANSACTION_CATEGORY_UPDATE/);
+  assert.match(routes, /before: \{/);
+  assert.match(routes, /after: \{/);
+
+  assert.match(settings, /Transaksi lama tetap tersimpan dan tetap dapat diaudit/);
+  assert.match(settings, /transactionCount/);
+  assert.match(settings, /Nonaktifkan/);
+  assert.match(settings, /Aktifkan/);
+  assert.doesNotMatch(settings, /DropdownMenuTrigger/);
+
+  assert.match(createForm, /result\.data\.filter\(\(item\) => item\.isActive\)/);
+  assert.match(editSheet, /item\.isActive \|\| Number\(item\.id\) === Number\(transaction\.categoryId\)/);
+  assert.match(editSheet, /nonaktif, transaksi lama/);
+});
diff --git a/tests/public-display-v2.test.mjs b/tests/public-display-v2.test.mjs
index 693a5fd..2a75468 100644
--- a/tests/public-display-v2.test.mjs
+++ b/tests/public-display-v2.test.mjs
@@ -395,3 +395,15 @@ test('adhan phase lasts two minutes and iqamah stays eight minutes after adhan',
   assert.match(helper, /kind: 'ADHAN_NOW'/);
   assert.match(display, /Waktunya Adzan \{countdownFocus\.prayerName\}/);
 });
+
+
+test('public finance rail uses compact amounts instead of clipping billion-scale totals', async () => {
+  const jsx = await source('apps/web/src/pages/PublicDisplay.jsx');
+
+  assert.match(jsx, /function formatCompactRupiah/);
+  assert.match(jsx, /1_000_000_000/);
+  assert.match(jsx, /maximumFractionDigits: 2/);
+  assert.match(jsx, /formatCompactRupiah\(data\?\.finance\?\.currentBalance/);
+  assert.match(jsx, /formatCompactRupiah\(data\?\.finance\?\.totalIncome/);
+  assert.match(jsx, /formatCompactRupiah\(data\?\.finance\?\.totalExpense/);
+});