@schandlergarcia/sf-web-components 2.3.16 → 2.4.0

package/brands/engine/app/pages/PartnerHubDashboard.tsx

@@ -1,2077 +0,0 @@
-import { ListCard, ActivityCard, D3Chart, Dropdown, Button, Modal, CardSkeleton } from "@/components/library";
-import useDataSource from "@/components/library/data/useDataSource";
-import { useThemeMode } from "@/components/library/theme/AppThemeProvider";
-import { toast } from "sonner";
-import React from "react";
-import { usePartnerDashboardData } from "@/hooks/usePartnerDashboardData";
-import AgentPanel from "@/components/AgentPanel";
-import { ENABLE_SAMPLE_DATA_CACHE } from "@/lib/dataStrategy";
-import {
-  PENALTY_TABLE_ITEMS,
-  DISPUTE_CARDS,
-  INVOICE_CARDS,
-  RECENT_ACTIVITY,
-  REVENUE_TREND_BY_PROPERTY,
-  PROPERTY_LEADERBOARD,
-} from "@/data/partner-hub-sample-data";
-import {
-  BuildingOfficeIcon,
-  BanknotesIcon,
-  ExclamationTriangleIcon,
-  ClockIcon,
-  ShieldCheckIcon,
-  MoonIcon,
-  SunIcon,
-  UserCircleIcon,
-  Cog6ToothIcon,
-  ArrowRightOnRectangleIcon,
-  TrophyIcon,
-  StarIcon,
-  RocketLaunchIcon,
-  LightBulbIcon,
-  DocumentArrowDownIcon,
-} from "@heroicons/react/24/outline";
-import * as d3 from "d3";
-import engineLogo from "@/assets/images/engine_logo.png";
-
-/**
- * Partner Hub Dashboard
- *
- * Partner-facing portal where hotel partners (Marriott, Hilton, etc.) log in
- * to view their business relationship with Engine:
- * - Their properties and performance
- * - Their invoices and payments
- * - Their attrition penalties and disputes
- * - Their contract details
- * - Communication with Engine
- */
-export default function PartnerHubDashboard() {
-  const { mode, toggle } = useThemeMode();
-  const [selectedPenalty, setSelectedPenalty] = React.useState(null);
-  const [isPenaltyModalOpen, setIsPenaltyModalOpen] = React.useState(false);
-  const [isPropertiesModalOpen, setIsPropertiesModalOpen] = React.useState(false);
-  const [isRevenueModalOpen, setIsRevenueModalOpen] = React.useState(false);
-  const [isReservationsModalOpen, setIsReservationsModalOpen] = React.useState(false);
-  const [isDisputesModalOpen, setIsDisputesModalOpen] = React.useState(false);
-  const [isInvoicesModalOpen, setIsInvoicesModalOpen] = React.useState(false);
-
-  // Simulated logged-in partner (in real app, this comes from auth context)
-  const currentPartner = {
-    name: "Summit Hotels & Resorts",
-    tier: "Gold",
-    logo: null, // Could add partner logo here
-  };
-
-  // Fetch live data from Salesforce
-  const { data: liveData, loading: liveLoading, error: liveError } = usePartnerDashboardData(
-    ENABLE_SAMPLE_DATA_CACHE ? null : null // Fetch for current partner
-  );
-
-  // Determine if we're loading (only in live mode)
-  const isLoading = !ENABLE_SAMPLE_DATA_CACHE && liveLoading;
-
-  // Show error toast if live data fails
-  React.useEffect(() => {
-    if (!ENABLE_SAMPLE_DATA_CACHE && liveError) {
-      toast.error(`Failed to load data: ${liveError.message}`);
-      console.error("Live Data Error:", liveError);
-    }
-  }, [liveError]);
-
-  // Log live data status
-  React.useEffect(() => {
-    if (!ENABLE_SAMPLE_DATA_CACHE) {
-      console.log("Live Data Mode - Loading:", liveLoading);
-      console.log("Live Data Mode - Error:", liveError);
-      console.log("Live Data Mode - Data:", liveData);
-    }
-  }, [liveLoading, liveError, liveData]);
-
-  // Transform live data to match sample data format
-  const transformLiveData = React.useCallback((liveData: any) => {
-    if (!liveData) return null;
-
-    // Transform penalties to match expected format
-    const penalties = (liveData.penalties || []).map((p: any) => ({
-      id: p.Id,
-      name: p.Name?.value || p.Name,
-      partner: currentPartner.name,
-      property: p.Property__r?.Property_Name__c?.value || p.Property__r?.Name?.value || "Unknown Property",
-      customer: p.Customer_Company__r?.Name?.value || "Unknown Customer",
-      status: p.Penalty_Status__c?.value || "Unknown",
-      penalty: p.Final_Penalty_Amount__c?.value || 0,
-      credit: p.Resale_Credit_Applied__c?.value || 0,
-      method: "Per Night", // From contract
-      isHero: p.Resale_Credit_Applied__c?.value === 0 && (p.Rooms_Resold__c?.value || 0) > 0,
-      originalRoomBlock: p.Original_Room_Block__c?.value || 0,
-      actualRoomsUsed: p.Actual_Rooms_Used__c?.value || 0,
-      unusedRooms: p.Unused_Rooms__c?.value || 0,
-      roomRate: p.Room_Rate__c?.value || 0,
-      numberOfNights: p.Number_of_Nights__c?.value || 0,
-      roomsResold: p.Rooms_Resold__c?.value || 0,
-      penaltyCalculated: p.Penalty_Amount_Calculated__c?.value || 0,
-      resalePolicy: "Partial Credit (50%)", // From contract
-    }));
-
-    // Transform disputes to match expected format
-    const disputes = (liveData.disputes || []).map((d: any) => ({
-      id: d.Id,
-      title: d.Subject?.value || "Dispute",
-      description: `${currentPartner.name} · ${d.Dispute_Type__c?.value || "General"}`,
-      status: d.Status === "Open" || d.Status === "Escalated" ? "critical" : d.Priority === "High" ? "critical" : d.Priority === "Medium" ? "warning" : "info",
-      badge: d.Status?.value || d.Status || "Open",
-      amount: d.Disputed_Amount__c?.value || 0,
-      agentHandled: d.Agent_Handled__c?.value || false,
-    }));
-
-    // Transform invoices to match expected format
-    const invoices = (liveData.invoices || []).filter((i: any) => {
-      const status = i.Invoice_Status__c?.value || i.Invoice_Status__c;
-      return status !== "Paid";
-    }).map((i: any) => ({
-      id: i.Id,
-      title: `${i.Name?.value || i.Name} — ${currentPartner.name}`,
-      description: `${i.Invoice_Period_Start__c?.value || ""} to ${i.Invoice_Period_End__c?.value || ""}`,
-      status: (i.Invoice_Status__c?.value || i.Invoice_Status__c) === "Overdue" ? "critical" : "default",
-      badge: i.Invoice_Status__c?.value || i.Invoice_Status__c || "Draft",
-      amount: i.Invoice_Total__c?.value || 0,
-      due: i.Due_Date__c?.value || "",
-    }));
-
-    // Transform activity
-    const activity = [
-      ...disputes.slice(0, 2).map((d: any) => ({
-        id: `dispute-${d.id}`,
-        title: "Dispute Created",
-        description: d.title,
-        status: "alert",
-        timestamp: "Recently",
-        partner: currentPartner.name,
-      })),
-      ...invoices.slice(0, 2).map((i: any) => ({
-        id: `invoice-${i.id}`,
-        title: "Invoice Sent",
-        description: `${i.title} ($${i.amount.toLocaleString()})`,
-        status: i.status === "critical" ? "warning" : "info",
-        timestamp: "Recently",
-        partner: currentPartner.name,
-      })),
-    ];
-
-    return {
-      penalties,
-      disputes,
-      invoices,
-      activity,
-    };
-  }, [currentPartner.name]);
-
-  // Load data - use live data if available, otherwise sample
-  const transformedLiveData = React.useMemo(() => {
-    if (!ENABLE_SAMPLE_DATA_CACHE && liveData) {
-      return transformLiveData(liveData);
-    }
-    return null;
-  }, [liveData, transformLiveData]);
-
-  const allPenalties = useDataSource({
-    sample: PENALTY_TABLE_ITEMS,
-    live: transformedLiveData?.penalties || []
-  });
-  const allDisputes = useDataSource({
-    sample: DISPUTE_CARDS,
-    live: transformedLiveData?.disputes || []
-  });
-  const allInvoices = useDataSource({
-    sample: INVOICE_CARDS,
-    live: transformedLiveData?.invoices || []
-  });
-  const allActivity = useDataSource({
-    sample: RECENT_ACTIVITY,
-    live: transformedLiveData?.activity || []
-  });
-
-  // Calculate revenue trend from invoices
-  const revenueTrendByProperty = React.useMemo(() => {
-    if (ENABLE_SAMPLE_DATA_CACHE) {
-      return REVENUE_TREND_BY_PROPERTY;
-    }
-
-    if (!liveData?.invoices || liveData.invoices.length === 0 || !liveData?.properties) {
-      return REVENUE_TREND_BY_PROPERTY;
-    }
-
-    // Group invoices by month and calculate totals
-    const monthlyData = new Map();
-    liveData.invoices.forEach((inv: any) => {
-      const periodStart = inv.Invoice_Period_Start__c?.value;
-      if (periodStart) {
-        const date = new Date(periodStart);
-        const monthKey = `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, '0')}`;
-        const monthLabel = date.toLocaleDateString('en-US', { month: 'short', year: 'numeric' });
-        const amount = inv.Invoice_Total__c?.value || 0;
-
-        if (!monthlyData.has(monthKey)) {
-          monthlyData.set(monthKey, { key: monthKey, label: monthLabel, total: 0 });
-        }
-        monthlyData.get(monthKey).total += amount;
-      }
-    });
-
-    // Sort by date and convert to array
-    const sortedMonths = Array.from(monthlyData.values())
-      .sort((a, b) => a.key.localeCompare(b.key));
-
-    const months = sortedMonths.map(m => m.label);
-    const colors = ["var(--color-dash-accent)", "var(--color-dash-success)", "var(--color-dash-chart-3)", "var(--color-dash-chart-4)"];
-
-    // Distribute monthly revenue across properties (weighted)
-    const properties = (liveData.properties || []).map((prop: any, idx: number) => {
-      const weights = [0.35, 0.28, 0.22, 0.15];
-      const weight = weights[idx] || 0.10;
-
-      return {
-        name: prop.Property_Name__c?.value || prop.Name?.value || `Property ${idx + 1}`,
-        color: colors[idx] || "#999",
-        values: sortedMonths.map(month => Math.floor(month.total * weight))
-      };
-    });
-
-    return { months, properties };
-  }, [liveData?.invoices, liveData?.properties]);
-
-  // Calculate total revenue first (needed by leaderboard)
-  const myRevenue = React.useMemo(() => {
-    if (ENABLE_SAMPLE_DATA_CACHE) {
-      return 238000;
-    }
-    return (liveData?.invoices || []).reduce((sum: number, inv: any) => sum + (inv.Invoice_Total__c?.value || 0), 0);
-  }, [liveData?.invoices]);
-
-  // Calculate property leaderboard from real data
-  const propertyLeaderboard = React.useMemo(() => {
-    if (ENABLE_SAMPLE_DATA_CACHE) {
-      return PROPERTY_LEADERBOARD;
-    }
-
-    if (!liveData?.properties || liveData.properties.length === 0) {
-      return [];
-    }
-
-    // For demo purposes, distribute total revenue across properties
-    // In a real system, you'd have property-level revenue tracking
-    const totalRevenue = myRevenue;
-    const properties = liveData.properties;
-
-    return properties.map((prop: any, idx: number) => {
-      // Distribute revenue with weighted randomness for demo
-      const weights = [0.35, 0.28, 0.22, 0.15]; // First property gets most
-      const weight = weights[idx] || 0.10;
-      const propRevenue = Math.floor(totalRevenue * weight);
-      const latestRevenue = Math.floor(propRevenue * 0.20); // 20% in latest period
-      const growthRates = [60, 55, 75, 100];
-      const growth = growthRates[idx] || 50;
-
-      return {
-        name: prop.Property_Name__c?.value || prop.Name?.value || `Property ${idx + 1}`,
-        city: prop.City__c?.value || "",
-        state: prop.State__c?.value || "",
-        revenue: propRevenue,
-        latestRevenue: latestRevenue,
-        growth: growth,
-        insight: idx === 0 ? `Highest booking volume through Engine — ${Math.round(weight * 100)}% of total` :
-                 idx === properties.length - 1 ? `Bookings doubled since October — ${growth}% growth` :
-                 `Strong booking growth in Q1 2026`
-      };
-    }).sort((a, b) => b.revenue - a.revenue);
-  }, [liveData?.properties, myRevenue]);
-
-  // Filter data for current partner (sample data needs filtering, live data is already filtered)
-  const myPenalties = ENABLE_SAMPLE_DATA_CACHE
-    ? allPenalties.filter((p: any) => p.partner === currentPartner.name)
-    : allPenalties;
-  const myDisputes = ENABLE_SAMPLE_DATA_CACHE
-    ? allDisputes.filter((d: any) => d.description.includes(currentPartner.name))
-    : allDisputes;
-  const myInvoices = ENABLE_SAMPLE_DATA_CACHE
-    ? allInvoices.filter((i: any) => i.title.includes(currentPartner.name))
-    : allInvoices;
-  const myActivity = ENABLE_SAMPLE_DATA_CACHE
-    ? allActivity.filter((a: any) => a.partner === currentPartner.name)
-    : allActivity;
-
-  // Calculate partner-specific metrics
-  const myProperties = ENABLE_SAMPLE_DATA_CACHE
-    ? 4 // Sample data
-    : (liveData?.partner?.Total_Properties__c?.value || liveData?.properties?.length || 0);
-  const myReservations = ENABLE_SAMPLE_DATA_CACHE
-    ? 10 // Sample data
-    : (liveData?.partner?.Total_Reservations__c?.value || 0);
-  const myOpenDisputes = myDisputes.length;
-  const myPendingInvoices = myInvoices.length;
-
-  // Custom horizontal bar chart renderer (unused for now, but kept for future use)
-  const renderHorizontalBarChart = (svgEl: any, data: any, { width, height }: any, options: any = {}) => {
-    const margin = options.margin || { top: 10, right: 30, bottom: 30, left: 150 };
-    const innerWidth = width - margin.left - margin.right;
-    const innerHeight = height - margin.top - margin.bottom;
-
-    const svg = d3.select(svgEl);
-    svg.selectAll("*").remove();
-
-    const g = svg
-      .append("g")
-      .attr("transform", `translate(${margin.left},${margin.top})`);
-
-    const x = d3
-      .scaleLinear()
-      .domain([0, d3.max(data, (d) => d.value) || 0])
-      .range([0, innerWidth]);
-
-    const y = d3
-      .scaleBand()
-      .domain(data.map((d) => d.label))
-      .range([0, innerHeight])
-      .padding(0.2);
-
-    // Bars with gradient
-    const gradient = svg.append("defs")
-      .append("linearGradient")
-      .attr("id", "barGradient")
-      .attr("x1", "0%")
-      .attr("x2", "100%");
-
-    gradient.append("stop")
-      .attr("offset", "0%")
-      .attr("stop-color", "var(--color-dash-accent)");
-
-    gradient.append("stop")
-      .attr("offset", "100%")
-      .attr("stop-color", "var(--color-dash-success)");
-
-    g.selectAll(".bar")
-      .data(data)
-      .join("rect")
-      .attr("class", "bar")
-      .attr("x", 0)
-      .attr("y", (d) => y(d.label) || 0)
-      .attr("width", (d) => x(d.value))
-      .attr("height", y.bandwidth())
-      .attr("fill", "url(#barGradient)")
-      .attr("rx", 4);
-
-    // Y axis
-    g.append("g")
-      .call(d3.axisLeft(y))
-      .selectAll("text")
-      .style("font-size", "12px")
-      .style("fill", "currentColor");
-
-    // X axis
-    g.append("g")
-      .attr("transform", `translate(0,${innerHeight})`)
-      .call(d3.axisBottom(x).ticks(5).tickFormat(d3.format("$~s")))
-      .selectAll("text")
-      .style("font-size", "11px")
-      .style("fill", "currentColor");
-  };
-
-  // Custom donut chart renderer (unused for now, but kept for future use)
-  const renderDonutChart = (svgEl: any, data: any, { width, height }: any) => {
-    const svg = d3.select(svgEl);
-    svg.selectAll("*").remove();
-
-    const radius = Math.min(width, height) / 2 - 20;
-    const g = svg
-      .append("g")
-      .attr("transform", `translate(${width / 2},${height / 2})`);
-
-    const pie = d3.pie().value((d) => d.value);
-    const arc = d3
-      .arc()
-      .innerRadius(radius * 0.6)
-      .outerRadius(radius);
-
-    const arcs = g
-      .selectAll(".arc")
-      .data(pie(data))
-      .join("g")
-      .attr("class", "arc");
-
-    arcs
-      .append("path")
-      .attr("d", arc)
-      .attr("fill", (d) => d.data.color)
-      .attr("stroke", "var(--color-background)")
-      .attr("stroke-width", 2);
-
-    // Labels
-    arcs
-      .append("text")
-      .attr("transform", (d) => `translate(${arc.centroid(d)})`)
-      .attr("text-anchor", "middle")
-      .attr("font-size", "14px")
-      .attr("font-weight", "600")
-      .attr("fill", "var(--color-dash-surface)")
-      .attr("paint-order", "stroke")
-      .attr("stroke", "rgba(0,0,0,0.3)")
-      .attr("stroke-width", "2px")
-      .text((d) => d.data.label);
-
-    arcs
-      .append("text")
-      .attr("transform", (d) => {
-        const [x, y] = arc.centroid(d);
-        return `translate(${x},${y + 16})`;
-      })
-      .attr("text-anchor", "middle")
-      .attr("font-size", "12px")
-      .attr("fill", "var(--color-dash-surface)")
-      .attr("paint-order", "stroke")
-      .attr("stroke", "rgba(0,0,0,0.3)")
-      .attr("stroke-width", "2px")
-      .text((d) => d.data.value);
-  };
-
-  // Custom area chart renderer for invoice trend (unused for now, but kept for future use)
-  const renderAreaChart = (svgEl: any, data: any, { width, height }: any) => {
-    const margin = { top: 20, right: 20, bottom: 30, left: 60 };
-    const innerWidth = width - margin.left - margin.right;
-    const innerHeight = height - margin.top - margin.bottom;
-
-    const svg = d3.select(svgEl);
-    svg.selectAll("*").remove();
-
-    const g = svg
-      .append("g")
-      .attr("transform", `translate(${margin.left},${margin.top})`);
-
-    const x = d3
-      .scaleBand()
-      .domain(data.map((d) => d.month))
-      .range([0, innerWidth])
-      .padding(0.1);
-
-    const y = d3
-      .scaleLinear()
-      .domain([0, d3.max(data, (d) => Math.max(d.total, d.commission)) || 0])
-      .range([innerHeight, 0])
-      .nice();
-
-    // Area generator
-    const areaTotal = d3
-      .area()
-      .x((d, i) => (x(d.month) || 0) + x.bandwidth() / 2)
-      .y0(innerHeight)
-      .y1((d) => y(d.total));
-
-    const areaCommission = d3
-      .area()
-      .x((d, i) => (x(d.month) || 0) + x.bandwidth() / 2)
-      .y0(innerHeight)
-      .y1((d) => y(d.commission));
-
-    // Total area
-    g.append("path")
-      .datum(data)
-      .attr("fill", "var(--color-dash-accent)")
-      .attr("fill-opacity", 0.3)
-      .attr("d", areaTotal);
-
-    // Commission area
-    g.append("path")
-      .datum(data)
-      .attr("fill", "var(--color-dash-success)")
-      .attr("fill-opacity", 0.5)
-      .attr("d", areaCommission);
-
-    // Total line
-    g.append("path")
-      .datum(data)
-      .attr("fill", "none")
-      .attr("stroke", "var(--color-dash-accent)")
-      .attr("stroke-width", 2)
-      .attr("d", d3.line()
-        .x((d) => (x(d.month) || 0) + x.bandwidth() / 2)
-        .y((d) => y(d.total))
-      );
-
-    // Commission line
-    g.append("path")
-      .datum(data)
-      .attr("fill", "none")
-      .attr("stroke", "var(--color-dash-success)")
-      .attr("stroke-width", 2)
-      .attr("d", d3.line()
-        .x((d) => (x(d.month) || 0) + x.bandwidth() / 2)
-        .y((d) => y(d.commission))
-      );
-
-    // X axis
-    g.append("g")
-      .attr("transform", `translate(0,${innerHeight})`)
-      .call(d3.axisBottom(x))
-      .selectAll("text")
-      .style("font-size", "11px")
-      .style("fill", "currentColor");
-
-    // Y axis
-    g.append("g")
-      .call(d3.axisLeft(y).ticks(5).tickFormat(d3.format("$~s")))
-      .selectAll("text")
-      .style("font-size", "11px")
-      .style("fill", "currentColor");
-
-    // Legend
-    const legend = svg
-      .append("g")
-      .attr("transform", `translate(${width - 180}, 10)`);
-
-    legend
-      .append("rect")
-      .attr("width", 12)
-      .attr("height", 12)
-      .attr("fill", "var(--color-dash-accent)");
-
-    legend
-      .append("text")
-      .attr("x", 18)
-      .attr("y", 10)
-      .attr("font-size", "12px")
-      .attr("fill", "currentColor")
-      .text("Total Invoiced");
-
-    legend
-      .append("rect")
-      .attr("y", 20)
-      .attr("width", 12)
-      .attr("height", 12)
-      .attr("fill", "var(--color-dash-success)");
-
-    legend
-      .append("text")
-      .attr("x", 18)
-      .attr("y", 30)
-      .attr("font-size", "12px")
-      .attr("fill", "currentColor")
-      .text("Commission");
-  };
-
-  // Multi-line revenue trend by property renderer
-  const renderRevenueTrendByProperty = React.useCallback((svgEl: any, data: any, { width, height }: any) => {
-    if (!data || !data.months || !data.properties) {
-      return;
-    }
-
-    const { months, properties } = data;
-    const margin = { top: 20, right: 20, bottom: 40, left: 70 };
-    const innerWidth = width - margin.left - margin.right;
-    const innerHeight = height - margin.top - margin.bottom;
-
-    if (innerWidth <= 0 || innerHeight <= 0) {
-      return;
-    }
-
-    const svg = d3.select(svgEl);
-    svg.selectAll("*").remove();
-
-    const g = svg
-      .append("g")
-      .attr("transform", `translate(${margin.left},${margin.top})`);
-
-    const x = d3
-      .scalePoint()
-      .domain(months)
-      .range([0, innerWidth])
-      .padding(0.1);
-
-    const allValues = properties.flatMap((p) => p.values);
-    const y = d3
-      .scaleLinear()
-      .domain([0, (d3.max(allValues) || 0) * 1.1])
-      .range([innerHeight, 0])
-      .nice();
-
-    // Subtle grid lines
-    g.append("g")
-      .attr("class", "grid")
-      .call(
-        d3.axisLeft(y)
-          .ticks(5)
-          .tickSize(-innerWidth)
-          .tickFormat(() => "")
-      )
-      .selectAll("line")
-      .style("stroke", "currentColor")
-      .style("stroke-opacity", "0.08");
-    g.select(".grid .domain").remove();
-
-    // Area + line per property
-    properties.forEach((prop) => {
-      const areaGen = d3
-        .area<number>()
-        .x((_d, i) => x(months[i]) ?? 0)
-        .y0(innerHeight)
-        .y1((d) => y(d))
-        .curve(d3.curveMonotoneX);
-
-      const lineGen = d3
-        .line<number>()
-        .x((_d, i) => x(months[i]) ?? 0)
-        .y((d) => y(d))
-        .curve(d3.curveMonotoneX);
-
-      g.append("path")
-        .datum(prop.values)
-        .attr("fill", prop.color)
-        .attr("fill-opacity", 0.08)
-        .attr("d", areaGen);
-
-      g.append("path")
-        .datum(prop.values)
-        .attr("fill", "none")
-        .attr("stroke", prop.color)
-        .attr("stroke-width", 2.5)
-        .attr("d", lineGen);
-
-      // Dots at last point
-      const lastIdx = prop.values.length - 1;
-      g.append("circle")
-        .attr("cx", x(months[lastIdx]) ?? 0)
-        .attr("cy", y(prop.values[lastIdx]))
-        .attr("r", 4)
-        .attr("fill", prop.color)
-        .attr("stroke", "var(--color-background, #fff)")
-        .attr("stroke-width", 2);
-    });
-
-    // X axis
-    g.append("g")
-      .attr("transform", `translate(0,${innerHeight})`)
-      .call(d3.axisBottom(x))
-      .selectAll("text")
-      .style("font-size", "11px")
-      .style("fill", "currentColor")
-      .attr("dy", "1.2em");
-    g.select(".domain").style("stroke-opacity", "0.2");
-
-    // Y axis
-    g.append("g")
-      .call(d3.axisLeft(y).ticks(5).tickFormat(d3.format("$~s")))
-      .selectAll("text")
-      .style("font-size", "11px")
-      .style("fill", "currentColor");
-  }, []);
-
-  const monthlyTotalRevenue = React.useMemo(() => {
-    if (!revenueTrendByProperty?.months || !revenueTrendByProperty?.properties) return null;
-    return revenueTrendByProperty.months.map((month: string, i: number) => ({
-      month,
-      total: revenueTrendByProperty.properties.reduce((sum: number, p: any) => sum + p.values[i], 0),
-    }));
-  }, [revenueTrendByProperty]);
-
-  const renderTotalRevenueGrowth = React.useCallback((svgEl: any, data: any, { width, height }: any) => {
-    if (!data || !data.length) return;
-    const margin = { top: 20, right: 20, bottom: 40, left: 70 };
-    const innerWidth = width - margin.left - margin.right;
-    const innerHeight = height - margin.top - margin.bottom;
-    if (innerWidth <= 0 || innerHeight <= 0) return;
-
-    const svg = d3.select(svgEl);
-    svg.selectAll("*").remove();
-    const g = svg.append("g").attr("transform", `translate(${margin.left},${margin.top})`);
-
-    const x = d3.scaleBand().domain(data.map((d: any) => d.month)).range([0, innerWidth]).padding(0.35);
-    const maxVal = d3.max(data, (d: any) => d.total) || 0;
-    const y = d3.scaleLinear().domain([0, maxVal * 1.15]).range([innerHeight, 0]).nice();
-
-    g.append("g").attr("class", "grid")
-      .call(d3.axisLeft(y).ticks(5).tickSize(-innerWidth).tickFormat(() => ""))
-      .selectAll("line").style("stroke", "currentColor").style("stroke-opacity", "0.08");
-    g.select(".grid .domain").remove();
-
-    const accentColor = getComputedStyle(document.documentElement).getPropertyValue('--dash-accent').trim() || '#2563eb';
-
-    g.selectAll(".bar").data(data).join("rect")
-      .attr("x", (d: any) => x(d.month) ?? 0)
-      .attr("y", (d: any) => y(d.total))
-      .attr("width", x.bandwidth())
-      .attr("height", (d: any) => innerHeight - y(d.total))
-      .attr("rx", 4)
-      .attr("fill", accentColor)
-      .attr("fill-opacity", 0.85);
-
-    g.selectAll(".label").data(data).join("text")
-      .attr("x", (d: any) => (x(d.month) ?? 0) + x.bandwidth() / 2)
-      .attr("y", (d: any) => y(d.total) - 8)
-      .attr("text-anchor", "middle")
-      .style("font-size", "11px")
-      .style("font-weight", "600")
-      .style("fill", "currentColor")
-      .text((d: any) => `$${(d.total / 1000).toFixed(0)}K`);
-
-    g.append("g").attr("transform", `translate(0,${innerHeight})`)
-      .call(d3.axisBottom(x)).selectAll("text")
-      .style("font-size", "11px").style("fill", "currentColor").attr("dy", "1.2em");
-    g.select(".domain").style("stroke-opacity", "0.2");
-
-    g.append("g").call(d3.axisLeft(y).ticks(5).tickFormat(d3.format("$~s")))
-      .selectAll("text").style("font-size", "11px").style("fill", "currentColor");
-  }, []);
-
-  return (
-    <div className="heroui-scope min-h-screen bg-[var(--color-dash-surface)] dark:bg-[var(--color-dash-text)] transition-colors duration-300">
-      {/* Header - Refined Engine Brand */}
-      <header className="bg-white/95 dark:bg-[var(--color-dash-text)]/95 backdrop-blur-xl border-b border-[var(--color-dash-label)]/20 dark:border-[var(--color-dash-muted)]/30 sticky top-0 z-50 shadow-sm">
-        <div className="max-w-[1600px] mx-auto px-8 py-5">
-          <div className="flex items-center justify-between">
-            <div className="flex items-center gap-8">
-              <img
-                src={engineLogo}
-                alt="Engine"
-                className="h-14 w-auto dark:invert dark:brightness-0 dark:contrast-100 transition-all duration-300"
-              />
-              <div className="flex items-center gap-4">
-                <div className="h-10 w-px bg-gradient-to-b from-transparent via-[var(--color-dash-label)]/40 to-transparent" />
-                <div className="space-y-0.5">
-                  <p className="text-sm font-semibold text-[var(--color-dash-text)] dark:text-white transition-colors">
-                    {currentPartner.name}
-                  </p>
-                  <div className="flex items-center gap-2">
-                    <span className="relative flex h-2 w-2">
-                      <span className="animate-ping absolute inline-flex h-full w-full rounded-full bg-[var(--color-dash-success)] opacity-75"></span>
-                      <span className="relative inline-flex rounded-full h-2 w-2 bg-[var(--color-dash-success)]"></span>
-                    </span>
-                    <p className="text-xs font-medium text-[var(--color-dash-label)] uppercase tracking-wide">
-                      {currentPartner.tier} Partner
-                    </p>
-                  </div>
-                </div>
-              </div>
-            </div>
-            <div className="flex items-center gap-3">
-              <button
-                onClick={toggle}
-                className="group p-3 rounded-xl hover:bg-[var(--color-dash-surface)] dark:hover:bg-[var(--color-dash-muted)]/20 transition-colors duration-200"
-                aria-label="Toggle theme"
-              >
-                {mode === "dark" ? (
-                  <SunIcon className="h-5 w-5 text-[var(--color-dash-accent)] transition-transform group-hover:rotate-45 duration-300" />
-                ) : (
-                  <MoonIcon className="h-5 w-5 text-[var(--color-dash-muted)] transition-transform group-hover:-rotate-12 duration-300" />
-                )}
-              </button>
-
-              <Dropdown>
-                <Button variant="ghost" size="sm" className="p-2">
-                  <UserCircleIcon className="h-6 w-6 text-[var(--color-dash-muted)] dark:text-[var(--color-dash-label)]" />
-                </Button>
-                <Dropdown.Popover className="min-w-[200px]">
-                  <Dropdown.Menu
-                    className="p-2"
-                    onAction={(key) => {
-                      if (key === "settings") {
-                        toast.info("Opening settings...");
-                      } else if (key === "logout") {
-                        toast.success("Logged out successfully");
-                      }
-                    }}
-                  >
-                    <Dropdown.Item
-                      id="settings"
-                      textValue="Settings"
-                      className="px-3 py-2 rounded-lg hover:bg-[var(--color-dash-surface)] dark:hover:bg-[var(--color-dash-muted)]/20 cursor-pointer"
-                    >
-                      <div className="flex items-center gap-3">
-                        <Cog6ToothIcon className="h-5 w-5 text-[var(--color-dash-muted)] dark:text-[var(--color-dash-label)]" />
-                        <span className="text-sm font-medium text-[var(--color-dash-text)] dark:text-white">Settings</span>
-                      </div>
-                    </Dropdown.Item>
-                    <Dropdown.Item
-                      id="logout"
-                      textValue="Logout"
-                      variant="danger"
-                      className="px-3 py-2 rounded-lg hover:bg-[var(--color-dash-danger)]/10 cursor-pointer"
-                    >
-                      <div className="flex items-center gap-3">
-                        <ArrowRightOnRectangleIcon className="h-5 w-5 text-[var(--color-dash-danger)]" />
-                        <span className="text-sm font-medium text-[var(--color-dash-danger)]">Logout</span>
-                      </div>
-                    </Dropdown.Item>
-                  </Dropdown.Menu>
-                </Dropdown.Popover>
-              </Dropdown>
-            </div>
-          </div>
-        </div>
-      </header>
-
-      {/* Hero Section - Partnership Overview */}
-      <div className="relative bg-gradient-to-br from-[var(--color-dash-text)] via-[var(--color-dash-dark)] to-[var(--color-dash-text)] dark:from-[var(--color-dash-text)] dark:via-[var(--color-dash-text)] dark:to-[var(--color-dash-darker)] overflow-hidden">
-        {/* Subtle background pattern */}
-        <div className="absolute inset-0 opacity-5">
-          <div className="absolute inset-0" style={{
-            backgroundImage: 'radial-gradient(circle at 1px 1px, white 1px, transparent 0)',
-            backgroundSize: '40px 40px'
-          }} />
-        </div>
-
-        {/* Gradient orbs for depth */}
-        <div className="absolute top-0 right-0 w-96 h-96 bg-[var(--color-dash-accent)]/10 rounded-full blur-3xl" />
-        <div className="absolute bottom-0 left-0 w-96 h-96 bg-[var(--color-dash-success)]/10 rounded-full blur-3xl" />
-
-        <div className="relative max-w-[1600px] mx-auto px-8 py-12 pb-20">
-          <div className="max-w-3xl space-y-3 animate-fade-in">
-            <h1 className="text-3xl lg:text-4xl font-bold text-white tracking-tight leading-tight">
-              Hey there Jamie! Here's what's happening with your properties
-            </h1>
-            <p className="text-lg text-white/70 leading-relaxed">
-              Everything you need to manage your partnership with Engine — invoices, bookings, and any items that need your attention.
-            </p>
-          </div>
-        </div>
-      </div>
-
-      {/* Main Content */}
-      <div className="max-w-[1600px] mx-auto px-8 -mt-12 space-y-10">
-        {/* Quick Stats - Uniform metrics grid */}
-        <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-5 gap-5 animate-slide-up relative z-10">
-          {/* Revenue */}
-          <div
-            onClick={() => !isLoading && setIsRevenueModalOpen(true)}
-            className={isLoading ? "" : "cursor-pointer"}
-          >
-            <div className="bg-white dark:bg-[var(--color-dash-text)] rounded-xl p-6 shadow-sm hover:shadow-lg transition-all duration-300 border border-[var(--color-dash-label)]/20 dark:border-[var(--color-dash-muted)]/30 h-full">
-              {isLoading ? (
-                <div className="space-y-3">
-                  <div className="flex items-center justify-between">
-                    <div className="bg-[var(--color-dash-label)]/20 rounded-lg h-9 w-9 animate-pulse"></div>
-                    <div className="bg-[var(--color-dash-label)]/20 rounded-full h-5 w-16 animate-pulse"></div>
-                  </div>
-                  <div className="h-3 w-24 bg-[var(--color-dash-label)]/20 rounded animate-pulse"></div>
-                  <div className="h-10 w-32 bg-[var(--color-dash-label)]/20 rounded animate-pulse"></div>
-                  <div className="h-3 w-28 bg-[var(--color-dash-label)]/20 rounded animate-pulse"></div>
-                </div>
-              ) : (
-                <>
-                  <div className="flex items-center justify-between mb-3">
-                    <div className="bg-[var(--color-dash-success)]/10 rounded-lg p-2">
-                      <BanknotesIcon className="h-5 w-5 text-[var(--color-dash-success)]" />
-                    </div>
-                    <span className="inline-flex items-center rounded-full px-2 py-0.5 text-xs font-bold bg-[var(--color-dash-success)]/10 text-[var(--color-dash-success)]">
-                      +45%
-                    </span>
-                  </div>
-                  <p className="text-[var(--color-dash-muted)] dark:text-[var(--color-dash-label)] text-sm font-semibold mb-2 uppercase tracking-wider">Total Revenue</p>
-                  <p className="font-black text-[var(--color-dash-text)] dark:text-white mb-1 leading-tight" style={{ fontSize: 'var(--dash-metric-size)' }}>${(myRevenue / 1000).toFixed(0)}K</p>
-                  <p className="text-sm text-[var(--color-dash-muted)] dark:text-[var(--color-dash-label)]">earned with Engine</p>
-                </>
-              )}
-            </div>
-          </div>
-
-          {/* Items to Review */}
-          <div
-            onClick={() => !isLoading && setIsDisputesModalOpen(true)}
-            className={isLoading ? "" : "cursor-pointer"}
-          >
-            <div className="bg-white dark:bg-[var(--color-dash-text)] rounded-xl p-6 shadow-sm hover:shadow-lg transition-all duration-300 border border-[var(--color-dash-warning)]/50 dark:border-[var(--color-dash-warning)]/30 h-full">
-              {isLoading ? (
-                <CardSkeleton lines={4} />
-              ) : (
-                <>
-                  <div className="flex items-center justify-between mb-3">
-                    <div className="bg-[var(--color-dash-warning)]/10 rounded-lg p-2">
-                      <ExclamationTriangleIcon className="h-5 w-5 text-[var(--color-dash-warning)]" />
-                    </div>
-                    <span className="inline-flex items-center rounded-full px-2 py-0.5 text-xs font-bold bg-[var(--color-dash-warning)] text-white">
-                      REVIEW
-                    </span>
-                  </div>
-                  <p className="text-[var(--color-dash-muted)] dark:text-[var(--color-dash-label)] text-sm font-semibold mb-2 uppercase tracking-wider">Things to Review</p>
-                  <p className="font-black text-[var(--color-dash-text)] dark:text-white mb-1 leading-tight" style={{ fontSize: 'var(--dash-metric-size)' }}>{myOpenDisputes}</p>
-                  <p className="text-sm text-[var(--color-dash-muted)] dark:text-[var(--color-dash-label)]">items need attention</p>
-                </>
-              )}
-            </div>
-          </div>
-
-          {/* Properties */}
-          <div
-            onClick={() => !isLoading && setIsPropertiesModalOpen(true)}
-            className={isLoading ? "" : "cursor-pointer"}
-          >
-            <div className="bg-white dark:bg-[var(--color-dash-text)] rounded-xl p-6 shadow-sm hover:shadow-lg transition-all duration-300 border border-[var(--color-dash-label)]/20 dark:border-[var(--color-dash-muted)]/30 h-full">
-              {isLoading ? (
-                <CardSkeleton lines={4} />
-              ) : (
-                <>
-                  <div className="flex items-center justify-between mb-3">
-                    <div className="bg-[var(--color-dash-accent)]/10 rounded-lg p-2">
-                      <BuildingOfficeIcon className="h-5 w-5 text-[var(--color-dash-accent)]" />
-                    </div>
-                  </div>
-                  <p className="text-[var(--color-dash-muted)] dark:text-[var(--color-dash-label)] text-sm font-semibold mb-2 uppercase tracking-wider">Properties</p>
-                  <p className="font-black text-[var(--color-dash-text)] dark:text-white mb-1 leading-tight" style={{ fontSize: 'var(--dash-metric-size)' }}>{myProperties}</p>
-                  <p className="text-sm text-[var(--color-dash-muted)] dark:text-[var(--color-dash-label)]">active locations</p>
-                </>
-              )}
-            </div>
-          </div>
-
-          {/* Reservations */}
-          <div
-            onClick={() => !isLoading && setIsReservationsModalOpen(true)}
-            className={isLoading ? "" : "cursor-pointer"}
-          >
-            <div className="bg-white dark:bg-[var(--color-dash-text)] rounded-xl p-6 shadow-sm hover:shadow-lg transition-all duration-300 border border-[var(--color-dash-label)]/20 dark:border-[var(--color-dash-muted)]/30 h-full">
-              {isLoading ? (
-                <CardSkeleton lines={4} />
-              ) : (
-                <>
-                  <div className="flex items-center justify-between mb-3">
-                    <div className="bg-[var(--color-dash-info)]/10 rounded-lg p-2">
-                      <ClockIcon className="h-5 w-5 text-[var(--color-dash-info)]" />
-                    </div>
-                  </div>
-                  <p className="text-[var(--color-dash-muted)] dark:text-[var(--color-dash-label)] text-sm font-semibold mb-2 uppercase tracking-wider">Reservations</p>
-                  <p className="font-black text-[var(--color-dash-text)] dark:text-white mb-1 leading-tight" style={{ fontSize: 'var(--dash-metric-size)' }}>{myReservations}</p>
-                  <p className="text-sm text-[var(--color-dash-muted)] dark:text-[var(--color-dash-label)]">through Engine</p>
-                </>
-              )}
-            </div>
-          </div>
-
-          {/* Invoices */}
-          <div
-            onClick={() => !isLoading && setIsInvoicesModalOpen(true)}
-            className={isLoading ? "" : "cursor-pointer"}
-          >
-            <div className="bg-white dark:bg-[var(--color-dash-text)] rounded-xl p-6 shadow-sm hover:shadow-lg transition-all duration-300 border border-[var(--color-dash-label)]/20 dark:border-[var(--color-dash-muted)]/30 h-full">
-              {isLoading ? (
-                <CardSkeleton lines={4} />
-              ) : (
-                <>
-                  <div className="flex items-center justify-between mb-3">
-                    <div className="bg-[var(--color-dash-danger)]/10 rounded-lg p-2">
-                      <ShieldCheckIcon className="h-5 w-5 text-[var(--color-dash-danger)]" />
-                    </div>
-                  </div>
-                  <p className="text-[var(--color-dash-muted)] dark:text-[var(--color-dash-label)] text-sm font-semibold mb-2 uppercase tracking-wider">Invoices</p>
-                  <p className="font-black text-[var(--color-dash-text)] dark:text-white mb-1 leading-tight" style={{ fontSize: 'var(--dash-metric-size)' }}>{myPendingInvoices}</p>
-                  <p className="text-sm text-[var(--color-dash-muted)] dark:text-[var(--color-dash-label)]">ready to pay</p>
-                </>
-              )}
-            </div>
-          </div>
-        </div>
-
-        {/* Property Leaderboard - NEW SECTION */}
-        {isLoading ? (
-          <div className="bg-gradient-to-br from-white via-[var(--color-dash-surface)] to-white dark:from-[var(--color-dash-text)] dark:via-[var(--color-dash-dark)] dark:to-[var(--color-dash-text)] rounded-2xl p-8 shadow-xl border border-[var(--color-dash-label)]/20 dark:border-[var(--color-dash-muted)]/30">
-            <div className="mb-6">
-              <div className="h-9 w-96 bg-[var(--color-dash-label)]/20 rounded animate-pulse mb-2"></div>
-              <div className="h-6 w-72 bg-[var(--color-dash-label)]/20 rounded animate-pulse"></div>
-            </div>
-            <div className="space-y-4">
-              <CardSkeleton lines={4} />
-              <CardSkeleton lines={4} />
-              <CardSkeleton lines={4} />
-              <CardSkeleton lines={4} />
-            </div>
-          </div>
-        ) : (
-          <div className="bg-gradient-to-br from-white via-[var(--color-dash-surface)] to-white dark:from-[var(--color-dash-text)] dark:via-[var(--color-dash-dark)] dark:to-[var(--color-dash-text)] rounded-2xl p-8 shadow-xl border border-[var(--color-dash-label)]/20 dark:border-[var(--color-dash-muted)]/30">
-            <div className="mb-6">
-              <h2 className="text-3xl font-black text-[var(--color-dash-text)] dark:text-white tracking-tight mb-2">
-                Property Performance Leaderboard
-              </h2>
-              <p className="text-lg text-[var(--color-dash-muted)] dark:text-[var(--color-dash-label)]">
-                Your 4 properties ranked by total revenue (last 6 months)
-              </p>
-            </div>
-
-            <div className="space-y-4">
-              {propertyLeaderboard.map((property, idx) => {
-                // Determine icon and color based on rank
-                let RankIcon = StarIcon;
-                let iconColor = "text-[var(--color-dash-label)]";
-                let bgColor = "bg-[var(--color-dash-label)]/10";
-
-                if (idx === 0) {
-                  RankIcon = TrophyIcon;
-                  iconColor = "text-[var(--color-dash-warning)]";
-                  bgColor = "bg-[var(--color-dash-warning)]/10";
-                } else if (idx === 1) {
-                  RankIcon = StarIcon;
-                  iconColor = "text-[var(--color-dash-label)]";
-                  bgColor = "bg-[var(--color-dash-label)]/10";
-                } else if (idx === 2) {
-                  RankIcon = StarIcon;
-                  iconColor = "text-[var(--color-dash-warning)]";
-                  bgColor = "bg-[var(--color-dash-warning)]/10";
-                } else {
-                  RankIcon = RocketLaunchIcon;
-                  iconColor = "text-[var(--color-dash-accent)]";
-                  bgColor = "bg-[var(--color-dash-accent)]/10";
-                }
-
-                return (
-                  <div
-                    key={idx}
-                    className="group bg-white dark:bg-[var(--color-dash-text)] rounded-xl p-6 border-2 border-[var(--color-dash-label)]/20 dark:border-[var(--color-dash-muted)]/30 hover:border-[var(--color-dash-success)] hover:shadow-lg transition-all duration-300"
-                  >
-                    <div className="flex items-center justify-between gap-6">
-                      <div className="flex items-center gap-4 flex-1">
-                        {/* Rank Icon */}
-                        <div className={`flex-shrink-0 ${bgColor} rounded-xl p-3`}>
-                          <RankIcon className={`h-8 w-8 ${iconColor}`} />
-                        </div>
-
-                        {/* Property info */}
-                        <div className="flex-1">
-                          <div className="flex items-center gap-3 mb-2">
-                            <h3 className="text-xl font-bold text-[var(--color-dash-text)] dark:text-white">
-                              {property.name}
-                            </h3>
-                            <span className="inline-flex items-center rounded-full px-3 py-1 text-xs font-bold bg-[var(--color-dash-success)]/20 text-[var(--color-dash-success)] border border-[var(--color-dash-success)]/30">
-                              +{property.growth}% growth
-                            </span>
-                          </div>
-                          <p className="text-sm text-[var(--color-dash-muted)] dark:text-[var(--color-dash-label)] mb-1">
-                            {property.insight}
-                          </p>
-                          <div className="flex items-center gap-6 text-sm">
-                            <span className="text-[var(--color-dash-muted)] dark:text-[var(--color-dash-label)]">
-                              Total: <strong className="text-[var(--color-dash-text)] dark:text-white">${property.revenue.toLocaleString()}</strong>
-                            </span>
-                            <span className="text-[var(--color-dash-muted)] dark:text-[var(--color-dash-label)]">
-                              Latest: <strong className="text-[var(--color-dash-text)] dark:text-white">${property.latestRevenue.toLocaleString()}</strong>
-                            </span>
-                          </div>
-                        </div>
-
-                        {/* Growth indicator */}
-                        <div className="text-right flex-shrink-0">
-                          <p className="font-black text-[var(--color-dash-success)] mb-1 leading-tight" style={{ fontSize: 'var(--dash-metric-size)' }}>
-                            {property.growth}%
-                          </p>
-                          <p className="text-xs text-[var(--color-dash-muted)] dark:text-[var(--color-dash-label)] uppercase tracking-wider">
-                            Growth
-                          </p>
-                        </div>
-                      </div>
-                    </div>
-                  </div>
-                );
-              })}
-            </div>
-
-            {/* Summary insight */}
-            <div className="mt-6 bg-[var(--color-dash-info)]/10 border-l-4 border-[var(--color-dash-info)] rounded-r-lg p-5">
-              <div className="flex items-start gap-3">
-                <div className="flex-shrink-0">
-                  <LightBulbIcon className="h-5 w-5 text-[var(--color-dash-info)]" />
-                </div>
-                <p className="text-base text-[var(--color-dash-text)] dark:text-white font-medium">
-                  <strong>Key Insight:</strong> Austin is driving 41% of bookings through Engine and growing 60%.
-                  SF Bay doubled in 6 months (100% growth) — strong performance across your portfolio.
-                </p>
-              </div>
-            </div>
-          </div>
-        )}
-
-        {/* Penalty Calculation Issue Card */}
-        {!isLoading && myPenalties.filter((p: any) => p.isHero).length > 0 && (
-          <div className="bg-white dark:bg-[var(--color-dash-text)] border-2 border-[var(--color-dash-warning)]/50 rounded-2xl p-8 shadow-lg hover:shadow-xl transition-shadow duration-300">
-            <div className="flex items-start gap-4 mb-6">
-              <div className="flex-shrink-0">
-                <div className="bg-[var(--color-dash-warning)]/10 rounded-xl p-3">
-                  <ExclamationTriangleIcon className="h-8 w-8 text-[var(--color-dash-warning)]" />
-                </div>
-              </div>
-              <div className="flex-1">
-                <div className="flex items-start justify-between gap-4 mb-2">
-                  <div>
-                    <h3 className="text-2xl font-bold text-[var(--color-dash-text)] dark:text-white mb-1">
-                      Penalty Calculation Issue
-                    </h3>
-                    <p className="text-sm text-[var(--color-dash-muted)] dark:text-[var(--color-dash-label)]">
-                      ATR-00001 · Summit Austin Convention Center · TechCorp Inc. booking
-                    </p>
-                  </div>
-                  <span className="inline-flex items-center rounded-full px-3 py-1 text-xs font-bold bg-[var(--color-dash-warning)] text-white flex-shrink-0">
-                    NEEDS REVIEW
-                  </span>
-                </div>
-              </div>
-            </div>
-
-            <div className="grid grid-cols-1 md:grid-cols-3 gap-4 mb-6">
-              <div className="bg-[var(--color-dash-surface)] dark:bg-[var(--color-dash-muted)]/10 rounded-xl p-5 border border-[var(--color-dash-label)]/20 dark:border-[var(--color-dash-muted)]/30">
-                <p className="text-xs font-semibold text-[var(--color-dash-muted)] dark:text-[var(--color-dash-label)] mb-2 uppercase tracking-wider">Current Penalty</p>
-                <p className="font-black text-[var(--color-dash-text)] dark:text-white mb-1 leading-tight" style={{ fontSize: 'var(--dash-metric-sub)' }}>$9,000</p>
-                <p className="text-xs text-[var(--color-dash-muted)] dark:text-[var(--color-dash-label)]">You owe Engine</p>
-              </div>
-              <div className="bg-[var(--color-dash-success)]/5 dark:bg-[var(--color-dash-success)]/10 rounded-xl p-5 border border-[var(--color-dash-success)]/30">
-                <p className="text-xs font-semibold text-[var(--color-dash-success)] mb-2 uppercase tracking-wider">Resale Credit Missing</p>
-                <p className="font-black text-[var(--color-dash-success)] mb-1 leading-tight" style={{ fontSize: 'var(--dash-metric-sub)' }}>-$2,400</p>
-                <p className="text-xs text-[var(--color-dash-muted)] dark:text-[var(--color-dash-label)]">Should reduce penalty</p>
-              </div>
-              <div className="bg-[var(--color-dash-accent)]/5 dark:bg-[var(--color-dash-accent)]/10 rounded-xl p-5 border border-[var(--color-dash-accent)]/30">
-                <p className="text-xs font-semibold text-[var(--color-dash-muted)] dark:text-[var(--color-dash-label)] mb-2 uppercase tracking-wider">Corrected Amount</p>
-                <p className="font-black text-[var(--color-dash-accent)] mb-1 leading-tight" style={{ fontSize: 'var(--dash-metric-sub)' }}>$6,600</p>
-                <p className="text-xs text-[var(--color-dash-muted)] dark:text-[var(--color-dash-label)]">What you should owe</p>
-              </div>
-            </div>
-
-            <div className="bg-[var(--color-dash-warning)]/10 border-l-4 border-[var(--color-dash-warning)] rounded-r-lg p-4 mb-6">
-              <p className="text-sm text-[var(--color-dash-text)] dark:text-white leading-relaxed">
-                Your contract specifies a <strong>50% resale credit</strong> for rooms that were resold. Based on <strong>8 rooms at $200/night for 3 nights</strong>,
-                you should receive a <strong className="text-[var(--color-dash-success)]">$2,400 credit</strong> that wasn't applied. This should reduce your penalty from $9,000 to <strong>$6,600</strong>.
-              </p>
-            </div>
-
-            <button
-              onClick={() => {
-                setSelectedPenalty(myPenalties.find((p: any) => p.isHero));
-                setIsPenaltyModalOpen(true);
-              }}
-              className="inline-flex items-center gap-2 px-6 py-3 bg-[var(--color-dash-text)] dark:bg-white hover:bg-[var(--color-dash-muted)] dark:hover:bg-[var(--color-dash-surface)] text-white dark:text-[var(--color-dash-text)] font-semibold rounded-xl transition-all duration-200 hover:shadow-lg group"
-            >
-              <ExclamationTriangleIcon className="h-5 w-5" />
-              Review This Calculation
-              <svg className="h-4 w-4 transition-transform group-hover:translate-x-1" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
-              </svg>
-            </button>
-          </div>
-        )}
-
-        {/* Section — Billing & Contract Details */}
-        <div className="pt-8 space-y-2">
-          <h2 className="text-3xl font-bold text-[var(--color-dash-text)] dark:text-white tracking-tight">
-            Billing & contract details
-          </h2>
-          <p className="text-lg text-[var(--color-dash-muted)] dark:text-[var(--color-dash-label)]">
-            Keep track of invoices and your partnership terms
-          </p>
-        </div>
-
-        {/* Two Charts Grid */}
-        {isLoading ? (
-          <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
-            <CardSkeleton lines={6} />
-            <CardSkeleton lines={6} />
-          </div>
-        ) : (
-          <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
-            {/* Revenue Trend by Property (multi-line) */}
-            <div className="bg-white dark:bg-[var(--color-dash-text)] border border-[var(--color-dash-label)]/20 dark:border-[var(--color-dash-muted)]/30 rounded-xl shadow-sm hover:shadow-lg transition-shadow duration-300 overflow-hidden">
-              <div className="p-6 border-b border-[var(--color-dash-label)]/20 dark:border-[var(--color-dash-muted)]/30">
-                <h3 className="text-xl font-bold text-[var(--color-dash-text)] dark:text-white mb-1">
-                  Revenue by property
-                </h3>
-                <p className="text-sm text-[var(--color-dash-muted)] dark:text-[var(--color-dash-label)]">
-                  Monthly trend across {revenueTrendByProperty.properties?.length || 4} properties
-                </p>
-                <div className="flex flex-wrap gap-3 mt-3">
-                  {revenueTrendByProperty.properties.map((prop) => (
-                    <div key={prop.name} className="flex items-center gap-1.5">
-                      <span className="inline-block h-2 w-2 rounded-full flex-shrink-0" style={{ backgroundColor: prop.color }} />
-                      <span className="text-xs font-medium text-[var(--color-dash-muted)] dark:text-[var(--color-dash-label)]">{prop.name.replace('Summit ', '')}</span>
-                    </div>
-                  ))}
-                </div>
-              </div>
-              <div className="p-4 w-full">
-                {revenueTrendByProperty?.months && revenueTrendByProperty?.properties ? (
-                  <div className="w-full" style={{ minHeight: '240px' }}>
-                    <D3Chart data={revenueTrendByProperty} renderChart={renderRevenueTrendByProperty} height={240} responsive={true} ariaLabel="Revenue trend by property" />
-                  </div>
-                ) : (
-                  <div className="h-[240px] flex items-center justify-center text-[var(--color-dash-muted)] dark:text-[var(--color-dash-label)]">Loading chart data...</div>
-                )}
-              </div>
-            </div>
-
-            {/* Total Monthly Revenue Growth (bar chart) */}
-            <div className="bg-white dark:bg-[var(--color-dash-text)] border border-[var(--color-dash-label)]/20 dark:border-[var(--color-dash-muted)]/30 rounded-xl shadow-sm hover:shadow-lg transition-shadow duration-300 overflow-hidden">
-              <div className="p-6 border-b border-[var(--color-dash-label)]/20 dark:border-[var(--color-dash-muted)]/30">
-                <h3 className="text-xl font-bold text-[var(--color-dash-text)] dark:text-white mb-1">
-                  Total revenue growth
-                </h3>
-                <p className="text-sm text-[var(--color-dash-muted)] dark:text-[var(--color-dash-label)]">
-                  Combined monthly revenue — up 67% over 6 months
-                </p>
-              </div>
-              <div className="p-4 w-full">
-                {monthlyTotalRevenue ? (
-                  <div className="w-full" style={{ minHeight: '240px' }}>
-                    <D3Chart data={monthlyTotalRevenue} renderChart={renderTotalRevenueGrowth} height={240} responsive={true} ariaLabel="Total revenue growth" />
-                  </div>
-                ) : (
-                  <div className="h-[240px] flex items-center justify-center text-[var(--color-dash-muted)] dark:text-[var(--color-dash-label)]">Loading chart data...</div>
-                )}
-              </div>
-            </div>
-          </div>
-        )}
-
-        {/* Invoices & Contract */}
-        {isLoading ? (
-          <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
-            <CardSkeleton lines={5} />
-            <CardSkeleton lines={5} />
-          </div>
-        ) : (
-          <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
-            <ListCard
-              title="Your invoices"
-              subtitle="Recent statements"
-              items={myInvoices.map((inv) => ({
-                id: inv.id,
-                title: inv.title,
-                description: inv.description,
-                status: inv.status,
-                value: `$${inv.amount.toLocaleString()}`,
-                timestamp: `Due ${inv.due}`,
-              }))}
-              maxBodyHeight={300}
-              showStatus={true}
-              showTimestamp={true}
-              dense={false}
-              divided={true}
-              onItemClick={(item) => {
-                toast.info(`Opening invoice ${item.title.split(' — ')[0]}`);
-              }}
-              emptyMessage="No invoices right now."
-              loading={isLoading}
-            />
-
-            <div className="bg-white dark:bg-[var(--color-dash-text)] border border-[var(--color-dash-label)]/20 dark:border-[var(--color-dash-muted)]/30 rounded-xl shadow-sm hover:shadow-lg transition-shadow duration-300 overflow-hidden">
-              <div className="p-6 border-b border-[var(--color-dash-label)]/20 dark:border-[var(--color-dash-muted)]/30">
-                <h3 className="text-xl font-bold text-[var(--color-dash-text)] dark:text-white mb-1">
-                  Your Contract
-                </h3>
-                <p className="text-sm text-[var(--color-dash-muted)] dark:text-[var(--color-dash-label)]">
-                  Partnership terms
-                </p>
-              </div>
-              <div className="p-6 space-y-4">
-                <div className="flex items-center justify-between pb-4 border-b border-[var(--color-dash-label)]/20 dark:border-[var(--color-dash-muted)]/30">
-                  <div>
-                    <p className="text-xs text-[var(--color-dash-muted)] dark:text-[var(--color-dash-label)] mb-1 uppercase tracking-wider">Contract ID</p>
-                    <p className="text-lg font-bold text-[var(--color-dash-text)] dark:text-white">CNTR-00002</p>
-                  </div>
-                  <span className="inline-flex items-center rounded-full px-3 py-1 text-xs font-medium bg-[var(--color-dash-success)]/10 text-[var(--color-dash-success)] border border-[var(--color-dash-success)]/30">
-                    Active
-                  </span>
-                </div>
-
-                <div className="grid grid-cols-2 gap-4">
-                  <div>
-                    <p className="text-xs text-[var(--color-dash-muted)] dark:text-[var(--color-dash-label)] mb-1 uppercase tracking-wider">Commission Rate</p>
-                    <p className="text-2xl font-bold text-[var(--color-dash-success)]">17%</p>
-                  </div>
-                  <div>
-                    <p className="text-xs text-[var(--color-dash-muted)] dark:text-[var(--color-dash-label)] mb-1 uppercase tracking-wider">Contract Term</p>
-                    <p className="text-sm font-semibold text-[var(--color-dash-text)] dark:text-white">Mar 2025 - Feb 2027</p>
-                  </div>
-                </div>
-
-                <div className="bg-[var(--color-dash-surface)] dark:bg-[var(--color-dash-muted)]/10 rounded-lg p-4 space-y-3">
-                  <div>
-                    <p className="text-xs text-[var(--color-dash-muted)] dark:text-[var(--color-dash-label)] mb-1 uppercase tracking-wider">Attrition Method</p>
-                    <p className="text-sm font-semibold text-[var(--color-dash-text)] dark:text-white">Per Night (80% threshold)</p>
-                  </div>
-                  <div>
-                    <p className="text-xs text-[var(--color-dash-muted)] dark:text-[var(--color-dash-label)] mb-1 uppercase tracking-wider">Resale Credit Policy</p>
-                    <p className="text-sm font-semibold text-[var(--color-dash-text)] dark:text-white">Partial Credit (50%)</p>
-                  </div>
-                </div>
-
-                <div className="pt-2">
-                  <button
-                    onClick={() => toast.info("Opening full contract PDF...")}
-                    className="w-full inline-flex items-center justify-center gap-2 px-4 py-3 bg-[var(--color-dash-surface)] dark:bg-[var(--color-dash-muted)]/20 hover:bg-[var(--color-dash-accent)]/10 dark:hover:bg-[var(--color-dash-accent)]/10 text-[var(--color-dash-text)] dark:text-white font-semibold rounded-lg border border-[var(--color-dash-label)]/30 dark:border-[var(--color-dash-muted)]/50 hover:border-[var(--color-dash-accent)] transition-colors text-sm"
-                  >
-                    <DocumentArrowDownIcon className="h-4 w-4" />
-                    Download Full Contract
-                  </button>
-                </div>
-              </div>
-            </div>
-          </div>
-        )}
-
-        {/* Section — Recent Activity */}
-        <div className="pt-8 space-y-2">
-          <h2 className="text-3xl font-bold text-[var(--color-dash-text)] dark:text-white tracking-tight">
-            Recent activity
-          </h2>
-          <p className="text-lg text-[var(--color-dash-muted)] dark:text-[var(--color-dash-label)]">
-            Here's what's been happening with your properties
-          </p>
-        </div>
-
-        {/* Action Items Grid */}
-        {isLoading ? (
-          <div className="grid grid-cols-1 md:grid-cols-2 gap-5">
-            <CardSkeleton lines={4} />
-            <CardSkeleton lines={4} />
-          </div>
-        ) : myDisputes.length > 0 ? (
-          <div className="space-y-5">
-            <h3 className="text-xl font-bold text-[var(--color-dash-text)] dark:text-white">
-              Items that need your attention
-            </h3>
-            <div className="grid grid-cols-1 md:grid-cols-2 gap-5">
-              {myDisputes.map((d) => (
-                <div
-                  key={d.id}
-                  onClick={() => {
-                    toast.info(`Opening ${d.title}`);
-                    setSelectedDispute(d);
-                  }}
-                  className="group bg-white dark:bg-[var(--color-dash-text)] border border-[var(--color-dash-label)]/20 dark:border-[var(--color-dash-muted)]/30 rounded-xl p-6 hover:border-[var(--color-dash-accent)] dark:hover:border-[var(--color-dash-accent)] transition-all duration-300 hover:shadow-lg cursor-pointer"
-                >
-                  <div className="flex items-start justify-between gap-3 mb-3">
-                    <h4 className="font-semibold text-[var(--color-dash-text)] dark:text-white flex-1">
-                      {d.title}
-                    </h4>
-                    <span
-                      className={`inline-flex items-center rounded-full px-2 py-1 text-xs font-medium flex-shrink-0 ${
-                        d.status === "critical"
-                          ? "bg-[var(--color-dash-danger)]/10 text-[var(--color-dash-danger)] border border-[var(--color-dash-danger)]/30"
-                          : d.status === "warning"
-                          ? "bg-[var(--color-dash-warning)]/10 text-[var(--color-dash-warning)] border border-[var(--color-dash-warning)]/30"
-                          : "bg-[var(--color-dash-info)]/10 text-[var(--color-dash-info)] border border-[var(--color-dash-info)]/30"
-                      }`}
-                    >
-                      {d.badge}
-                    </span>
-                  </div>
-                  <p className="text-sm text-[var(--color-dash-muted)] dark:text-[var(--color-dash-label)] mb-4">
-                    {d.description}
-                  </p>
-                  <div className="flex items-center justify-between">
-                    <span className="text-lg font-bold text-[var(--color-dash-text)] dark:text-white">
-                      ${d.amount.toLocaleString()}
-                    </span>
-                    {d.agentHandled && (
-                      <span className="text-xs text-[var(--color-dash-accent)] flex items-center gap-1">
-                        <svg className="h-3 w-3" fill="currentColor" viewBox="0 0 20 20">
-                          <path fillRule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clipRule="evenodd" />
-                        </svg>
-                        Agent reviewed
-                      </span>
-                    )}
-                  </div>
-                </div>
-              ))}
-            </div>
-          </div>
-        ) : null}
-
-        {/* All Penalties - Enhanced Table */}
-        {isLoading ? (
-          <CardSkeleton lines={8} />
-        ) : (
-          <div className="bg-white dark:bg-[var(--color-dash-text)] border border-[var(--color-dash-label)]/20 dark:border-[var(--color-dash-muted)]/30 rounded-xl overflow-hidden shadow-sm hover:shadow-lg transition-shadow duration-300">
-            <div className="p-8 border-b border-[var(--color-dash-label)]/20 dark:border-[var(--color-dash-muted)]/30">
-              <h3 className="text-2xl font-bold text-[var(--color-dash-text)] dark:text-white mb-2">
-                All attrition penalties
-              </h3>
-              <p className="text-base text-[var(--color-dash-muted)] dark:text-[var(--color-dash-label)]">
-                {myPenalties.length} {myPenalties.length === 1 ? 'penalty' : 'penalties'} · Showing recent calculations and adjustments
-              </p>
-            </div>
-            <div className="overflow-x-auto">
-            <table className="w-full">
-              <thead className="bg-[var(--color-dash-surface)] dark:bg-[var(--color-dash-muted)]/10 border-b border-[var(--color-dash-label)]/20 dark:border-[var(--color-dash-muted)]/30">
-                <tr>
-                  <th className="px-6 py-3 text-left text-xs font-semibold text-[var(--color-dash-muted)] dark:text-[var(--color-dash-label)] uppercase tracking-wider">
-                    Penalty ID
-                  </th>
-                  <th className="px-6 py-3 text-left text-xs font-semibold text-[var(--color-dash-muted)] dark:text-[var(--color-dash-label)] uppercase tracking-wider">
-                    Property
-                  </th>
-                  <th className="px-6 py-3 text-left text-xs font-semibold text-[var(--color-dash-muted)] dark:text-[var(--color-dash-label)] uppercase tracking-wider">
-                    Customer
-                  </th>
-                  <th className="px-6 py-3 text-left text-xs font-semibold text-[var(--color-dash-muted)] dark:text-[var(--color-dash-label)] uppercase tracking-wider">
-                    Method
-                  </th>
-                  <th className="px-6 py-3 text-right text-xs font-semibold text-[var(--color-dash-muted)] dark:text-[var(--color-dash-label)] uppercase tracking-wider">
-                    Penalty
-                  </th>
-                  <th className="px-6 py-3 text-right text-xs font-semibold text-[var(--color-dash-muted)] dark:text-[var(--color-dash-label)] uppercase tracking-wider">
-                    Credit
-                  </th>
-                  <th className="px-6 py-3 text-center text-xs font-semibold text-[var(--color-dash-muted)] dark:text-[var(--color-dash-label)] uppercase tracking-wider">
-                    Status
-                  </th>
-                </tr>
-              </thead>
-              <tbody className="divide-y divide-[var(--color-dash-label)]/20 dark:divide-[var(--color-dash-muted)]/30">
-                {myPenalties.map((penalty) => (
-                  <tr
-                    key={penalty.id}
-                    onClick={() => {
-                      setSelectedPenalty(penalty);
-                      setIsPenaltyModalOpen(true);
-                    }}
-                    className={`hover:bg-[var(--color-dash-surface)]/50 dark:hover:bg-[var(--color-dash-muted)]/5 transition-colors cursor-pointer ${
-                      penalty.isHero ? "bg-[var(--color-dash-warning)]/5" : ""
-                    }`}
-                  >
-                    <td className="px-6 py-4 whitespace-nowrap">
-                      <div className="flex items-center gap-2">
-                        <span className="text-sm font-medium text-[var(--color-dash-text)] dark:text-white">
-                          {penalty.name}
-                        </span>
-                        {penalty.isHero && (
-                          <span className="inline-flex items-center rounded-full px-2 py-0.5 text-xs font-medium bg-[var(--color-dash-warning)]/20 text-[var(--color-dash-warning)] border border-[var(--color-dash-warning)]/30">
-                            Review
-                          </span>
-                        )}
-                      </div>
-                    </td>
-                    <td className="px-6 py-4 text-sm text-[var(--color-dash-muted)] dark:text-[var(--color-dash-label)]">
-                      {penalty.property}
-                    </td>
-                    <td className="px-6 py-4 text-sm text-[var(--color-dash-muted)] dark:text-[var(--color-dash-label)]">
-                      {penalty.customer}
-                    </td>
-                    <td className="px-6 py-4 text-sm text-[var(--color-dash-muted)] dark:text-[var(--color-dash-label)]">
-                      {penalty.method}
-                    </td>
-                    <td className="px-6 py-4 text-sm font-semibold text-right text-[var(--color-dash-text)] dark:text-white">
-                      ${penalty.penalty.toLocaleString()}
-                    </td>
-                    <td className="px-6 py-4 text-sm font-semibold text-right text-[var(--color-dash-success)]">
-                      ${penalty.credit.toLocaleString()}
-                    </td>
-                    <td className="px-6 py-4 text-center">
-                      <span
-                        className={`inline-flex items-center rounded-full px-2.5 py-1 text-xs font-medium ${
-                          penalty.status === "Approved"
-                            ? "bg-[var(--color-dash-success)]/10 text-[var(--color-dash-success)] border border-[var(--color-dash-success)]/30"
-                            : penalty.status === "Reviewed"
-                            ? "bg-[var(--color-dash-info)]/10 text-[var(--color-dash-info)] border border-[var(--color-dash-info)]/30"
-                            : penalty.status === "Calculated"
-                            ? "bg-[var(--color-dash-label)]/10 text-[var(--color-dash-muted)] border border-[var(--color-dash-label)]/30"
-                            : "bg-[var(--color-dash-danger)]/10 text-[var(--color-dash-danger)] border border-[var(--color-dash-danger)]/30"
-                        }`}
-                      >
-                        {penalty.status}
-                      </span>
-                    </td>
-                  </tr>
-                ))}
-              </tbody>
-            </table>
-          </div>
-        </div>
-        )}
-
-        {/* Section */}
-        <div className="pt-8 space-y-2">
-          <h2 className="text-3xl font-bold text-[var(--color-dash-text)] dark:text-white tracking-tight">
-            What's been happening
-          </h2>
-          <p className="text-lg text-[var(--color-dash-muted)] dark:text-[var(--color-dash-label)]">
-            A quick timeline of recent updates
-          </p>
-        </div>
-
-        {/* Activity Feed */}
-        {isLoading ? (
-          <CardSkeleton lines={6} />
-        ) : (
-          <ActivityCard
-            title="Recent updates"
-            actions={myActivity.map((a) => ({
-              id: a.id,
-              status:
-                a.status === "alert"
-                  ? "error"
-                  : a.status === "warning"
-                  ? "pending"
-                  : a.status === "success"
-                  ? "complete"
-                  : "working",
-              title: a.title,
-              subtitle: a.description,
-              timestamp: a.timestamp,
-            }))}
-          />
-        )}
-
-        {/* Help Section - Enhanced */}
-        <div className="bg-gradient-to-br from-white to-[var(--color-dash-surface)] dark:from-[var(--color-dash-text)] dark:to-[var(--color-dash-dark)] rounded-2xl p-12 border border-[var(--color-dash-label)]/20 dark:border-[var(--color-dash-muted)]/30 shadow-lg">
-          <div className="text-center max-w-2xl mx-auto space-y-6">
-            <h3 className="text-3xl font-bold text-[var(--color-dash-text)] dark:text-white tracking-tight">
-              Questions? We're here to help
-            </h3>
-            <p className="text-[var(--color-dash-muted)] dark:text-[var(--color-dash-label)] text-xl leading-relaxed">
-              Our partner team is standing by if you need anything — from billing questions to contract details.
-            </p>
-            <div className="flex gap-4 justify-center flex-wrap pt-2">
-              <Modal>
-                <button className="group px-8 py-4 bg-[var(--color-dash-text)] dark:bg-white hover:bg-[var(--color-dash-muted)] dark:hover:bg-[var(--color-dash-surface)] text-white dark:text-[var(--color-dash-text)] font-semibold rounded-xl transition-colors duration-200 hover:shadow-xl">
-                  Get in touch
-                </button>
-                <Modal.Backdrop>
-                  <Modal.Container>
-                    <Modal.Dialog className="max-w-2xl">
-                      <Modal.CloseTrigger />
-                      <Modal.Header>
-                        <Modal.Heading className="text-2xl font-bold text-[var(--color-dash-text)] dark:text-white">
-                          Contact Support
-                        </Modal.Heading>
-                      </Modal.Header>
-                      <Modal.Body className="space-y-6">
-                        <p className="text-[var(--color-dash-muted)] dark:text-[var(--color-dash-label)]">
-                          Our partner support team is here to help with billing questions, contract details, or any other issues you may have.
-                        </p>
-
-                        {/* Contact Options */}
-                        <div className="space-y-4">
-                          <div className="bg-[var(--color-dash-surface)] dark:bg-[var(--color-dash-muted)]/10 rounded-xl p-6 hover:border hover:border-[var(--color-dash-accent)] transition-colors cursor-pointer">
-                            <div className="flex items-start gap-4">
-                              <div className="bg-[var(--color-dash-accent)]/20 rounded-lg p-3">
-                                <svg className="h-6 w-6 text-[var(--color-dash-accent)]" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" />
-                                </svg>
-                              </div>
-                              <div>
-                                <h4 className="font-semibold text-[var(--color-dash-text)] dark:text-white mb-1">Email Support</h4>
-                                <p className="text-sm text-[var(--color-dash-muted)] dark:text-[var(--color-dash-label)] mb-2">
-                                  Get help via email - we typically respond within 2-4 hours
-                                </p>
-                                <a href="mailto:partners@engine.com" className="text-sm font-medium text-[var(--color-dash-accent)] hover:underline">
-                                  partners@engine.com
-                                </a>
-                              </div>
-                            </div>
-                          </div>
-
-                          <div className="bg-[var(--color-dash-surface)] dark:bg-[var(--color-dash-muted)]/10 rounded-xl p-6 hover:border hover:border-[var(--color-dash-accent)] transition-colors cursor-pointer">
-                            <div className="flex items-start gap-4">
-                              <div className="bg-[var(--color-dash-success)]/20 rounded-lg p-3">
-                                <svg className="h-6 w-6 text-[var(--color-dash-success)]" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z" />
-                                </svg>
-                              </div>
-                              <div>
-                                <h4 className="font-semibold text-[var(--color-dash-text)] dark:text-white mb-1">Phone Support</h4>
-                                <p className="text-sm text-[var(--color-dash-muted)] dark:text-[var(--color-dash-label)] mb-2">
-                                  Speak with a partner specialist directly
-                                </p>
-                                <a href="tel:+18005551234" className="text-sm font-medium text-[var(--color-dash-success)] hover:underline">
-                                  1-800-555-1234
-                                </a>
-                                <p className="text-xs text-[var(--color-dash-muted)] dark:text-[var(--color-dash-label)] mt-1">
-                                  Mon-Fri, 8am-6pm EST
-                                </p>
-                              </div>
-                            </div>
-                          </div>
-                        </div>
-                      </Modal.Body>
-                      <Modal.Footer>
-                        <div className="flex gap-3 justify-end">
-                          <Modal.CloseTrigger className="px-6 py-2 bg-[var(--color-dash-text)] dark:bg-white hover:bg-[var(--color-dash-muted)] dark:hover:bg-[var(--color-dash-surface)] text-white dark:text-[var(--color-dash-text)] font-semibold rounded-lg transition-colors">
-                            Close
-                          </Modal.CloseTrigger>
-                        </div>
-                      </Modal.Footer>
-                    </Modal.Dialog>
-                  </Modal.Container>
-                </Modal.Backdrop>
-              </Modal>
-
-              <button
-                onClick={() => toast.info("Opening help documentation...")}
-                className="group px-8 py-4 bg-transparent hover:bg-[var(--color-dash-surface)] dark:hover:bg-[var(--color-dash-muted)]/20 text-[var(--color-dash-text)] dark:text-white font-semibold rounded-xl border-2 border-[var(--color-dash-label)]/30 dark:border-[var(--color-dash-muted)]/50 hover:border-[var(--color-dash-accent)] transition-colors duration-200"
-              >
-                Browse help docs
-              </button>
-            </div>
-          </div>
-        </div>
-
-        {/* Footer */}
-        <div className="text-center py-8 text-sm text-[var(--color-dash-label)]">
-          <p>© 2026 Engine · Welcome to modern travel management</p>
-        </div>
-      </div>
-
-      {/* Properties Modal */}
-      <Modal isOpen={isPropertiesModalOpen} onOpenChange={setIsPropertiesModalOpen}>
-        <Modal.Backdrop>
-          <Modal.Container>
-            <Modal.Dialog className="max-w-4xl">
-              <Modal.CloseTrigger />
-              <Modal.Header>
-                <Modal.Heading className="text-2xl font-bold text-[var(--color-dash-text)] dark:text-white">
-                  Your Properties
-                </Modal.Heading>
-              </Modal.Header>
-              <Modal.Body className="space-y-4">
-                <p className="text-[var(--color-dash-muted)] dark:text-[var(--color-dash-label)] mb-4">
-                  {myProperties} active properties in your portfolio
-                </p>
-                <div className="space-y-3">
-                  {revenueTrendByProperty.properties?.map((prop, idx) => (
-                    <div
-                      key={idx}
-                      className="bg-[var(--color-dash-surface)] dark:bg-[var(--color-dash-muted)]/10 rounded-xl p-5 border border-[var(--color-dash-label)]/20 dark:border-[var(--color-dash-muted)]/30 hover:border-[var(--color-dash-accent)] transition-colors"
-                    >
-                      <div className="flex items-start justify-between gap-4">
-                        <div className="flex items-start gap-3 flex-1">
-                          <div className="mt-1">
-                            <BuildingOfficeIcon className="h-5 w-5 text-[var(--color-dash-accent)]" />
-                          </div>
-                          <div>
-                            <h4 className="font-semibold text-[var(--color-dash-text)] dark:text-white mb-1">
-                              {prop.name}
-                            </h4>
-                            <p className="text-sm text-[var(--color-dash-muted)] dark:text-[var(--color-dash-label)]">
-                              Latest revenue: ${prop.values[prop.values.length - 1].toLocaleString()}
-                            </p>
-                          </div>
-                        </div>
-                        <span
-                          className="inline-block h-3 w-3 rounded-full flex-shrink-0 mt-2"
-                          style={{ backgroundColor: prop.color }}
-                        />
-                      </div>
-                    </div>
-                  ))}
-                </div>
-              </Modal.Body>
-              <Modal.Footer>
-                <Modal.CloseTrigger asChild>
-                  <button className="px-6 py-2 bg-[var(--color-dash-text)] dark:bg-white hover:bg-[var(--color-dash-muted)] dark:hover:bg-[var(--color-dash-surface)] text-white dark:text-[var(--color-dash-text)] font-semibold rounded-lg transition-colors">
-                    Close
-                  </button>
-                </Modal.CloseTrigger>
-              </Modal.Footer>
-            </Modal.Dialog>
-          </Modal.Container>
-        </Modal.Backdrop>
-      </Modal>
-
-      {/* Revenue Modal */}
-      <Modal isOpen={isRevenueModalOpen} onOpenChange={setIsRevenueModalOpen}>
-        <Modal.Backdrop>
-          <Modal.Container>
-            <Modal.Dialog className="max-w-4xl">
-              <Modal.CloseTrigger />
-              <Modal.Header>
-                <Modal.Heading className="text-2xl font-bold text-[var(--color-dash-text)] dark:text-white">
-                  Revenue Breakdown
-                </Modal.Heading>
-              </Modal.Header>
-              <Modal.Body className="space-y-4">
-                <div className="bg-gradient-to-br from-[var(--color-dash-success)]/10 to-[var(--color-dash-accent)]/10 rounded-xl p-6 mb-4">
-                  <p className="text-sm text-[var(--color-dash-muted)] dark:text-[var(--color-dash-label)] mb-2">Total Revenue</p>
-                  <p className="text-4xl font-bold text-[var(--color-dash-text)] dark:text-white">
-                    ${myRevenue.toLocaleString()}
-                  </p>
-                </div>
-                <h3 className="font-semibold text-[var(--color-dash-text)] dark:text-white mb-3">By Property</h3>
-                <div className="space-y-3">
-                  {revenueTrendByProperty.properties?.map((prop, idx) => {
-                    const totalRevenue = prop.values.reduce((sum, val) => sum + val, 0);
-                    const percentage = ((totalRevenue / myRevenue) * 100).toFixed(1);
-                    return (
-                      <div
-                        key={idx}
-                        className="bg-[var(--color-dash-surface)] dark:bg-[var(--color-dash-muted)]/10 rounded-xl p-5 border border-[var(--color-dash-label)]/20 dark:border-[var(--color-dash-muted)]/30"
-                      >
-                        <div className="flex items-center justify-between mb-3">
-                          <div className="flex items-center gap-3">
-                            <span
-                              className="inline-block h-3 w-3 rounded-full"
-                              style={{ backgroundColor: prop.color }}
-                            />
-                            <span className="font-semibold text-[var(--color-dash-text)] dark:text-white">
-                              {prop.name}
-                            </span>
-                          </div>
-                          <span className="text-lg font-bold text-[var(--color-dash-text)] dark:text-white">
-                            ${totalRevenue.toLocaleString()}
-                          </span>
-                        </div>
-                        <div className="flex items-center gap-3">
-                          <div className="flex-1 bg-[var(--color-dash-label)]/20 rounded-full h-2">
-                            <div
-                              className="h-2 rounded-full"
-                              style={{
-                                width: `${percentage}%`,
-                                backgroundColor: prop.color,
-                              }}
-                            />
-                          </div>
-                          <span className="text-sm text-[var(--color-dash-muted)] dark:text-[var(--color-dash-label)] w-12 text-right">
-                            {percentage}%
-                          </span>
-                        </div>
-                      </div>
-                    );
-                  })}
-                </div>
-              </Modal.Body>
-              <Modal.Footer>
-                <button
-                  onClick={() => setIsRevenueModalOpen(false)}
-                  className="px-6 py-2 bg-[var(--color-dash-text)] dark:bg-white hover:bg-[var(--color-dash-muted)] dark:hover:bg-[var(--color-dash-surface)] text-white dark:text-[var(--color-dash-text)] font-semibold rounded-lg transition-colors"
-                >
-                  Close
-                </button>
-              </Modal.Footer>
-            </Modal.Dialog>
-          </Modal.Container>
-        </Modal.Backdrop>
-      </Modal>
-
-      {/* Reservations Modal */}
-      <Modal isOpen={isReservationsModalOpen} onOpenChange={setIsReservationsModalOpen}>
-        <Modal.Backdrop>
-          <Modal.Container>
-            <Modal.Dialog className="max-w-4xl">
-              <Modal.CloseTrigger />
-              <Modal.Header>
-                <Modal.Heading className="text-2xl font-bold text-[var(--color-dash-text)] dark:text-white">
-                  Reservations
-                </Modal.Heading>
-              </Modal.Header>
-              <Modal.Body>
-                <p className="text-[var(--color-dash-muted)] dark:text-[var(--color-dash-label)] mb-4">
-                  {myReservations} total reservations through Engine
-                </p>
-                <div className="bg-[var(--color-dash-surface)] dark:bg-[var(--color-dash-muted)]/10 rounded-xl p-8 text-center">
-                  <ClockIcon className="h-12 w-12 text-[var(--color-dash-info)] mx-auto mb-3" />
-                  <p className="text-[var(--color-dash-muted)] dark:text-[var(--color-dash-label)]">
-                    Detailed reservation data is available in your full property management dashboard
-                  </p>
-                </div>
-              </Modal.Body>
-              <Modal.Footer>
-                <button
-                  onClick={() => setIsReservationsModalOpen(false)}
-                  className="px-6 py-2 bg-[var(--color-dash-text)] dark:bg-white hover:bg-[var(--color-dash-muted)] dark:hover:bg-[var(--color-dash-surface)] text-white dark:text-[var(--color-dash-text)] font-semibold rounded-lg transition-colors"
-                >
-                  Close
-                </button>
-              </Modal.Footer>
-            </Modal.Dialog>
-          </Modal.Container>
-        </Modal.Backdrop>
-      </Modal>
-
-      {/* Disputes Modal */}
-      <Modal isOpen={isDisputesModalOpen} onOpenChange={setIsDisputesModalOpen}>
-        <Modal.Backdrop>
-          <Modal.Container>
-            <Modal.Dialog className="max-w-4xl">
-              <Modal.CloseTrigger />
-              <Modal.Header>
-                <Modal.Heading className="text-2xl font-bold text-[var(--color-dash-text)] dark:text-white">
-                  Items to Review
-                </Modal.Heading>
-              </Modal.Header>
-              <Modal.Body className="space-y-4">
-                <p className="text-[var(--color-dash-muted)] dark:text-[var(--color-dash-label)] mb-4">
-                  {myOpenDisputes} {myOpenDisputes === 1 ? 'item needs' : 'items need'} your attention
-                </p>
-                {myDisputes.length > 0 ? (
-                  <div className="space-y-3">
-                    {myDisputes.map((d) => (
-                      <div
-                        key={d.id}
-                        className="bg-[var(--color-dash-surface)] dark:bg-[var(--color-dash-muted)]/10 rounded-xl p-5 border border-[var(--color-dash-label)]/20 dark:border-[var(--color-dash-muted)]/30 hover:border-[var(--color-dash-warning)] transition-colors"
-                      >
-                        <div className="flex items-start justify-between gap-3 mb-2">
-                          <h4 className="font-semibold text-[var(--color-dash-text)] dark:text-white flex-1">
-                            {d.title}
-                          </h4>
-                          <span
-                            className={`inline-flex items-center rounded-full px-2 py-1 text-xs font-medium flex-shrink-0 ${
-                              d.status === "critical"
-                                ? "bg-[var(--color-dash-danger)]/10 text-[var(--color-dash-danger)] border border-[var(--color-dash-danger)]/30"
-                                : d.status === "warning"
-                                ? "bg-[var(--color-dash-warning)]/10 text-[var(--color-dash-warning)] border border-[var(--color-dash-warning)]/30"
-                                : "bg-[var(--color-dash-info)]/10 text-[var(--color-dash-info)] border border-[var(--color-dash-info)]/30"
-                            }`}
-                          >
-                            {d.badge}
-                          </span>
-                        </div>
-                        <p className="text-sm text-[var(--color-dash-muted)] dark:text-[var(--color-dash-label)] mb-3">
-                          {d.description}
-                        </p>
-                        <div className="flex items-center justify-between">
-                          <span className="text-lg font-bold text-[var(--color-dash-text)] dark:text-white">
-                            ${d.amount.toLocaleString()}
-                          </span>
-                          {d.agentHandled && (
-                            <span className="text-xs text-[var(--color-dash-accent)] flex items-center gap-1">
-                              <svg className="h-3 w-3" fill="currentColor" viewBox="0 0 20 20">
-                                <path fillRule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clipRule="evenodd" />
-                              </svg>
-                              Agent reviewed
-                            </span>
-                          )}
-                        </div>
-                      </div>
-                    ))}
-                  </div>
-                ) : (
-                  <div className="bg-[var(--color-dash-surface)] dark:bg-[var(--color-dash-muted)]/10 rounded-xl p-8 text-center">
-                    <p className="text-[var(--color-dash-muted)] dark:text-[var(--color-dash-label)]">No items need attention</p>
-                  </div>
-                )}
-              </Modal.Body>
-              <Modal.Footer>
-                <button
-                  onClick={() => setIsDisputesModalOpen(false)}
-                  className="px-6 py-2 bg-[var(--color-dash-text)] dark:bg-white hover:bg-[var(--color-dash-muted)] dark:hover:bg-[var(--color-dash-surface)] text-white dark:text-[var(--color-dash-text)] font-semibold rounded-lg transition-colors"
-                >
-                  Close
-                </button>
-              </Modal.Footer>
-            </Modal.Dialog>
-          </Modal.Container>
-        </Modal.Backdrop>
-      </Modal>
-
-      {/* Penalty Modal */}
-      <Modal isOpen={isPenaltyModalOpen} onOpenChange={setIsPenaltyModalOpen}>
-        <Modal.Backdrop>
-          <Modal.Container>
-            <Modal.Dialog className="w-[95vw] max-w-4xl max-h-[90vh] overflow-y-auto">
-              <Modal.CloseTrigger />
-              <Modal.Header className="p-8 pb-4">
-                <Modal.Heading className="text-2xl font-bold text-[var(--color-dash-text)] dark:text-white pr-8">
-                  Penalty Review: {selectedPenalty?.name}
-                </Modal.Heading>
-              </Modal.Header>
-              <Modal.Body className="space-y-6 px-8 py-4">
-                {selectedPenalty && (
-                  <>
-                    {/* Property & Customer Info */}
-                    <div className="grid grid-cols-2 gap-4">
-                      <div>
-                        <p className="text-sm text-[var(--color-dash-muted)] dark:text-[var(--color-dash-label)] mb-1">Property</p>
-                        <p className="font-semibold text-[var(--color-dash-text)] dark:text-white">{selectedPenalty.property}</p>
-                      </div>
-                      <div>
-                        <p className="text-sm text-[var(--color-dash-muted)] dark:text-[var(--color-dash-label)] mb-1">Customer</p>
-                        <p className="font-semibold text-[var(--color-dash-text)] dark:text-white">{selectedPenalty.customer}</p>
-                      </div>
-                    </div>
-
-                    {/* Booking Details */}
-                    <div className="bg-[var(--color-dash-surface)] dark:bg-[var(--color-dash-muted)]/10 rounded-xl p-6">
-                      <h4 className="font-semibold text-[var(--color-dash-text)] dark:text-white mb-4">Booking Details</h4>
-                      <div className="grid grid-cols-3 gap-6">
-                        <div>
-                          <p className="text-xs text-[var(--color-dash-muted)] dark:text-[var(--color-dash-label)] mb-2 uppercase tracking-wider">Original Block</p>
-                          <p className="text-xl font-bold text-[var(--color-dash-text)] dark:text-white">{selectedPenalty.originalRoomBlock} rooms</p>
-                        </div>
-                        <div>
-                          <p className="text-xs text-[var(--color-dash-muted)] dark:text-[var(--color-dash-label)] mb-2 uppercase tracking-wider">Rooms Used</p>
-                          <p className="text-xl font-bold text-[var(--color-dash-success)]">{selectedPenalty.actualRoomsUsed} rooms</p>
-                        </div>
-                        <div>
-                          <p className="text-xs text-[var(--color-dash-muted)] dark:text-[var(--color-dash-label)] mb-2 uppercase tracking-wider">Unused</p>
-                          <p className="text-xl font-bold text-[var(--color-dash-danger)]">{selectedPenalty.unusedRooms} rooms</p>
-                        </div>
-                      </div>
-                      <div className="grid grid-cols-3 gap-6 mt-6 pt-6 border-t border-[var(--color-dash-label)]/20 dark:border-[var(--color-dash-muted)]/30">
-                        <div>
-                          <p className="text-xs text-[var(--color-dash-muted)] dark:text-[var(--color-dash-label)] mb-2 uppercase tracking-wider">Room Rate</p>
-                          <p className="text-xl font-bold text-[var(--color-dash-text)] dark:text-white">${selectedPenalty.roomRate}/night</p>
-                        </div>
-                        <div>
-                          <p className="text-xs text-[var(--color-dash-muted)] dark:text-[var(--color-dash-label)] mb-2 uppercase tracking-wider">Number of Nights</p>
-                          <p className="text-xl font-bold text-[var(--color-dash-text)] dark:text-white">{selectedPenalty.numberOfNights}</p>
-                        </div>
-                        <div>
-                          <p className="text-xs text-[var(--color-dash-muted)] dark:text-[var(--color-dash-label)] mb-2 uppercase tracking-wider">Rooms Resold</p>
-                          <p className="text-xl font-bold text-[var(--color-dash-accent)]">{selectedPenalty.roomsResold} rooms</p>
-                        </div>
-                      </div>
-                    </div>
-
-                    {/* Calculation Method & Policy */}
-                    <div className="grid grid-cols-2 gap-6">
-                      <div>
-                        <p className="text-sm text-[var(--color-dash-muted)] dark:text-[var(--color-dash-label)] mb-2">Calculation Method</p>
-                        <p className="text-lg font-semibold text-[var(--color-dash-text)] dark:text-white">{selectedPenalty.method}</p>
-                      </div>
-                      <div>
-                        <p className="text-sm text-[var(--color-dash-muted)] dark:text-[var(--color-dash-label)] mb-2">Resale Policy</p>
-                        <p className="text-lg font-semibold text-[var(--color-dash-text)] dark:text-white">{selectedPenalty.resalePolicy}</p>
-                      </div>
-                    </div>
-
-                    {/* Financial Details */}
-                    <div>
-                      <h4 className="font-semibold text-[var(--color-dash-text)] dark:text-white mb-4">Financial Summary</h4>
-                      <div className="grid grid-cols-3 gap-6">
-                        <div className="bg-[var(--color-dash-surface)] dark:bg-[var(--color-dash-muted)]/10 rounded-lg p-5">
-                          <p className="text-xs text-[var(--color-dash-muted)] dark:text-[var(--color-dash-label)] mb-2 uppercase tracking-wider">Calculated Penalty</p>
-                          <p className="text-2xl font-bold text-[var(--color-dash-text)] dark:text-white">${selectedPenalty.penaltyCalculated.toLocaleString()}</p>
-                        </div>
-                        <div className="bg-[var(--color-dash-surface)] dark:bg-[var(--color-dash-muted)]/10 rounded-lg p-5">
-                          <p className="text-xs text-[var(--color-dash-muted)] dark:text-[var(--color-dash-label)] mb-2 uppercase tracking-wider">Credit Applied</p>
-                          <p className="text-2xl font-bold text-[var(--color-dash-success)]">${selectedPenalty.credit.toLocaleString()}</p>
-                        </div>
-                        <div className={`rounded-lg p-5 border ${selectedPenalty.isHero ? 'bg-[var(--color-dash-warning)]/10 border-[var(--color-dash-warning)]/30' : 'bg-[var(--color-dash-surface)] dark:bg-[var(--color-dash-muted)]/10 border-transparent'}`}>
-                          <p className="text-xs text-[var(--color-dash-muted)] dark:text-[var(--color-dash-label)] mb-2 uppercase tracking-wider">Final Penalty</p>
-                          <p className={`text-2xl font-bold ${selectedPenalty.isHero ? 'text-[var(--color-dash-warning)]' : 'text-[var(--color-dash-text)] dark:text-white'}`}>${selectedPenalty.penalty.toLocaleString()}</p>
-                        </div>
-                      </div>
-                    </div>
-
-                    {/* Issue Description */}
-                    {selectedPenalty.isHero && (
-                      <div className="bg-[var(--color-dash-warning)]/10 border-l-4 border-[var(--color-dash-warning)] rounded-lg p-5">
-                        <p className="font-semibold text-[var(--color-dash-text)] dark:text-white mb-3 flex items-center gap-2">
-                          <ExclamationTriangleIcon className="h-5 w-5 text-[var(--color-dash-warning)]" />
-                          Why this needs review:
-                        </p>
-                        <p className="text-sm text-[var(--color-dash-muted)] dark:text-[var(--color-dash-label)] leading-relaxed">
-                          Your contract specifies a {selectedPenalty.resalePolicy.toLowerCase()}. Based on {selectedPenalty.roomsResold} rooms resold at ${selectedPenalty.roomRate}/night for {selectedPenalty.numberOfNights} {selectedPenalty.numberOfNights === 1 ? 'night' : 'nights'},
-                          we'd expect to see a ${(selectedPenalty.roomsResold * selectedPenalty.roomRate * selectedPenalty.numberOfNights * 0.5).toLocaleString()} credit that doesn't appear to be fully applied.
-                        </p>
-                      </div>
-                    )}
-
-                    {/* Status */}
-                    <div>
-                      <p className="text-sm text-[var(--color-dash-muted)] dark:text-[var(--color-dash-label)] mb-2">Status</p>
-                      <span
-                        className={`inline-flex items-center rounded-full px-3 py-1 text-sm font-medium ${
-                          selectedPenalty.status === "Approved"
-                            ? "bg-[var(--color-dash-success)]/10 text-[var(--color-dash-success)] border border-[var(--color-dash-success)]/30"
-                            : selectedPenalty.status === "Reviewed"
-                            ? "bg-[var(--color-dash-info)]/10 text-[var(--color-dash-info)] border border-[var(--color-dash-info)]/30"
-                            : selectedPenalty.status === "Calculated"
-                            ? "bg-[var(--color-dash-label)]/10 text-[var(--color-dash-muted)] border border-[var(--color-dash-label)]/30"
-                            : "bg-[var(--color-dash-warning)]/10 text-[var(--color-dash-warning)] border border-[var(--color-dash-warning)]/30"
-                        }`}
-                      >
-                        {selectedPenalty.status}
-                      </span>
-                    </div>
-                  </>
-                )}
-              </Modal.Body>
-              <Modal.Footer className="p-8 pt-4">
-                <div className="flex gap-4 justify-end flex-wrap">
-                  <button
-                    onClick={() => setIsPenaltyModalOpen(false)}
-                    className="px-6 py-2.5 bg-transparent hover:bg-[var(--color-dash-surface)] dark:hover:bg-[var(--color-dash-muted)]/20 text-[var(--color-dash-text)] dark:text-white font-semibold rounded-lg border border-[var(--color-dash-label)]/30 dark:border-[var(--color-dash-muted)]/50 transition-colors"
-                  >
-                    Close
-                  </button>
-                  <button
-                    onClick={() => {
-                      toast.success("Dispute has been filed. Support team will follow up.");
-                      setIsPenaltyModalOpen(false);
-                    }}
-                    className="px-6 py-2.5 bg-[var(--color-dash-text)] dark:bg-white hover:bg-[var(--color-dash-muted)] dark:hover:bg-[var(--color-dash-surface)] text-white dark:text-[var(--color-dash-text)] font-semibold rounded-lg transition-colors whitespace-nowrap"
-                  >
-                    File Dispute
-                  </button>
-                </div>
-              </Modal.Footer>
-            </Modal.Dialog>
-          </Modal.Container>
-        </Modal.Backdrop>
-      </Modal>
-
-      {/* Invoices Modal */}
-      <Modal isOpen={isInvoicesModalOpen} onOpenChange={setIsInvoicesModalOpen}>
-        <Modal.Backdrop>
-          <Modal.Container>
-            <Modal.Dialog className="max-w-4xl">
-              <Modal.CloseTrigger />
-              <Modal.Header>
-                <Modal.Heading className="text-2xl font-bold text-[var(--color-dash-text)] dark:text-white">
-                  Your Invoices
-                </Modal.Heading>
-              </Modal.Header>
-              <Modal.Body className="space-y-4">
-                <p className="text-[var(--color-dash-muted)] dark:text-[var(--color-dash-label)] mb-4">
-                  {myPendingInvoices} {myPendingInvoices === 1 ? 'invoice' : 'invoices'} ready to pay
-                </p>
-                {myInvoices.length > 0 ? (
-                  <div className="space-y-3">
-                    {myInvoices.map((inv) => (
-                      <div
-                        key={inv.id}
-                        className="bg-[var(--color-dash-surface)] dark:bg-[var(--color-dash-muted)]/10 rounded-xl p-5 border border-[var(--color-dash-label)]/20 dark:border-[var(--color-dash-muted)]/30 hover:border-[var(--color-dash-success)] transition-colors"
-                      >
-                        <div className="flex items-start justify-between gap-3 mb-2">
-                          <div>
-                            <h4 className="font-semibold text-[var(--color-dash-text)] dark:text-white">
-                              {inv.title}
-                            </h4>
-                            <p className="text-sm text-[var(--color-dash-muted)] dark:text-[var(--color-dash-label)] mt-1">
-                              {inv.description}
-                            </p>
-                          </div>
-                          <span
-                            className={`inline-flex items-center rounded-full px-2 py-1 text-xs font-medium flex-shrink-0 ${
-                              inv.status === "critical"
-                                ? "bg-[var(--color-dash-danger)]/10 text-[var(--color-dash-danger)] border border-[var(--color-dash-danger)]/30"
-                                : "bg-[var(--color-dash-info)]/10 text-[var(--color-dash-info)] border border-[var(--color-dash-info)]/30"
-                            }`}
-                          >
-                            {inv.badge}
-                          </span>
-                        </div>
-                        <div className="flex items-center justify-between mt-3">
-                          <span className="text-lg font-bold text-[var(--color-dash-text)] dark:text-white">
-                            ${inv.amount.toLocaleString()}
-                          </span>
-                          <span className="text-sm text-[var(--color-dash-muted)] dark:text-[var(--color-dash-label)]">
-                            Due {inv.due}
-                          </span>
-                        </div>
-                      </div>
-                    ))}
-                  </div>
-                ) : (
-                  <div className="bg-[var(--color-dash-surface)] dark:bg-[var(--color-dash-muted)]/10 rounded-xl p-8 text-center">
-                    <p className="text-[var(--color-dash-muted)] dark:text-[var(--color-dash-label)]">No pending invoices</p>
-                  </div>
-                )}
-              </Modal.Body>
-              <Modal.Footer>
-                <button
-                  onClick={() => setIsInvoicesModalOpen(false)}
-                  className="px-6 py-2 bg-[var(--color-dash-text)] dark:bg-white hover:bg-[var(--color-dash-muted)] dark:hover:bg-[var(--color-dash-surface)] text-white dark:text-[var(--color-dash-text)] font-semibold rounded-lg transition-colors"
-                >
-                  Close
-                </button>
-              </Modal.Footer>
-            </Modal.Dialog>
-          </Modal.Container>
-        </Modal.Backdrop>
-      </Modal>
-
-      <AgentPanel />
-    </div>
-  );
-}