@schandlergarcia/sf-web-components 2.3.17 → 2.4.0

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

@@ -1,2760 +0,0 @@
-import { ListCard, ActivityCard, D3Chart, Dropdown, Button, Modal, CardSkeleton, Tabs } 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,
-  SparklesIcon,
-} 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
- */
-type TabId = "overview" | "cases" | "properties" | "analytics";
-
-export default function PartnerHubDashboard() {
-  const { mode, toggle } = useThemeMode();
-  const [activeTab, setActiveTab] = React.useState<TabId>("overview");
-  const [tabLoading, setTabLoading] = React.useState(false);
-  const tabLoadRef = React.useRef<ReturnType<typeof setTimeout>>();
-
-  const switchTab = React.useCallback((id: TabId) => {
-    if (id === activeTab) return;
-    setTabLoading(true);
-    setActiveTab(id);
-    clearTimeout(tabLoadRef.current);
-    tabLoadRef.current = setTimeout(() => setTabLoading(false), 700);
-  }, [activeTab]);
-
-  React.useEffect(() => () => clearTimeout(tabLoadRef.current), []);
-
-  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;
-  const showSkeleton = isLoading || tabLoading;
-
-  // 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 283000;
-    }
-    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">
-              Track service cases, monitor guest satisfaction, and manage your partnership with Engine, all in one place.
-            </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">
-          {/* Open Cases */}
-          <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 ? (
-                <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-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-danger)] text-white">
-                      3 URGENT
-                    </span>
-                  </div>
-                  <p className="text-[var(--color-dash-muted)] dark:text-[var(--color-dash-label)] text-sm font-semibold mb-2 uppercase tracking-wider">Open Cases</p>
-                  <p className="font-black text-[var(--color-dash-text)] dark:text-white mb-1 leading-tight" style={{ fontSize: 'var(--dash-metric-size)' }}>7</p>
-                  <p className="text-sm text-[var(--color-dash-muted)] dark:text-[var(--color-dash-label)]">across your properties</p>
-                </>
-              )}
-            </div>
-          </div>
-
-          {/* Guest Satisfaction */}
-          <div className="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-success)]/10 rounded-lg p-2">
-                      <StarIcon 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)]">
-                      +0.3
-                    </span>
-                  </div>
-                  <p className="text-[var(--color-dash-muted)] dark:text-[var(--color-dash-label)] text-sm font-semibold mb-2 uppercase tracking-wider">Guest Satisfaction</p>
-                  <p className="font-black text-[var(--color-dash-text)] dark:text-white mb-1 leading-tight" style={{ fontSize: 'var(--dash-metric-size)' }}>4.6</p>
-                  <p className="text-sm text-[var(--color-dash-muted)] dark:text-[var(--color-dash-label)]">out of 5.0 average</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>
-
-          {/* Avg Response Time */}
-          <div className="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>
-                    <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)]">
-                      -18%
-                    </span>
-                  </div>
-                  <p className="text-[var(--color-dash-muted)] dark:text-[var(--color-dash-label)] text-sm font-semibold mb-2 uppercase tracking-wider">Avg Response Time</p>
-                  <p className="font-black text-[var(--color-dash-text)] dark:text-white mb-1 leading-tight" style={{ fontSize: 'var(--dash-metric-size)' }}>2.4h</p>
-                  <p className="text-sm text-[var(--color-dash-muted)] dark:text-[var(--color-dash-label)]">across all cases</p>
-                </>
-              )}
-            </div>
-          </div>
-
-          {/* SLA Compliance */}
-          <div className="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-success)]/10 rounded-lg p-2">
-                      <ShieldCheckIcon 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)]">
-                      ON TRACK
-                    </span>
-                  </div>
-                  <p className="text-[var(--color-dash-muted)] dark:text-[var(--color-dash-label)] text-sm font-semibold mb-2 uppercase tracking-wider">SLA Compliance</p>
-                  <p className="font-black text-[var(--color-dash-text)] dark:text-white mb-1 leading-tight" style={{ fontSize: 'var(--dash-metric-size)' }}>94%</p>
-                  <p className="text-sm text-[var(--color-dash-muted)] dark:text-[var(--color-dash-label)]">cases resolved on time</p>
-                </>
-              )}
-            </div>
-          </div>
-        </div>
-
-        {/* Tab Navigation */}
-        <div className="border-b border-[var(--color-dash-label)]/20 dark:border-[var(--color-dash-muted)]/30">
-          <nav className="flex items-center gap-8">
-            {([
-              { id: "overview" as TabId, label: "Overview" },
-              { id: "cases" as TabId, label: "Cases", count: 7 },
-              { id: "properties" as TabId, label: "Properties" },
-              { id: "analytics" as TabId, label: "Analytics" },
-            ]).map((tab) => (
-              <button
-                key={tab.id}
-                onClick={() => switchTab(tab.id)}
-                className={`relative pb-3 text-sm font-medium transition-colors whitespace-nowrap ${
-                  activeTab === tab.id
-                    ? "text-[var(--color-dash-text)] dark:text-white"
-                    : "text-[var(--color-dash-label)] hover:text-[var(--color-dash-muted)] dark:hover:text-white/70"
-                }`}
-              >
-                {tab.label}
-                {tab.count ? (
-                  <span className="ml-1.5 inline-flex items-center justify-center h-5 min-w-[20px] px-1.5 rounded-full text-[10px] font-bold bg-[var(--color-dash-danger)]/10 text-[var(--color-dash-danger)]">
-                    {tab.count}
-                  </span>
-                ) : null}
-                {activeTab === tab.id && (
-                  <span className="absolute bottom-0 left-0 right-0 h-0.5 bg-[var(--color-dash-text)] dark:bg-white rounded-full" />
-                )}
-              </button>
-            ))}
-          </nav>
-        </div>
-
-        {/* Tab loading skeletons */}
-        {tabLoading && (
-          <div className="space-y-6 animate-pulse">
-            {activeTab === "overview" && <>
-              <div className="bg-white dark:bg-[var(--color-dash-text)] rounded-xl border border-[var(--color-dash-label)]/20 dark:border-[var(--color-dash-muted)]/30 p-6 space-y-4">
-                <div className="flex items-center gap-2">
-                  <div className="h-4 w-4 rounded bg-[var(--color-dash-accent)]/20" />
-                  <div className="h-4 w-20 rounded bg-[var(--color-dash-label)]/20" />
-                  <div className="h-4 w-16 rounded bg-[var(--color-dash-accent)]/10" />
-                </div>
-                <div className="space-y-4">
-                  {[1, 2, 3].map(i => (
-                    <div key={i} className="flex gap-4 items-start">
-                      <div className="h-8 w-8 rounded-lg bg-[var(--color-dash-label)]/15" />
-                      <div className="flex-1 space-y-2">
-                        <div className="h-4 w-3/4 rounded bg-[var(--color-dash-label)]/20" />
-                        <div className="h-3 w-full rounded bg-[var(--color-dash-label)]/10" />
-                      </div>
-                    </div>
-                  ))}
-                </div>
-              </div>
-              <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
-                {[1, 2].map(i => (
-                  <div key={i} className="bg-white dark:bg-[var(--color-dash-text)] rounded-2xl p-8 border border-[var(--color-dash-label)]/20 dark:border-[var(--color-dash-muted)]/30 space-y-4">
-                    <div className="h-6 w-48 rounded bg-[var(--color-dash-label)]/20" />
-                    <div className="h-4 w-64 rounded bg-[var(--color-dash-label)]/10" />
-                    {[1, 2, 3, 4].map(j => (
-                      <div key={j} className="flex items-center gap-3 p-3 rounded-lg bg-[var(--color-dash-surface)]/50 dark:bg-[var(--color-dash-dark)]/50">
-                        <div className="h-6 w-6 rounded-full bg-[var(--color-dash-label)]/20" />
-                        <div className="flex-1 space-y-1.5">
-                          <div className="h-4 w-40 rounded bg-[var(--color-dash-label)]/20" />
-                          <div className="h-3 w-28 rounded bg-[var(--color-dash-label)]/10" />
-                        </div>
-                        <div className="h-5 w-12 rounded-full bg-[var(--color-dash-label)]/15" />
-                      </div>
-                    ))}
-                  </div>
-                ))}
-              </div>
-            </>}
-
-            {activeTab === "cases" && <>
-              <div className="bg-gradient-to-r from-[var(--color-dash-dark)] to-[var(--color-dash-dark)]/90 rounded-xl p-5 flex gap-4">
-                <div className="h-9 w-9 rounded-lg bg-white/10" />
-                <div className="flex-1 space-y-2">
-                  <div className="h-4 w-2/3 rounded bg-white/15" />
-                  <div className="h-3 w-full rounded bg-white/8" />
-                </div>
-              </div>
-              <div className="grid grid-cols-4 gap-4">
-                {[1, 2, 3, 4].map(i => (
-                  <div key={i} className="bg-white dark:bg-[var(--color-dash-text)] rounded-xl p-5 border border-[var(--color-dash-label)]/20 dark:border-[var(--color-dash-muted)]/30 space-y-2">
-                    <div className="h-3 w-16 rounded bg-[var(--color-dash-label)]/20" />
-                    <div className="h-8 w-10 rounded bg-[var(--color-dash-label)]/15" />
-                  </div>
-                ))}
-              </div>
-              <div className="bg-white dark:bg-[var(--color-dash-text)] rounded-xl border border-[var(--color-dash-label)]/20 dark:border-[var(--color-dash-muted)]/30 overflow-hidden">
-                <div className="p-4 space-y-3 bg-[var(--color-dash-surface)]/50 dark:bg-[var(--color-dash-muted)]/10">
-                  <div className="flex gap-4">
-                    {[1, 2, 3, 4, 5, 6, 7, 8, 9].map(i => (
-                      <div key={i} className="h-3 w-16 rounded bg-[var(--color-dash-label)]/20" />
-                    ))}
-                  </div>
-                </div>
-                {[1, 2, 3, 4, 5, 6].map(i => (
-                  <div key={i} className="px-4 py-3 flex gap-4 border-t border-[var(--color-dash-label)]/10 dark:border-[var(--color-dash-muted)]/20">
-                    <div className="h-4 w-14 rounded bg-[var(--color-dash-accent)]/15" />
-                    <div className="h-4 w-48 rounded bg-[var(--color-dash-label)]/15" />
-                    <div className="h-4 w-32 rounded bg-[var(--color-dash-label)]/10" />
-                    <div className="h-4 w-20 rounded bg-[var(--color-dash-label)]/10" />
-                    <div className="h-4 w-12 rounded bg-[var(--color-dash-label)]/10" />
-                    <div className="h-4 w-16 rounded bg-[var(--color-dash-label)]/10" />
-                  </div>
-                ))}
-              </div>
-            </>}
-
-            {activeTab === "properties" && <>
-              <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
-                {[1, 2, 3, 4].map(i => (
-                  <div key={i} className="bg-white dark:bg-[var(--color-dash-text)] rounded-xl border border-[var(--color-dash-label)]/20 dark:border-[var(--color-dash-muted)]/30 p-6 space-y-4">
-                    <div className="flex items-start justify-between">
-                      <div className="space-y-2">
-                        <div className="h-5 w-48 rounded bg-[var(--color-dash-label)]/20" />
-                        <div className="h-3 w-32 rounded bg-[var(--color-dash-label)]/10" />
-                      </div>
-                      <div className="h-6 w-20 rounded-full bg-[var(--color-dash-label)]/15" />
-                    </div>
-                    <div className="grid grid-cols-3 gap-4">
-                      {[1, 2, 3].map(j => (
-                        <div key={j} className="space-y-1.5">
-                          <div className="h-3 w-16 rounded bg-[var(--color-dash-label)]/15" />
-                          <div className="h-6 w-10 rounded bg-[var(--color-dash-label)]/20" />
-                        </div>
-                      ))}
-                    </div>
-                    <div className="pt-4 border-t border-[var(--color-dash-label)]/10 dark:border-[var(--color-dash-muted)]/20 flex items-center justify-between">
-                      <div className="space-y-1.5">
-                        <div className="h-3 w-20 rounded bg-[var(--color-dash-label)]/10" />
-                        <div className="h-5 w-16 rounded bg-[var(--color-dash-label)]/20" />
-                      </div>
-                      <div className="h-5 w-12 rounded-full bg-[var(--color-dash-success)]/15" />
-                    </div>
-                    <div className="bg-[var(--color-dash-surface)]/70 dark:bg-[var(--color-dash-dark)]/50 rounded-lg p-3 flex gap-2">
-                      <div className="h-3.5 w-3.5 rounded bg-[var(--color-dash-accent)]/20 flex-shrink-0" />
-                      <div className="flex-1 space-y-1.5">
-                        <div className="h-3 w-full rounded bg-[var(--color-dash-label)]/10" />
-                        <div className="h-3 w-2/3 rounded bg-[var(--color-dash-label)]/8" />
-                      </div>
-                    </div>
-                  </div>
-                ))}
-              </div>
-            </>}
-
-            {activeTab === "analytics" && <>
-              <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
-                {[1, 2, 3].map(i => (
-                  <div key={i} className="bg-white dark:bg-[var(--color-dash-text)] rounded-xl border border-[var(--color-dash-label)]/20 dark:border-[var(--color-dash-muted)]/30 p-5 space-y-3">
-                    <div className="h-3 w-24 rounded bg-[var(--color-dash-label)]/15" />
-                    <div className="h-8 w-20 rounded bg-[var(--color-dash-label)]/20" />
-                    <div className="h-3 w-16 rounded bg-[var(--color-dash-label)]/10" />
-                  </div>
-                ))}
-              </div>
-              <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
-                {[1, 2].map(i => (
-                  <div key={i} className="bg-white dark:bg-[var(--color-dash-text)] rounded-2xl border border-[var(--color-dash-label)]/20 dark:border-[var(--color-dash-muted)]/30 p-8 space-y-4">
-                    <div className="h-6 w-48 rounded bg-[var(--color-dash-label)]/20" />
-                    <div className="h-4 w-32 rounded bg-[var(--color-dash-label)]/10" />
-                    <div className="h-48 w-full rounded-lg bg-[var(--color-dash-surface)]/70 dark:bg-[var(--color-dash-dark)]/40" />
-                  </div>
-                ))}
-              </div>
-              <div className="bg-white dark:bg-[var(--color-dash-text)] rounded-2xl border border-[var(--color-dash-label)]/20 dark:border-[var(--color-dash-muted)]/30 p-8 space-y-4">
-                <div className="h-6 w-56 rounded bg-[var(--color-dash-label)]/20" />
-                <div className="h-64 w-full rounded-lg bg-[var(--color-dash-surface)]/70 dark:bg-[var(--color-dash-dark)]/40" />
-              </div>
-            </>}
-
-            {/* data360 skeleton placeholder: added by headless-data-360 skill during demo */}
-          </div>
-        )}
-
-        {/* ============== OVERVIEW TAB ============== */}
-        {activeTab === "overview" && !tabLoading && <>
-
-        {/* AI Insights */}
-        {!isLoading && (
-          <div className="bg-white dark:bg-[var(--color-dash-text)] rounded-xl border border-[var(--color-dash-label)]/20 dark:border-[var(--color-dash-muted)]/30 shadow-sm overflow-hidden">
-            <div className="px-6 py-4 border-b border-[var(--color-dash-label)]/10 dark:border-[var(--color-dash-muted)]/20 flex items-center gap-2">
-              <SparklesIcon className="h-4 w-4 text-[var(--color-dash-accent)]" />
-              <h3 className="text-sm font-semibold text-[var(--color-dash-text)] dark:text-white">AI Insights</h3>
-              <span className="text-[10px] font-medium px-1.5 py-0.5 rounded bg-[var(--color-dash-accent)]/10 text-[var(--color-dash-accent)]">Agentforce</span>
-            </div>
-            <div className="divide-y divide-[var(--color-dash-label)]/10 dark:divide-[var(--color-dash-muted)]/20">
-              {[
-                {
-                  action: "Launch promotional rate for 40 open rooms at Austin Convention Center",
-                  reason: "TechCorp canceled their May 19-21 block. Based on Engine network demand patterns, a $159/night promo could fill 70% of rooms and recover $12,287 in revenue.",
-                  type: "revenue",
-                  priority: "high",
-                },
-                {
-                  action: "Escalate SF Bay response times before SLA breach",
-                  reason: "San Francisco Bay is averaging 3.2h response time, approaching the 4h SLA limit. Two cases are at risk. Reassigning to a dedicated agent could reduce this by 40%.",
-                  type: "service",
-                  priority: "high",
-                },
-                {
-                  action: "Review $2,400 resale credit on ATR-00001",
-                  reason: "Your contract specifies a 50% resale credit for resold rooms. 8 rooms were resold but the credit was not applied. This could reduce your penalty from $9,000 to $6,600.",
-                  type: "billing",
-                  priority: "medium",
-                },
-              ].map((insight, i) => (
-                <div key={i} className="px-6 py-4 flex items-start gap-4 hover:bg-[var(--color-dash-surface)]/50 dark:hover:bg-[var(--color-dash-dark)]/30 transition-colors cursor-pointer group">
-                  <div className={`flex-shrink-0 mt-0.5 h-8 w-8 rounded-lg flex items-center justify-center ${
-                    insight.priority === "high" ? "bg-[var(--color-dash-danger)]/10" : "bg-[var(--color-dash-warning)]/10"
-                  }`}>
-                    <SparklesIcon className={`h-4 w-4 ${
-                      insight.priority === "high" ? "text-[var(--color-dash-danger)]" : "text-[var(--color-dash-warning)]"
-                    }`} />
-                  </div>
-                  <div className="flex-1 min-w-0">
-                    <p className="text-sm font-semibold text-[var(--color-dash-text)] dark:text-white mb-1">{insight.action}</p>
-                    <p className="text-xs text-[var(--color-dash-muted)] dark:text-[var(--color-dash-label)] leading-relaxed">{insight.reason}</p>
-                  </div>
-                  <button className="flex-shrink-0 opacity-0 group-hover:opacity-100 transition-opacity text-xs font-semibold text-[var(--color-dash-accent)] hover:underline whitespace-nowrap mt-1">
-                    Take action
-                  </button>
-                </div>
-              ))}
-            </div>
-          </div>
-        )}
-
-        {/* ===== PROPERTY LEADERBOARD + SERVICE PERFORMANCE (side by side) ===== */}
-        <div className="grid grid-cols-1 lg:grid-cols-2 gap-6 animate-slide-up">
-          {/* Property Leaderboard (compact) */}
-          <div className="bg-white dark:bg-[var(--color-dash-text)] rounded-2xl p-8 shadow-sm border border-[var(--color-dash-label)]/20 dark:border-[var(--color-dash-muted)]/30">
-            {isLoading ? (
-              <div className="space-y-4">
-                <div className="h-8 w-64 bg-[var(--color-dash-label)]/20 rounded animate-pulse"></div>
-                <CardSkeleton lines={5} />
-              </div>
-            ) : (
-              <>
-                <div className="flex items-center justify-between mb-6">
-                  <div>
-                    <h3 className="text-xl font-bold text-[var(--color-dash-text)] dark:text-white">Property Leaderboard</h3>
-                    <p className="text-sm text-[var(--color-dash-muted)] dark:text-[var(--color-dash-label)] mt-1">Ranked by service quality & revenue (6 months)</p>
-                  </div>
-                </div>
-                <div className="space-y-3">
-                  {propertyLeaderboard.map((property, idx) => {
-                    const rankLabels = ["1", "2", "3", "4"];
-                    return (
-                      <div key={idx} className="flex items-center gap-3 p-3 rounded-lg bg-[var(--color-dash-surface)]/50 dark:bg-[var(--color-dash-dark)]/50 hover:bg-[var(--color-dash-surface)] dark:hover:bg-[var(--color-dash-dark)] transition-colors cursor-pointer">
-                        <span className="text-sm font-bold flex-shrink-0 w-6 h-6 rounded-full bg-[var(--color-dash-dark)] text-white flex items-center justify-center">{rankLabels[idx]}</span>
-                        <div className="flex-1 min-w-0">
-                          <p className="font-semibold text-[var(--color-dash-text)] dark:text-white text-sm truncate">{property.name.replace('Summit ', '')}</p>
-                          <div className="flex items-center gap-3 text-xs text-[var(--color-dash-muted)] dark:text-[var(--color-dash-label)] mt-0.5">
-                            <span className="inline-flex items-center gap-0.5">
-                              <StarIcon className="h-3 w-3 text-[var(--color-dash-accent)]" />
-                              <strong className="text-[var(--color-dash-text)] dark:text-white">{property.satisfaction || '4.5'}</strong>
-                            </span>
-                            <span>{property.responseTime || '2.4h'} avg</span>
-                            <span>${(property.revenue / 1000).toFixed(0)}K rev</span>
-                          </div>
-                        </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)] flex-shrink-0">
-                          +{property.growth}%
-                        </span>
-                      </div>
-                    );
-                  })}
-                </div>
-                <div className="mt-4 p-3 rounded-lg bg-[var(--color-dash-info)]/5 border border-[var(--color-dash-info)]/20">
-                  <p className="text-xs text-[var(--color-dash-text)] dark:text-white">
-                    <LightBulbIcon className="h-3.5 w-3.5 inline mr-1 text-[var(--color-dash-info)]" />
-                    <strong>Austin</strong> leads with 4.8 satisfaction and fastest response time (1.8h).
-                  </p>
-                </div>
-              </>
-            )}
-          </div>
-
-          {/* Service Performance by Property */}
-          <div className="bg-white dark:bg-[var(--color-dash-text)] rounded-2xl p-8 shadow-sm border border-[var(--color-dash-label)]/20 dark:border-[var(--color-dash-muted)]/30">
-            {isLoading ? (
-              <div className="space-y-4">
-                <div className="h-8 w-64 bg-[var(--color-dash-label)]/20 rounded animate-pulse"></div>
-                <CardSkeleton lines={5} />
-              </div>
-            ) : (
-              <>
-                <div className="flex items-center justify-between mb-6">
-                  <div>
-                    <h3 className="text-xl font-bold text-[var(--color-dash-text)] dark:text-white">Service Performance</h3>
-                    <p className="text-sm text-[var(--color-dash-muted)] dark:text-[var(--color-dash-label)] mt-1">Guest satisfaction & response times by property</p>
-                  </div>
-                </div>
-                <div className="space-y-4">
-                  {[
-                    { name: "Summit Austin Convention Center", satisfaction: 4.8, responseTime: "1.8h", cases: 2, trend: "+0.4" },
-                    { name: "Summit Midtown NYC", satisfaction: 4.7, responseTime: "2.1h", cases: 1, trend: "+0.3" },
-                    { name: "Summit Chicago Downtown", satisfaction: 4.5, responseTime: "2.6h", cases: 1, trend: "+0.2" },
-                    { name: "Summit San Francisco Bay", satisfaction: 4.3, responseTime: "3.2h", cases: 3, trend: "+0.5" },
-                  ].map((prop) => (
-                    <div key={prop.name} className="flex items-center justify-between p-3 rounded-lg bg-[var(--color-dash-surface)]/50 dark:bg-[var(--color-dash-dark)]/50 hover:bg-[var(--color-dash-surface)] dark:hover:bg-[var(--color-dash-dark)] transition-colors cursor-pointer">
-                      <div className="flex-1 min-w-0">
-                        <p className="font-semibold text-[var(--color-dash-text)] dark:text-white text-sm truncate">{prop.name}</p>
-                        <p className="text-xs text-[var(--color-dash-muted)] dark:text-[var(--color-dash-label)]">{prop.cases} open cases · Avg {prop.responseTime}</p>
-                      </div>
-                      <div className="flex items-center gap-4 ml-4">
-                        <div className="text-right">
-                          <div className="flex items-center gap-1">
-                            <StarIcon className="h-4 w-4 text-[var(--color-dash-accent)]" />
-                            <span className="font-bold text-[var(--color-dash-text)] dark:text-white text-sm">{prop.satisfaction}</span>
-                          </div>
-                          <span className="text-xs text-[var(--color-dash-success)] font-semibold">{prop.trend}</span>
-                        </div>
-                      </div>
-                    </div>
-                  ))}
-                </div>
-                <div className="mt-5 p-3 rounded-lg bg-[var(--color-dash-accent)]/5 border border-[var(--color-dash-accent)]/20">
-                  <div className="flex items-start gap-2">
-                    <LightBulbIcon className="h-5 w-5 text-[var(--color-dash-accent)] flex-shrink-0 mt-0.5" />
-                    <p className="text-sm text-[var(--color-dash-text)] dark:text-white">
-                      <span className="font-semibold">Key Insight:</span> Austin leads in guest satisfaction at 4.8 with the fastest response time (1.8h). SF Bay improved the most (+0.5) but still has room to reduce response times.
-                    </p>
-                  </div>
-                </div>
-              </>
-            )}
-          </div>
-        </div>
-
-        {/* Open Cases by Category */}
-        <div className="bg-white dark:bg-[var(--color-dash-text)] rounded-2xl p-8 shadow-sm border border-[var(--color-dash-label)]/20 dark:border-[var(--color-dash-muted)]/30 animate-slide-up">
-          {isLoading ? (
-            <div className="space-y-4">
-              <div className="h-8 w-64 bg-[var(--color-dash-label)]/20 rounded animate-pulse"></div>
-              <CardSkeleton lines={5} />
-            </div>
-          ) : (
-            <>
-              <div className="flex items-center justify-between mb-6">
-                <div>
-                  <h3 className="text-xl font-bold text-[var(--color-dash-text)] dark:text-white">Open Cases by Category</h3>
-                  <p className="text-sm text-[var(--color-dash-muted)] dark:text-[var(--color-dash-label)] mt-1">7 open cases across your properties</p>
-                </div>
-                <button className="text-sm font-semibold text-[var(--color-dash-accent)] hover:underline">View All</button>
-              </div>
-              <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
-                {[
-                  { category: "Billing Disputes", count: 3, color: "var(--color-dash-warning)", urgent: true },
-                  { category: "Guest Complaints", count: 2, color: "var(--color-dash-danger)", urgent: true },
-                  { category: "Maintenance Requests", count: 1, color: "var(--color-dash-info)", urgent: false },
-                  { category: "Booking Modifications", count: 1, color: "var(--color-dash-accent)", urgent: false },
-                ].map((item) => (
-                  <div key={item.category} className="flex items-center gap-3 p-4 rounded-xl bg-[var(--color-dash-surface)]/50 dark:bg-[var(--color-dash-dark)]/50 hover:bg-[var(--color-dash-surface)] dark:hover:bg-[var(--color-dash-dark)] transition-colors cursor-pointer border border-[var(--color-dash-label)]/10 dark:border-[var(--color-dash-muted)]/20">
-                    <div className="w-1.5 h-10 rounded-full flex-shrink-0" style={{ backgroundColor: item.color }} />
-                    <div className="flex-1">
-                      <p className="font-semibold text-[var(--color-dash-text)] dark:text-white text-sm">{item.category}</p>
-                      <div className="flex items-center gap-2 mt-0.5">
-                        <span className="text-lg font-bold text-[var(--color-dash-text)] dark:text-white">{item.count}</span>
-                        {item.urgent && (
-                          <span className="text-[10px] font-bold px-1.5 py-0.5 rounded-full bg-[var(--color-dash-danger)]/10 text-[var(--color-dash-danger)]">URGENT</span>
-                        )}
-                      </div>
-                    </div>
-                  </div>
-                ))}
-              </div>
-            </>
-          )}
-        </div>
-
-        {/* ===== SERVICE ACTIVITY (moved up for service-first layout) ===== */}
-        <div className="pt-4 space-y-2">
-          <h2 className="text-3xl font-bold text-[var(--color-dash-text)] dark:text-white tracking-tight">
-            Service activity
-          </h2>
-          <p className="text-lg text-[var(--color-dash-muted)] dark:text-[var(--color-dash-label)]">
-            Recent cases, guest feedback, and service updates across your properties
-          </p>
-        </div>
-
-        {/* Action Items Grid (moved up) */}
-        {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">
-              Open cases & items needing 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}
-
-        {/* Service Timeline (moved up) */}
-        <div className="pt-4 space-y-2">
-          <h3 className="text-xl font-bold text-[var(--color-dash-text)] dark:text-white">
-            Service timeline
-          </h3>
-          <p className="text-sm text-[var(--color-dash-muted)] dark:text-[var(--color-dash-label)]">
-            Cases, guest feedback, and updates across your properties
-          </p>
-        </div>
-
-        {/* Activity Feed (moved up) */}
-        {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,
-            }))}
-          />
-        )}
-
-        {/* ===== BILLING & OPERATIONS (moved down) ===== */}
-
-        {/* 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 73% 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>
-        )}
-
-        {/* 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 service cases to billing questions.
-            </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>
-
-        </>}
-
-        {/* ============== CASES TAB ============== */}
-        {activeTab === "cases" && !tabLoading && (
-          <div className="space-y-6 animate-fade-in">
-            <div className="flex items-center justify-between">
-              <div>
-                <h2 className="text-2xl font-bold text-[var(--color-dash-text)] dark:text-white">Service Cases</h2>
-                <p className="text-sm text-[var(--color-dash-muted)] dark:text-[var(--color-dash-label)] mt-1">All open and recent cases across your properties</p>
-              </div>
-              <div className="flex items-center gap-3">
-                <select className="bg-[var(--color-dash-surface)] dark:bg-[var(--color-dash-muted)]/10 border border-[var(--color-dash-label)]/20 dark:border-[var(--color-dash-muted)]/30 rounded-lg px-3 py-2 text-sm text-[var(--color-dash-text)] dark:text-white">
-                  <option>All Properties</option>
-                  <option>Austin Convention Center</option>
-                  <option>Midtown NYC</option>
-                  <option>Chicago Downtown</option>
-                  <option>San Francisco Bay</option>
-                </select>
-                <select className="bg-[var(--color-dash-surface)] dark:bg-[var(--color-dash-muted)]/10 border border-[var(--color-dash-label)]/20 dark:border-[var(--color-dash-muted)]/30 rounded-lg px-3 py-2 text-sm text-[var(--color-dash-text)] dark:text-white">
-                  <option>All Statuses</option>
-                  <option>Open</option>
-                  <option>In Progress</option>
-                  <option>Escalated</option>
-                  <option>Resolved</option>
-                </select>
-              </div>
-            </div>
-
-            {/* Cases Summary Cards */}
-            <div className="grid grid-cols-1 sm:grid-cols-4 gap-4">
-              {[
-                { label: "Open", count: 3, color: "var(--color-dash-warning)", bg: "var(--color-dash-warning)" },
-                { label: "In Progress", count: 2, color: "var(--color-dash-info)", bg: "var(--color-dash-info)" },
-                { label: "Escalated", count: 2, color: "var(--color-dash-danger)", bg: "var(--color-dash-danger)" },
-                { label: "Resolved (30d)", count: 22, color: "var(--color-dash-success)", bg: "var(--color-dash-success)" },
-              ].map((s) => (
-                <div key={s.label} className="bg-white dark:bg-[var(--color-dash-text)] rounded-xl p-5 border border-[var(--color-dash-label)]/20 dark:border-[var(--color-dash-muted)]/30 shadow-sm">
-                  <p className="text-xs font-semibold uppercase tracking-wider mb-1" style={{ color: s.color }}>{s.label}</p>
-                  <p className="text-3xl font-black text-[var(--color-dash-text)] dark:text-white">{s.count}</p>
-                </div>
-              ))}
-            </div>
-
-            {/* Cases Data Table */}
-            <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">
-              <div className="overflow-x-auto">
-                <table className="w-full table-fixed">
-                  <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="w-[88px] px-4 py-3 text-left text-xs font-semibold text-[var(--color-dash-muted)] dark:text-[var(--color-dash-label)] uppercase tracking-wider">Case #</th>
-                      <th className="px-4 py-3 text-left text-xs font-semibold text-[var(--color-dash-muted)] dark:text-[var(--color-dash-label)] uppercase tracking-wider">Subject</th>
-                      <th className="w-[160px] px-4 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="w-[120px] px-4 py-3 text-left text-xs font-semibold text-[var(--color-dash-muted)] dark:text-[var(--color-dash-label)] uppercase tracking-wider">Category</th>
-                      <th className="w-[80px] px-4 py-3 text-left text-xs font-semibold text-[var(--color-dash-muted)] dark:text-[var(--color-dash-label)] uppercase tracking-wider">Priority</th>
-                      <th className="w-[100px] px-4 py-3 text-left text-xs font-semibold text-[var(--color-dash-muted)] dark:text-[var(--color-dash-label)] uppercase tracking-wider">Status</th>
-                      <th className="w-[110px] px-4 py-3 text-left text-xs font-semibold text-[var(--color-dash-muted)] dark:text-[var(--color-dash-label)] uppercase tracking-wider">Assigned To</th>
-                      <th className="w-[72px] px-4 py-3 text-left text-xs font-semibold text-[var(--color-dash-muted)] dark:text-[var(--color-dash-label)] uppercase tracking-wider">SLA</th>
-                    </tr>
-                  </thead>
-                  <tbody className="divide-y divide-[var(--color-dash-label)]/10 dark:divide-[var(--color-dash-muted)]/20">
-                    {[
-                      { id: "CS-1042", subject: "Noise complaint, room 412 adjacent to event space", property: "Austin Conv. Ctr", category: "Guest Complaint", priority: "High", status: "Resolved", assignedTo: "Sarah Chen", sla: "Met" },
-                      { id: "CS-1041", subject: "HVAC unit failure in conference room B", property: "SF Bay", category: "Maintenance", priority: "Medium", status: "In Progress", assignedTo: "Mike Torres", sla: "On Track" },
-                      { id: "CS-1040", subject: "Billing dispute, missing resale credit ATR-00001", property: "Austin Conv. Ctr", category: "Billing", priority: "High", status: "Open", assignedTo: "Agent", sla: "At Risk" },
-                      { id: "CS-1039", subject: "Room cleanliness, repeat complaint, 3rd occurrence", property: "Chicago Dtwn", category: "Guest Complaint", priority: "High", status: "Escalated", assignedTo: "Regional Mgr", sla: "Breached" },
-                      { id: "CS-1038", subject: "Late checkout request for VIP guest, corporate account", property: "SF Bay", category: "Guest Request", priority: "Low", status: "Open", assignedTo: "Front Desk", sla: "On Track" },
-                      { id: "CS-1037", subject: "Commission rate discrepancy on March invoice", property: "Midtown NYC", category: "Billing", priority: "Medium", status: "Open", assignedTo: "Agent", sla: "On Track" },
-                      { id: "CS-1036", subject: "Group booking modification, TechCorp adding 12 rooms", property: "Austin Conv. Ctr", category: "Booking", priority: "Medium", status: "Resolved", assignedTo: "Reservations", sla: "Met" },
-                      { id: "CS-1035", subject: "Pool area maintenance, heater malfunction", property: "SF Bay", category: "Maintenance", priority: "Low", status: "In Progress", assignedTo: "Facilities", sla: "On Track" },
-                      { id: "CS-1034", subject: "Penalty calculation review, revenue-based method request", property: "Austin Conv. Ctr", category: "Billing", priority: "High", status: "Escalated", assignedTo: "Partner Mgr", sla: "Breached" },
-                      { id: "CS-1033", subject: "Positive guest feedback, front desk team recognition", property: "Midtown NYC", category: "Guest Feedback", priority: "Low", status: "Resolved", assignedTo: "HR", sla: "Met" },
-                    ].map((c) => (
-                      <tr key={c.id} className="hover:bg-[var(--color-dash-surface)]/50 dark:hover:bg-[var(--color-dash-muted)]/5 transition-colors cursor-pointer">
-                        <td className="px-4 py-3 text-sm font-medium text-[var(--color-dash-accent)] whitespace-nowrap">{c.id}</td>
-                        <td className="px-4 py-3 text-sm text-[var(--color-dash-text)] dark:text-white leading-snug">{c.subject}</td>
-                        <td className="px-4 py-3 text-sm text-[var(--color-dash-muted)] dark:text-[var(--color-dash-label)]">{c.property}</td>
-                        <td className="px-4 py-3">
-                          <span className={`inline-flex whitespace-nowrap text-xs font-medium px-2 py-0.5 rounded-full ${
-                            c.category === "Guest Complaint" ? "bg-[var(--color-dash-danger)]/10 text-[var(--color-dash-danger)]" :
-                            c.category === "Billing" ? "bg-[var(--color-dash-warning)]/10 text-[var(--color-dash-warning)]" :
-                            c.category === "Maintenance" ? "bg-[var(--color-dash-info)]/10 text-[var(--color-dash-info)]" :
-                            "bg-[var(--color-dash-label)]/10 text-[var(--color-dash-muted)]"
-                          }`}>{c.category}</span>
-                        </td>
-                        <td className="px-4 py-3">
-                          <span className={`text-xs font-bold whitespace-nowrap ${
-                            c.priority === "High" ? "text-[var(--color-dash-danger)]" :
-                            c.priority === "Medium" ? "text-[var(--color-dash-warning)]" :
-                            "text-[var(--color-dash-label)]"
-                          }`}>{c.priority}</span>
-                        </td>
-                        <td className="px-4 py-3">
-                          <span className={`inline-flex whitespace-nowrap items-center rounded-full px-2 py-0.5 text-xs font-medium ${
-                            c.status === "Open" ? "bg-[var(--color-dash-warning)]/10 text-[var(--color-dash-warning)] border border-[var(--color-dash-warning)]/30" :
-                            c.status === "In Progress" ? "bg-[var(--color-dash-info)]/10 text-[var(--color-dash-info)] border border-[var(--color-dash-info)]/30" :
-                            c.status === "Escalated" ? "bg-[var(--color-dash-danger)]/10 text-[var(--color-dash-danger)] border border-[var(--color-dash-danger)]/30" :
-                            "bg-[var(--color-dash-success)]/10 text-[var(--color-dash-success)] border border-[var(--color-dash-success)]/30"
-                          }`}>{c.status}</span>
-                        </td>
-                        <td className="px-4 py-3 text-sm text-[var(--color-dash-muted)] dark:text-[var(--color-dash-label)] whitespace-nowrap">{c.assignedTo}</td>
-                        <td className="px-4 py-3">
-                          <span className={`text-xs font-semibold whitespace-nowrap ${
-                            c.sla === "Met" ? "text-[var(--color-dash-success)]" :
-                            c.sla === "On Track" ? "text-[var(--color-dash-info)]" :
-                            c.sla === "At Risk" ? "text-[var(--color-dash-warning)]" :
-                            "text-[var(--color-dash-danger)]"
-                          }`}>{c.sla}</span>
-                        </td>
-                      </tr>
-                    ))}
-                  </tbody>
-                </table>
-              </div>
-              <div className="px-6 py-4 border-t border-[var(--color-dash-label)]/10 dark:border-[var(--color-dash-muted)]/20 flex items-center justify-between">
-                <p className="text-sm text-[var(--color-dash-muted)] dark:text-[var(--color-dash-label)]">Showing 10 of 30 cases</p>
-                <div className="flex items-center gap-2">
-                  <button className="px-3 py-1.5 text-sm rounded-lg border border-[var(--color-dash-label)]/20 dark:border-[var(--color-dash-muted)]/30 text-[var(--color-dash-muted)] dark:text-[var(--color-dash-label)] hover:bg-[var(--color-dash-surface)] dark:hover:bg-[var(--color-dash-muted)]/10 transition-colors">Previous</button>
-                  <span className="px-3 py-1.5 text-sm rounded-lg bg-[var(--color-dash-dark)] text-white font-semibold">1</span>
-                  <button className="px-3 py-1.5 text-sm rounded-lg border border-[var(--color-dash-label)]/20 dark:border-[var(--color-dash-muted)]/30 text-[var(--color-dash-muted)] dark:text-[var(--color-dash-label)] hover:bg-[var(--color-dash-surface)] dark:hover:bg-[var(--color-dash-muted)]/10 transition-colors">2</button>
-                  <button className="px-3 py-1.5 text-sm rounded-lg border border-[var(--color-dash-label)]/20 dark:border-[var(--color-dash-muted)]/30 text-[var(--color-dash-muted)] dark:text-[var(--color-dash-label)] hover:bg-[var(--color-dash-surface)] dark:hover:bg-[var(--color-dash-muted)]/10 transition-colors">Next</button>
-                </div>
-              </div>
-            </div>
-          </div>
-        )}
-
-        {/* ============== PROPERTIES TAB ============== */}
-        {activeTab === "properties" && !tabLoading && (
-          <div className="space-y-6 animate-fade-in">
-            <div className="flex items-center justify-between">
-              <div>
-                <h2 className="text-2xl font-bold text-[var(--color-dash-text)] dark:text-white">Your Properties</h2>
-                <p className="text-sm text-[var(--color-dash-muted)] dark:text-[var(--color-dash-label)] mt-1">Manage and monitor all your properties in the Engine network</p>
-              </div>
-            </div>
-
-            <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
-              {[
-                { name: "Summit Austin Convention Center", city: "Austin, TX", rooms: 320, satisfaction: 4.8, responseTime: "1.8h", openCases: 2, revenue: "$97,600", growth: "+60%", status: "Excellent", aiRec: "40-room cancellation creates promo opportunity. Launch Engine network promotion to recover up to $12,287 in revenue." },
-                { name: "Summit Midtown NYC", city: "New York, NY", rooms: 280, satisfaction: 4.7, responseTime: "2.1h", openCases: 1, revenue: "$73,100", growth: "+55%", status: "Good", aiRec: "Strong performance. Consider requesting a rate increase for Q3 based on 55% growth trajectory and high guest satisfaction." },
-                { name: "Summit Chicago Downtown", city: "Chicago, IL", rooms: 240, satisfaction: 4.5, responseTime: "2.6h", openCases: 1, revenue: "$59,000", growth: "+75%", status: "Good", aiRec: "Satisfaction trending down (4.7 to 4.5). Housekeeping audit recommended based on repeat cleanliness complaint." },
-                { name: "Summit San Francisco Bay", city: "San Francisco, CA", rooms: 200, satisfaction: 4.3, responseTime: "3.2h", openCases: 3, revenue: "$53,300", growth: "+100%", status: "Needs Attention", aiRec: "Response time (3.2h) approaching SLA limit. Assign dedicated service agent to prevent breaches and protect 100% growth momentum." },
-              ].map((prop) => (
-                <div key={prop.name} className="bg-white dark:bg-[var(--color-dash-text)] rounded-xl border border-[var(--color-dash-label)]/20 dark:border-[var(--color-dash-muted)]/30 shadow-sm hover:shadow-lg transition-all duration-300 overflow-hidden cursor-pointer">
-                  <div className="p-6">
-                    <div className="flex items-start justify-between mb-4">
-                      <div>
-                        <h3 className="text-lg font-bold text-[var(--color-dash-text)] dark:text-white">{prop.name}</h3>
-                        <p className="text-sm text-[var(--color-dash-muted)] dark:text-[var(--color-dash-label)]">{prop.city} / {prop.rooms} rooms</p>
-                      </div>
-                      <span className={`inline-flex items-center rounded-full px-2.5 py-1 text-xs font-medium ${
-                        prop.status === "Excellent" ? "bg-[var(--color-dash-success)]/10 text-[var(--color-dash-success)] border border-[var(--color-dash-success)]/30" :
-                        prop.status === "Good" ? "bg-[var(--color-dash-info)]/10 text-[var(--color-dash-info)] border border-[var(--color-dash-info)]/30" :
-                        "bg-[var(--color-dash-warning)]/10 text-[var(--color-dash-warning)] border border-[var(--color-dash-warning)]/30"
-                      }`}>{prop.status}</span>
-                    </div>
-
-                    <div className="grid grid-cols-3 gap-4 mb-4">
-                      <div>
-                        <p className="text-xs text-[var(--color-dash-muted)] dark:text-[var(--color-dash-label)] uppercase tracking-wider mb-1">Satisfaction</p>
-                        <div className="flex items-center gap-1">
-                          <StarIcon className="h-4 w-4 text-[var(--color-dash-accent)]" />
-                          <span className="text-xl font-bold text-[var(--color-dash-text)] dark:text-white">{prop.satisfaction}</span>
-                        </div>
-                      </div>
-                      <div>
-                        <p className="text-xs text-[var(--color-dash-muted)] dark:text-[var(--color-dash-label)] uppercase tracking-wider mb-1">Avg Response</p>
-                        <span className="text-xl font-bold text-[var(--color-dash-text)] dark:text-white">{prop.responseTime}</span>
-                      </div>
-                      <div>
-                        <p className="text-xs text-[var(--color-dash-muted)] dark:text-[var(--color-dash-label)] uppercase tracking-wider mb-1">Open Cases</p>
-                        <span className="text-xl font-bold text-[var(--color-dash-text)] dark:text-white">{prop.openCases}</span>
-                      </div>
-                    </div>
-
-                    <div className="flex items-center justify-between pt-4 border-t border-[var(--color-dash-label)]/10 dark:border-[var(--color-dash-muted)]/20 mb-4">
-                      <div>
-                        <p className="text-xs text-[var(--color-dash-muted)] dark:text-[var(--color-dash-label)]">Revenue (6 mo)</p>
-                        <p className="text-lg font-bold text-[var(--color-dash-text)] dark:text-white">{prop.revenue}</p>
-                      </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)]">
-                        {prop.growth}
-                      </span>
-                    </div>
-
-                    {/* AI Recommendation */}
-                    <div className="bg-[var(--color-dash-surface)]/70 dark:bg-[var(--color-dash-dark)]/50 rounded-lg p-3 flex items-start gap-2.5">
-                      <SparklesIcon className="h-3.5 w-3.5 text-[var(--color-dash-accent)] flex-shrink-0 mt-0.5" />
-                      <p className="text-xs text-[var(--color-dash-muted)] dark:text-[var(--color-dash-label)] leading-relaxed">{prop.aiRec}</p>
-                    </div>
-                  </div>
-                </div>
-              ))}
-            </div>
-          </div>
-        )}
-
-        {/* ============== ANALYTICS TAB ============== */}
-        {activeTab === "analytics" && !tabLoading && (
-          <div className="space-y-6 animate-fade-in">
-            <div className="flex items-center justify-between">
-              <div>
-                <h2 className="text-2xl font-bold text-[var(--color-dash-text)] dark:text-white">Analytics</h2>
-                <p className="text-sm text-[var(--color-dash-muted)] dark:text-[var(--color-dash-label)] mt-1">
-                  Performance analytics powered by Tableau
-                </p>
-              </div>
-              <div className="flex items-center gap-2 text-xs text-[var(--color-dash-muted)] dark:text-[var(--color-dash-label)]">
-                <span className="inline-flex items-center gap-1 px-2 py-1 rounded bg-[var(--color-dash-surface)] dark:bg-[var(--color-dash-muted)]/10 border border-[var(--color-dash-label)]/20 dark:border-[var(--color-dash-muted)]/30">
-                  <span className="h-1.5 w-1.5 rounded-full bg-[var(--color-dash-success)] animate-pulse" />
-                  Live from Tableau
-                </span>
-              </div>
-            </div>
-
-            {/* Key Metrics Row */}
-            <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
-              {[
-                { label: "Total Revenue (6mo)", value: "$283,000", delta: "+73%", deltaColor: "var(--color-dash-success)" },
-                { label: "Avg Occupancy Rate", value: "77.8%", delta: "+5.2%", deltaColor: "var(--color-dash-success)" },
-                { label: "RevPAR", value: "$149.25", delta: "+12%", deltaColor: "var(--color-dash-success)" },
-              ].map((m) => (
-                <div key={m.label} className="bg-white dark:bg-[var(--color-dash-text)] rounded-xl p-5 border border-[var(--color-dash-label)]/20 dark:border-[var(--color-dash-muted)]/30 shadow-sm">
-                  <p className="text-xs font-semibold text-[var(--color-dash-muted)] dark:text-[var(--color-dash-label)] uppercase tracking-wider mb-1">{m.label}</p>
-                  <div className="flex items-baseline gap-2">
-                    <p className="text-2xl font-black text-[var(--color-dash-text)] dark:text-white">{m.value}</p>
-                    <span className="text-xs font-bold" style={{ color: m.deltaColor }}>{m.delta}</span>
-                  </div>
-                </div>
-              ))}
-            </div>
-
-            {/* Charts Row 1: Revenue Trend + Booking Pipeline */}
-            <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
-              {/* Revenue Trend (multi-line) */}
-              <div className="bg-white dark:bg-[var(--color-dash-text)] rounded-2xl p-8 border border-[var(--color-dash-label)]/20 dark:border-[var(--color-dash-muted)]/30 shadow-sm">
-                <div className="flex items-center justify-between mb-2">
-                  <div>
-                    <h3 className="text-lg font-bold text-[var(--color-dash-text)] dark:text-white">Revenue Trend</h3>
-                    <p className="text-sm text-[var(--color-dash-muted)] dark:text-[var(--color-dash-label)] mt-1">Monthly revenue by property</p>
-                  </div>
-                </div>
-                <div className="flex gap-4 mb-4 text-xs">
-                  {[{ label: "Austin", color: "#5BC8C8" }, { label: "NYC", color: "#6366f1" }, { label: "Chicago", color: "#f59e0b" }, { label: "SF Bay", color: "#ef4444" }].map(l => (
-                    <span key={l.label} className="flex items-center gap-1.5 text-[var(--color-dash-muted)] dark:text-[var(--color-dash-label)]">
-                      <span className="h-2 w-2 rounded-full" style={{ backgroundColor: l.color }} />
-                      {l.label}
-                    </span>
-                  ))}
-                </div>
-                <D3Chart
-                  data={[
-                    { x: 0, austin: 13800, nyc: 9800, chicago: 7200, sf: 5400 },
-                    { x: 1, austin: 13800, nyc: 10200, chicago: 8100, sf: 6200 },
-                    { x: 2, austin: 15200, nyc: 11400, chicago: 9600, sf: 7100 },
-                    { x: 3, austin: 16900, nyc: 12600, chicago: 10400, sf: 8800 },
-                    { x: 4, austin: 18100, nyc: 13900, chicago: 11100, sf: 10800 },
-                    { x: 5, austin: 19800, nyc: 15200, chicago: 12600, sf: 15000 },
-                  ]}
-                  renderChart={(svg, data, dims) => {
-                    const sel = d3.select(svg);
-                    sel.selectAll("*").remove();
-                    const m = { top: 12, right: 16, bottom: 28, left: 48 };
-                    const w = dims.width, h = dims.height;
-                    const iw = w - m.left - m.right, ih = h - m.top - m.bottom;
-                    sel.attr("viewBox", `0 0 ${w} ${h}`);
-                    const g = sel.append("g").attr("transform", `translate(${m.left},${m.top})`);
-                    const months = ["Oct", "Nov", "Dec", "Jan", "Feb", "Mar"];
-                    const x = d3.scaleLinear().domain([0, 5]).range([0, iw]);
-                    const allVals = data.flatMap(d => [d.austin, d.nyc, d.chicago, d.sf]);
-                    const y = d3.scaleLinear().domain([d3.min(allVals) * 0.9, d3.max(allVals) * 1.05]).range([ih, 0]);
-                    g.append("g").call(d3.axisLeft(y).ticks(5).tickFormat(d => `$${(d/1000).toFixed(0)}K`).tickSize(-iw))
-                      .call(a => a.selectAll("text").attr("fill", "#94a3b8").attr("font-size", "10px"))
-                      .call(a => a.selectAll(".tick line").attr("stroke", "#e2e8f0").attr("stroke-dasharray", "2,2"))
-                      .call(a => a.select(".domain").remove());
-                    g.append("g").attr("transform", `translate(0,${ih})`).call(d3.axisBottom(x).ticks(6).tickFormat((_, i) => months[i]).tickSize(0))
-                      .call(a => a.selectAll("text").attr("fill", "#94a3b8").attr("font-size", "11px"))
-                      .call(a => a.select(".domain").remove());
-                    const series = [{ key: "austin", color: "#5BC8C8" }, { key: "nyc", color: "#6366f1" }, { key: "chicago", color: "#f59e0b" }, { key: "sf", color: "#ef4444" }];
-                    series.forEach(s => {
-                      const area = d3.area().x(d => x(d.x)).y0(ih).y1(d => y(d[s.key])).curve(d3.curveMonotoneX);
-                      g.append("path").datum(data).attr("fill", s.color).attr("opacity", 0.08).attr("d", area);
-                      const line = d3.line().x(d => x(d.x)).y(d => y(d[s.key])).curve(d3.curveMonotoneX);
-                      g.append("path").datum(data).attr("fill", "none").attr("stroke", s.color).attr("stroke-width", 2.5).attr("d", line);
-                    });
-                  }}
-                  height={240}
-                  responsive
-                />
-              </div>
-
-              {/* Booking Pipeline (grouped bar) */}
-              <div className="bg-white dark:bg-[var(--color-dash-text)] rounded-2xl p-8 border border-[var(--color-dash-label)]/20 dark:border-[var(--color-dash-muted)]/30 shadow-sm">
-                <div className="flex items-center justify-between mb-2">
-                  <div>
-                    <h3 className="text-lg font-bold text-[var(--color-dash-text)] dark:text-white">Booking Pipeline</h3>
-                    <p className="text-sm text-[var(--color-dash-muted)] dark:text-[var(--color-dash-label)] mt-1">Upcoming reservations by category</p>
-                  </div>
-                </div>
-                <div className="flex gap-4 mb-4 text-xs">
-                  <span className="flex items-center gap-1.5 text-[var(--color-dash-muted)] dark:text-[var(--color-dash-label)]"><span className="h-2 w-2 rounded-full bg-[#5BC8C8]" />Confirmed</span>
-                  <span className="flex items-center gap-1.5 text-[var(--color-dash-muted)] dark:text-[var(--color-dash-label)]"><span className="h-2 w-2 rounded-full bg-[#f59e0b]" />Tentative</span>
-                </div>
-                <D3Chart
-                  data={[
-                    { x: "Corporate", confirmed: 142, tentative: 38 },
-                    { x: "Leisure", confirmed: 89, tentative: 22 },
-                    { x: "Group", confirmed: 34, tentative: 12 },
-                    { x: "Events", confirmed: 18, tentative: 8 },
-                    { x: "Last-Min", confirmed: 56, tentative: 14 },
-                  ]}
-                  renderChart={(svg, data, dims) => {
-                    const sel = d3.select(svg);
-                    sel.selectAll("*").remove();
-                    const m = { top: 12, right: 16, bottom: 32, left: 48 };
-                    const w = dims.width, h = dims.height;
-                    const iw = w - m.left - m.right, ih = h - m.top - m.bottom;
-                    sel.attr("viewBox", `0 0 ${w} ${h}`);
-                    const g = sel.append("g").attr("transform", `translate(${m.left},${m.top})`);
-                    const keys = ["confirmed", "tentative"];
-                    const colors = ["#5BC8C8", "#f59e0b"];
-                    const x0 = d3.scaleBand().domain(data.map(d => d.x)).range([0, iw]).padding(0.3);
-                    const x1 = d3.scaleBand().domain(keys).range([0, x0.bandwidth()]).padding(0.05);
-                    const yMax = d3.max(data, d => d3.max(keys, k => d[k])) * 1.15;
-                    const y = d3.scaleLinear().domain([0, yMax]).range([ih, 0]);
-                    g.append("g").call(d3.axisLeft(y).ticks(5).tickFormat(d3.format(",.0f")).tickSize(-iw))
-                      .call(a => a.selectAll("text").attr("fill", "#94a3b8").attr("font-size", "10px"))
-                      .call(a => a.selectAll(".tick line").attr("stroke", "#e2e8f0").attr("stroke-dasharray", "2,2"))
-                      .call(a => a.select(".domain").remove());
-                    g.append("g").attr("transform", `translate(0,${ih})`).call(d3.axisBottom(x0).tickSize(0))
-                      .call(a => a.selectAll("text").attr("fill", "#94a3b8").attr("font-size", "11px"))
-                      .call(a => a.select(".domain").remove());
-                    const rows = g.selectAll(".bar-group").data(data).join("g").attr("transform", d => `translate(${x0(d.x)},0)`);
-                    keys.forEach((key, i) => {
-                      rows.append("rect").attr("x", x1(key)).attr("y", d => y(d[key])).attr("width", x1.bandwidth()).attr("height", d => ih - y(d[key])).attr("rx", 4).attr("fill", colors[i]);
-                    });
-                  }}
-                  height={240}
-                  responsive
-                />
-              </div>
-            </div>
-
-            {/* Charts Row 2: Guest Satisfaction Trend + Occupancy */}
-            <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
-              {/* Guest Satisfaction */}
-              <div className="bg-white dark:bg-[var(--color-dash-text)] rounded-2xl p-8 border border-[var(--color-dash-label)]/20 dark:border-[var(--color-dash-muted)]/30 shadow-sm">
-                <div className="flex items-center justify-between mb-2">
-                  <div>
-                    <h3 className="text-lg font-bold text-[var(--color-dash-text)] dark:text-white">Guest Satisfaction Trend</h3>
-                    <p className="text-sm text-[var(--color-dash-muted)] dark:text-[var(--color-dash-label)] mt-1">Average rating over the last 6 months</p>
-                  </div>
-                  <div className="flex items-center gap-1.5 text-sm text-[var(--color-dash-success)] font-semibold">
-                    <SparklesIcon className="h-4 w-4" />
-                    Trending up
-                  </div>
-                </div>
-                <div className="flex gap-4 mb-4 text-xs">
-                  {[{ label: "Austin", color: "#5BC8C8" }, { label: "NYC", color: "#6366f1" }, { label: "Chicago", color: "#f59e0b" }, { label: "SF Bay", color: "#ef4444" }].map(l => (
-                    <span key={l.label} className="flex items-center gap-1.5 text-[var(--color-dash-muted)] dark:text-[var(--color-dash-label)]">
-                      <span className="h-2 w-2 rounded-full" style={{ backgroundColor: l.color }} />
-                      {l.label}
-                    </span>
-                  ))}
-                </div>
-                <D3Chart
-                  data={[
-                    { x: 0, austin: 4.5, nyc: 4.3, chicago: 4.6, sf: 3.8 },
-                    { x: 1, austin: 4.6, nyc: 4.3, chicago: 4.6, sf: 3.9 },
-                    { x: 2, austin: 4.6, nyc: 4.4, chicago: 4.5, sf: 4.0 },
-                    { x: 3, austin: 4.7, nyc: 4.5, chicago: 4.5, sf: 4.1 },
-                    { x: 4, austin: 4.7, nyc: 4.6, chicago: 4.5, sf: 4.2 },
-                    { x: 5, austin: 4.8, nyc: 4.7, chicago: 4.5, sf: 4.3 },
-                  ]}
-                  renderChart={(svg, data, dims) => {
-                    const sel = d3.select(svg);
-                    sel.selectAll("*").remove();
-                    const m = { top: 12, right: 16, bottom: 28, left: 36 };
-                    const w = dims.width, h = dims.height;
-                    const iw = w - m.left - m.right, ih = h - m.top - m.bottom;
-                    sel.attr("viewBox", `0 0 ${w} ${h}`);
-                    const g = sel.append("g").attr("transform", `translate(${m.left},${m.top})`);
-                    const months = ["Oct", "Nov", "Dec", "Jan", "Feb", "Mar"];
-                    const x = d3.scaleLinear().domain([0, 5]).range([0, iw]);
-                    const y = d3.scaleLinear().domain([3.5, 5.0]).range([ih, 0]);
-                    g.append("g").call(d3.axisLeft(y).ticks(4).tickSize(-iw))
-                      .call(a => a.selectAll("text").attr("fill", "#94a3b8").attr("font-size", "10px"))
-                      .call(a => a.selectAll(".tick line").attr("stroke", "#e2e8f0").attr("stroke-dasharray", "2,2"))
-                      .call(a => a.select(".domain").remove());
-                    g.append("g").attr("transform", `translate(0,${ih})`).call(d3.axisBottom(x).ticks(6).tickFormat((_, i) => months[i]).tickSize(0))
-                      .call(a => a.selectAll("text").attr("fill", "#94a3b8").attr("font-size", "11px"))
-                      .call(a => a.select(".domain").remove());
-                    const series = [{ key: "austin", color: "#5BC8C8" }, { key: "nyc", color: "#6366f1" }, { key: "chicago", color: "#f59e0b" }, { key: "sf", color: "#ef4444" }];
-                    series.forEach(s => {
-                      const line = d3.line().x(d => x(d.x)).y(d => y(d[s.key])).curve(d3.curveMonotoneX);
-                      g.append("path").datum(data).attr("fill", "none").attr("stroke", s.color).attr("stroke-width", 2.5).attr("d", line);
-                      g.selectAll(`.dot-${s.key}`).data(data).join("circle").attr("cx", d => x(d.x)).attr("cy", d => y(d[s.key])).attr("r", 3).attr("fill", s.color);
-                    });
-                  }}
-                  height={240}
-                  responsive
-                />
-              </div>
-
-              {/* Occupancy by Day of Week */}
-              <div className="bg-white dark:bg-[var(--color-dash-text)] rounded-2xl p-8 border border-[var(--color-dash-label)]/20 dark:border-[var(--color-dash-muted)]/30 shadow-sm">
-                <div className="flex items-center justify-between mb-6">
-                  <div>
-                    <h3 className="text-lg font-bold text-[var(--color-dash-text)] dark:text-white">Occupancy by Day</h3>
-                    <p className="text-sm text-[var(--color-dash-muted)] dark:text-[var(--color-dash-label)] mt-1">Average occupancy rate by day of the week</p>
-                  </div>
-                </div>
-                <D3Chart
-                  data={[
-                    { x: "Mon", value: 68 },
-                    { x: "Tue", value: 72 },
-                    { x: "Wed", value: 76 },
-                    { x: "Thu", value: 82 },
-                    { x: "Fri", value: 91 },
-                    { x: "Sat", value: 94 },
-                    { x: "Sun", value: 85 },
-                  ]}
-                  renderChart={(svg, data, dims) => {
-                    const sel = d3.select(svg);
-                    sel.selectAll("*").remove();
-                    const m = { top: 12, right: 16, bottom: 32, left: 40 };
-                    const w = dims.width, h = dims.height;
-                    const iw = w - m.left - m.right, ih = h - m.top - m.bottom;
-                    sel.attr("viewBox", `0 0 ${w} ${h}`);
-                    const g = sel.append("g").attr("transform", `translate(${m.left},${m.top})`);
-                    const x = d3.scaleBand().domain(data.map(d => d.x)).range([0, iw]).padding(0.35);
-                    const y = d3.scaleLinear().domain([0, 100]).range([ih, 0]);
-                    g.append("g").call(d3.axisLeft(y).ticks(5).tickFormat(d => d + "%").tickSize(-iw))
-                      .call(a => a.selectAll("text").attr("fill", "#94a3b8").attr("font-size", "10px"))
-                      .call(a => a.selectAll(".tick line").attr("stroke", "#e2e8f0").attr("stroke-dasharray", "2,2"))
-                      .call(a => a.select(".domain").remove());
-                    g.append("g").attr("transform", `translate(0,${ih})`).call(d3.axisBottom(x).tickSize(0))
-                      .call(a => a.selectAll("text").attr("fill", "#94a3b8").attr("font-size", "11px"))
-                      .call(a => a.select(".domain").remove());
-                    g.selectAll("rect").data(data).join("rect")
-                      .attr("x", d => x(d.x)).attr("y", d => y(d.value))
-                      .attr("width", x.bandwidth()).attr("height", d => ih - y(d.value))
-                      .attr("rx", 4).attr("fill", d => d.value >= 90 ? "#5BC8C8" : d.value >= 80 ? "#5BC8C8cc" : "#5BC8C880");
-                    g.selectAll(".val-label").data(data).join("text")
-                      .attr("x", d => x(d.x) + x.bandwidth() / 2).attr("y", d => y(d.value) - 6)
-                      .attr("text-anchor", "middle").attr("fill", "#64748b").attr("font-size", "10px").attr("font-weight", "600")
-                      .text(d => d.value + "%");
-                  }}
-                  height={240}
-                  responsive
-                />
-              </div>
-            </div>
-
-            {/* Revenue Breakdown Table */}
-            <div className="bg-white dark:bg-[var(--color-dash-text)] rounded-2xl p-8 border border-[var(--color-dash-label)]/20 dark:border-[var(--color-dash-muted)]/30 shadow-sm">
-              <div className="flex items-center justify-between mb-6">
-                <div>
-                  <h3 className="text-lg font-bold text-[var(--color-dash-text)] dark:text-white">Revenue Breakdown by Property</h3>
-                  <p className="text-sm text-[var(--color-dash-muted)] dark:text-[var(--color-dash-label)] mt-1">6-month performance comparison across all properties</p>
-                </div>
-              </div>
-              <div className="overflow-x-auto">
-                <table className="w-full">
-                  <thead className="border-b border-[var(--color-dash-label)]/20 dark:border-[var(--color-dash-muted)]/30">
-                    <tr>
-                      {["Property", "Revenue", "ADR", "Occupancy", "RevPAR", "Bookings", "Cancellations", "Net Growth"].map((h) => (
-                        <th key={h} className="px-4 py-3 text-left text-xs font-semibold text-[var(--color-dash-muted)] dark:text-[var(--color-dash-label)] uppercase tracking-wider">{h}</th>
-                      ))}
-                    </tr>
-                  </thead>
-                  <tbody className="divide-y divide-[var(--color-dash-label)]/10 dark:divide-[var(--color-dash-muted)]/20">
-                    {[
-                      { name: "Austin Convention Center", revenue: "$97,600", adr: "$189", occupancy: "82%", revpar: "$155", bookings: 516, cancellations: 12, growth: "+60%" },
-                      { name: "Midtown NYC", revenue: "$73,100", adr: "$215", occupancy: "79%", revpar: "$170", bookings: 340, cancellations: 8, growth: "+55%" },
-                      { name: "Chicago Downtown", revenue: "$59,000", adr: "$165", occupancy: "76%", revpar: "$125", bookings: 358, cancellations: 6, growth: "+75%" },
-                      { name: "San Francisco Bay", revenue: "$53,300", adr: "$198", occupancy: "74%", revpar: "$147", bookings: 269, cancellations: 15, growth: "+100%" },
-                    ].map((r) => (
-                      <tr key={r.name} className="hover:bg-[var(--color-dash-surface)]/50 dark:hover:bg-[var(--color-dash-muted)]/5 transition-colors">
-                        <td className="px-4 py-3 text-sm font-semibold text-[var(--color-dash-text)] dark:text-white">{r.name}</td>
-                        <td className="px-4 py-3 text-sm font-bold text-[var(--color-dash-text)] dark:text-white">{r.revenue}</td>
-                        <td className="px-4 py-3 text-sm text-[var(--color-dash-muted)] dark:text-[var(--color-dash-label)]">{r.adr}</td>
-                        <td className="px-4 py-3 text-sm text-[var(--color-dash-muted)] dark:text-[var(--color-dash-label)]">{r.occupancy}</td>
-                        <td className="px-4 py-3 text-sm text-[var(--color-dash-muted)] dark:text-[var(--color-dash-label)]">{r.revpar}</td>
-                        <td className="px-4 py-3 text-sm text-[var(--color-dash-text)] dark:text-white">{r.bookings}</td>
-                        <td className="px-4 py-3 text-sm text-[var(--color-dash-danger)]">{r.cancellations}</td>
-                        <td className="px-4 py-3 text-sm font-bold text-[var(--color-dash-success)]">{r.growth}</td>
-                      </tr>
-                    ))}
-                  </tbody>
-                </table>
-              </div>
-            </div>
-
-            {/* AI Analytics Insight */}
-            <div className="bg-gradient-to-r from-[var(--color-dash-dark)] to-[var(--color-dash-dark)]/90 rounded-xl p-5 flex items-start gap-4">
-              <div className="flex-shrink-0 h-9 w-9 rounded-lg bg-white/10 flex items-center justify-center">
-                <SparklesIcon className="h-5 w-5 text-[var(--color-dash-accent)]" />
-              </div>
-              <div className="flex-1">
-                <p className="text-sm font-semibold text-white mb-1">Revenue Acceleration Opportunity</p>
-                <p className="text-xs text-white/60 leading-relaxed">Based on Tableau data, San Francisco Bay has the highest growth rate (+100%) but lowest absolute revenue. Increasing its occupancy from 74% to 82% (matching Austin) would generate an additional $14,200/month. The main constraint is response time (3.2h), which correlates with lower rebooking rates.</p>
-              </div>
-            </div>
-          </div>
-        )}
-
-        {/* DATA 360 TAB: added by headless-data-360 skill during demo */}
-
-        {/* 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>
-  );
-}