From d9251c085039d35769aba1489aaab6eb95adbb20 Mon Sep 17 00:00:00 2001
From: Luca <102960244+Luca-Timo@users.noreply.github.com>
Date: Tue, 2 Jun 2026 10:59:36 +0200
Subject: [PATCH] feat(crm): Finder-style sortable column headers, default sort
 by issue date

Replace the sort <select> dropdowns on the invoice, quote and contract
list pages with clickable column headers that toggle asc/desc and show a
chevron indicator. Adds a shared SortableHeader component + useColumnSort
hook that maps clickable columns onto the server-side sort enum.
Make issue date (newest first) the standard sort on all three lists,
set at the frontend, route and service layers. Adds issue_asc/issue_desc
to invoices and an "Issued" column to the bills table so the default is
visible and toggleable. Extends sort coverage so every clickable column
has both directions (+customer_desc on all; +issue_asc/desc on
quotes/contracts). Storno rows remain listed.
---
 backend/src/routes/adminContracts.js          |  4 +-
 backend/src/routes/adminInvoices.js           |  4 +-
 backend/src/routes/adminQuotes.js             |  4 +-
 backend/src/services/contractService.js       | 13 ++-
 backend/src/services/invoiceService.js        |  9 +-
 backend/src/services/quoteService.js          | 13 ++-
 .../src/components/common/SortableHeader.tsx  | 90 +++++++++++++++++++
 frontend/src/components/common/index.ts       |  2 +
 frontend/src/i18n/locales/de.json             |  1 +
 frontend/src/i18n/locales/en.json             |  1 +
 .../src/pages/admin/bills/BillsListPage.tsx   | 40 +++++----
 .../admin/contracts/ContractsListPage.tsx     | 29 +++---
 .../src/pages/admin/quotes/QuotesListPage.tsx | 34 +++----
 frontend/src/services/bills.service.ts        |  3 +-
 frontend/src/services/contracts.service.ts    |  5 +-
 frontend/src/services/quotes.service.ts       |  6 +-
 16 files changed, 197 insertions(+), 61 deletions(-)
 create mode 100644 frontend/src/components/common/SortableHeader.tsx

diff --git a/backend/src/routes/adminContracts.js b/backend/src/routes/adminContracts.js
index 7a571635..b97137e9 100644
--- a/backend/src/routes/adminContracts.js
+++ b/backend/src/routes/adminContracts.js
@@ -286,7 +286,7 @@ router.get(
     query('status').optional().isString(),
     query('customerAccountId').optional().isInt({ min: 1 }),
     query('q').optional().isString(),
-    query('sort').optional().isIn(['newest', 'oldest', 'customer_asc']),
+    query('sort').optional().isIn(['newest', 'oldest', 'issue_asc', 'issue_desc', 'customer_asc', 'customer_desc']),
     query('page').optional().isInt({ min: 1 }),
     query('pageSize').optional().isInt({ min: 1, max: 200 }),
   ],
@@ -302,7 +302,7 @@ router.get(
     const pageSize = parseInt(req.query.pageSize, 10) || 25;
     const result = await contractService.listContracts({
       filters,
-      sort: req.query.sort || 'newest',
+      sort: req.query.sort || 'issue_desc',
       page,
       pageSize,
     });
diff --git a/backend/src/routes/adminInvoices.js b/backend/src/routes/adminInvoices.js
index 42375648..1a656da9 100644
--- a/backend/src/routes/adminInvoices.js
+++ b/backend/src/routes/adminInvoices.js
@@ -319,7 +319,7 @@ router.get(
     query('sourceQuoteId').optional({ values: 'falsy' }).isInt({ min: 1 }),
     query('unpaidOnly').optional({ values: 'falsy' }).isBoolean(),
     query('q').optional({ values: 'falsy' }).isString().isLength({ max: 255 }),
-    query('sort').optional({ values: 'falsy' }).isIn(['newest', 'oldest', 'due_asc', 'due_desc', 'value_asc', 'value_desc', 'customer_asc']),
+    query('sort').optional({ values: 'falsy' }).isIn(['newest', 'oldest', 'issue_asc', 'issue_desc', 'due_asc', 'due_desc', 'value_asc', 'value_desc', 'customer_asc', 'customer_desc']),
     query('page').optional({ values: 'falsy' }).isInt({ min: 1 }),
     query('pageSize').optional({ values: 'falsy' }).isInt({ min: 1, max: 100 }),
   ],
@@ -336,7 +336,7 @@ router.get(
         unpaidOnly: req.query.unpaidOnly === 'true' || req.query.unpaidOnly === true,
         q: req.query.q,
       },
-      sort: req.query.sort || 'newest',
+      sort: req.query.sort || 'issue_desc',
       page: req.query.page ? parseInt(req.query.page, 10) : 1,
       pageSize: req.query.pageSize ? parseInt(req.query.pageSize, 10) : 25,
     });
diff --git a/backend/src/routes/adminQuotes.js b/backend/src/routes/adminQuotes.js
index 417d6dda..b0769ec0 100644
--- a/backend/src/routes/adminQuotes.js
+++ b/backend/src/routes/adminQuotes.js
@@ -257,7 +257,7 @@ router.get(
     query('q').optional({ values: 'falsy' }).isString().isLength({ max: 255 }),
     query('from').optional({ values: 'falsy' }).isISO8601(),
     query('to').optional({ values: 'falsy' }).isISO8601(),
-    query('sort').optional({ values: 'falsy' }).isIn(['newest', 'oldest', 'customer_asc', 'value_asc', 'value_desc']),
+    query('sort').optional({ values: 'falsy' }).isIn(['newest', 'oldest', 'issue_asc', 'issue_desc', 'customer_asc', 'customer_desc', 'value_asc', 'value_desc']),
     query('page').optional({ values: 'falsy' }).isInt({ min: 1 }),
     query('pageSize').optional({ values: 'falsy' }).isInt({ min: 1, max: 100 }),
   ],
@@ -272,7 +272,7 @@ router.get(
         customerAccountId: req.query.customerAccountId ? parseInt(req.query.customerAccountId, 10) : null,
         from: req.query.from, to: req.query.to, q: req.query.q,
       },
-      sort: req.query.sort || 'newest',
+      sort: req.query.sort || 'issue_desc',
       page: req.query.page ? parseInt(req.query.page, 10) : 1,
       pageSize: req.query.pageSize ? parseInt(req.query.pageSize, 10) : 25,
     });
diff --git a/backend/src/services/contractService.js b/backend/src/services/contractService.js
index e443b4ef..46cc448d 100644
--- a/backend/src/services/contractService.js
+++ b/backend/src/services/contractService.js
@@ -621,7 +621,7 @@ async function buildRenderContext(contract, inclusions) {
 // Public API
 // ---------------------------------------------------------------------
 
-async function listContracts({ filters = {}, sort = 'newest', page = 1, pageSize = 25 } = {}) {
+async function listContracts({ filters = {}, sort = 'issue_desc', page = 1, pageSize = 25 } = {}) {
   return await withRetry(async () => {
     let query = db('contracts')
       .leftJoin('customer_accounts', 'contracts.customer_account_id', 'customer_accounts.id')
@@ -658,11 +658,22 @@ async function listContracts({ filters = {}, sort = 'newest', page = 1, pageSize
       case 'oldest':
         query = query.orderBy('contracts.created_at', 'asc').orderBy('contracts.id', 'asc');
         break;
+      case 'issue_asc':
+        query = query.orderBy('contracts.issue_date', 'asc').orderBy('contracts.id', 'asc');
+        break;
+      case 'issue_desc':
+        query = query.orderBy('contracts.issue_date', 'desc').orderBy('contracts.id', 'desc');
+        break;
       case 'customer_asc':
         query = query
           .orderByRaw('COALESCE(customer_accounts.company_name, customer_accounts.last_name, customer_accounts.email) asc')
           .orderBy('contracts.id', 'desc');
         break;
+      case 'customer_desc':
+        query = query
+          .orderByRaw('COALESCE(customer_accounts.company_name, customer_accounts.last_name, customer_accounts.email) desc')
+          .orderBy('contracts.id', 'desc');
+        break;
       case 'newest':
       default:
         query = query.orderBy('contracts.created_at', 'desc').orderBy('contracts.id', 'desc');
diff --git a/backend/src/services/invoiceService.js b/backend/src/services/invoiceService.js
index bc863f0c..1e1f09ba 100644
--- a/backend/src/services/invoiceService.js
+++ b/backend/src/services/invoiceService.js
@@ -410,7 +410,7 @@ async function getOrCreateMonthlyDraft(customer, adminId, trx) {
 // Public API
 // ---------------------------------------------------------------------
 
-async function listInvoices({ filters = {}, sort = 'newest', page = 1, pageSize = 25 } = {}) {
+async function listInvoices({ filters = {}, sort = 'issue_desc', page = 1, pageSize = 25 } = {}) {
   return await withRetry(async () => {
     let query = db('invoices')
       .leftJoin('customer_accounts', 'invoices.customer_account_id', 'customer_accounts.id')
@@ -477,6 +477,8 @@ async function listInvoices({ filters = {}, sort = 'newest', page = 1, pageSize
       // reflects when the row landed in the DB. id is the tiebreaker
       // for rows that share a created_at second.
       case 'oldest':       query = query.orderBy('invoices.created_at', 'asc').orderBy('invoices.id', 'asc'); break;
+      case 'issue_asc':    query = query.orderBy('invoices.issue_date', 'asc').orderBy('invoices.id', 'asc'); break;
+      case 'issue_desc':   query = query.orderBy('invoices.issue_date', 'desc').orderBy('invoices.id', 'desc'); break;
       case 'due_asc':      query = query.orderBy('invoices.due_date', 'asc'); break;
       case 'due_desc':     query = query.orderBy('invoices.due_date', 'desc'); break;
       case 'value_asc':    query = query.orderBy('invoices.total_amount_minor', 'asc'); break;
@@ -486,6 +488,11 @@ async function listInvoices({ filters = {}, sort = 'newest', page = 1, pageSize
           .orderByRaw('COALESCE(customer_accounts.company_name, customer_accounts.last_name, customer_accounts.email) asc')
           .orderBy('invoices.id', 'desc');
         break;
+      case 'customer_desc':
+        query = query
+          .orderByRaw('COALESCE(customer_accounts.company_name, customer_accounts.last_name, customer_accounts.email) desc')
+          .orderBy('invoices.id', 'desc');
+        break;
       case 'newest':
       default:
         query = query.orderBy('invoices.created_at', 'desc').orderBy('invoices.id', 'desc');
diff --git a/backend/src/services/quoteService.js b/backend/src/services/quoteService.js
index 0c993ca0..af277091 100644
--- a/backend/src/services/quoteService.js
+++ b/backend/src/services/quoteService.js
@@ -333,7 +333,7 @@ function ensureCustomerFeatureEnabled(customer, feature) {
  * Filters: { status[], customerAccountId, from, to, q }
  * Sort:    'newest' | 'oldest' | 'customer_asc' | 'value_asc' | 'value_desc'
  */
-async function listQuotes({ filters = {}, sort = 'newest', page = 1, pageSize = 25 } = {}) {
+async function listQuotes({ filters = {}, sort = 'issue_desc', page = 1, pageSize = 25 } = {}) {
   return await withRetry(async () => {
     let query = db('quotes')
       .leftJoin('customer_accounts', 'quotes.customer_account_id', 'customer_accounts.id')
@@ -385,11 +385,22 @@ async function listQuotes({ filters = {}, sort = 'newest', page = 1, pageSize =
       case 'oldest':
         query = query.orderBy('quotes.created_at', 'asc').orderBy('quotes.id', 'asc');
         break;
+      case 'issue_asc':
+        query = query.orderBy('quotes.issue_date', 'asc').orderBy('quotes.id', 'asc');
+        break;
+      case 'issue_desc':
+        query = query.orderBy('quotes.issue_date', 'desc').orderBy('quotes.id', 'desc');
+        break;
       case 'customer_asc':
         query = query
           .orderByRaw('COALESCE(customer_accounts.company_name, customer_accounts.last_name, customer_accounts.email) asc')
           .orderBy('quotes.id', 'desc');
         break;
+      case 'customer_desc':
+        query = query
+          .orderByRaw('COALESCE(customer_accounts.company_name, customer_accounts.last_name, customer_accounts.email) desc')
+          .orderBy('quotes.id', 'desc');
+        break;
       case 'value_asc':
         query = query.orderBy('quotes.total_amount_minor', 'asc');
         break;
diff --git a/frontend/src/components/common/SortableHeader.tsx b/frontend/src/components/common/SortableHeader.tsx
new file mode 100644
index 00000000..91edb1fa
--- /dev/null
+++ b/frontend/src/components/common/SortableHeader.tsx
@@ -0,0 +1,90 @@
+/**
+ * Finder-style sortable table header.
+ *
+ * The admin list pages (invoices / quotes / contracts) drive sorting
+ * through a single server-side `sort` enum (e.g. 'customer_asc'). This
+ * component + the `useColumnSort` hook map that flat enum onto clickable
+ * column headers: clicking a column applies its ascending/descending
+ * variant, clicking the active column again flips direction. The active
+ * column shows a filled chevron; inactive sortable columns show a faint
+ * up/down hint so it's discoverable that the header is clickable.
+ */
+import React, { useCallback, useMemo, useState } from 'react';
+import { ChevronUp, ChevronDown, ChevronsUpDown } from 'lucide-react';
+
+export type SortDir = 'asc' | 'desc';
+
+/** Maps one logical column to its two server-side sort enum values. */
+export interface SortPair {
+  asc: string;
+  desc: string;
+  /** Direction applied when this column is first clicked. Defaults to 'asc'. */
+  defaultDir?: SortDir;
+}
+
+export type SortColumnMap = Record<string, SortPair>;
+
+/**
+ * Holds the flat `sort` enum as the single source of truth and exposes
+ * the active column + a toggle that flips direction on re-click. Returns
+ * `sort` to feed straight into the list query and `setSort` for any
+ * legacy callers that still set the enum directly.
+ */
+export function useColumnSort<T extends string>(columns: SortColumnMap, initialSort: T) {
+  const [sort, setSort] = useState<T>(initialSort);
+
+  const active = useMemo(() => {
+    for (const [key, pair] of Object.entries(columns)) {
+      if (pair.asc === sort) return { key, dir: 'asc' as SortDir };
+      if (pair.desc === sort) return { key, dir: 'desc' as SortDir };
+    }
+    return { key: null as string | null, dir: 'asc' as SortDir };
+  }, [columns, sort]);
+
+  const toggle = useCallback((key: string) => {
+    const pair = columns[key];
+    if (!pair) return;
+    setSort((prev) => {
+      if (prev === pair.asc) return pair.desc as T;
+      if (prev === pair.desc) return pair.asc as T;
+      return (pair.defaultDir === 'desc' ? pair.desc : pair.asc) as T;
+    });
+  }, [columns]);
+
+  return { sort, setSort, activeKey: active.key, activeDir: active.dir, toggle };
+}
+
+interface SortableHeaderProps {
+  label: React.ReactNode;
+  columnKey: string;
+  activeKey: string | null;
+  activeDir: SortDir;
+  onSort: (key: string) => void;
+  align?: 'left' | 'right';
+}
+
+export const SortableHeader: React.FC<SortableHeaderProps> = ({
+  label, columnKey, activeKey, activeDir, onSort, align = 'left',
+}) => {
+  const active = activeKey === columnKey;
+  return (
+    <th className={`px-3 py-2 ${align === 'right' ? 'text-right' : 'text-left'}`}>
+      <button
+        type="button"
+        onClick={() => onSort(columnKey)}
+        className={`group inline-flex items-center gap-1 font-medium transition-colors hover:text-theme ${
+          align === 'right' ? 'flex-row-reverse' : ''
+        } ${active ? 'text-theme' : ''}`}
+      >
+        <span>{label}</span>
+        {active ? (
+          activeDir === 'asc'
+            ? <ChevronUp className="w-3 h-3" />
+            : <ChevronDown className="w-3 h-3" />
+        ) : (
+          <ChevronsUpDown className="w-3 h-3 opacity-30 group-hover:opacity-60" />
+        )}
+      </button>
+    </th>
+  );
+};
diff --git a/frontend/src/components/common/index.ts b/frontend/src/components/common/index.ts
index 68130e1a..6a11c004 100644
--- a/frontend/src/components/common/index.ts
+++ b/frontend/src/components/common/index.ts
@@ -3,6 +3,8 @@ export { CMSContentBlock } from './CMSContentBlock';
 export { Input } from './Input';
 export { CountrySelect } from './CountrySelect';
 export { LocalizedDateInput } from './LocalizedDateInput';
+export { SortableHeader, useColumnSort } from './SortableHeader';
+export type { SortDir, SortPair, SortColumnMap } from './SortableHeader';
 export { Card, CardHeader, CardContent, CardFooter } from './Card';
 export { Loading, LoadingSkeleton } from './Loading';
 export { ErrorBoundary, PageErrorBoundary } from './ErrorBoundary';
diff --git a/frontend/src/i18n/locales/de.json b/frontend/src/i18n/locales/de.json
index a8e43491..1a5b0e50 100644
--- a/frontend/src/i18n/locales/de.json
+++ b/frontend/src/i18n/locales/de.json
@@ -3582,6 +3582,7 @@
       "customer": "Kunde",
       "event": "Anlass",
       "installment": "Rate",
+      "issueDate": "Ausgestellt",
       "dueDate": "Fällig",
       "total": "Gesamt",
       "status": "Status"
diff --git a/frontend/src/i18n/locales/en.json b/frontend/src/i18n/locales/en.json
index 4bd19899..3ac57979 100644
--- a/frontend/src/i18n/locales/en.json
+++ b/frontend/src/i18n/locales/en.json
@@ -3522,6 +3522,7 @@
       "customer": "Customer",
       "event": "Event",
       "installment": "Installment",
+      "issueDate": "Issued",
       "dueDate": "Due",
       "total": "Total",
       "status": "Status"
diff --git a/frontend/src/pages/admin/bills/BillsListPage.tsx b/frontend/src/pages/admin/bills/BillsListPage.tsx
index f84c618e..e25fcbd6 100644
--- a/frontend/src/pages/admin/bills/BillsListPage.tsx
+++ b/frontend/src/pages/admin/bills/BillsListPage.tsx
@@ -8,7 +8,7 @@ import { Link, useNavigate } from 'react-router-dom';
 import { useQuery, useQueryClient } from '@tanstack/react-query';
 import { Plus, Search, Upload, X } from 'lucide-react';
 import { billsService, type InvoiceStatus, type InvoiceSort } from '../../../services/bills.service';
-import { Button, Card, Input, Loading, LocalizedDateInput } from '../../../components/common';
+import { Button, Card, Input, Loading, LocalizedDateInput, SortableHeader, useColumnSort, type SortColumnMap } from '../../../components/common';
 import { formatMoney } from '../../../components/admin/LineItemsTable';
 import { customerAdminService } from '../../../services/customerAdmin.service';
 import { useLocalizedDate } from '../../../hooks/useLocalizedDate';
@@ -16,6 +16,18 @@ import { toast } from 'react-toastify';
 
 const STATUSES: InvoiceStatus[] = ['scheduled', 'pending_delivery', 'sent', 'paid', 'overdue', 'cancelled', 'skipped'];
 
+// Maps each clickable column to its server-side sort enum pair. The "#"
+// column sorts by creation order (newest/oldest) since that's how the
+// invoice sequence is assigned; "Issued" sorts the admin-controlled
+// issue_date and is the default (newest issued first).
+const SORT_COLUMNS: SortColumnMap = {
+  number: { asc: 'oldest', desc: 'newest', defaultDir: 'desc' },
+  customer: { asc: 'customer_asc', desc: 'customer_desc' },
+  issue: { asc: 'issue_asc', desc: 'issue_desc', defaultDir: 'desc' },
+  due: { asc: 'due_asc', desc: 'due_desc' },
+  value: { asc: 'value_asc', desc: 'value_desc', defaultDir: 'desc' },
+};
+
 export const BillsListPage: React.FC = () => {
   const { t } = useTranslation();
   const navigate = useNavigate();
@@ -23,10 +35,12 @@ export const BillsListPage: React.FC = () => {
   const [search, setSearch] = useState('');
   const [statusFilter, setStatusFilter] = useState<InvoiceStatus[]>([]);
   const [unpaidOnly, setUnpaidOnly] = useState(false);
-  const [sort, setSort] = useState<InvoiceSort>('newest');
+  const { sort, activeKey, activeDir, toggle } = useColumnSort<InvoiceSort>(SORT_COLUMNS, 'issue_desc');
   const [page, setPage] = useState(1);
   const [importOpen, setImportOpen] = useState(false);
 
+  const onSort = (key: string) => { toggle(key); setPage(1); };
+
   const { data, isLoading } = useQuery({
     queryKey: ['invoices', { search, statusFilter, unpaidOnly, sort, page }],
     queryFn: () => billsService.list({
@@ -87,18 +101,6 @@ export const BillsListPage: React.FC = () => {
               onChange={(e) => { setSearch(e.target.value); setPage(1); }}
             />
           </div>
-          <select
-            className="px-3 py-2 rounded-md border border-neutral-300 dark:border-neutral-600 bg-white dark:bg-neutral-800 text-sm"
-            value={sort}
-            onChange={(e) => setSort(e.target.value as InvoiceSort)}
-          >
-            <option value="newest">{t('bills.sort.newest', 'Newest first')}</option>
-            <option value="due_asc">{t('bills.sort.dueAsc', 'Due soon first')}</option>
-            <option value="due_desc">{t('bills.sort.dueDesc', 'Due latest first')}</option>
-            <option value="customer_asc">{t('bills.sort.customerAsc', 'Customer A→Z')}</option>
-            <option value="value_asc">{t('bills.sort.valueAsc', 'Value low→high')}</option>
-            <option value="value_desc">{t('bills.sort.valueDesc', 'Value high→low')}</option>
-          </select>
           <label className="flex items-center gap-2 text-sm">
             <input type="checkbox" checked={unpaidOnly} onChange={(e) => setUnpaidOnly(e.target.checked)} />
             {t('bills.filter.unpaidOnly', 'Unpaid only')}
@@ -127,12 +129,13 @@ export const BillsListPage: React.FC = () => {
                 <table className="w-full text-sm">
                   <thead className="bg-neutral-50 dark:bg-neutral-800 text-neutral-700 dark:text-neutral-300">
                     <tr>
-                      <th className="px-3 py-2 text-left">#</th>
-                      <th className="px-3 py-2 text-left">{t('bills.table.customer', 'Customer')}</th>
+                      <SortableHeader label="#" columnKey="number" activeKey={activeKey} activeDir={activeDir} onSort={onSort} />
+                      <SortableHeader label={t('bills.table.customer', 'Customer')} columnKey="customer" activeKey={activeKey} activeDir={activeDir} onSort={onSort} />
                       <th className="px-3 py-2 text-left">{t('bills.table.event', 'Event')}</th>
                       <th className="px-3 py-2 text-left">{t('bills.table.installment', 'Installment')}</th>
-                      <th className="px-3 py-2 text-left">{t('bills.table.dueDate', 'Due')}</th>
-                      <th className="px-3 py-2 text-right">{t('bills.table.total', 'Total')}</th>
+                      <SortableHeader label={t('bills.table.issueDate', 'Issued')} columnKey="issue" activeKey={activeKey} activeDir={activeDir} onSort={onSort} />
+                      <SortableHeader label={t('bills.table.dueDate', 'Due')} columnKey="due" activeKey={activeKey} activeDir={activeDir} onSort={onSort} />
+                      <SortableHeader label={t('bills.table.total', 'Total')} columnKey="value" activeKey={activeKey} activeDir={activeDir} onSort={onSort} align="right" />
                       <th className="px-3 py-2 text-left">{t('bills.table.status', 'Status')}</th>
                     </tr>
                   </thead>
@@ -177,6 +180,7 @@ export const BillsListPage: React.FC = () => {
                         <td className="px-3 py-2 text-xs text-muted-theme">
                           {inv.installmentTotal > 1 ? `${inv.installmentIndex + 1}/${inv.installmentTotal} · ${inv.installmentLabel || ''}` : '—'}
                         </td>
+                        <td className="px-3 py-2 whitespace-nowrap">{inv.issueDate ? fmtDate(inv.issueDate) : '—'}</td>
                         <td className="px-3 py-2">{fmtDate(inv.dueDate)}</td>
                         <td className="px-3 py-2 text-right tabular-nums">
                           {formatMoney(Number(inv.totalAmountMinor) / 100, inv.currency)}
diff --git a/frontend/src/pages/admin/contracts/ContractsListPage.tsx b/frontend/src/pages/admin/contracts/ContractsListPage.tsx
index 185d0d48..2e15af6b 100644
--- a/frontend/src/pages/admin/contracts/ContractsListPage.tsx
+++ b/frontend/src/pages/admin/contracts/ContractsListPage.tsx
@@ -15,7 +15,7 @@ import { useTranslation } from 'react-i18next';
 import { Link, useNavigate } from 'react-router-dom';
 import { useQuery } from '@tanstack/react-query';
 import { Plus, Search, BookOpen } from 'lucide-react';
-import { Button, Card, Loading } from '../../../components/common';
+import { Button, Card, Loading, SortableHeader, useColumnSort, type SortColumnMap } from '../../../components/common';
 import {
   contractsService,
   type ContractStatus,
@@ -27,15 +27,25 @@ const STATUSES: ContractStatus[] = [
   'draft', 'sent', 'signed_by_customer', 'signed_by_admin', 'fully_signed', 'cancelled',
 ];
 
+// "Number" sorts by creation order (newest/oldest); "Issued" sorts by
+// the admin-controlled issue_date, which can drift from chronology.
+const SORT_COLUMNS: SortColumnMap = {
+  number: { asc: 'oldest', desc: 'newest', defaultDir: 'desc' },
+  customer: { asc: 'customer_asc', desc: 'customer_desc' },
+  issue: { asc: 'issue_asc', desc: 'issue_desc', defaultDir: 'desc' },
+};
+
 export const ContractsListPage: React.FC = () => {
   const { t } = useTranslation();
   const navigate = useNavigate();
   const { format } = useLocalizedDate();
   const [search, setSearch] = useState('');
   const [statusFilter, setStatusFilter] = useState<ContractStatus[]>([]);
-  const [sort, setSort] = useState<ContractSort>('newest');
+  const { sort, activeKey, activeDir, toggle } = useColumnSort<ContractSort>(SORT_COLUMNS, 'issue_desc');
   const [page, setPage] = useState(1);
 
+  const onSort = (key: string) => { toggle(key); setPage(1); };
+
   const { data, isLoading } = useQuery({
     queryKey: ['contracts', { search, statusFilter, sort, page }],
     queryFn: () => contractsService.list({
@@ -98,15 +108,6 @@ export const ContractsListPage: React.FC = () => {
               onChange={(e) => { setSearch(e.target.value); setPage(1); }}
             />
           </div>
-          <select
-            className="px-3 py-2 rounded-md border border-neutral-300 dark:border-neutral-600 bg-white dark:bg-neutral-800 text-sm"
-            value={sort}
-            onChange={(e) => setSort(e.target.value as ContractSort)}
-          >
-            <option value="newest">{t('contracts.list.sort.newest', 'Newest first')}</option>
-            <option value="oldest">{t('contracts.list.sort.oldest', 'Oldest first')}</option>
-            <option value="customer_asc">{t('contracts.list.sort.customer', 'Customer A→Z')}</option>
-          </select>
         </div>
 
         <div className="mt-3 flex flex-wrap gap-1">
@@ -135,10 +136,10 @@ export const ContractsListPage: React.FC = () => {
                 <table className="w-full text-sm">
                   <thead className="bg-neutral-50 dark:bg-neutral-800 text-neutral-700 dark:text-neutral-300">
                     <tr>
-                      <th className="px-3 py-2 text-left">{t('contracts.list.table.number', 'Number')}</th>
-                      <th className="px-3 py-2 text-left">{t('contracts.list.table.customer', 'Customer')}</th>
+                      <SortableHeader label={t('contracts.list.table.number', 'Number')} columnKey="number" activeKey={activeKey} activeDir={activeDir} onSort={onSort} />
+                      <SortableHeader label={t('contracts.list.table.customer', 'Customer')} columnKey="customer" activeKey={activeKey} activeDir={activeDir} onSort={onSort} />
                       <th className="px-3 py-2 text-left">{t('contracts.list.table.title', 'Title')}</th>
-                      <th className="px-3 py-2 text-left">{t('contracts.list.table.issueDate', 'Issued')}</th>
+                      <SortableHeader label={t('contracts.list.table.issueDate', 'Issued')} columnKey="issue" activeKey={activeKey} activeDir={activeDir} onSort={onSort} />
                       <th className="px-3 py-2 text-left">{t('contracts.list.table.status', 'Status')}</th>
                     </tr>
                   </thead>
diff --git a/frontend/src/pages/admin/quotes/QuotesListPage.tsx b/frontend/src/pages/admin/quotes/QuotesListPage.tsx
index a765b7b3..21c2ec34 100644
--- a/frontend/src/pages/admin/quotes/QuotesListPage.tsx
+++ b/frontend/src/pages/admin/quotes/QuotesListPage.tsx
@@ -8,21 +8,32 @@ import { Link, useNavigate } from 'react-router-dom';
 import { useQuery } from '@tanstack/react-query';
 import { Plus, Search } from 'lucide-react';
 import { quotesService, type QuoteStatus, type QuoteSort } from '../../../services/quotes.service';
-import { Button, Card, Loading } from '../../../components/common';
+import { Button, Card, Loading, SortableHeader, useColumnSort, type SortColumnMap } from '../../../components/common';
 import { formatMoney } from '../../../components/admin/LineItemsTable';
 import { useLocalizedDate } from '../../../hooks/useLocalizedDate';
 
 const STATUSES: QuoteStatus[] = ['draft', 'sent', 'accepted', 'declined', 'expired', 'converted'];
 
+// "#" sorts by creation order (newest/oldest); "Issued" sorts by the
+// admin-controlled issue_date, which can drift from chronology.
+const SORT_COLUMNS: SortColumnMap = {
+  number: { asc: 'oldest', desc: 'newest', defaultDir: 'desc' },
+  customer: { asc: 'customer_asc', desc: 'customer_desc' },
+  issue: { asc: 'issue_asc', desc: 'issue_desc', defaultDir: 'desc' },
+  value: { asc: 'value_asc', desc: 'value_desc', defaultDir: 'desc' },
+};
+
 export const QuotesListPage: React.FC = () => {
   const { t } = useTranslation();
   const navigate = useNavigate();
   const { format: fmtDate } = useLocalizedDate();
   const [search, setSearch] = useState('');
   const [statusFilter, setStatusFilter] = useState<QuoteStatus[]>([]);
-  const [sort, setSort] = useState<QuoteSort>('newest');
+  const { sort, activeKey, activeDir, toggle } = useColumnSort<QuoteSort>(SORT_COLUMNS, 'issue_desc');
   const [page, setPage] = useState(1);
 
+  const onSort = (key: string) => { toggle(key); setPage(1); };
+
   const { data, isLoading } = useQuery({
     queryKey: ['quotes', { search, statusFilter, sort, page }],
     queryFn: () => quotesService.list({
@@ -73,17 +84,6 @@ export const QuotesListPage: React.FC = () => {
               onChange={(e) => { setSearch(e.target.value); setPage(1); }}
             />
           </div>
-          <select
-            className="px-3 py-2 rounded-md border border-neutral-300 dark:border-neutral-600 bg-white dark:bg-neutral-800 text-sm"
-            value={sort}
-            onChange={(e) => setSort(e.target.value as QuoteSort)}
-          >
-            <option value="newest">{t('quotes.sort.newest', 'Newest first')}</option>
-            <option value="oldest">{t('quotes.sort.oldest', 'Oldest first')}</option>
-            <option value="customer_asc">{t('quotes.sort.customerAsc', 'Customer A→Z')}</option>
-            <option value="value_asc">{t('quotes.sort.valueAsc', 'Value low→high')}</option>
-            <option value="value_desc">{t('quotes.sort.valueDesc', 'Value high→low')}</option>
-          </select>
         </div>
         <div className="mt-3 flex flex-wrap gap-1">
           {STATUSES.map((s) => {
@@ -111,11 +111,11 @@ export const QuotesListPage: React.FC = () => {
                 <table className="w-full text-sm">
                   <thead className="bg-neutral-50 dark:bg-neutral-800 text-neutral-700 dark:text-neutral-300">
                     <tr>
-                      <th className="px-3 py-2 text-left">#</th>
-                      <th className="px-3 py-2 text-left">{t('quotes.table.customer', 'Customer')}</th>
+                      <SortableHeader label="#" columnKey="number" activeKey={activeKey} activeDir={activeDir} onSort={onSort} />
+                      <SortableHeader label={t('quotes.table.customer', 'Customer')} columnKey="customer" activeKey={activeKey} activeDir={activeDir} onSort={onSort} />
                       <th className="px-3 py-2 text-left">{t('quotes.table.event', 'Event')}</th>
-                      <th className="px-3 py-2 text-left">{t('quotes.table.issueDate', 'Issued')}</th>
-                      <th className="px-3 py-2 text-right">{t('quotes.table.total', 'Total')}</th>
+                      <SortableHeader label={t('quotes.table.issueDate', 'Issued')} columnKey="issue" activeKey={activeKey} activeDir={activeDir} onSort={onSort} />
+                      <SortableHeader label={t('quotes.table.total', 'Total')} columnKey="value" activeKey={activeKey} activeDir={activeDir} onSort={onSort} align="right" />
                       <th className="px-3 py-2 text-left">{t('quotes.table.status', 'Status')}</th>
                     </tr>
                   </thead>
diff --git a/frontend/src/services/bills.service.ts b/frontend/src/services/bills.service.ts
index deb05942..daa93720 100644
--- a/frontend/src/services/bills.service.ts
+++ b/frontend/src/services/bills.service.ts
@@ -19,9 +19,10 @@ export type InvoiceStatus = 'scheduled' | 'sent' | 'paid' | 'overdue' | 'cancell
 export type InvoiceKind = 'invoice' | 'storno';
 export type InvoiceSort =
   | 'newest' | 'oldest'
+  | 'issue_asc' | 'issue_desc'
   | 'due_asc' | 'due_desc'
   | 'value_asc' | 'value_desc'
-  | 'customer_asc';
+  | 'customer_asc' | 'customer_desc';
 
 export type InvoiceQrFormat = 'swiss' | 'epc' | 'none';
 
diff --git a/frontend/src/services/contracts.service.ts b/frontend/src/services/contracts.service.ts
index 3e432a33..3ed37b8e 100644
--- a/frontend/src/services/contracts.service.ts
+++ b/frontend/src/services/contracts.service.ts
@@ -43,7 +43,10 @@ export type ContractStatus =
   | 'fully_signed'
   | 'cancelled';
 
-export type ContractSort = 'newest' | 'oldest' | 'customer_asc';
+export type ContractSort =
+  | 'newest' | 'oldest'
+  | 'issue_asc' | 'issue_desc'
+  | 'customer_asc' | 'customer_desc';
 
 /** Canonical section enum kept in sync with backend SECTIONS_ORDER
  *  and contractBlocksService.ALLOWED_SECTIONS. Renaming any value
diff --git a/frontend/src/services/quotes.service.ts b/frontend/src/services/quotes.service.ts
index a0c58ab2..8feb9923 100644
--- a/frontend/src/services/quotes.service.ts
+++ b/frontend/src/services/quotes.service.ts
@@ -5,7 +5,11 @@
 import { api } from '../config/api';
 
 export type QuoteStatus = 'draft' | 'sent' | 'accepted' | 'declined' | 'expired' | 'converted';
-export type QuoteSort = 'newest' | 'oldest' | 'customer_asc' | 'value_asc' | 'value_desc';
+export type QuoteSort =
+  | 'newest' | 'oldest'
+  | 'issue_asc' | 'issue_desc'
+  | 'customer_asc' | 'customer_desc'
+  | 'value_asc' | 'value_desc';
 
 export interface QuoteLineItem {
   id?: number;