typescriptinterface PropertyDataset { metadata: { generated_at: string; total_properties: number; data_month: string; version: string; }; summary: { total_meta: number; total_realizado: number; properties_above_target: number; properties_below_target: number; average_achievement: number; }; groups: Array<{ name: string; properties_count: number; total_meta: number; total_realizado: number; achievement_rate: number; }>; properties: Array<{ id: string; property_id: string; name: string; group: string; location: string; type: string; target_august: number; actual_august: number; achievement_percentage: number; deficit_amount: number; target_status: 'achieved' | 'below_target'; base_rate: number; available_nights: number; target_daily_rate: number; previous_values: number; suggested_discount: string; performance_level: 'excellent' | 'good' | 'warning' | 'critical'; priority_level: 'high' | 'medium' | 'low'; }>;}### Mock Data GuidelinesGenerate approximately 15-20 sample properties with:- Realistic Brazilian property names (e.g., "Pousada Vila das Flores", "Resort Praia Dourada")- Groups: "Qavi Group", "Interatlântico", "Coastal Properties", "Urban Collection"- Locations: "São Paulo", "Rio de Janeiro", "Natal", "Salvador", "Fortaleza"- Types: "Pousada", "Resort", "Hotel", "Apartamento"- Financial values in Brazilian Real (R$) format- Mixed performance levels to showcase all visual states## Apple Design System Specifications### Color Palette- Primary: #007AFF (System Blue)- Success: #34C759 (System Green) - Warning: #FF9500 (System Orange)- Error: #FF3B30 (System Red)- Secondary: #8E8E93 (System Gray)- Background: #F2F2F7 (System Gray 6)- Surface: #FFFFFF (System Background)- Text Primary: #000000 (Label)- Text Secondary: #3C3C43 (Secondary Label)### Typography Hierarchycss--font-large-title: -apple-system, 34px, 700--font-title-1: -apple-system, 28px, 700--font-title-2: -apple-system, 22px, 700--font-title-3: -apple-system, 20px, 600--font-headline: -apple-system, 17px, 600--font-body: -apple-system, 17px, 400--font-callout: -apple-system, 16px, 400--font-subheadline: -apple-system, 15px, 400--font-footnote: -apple-system, 13px, 400--font-caption-1: -apple-system, 12px, 400--font-caption-2: -apple-system, 11px, 400### Spacing Systemcss--spacing-xs: 4px--spacing-s: 8px--spacing-m: 16px--spacing-l: 24px--spacing-xl: 32px--spacing-xxl: 48px### Component Architecture#### 1. Header Navigation- Fixed header with blur background effect- Large title: "Property Analytics"- Search bar with SF Symbols icons- Filter pills with rounded corners- Export button (SF Symbol: square.and.arrow.up)#### 2. Summary Cards Grid- 2x2 grid on desktop, stack on mobile- Card structure: * Large number (--font-large-title) * Descriptive label (--font-callout) * Trend indicator with SF Symbols * Subtle background with border radius 12px * Drop shadow: 0 1px 3px rgba(0,0,0,0.1)#### 3. Main Data Table- Alternating row colors (#FFFFFF, #F9F9F9)- Header: sticky, --font-headline, medium weight- Row height: 52px minimum- Cell padding: 16px horizontal, 12px vertical- Status indicators: colored circles (8px diameter)- Hover state: background #F0F0F0- Selection state: background #E3F2FD#### 4. Chart Components- Chart container: white background, 16px border radius- Chart colors: use system color palette- Grid lines: #E5E5E7, 1px stroke- Axis labels: --font-caption-1, secondary text color- Tooltips: blur background, 8px border radius- Legend: --font-footnote, 8px spacing#### 5. Interactive Elements- Buttons: * Primary: system blue, white text, 10px border radius * Secondary: clear background, blue text, 1px border * Height: 44px minimum (touch target)- Toggle switches: native iOS style- Dropdown menus: 8px border radius, subtle shadow- Loading states: native activity indicators## Layout Structure### Desktop Layout (≥1024px)[Header - 64px height][Summary Cards - 4 columns, 120px height][Main Content - 70% table, 30% charts sidebar][Footer - 48px height]### Tablet Layout (768px - 1023px)[Header - 56px height][Summary Cards - 2x2 grid, 100px height][Table - full width][Charts - stacked below table][Footer - 44px height]### Mobile Layout (<768px)[Header - 44px height][Summary Cards - vertical stack, 80px height each][Table - horizontal scroll enabled][Charts - simplified, stacked][Footer - 44px height]## Functional Requirements### Data Visualization1. Achievement Rate Chart: Horizontal bar chart showing target vs actual2. Group Performance: Donut chart with group distribution3. Trend Analysis: Line chart showing month-over-month performance4. Priority Matrix: Scatter plot (deficit vs available nights)### Interaction Patterns1. Filter System: Multi-select with clear visual feedback2. Search: Real-time filtering with highlighted results3. Sorting: Column headers with sort indicators4. Export: One-click CSV/PDF export with loading states5. Drill-down: Click property row to expand detailed view### Performance Indicators1. Status Colors: - Excellent (≥110%): System Green - Good (100-109%): System Blue - Warning (80-99%): System Orange - Critical (<80%): System Red2. Priority Badges: - High: Red pill badge - Medium: Orange pill badge - Low: Gray pill badge### Accessibility Compliance- VoiceOver support for all interactive elements- High contrast mode compatibility- Keyboard navigation support- Touch target minimum 44px- Screen reader friendly labels- Color-blind friendly palette### Technical Implementation- Framework: React with TypeScript- Styling: Tailwind CSS with custom Apple design tokens- Charts: Recharts with custom Apple styling- Icons: SF Symbols via react-icons or custom SVG- State Management: React hooks (useState, useEffect)- Data Handling: Efficient filtering and sorting algorithms- Responsive: Mobile-first approach with breakpoints### Animation & Transitions- Smooth 0.3s ease-in-out transitions- Micro-interactions on hover/tap- Loading skeleton screens- Staggered list animations- Sheet/modal slide animationsBuild a sophisticated, production-ready dashboard that exemplifies Apple's design philosophy: simplicity, clarity, and delight in every interaction.Loading...
The code returns the following error:
Unhandled promise rejection: CssSyntaxError: <css input>:1:3763: The `border-apple-blue` class does not exist. If `border-apple-blue` is a custom class, make sure it is defined within a `@layer` directive.
> 1 | ll .2s ease-in-out;@apply bg-transparent text-apple-blue border border-apple-blue font-medium;}.apple-button-second
| ^
Revise the code to address the error.
I was previewing: /
Loading...
https://qavi-n8n.up.railway.app/webhook/dashboard-pricing- Método: GET- Retorno: JSON com estrutura PropertyDataset- Atualização: Implementar refresh automático a cada 30 minutos- Fallback: Usar dados mock em caso de erro na API- Loading: Mostrar skeleton screens durante carregamento### Contexto do SistemaEste dashboard é focado exclusivamente na análise do mês de Agosto de 2025, comparando:- Metas estabelecidas vs Faturamento realizado- Desempenho das propriedades em relação aos objetivos- Sugestões de pricing para otimizar resultados- Análise de disponibilidade e oportunidades de receita### Estrutura de Dados (Referência)typescriptinterface PropertyDataset { metadata: { generated_at: string; total_properties: number; data_month: string; // "agosto_2025" version: string; }; summary: { total_meta: number; total_realizado: number; properties_above_target: number; properties_below_target: number; average_achievement: number; }; groups: Array<{ name: string; properties_count: number; total_meta: number; total_realizado: number; achievement_rate: number; }>; properties: Array<{ id: string; property_id: string; name: string; group: string; location: string; type: string; target_august: number; actual_august: number; achievement_percentage: number; deficit_amount: number; target_status: 'achieved' | 'below_target'; base_rate: number; available_nights: number; target_daily_rate: number; previous_values: number; suggested_discount: string; performance_level: 'excellent' | 'good' | 'warning' | 'critical'; priority_level: 'high' | 'medium' | 'low'; }>;}## Sistema de Design Apple - Português Brasil### Paleta de Cores- Primária: #007AFF (Azul do Sistema)- Sucesso: #34C759 (Verde do Sistema) - Alerta: #FF9500 (Laranja do Sistema)- Erro: #FF3B30 (Vermelho do Sistema)- Secundária: #8E8E93 (Cinza do Sistema)- Fundo: #F2F2F7 (Cinza 6 do Sistema)- Superfície: #FFFFFF (Fundo do Sistema)- Texto Primário: #000000 (Rótulo)- Texto Secundário: #3C3C43 (Rótulo Secundário)### Hierarquia Tipográficacss--font-large-title: -apple-system, 34px, 700--font-title-1: -apple-system, 28px, 700--font-title-2: -apple-system, 22px, 700--font-title-3: -apple-system, 20px, 600--font-headline: -apple-system, 17px, 600--font-body: -apple-system, 17px, 400--font-callout: -apple-system, 16px, 400--font-subheadline: -apple-system, 15px, 400--font-footnote: -apple-system, 13px, 400--font-caption-1: -apple-system, 12px, 400--font-caption-2: -apple-system, 11px, 400### Sistema de Espaçamentocss--spacing-xs: 4px--spacing-s: 8px--spacing-m: 16px--spacing-l: 24px--spacing-xl: 32px--spacing-xxl: 48px## Conteúdo e Textos (Português-BR)### Cabeçalho- Título Principal: "Análise de Faturamento - Agosto 2025"- Placeholder Busca: "Buscar propriedade..."- Botão Exportar: "Exportar Dados"- Botão Atualizar: "Atualizar"### Cards de Resumo1. Meta Total: - Título: "Meta Total" - Formato: "R$ 1.234.567" - Subtítulo: "Objetivo Agosto 2025"2. Faturamento Realizado: - Título: "Realizado" - Formato: "R$ 987.654" - Subtítulo: "Faturamento Agosto 2025"3. Taxa de Atingimento: - Título: "Atingimento" - Formato: "87,5%" - Subtítulo: "Média geral"4. Propriedades Acima da Meta: - Título: "Acima da Meta" - Formato: "12 de 20" - Subtítulo: "Propriedades"### Tabela PrincipalColunas:- "Nome da Propriedade"- "Grupo"- "Localização"- "Meta Agosto"- "Realizado Agosto"- "Atingimento (%)"- "Déficit"- "Desconto Sugerido"- "Status"- "Prioridade"Filtros:- "Todos os Grupos"- "Todas as Localizações"- "Todos os Status"- "Todas as Prioridades"### Gráficos1. Gráfico de Barras: "Meta vs Realizado - Top 10"2. Gráfico de Rosca: "Distribuição por Grupo"3. Gráfico de Linha: "Taxa de Atingimento"4. Matriz de Prioridade: "Déficit x Noites Disponíveis"### Status e IndicadoresStatus de Atingimento:- "Meta Atingida" (Verde)- "Abaixo da Meta" (Vermelho)Níveis de Performance:- "Excelente" (≥110%) - Verde- "Bom" (100-109%) - Azul- "Atenção" (80-99%) - Laranja- "Crítico" (<80%) - VermelhoNíveis de Prioridade:- "Alta" - Badge vermelho- "Média" - Badge laranja- "Baixa" - Badge cinza### Tooltips e Mensagens- Loading: "Carregando dados..."- Erro API: "Erro ao carregar dados. Usando dados de demonstração."- Última Atualização: "Última atualização: {timestamp}"- Sem Dados: "Nenhuma propriedade encontrada"- Exportação: "Exportando dados..."## Estrutura de Layout### Desktop (≥1024px)[Cabeçalho - "Análise de Faturamento - Agosto 2025" - 64px][Cards de Resumo - 4 colunas - 120px altura][Seção Principal - Tabela 70% + Gráficos 30%][Rodapé - Última atualização - 48px]### Tablet (768px - 1023px)[Cabeçalho - 56px][Cards de Resumo - 2x2 grid - 100px altura][Tabela - largura total][Gráficos - empilhados abaixo][Rodapé - 44px]### Mobile (<768px)[Cabeçalho - 44px][Cards de Resumo - stack vertical - 80px cada][Tabela - scroll horizontal][Gráficos - simplificados, empilhados][Rodapé - 44px]## Funcionalidades Específicas### Integração com Webhookjavascript// Exemplo de chamada à APIconst fetchData = async () => { try { const response = await fetch('https://qavi-n8n.up.railway.app/webhook/dashboard-pricing'); const data = await response.json(); return data; } catch (error) { console.error('Erro ao buscar dados:', error); return mockData; // Fallback para dados mock }};### Formatação de Valores- Moeda: Sempre em Real Brasileiro (R$)- Separador decimal: Vírgula (,)- Separador milhares: Ponto (.)- Exemplo: "R$ 1.234.567,89"### Responsividade- Breakpoints: 768px (mobile), 1024px (desktop)- Tabela: Scroll horizontal em mobile- Cards: Stack vertical em mobile- Gráficos: Versões simplificadas em mobile### Acessibilidade- Idioma: pt-BR no HTML- VoiceOver: Suporte completo- Contraste: Compatível com modo alto contraste- Teclado: Navegação completa- Screen Reader: Labels descritivos### Implementação Técnica- Framework: React com TypeScript- Estilização: Tailwind CSS com tokens Apple- Gráficos: Recharts com estilo Apple- Estado: React hooks para gerenciamento- API: Fetch nativo com tratamento de erro- Formatação: Intl.NumberFormat para valores brasileiros### Animações e Transições- Transições: 0.3s ease-in-out suaves- Loading: Skeleton screens- Hover: Micro-interações- Modais: Animações de slide- Listas: Animações escalonadasConstrua um dashboard sofisticado que exemplifique a filosofia de design da Apple: simplicidade, clareza e prazer em cada interação, totalmente adaptado para o contexto brasileiro e focado na análise de Agosto 2025.