Add Payouts Overview tab with status tables and trend charts (#25589)

## Summary
- Adds a new **Overview** tab as the first tab on the Payouts page,
showing a dashboard of payout metrics for the last 7 days
- **Status tables**: two side-by-side cards showing payout counts by
status (Completed, Processing, Pending, Rejected, Failed) split by
platform vs customer payouts
- **Stat + chart cards**: three cards combining headline numbers with
Origin `LineChart` trend graphs — total payouts sent, total volume
(grouped by sending currency), and completion rate
- **Backend**: new `grid_payout_overview_stats` GraphQL query with
SQLAlchemy aggregation, 10-second memcache TTL
- **Refactored** `sla_metrics_cache` into a generic
`grid_dashboard_cache` with configurable namespace and TTL, so both SLA
metrics and payout overview share the same caching infrastructure

## Test plan
- [ ] Navigate to `/grid/payouts` and verify it redirects to the
Overview tab
- [ ] Verify status tables show correct counts for platform and customer
payouts
- [ ] Create new payouts and verify they appear in status tables within
~10 seconds
- [ ] Verify line charts show 7-day trends including today's data
- [ ] Verify volume card shows per-currency breakdown when multiple
currencies are used
- [ ] Verify loading spinner shows while data is fetching
- [ ] Verify completion rate shows 100% on days with no payouts
- [ ] Run backend tests: `env -u QUART_CONFIG uv run pytest
sparkcore/graphql/objects/grid_dashboard/tests/test_grid_payout_overview_stats.py
-v`

<img width="1366" height="753" alt="Screenshot 2026-03-31 at 2 23 05 PM"
src="https://github.com/user-attachments/assets/783120df-3576-4d88-91fd-5f5987a6263d"
/>

🤖 Generated with [Claude Code](https://claude.com/claude-code)

---------

Co-authored-by: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
GitOrigin-RevId: 72a966c68f12e3c24ed270626abc9b4b1bc80bcc

Author: 2 people

packages/origin/src/components/Analytics/AnalyticsContext.tsx

@@ -18,7 +18,7 @@ export interface InteractionInfo {
   name: string;
   component: string;
   interaction: InteractionType;
-  metadata?: Record<string, unknown>;
+  metadata?: Record<string, unknown> | undefined;
 }
 
 export interface AnalyticsHandler {

packages/origin/src/components/Chart/ChartWrapper.tsx

@@ -7,17 +7,17 @@ import { Skeleton } from "../Skeleton";
 import styles from "./Chart.module.scss";
 
 export interface ChartWrapperProps {
-  ref?: React.Ref<HTMLDivElement>;
-  loading?: boolean;
-  empty?: React.ReactNode;
+  ref?: React.Ref<HTMLDivElement> | undefined;
+  loading?: boolean | undefined;
+  empty?: React.ReactNode | undefined;
   dataLength: number;
-  isEmpty?: boolean;
+  isEmpty?: boolean | undefined;
   height: number;
-  legend?: boolean;
-  series?: ResolvedSeries[];
+  legend?: boolean | undefined;
+  series?: ResolvedSeries[] | undefined;
   children: React.ReactNode;
-  className?: string;
-  ariaLiveContent?: string;
+  className?: string | undefined;
+  ariaLiveContent?: string | undefined;
 }
 
 export function ChartWrapper({

packages/origin/src/components/Chart/hooks.ts

@@ -35,8 +35,10 @@ export interface ChartInteractionOptions {
   tooltipMode: TooltipMode;
   interpolatorsRef: React.RefObject<CurveInterpolator[]>;
   data: ChartDatum[];
-  onActiveChange?: (index: number | null, datum: ChartDatum | null) => void;
-  onActivate?: (index: number, datum: ChartDatum) => void;
+  onActiveChange?:
+    | ((index: number | null, datum: ChartDatum | null) => void)
+    | undefined;
+  onActivate?: ((index: number, datum: ChartDatum) => void) | undefined;
 }
 
 export function useChartInteraction(opts: ChartInteractionOptions) {

packages/origin/src/components/Command/parts.tsx

@@ -26,7 +26,7 @@ export interface CommandGroup {
 
 interface CommandContextValue {
   onSelect: (item: CommandItem) => void;
-  renderItem?: (item: CommandItem) => React.ReactNode;
+  renderItem?: ((item: CommandItem) => React.ReactNode) | undefined;
 }
 
 const CommandContext = React.createContext<CommandContextValue | null>(null);

packages/origin/src/components/DatePicker/parts.tsx

@@ -243,8 +243,8 @@ interface DatePickerContextValue {
   setDate: (which: "start" | "end", date: Date) => void;
   setTime: (which: "start" | "end", hours: number, minutes: number) => void;
   isDateDisabled: (date: Date) => boolean;
-  min?: Date;
-  max?: Date;
+  min?: Date | undefined;
+  max?: Date | undefined;
 
   locale: string;
   weekStartsOn: 0 | 1;

packages/origin/src/lib/base-ui-utils.ts

@@ -105,7 +105,7 @@ export interface ChangeEventDetails<E = Event> {
   allowPropagation: () => void;
   isCanceled: boolean;
   isPropagationAllowed: boolean;
-  trigger?: HTMLElement;
+  trigger?: HTMLElement | undefined;
 }
 
 export function createChangeEventDetails<E = Event>(

packages/origin/tsconfig.json

@@ -8,7 +8,7 @@
     "target": "ES2017",
     "isolatedModules": true,
     "incremental": true,
-    "exactOptionalPropertyTypes": false,
+    "exactOptionalPropertyTypes": true,
     "paths": {
       "@/*": ["./src/*"],
       "@test-utils": ["./test-utils"],