fix: enforce read-only restrictions for viewer role across 5 pages

Audit and fix viewer (read-only) user permissions: - Dashboard: hide health score refresh buttons - Accounts: hide investment edit icons - Invoices: hide Apply Late Fees and Generate Invoices buttons - Capital Planning: disable drag-and-drop, hide grip handles and edit buttons - Investment Planning: hide AI Recommendations refresh button Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
2026-03-09 09:59:20 -04:00
12 changed files with 83 additions and 112 deletions
--- a/backend/src/modules/journal-entries/journal-entries.service.ts
+++ b/backend/src/modules/journal-entries/journal-entries.service.ts
@@ -13,16 +13,6 @@ export class JournalEntriesService {
  async findAll(filters: { from?: string; to?: string; accountId?: string; type?: string }) {
    let sql = `
      SELECT je.*,
-        CASE
-          WHEN SUM(CASE WHEN a.account_type IN ('income','expense') THEN 1 ELSE 0 END) > 0
-          THEN COALESCE(SUM(CASE WHEN a.account_type IN ('income','expense') THEN jel.debit ELSE 0 END), 0)
-          ELSE COALESCE(SUM(jel.debit), 0)
-        END as total_debit,
-        CASE
-          WHEN SUM(CASE WHEN a.account_type IN ('income','expense') THEN 1 ELSE 0 END) > 0
-          THEN COALESCE(SUM(CASE WHEN a.account_type IN ('income','expense') THEN jel.credit ELSE 0 END), 0)
-          ELSE COALESCE(SUM(jel.credit), 0)
-        END as total_credit,
        json_agg(json_build_object(
          'id', jel.id, 'account_id', jel.account_id,
          'debit', jel.debit, 'credit', jel.credit, 'memo', jel.memo,
--- a/frontend/index.html
+++ b/frontend/index.html
@@ -9,20 +9,5 @@
  <body>
    <div id="root"></div>
    <script type="module" src="/src/main.tsx"></script>
-    <script>
-  (function(d,t) {
-    var BASE_URL="https//chat.hoaledgeriq.com";
-    var g=d.createElement(t),s=d.getElementsByTagName(t)[0];
-    g.src=BASE_URL+"/packs/js/sdk.js";
-    g.async = true;
-    s.parentNode.insertBefore(g,s);
-    g.onload=function(){
-      window.chatwootSDK.run({
-        websiteToken: 'K6VXvTtKXvaCMvre4yK85SPb',
-        baseUrl: BASE_URL
-      })
-    }
-  })(document,"script");
-</script>
  </body>
 </html>
--- a/frontend/src/pages/accounts/AccountsPage.tsx
+++ b/frontend/src/pages/accounts/AccountsPage.tsx
@@ -587,7 +587,7 @@ export function AccountsPage() {
            {investments.filter(i => i.is_active).length > 0 && (
              <>
                <Divider label="Investment Accounts" labelPosition="center" my="xs" />
-                <InvestmentMiniTable investments={investments.filter(i => i.is_active)} onEdit={handleEditInvestment} />
+                <InvestmentMiniTable investments={investments.filter(i => i.is_active)} onEdit={handleEditInvestment} isReadOnly={isReadOnly} />
              </>
            )}
          </Stack>
@@ -605,7 +605,7 @@ export function AccountsPage() {
            {operatingInvestments.length > 0 && (
              <>
                <Divider label="Operating Investment Accounts" labelPosition="center" my="xs" />
-                <InvestmentMiniTable investments={operatingInvestments} onEdit={handleEditInvestment} />
+                <InvestmentMiniTable investments={operatingInvestments} onEdit={handleEditInvestment} isReadOnly={isReadOnly} />
              </>
            )}
          </Stack>
@@ -623,7 +623,7 @@ export function AccountsPage() {
            {reserveInvestments.length > 0 && (
              <>
                <Divider label="Reserve Investment Accounts" labelPosition="center" my="xs" />
-                <InvestmentMiniTable investments={reserveInvestments} onEdit={handleEditInvestment} />
+                <InvestmentMiniTable investments={reserveInvestments} onEdit={handleEditInvestment} isReadOnly={isReadOnly} />
              </>
            )}
          </Stack>
@@ -1087,9 +1087,11 @@ function AccountTable({
 function InvestmentMiniTable({
  investments,
  onEdit,
+  isReadOnly = false,
 }: {
  investments: Investment[];
  onEdit: (inv: Investment) => void;
+  isReadOnly?: boolean;
 }) {
  const totalPrincipal = investments.reduce((s, i) => s + parseFloat(i.principal || '0'), 0);
  const totalValue = investments.reduce(
@@ -1132,7 +1134,7 @@ function InvestmentMiniTable({
            <Table.Th ta="right">Maturity Value</Table.Th>
            <Table.Th>Maturity Date</Table.Th>
            <Table.Th ta="right">Days Remaining</Table.Th>
-            <Table.Th></Table.Th>
+            {!isReadOnly && <Table.Th></Table.Th>}
          </Table.Tr>
        </Table.Thead>
        <Table.Tbody>
@@ -1182,6 +1184,7 @@ function InvestmentMiniTable({
                  '-'
                )}
              </Table.Td>
+              {!isReadOnly && (
                <Table.Td>
                  <Tooltip label="Edit investment">
                    <ActionIcon variant="subtle" onClick={() => onEdit(inv)}>
@@ -1189,6 +1192,7 @@ function InvestmentMiniTable({
                    </ActionIcon>
                  </Tooltip>
                </Table.Td>
+              )}
            </Table.Tr>
          ))}
        </Table.Tbody>
--- a/frontend/src/pages/budgets/BudgetsPage.tsx
+++ b/frontend/src/pages/budgets/BudgetsPage.tsx
@@ -8,7 +8,6 @@ import { IconDeviceFloppy, IconUpload, IconDownload, IconInfoCircle } from '@tab
 import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
 import api from '../../services/api';
 import { useIsReadOnly } from '../../stores/authStore';
-import { usePreferencesStore } from '../../stores/preferencesStore';

 interface BudgetLine {
  account_id: string;
@@ -99,11 +98,6 @@ export function BudgetsPage() {
  const queryClient = useQueryClient();
  const fileInputRef = useRef<HTMLInputElement>(null);
  const isReadOnly = useIsReadOnly();
-  const isDark = usePreferencesStore((s) => s.colorScheme) === 'dark';
-  const stickyBg = isDark ? 'var(--mantine-color-dark-7)' : 'white';
-  const stickyBorder = isDark ? 'var(--mantine-color-dark-4)' : '#e9ecef';
-  const incomeSectionBg = isDark ? 'var(--mantine-color-green-9)' : '#e6f9e6';
-  const expenseSectionBg = isDark ? 'var(--mantine-color-red-9)' : '#fde8e8';

  const { isLoading } = useQuery<BudgetLine[]>({
    queryKey: ['budgets', year],
@@ -323,8 +317,8 @@ export function BudgetsPage() {
        <Table striped highlightOnHover style={{ minWidth: 1600 }}>
          <Table.Thead>
            <Table.Tr>
-              <Table.Th style={{ position: 'sticky', left: 0, background: stickyBg, zIndex: 2, minWidth: 120 }}>Acct #</Table.Th>
-              <Table.Th style={{ position: 'sticky', left: 120, background: stickyBg, zIndex: 2, minWidth: 220 }}>Account Name</Table.Th>
+              <Table.Th style={{ position: 'sticky', left: 0, background: 'white', zIndex: 2, minWidth: 120 }}>Acct #</Table.Th>
+              <Table.Th style={{ position: 'sticky', left: 120, background: 'white', zIndex: 2, minWidth: 220 }}>Account Name</Table.Th>
              {monthLabels.map((m) => (
                <Table.Th key={m} ta="right" style={{ minWidth: 90 }}>{m}</Table.Th>
              ))}
@@ -343,7 +337,7 @@ export function BudgetsPage() {
              const lines = budgetData.filter((b) => b.account_type === type);
              if (lines.length === 0) return null;

-              const sectionBg = type === 'income' ? incomeSectionBg : expenseSectionBg;
+              const sectionBg = type === 'income' ? '#e6f9e6' : '#fde8e8';
              const sectionTotal = lines.reduce((sum, line) => sum + (line.annual_total || 0), 0);

              return [
@@ -374,9 +368,9 @@ export function BudgetsPage() {
                        style={{
                          position: 'sticky',
                          left: 0,
-                          background: stickyBg,
+                          background: 'white',
                          zIndex: 1,
-                          borderRight: `1px solid ${stickyBorder}`,
+                          borderRight: '1px solid #e9ecef',
                        }}
                      >
                        <Text size="sm" c="dimmed" ff="monospace">{line.account_number}</Text>
@@ -385,9 +379,9 @@ export function BudgetsPage() {
                        style={{
                          position: 'sticky',
                          left: 120,
-                          background: stickyBg,
+                          background: 'white',
                          zIndex: 1,
-                          borderRight: `1px solid ${stickyBorder}`,
+                          borderRight: '1px solid #e9ecef',
                        }}
                      >
                        <Group gap={6} wrap="nowrap">
--- a/frontend/src/pages/capital-projects/CapitalProjectsPage.tsx
+++ b/frontend/src/pages/capital-projects/CapitalProjectsPage.tsx
@@ -72,9 +72,10 @@ interface KanbanCardProps {
  project: Project;
  onEdit: (p: Project) => void;
  onDragStart: (e: DragEvent<HTMLDivElement>, project: Project) => void;
+  isReadOnly?: boolean;
 }

-function KanbanCard({ project, onEdit, onDragStart }: KanbanCardProps) {
+function KanbanCard({ project, onEdit, onDragStart, isReadOnly }: KanbanCardProps) {
  const plannedLabel = formatPlannedDate(project.planned_date);
  // For projects in the Future bucket with a specific year, show the year
  const currentYear = new Date().getFullYear();
@@ -86,21 +87,23 @@ function KanbanCard({ project, onEdit, onDragStart }: KanbanCardProps) {
      padding="sm"
      radius="md"
      withBorder
-      draggable
-      onDragStart={(e) => onDragStart(e, project)}
-      style={{ cursor: 'grab', userSelect: 'none' }}
+      draggable={!isReadOnly}
+      onDragStart={!isReadOnly ? (e) => onDragStart(e, project) : undefined}
+      style={{ cursor: isReadOnly ? 'default' : 'grab', userSelect: 'none' }}
      mb="xs"
    >
      <Group justify="space-between" wrap="nowrap" mb={4}>
        <Group gap={6} wrap="nowrap" style={{ overflow: 'hidden' }}>
-          <IconGripVertical size={14} style={{ flexShrink: 0, color: 'var(--mantine-color-dimmed)' }} />
+          {!isReadOnly && <IconGripVertical size={14} style={{ flexShrink: 0, color: 'var(--mantine-color-dimmed)' }} />}
          <Text fw={600} size="sm" truncate>
            {project.name}
          </Text>
        </Group>
+        {!isReadOnly && (
          <ActionIcon variant="subtle" size="sm" onClick={() => onEdit(project)}>
            <IconEdit size={14} />
          </ActionIcon>
+        )}
      </Group>

      <Group gap={6} mb={6}>
@@ -148,11 +151,12 @@ interface KanbanColumnProps {
  isDragOver: boolean;
  onDragOverHandler: (e: DragEvent<HTMLDivElement>, year: number) => void;
  onDragLeave: () => void;
+  isReadOnly?: boolean;
 }

 function KanbanColumn({
  year, projects, onEdit, onDragStart, onDrop,
-  isDragOver, onDragOverHandler, onDragLeave,
+  isDragOver, onDragOverHandler, onDragLeave, isReadOnly,
 }: KanbanColumnProps) {
  const totalEst = projects.reduce((s, p) => s + parseFloat(p.estimated_cost || '0'), 0);
  const isFuture = year === FUTURE_YEAR;
@@ -178,9 +182,9 @@ function KanbanColumn({
        border: isDragOver ? '2px dashed var(--mantine-color-blue-4)' : undefined,
        transition: 'background-color 150ms ease, border 150ms ease',
      }}
-      onDragOver={(e) => onDragOverHandler(e, year)}
-      onDragLeave={onDragLeave}
-      onDrop={(e) => onDrop(e, year)}
+      onDragOver={!isReadOnly ? (e) => onDragOverHandler(e, year) : undefined}
+      onDragLeave={!isReadOnly ? onDragLeave : undefined}
+      onDrop={!isReadOnly ? (e) => onDrop(e, year) : undefined}
    >
      <Group justify="space-between" mb="sm">
        <Title order={5}>{yearLabel(year)}</Title>
@@ -199,7 +203,7 @@ function KanbanColumn({
      <Box style={{ flex: 1, minHeight: 60 }}>
        {projects.length === 0 ? (
          <Text size="xs" c="dimmed" ta="center" py="lg">
-            Drop projects here
+            {isReadOnly ? 'No projects' : 'Drop projects here'}
          </Text>
        ) : useWideLayout ? (
          <div style={{
@@ -208,12 +212,12 @@ function KanbanColumn({
            gap: 'var(--mantine-spacing-xs)',
          }}>
            {projects.map((p) => (
-              <KanbanCard key={p.id} project={p} onEdit={onEdit} onDragStart={onDragStart} />
+              <KanbanCard key={p.id} project={p} onEdit={onEdit} onDragStart={onDragStart} isReadOnly={isReadOnly} />
            ))}
          </div>
        ) : (
          projects.map((p) => (
-            <KanbanCard key={p.id} project={p} onEdit={onEdit} onDragStart={onDragStart} />
+            <KanbanCard key={p.id} project={p} onEdit={onEdit} onDragStart={onDragStart} isReadOnly={isReadOnly} />
          ))
        )}
      </Box>
@@ -595,6 +599,7 @@ export function CapitalProjectsPage() {
              isDragOver={dragOverYear === year}
              onDragOverHandler={handleDragOver}
              onDragLeave={handleDragLeave}
+              isReadOnly={isReadOnly}
            />
          );
        })}
--- a/frontend/src/pages/cash-flow/CashFlowForecastPage.tsx
+++ b/frontend/src/pages/cash-flow/CashFlowForecastPage.tsx
@@ -8,7 +8,6 @@ import {
  IconArrowLeft, IconArrowRight, IconCalendar,
 } from '@tabler/icons-react';
 import { useQuery } from '@tanstack/react-query';
-import { usePreferencesStore } from '../../stores/preferencesStore';
 import {
  AreaChart, Area, XAxis, YAxis, CartesianGrid,
  Tooltip as RechartsTooltip, ResponsiveContainer, Legend,
@@ -80,7 +79,6 @@ export function CashFlowForecastPage() {
  const now = new Date();
  const currentYear = now.getFullYear();
  const currentMonth = now.getMonth() + 1;
-  const isDark = usePreferencesStore((s) => s.colorScheme) === 'dark';

  // Filter: All, Operating, Reserve
  const [fundFilter, setFundFilter] = useState<string>('all');
@@ -420,10 +418,10 @@ export function CashFlowForecastPage() {
                  <tr
                    key={d.month}
                    style={{
-                      borderBottom: `1px solid ${isDark ? 'var(--mantine-color-dark-4)' : 'var(--mantine-color-gray-2)'}`,
+                      borderBottom: '1px solid var(--mantine-color-gray-2)',
                      backgroundColor: d.is_forecast
-                        ? (isDark ? 'var(--mantine-color-orange-9)' : 'var(--mantine-color-orange-0)')
-                        : i % 2 === 0 ? 'transparent' : (isDark ? 'var(--mantine-color-dark-5)' : 'var(--mantine-color-gray-0)'),
+                        ? 'var(--mantine-color-orange-0)'
+                        : i % 2 === 0 ? 'transparent' : 'var(--mantine-color-gray-0)',
                    }}
                  >
                    <td style={{ padding: '6px 12px', fontWeight: 500 }}>{d.month}</td>
--- a/frontend/src/pages/dashboard/DashboardPage.tsx
+++ b/frontend/src/pages/dashboard/DashboardPage.tsx
@@ -18,7 +18,7 @@ import {
 } from '@tabler/icons-react';
 import { useState, useCallback } from 'react';
 import { useQuery, useQueryClient } from '@tanstack/react-query';
-import { useAuthStore } from '../../stores/authStore';
+import { useAuthStore, useIsReadOnly } from '../../stores/authStore';
 import api from '../../services/api';

 interface HealthScore {
@@ -311,6 +311,7 @@ interface DashboardData {

 export function DashboardPage() {
  const currentOrg = useAuthStore((s) => s.currentOrg);
+  const isReadOnly = useIsReadOnly();
  const queryClient = useQueryClient();

  // Track whether a refresh is in progress (per score type) for async polling
@@ -424,7 +425,7 @@ export function DashboardPage() {
                </ThemeIcon>
              }
              isRefreshing={operatingRefreshing}
-              onRefresh={handleRefreshOperating}
+              onRefresh={!isReadOnly ? handleRefreshOperating : undefined}
              lastFailed={!!healthScores?.operating_last_failed}
            />
            <HealthScoreCard
@@ -436,7 +437,7 @@ export function DashboardPage() {
                </ThemeIcon>
              }
              isRefreshing={reserveRefreshing}
-              onRefresh={handleRefreshReserve}
+              onRefresh={!isReadOnly ? handleRefreshReserve : undefined}
              lastFailed={!!healthScores?.reserve_last_failed}
            />
          </SimpleGrid>
--- a/frontend/src/pages/investment-planning/InvestmentPlanningPage.tsx
+++ b/frontend/src/pages/investment-planning/InvestmentPlanningPage.tsx
@@ -36,6 +36,7 @@ import {
 import { useQuery } from '@tanstack/react-query';
 import { notifications } from '@mantine/notifications';
 import api from '../../services/api';
+import { useIsReadOnly } from '../../stores/authStore';

 // ── Types ──

@@ -347,6 +348,7 @@ function RecommendationsDisplay({
 export function InvestmentPlanningPage() {
  const [ratesExpanded, setRatesExpanded] = useState(true);
  const [isTriggering, setIsTriggering] = useState(false);
+  const isReadOnly = useIsReadOnly();

  // Load financial snapshot on mount
  const { data: snapshot, isLoading: snapshotLoading } = useQuery<FinancialSnapshot>({
@@ -696,6 +698,7 @@ export function InvestmentPlanningPage() {
              </Text>
            </div>
          </Group>
+          {!isReadOnly && (
            <Button
              leftSection={<IconSparkles size={16} />}
              onClick={handleTriggerAI}
@@ -705,6 +708,7 @@ export function InvestmentPlanningPage() {
            >
              {aiResult ? 'Refresh Recommendations' : 'Get AI Recommendations'}
            </Button>
+          )}
        </Group>

        {/* Processing State */}
--- a/frontend/src/pages/invoices/InvoicesPage.tsx
+++ b/frontend/src/pages/invoices/InvoicesPage.tsx
@@ -9,6 +9,7 @@ import { notifications } from '@mantine/notifications';
 import { IconSend, IconInfoCircle, IconCheck, IconX } from '@tabler/icons-react';
 import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
 import api from '../../services/api';
+import { useIsReadOnly } from '../../stores/authStore';

 interface Invoice {
  id: string; invoice_number: string; unit_number: string; unit_id: string;
@@ -64,6 +65,7 @@ export function InvoicesPage() {
  const [preview, setPreview] = useState<Preview | null>(null);
  const [previewLoading, setPreviewLoading] = useState(false);
  const queryClient = useQueryClient();
+  const isReadOnly = useIsReadOnly();

  const { data: invoices = [], isLoading } = useQuery<Invoice[]>({
    queryKey: ['invoices'],
@@ -124,10 +126,12 @@ export function InvoicesPage() {
    <Stack>
      <Group justify="space-between">
        <Title order={2}>Invoices</Title>
+        {!isReadOnly && (
          <Group>
            <Button variant="outline" onClick={() => lateFeesMutation.mutate()} loading={lateFeesMutation.isPending}>Apply Late Fees</Button>
            <Button leftSection={<IconSend size={16} />} onClick={openBulk}>Generate Invoices</Button>
          </Group>
+        )}
      </Group>
      <Group>
        <Card withBorder p="sm"><Text size="xs" c="dimmed">Total Invoices</Text><Text fw={700}>{invoices.length}</Text></Card>
--- a/frontend/src/pages/monthly-actuals/MonthlyActualsPage.tsx
+++ b/frontend/src/pages/monthly-actuals/MonthlyActualsPage.tsx
@@ -10,7 +10,6 @@ import {
 import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
 import api from '../../services/api';
 import { useIsReadOnly } from '../../stores/authStore';
-import { usePreferencesStore } from '../../stores/preferencesStore';
 import { AttachmentPanel } from '../../components/attachments/AttachmentPanel';

 interface ActualLine {
@@ -67,11 +66,6 @@ export function MonthlyActualsPage() {
  const [savedJEId, setSavedJEId] = useState<string | null>(null);
  const queryClient = useQueryClient();
  const isReadOnly = useIsReadOnly();
-  const isDark = usePreferencesStore((s) => s.colorScheme) === 'dark';
-  const stickyBg = isDark ? 'var(--mantine-color-dark-7)' : 'white';
-  const stickyBorder = isDark ? 'var(--mantine-color-dark-4)' : '#e9ecef';
-  const incomeBg = isDark ? 'var(--mantine-color-green-9)' : '#e6f9e6';
-  const expenseBg = isDark ? 'var(--mantine-color-red-9)' : '#fde8e8';

  const yearOptions = Array.from({ length: 5 }, (_, i) => {
    const y = new Date().getFullYear() - 2 + i;
@@ -184,16 +178,16 @@ export function MonthlyActualsPage() {
          <Table.Tr key={line.account_id}>
            <Table.Td
              style={{
-                position: 'sticky', left: 0, background: stickyBg, zIndex: 1,
-                borderRight: `1px solid ${stickyBorder}`,
+                position: 'sticky', left: 0, background: 'white', zIndex: 1,
+                borderRight: '1px solid #e9ecef',
              }}
            >
              <Text size="sm" c="dimmed" ff="monospace">{line.account_number}</Text>
            </Table.Td>
            <Table.Td
              style={{
-                position: 'sticky', left: 120, background: stickyBg, zIndex: 1,
-                borderRight: `1px solid ${stickyBorder}`,
+                position: 'sticky', left: 120, background: 'white', zIndex: 1,
+                borderRight: '1px solid #e9ecef',
              }}
            >
              <Group gap={6} wrap="nowrap">
@@ -298,10 +292,10 @@ export function MonthlyActualsPage() {
        <Table striped highlightOnHover style={{ minWidth: 700 }}>
          <Table.Thead>
            <Table.Tr>
-              <Table.Th style={{ position: 'sticky', left: 0, background: stickyBg, zIndex: 2, minWidth: 120 }}>
+              <Table.Th style={{ position: 'sticky', left: 0, background: 'white', zIndex: 2, minWidth: 120 }}>
                Acct #
              </Table.Th>
-              <Table.Th style={{ position: 'sticky', left: 120, background: stickyBg, zIndex: 2, minWidth: 220 }}>
+              <Table.Th style={{ position: 'sticky', left: 120, background: 'white', zIndex: 2, minWidth: 220 }}>
                Account Name
              </Table.Th>
              <Table.Th ta="right" style={{ minWidth: 110 }}>Budget</Table.Th>
@@ -310,8 +304,8 @@ export function MonthlyActualsPage() {
            </Table.Tr>
          </Table.Thead>
          <Table.Tbody>
-            {renderSection('Income', incomeLines, incomeBg, totals.incomeBudget, totals.incomeActual)}
-            {renderSection('Expenses', expenseLines, expenseBg, totals.expenseBudget, totals.expenseActual)}
+            {renderSection('Income', incomeLines, '#e6f9e6', totals.incomeBudget, totals.incomeActual)}
+            {renderSection('Expenses', expenseLines, '#fde8e8', totals.expenseBudget, totals.expenseActual)}
          </Table.Tbody>
        </Table>
      </div>
--- a/frontend/src/pages/reports/BudgetVsActualPage.tsx
+++ b/frontend/src/pages/reports/BudgetVsActualPage.tsx
@@ -5,7 +5,6 @@ import {
 } from '@mantine/core';
 import { useQuery } from '@tanstack/react-query';
 import api from '../../services/api';
-import { usePreferencesStore } from '../../stores/preferencesStore';

 interface BudgetVsActualLine {
  account_id: string;
@@ -47,9 +46,6 @@ const monthFilterOptions = [
 export function BudgetVsActualPage() {
  const [year, setYear] = useState(new Date().getFullYear().toString());
  const [month, setMonth] = useState('');
-  const isDark = usePreferencesStore((s) => s.colorScheme) === 'dark';
-  const incomeBg = isDark ? 'var(--mantine-color-green-9)' : '#e6f9e6';
-  const expenseBg = isDark ? 'var(--mantine-color-red-9)' : '#fde8e8';

  const yearOptions = Array.from({ length: 5 }, (_, i) => {
    const y = new Date().getFullYear() - 2 + i;
@@ -96,7 +92,7 @@ export function BudgetVsActualPage() {

  const renderSection = (title: string, sectionLines: BudgetVsActualLine[], isExpense: boolean, totalBudget: number, totalActual: number) => (
    <>
-      <Table.Tr style={{ background: isExpense ? expenseBg : incomeBg }}>
+      <Table.Tr style={{ background: isExpense ? '#fde8e8' : '#e6f9e6' }}>
        <Table.Td colSpan={6} fw={700}>{title}</Table.Td>
      </Table.Tr>
      {sectionLines.map((line) => {
--- a/frontend/src/pages/reports/QuarterlyReportPage.tsx
+++ b/frontend/src/pages/reports/QuarterlyReportPage.tsx
@@ -8,7 +8,6 @@ import {
  IconTrendingUp, IconTrendingDown, IconAlertTriangle, IconChartBar,
 } from '@tabler/icons-react';
 import api from '../../services/api';
-import { usePreferencesStore } from '../../stores/preferencesStore';

 interface BudgetVsActualItem {
  account_id: string;
@@ -49,9 +48,6 @@ export function QuarterlyReportPage() {
  const currentQuarter = Math.ceil((now.getMonth() + 1) / 3);
  const defaultQuarter = currentQuarter;
  const defaultYear = now.getFullYear();
-  const isDark = usePreferencesStore((s) => s.colorScheme) === 'dark';
-  const incomeBg = isDark ? 'var(--mantine-color-green-9)' : '#e6f9e6';
-  const expenseBg = isDark ? 'var(--mantine-color-red-9)' : '#fde8e8';

  const [year, setYear] = useState(String(defaultYear));
  const [quarter, setQuarter] = useState(String(defaultQuarter));
@@ -211,7 +207,7 @@ export function QuarterlyReportPage() {
              </Table.Thead>
              <Table.Tbody>
                {incomeItems.length > 0 && (
-                  <Table.Tr style={{ background: incomeBg }}>
+                  <Table.Tr style={{ background: '#e6f9e6' }}>
                    <Table.Td colSpan={8} fw={700}>Income</Table.Td>
                  </Table.Tr>
                )}
@@ -219,7 +215,7 @@ export function QuarterlyReportPage() {
                  <BVARow key={item.account_id} item={item} isExpense={false} />
                ))}
                {incomeItems.length > 0 && (
-                  <Table.Tr style={{ background: incomeBg }}>
+                  <Table.Tr style={{ background: '#e6f9e6' }}>
                    <Table.Td colSpan={2} fw={700}>Total Income</Table.Td>
                    <Table.Td ta="right" fw={700} ff="monospace">{fmt(incomeItems.reduce((s, i) => s + i.quarter_budget, 0))}</Table.Td>
                    <Table.Td ta="right" fw={700} ff="monospace">{fmt(incomeItems.reduce((s, i) => s + i.quarter_actual, 0))}</Table.Td>
@@ -230,7 +226,7 @@ export function QuarterlyReportPage() {
                  </Table.Tr>
                )}
                {expenseItems.length > 0 && (
-                  <Table.Tr style={{ background: expenseBg }}>
+                  <Table.Tr style={{ background: '#fde8e8' }}>
                    <Table.Td colSpan={8} fw={700}>Expenses</Table.Td>
                  </Table.Tr>
                )}
@@ -238,7 +234,7 @@ export function QuarterlyReportPage() {
                  <BVARow key={item.account_id} item={item} isExpense={true} />
                ))}
                {expenseItems.length > 0 && (
-                  <Table.Tr style={{ background: expenseBg }}>
+                  <Table.Tr style={{ background: '#fde8e8' }}>
                    <Table.Td colSpan={2} fw={700}>Total Expenses</Table.Td>
                    <Table.Td ta="right" fw={700} ff="monospace">{fmt(expenseItems.reduce((s, i) => s + i.quarter_budget, 0))}</Table.Td>
                    <Table.Td ta="right" fw={700} ff="monospace">{fmt(expenseItems.reduce((s, i) => s + i.quarter_actual, 0))}</Table.Td>