@schandlergarcia/sf-web-components 2.2.1 → 2.3.1

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

@@ -0,0 +1,2010 @@
+import { ListCard, ActivityCard, D3Chart, Dropdown, Button, Modal, CardSkeleton } from "@/components/library";
+import useDataSource from "@/components/library/data/useDataSource";
+import { useThemeMode } from "@/components/library/theme/AppThemeProvider";
+import { toast } from "sonner";
+import React from "react";
+import { usePartnerDashboardData } from "@/hooks/usePartnerDashboardData";
+import { ENABLE_SAMPLE_DATA_CACHE } from "@/lib/dataStrategy";
+import {
+  PENALTY_TABLE_ITEMS,
+  DISPUTE_CARDS,
+  INVOICE_CARDS,
+  RECENT_ACTIVITY,
+  REVENUE_TREND_BY_PROPERTY,
+  PROPERTY_LEADERBOARD,
+} from "@/data/partner-hub-sample-data";
+import {
+  BuildingOfficeIcon,
+  BanknotesIcon,
+  ExclamationTriangleIcon,
+  ClockIcon,
+  ShieldCheckIcon,
+  MoonIcon,
+  SunIcon,
+  UserCircleIcon,
+  Cog6ToothIcon,
+  ArrowRightOnRectangleIcon,
+  TrophyIcon,
+  StarIcon,
+  RocketLaunchIcon,
+  LightBulbIcon,
+  DocumentArrowDownIcon,
+} from "@heroicons/react/24/outline";
+import * as d3 from "d3";
+import engineLogo from "@/assets/images/engine_logo.png";
+
+/**
+ * Partner Hub Dashboard
+ *
+ * Partner-facing portal where hotel partners (Marriott, Hilton, etc.) log in
+ * to view their business relationship with Engine:
+ * - Their properties and performance
+ * - Their invoices and payments
+ * - Their attrition penalties and disputes
+ * - Their contract details
+ * - Communication with Engine
+ */
+export default function PartnerHubDashboard() {
+  const { mode, toggle } = useThemeMode();
+  const [selectedPenalty, setSelectedPenalty] = React.useState(null);
+  const [isPenaltyModalOpen, setIsPenaltyModalOpen] = React.useState(false);
+  const [isPropertiesModalOpen, setIsPropertiesModalOpen] = React.useState(false);
+  const [isRevenueModalOpen, setIsRevenueModalOpen] = React.useState(false);
+  const [isReservationsModalOpen, setIsReservationsModalOpen] = React.useState(false);
+  const [isDisputesModalOpen, setIsDisputesModalOpen] = React.useState(false);
+  const [isInvoicesModalOpen, setIsInvoicesModalOpen] = React.useState(false);
+
+  // Simulated logged-in partner (in real app, this comes from auth context)
+  const currentPartner = {
+    name: "Summit Hotels & Resorts",
+    tier: "Gold",
+    logo: null, // Could add partner logo here
+  };
+
+  // Fetch live data from Salesforce
+  const { data: liveData, loading: liveLoading, error: liveError } = usePartnerDashboardData(
+    ENABLE_SAMPLE_DATA_CACHE ? null : null // Fetch for current partner
+  );
+
+  // Determine if we're loading (only in live mode)
+  const isLoading = !ENABLE_SAMPLE_DATA_CACHE && liveLoading;
+
+  // Show error toast if live data fails
+  React.useEffect(() => {
+    if (!ENABLE_SAMPLE_DATA_CACHE && liveError) {
+      toast.error(`Failed to load data: ${liveError.message}`);
+      console.error("Live Data Error:", liveError);
+    }
+  }, [liveError]);
+
+  // Log live data status
+  React.useEffect(() => {
+    if (!ENABLE_SAMPLE_DATA_CACHE) {
+      console.log("Live Data Mode - Loading:", liveLoading);
+      console.log("Live Data Mode - Error:", liveError);
+      console.log("Live Data Mode - Data:", liveData);
+    }
+  }, [liveLoading, liveError, liveData]);
+
+  // Transform live data to match sample data format
+  const transformLiveData = React.useCallback((liveData: any) => {
+    if (!liveData) return null;
+
+    // Transform penalties to match expected format
+    const penalties = (liveData.penalties || []).map((p: any) => ({
+      id: p.Id,
+      name: p.Name?.value || p.Name,
+      partner: currentPartner.name,
+      property: p.Property__r?.Property_Name__c?.value || p.Property__r?.Name?.value || "Unknown Property",
+      customer: p.Customer_Company__r?.Name?.value || "Unknown Customer",
+      status: p.Penalty_Status__c?.value || "Unknown",
+      penalty: p.Final_Penalty_Amount__c?.value || 0,
+      credit: p.Resale_Credit_Applied__c?.value || 0,
+      method: "Per Night", // From contract
+      isHero: p.Resale_Credit_Applied__c?.value === 0 && (p.Rooms_Resold__c?.value || 0) > 0,
+      originalRoomBlock: p.Original_Room_Block__c?.value || 0,
+      actualRoomsUsed: p.Actual_Rooms_Used__c?.value || 0,
+      unusedRooms: p.Unused_Rooms__c?.value || 0,
+      roomRate: p.Room_Rate__c?.value || 0,
+      numberOfNights: p.Number_of_Nights__c?.value || 0,
+      roomsResold: p.Rooms_Resold__c?.value || 0,
+      penaltyCalculated: p.Penalty_Amount_Calculated__c?.value || 0,
+      resalePolicy: "Partial Credit (50%)", // From contract
+    }));
+
+    // Transform disputes to match expected format
+    const disputes = (liveData.disputes || []).map((d: any) => ({
+      id: d.Id,
+      title: d.Subject?.value || "Dispute",
+      description: `${currentPartner.name} · ${d.Dispute_Type__c?.value || "General"}`,
+      status: d.Status === "Open" || d.Status === "Escalated" ? "critical" : d.Priority === "High" ? "critical" : d.Priority === "Medium" ? "warning" : "info",
+      badge: d.Status?.value || d.Status || "Open",
+      amount: d.Disputed_Amount__c?.value || 0,
+      agentHandled: d.Agent_Handled__c?.value || false,
+    }));
+
+    // Transform invoices to match expected format
+    const invoices = (liveData.invoices || []).filter((i: any) => {
+      const status = i.Invoice_Status__c?.value || i.Invoice_Status__c;
+      return status !== "Paid";
+    }).map((i: any) => ({
+      id: i.Id,
+      title: `${i.Name?.value || i.Name} — ${currentPartner.name}`,
+      description: `${i.Invoice_Period_Start__c?.value || ""} to ${i.Invoice_Period_End__c?.value || ""}`,
+      status: (i.Invoice_Status__c?.value || i.Invoice_Status__c) === "Overdue" ? "critical" : "default",
+      badge: i.Invoice_Status__c?.value || i.Invoice_Status__c || "Draft",
+      amount: i.Invoice_Total__c?.value || 0,
+      due: i.Due_Date__c?.value || "",
+    }));
+
+    // Transform activity
+    const activity = [
+      ...disputes.slice(0, 2).map((d: any) => ({
+        id: `dispute-${d.id}`,
+        title: "Dispute Created",
+        description: d.title,
+        status: "alert",
+        timestamp: "Recently",
+        partner: currentPartner.name,
+      })),
+      ...invoices.slice(0, 2).map((i: any) => ({
+        id: `invoice-${i.id}`,
+        title: "Invoice Sent",
+        description: `${i.title} ($${i.amount.toLocaleString()})`,
+        status: i.status === "critical" ? "warning" : "info",
+        timestamp: "Recently",
+        partner: currentPartner.name,
+      })),
+    ];
+
+    return {
+      penalties,
+      disputes,
+      invoices,
+      activity,
+    };
+  }, [currentPartner.name]);
+
+  // Load data - use live data if available, otherwise sample
+  const transformedLiveData = React.useMemo(() => {
+    if (!ENABLE_SAMPLE_DATA_CACHE && liveData) {
+      return transformLiveData(liveData);
+    }
+    return null;
+  }, [liveData, transformLiveData]);
+
+  const allPenalties = useDataSource({
+    sample: PENALTY_TABLE_ITEMS,
+    live: transformedLiveData?.penalties || []
+  });
+  const allDisputes = useDataSource({
+    sample: DISPUTE_CARDS,
+    live: transformedLiveData?.disputes || []
+  });
+  const allInvoices = useDataSource({
+    sample: INVOICE_CARDS,
+    live: transformedLiveData?.invoices || []
+  });
+  const allActivity = useDataSource({
+    sample: RECENT_ACTIVITY,
+    live: transformedLiveData?.activity || []
+  });
+
+  // Calculate revenue trend from invoices
+  const revenueTrendByProperty = React.useMemo(() => {
+    if (ENABLE_SAMPLE_DATA_CACHE) {
+      return REVENUE_TREND_BY_PROPERTY;
+    }
+
+    if (!liveData?.invoices || liveData.invoices.length === 0 || !liveData?.properties) {
+      return REVENUE_TREND_BY_PROPERTY;
+    }
+
+    // Group invoices by month and calculate totals
+    const monthlyData = new Map();
+    liveData.invoices.forEach((inv: any) => {
+      const periodStart = inv.Invoice_Period_Start__c?.value;
+      if (periodStart) {
+        const date = new Date(periodStart);
+        const monthKey = `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, '0')}`;
+        const monthLabel = date.toLocaleDateString('en-US', { month: 'short', year: 'numeric' });
+        const amount = inv.Invoice_Total__c?.value || 0;
+
+        if (!monthlyData.has(monthKey)) {
+          monthlyData.set(monthKey, { key: monthKey, label: monthLabel, total: 0 });
+        }
+        monthlyData.get(monthKey).total += amount;
+      }
+    });
+
+    // Sort by date and convert to array
+    const sortedMonths = Array.from(monthlyData.values())
+      .sort((a, b) => a.key.localeCompare(b.key));
+
+    const months = sortedMonths.map(m => m.label);
+    const colors = ["#7DCBD9", "#1E9D6D", "#FF6B6B", "#FFA726"];
+
+    // Distribute monthly revenue across properties (weighted)
+    const properties = (liveData.properties || []).map((prop: any, idx: number) => {
+      const weights = [0.35, 0.28, 0.22, 0.15];
+      const weight = weights[idx] || 0.10;
+
+      return {
+        name: prop.Property_Name__c?.value || prop.Name?.value || `Property ${idx + 1}`,
+        color: colors[idx] || "#999",
+        values: sortedMonths.map(month => Math.floor(month.total * weight))
+      };
+    });
+
+    return { months, properties };
+  }, [liveData?.invoices, liveData?.properties]);
+
+  // Calculate total revenue first (needed by leaderboard)
+  const myRevenue = React.useMemo(() => {
+    if (ENABLE_SAMPLE_DATA_CACHE) {
+      return 238000;
+    }
+    return (liveData?.invoices || []).reduce((sum: number, inv: any) => sum + (inv.Invoice_Total__c?.value || 0), 0);
+  }, [liveData?.invoices]);
+
+  // Calculate property leaderboard from real data
+  const propertyLeaderboard = React.useMemo(() => {
+    if (ENABLE_SAMPLE_DATA_CACHE) {
+      return PROPERTY_LEADERBOARD;
+    }
+
+    if (!liveData?.properties || liveData.properties.length === 0) {
+      return [];
+    }
+
+    // For demo purposes, distribute total revenue across properties
+    // In a real system, you'd have property-level revenue tracking
+    const totalRevenue = myRevenue;
+    const properties = liveData.properties;
+
+    return properties.map((prop: any, idx: number) => {
+      // Distribute revenue with weighted randomness for demo
+      const weights = [0.35, 0.28, 0.22, 0.15]; // First property gets most
+      const weight = weights[idx] || 0.10;
+      const propRevenue = Math.floor(totalRevenue * weight);
+      const latestRevenue = Math.floor(propRevenue * 0.20); // 20% in latest period
+      const growthRates = [60, 55, 75, 100];
+      const growth = growthRates[idx] || 50;
+
+      return {
+        name: prop.Property_Name__c?.value || prop.Name?.value || `Property ${idx + 1}`,
+        city: prop.City__c?.value || "",
+        state: prop.State__c?.value || "",
+        revenue: propRevenue,
+        latestRevenue: latestRevenue,
+        growth: growth,
+        insight: idx === 0 ? `Highest booking volume through Engine — ${Math.round(weight * 100)}% of total` :
+                 idx === properties.length - 1 ? `Bookings doubled since October — ${growth}% growth` :
+                 `Strong booking growth in Q1 2026`
+      };
+    }).sort((a, b) => b.revenue - a.revenue);
+  }, [liveData?.properties, myRevenue]);
+
+  // Filter data for current partner (sample data needs filtering, live data is already filtered)
+  const myPenalties = ENABLE_SAMPLE_DATA_CACHE
+    ? allPenalties.filter((p: any) => p.partner === currentPartner.name)
+    : allPenalties;
+  const myDisputes = ENABLE_SAMPLE_DATA_CACHE
+    ? allDisputes.filter((d: any) => d.description.includes(currentPartner.name))
+    : allDisputes;
+  const myInvoices = ENABLE_SAMPLE_DATA_CACHE
+    ? allInvoices.filter((i: any) => i.title.includes(currentPartner.name))
+    : allInvoices;
+  const myActivity = ENABLE_SAMPLE_DATA_CACHE
+    ? allActivity.filter((a: any) => a.partner === currentPartner.name)
+    : allActivity;
+
+  // Calculate partner-specific metrics
+  const myProperties = ENABLE_SAMPLE_DATA_CACHE
+    ? 4 // Sample data
+    : (liveData?.partner?.Total_Properties__c?.value || liveData?.properties?.length || 0);
+  const myReservations = ENABLE_SAMPLE_DATA_CACHE
+    ? 10 // Sample data
+    : (liveData?.partner?.Total_Reservations__c?.value || 0);
+  const myOpenDisputes = myDisputes.length;
+  const myPendingInvoices = myInvoices.length;
+
+  // Custom horizontal bar chart renderer (unused for now, but kept for future use)
+  const renderHorizontalBarChart = (svgEl: any, data: any, { width, height }: any, options: any = {}) => {
+    const margin = options.margin || { top: 10, right: 30, bottom: 30, left: 150 };
+    const innerWidth = width - margin.left - margin.right;
+    const innerHeight = height - margin.top - margin.bottom;
+
+    const svg = d3.select(svgEl);
+    svg.selectAll("*").remove();
+
+    const g = svg
+      .append("g")
+      .attr("transform", `translate(${margin.left},${margin.top})`);
+
+    const x = d3
+      .scaleLinear()
+      .domain([0, d3.max(data, (d) => d.value) || 0])
+      .range([0, innerWidth]);
+
+    const y = d3
+      .scaleBand()
+      .domain(data.map((d) => d.label))
+      .range([0, innerHeight])
+      .padding(0.2);
+
+    // Bars with gradient
+    const gradient = svg.append("defs")
+      .append("linearGradient")
+      .attr("id", "barGradient")
+      .attr("x1", "0%")
+      .attr("x2", "100%");
+
+    gradient.append("stop")
+      .attr("offset", "0%")
+      .attr("stop-color", "#7DCBD9");
+
+    gradient.append("stop")
+      .attr("offset", "100%")
+      .attr("stop-color", "#1E9D6D");
+
+    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", "#ffffff")
+      .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", "#ffffff")
+      .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", "#7DCBD9")
+      .attr("fill-opacity", 0.3)
+      .attr("d", areaTotal);
+
+    // Commission area
+    g.append("path")
+      .datum(data)
+      .attr("fill", "#1E9D6D")
+      .attr("fill-opacity", 0.5)
+      .attr("d", areaCommission);
+
+    // Total line
+    g.append("path")
+      .datum(data)
+      .attr("fill", "none")
+      .attr("stroke", "#7DCBD9")
+      .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", "#1E9D6D")
+      .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", "#7DCBD9");
+
+    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", "#1E9D6D");
+
+    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");
+  }, []);
+
+  return (
+    <div className="heroui-scope min-h-screen bg-[#F3F3F4] dark:bg-[#0D1117] transition-colors duration-300">
+      {/* Header - Refined Engine Brand */}
+      <header className="bg-white/95 dark:bg-[#0D1117]/95 backdrop-blur-xl border-b border-[#B0B1B3]/20 dark:border-[#616368]/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-11 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-[#B0B1B3]/40 to-transparent" />
+                <div className="space-y-0.5">
+                  <p className="text-sm font-semibold text-[#0D1117] 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-[#1E9D6D] opacity-75"></span>
+                      <span className="relative inline-flex rounded-full h-2 w-2 bg-[#1E9D6D]"></span>
+                    </span>
+                    <p className="text-xs font-medium text-[#B0B1B3] 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-[#F3F3F4] dark:hover:bg-[#616368]/20 transition-colors duration-200"
+                aria-label="Toggle theme"
+              >
+                {mode === "dark" ? (
+                  <SunIcon className="h-5 w-5 text-[#7DCBD9] transition-transform group-hover:rotate-45 duration-300" />
+                ) : (
+                  <MoonIcon className="h-5 w-5 text-[#616368] 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-[#616368] dark:text-[#B0B1B3]" />
+                </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-[#F3F3F4] dark:hover:bg-[#616368]/20 cursor-pointer"
+                    >
+                      <div className="flex items-center gap-3">
+                        <Cog6ToothIcon className="h-5 w-5 text-[#616368] dark:text-[#B0B1B3]" />
+                        <span className="text-sm font-medium text-[#0D1117] 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-[#FD4B23]/10 cursor-pointer"
+                    >
+                      <div className="flex items-center gap-3">
+                        <ArrowRightOnRectangleIcon className="h-5 w-5 text-[#FD4B23]" />
+                        <span className="text-sm font-medium text-[#FD4B23]">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-[#0D1117] via-[#1a1f2e] to-[#0D1117] dark:from-[#0D1117] dark:via-[#0D1117] dark:to-[#0a0d12] 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-[#7DCBD9]/10 rounded-full blur-3xl" />
+        <div className="absolute bottom-0 left-0 w-96 h-96 bg-[#1E9D6D]/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! Here's what's happening with your properties
+            </h1>
+            <p className="text-lg text-white/70 leading-relaxed">
+              Everything you need to manage your partnership with Engine — invoices, bookings, and any items that need your attention.
+            </p>
+          </div>
+        </div>
+      </div>
+
+      {/* Main Content */}
+      <div className="max-w-[1600px] mx-auto px-8 -mt-12 space-y-10">
+        {/* Quick Stats - Uniform metrics grid */}
+        <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-5 gap-5 animate-slide-up relative z-10">
+          {/* Revenue */}
+          <div
+            onClick={() => !isLoading && setIsRevenueModalOpen(true)}
+            className={isLoading ? "" : "cursor-pointer"}
+          >
+            <div className="bg-white dark:bg-[#0D1117] rounded-xl p-6 shadow-sm hover:shadow-lg transition-all duration-300 border border-[#B0B1B3]/20 dark:border-[#616368]/30 h-full">
+              {isLoading ? (
+                <div className="space-y-3">
+                  <div className="flex items-center justify-between">
+                    <div className="bg-[#B0B1B3]/20 rounded-lg h-9 w-9 animate-pulse"></div>
+                    <div className="bg-[#B0B1B3]/20 rounded-full h-5 w-16 animate-pulse"></div>
+                  </div>
+                  <div className="h-3 w-24 bg-[#B0B1B3]/20 rounded animate-pulse"></div>
+                  <div className="h-10 w-32 bg-[#B0B1B3]/20 rounded animate-pulse"></div>
+                  <div className="h-3 w-28 bg-[#B0B1B3]/20 rounded animate-pulse"></div>
+                </div>
+              ) : (
+                <>
+                  <div className="flex items-center justify-between mb-3">
+                    <div className="bg-[#1E9D6D]/10 rounded-lg p-2">
+                      <BanknotesIcon className="h-5 w-5 text-[#1E9D6D]" />
+                    </div>
+                    <span className="inline-flex items-center rounded-full px-2 py-0.5 text-xs font-bold bg-[#1E9D6D]/10 text-[#1E9D6D]">
+                      +45%
+                    </span>
+                  </div>
+                  <p className="text-[#616368] dark:text-[#B0B1B3] text-xs font-semibold mb-2 uppercase tracking-wider">Total Revenue</p>
+                  <p className="text-4xl font-black text-[#0D1117] dark:text-white mb-1">${(myRevenue / 1000).toFixed(0)}K</p>
+                  <p className="text-xs text-[#616368] dark:text-[#B0B1B3]">earned with Engine</p>
+                </>
+              )}
+            </div>
+          </div>
+
+          {/* Items to Review */}
+          <div
+            onClick={() => !isLoading && setIsDisputesModalOpen(true)}
+            className={isLoading ? "" : "cursor-pointer"}
+          >
+            <div className="bg-white dark:bg-[#0D1117] rounded-xl p-6 shadow-sm hover:shadow-lg transition-all duration-300 border border-[#FFB200]/50 dark:border-[#FFB200]/30 h-full">
+              {isLoading ? (
+                <CardSkeleton lines={4} />
+              ) : (
+                <>
+                  <div className="flex items-center justify-between mb-3">
+                    <div className="bg-[#FFB200]/10 rounded-lg p-2">
+                      <ExclamationTriangleIcon className="h-5 w-5 text-[#FFB200]" />
+                    </div>
+                    <span className="inline-flex items-center rounded-full px-2 py-0.5 text-xs font-bold bg-[#FFB200] text-white">
+                      REVIEW
+                    </span>
+                  </div>
+                  <p className="text-[#616368] dark:text-[#B0B1B3] text-xs font-semibold mb-2 uppercase tracking-wider">Things to Review</p>
+                  <p className="text-4xl font-black text-[#0D1117] dark:text-white mb-1">{myOpenDisputes}</p>
+                  <p className="text-xs text-[#616368] dark:text-[#B0B1B3]">items need attention</p>
+                </>
+              )}
+            </div>
+          </div>
+
+          {/* Properties */}
+          <div
+            onClick={() => !isLoading && setIsPropertiesModalOpen(true)}
+            className={isLoading ? "" : "cursor-pointer"}
+          >
+            <div className="bg-white dark:bg-[#0D1117] rounded-xl p-6 shadow-sm hover:shadow-lg transition-all duration-300 border border-[#B0B1B3]/20 dark:border-[#616368]/30 h-full">
+              {isLoading ? (
+                <CardSkeleton lines={4} />
+              ) : (
+                <>
+                  <div className="flex items-center justify-between mb-3">
+                    <div className="bg-[#7DCBD9]/10 rounded-lg p-2">
+                      <BuildingOfficeIcon className="h-5 w-5 text-[#7DCBD9]" />
+                    </div>
+                  </div>
+                  <p className="text-[#616368] dark:text-[#B0B1B3] text-xs font-semibold mb-2 uppercase tracking-wider">Properties</p>
+                  <p className="text-4xl font-black text-[#0D1117] dark:text-white mb-1">{myProperties}</p>
+                  <p className="text-xs text-[#616368] dark:text-[#B0B1B3]">active locations</p>
+                </>
+              )}
+            </div>
+          </div>
+
+          {/* Reservations */}
+          <div
+            onClick={() => !isLoading && setIsReservationsModalOpen(true)}
+            className={isLoading ? "" : "cursor-pointer"}
+          >
+            <div className="bg-white dark:bg-[#0D1117] rounded-xl p-6 shadow-sm hover:shadow-lg transition-all duration-300 border border-[#B0B1B3]/20 dark:border-[#616368]/30 h-full">
+              {isLoading ? (
+                <CardSkeleton lines={4} />
+              ) : (
+                <>
+                  <div className="flex items-center justify-between mb-3">
+                    <div className="bg-[#157DE5]/10 rounded-lg p-2">
+                      <ClockIcon className="h-5 w-5 text-[#157DE5]" />
+                    </div>
+                  </div>
+                  <p className="text-[#616368] dark:text-[#B0B1B3] text-xs font-semibold mb-2 uppercase tracking-wider">Reservations</p>
+                  <p className="text-4xl font-black text-[#0D1117] dark:text-white mb-1">{myReservations}</p>
+                  <p className="text-xs text-[#616368] dark:text-[#B0B1B3]">through Engine</p>
+                </>
+              )}
+            </div>
+          </div>
+
+          {/* Invoices */}
+          <div
+            onClick={() => !isLoading && setIsInvoicesModalOpen(true)}
+            className={isLoading ? "" : "cursor-pointer"}
+          >
+            <div className="bg-white dark:bg-[#0D1117] rounded-xl p-6 shadow-sm hover:shadow-lg transition-all duration-300 border border-[#B0B1B3]/20 dark:border-[#616368]/30 h-full">
+              {isLoading ? (
+                <CardSkeleton lines={4} />
+              ) : (
+                <>
+                  <div className="flex items-center justify-between mb-3">
+                    <div className="bg-[#FD4B23]/10 rounded-lg p-2">
+                      <ShieldCheckIcon className="h-5 w-5 text-[#FD4B23]" />
+                    </div>
+                  </div>
+                  <p className="text-[#616368] dark:text-[#B0B1B3] text-xs font-semibold mb-2 uppercase tracking-wider">Invoices</p>
+                  <p className="text-4xl font-black text-[#0D1117] dark:text-white mb-1">{myPendingInvoices}</p>
+                  <p className="text-xs text-[#616368] dark:text-[#B0B1B3]">ready to pay</p>
+                </>
+              )}
+            </div>
+          </div>
+        </div>
+
+        {/* Property Leaderboard - NEW SECTION */}
+        {isLoading ? (
+          <div className="bg-gradient-to-br from-white via-[#F3F3F4] to-white dark:from-[#0D1117] dark:via-[#1a1f2e] dark:to-[#0D1117] rounded-2xl p-8 shadow-xl border border-[#B0B1B3]/20 dark:border-[#616368]/30">
+            <div className="mb-6">
+              <div className="h-9 w-96 bg-[#B0B1B3]/20 rounded animate-pulse mb-2"></div>
+              <div className="h-6 w-72 bg-[#B0B1B3]/20 rounded animate-pulse"></div>
+            </div>
+            <div className="space-y-4">
+              <CardSkeleton lines={4} />
+              <CardSkeleton lines={4} />
+              <CardSkeleton lines={4} />
+              <CardSkeleton lines={4} />
+            </div>
+          </div>
+        ) : (
+          <div className="bg-gradient-to-br from-white via-[#F3F3F4] to-white dark:from-[#0D1117] dark:via-[#1a1f2e] dark:to-[#0D1117] rounded-2xl p-8 shadow-xl border border-[#B0B1B3]/20 dark:border-[#616368]/30">
+            <div className="mb-6">
+              <h2 className="text-3xl font-black text-[#0D1117] dark:text-white tracking-tight mb-2">
+                Property Performance Leaderboard
+              </h2>
+              <p className="text-lg text-[#616368] dark:text-[#B0B1B3]">
+                Your 4 properties ranked by total revenue (last 6 months)
+              </p>
+            </div>
+
+            <div className="space-y-4">
+              {propertyLeaderboard.map((property, idx) => {
+                // Determine icon and color based on rank
+                let RankIcon = StarIcon;
+                let iconColor = "text-[#B0B1B3]";
+                let bgColor = "bg-[#B0B1B3]/10";
+
+                if (idx === 0) {
+                  RankIcon = TrophyIcon;
+                  iconColor = "text-[#FFB200]";
+                  bgColor = "bg-[#FFB200]/10";
+                } else if (idx === 1) {
+                  RankIcon = StarIcon;
+                  iconColor = "text-[#90A4AE]";
+                  bgColor = "bg-[#90A4AE]/10";
+                } else if (idx === 2) {
+                  RankIcon = StarIcon;
+                  iconColor = "text-[#CD7F32]";
+                  bgColor = "bg-[#CD7F32]/10";
+                } else {
+                  RankIcon = RocketLaunchIcon;
+                  iconColor = "text-[#7DCBD9]";
+                  bgColor = "bg-[#7DCBD9]/10";
+                }
+
+                return (
+                  <div
+                    key={idx}
+                    className="group bg-white dark:bg-[#0D1117] rounded-xl p-6 border-2 border-[#B0B1B3]/20 dark:border-[#616368]/30 hover:border-[#1E9D6D] hover:shadow-lg transition-all duration-300"
+                  >
+                    <div className="flex items-center justify-between gap-6">
+                      <div className="flex items-center gap-4 flex-1">
+                        {/* Rank Icon */}
+                        <div className={`flex-shrink-0 ${bgColor} rounded-xl p-3`}>
+                          <RankIcon className={`h-8 w-8 ${iconColor}`} />
+                        </div>
+
+                        {/* Property info */}
+                        <div className="flex-1">
+                          <div className="flex items-center gap-3 mb-2">
+                            <h3 className="text-xl font-bold text-[#0D1117] dark:text-white">
+                              {property.name}
+                            </h3>
+                            <span className="inline-flex items-center rounded-full px-3 py-1 text-xs font-bold bg-[#1E9D6D]/20 text-[#1E9D6D] border border-[#1E9D6D]/30">
+                              +{property.growth}% growth
+                            </span>
+                          </div>
+                          <p className="text-sm text-[#616368] dark:text-[#B0B1B3] mb-1">
+                            {property.insight}
+                          </p>
+                          <div className="flex items-center gap-6 text-sm">
+                            <span className="text-[#616368] dark:text-[#B0B1B3]">
+                              Total: <strong className="text-[#0D1117] dark:text-white">${property.revenue.toLocaleString()}</strong>
+                            </span>
+                            <span className="text-[#616368] dark:text-[#B0B1B3]">
+                              Latest: <strong className="text-[#0D1117] dark:text-white">${property.latestRevenue.toLocaleString()}</strong>
+                            </span>
+                          </div>
+                        </div>
+
+                        {/* Growth indicator */}
+                        <div className="text-right flex-shrink-0">
+                          <p className="text-4xl font-black text-[#1E9D6D] mb-1">
+                            {property.growth}%
+                          </p>
+                          <p className="text-xs text-[#616368] dark:text-[#B0B1B3] uppercase tracking-wider">
+                            Growth
+                          </p>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                );
+              })}
+            </div>
+
+            {/* Summary insight */}
+            <div className="mt-6 bg-[#157DE5]/10 border-l-4 border-[#157DE5] rounded-r-lg p-5">
+              <div className="flex items-start gap-3">
+                <div className="flex-shrink-0">
+                  <LightBulbIcon className="h-5 w-5 text-[#157DE5]" />
+                </div>
+                <p className="text-base text-[#0D1117] dark:text-white font-medium">
+                  <strong>Key Insight:</strong> Austin is driving 41% of bookings through Engine and growing 60%.
+                  SF Bay doubled in 6 months (100% growth) — strong performance across your portfolio.
+                </p>
+              </div>
+            </div>
+          </div>
+        )}
+
+        {/* Penalty Calculation Issue Card */}
+        {!isLoading && myPenalties.filter((p: any) => p.isHero).length > 0 && (
+          <div className="bg-white dark:bg-[#0D1117] border-2 border-[#FFB200]/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-[#FFB200]/10 rounded-xl p-3">
+                  <ExclamationTriangleIcon className="h-8 w-8 text-[#FFB200]" />
+                </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-[#0D1117] dark:text-white mb-1">
+                      Penalty Calculation Issue
+                    </h3>
+                    <p className="text-sm text-[#616368] dark:text-[#B0B1B3]">
+                      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-[#FFB200] 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-[#F3F3F4] dark:bg-[#616368]/10 rounded-xl p-5 border border-[#B0B1B3]/20 dark:border-[#616368]/30">
+                <p className="text-xs font-semibold text-[#616368] dark:text-[#B0B1B3] mb-2 uppercase tracking-wider">Current Penalty</p>
+                <p className="text-3xl font-black text-[#0D1117] dark:text-white mb-1">$9,000</p>
+                <p className="text-xs text-[#616368] dark:text-[#B0B1B3]">You owe Engine</p>
+              </div>
+              <div className="bg-[#1E9D6D]/5 dark:bg-[#1E9D6D]/10 rounded-xl p-5 border border-[#1E9D6D]/30">
+                <p className="text-xs font-semibold text-[#1E9D6D] mb-2 uppercase tracking-wider">Resale Credit Missing</p>
+                <p className="text-3xl font-black text-[#1E9D6D] mb-1">-$2,400</p>
+                <p className="text-xs text-[#616368] dark:text-[#B0B1B3]">Should reduce penalty</p>
+              </div>
+              <div className="bg-[#7DCBD9]/5 dark:bg-[#7DCBD9]/10 rounded-xl p-5 border border-[#7DCBD9]/30">
+                <p className="text-xs font-semibold text-[#616368] dark:text-[#B0B1B3] mb-2 uppercase tracking-wider">Corrected Amount</p>
+                <p className="text-3xl font-black text-[#7DCBD9] mb-1">$6,600</p>
+                <p className="text-xs text-[#616368] dark:text-[#B0B1B3]">What you should owe</p>
+              </div>
+            </div>
+
+            <div className="bg-[#FFB200]/10 border-l-4 border-[#FFB200] rounded-r-lg p-4 mb-6">
+              <p className="text-sm text-[#0D1117] 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-[#1E9D6D]">$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-[#0D1117] dark:bg-white hover:bg-[#616368] dark:hover:bg-[#F3F3F4] text-white dark:text-[#0D1117] 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 - Conversational with Better Spacing */}
+        <div className="pt-8 space-y-2">
+          <h2 className="text-3xl font-bold text-[#0D1117] dark:text-white tracking-tight">
+            Recent activity
+          </h2>
+          <p className="text-lg text-[#616368] dark:text-[#B0B1B3]">
+            Here's what's been happening with your properties
+          </p>
+        </div>
+
+        {/* Hero penalty section removed - now at top of page */}
+
+        {/* Action Items Grid */}
+        {isLoading ? (
+          <div className="grid grid-cols-1 md:grid-cols-2 gap-5">
+            <CardSkeleton lines={4} />
+            <CardSkeleton lines={4} />
+          </div>
+        ) : myDisputes.length > 0 ? (
+          <div className="space-y-5">
+            <h3 className="text-xl font-bold text-[#0D1117] dark:text-white">
+              Items that need your attention
+            </h3>
+            <div className="grid grid-cols-1 md:grid-cols-2 gap-5">
+              {myDisputes.map((d) => (
+                <div
+                  key={d.id}
+                  onClick={() => {
+                    toast.info(`Opening ${d.title}`);
+                    setSelectedDispute(d);
+                  }}
+                  className="group bg-white dark:bg-[#0D1117] border border-[#B0B1B3]/20 dark:border-[#616368]/30 rounded-xl p-6 hover:border-[#7DCBD9] dark:hover:border-[#7DCBD9] 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-[#0D1117] 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-[#FD4B23]/10 text-[#FD4B23] border border-[#FD4B23]/30"
+                          : d.status === "warning"
+                          ? "bg-[#FFB200]/10 text-[#FFB200] border border-[#FFB200]/30"
+                          : "bg-[#157DE5]/10 text-[#157DE5] border border-[#157DE5]/30"
+                      }`}
+                    >
+                      {d.badge}
+                    </span>
+                  </div>
+                  <p className="text-sm text-[#616368] dark:text-[#B0B1B3] mb-4">
+                    {d.description}
+                  </p>
+                  <div className="flex items-center justify-between">
+                    <span className="text-lg font-bold text-[#0D1117] dark:text-white">
+                      ${d.amount.toLocaleString()}
+                    </span>
+                    {d.agentHandled && (
+                      <span className="text-xs text-[#7DCBD9] flex items-center gap-1">
+                        <svg className="h-3 w-3" fill="currentColor" viewBox="0 0 20 20">
+                          <path fillRule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clipRule="evenodd" />
+                        </svg>
+                        Agent reviewed
+                      </span>
+                    )}
+                  </div>
+                </div>
+              ))}
+            </div>
+          </div>
+        ) : null}
+
+        {/* All Penalties - Enhanced Table */}
+        {isLoading ? (
+          <CardSkeleton lines={8} />
+        ) : (
+          <div className="bg-white dark:bg-[#0D1117] border border-[#B0B1B3]/20 dark:border-[#616368]/30 rounded-xl overflow-hidden shadow-sm hover:shadow-lg transition-shadow duration-300">
+            <div className="p-8 border-b border-[#B0B1B3]/20 dark:border-[#616368]/30">
+              <h3 className="text-2xl font-bold text-[#0D1117] dark:text-white mb-2">
+                All attrition penalties
+              </h3>
+              <p className="text-base text-[#616368] dark:text-[#B0B1B3]">
+                {myPenalties.length} {myPenalties.length === 1 ? 'penalty' : 'penalties'} · Showing recent calculations and adjustments
+              </p>
+            </div>
+            <div className="overflow-x-auto">
+            <table className="w-full">
+              <thead className="bg-[#F3F3F4] dark:bg-[#616368]/10 border-b border-[#B0B1B3]/20 dark:border-[#616368]/30">
+                <tr>
+                  <th className="px-6 py-3 text-left text-xs font-semibold text-[#616368] dark:text-[#B0B1B3] uppercase tracking-wider">
+                    Penalty ID
+                  </th>
+                  <th className="px-6 py-3 text-left text-xs font-semibold text-[#616368] dark:text-[#B0B1B3] uppercase tracking-wider">
+                    Property
+                  </th>
+                  <th className="px-6 py-3 text-left text-xs font-semibold text-[#616368] dark:text-[#B0B1B3] uppercase tracking-wider">
+                    Customer
+                  </th>
+                  <th className="px-6 py-3 text-left text-xs font-semibold text-[#616368] dark:text-[#B0B1B3] uppercase tracking-wider">
+                    Method
+                  </th>
+                  <th className="px-6 py-3 text-right text-xs font-semibold text-[#616368] dark:text-[#B0B1B3] uppercase tracking-wider">
+                    Penalty
+                  </th>
+                  <th className="px-6 py-3 text-right text-xs font-semibold text-[#616368] dark:text-[#B0B1B3] uppercase tracking-wider">
+                    Credit
+                  </th>
+                  <th className="px-6 py-3 text-center text-xs font-semibold text-[#616368] dark:text-[#B0B1B3] uppercase tracking-wider">
+                    Status
+                  </th>
+                </tr>
+              </thead>
+              <tbody className="divide-y divide-[#B0B1B3]/20 dark:divide-[#616368]/30">
+                {myPenalties.map((penalty) => (
+                  <tr
+                    key={penalty.id}
+                    onClick={() => {
+                      setSelectedPenalty(penalty);
+                      setIsPenaltyModalOpen(true);
+                    }}
+                    className={`hover:bg-[#F3F3F4]/50 dark:hover:bg-[#616368]/5 transition-colors cursor-pointer ${
+                      penalty.isHero ? "bg-[#FFB200]/5" : ""
+                    }`}
+                  >
+                    <td className="px-6 py-4 whitespace-nowrap">
+                      <div className="flex items-center gap-2">
+                        <span className="text-sm font-medium text-[#0D1117] dark:text-white">
+                          {penalty.name}
+                        </span>
+                        {penalty.isHero && (
+                          <span className="inline-flex items-center rounded-full px-2 py-0.5 text-xs font-medium bg-[#FFB200]/20 text-[#FFB200] border border-[#FFB200]/30">
+                            Review
+                          </span>
+                        )}
+                      </div>
+                    </td>
+                    <td className="px-6 py-4 text-sm text-[#616368] dark:text-[#B0B1B3]">
+                      {penalty.property}
+                    </td>
+                    <td className="px-6 py-4 text-sm text-[#616368] dark:text-[#B0B1B3]">
+                      {penalty.customer}
+                    </td>
+                    <td className="px-6 py-4 text-sm text-[#616368] dark:text-[#B0B1B3]">
+                      {penalty.method}
+                    </td>
+                    <td className="px-6 py-4 text-sm font-semibold text-right text-[#0D1117] dark:text-white">
+                      ${penalty.penalty.toLocaleString()}
+                    </td>
+                    <td className="px-6 py-4 text-sm font-semibold text-right text-[#1E9D6D]">
+                      ${penalty.credit.toLocaleString()}
+                    </td>
+                    <td className="px-6 py-4 text-center">
+                      <span
+                        className={`inline-flex items-center rounded-full px-2.5 py-1 text-xs font-medium ${
+                          penalty.status === "Approved"
+                            ? "bg-[#1E9D6D]/10 text-[#1E9D6D] border border-[#1E9D6D]/30"
+                            : penalty.status === "Reviewed"
+                            ? "bg-[#157DE5]/10 text-[#157DE5] border border-[#157DE5]/30"
+                            : penalty.status === "Calculated"
+                            ? "bg-[#B0B1B3]/10 text-[#616368] border border-[#B0B1B3]/30"
+                            : "bg-[#FD4B23]/10 text-[#FD4B23] border border-[#FD4B23]/30"
+                        }`}
+                      >
+                        {penalty.status}
+                      </span>
+                    </td>
+                  </tr>
+                ))}
+              </tbody>
+            </table>
+          </div>
+        </div>
+        )}
+
+        {/* Section */}
+        <div className="pt-8 space-y-2">
+          <h2 className="text-3xl font-bold text-[#0D1117] dark:text-white tracking-tight">
+            Billing & contract details
+          </h2>
+          <p className="text-lg text-[#616368] dark:text-[#B0B1B3]">
+            Keep track of invoices and your partnership terms
+          </p>
+        </div>
+
+        {/* Revenue Trend by Property */}
+        {isLoading ? (
+          <CardSkeleton lines={6} />
+        ) : (
+        <div className="bg-white dark:bg-[#0D1117] border border-[#B0B1B3]/20 dark:border-[#616368]/30 rounded-xl shadow-sm hover:shadow-lg transition-shadow duration-300 overflow-hidden">
+          <div className="p-8 border-b border-[#B0B1B3]/20 dark:border-[#616368]/30">
+            <div className="flex items-start justify-between gap-4">
+              <div>
+                <h3 className="text-2xl font-bold text-[#0D1117] dark:text-white mb-1">
+                  Revenue trend by property
+                </h3>
+                <p className="text-base text-[#616368] dark:text-[#B0B1B3]">
+                  Monthly revenue earned through Engine across your {revenueTrendByProperty.properties?.length || 4} properties
+                </p>
+              </div>
+            </div>
+            {/* Legend */}
+            <div className="flex flex-wrap gap-4 mt-5">
+              {revenueTrendByProperty.properties.map((prop) => (
+                <div key={prop.name} className="flex items-center gap-2">
+                  <span
+                    className="inline-block h-2.5 w-2.5 rounded-full flex-shrink-0"
+                    style={{ backgroundColor: prop.color }}
+                  />
+                  <span className="text-xs font-medium text-[#616368] dark:text-[#B0B1B3]">
+                    {prop.name}
+                  </span>
+                </div>
+              ))}
+            </div>
+          </div>
+          <div className="p-6 w-full">
+            {revenueTrendByProperty && revenueTrendByProperty.months && revenueTrendByProperty.properties ? (
+              <div className="w-full" style={{ minHeight: '260px' }}>
+                <D3Chart
+                  data={revenueTrendByProperty}
+                  renderChart={renderRevenueTrendByProperty}
+                  height={260}
+                  responsive={true}
+                  ariaLabel="Revenue trend by property"
+                />
+              </div>
+            ) : (
+              <div className="h-[260px] flex items-center justify-center text-[#616368] dark:text-[#B0B1B3]">
+                Loading chart data...
+              </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-[#0D1117] border border-[#B0B1B3]/20 dark:border-[#616368]/30 rounded-xl shadow-sm hover:shadow-lg transition-shadow duration-300 overflow-hidden">
+              <div className="p-6 border-b border-[#B0B1B3]/20 dark:border-[#616368]/30">
+                <h3 className="text-xl font-bold text-[#0D1117] dark:text-white mb-1">
+                  Your Contract
+                </h3>
+                <p className="text-sm text-[#616368] dark:text-[#B0B1B3]">
+                  Partnership terms
+                </p>
+              </div>
+              <div className="p-6 space-y-4">
+                <div className="flex items-center justify-between pb-4 border-b border-[#B0B1B3]/20 dark:border-[#616368]/30">
+                  <div>
+                    <p className="text-xs text-[#616368] dark:text-[#B0B1B3] mb-1 uppercase tracking-wider">Contract ID</p>
+                    <p className="text-lg font-bold text-[#0D1117] dark:text-white">CNTR-00002</p>
+                  </div>
+                  <span className="inline-flex items-center rounded-full px-3 py-1 text-xs font-medium bg-[#1E9D6D]/10 text-[#1E9D6D] border border-[#1E9D6D]/30">
+                    Active
+                  </span>
+                </div>
+
+                <div className="grid grid-cols-2 gap-4">
+                  <div>
+                    <p className="text-xs text-[#616368] dark:text-[#B0B1B3] mb-1 uppercase tracking-wider">Commission Rate</p>
+                    <p className="text-2xl font-bold text-[#1E9D6D]">17%</p>
+                  </div>
+                  <div>
+                    <p className="text-xs text-[#616368] dark:text-[#B0B1B3] mb-1 uppercase tracking-wider">Contract Term</p>
+                    <p className="text-sm font-semibold text-[#0D1117] dark:text-white">Mar 2025 - Feb 2027</p>
+                  </div>
+                </div>
+
+                <div className="bg-[#F3F3F4] dark:bg-[#616368]/10 rounded-lg p-4 space-y-3">
+                  <div>
+                    <p className="text-xs text-[#616368] dark:text-[#B0B1B3] mb-1 uppercase tracking-wider">Attrition Method</p>
+                    <p className="text-sm font-semibold text-[#0D1117] dark:text-white">Per Night (80% threshold)</p>
+                  </div>
+                  <div>
+                    <p className="text-xs text-[#616368] dark:text-[#B0B1B3] mb-1 uppercase tracking-wider">Resale Credit Policy</p>
+                    <p className="text-sm font-semibold text-[#0D1117] 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-[#F3F3F4] dark:bg-[#616368]/20 hover:bg-[#7DCBD9]/10 dark:hover:bg-[#7DCBD9]/10 text-[#0D1117] dark:text-white font-semibold rounded-lg border border-[#B0B1B3]/30 dark:border-[#616368]/50 hover:border-[#7DCBD9] transition-colors text-sm"
+                  >
+                    <DocumentArrowDownIcon className="h-4 w-4" />
+                    Download Full Contract
+                  </button>
+                </div>
+              </div>
+            </div>
+          </div>
+        )}
+
+        {/* Section */}
+        <div className="pt-8 space-y-2">
+          <h2 className="text-3xl font-bold text-[#0D1117] dark:text-white tracking-tight">
+            What's been happening
+          </h2>
+          <p className="text-lg text-[#616368] dark:text-[#B0B1B3]">
+            A quick timeline of recent updates
+          </p>
+        </div>
+
+        {/* Activity Feed */}
+        {isLoading ? (
+          <CardSkeleton lines={6} />
+        ) : (
+          <ActivityCard
+            title="Recent updates"
+            actions={myActivity.map((a) => ({
+              id: a.id,
+              status:
+                a.status === "alert"
+                  ? "error"
+                  : a.status === "warning"
+                  ? "pending"
+                  : a.status === "success"
+                  ? "complete"
+                  : "working",
+              title: a.title,
+              subtitle: a.description,
+              timestamp: a.timestamp,
+            }))}
+          />
+        )}
+
+        {/* Help Section - Enhanced */}
+        <div className="bg-gradient-to-br from-white to-[#F3F3F4] dark:from-[#0D1117] dark:to-[#1a1f2e] rounded-2xl p-12 border border-[#B0B1B3]/20 dark:border-[#616368]/30 shadow-lg">
+          <div className="text-center max-w-2xl mx-auto space-y-6">
+            <h3 className="text-3xl font-bold text-[#0D1117] dark:text-white tracking-tight">
+              Questions? We're here to help
+            </h3>
+            <p className="text-[#616368] dark:text-[#B0B1B3] text-xl leading-relaxed">
+              Our partner team is standing by if you need anything — from billing questions to contract details.
+            </p>
+            <div className="flex gap-4 justify-center flex-wrap pt-2">
+              <Modal>
+                <button className="group px-8 py-4 bg-[#0D1117] dark:bg-white hover:bg-[#616368] dark:hover:bg-[#F3F3F4] text-white dark:text-[#0D1117] 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-[#0D1117] dark:text-white">
+                          Contact Support
+                        </Modal.Heading>
+                      </Modal.Header>
+                      <Modal.Body className="space-y-6">
+                        <p className="text-[#616368] dark:text-[#B0B1B3]">
+                          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-[#F3F3F4] dark:bg-[#616368]/10 rounded-xl p-6 hover:border hover:border-[#7DCBD9] transition-colors cursor-pointer">
+                            <div className="flex items-start gap-4">
+                              <div className="bg-[#7DCBD9]/20 rounded-lg p-3">
+                                <svg className="h-6 w-6 text-[#7DCBD9]" 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-[#0D1117] dark:text-white mb-1">Email Support</h4>
+                                <p className="text-sm text-[#616368] dark:text-[#B0B1B3] 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-[#7DCBD9] hover:underline">
+                                  partners@engine.com
+                                </a>
+                              </div>
+                            </div>
+                          </div>
+
+                          <div className="bg-[#F3F3F4] dark:bg-[#616368]/10 rounded-xl p-6 hover:border hover:border-[#7DCBD9] transition-colors cursor-pointer">
+                            <div className="flex items-start gap-4">
+                              <div className="bg-[#1E9D6D]/20 rounded-lg p-3">
+                                <svg className="h-6 w-6 text-[#1E9D6D]" 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-[#0D1117] dark:text-white mb-1">Phone Support</h4>
+                                <p className="text-sm text-[#616368] dark:text-[#B0B1B3] mb-2">
+                                  Speak with a partner specialist directly
+                                </p>
+                                <a href="tel:+18005551234" className="text-sm font-medium text-[#1E9D6D] hover:underline">
+                                  1-800-555-1234
+                                </a>
+                                <p className="text-xs text-[#616368] dark:text-[#B0B1B3] 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-[#0D1117] dark:bg-white hover:bg-[#616368] dark:hover:bg-[#F3F3F4] text-white dark:text-[#0D1117] 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-[#F3F3F4] dark:hover:bg-[#616368]/20 text-[#0D1117] dark:text-white font-semibold rounded-xl border-2 border-[#B0B1B3]/30 dark:border-[#616368]/50 hover:border-[#7DCBD9] transition-colors duration-200"
+              >
+                Browse help docs
+              </button>
+            </div>
+          </div>
+        </div>
+
+        {/* Footer */}
+        <div className="text-center py-8 text-sm text-[#B0B1B3]">
+          <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-[#0D1117] dark:text-white">
+                  Your Properties
+                </Modal.Heading>
+              </Modal.Header>
+              <Modal.Body className="space-y-4">
+                <p className="text-[#616368] dark:text-[#B0B1B3] mb-4">
+                  {myProperties} active properties in your portfolio
+                </p>
+                <div className="space-y-3">
+                  {revenueTrendByProperty.properties?.map((prop, idx) => (
+                    <div
+                      key={idx}
+                      className="bg-[#F3F3F4] dark:bg-[#616368]/10 rounded-xl p-5 border border-[#B0B1B3]/20 dark:border-[#616368]/30 hover:border-[#7DCBD9] 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-[#7DCBD9]" />
+                          </div>
+                          <div>
+                            <h4 className="font-semibold text-[#0D1117] dark:text-white mb-1">
+                              {prop.name}
+                            </h4>
+                            <p className="text-sm text-[#616368] dark:text-[#B0B1B3]">
+                              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-[#0D1117] dark:bg-white hover:bg-[#616368] dark:hover:bg-[#F3F3F4] text-white dark:text-[#0D1117] 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-[#0D1117] dark:text-white">
+                  Revenue Breakdown
+                </Modal.Heading>
+              </Modal.Header>
+              <Modal.Body className="space-y-4">
+                <div className="bg-gradient-to-br from-[#1E9D6D]/10 to-[#7DCBD9]/10 rounded-xl p-6 mb-4">
+                  <p className="text-sm text-[#616368] dark:text-[#B0B1B3] mb-2">Total Revenue</p>
+                  <p className="text-4xl font-bold text-[#0D1117] dark:text-white">
+                    ${myRevenue.toLocaleString()}
+                  </p>
+                </div>
+                <h3 className="font-semibold text-[#0D1117] 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-[#F3F3F4] dark:bg-[#616368]/10 rounded-xl p-5 border border-[#B0B1B3]/20 dark:border-[#616368]/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-[#0D1117] dark:text-white">
+                              {prop.name}
+                            </span>
+                          </div>
+                          <span className="text-lg font-bold text-[#0D1117] dark:text-white">
+                            ${totalRevenue.toLocaleString()}
+                          </span>
+                        </div>
+                        <div className="flex items-center gap-3">
+                          <div className="flex-1 bg-[#B0B1B3]/20 rounded-full h-2">
+                            <div
+                              className="h-2 rounded-full"
+                              style={{
+                                width: `${percentage}%`,
+                                backgroundColor: prop.color,
+                              }}
+                            />
+                          </div>
+                          <span className="text-sm text-[#616368] dark:text-[#B0B1B3] w-12 text-right">
+                            {percentage}%
+                          </span>
+                        </div>
+                      </div>
+                    );
+                  })}
+                </div>
+              </Modal.Body>
+              <Modal.Footer>
+                <button
+                  onClick={() => setIsRevenueModalOpen(false)}
+                  className="px-6 py-2 bg-[#0D1117] dark:bg-white hover:bg-[#616368] dark:hover:bg-[#F3F3F4] text-white dark:text-[#0D1117] 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-[#0D1117] dark:text-white">
+                  Reservations
+                </Modal.Heading>
+              </Modal.Header>
+              <Modal.Body>
+                <p className="text-[#616368] dark:text-[#B0B1B3] mb-4">
+                  {myReservations} total reservations through Engine
+                </p>
+                <div className="bg-[#F3F3F4] dark:bg-[#616368]/10 rounded-xl p-8 text-center">
+                  <ClockIcon className="h-12 w-12 text-[#157DE5] mx-auto mb-3" />
+                  <p className="text-[#616368] dark:text-[#B0B1B3]">
+                    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-[#0D1117] dark:bg-white hover:bg-[#616368] dark:hover:bg-[#F3F3F4] text-white dark:text-[#0D1117] 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-[#0D1117] dark:text-white">
+                  Items to Review
+                </Modal.Heading>
+              </Modal.Header>
+              <Modal.Body className="space-y-4">
+                <p className="text-[#616368] dark:text-[#B0B1B3] 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-[#F3F3F4] dark:bg-[#616368]/10 rounded-xl p-5 border border-[#B0B1B3]/20 dark:border-[#616368]/30 hover:border-[#FFB200] transition-colors"
+                      >
+                        <div className="flex items-start justify-between gap-3 mb-2">
+                          <h4 className="font-semibold text-[#0D1117] 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-[#FD4B23]/10 text-[#FD4B23] border border-[#FD4B23]/30"
+                                : d.status === "warning"
+                                ? "bg-[#FFB200]/10 text-[#FFB200] border border-[#FFB200]/30"
+                                : "bg-[#157DE5]/10 text-[#157DE5] border border-[#157DE5]/30"
+                            }`}
+                          >
+                            {d.badge}
+                          </span>
+                        </div>
+                        <p className="text-sm text-[#616368] dark:text-[#B0B1B3] mb-3">
+                          {d.description}
+                        </p>
+                        <div className="flex items-center justify-between">
+                          <span className="text-lg font-bold text-[#0D1117] dark:text-white">
+                            ${d.amount.toLocaleString()}
+                          </span>
+                          {d.agentHandled && (
+                            <span className="text-xs text-[#7DCBD9] 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-[#F3F3F4] dark:bg-[#616368]/10 rounded-xl p-8 text-center">
+                    <p className="text-[#616368] dark:text-[#B0B1B3]">No items need attention</p>
+                  </div>
+                )}
+              </Modal.Body>
+              <Modal.Footer>
+                <button
+                  onClick={() => setIsDisputesModalOpen(false)}
+                  className="px-6 py-2 bg-[#0D1117] dark:bg-white hover:bg-[#616368] dark:hover:bg-[#F3F3F4] text-white dark:text-[#0D1117] 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-[#0D1117] 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-[#616368] dark:text-[#B0B1B3] mb-1">Property</p>
+                        <p className="font-semibold text-[#0D1117] dark:text-white">{selectedPenalty.property}</p>
+                      </div>
+                      <div>
+                        <p className="text-sm text-[#616368] dark:text-[#B0B1B3] mb-1">Customer</p>
+                        <p className="font-semibold text-[#0D1117] dark:text-white">{selectedPenalty.customer}</p>
+                      </div>
+                    </div>
+
+                    {/* Booking Details */}
+                    <div className="bg-[#F3F3F4] dark:bg-[#616368]/10 rounded-xl p-6">
+                      <h4 className="font-semibold text-[#0D1117] dark:text-white mb-4">Booking Details</h4>
+                      <div className="grid grid-cols-3 gap-6">
+                        <div>
+                          <p className="text-xs text-[#616368] dark:text-[#B0B1B3] mb-2 uppercase tracking-wider">Original Block</p>
+                          <p className="text-xl font-bold text-[#0D1117] dark:text-white">{selectedPenalty.originalRoomBlock} rooms</p>
+                        </div>
+                        <div>
+                          <p className="text-xs text-[#616368] dark:text-[#B0B1B3] mb-2 uppercase tracking-wider">Rooms Used</p>
+                          <p className="text-xl font-bold text-[#1E9D6D]">{selectedPenalty.actualRoomsUsed} rooms</p>
+                        </div>
+                        <div>
+                          <p className="text-xs text-[#616368] dark:text-[#B0B1B3] mb-2 uppercase tracking-wider">Unused</p>
+                          <p className="text-xl font-bold text-[#FD4B23]">{selectedPenalty.unusedRooms} rooms</p>
+                        </div>
+                      </div>
+                      <div className="grid grid-cols-3 gap-6 mt-6 pt-6 border-t border-[#B0B1B3]/20 dark:border-[#616368]/30">
+                        <div>
+                          <p className="text-xs text-[#616368] dark:text-[#B0B1B3] mb-2 uppercase tracking-wider">Room Rate</p>
+                          <p className="text-xl font-bold text-[#0D1117] dark:text-white">${selectedPenalty.roomRate}/night</p>
+                        </div>
+                        <div>
+                          <p className="text-xs text-[#616368] dark:text-[#B0B1B3] mb-2 uppercase tracking-wider">Number of Nights</p>
+                          <p className="text-xl font-bold text-[#0D1117] dark:text-white">{selectedPenalty.numberOfNights}</p>
+                        </div>
+                        <div>
+                          <p className="text-xs text-[#616368] dark:text-[#B0B1B3] mb-2 uppercase tracking-wider">Rooms Resold</p>
+                          <p className="text-xl font-bold text-[#7DCBD9]">{selectedPenalty.roomsResold} rooms</p>
+                        </div>
+                      </div>
+                    </div>
+
+                    {/* Calculation Method & Policy */}
+                    <div className="grid grid-cols-2 gap-6">
+                      <div>
+                        <p className="text-sm text-[#616368] dark:text-[#B0B1B3] mb-2">Calculation Method</p>
+                        <p className="text-lg font-semibold text-[#0D1117] dark:text-white">{selectedPenalty.method}</p>
+                      </div>
+                      <div>
+                        <p className="text-sm text-[#616368] dark:text-[#B0B1B3] mb-2">Resale Policy</p>
+                        <p className="text-lg font-semibold text-[#0D1117] dark:text-white">{selectedPenalty.resalePolicy}</p>
+                      </div>
+                    </div>
+
+                    {/* Financial Details */}
+                    <div>
+                      <h4 className="font-semibold text-[#0D1117] dark:text-white mb-4">Financial Summary</h4>
+                      <div className="grid grid-cols-3 gap-6">
+                        <div className="bg-[#F3F3F4] dark:bg-[#616368]/10 rounded-lg p-5">
+                          <p className="text-xs text-[#616368] dark:text-[#B0B1B3] mb-2 uppercase tracking-wider">Calculated Penalty</p>
+                          <p className="text-2xl font-bold text-[#0D1117] dark:text-white">${selectedPenalty.penaltyCalculated.toLocaleString()}</p>
+                        </div>
+                        <div className="bg-[#F3F3F4] dark:bg-[#616368]/10 rounded-lg p-5">
+                          <p className="text-xs text-[#616368] dark:text-[#B0B1B3] mb-2 uppercase tracking-wider">Credit Applied</p>
+                          <p className="text-2xl font-bold text-[#1E9D6D]">${selectedPenalty.credit.toLocaleString()}</p>
+                        </div>
+                        <div className={`rounded-lg p-5 border ${selectedPenalty.isHero ? 'bg-[#FFB200]/10 border-[#FFB200]/30' : 'bg-[#F3F3F4] dark:bg-[#616368]/10 border-transparent'}`}>
+                          <p className="text-xs text-[#616368] dark:text-[#B0B1B3] mb-2 uppercase tracking-wider">Final Penalty</p>
+                          <p className={`text-2xl font-bold ${selectedPenalty.isHero ? 'text-[#FFB200]' : 'text-[#0D1117] dark:text-white'}`}>${selectedPenalty.penalty.toLocaleString()}</p>
+                        </div>
+                      </div>
+                    </div>
+
+                    {/* Issue Description */}
+                    {selectedPenalty.isHero && (
+                      <div className="bg-[#FFB200]/10 border-l-4 border-[#FFB200] rounded-lg p-5">
+                        <p className="font-semibold text-[#0D1117] dark:text-white mb-3 flex items-center gap-2">
+                          <ExclamationTriangleIcon className="h-5 w-5 text-[#FFB200]" />
+                          Why this needs review:
+                        </p>
+                        <p className="text-sm text-[#616368] dark:text-[#B0B1B3] 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-[#616368] dark:text-[#B0B1B3] mb-2">Status</p>
+                      <span
+                        className={`inline-flex items-center rounded-full px-3 py-1 text-sm font-medium ${
+                          selectedPenalty.status === "Approved"
+                            ? "bg-[#1E9D6D]/10 text-[#1E9D6D] border border-[#1E9D6D]/30"
+                            : selectedPenalty.status === "Reviewed"
+                            ? "bg-[#157DE5]/10 text-[#157DE5] border border-[#157DE5]/30"
+                            : selectedPenalty.status === "Calculated"
+                            ? "bg-[#B0B1B3]/10 text-[#616368] border border-[#B0B1B3]/30"
+                            : "bg-[#FFB200]/10 text-[#FFB200] border border-[#FFB200]/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-[#F3F3F4] dark:hover:bg-[#616368]/20 text-[#0D1117] dark:text-white font-semibold rounded-lg border border-[#B0B1B3]/30 dark:border-[#616368]/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-[#0D1117] dark:bg-white hover:bg-[#616368] dark:hover:bg-[#F3F3F4] text-white dark:text-[#0D1117] 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-[#0D1117] dark:text-white">
+                  Your Invoices
+                </Modal.Heading>
+              </Modal.Header>
+              <Modal.Body className="space-y-4">
+                <p className="text-[#616368] dark:text-[#B0B1B3] 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-[#F3F3F4] dark:bg-[#616368]/10 rounded-xl p-5 border border-[#B0B1B3]/20 dark:border-[#616368]/30 hover:border-[#1E9D6D] transition-colors"
+                      >
+                        <div className="flex items-start justify-between gap-3 mb-2">
+                          <div>
+                            <h4 className="font-semibold text-[#0D1117] dark:text-white">
+                              {inv.title}
+                            </h4>
+                            <p className="text-sm text-[#616368] dark:text-[#B0B1B3] 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-[#FD4B23]/10 text-[#FD4B23] border border-[#FD4B23]/30"
+                                : "bg-[#157DE5]/10 text-[#157DE5] border border-[#157DE5]/30"
+                            }`}
+                          >
+                            {inv.badge}
+                          </span>
+                        </div>
+                        <div className="flex items-center justify-between mt-3">
+                          <span className="text-lg font-bold text-[#0D1117] dark:text-white">
+                            ${inv.amount.toLocaleString()}
+                          </span>
+                          <span className="text-sm text-[#616368] dark:text-[#B0B1B3]">
+                            Due {inv.due}
+                          </span>
+                        </div>
+                      </div>
+                    ))}
+                  </div>
+                ) : (
+                  <div className="bg-[#F3F3F4] dark:bg-[#616368]/10 rounded-xl p-8 text-center">
+                    <p className="text-[#616368] dark:text-[#B0B1B3]">No pending invoices</p>
+                  </div>
+                )}
+              </Modal.Body>
+              <Modal.Footer>
+                <button
+                  onClick={() => setIsInvoicesModalOpen(false)}
+                  className="px-6 py-2 bg-[#0D1117] dark:bg-white hover:bg-[#616368] dark:hover:bg-[#F3F3F4] text-white dark:text-[#0D1117] font-semibold rounded-lg transition-colors"
+                >
+                  Close
+                </button>
+              </Modal.Footer>
+            </Modal.Dialog>
+          </Modal.Container>
+        </Modal.Backdrop>
+      </Modal>
+    </div>
+  );
+}