Address all QA review warnings and suggestions for entity pages

Warnings fixed:
- 3.1: _compute_display_name stale-data bug on all-names-clear
- 3.3: Location getValue unsafe type cast replaced with typed helper
- 3.5: Explicit updated_at timestamp refresh in locations router
- 3.6: Drop deprecated relationship column (migration 021, model, schema, TS type)

Suggestions fixed:
- 4.1: CategoryAutocomplete keyboard navigation (ArrowUp/Down, Enter, Escape)
- 4.2: Mobile detail panel backdrop click-to-close on both pages
- 4.3: PersonCreate whitespace bypass in require_some_name validator
- 4.5/4.6: Extract SortIcon, DataRow, SectionHeader from EntityTable render body
- 4.8: PersonForm sends null instead of empty string for birthday
- 4.10: Remove unnecessary executeDelete wrapper in EntityDetailPanel

Also includes previously completed fixes from prior session:
- 2.1: Remove Z suffix from naive timestamp in formatUpdatedAt
- 3.2: Drag-then-click conflict prevention in SortableCategoryChip
- 3.4: localStorage JSON shape validation in useCategoryOrder
- 4.4: Category chip styling consistency (both pages use inline hsl styles)
- 4.9: restrictToHorizontalAxis modifier on CategoryFilterBar drag

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

backend/alembic/versions/021_drop_person_relationship_column.py

@@ -0,0 +1,21 @@
+"""Drop deprecated relationship column from people table
+
+Revision ID: 021
+Revises: 020
+Create Date: 2026-02-25
+"""
+from alembic import op
+import sqlalchemy as sa
+
+revision = '021'
+down_revision = '020'
+branch_labels = None
+depends_on = None
+
+
+def upgrade() -> None:
+    op.drop_column('people', 'relationship')
+
+
+def downgrade() -> None:
+    op.add_column('people', sa.Column('relationship', sa.String(100), nullable=True))

backend/app/models/person.py

@@ -1,5 +1,5 @@
 from sqlalchemy import String, Text, Date, Boolean, func, text
-from sqlalchemy.orm import Mapped, mapped_column, relationship as sa_relationship
+from sqlalchemy.orm import Mapped, mapped_column, relationship
 from datetime import datetime, date
 from typing import Optional, List
 from app.database import Base
@@ -14,7 +14,6 @@ class Person(Base):
     phone: Mapped[Optional[str]] = mapped_column(String(50), nullable=True)
     address: Mapped[Optional[str]] = mapped_column(Text, nullable=True)
     birthday: Mapped[Optional[date]] = mapped_column(Date, nullable=True)
-    relationship: Mapped[Optional[str]] = mapped_column(String(100), nullable=True)
     notes: Mapped[Optional[str]] = mapped_column(Text, nullable=True)
     # Extended fields
     first_name: Mapped[Optional[str]] = mapped_column(String(100), nullable=True)
@@ -29,4 +28,4 @@ class Person(Base):
     updated_at: Mapped[datetime] = mapped_column(default=func.now(), onupdate=func.now())
 
     # Relationships
-    assigned_tasks: Mapped[List["ProjectTask"]] = sa_relationship(back_populates="person")
+    assigned_tasks: Mapped[List["ProjectTask"]] = relationship(back_populates="person")

backend/app/routers/locations.py

@@ -1,6 +1,7 @@
 from fastapi import APIRouter, Depends, HTTPException, Query
 from sqlalchemy.ext.asyncio import AsyncSession
 from sqlalchemy import select, or_
+from datetime import datetime, timezone
 from typing import Optional, List
 import asyncio
 import json
@@ -151,6 +152,9 @@ async def update_location(
     for key, value in update_data.items():
         setattr(location, key, value)
 
+    # Guarantee timestamp refresh regardless of DB driver behaviour
+    location.updated_at = datetime.now(timezone.utc).replace(tzinfo=None)
+
     await db.commit()
     await db.refresh(location)
 

backend/app/routers/people.py

@@ -19,13 +19,14 @@ def _compute_display_name(
     nickname: Optional[str],
     name: Optional[str],
 ) -> str:
-    """Denormalise a display name. Nickname wins; else 'First Last'; else legacy name."""
+    """Denormalise a display name. Nickname wins; else 'First Last'; else legacy name; else empty."""
     if nickname:
         return nickname
     full = ((first_name or '') + ' ' + (last_name or '')).strip()
     if full:
         return full
-    return name or ''
+    # Don't fall back to stale `name` if all fields were explicitly cleared
+    return (name or '').strip() if name else ''
 
 
 @router.get("/", response_model=List[PersonResponse])

backend/app/schemas/person.py

@@ -24,7 +24,12 @@ class PersonCreate(BaseModel):
 
     @model_validator(mode='after')
     def require_some_name(self) -> 'PersonCreate':
-        if not any([self.name, self.first_name, self.last_name, self.nickname]):
+        if not any([
+            self.name and self.name.strip(),
+            self.first_name and self.first_name.strip(),
+            self.last_name and self.last_name.strip(),
+            self.nickname and self.nickname.strip(),
+        ]):
             raise ValueError('At least one name field is required')
         return self
 
@@ -72,7 +77,6 @@ class PersonResponse(BaseModel):
     address: Optional[str]
     birthday: Optional[date]
     category: Optional[str]
-    relationship: Optional[str]         # deprecated — kept for legacy calendar/birthday compat, will be removed
     is_favourite: bool
     company: Optional[str]
     job_title: Optional[str]

frontend/package-lock.json

@@ -8,6 +8,10 @@
       "name": "umbra",
       "version": "1.0.0",
       "dependencies": {
+        "@dnd-kit/core": "^6.1.0",
+        "@dnd-kit/modifiers": "^9.0.0",
+        "@dnd-kit/sortable": "^8.0.0",
+        "@dnd-kit/utilities": "^3.2.2",
         "@fullcalendar/daygrid": "^6.1.15",
         "@fullcalendar/interaction": "^6.1.15",
         "@fullcalendar/react": "^6.1.15",
@@ -330,6 +334,73 @@
         "node": ">=6.9.0"
       }
     },
+    "node_modules/@dnd-kit/accessibility": {
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/@dnd-kit/accessibility/-/accessibility-3.1.1.tgz",
+      "integrity": "sha512-2P+YgaXF+gRsIihwwY1gCsQSYnu9Zyj2py8kY5fFvUM1qm2WA2u639R6YNVfU4GWr+ZM5mqEsfHZZLoRONbemw==",
+      "license": "MIT",
+      "dependencies": {
+        "tslib": "^2.0.0"
+      },
+      "peerDependencies": {
+        "react": ">=16.8.0"
+      }
+    },
+    "node_modules/@dnd-kit/core": {
+      "version": "6.3.1",
+      "resolved": "https://registry.npmjs.org/@dnd-kit/core/-/core-6.3.1.tgz",
+      "integrity": "sha512-xkGBRQQab4RLwgXxoqETICr6S5JlogafbhNsidmrkVv2YRs5MLwpjoF2qpiGjQt8S9AoxtIV603s0GIUpY5eYQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@dnd-kit/accessibility": "^3.1.1",
+        "@dnd-kit/utilities": "^3.2.2",
+        "tslib": "^2.0.0"
+      },
+      "peerDependencies": {
+        "react": ">=16.8.0",
+        "react-dom": ">=16.8.0"
+      }
+    },
+    "node_modules/@dnd-kit/modifiers": {
+      "version": "9.0.0",
+      "resolved": "https://registry.npmjs.org/@dnd-kit/modifiers/-/modifiers-9.0.0.tgz",
+      "integrity": "sha512-ybiLc66qRGuZoC20wdSSG6pDXFikui/dCNGthxv4Ndy8ylErY0N3KVxY2bgo7AWwIbxDmXDg3ylAFmnrjcbVvw==",
+      "license": "MIT",
+      "dependencies": {
+        "@dnd-kit/utilities": "^3.2.2",
+        "tslib": "^2.0.0"
+      },
+      "peerDependencies": {
+        "@dnd-kit/core": "^6.3.0",
+        "react": ">=16.8.0"
+      }
+    },
+    "node_modules/@dnd-kit/sortable": {
+      "version": "8.0.0",
+      "resolved": "https://registry.npmjs.org/@dnd-kit/sortable/-/sortable-8.0.0.tgz",
+      "integrity": "sha512-U3jk5ebVXe1Lr7c2wU7SBZjcWdQP+j7peHJfCspnA81enlu88Mgd7CC8Q+pub9ubP7eKVETzJW+IBAhsqbSu/g==",
+      "license": "MIT",
+      "dependencies": {
+        "@dnd-kit/utilities": "^3.2.2",
+        "tslib": "^2.0.0"
+      },
+      "peerDependencies": {
+        "@dnd-kit/core": "^6.1.0",
+        "react": ">=16.8.0"
+      }
+    },
+    "node_modules/@dnd-kit/utilities": {
+      "version": "3.2.2",
+      "resolved": "https://registry.npmjs.org/@dnd-kit/utilities/-/utilities-3.2.2.tgz",
+      "integrity": "sha512-+MKAJEOfaBe5SmV6t34p80MMKhjvUz0vRrvVJbPT0WElzaOJ/1xs+D+KDv+tD/NE5ujfrChEcshd4fLn0wpiqg==",
+      "license": "MIT",
+      "dependencies": {
+        "tslib": "^2.0.0"
+      },
+      "peerDependencies": {
+        "react": ">=16.8.0"
+      }
+    },
     "node_modules/@esbuild/aix-ppc64": {
       "version": "0.25.12",
       "resolved": "https://registry.npmjs.org/@esbuild/aix-ppc64/-/aix-ppc64-0.25.12.tgz",
@@ -3055,6 +3126,12 @@
       "dev": true,
       "license": "Apache-2.0"
     },
+    "node_modules/tslib": {
+      "version": "2.8.1",
+      "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.8.1.tgz",
+      "integrity": "sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w==",
+      "license": "0BSD"
+    },
     "node_modules/typescript": {
       "version": "5.9.3",
       "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.9.3.tgz",

frontend/package.json

@@ -9,24 +9,25 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "@dnd-kit/core": "^6.1.0",
+    "@dnd-kit/modifiers": "^9.0.0",
+    "@dnd-kit/sortable": "^8.0.0",
+    "@dnd-kit/utilities": "^3.2.2",
+    "@fullcalendar/daygrid": "^6.1.15",
+    "@fullcalendar/interaction": "^6.1.15",
+    "@fullcalendar/react": "^6.1.15",
+    "@fullcalendar/timegrid": "^6.1.15",
+    "@tanstack/react-query": "^5.62.0",
+    "axios": "^1.7.9",
+    "class-variance-authority": "^0.7.1",
+    "clsx": "^2.1.1",
+    "date-fns": "^4.1.0",
+    "lucide-react": "^0.468.0",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "react-router-dom": "^6.28.0",
-    "@tanstack/react-query": "^5.62.0",
-    "axios": "^1.7.9",
-    "@fullcalendar/react": "^6.1.15",
-    "@fullcalendar/daygrid": "^6.1.15",
-    "@fullcalendar/timegrid": "^6.1.15",
-    "@fullcalendar/interaction": "^6.1.15",
-    "lucide-react": "^0.468.0",
-    "date-fns": "^4.1.0",
     "sonner": "^1.7.1",
-    "clsx": "^2.1.1",
+    "tailwind-merge": "^2.6.0"
-    "tailwind-merge": "^2.6.0",
-    "class-variance-authority": "^0.7.1",
-    "@dnd-kit/core": "^6.1.0",
-    "@dnd-kit/sortable": "^8.0.0",
-    "@dnd-kit/utilities": "^3.2.2"
   },
   "devDependencies": {
     "@types/react": "^18.3.12",

frontend/src/components/locations/LocationsPage.tsx

@@ -14,6 +14,7 @@ import {
   type PanelField,
 } from '@/components/shared';
 import { useTableVisibility } from '@/hooks/useTableVisibility';
+import { useCategoryOrder } from '@/hooks/useCategoryOrder';
 import LocationForm from './LocationForm';
 
 export default function LocationsPage() {
@@ -74,6 +75,8 @@ export default function LocationsPage() {
     [locations]
   );
 
+  const { orderedCategories, reorder: reorderCategories } = useCategoryOrder('locations', allCategories);
+
   const sortedLocations = useMemo(() => {
     return [...locations].sort((a, b) => {
       const aVal = String(a[sortKey as keyof Location] ?? '');
@@ -107,19 +110,20 @@ export default function LocationsPage() {
     [sortedLocations, activeFilters, search, showPinned]
   );
 
-  // Build row groups for the table
+  // Build row groups for the table — ordered by custom category order
   const groups = useMemo(() => {
     if (activeFilters.length <= 1) {
       const label = activeFilters.length === 1 ? activeFilters[0] : 'All';
       return [{ label, rows: filteredLocations }];
     }
-    return activeFilters
+    return orderedCategories
+      .filter((cat) => activeFilters.includes(cat))
       .map((cat) => ({
         label: cat,
         rows: filteredLocations.filter((l) => l.category === cat),
       }))
       .filter((g) => g.rows.length > 0);
-  }, [activeFilters, filteredLocations]);
+  }, [activeFilters, filteredLocations, orderedCategories]);
 
   const selectedLocation = useMemo(
     () => locations.find((l) => l.id === selectedLocationId) ?? null,
@@ -165,6 +169,10 @@ export default function LocationsPage() {
       prev.includes(cat) ? prev.filter((c) => c !== cat) : [...prev, cat]
     );
   };
+  const selectAllCategories = () => {
+    const allSelected = orderedCategories.every((c) => activeFilters.includes(c));
+    setActiveFilters(allSelected ? [] : [...orderedCategories]);
+  };
 
   const columns: ColumnDef<Location>[] = [
     {
@@ -262,9 +270,12 @@ export default function LocationsPage() {
         </div>
       )}
       getUpdatedAt={(l) => l.updated_at}
-      getValue={(l, key) =>
+      getValue={(l, key) => {
-        (l[key as keyof Location] as string | undefined) ?? undefined
+        const val = l[key as keyof Location];
-      }
+        if (val == null || val === '') return undefined;
+        if (typeof val === 'boolean') return undefined;
+        return String(val);
+      }}
       isFavourite={selectedLocation?.is_frequent}
       onToggleFavourite={() => selectedLocation && toggleFrequentMutation.mutate(selectedLocation)}
       favouriteLabel="frequent"
@@ -279,13 +290,15 @@ export default function LocationsPage() {
 
         <div className="flex-1 min-w-0">
           <CategoryFilterBar
-            categories={allCategories}
+            categories={orderedCategories}
             activeFilters={activeFilters}
             pinnedLabel="Frequent"
             showPinned={showPinned}
             onToggleAll={() => setActiveFilters([])}
             onTogglePinned={() => setShowPinned((v) => !v)}
             onToggleCategory={handleToggleCategory}
+            onSelectAllCategories={selectAllCategories}
+            onReorderCategories={reorderCategories}
             searchValue={search}
             onSearchChange={setSearch}
           />
@@ -362,8 +375,14 @@ export default function LocationsPage() {
 
       {/* Mobile detail panel overlay */}
       {panelOpen && selectedLocation && (
-        <div className="lg:hidden fixed inset-0 z-50 bg-background/80 backdrop-blur-sm">
+        <div
-          <div className="fixed inset-y-0 right-0 w-full sm:w-[400px] bg-card border-l border-border shadow-lg">
+          className="lg:hidden fixed inset-0 z-50 bg-background/80 backdrop-blur-sm"
+          onClick={() => setSelectedLocationId(null)}
+        >
+          <div
+            className="fixed inset-y-0 right-0 w-full sm:w-[400px] bg-card border-l border-border shadow-lg"
+            onClick={(e) => e.stopPropagation()}
+          >
             {renderPanel()}
           </div>
         </div>

frontend/src/components/people/PeoplePage.tsx

@@ -21,6 +21,7 @@ import {
   getDaysUntilBirthday,
 } from '@/components/shared/utils';
 import { useTableVisibility } from '@/hooks/useTableVisibility';
+import { useCategoryOrder } from '@/hooks/useCategoryOrder';
 import PersonForm from './PersonForm';
 
 // ---------------------------------------------------------------------------
@@ -150,7 +151,13 @@ const columns: ColumnDef<Person>[] = [
     visibilityLevel: 'all',
     render: (p) =>
       p.category ? (
-        <span className="px-2 py-0.5 text-xs rounded bg-accent/10 text-accent">
+        <span
+          className="px-2 py-0.5 text-xs rounded"
+          style={{
+            backgroundColor: 'hsl(var(--accent-color) / 0.1)',
+            color: 'hsl(var(--accent-color))',
+          }}
+        >
           {p.category}
         </span>
       ) : (
@@ -207,6 +214,8 @@ export default function PeoplePage() {
     return Array.from(cats).sort();
   }, [people]);
 
+  const { orderedCategories, reorder: reorderCategories } = useCategoryOrder('people', allCategories);
+
   // Favourites (pinned section) — sorted
   const favourites = useMemo(
     () => sortPeople(people.filter((p) => p.is_favourite), sortKey, sortDir),
@@ -239,19 +248,21 @@ export default function PeoplePage() {
     return sortPeople(list, sortKey, sortDir);
   }, [people, showPinned, activeFilters, search, sortKey, sortDir]);
 
-  // Build row groups for the table
+  // Build row groups for the table — ordered by custom category order
   const groups = useMemo(() => {
     if (activeFilters.length <= 1) {
       const label = activeFilters.length === 1 ? activeFilters[0] : 'All';
       return [{ label, rows: filteredPeople }];
     }
-    return activeFilters
+    // Use orderedCategories to control section order, filtered to active only
+    return orderedCategories
+      .filter((cat) => activeFilters.includes(cat))
       .map((cat) => ({
         label: cat,
         rows: filteredPeople.filter((p) => p.category === cat),
       }))
       .filter((g) => g.rows.length > 0);
-  }, [activeFilters, filteredPeople]);
+  }, [activeFilters, filteredPeople, orderedCategories]);
 
   // Stats
   const totalCount = people.length;
@@ -288,6 +299,10 @@ export default function PeoplePage() {
       prev.includes(cat) ? prev.filter((c) => c !== cat) : [...prev, cat]
     );
   };
+  const selectAllCategories = () => {
+    const allSelected = orderedCategories.every((c) => activeFilters.includes(c));
+    setActiveFilters(allSelected ? [] : [...orderedCategories]);
+  };
 
   // Delete mutation
   const deleteMutation = useMutation({
@@ -393,10 +408,12 @@ export default function PeoplePage() {
           activeFilters={activeFilters}
           pinnedLabel="Favourites"
           showPinned={showPinned}
-          categories={allCategories}
+          categories={orderedCategories}
           onToggleAll={toggleAll}
           onTogglePinned={togglePinned}
           onToggleCategory={toggleCategory}
+          onSelectAllCategories={selectAllCategories}
+          onReorderCategories={reorderCategories}
           searchValue={search}
           onSearchChange={setSearch}
         />
@@ -517,8 +534,14 @@ export default function PeoplePage() {
 
       {/* Mobile detail panel overlay */}
       {panelOpen && selectedPerson && (
-        <div className="lg:hidden fixed inset-0 z-50 bg-background/80 backdrop-blur-sm">
+        <div
-          <div className="fixed inset-y-0 right-0 w-full sm:w-[400px] bg-card border-l border-border shadow-lg">
+          className="lg:hidden fixed inset-0 z-50 bg-background/80 backdrop-blur-sm"
+          onClick={() => setSelectedPersonId(null)}
+        >
+          <div
+            className="fixed inset-y-0 right-0 w-full sm:w-[400px] bg-card border-l border-border shadow-lg"
+            onClick={(e) => e.stopPropagation()}
+          >
             {renderPanel()}
           </div>
         </div>

frontend/src/components/people/PersonForm.tsx

@@ -89,7 +89,7 @@ export default function PersonForm({ person, categories, onClose }: PersonFormPr
 
   const handleSubmit = (e: FormEvent) => {
     e.preventDefault();
-    mutation.mutate(formData);
+    mutation.mutate({ ...formData, birthday: formData.birthday || null } as typeof formData);
   };
 
   return (

frontend/src/components/shared/CategoryAutocomplete.tsx

@@ -17,12 +17,19 @@ export default function CategoryAutocomplete({
   id,
 }: CategoryAutocompleteProps) {
   const [open, setOpen] = useState(false);
+  const [activeIndex, setActiveIndex] = useState(-1);
   const containerRef = useRef<HTMLDivElement>(null);
+  const listRef = useRef<HTMLUListElement>(null);
 
   const filtered = categories.filter(
     (c) => c.toLowerCase().includes(value.toLowerCase()) && c.toLowerCase() !== value.toLowerCase()
   );
 
+  // Reset active index when filtered list changes
+  useEffect(() => {
+    setActiveIndex(-1);
+  }, [filtered.length, value]);
+
   // Close on outside click
   useEffect(() => {
     const handleMouseDown = (e: MouseEvent) => {
@@ -34,6 +41,14 @@ export default function CategoryAutocomplete({
     return () => document.removeEventListener('mousedown', handleMouseDown);
   }, []);
 
+  // Scroll active item into view
+  useEffect(() => {
+    if (activeIndex >= 0 && listRef.current) {
+      const item = listRef.current.children[activeIndex] as HTMLElement | undefined;
+      item?.scrollIntoView({ block: 'nearest' });
+    }
+  }, [activeIndex]);
+
   const handleBlur = () => {
     const match = categories.find((c) => c.toLowerCase() === value.toLowerCase());
     if (match && match !== value) onChange(match);
@@ -43,8 +58,37 @@ export default function CategoryAutocomplete({
   const handleSelect = (cat: string) => {
     onChange(cat);
     setOpen(false);
+    setActiveIndex(-1);
   };
 
+  const handleKeyDown = (e: React.KeyboardEvent) => {
+    if (!open || filtered.length === 0) return;
+
+    switch (e.key) {
+      case 'ArrowDown':
+        e.preventDefault();
+        setActiveIndex((prev) => (prev < filtered.length - 1 ? prev + 1 : 0));
+        break;
+      case 'ArrowUp':
+        e.preventDefault();
+        setActiveIndex((prev) => (prev > 0 ? prev - 1 : filtered.length - 1));
+        break;
+      case 'Enter':
+        e.preventDefault();
+        if (activeIndex >= 0 && activeIndex < filtered.length) {
+          handleSelect(filtered[activeIndex]);
+        }
+        break;
+      case 'Escape':
+        e.preventDefault();
+        setOpen(false);
+        setActiveIndex(-1);
+        break;
+    }
+  };
+
+  const activeDescendantId = activeIndex >= 0 ? `${id || 'cat'}-option-${activeIndex}` : undefined;
+
   return (
     <div ref={containerRef} className="relative">
       <Input
@@ -57,25 +101,36 @@ export default function CategoryAutocomplete({
         }}
         onFocus={() => setOpen(true)}
         onBlur={handleBlur}
+        onKeyDown={handleKeyDown}
         autoComplete="off"
+        role="combobox"
         aria-autocomplete="list"
         aria-expanded={open && filtered.length > 0}
+        aria-controls={open && filtered.length > 0 ? `${id || 'cat'}-listbox` : undefined}
+        aria-activedescendant={activeDescendantId}
       />
       {open && filtered.length > 0 && (
         <ul
+          ref={listRef}
+          id={`${id || 'cat'}-listbox`}
           role="listbox"
           className="absolute z-10 mt-1 w-full bg-card border border-border rounded-md shadow-lg max-h-40 overflow-y-auto"
         >
-          {filtered.map((cat) => (
+          {filtered.map((cat, idx) => (
             <li
               key={cat}
+              id={`${id || 'cat'}-option-${idx}`}
               role="option"
-              aria-selected={cat === value}
+              aria-selected={idx === activeIndex}
               onPointerDown={(e) => {
                 e.preventDefault();
                 handleSelect(cat);
               }}
-              className="px-3 py-1.5 text-sm hover:bg-card-elevated cursor-pointer transition-colors duration-150"
+              className={`px-3 py-1.5 text-sm cursor-pointer transition-colors duration-150 ${
+                idx === activeIndex
+                  ? 'bg-card-elevated text-foreground'
+                  : 'hover:bg-card-elevated'
+              }`}
             >
               {cat}
             </li>

frontend/src/components/shared/CategoryFilterBar.tsx

@@ -1,6 +1,22 @@
 import { useState, useRef, useEffect } from 'react';
 import { Search } from 'lucide-react';
 import { Input } from '@/components/ui/input';
+import {
+  DndContext,
+  closestCenter,
+  PointerSensor,
+  useSensor,
+  useSensors,
+  type DragEndEvent,
+} from '@dnd-kit/core';
+import { restrictToHorizontalAxis } from '@dnd-kit/modifiers';
+import {
+  SortableContext,
+  horizontalListSortingStrategy,
+  useSortable,
+  arrayMove,
+} from '@dnd-kit/sortable';
+import { CSS } from '@dnd-kit/utilities';
 
 interface CategoryFilterBarProps {
   activeFilters: string[];
@@ -10,6 +26,8 @@ interface CategoryFilterBarProps {
   onToggleAll: () => void;
   onTogglePinned: () => void;
   onToggleCategory: (cat: string) => void;
+  onSelectAllCategories?: () => void;
+  onReorderCategories?: (order: string[]) => void;
   searchValue: string;
   onSearchChange: (val: string) => void;
 }
@@ -22,6 +40,70 @@ const activePillStyle = {
   color: 'hsl(var(--accent-color))',
 };
 
+// ---------------------------------------------------------------------------
+// SortableCategoryChip
+// ---------------------------------------------------------------------------
+function SortableCategoryChip({
+  id,
+  isActive,
+  onToggle,
+}: {
+  id: string;
+  isActive: boolean;
+  onToggle: () => void;
+}) {
+  const {
+    attributes,
+    listeners,
+    setNodeRef,
+    transform,
+    transition,
+    isDragging,
+  } = useSortable({ id });
+
+  const wasDragging = useRef(false);
+
+  useEffect(() => {
+    if (isDragging) wasDragging.current = true;
+  }, [isDragging]);
+
+  const handleClick = () => {
+    if (wasDragging.current) {
+      wasDragging.current = false;
+      return;
+    }
+    onToggle();
+  };
+
+  const style = {
+    transform: CSS.Transform.toString(transform),
+    transition,
+    opacity: isDragging ? 0.5 : 1,
+    ...(isActive ? activePillStyle : {}),
+  };
+
+  return (
+    <button
+      ref={setNodeRef}
+      type="button"
+      onClick={handleClick}
+      aria-label={`Filter by ${id}`}
+      className="px-2 py-1 text-xs font-medium rounded transition-colors duration-150 whitespace-nowrap shrink-0 touch-none cursor-grab active:cursor-grabbing"
+      style={style}
+      {...attributes}
+      aria-pressed={isActive}
+      {...listeners}
+    >
+      <span className={isActive ? '' : 'text-muted-foreground hover:text-foreground'}>
+        {id}
+      </span>
+    </button>
+  );
+}
+
+// ---------------------------------------------------------------------------
+// CategoryFilterBar
+// ---------------------------------------------------------------------------
 export default function CategoryFilterBar({
   activeFilters,
   pinnedLabel,
@@ -30,6 +112,8 @@ export default function CategoryFilterBar({
   onToggleAll,
   onTogglePinned,
   onToggleCategory,
+  onSelectAllCategories,
+  onReorderCategories,
   searchValue,
   onSearchChange,
 }: CategoryFilterBarProps) {
@@ -38,6 +122,12 @@ export default function CategoryFilterBar({
   const searchInputRef = useRef<HTMLInputElement>(null);
 
   const isAllActive = activeFilters.length === 0;
+  const allCategoriesSelected =
+    categories.length > 0 && categories.every((c) => activeFilters.includes(c));
+
+  const sensors = useSensors(
+    useSensor(PointerSensor, { activationConstraint: { distance: 5 } }),
+  );
 
   // Collapse search if there are many categories
   useEffect(() => {
@@ -49,6 +139,15 @@ export default function CategoryFilterBar({
     setTimeout(() => searchInputRef.current?.focus(), 50);
   };
 
+  const handleDragEnd = (event: DragEndEvent) => {
+    const { active, over } = event;
+    if (!over || active.id === over.id || !onReorderCategories) return;
+    const oldIndex = categories.indexOf(String(active.id));
+    const newIndex = categories.indexOf(String(over.id));
+    if (oldIndex === -1 || newIndex === -1) return;
+    onReorderCategories(arrayMove(categories, oldIndex, newIndex));
+  };
+
   return (
     <div className="flex items-center gap-2 overflow-x-auto">
       {/* All pill */}
@@ -81,7 +180,7 @@ export default function CategoryFilterBar({
         </span>
       </button>
 
-      {/* Other pill + expandable chips */}
+      {/* Categories pill + expandable chips */}
       {categories.length > 0 && (
         <>
           <button
@@ -92,7 +191,7 @@ export default function CategoryFilterBar({
             style={otherOpen ? activePillStyle : undefined}
           >
             <span className={otherOpen ? '' : 'text-muted-foreground hover:text-foreground'}>
-              Other
+              Categories
             </span>
           </button>
 
@@ -104,28 +203,49 @@ export default function CategoryFilterBar({
               overflow: 'hidden',
             }}
           >
-            {categories.map((cat) => {
+            {/* "All" chip inside categories — non-draggable */}
-              const isActive = activeFilters.includes(cat);
+            {onSelectAllCategories && (
-              return (
+              <button
-                <button
+                type="button"
-                  key={cat}
+                onClick={onSelectAllCategories}
-                  type="button"
+                aria-label="Select all categories"
-                  onClick={() => onToggleCategory(cat)}
+                aria-pressed={allCategoriesSelected}
-                  aria-label={`Filter by ${cat}`}
+                className="px-2 py-1 text-xs font-medium rounded transition-colors duration-150 whitespace-nowrap shrink-0"
-                  aria-pressed={isActive}
+                style={allCategoriesSelected ? activePillStyle : undefined}
-                  className="px-2 py-1 text-xs font-medium rounded transition-colors duration-150 whitespace-nowrap shrink-0"
+              >
-                  style={
+                <span
-                    isActive
+                  className={
-                      ? activePillStyle
+                    allCategoriesSelected
-                      : undefined
+                      ? ''
+                      : 'text-muted-foreground hover:text-foreground'
                   }
                 >
-                  <span className={isActive ? '' : 'text-muted-foreground hover:text-foreground'}>
+                  All
-                    {cat}
+                </span>
-                  </span>
+              </button>
-                </button>
+            )}
-              );
+
-            })}
+            {/* Draggable category chips */}
+            <DndContext
+              sensors={sensors}
+              collisionDetection={closestCenter}
+              modifiers={[restrictToHorizontalAxis]}
+              onDragEnd={handleDragEnd}
+            >
+              <SortableContext
+                items={categories}
+                strategy={horizontalListSortingStrategy}
+              >
+                {categories.map((cat) => (
+                  <SortableCategoryChip
+                    key={cat}
+                    id={cat}
+                    isActive={activeFilters.includes(cat)}
+                    onToggle={() => onToggleCategory(cat)}
+                  />
+                ))}
+              </SortableContext>
+            </DndContext>
           </div>
         </>
       )}

frontend/src/components/shared/EntityDetailPanel.tsx

@@ -1,4 +1,3 @@
-import { useCallback } from 'react';
 import { X, Pencil, Trash2, Star, StarOff } from 'lucide-react';
 import type { LucideIcon } from 'lucide-react';
 import { Button } from '@/components/ui/button';
@@ -43,8 +42,7 @@ export function EntityDetailPanel<T>({
   onToggleFavourite,
   favouriteLabel = 'favourite',
 }: EntityDetailPanelProps<T>) {
-  const executeDelete = useCallback(() => onDelete(), [onDelete]);
+  const { confirming, handleClick: handleDelete } = useConfirmAction(onDelete);
-  const { confirming, handleClick: handleDelete } = useConfirmAction(executeDelete);
 
   if (!item) return null;
 

frontend/src/components/shared/EntityTable.tsx

@@ -48,34 +48,35 @@ function SkeletonRow({ colCount }: { colCount: number }) {
   );
 }
 
-export function EntityTable<T extends { id: number }>({
+function SortIcon({
-  columns,
-  groups,
-  pinnedRows,
-  pinnedLabel,
-  showPinned,
-  selectedId,
-  onRowClick,
   sortKey,
   sortDir,
-  onSort,
+  colKey,
-  visibilityMode,
+}: {
-  loading = false,
+  sortKey: string;
-}: EntityTableProps<T>) {
+  sortDir: 'asc' | 'desc';
-  const visibleColumns = columns.filter((col) => isVisible(col.visibilityLevel, visibilityMode));
+  colKey: string;
-  const colCount = visibleColumns.length;
+}) {
-  const showPinnedSection = showPinned && pinnedRows.length > 0;
+  if (sortKey !== colKey) return <ArrowUpDown className="h-3.5 w-3.5 ml-1 opacity-40" />;
+  return sortDir === 'asc' ? (
+    <ArrowUp className="h-3.5 w-3.5 ml-1" />
+  ) : (
+    <ArrowDown className="h-3.5 w-3.5 ml-1" />
+  );
+}
 
-  const SortIcon = ({ colKey }: { colKey: string }) => {
+function DataRow<T extends { id: number }>({
-    if (sortKey !== colKey) return <ArrowUpDown className="h-3.5 w-3.5 ml-1 opacity-40" />;
+  item,
-    return sortDir === 'asc' ? (
+  visibleColumns,
-      <ArrowUp className="h-3.5 w-3.5 ml-1" />
+  selectedId,
-    ) : (
+  onRowClick,
-      <ArrowDown className="h-3.5 w-3.5 ml-1" />
+}: {
-    );
+  item: T;
-  };
+  visibleColumns: ColumnDef<T>[];
-
+  selectedId: number | null;
-  const DataRow = ({ item }: { item: T }) => (
+  onRowClick: (id: number) => void;
+}) {
+  return (
     <tr
       className={`border-b border-border/50 cursor-pointer hover:bg-card-elevated transition-colors duration-150 outline-none focus-visible:ring-1 focus-visible:ring-ring ${
         selectedId === item.id ? 'bg-accent/10' : ''
@@ -98,8 +99,10 @@ export function EntityTable<T extends { id: number }>({
       ))}
     </tr>
   );
+}
 
-  const SectionHeader = ({ label }: { label: string }) => (
+function SectionHeader({ label, colCount }: { label: string; colCount: number }) {
+  return (
     <tr>
       <td
         colSpan={colCount}
@@ -109,6 +112,25 @@ export function EntityTable<T extends { id: number }>({
       </td>
     </tr>
   );
+}
+
+export function EntityTable<T extends { id: number }>({
+  columns,
+  groups,
+  pinnedRows,
+  pinnedLabel,
+  showPinned,
+  selectedId,
+  onRowClick,
+  sortKey,
+  sortDir,
+  onSort,
+  visibilityMode,
+  loading = false,
+}: EntityTableProps<T>) {
+  const visibleColumns = columns.filter((col) => isVisible(col.visibilityLevel, visibilityMode));
+  const colCount = visibleColumns.length;
+  const showPinnedSection = showPinned && pinnedRows.length > 0;
 
   return (
     <div className="w-full">
@@ -128,7 +150,7 @@ export function EntityTable<T extends { id: number }>({
                     className="flex items-center hover:text-foreground transition-colors duration-150"
                   >
                     {col.label}
-                    <SortIcon colKey={col.key} />
+                    <SortIcon sortKey={sortKey} sortDir={sortDir} colKey={col.key} />
                   </button>
                 ) : (
                   col.label
@@ -144,9 +166,15 @@ export function EntityTable<T extends { id: number }>({
             <>
               {showPinnedSection && (
                 <>
-                  <SectionHeader label={pinnedLabel} />
+                  <SectionHeader label={pinnedLabel} colCount={colCount} />
                   {pinnedRows.map((item) => (
-                    <DataRow key={item.id} item={item} />
+                    <DataRow
+                      key={item.id}
+                      item={item}
+                      visibleColumns={visibleColumns}
+                      selectedId={selectedId}
+                      onRowClick={onRowClick}
+                    />
                   ))}
                 </>
               )}
@@ -154,9 +182,15 @@ export function EntityTable<T extends { id: number }>({
                 <React.Fragment key={group.label}>
                   {group.rows.length > 0 && (
                     <>
-                      <SectionHeader label={group.label} />
+                      <SectionHeader label={group.label} colCount={colCount} />
                       {group.rows.map((item) => (
-                        <DataRow key={item.id} item={item} />
+                        <DataRow
+                          key={item.id}
+                          item={item}
+                          visibleColumns={visibleColumns}
+                          selectedId={selectedId}
+                          onRowClick={onRowClick}
+                        />
                       ))}
                     </>
                   )}

frontend/src/components/shared/utils.ts

@@ -29,9 +29,7 @@ export function getAvatarColor(name: string): string {
 
 export function formatUpdatedAt(updatedAt: string): string {
   try {
-    // Backend stores naive UTC timestamps — append Z so date-fns treats as UTC
+    return `Updated ${formatDistanceToNow(parseISO(updatedAt), { addSuffix: true })}`;
-    const utcString = updatedAt.endsWith('Z') ? updatedAt : updatedAt + 'Z';
-    return `Updated ${formatDistanceToNow(parseISO(utcString), { addSuffix: true })}`;
   } catch {
     return '';
   }

frontend/src/hooks/useCategoryOrder.ts

@@ -0,0 +1,41 @@
+import { useState, useCallback, useMemo } from 'react';
+
+const STORAGE_PREFIX = 'umbra-';
+
+export function useCategoryOrder(key: string, categories: string[]) {
+  const storageKey = `${STORAGE_PREFIX}${key}-category-order`;
+
+  const [savedOrder, setSavedOrder] = useState<string[]>(() => {
+    try {
+      const raw = localStorage.getItem(storageKey);
+      if (!raw) return [];
+      const parsed = JSON.parse(raw);
+      return Array.isArray(parsed) ? parsed.filter((x): x is string => typeof x === 'string') : [];
+    } catch {
+      return [];
+    }
+  });
+
+  const orderedCategories = useMemo(() => {
+    const catSet = new Set(categories);
+    // Keep saved items that still exist, in saved order
+    const ordered = savedOrder.filter((c) => catSet.has(c));
+    // Append any new categories not in saved order
+    const remaining = categories.filter((c) => !savedOrder.includes(c));
+    return [...ordered, ...remaining];
+  }, [categories, savedOrder]);
+
+  const reorder = useCallback(
+    (newOrder: string[]) => {
+      setSavedOrder(newOrder);
+      try {
+        localStorage.setItem(storageKey, JSON.stringify(newOrder));
+      } catch {
+        // localStorage full — silently ignore
+      }
+    },
+    [storageKey],
+  );
+
+  return { orderedCategories, reorder };
+}

frontend/src/types/index.ts

@@ -151,7 +151,6 @@ export interface Person {
   address?: string;
   birthday?: string;
   category?: string;
-  relationship?: string;
   is_favourite: boolean;
   company?: string;
   job_title?: string;