https://sistur.lovable.app/assets/IndicadoresChart-BSmi8nL-.js

1const e=`import { tx } from '@/i18n/t';
2import { Badge } from '@/components/ui/badge';
3import { Progress } from '@/components/ui/progress';
4import {
5  Info,
6  Database,
7  Zap,
8  Gauge,
9  Target,
10  Edit,
11} from 'lucide-react';
12import { cn } from '@/lib/utils';
13
14interface IndicadoresChartProps {
15  indicators: any[];
16  tierCounts: { SMALL: number; MEDIUM: number; COMPLETE: number };
17  igmaCount: number;
18  pillarNames: Record<string, string>;
19}
20
21export function IndicadoresChart({
22  indicators,
23  tierCounts,
24  igmaCount,
25  pillarNames,
26}: IndicadoresChartProps) {
27  return (
28    <>
29      {/* Tier Info */}
30      <div className="p-4 rounded-lg border bg-gradient-to-br from-primary/5 to-transparent">
31        <div className="flex items-start gap-3 mb-4">
32          <Info className="h-5 w-5 text-primary mt-0.5" />
33          <div>
34            <h3 className="font-semibold text-foreground mb-1">{tx('Sobre os Níveis de Diagnóstico')}</h3>
35            <p className="text-sm text-muted-foreground">
36              {tx('Cada indicador pertence a um nível que define em quais diagnósticos ele será utilizado.')}
37            </p>
38          </div>
39        </div>
40        <div className="grid grid-cols-1 md:grid-cols-3 gap-3">
41          <div className="p-3 rounded-lg bg-green-50 dark:bg-green-950/30 border border-green-200 dark:border-green-800">
42            <div className="flex items-center gap-2 mb-2">
43              <Zap className="h-4 w-4 text-green-600" />
44              <span className="font-medium text-green-700 dark:text-green-400">{tx('Essencial')}</span>
45              <Badge variant="outline" className="ml-auto text-xs">{tx("{{v0}} ind.", { v0: tierCounts.SMALL })}</Badge>
46            </div>
47            <p className="text-xs text-green-600/80 dark:text-green-400/80">
48              {tx("Indicadores essenciais para municípios menores ou análises rápidas. Ideal para primeira avaliação ou destinos com dados limitados.")}
49            </p>
50          </div>
51          <div className="p-3 rounded-lg bg-amber-50 dark:bg-amber-950/30 border border-amber-200 dark:border-amber-800">
52            <div className="flex items-center gap-2 mb-2">
53              <Gauge className="h-4 w-4 text-amber-600" />
54              <span className="font-medium text-amber-700 dark:text-amber-400">{tx('Estratégico')}</span>
55              <Badge variant="outline" className="ml-auto text-xs">{tx("{{v0}} ind.", { v0: tierCounts.MEDIUM })}</Badge>
56            </div>
57            <p className="text-xs text-amber-600/80 dark:text-amber-400/80">
58              {tx("Adiciona indicadores de profundidade intermediária. Recomendado para cidades médias ou diagnósticos de acompanhamento.")}
59            </p>
60          </div>
61          <div className="p-3 rounded-lg bg-primary/10 border border-primary/30">
62            <div className="flex items-center gap-2 mb-2">
63              <Target className="h-4 w-4 text-primary" />
64              <span className="font-medium text-primary">{tx('Integral')}</span>
65              <Badge variant="outline" className="ml-auto text-xs">{tx("{{v0}} ind.", { v0: tierCounts.COMPLETE })}</Badge>
66            </div>
67            <p className="text-xs text-primary/80">
68              {tx("Análise mais abrangente com todos os indicadores. Ideal para capitais, polos turísticos ou planejamento estratégico.")}
69            </p>
70          </div>
71        </div>
72      </div>
73
74      {/* Data Sources Info */}
75      <div className="p-4 rounded-lg border bg-muted/30">
76        <div className="flex items-start gap-3 mb-3">
77          <Database className="h-5 w-5 text-muted-foreground mt-0.5" />
78          <div>
79            <h3 className="font-semibold text-foreground mb-1">{tx('Fontes de Dados Oficiais')}</h3>
80            <p className="text-sm text-muted-foreground">
81              {tx('Os indicadores podem ser pré-preenchidos automaticamente de fontes oficiais:')}
82            </p>
83          </div>
84        </div>
85        <div className="grid grid-cols-2 md:grid-cols-4 gap-2">
86          {[
87            { name: 'IBGE', desc: tx('Demográficos, econômicos e Censo (SIDRA)') },
88            { name: 'CADASTUR', desc: tx('Serviços turísticos registrados') },
89            { name: 'DATASUS', desc: tx('Saúde e mortalidade') },
90            { name: 'INEP', desc: tx('Dados educacionais (IDEB)') },
91            { name: 'STN', desc: tx('Dados fiscais municipais') },
92            { name: 'Mapa Turismo', desc: tx('Regionalização e categorização') },
93          ].map(source => (
94            <div key={source.name} className="p-2 rounded bg-background border text-center">

95              <span className="font-mono text-xs font-medium text-foreground">{source.name}</span>
96              <p className="text-[10px] text-muted-foreground mt-0.5">{source.desc}</p>
97            </div>
98          ))}
99        </div>
100      </div>
101
102      {/* Summary by Pillar */}
103      <div className="grid grid-cols-1 xs:grid-cols-2 sm:grid-cols-4 gap-3 sm:gap-4">
104        {(['RA', 'OE', 'AO'] as const).map((pillar) => {
105          const pillarIndicators = indicators.filter(i => i.pillar === pillar);
106          const totalWeight = pillarIndicators.reduce((sum, i) => sum + i.weight, 0);
107          
108          return (
109            <div key={pillar} className="p-4 rounded-lg border bg-card">
110              <div className="flex items-center gap-2 mb-2">
111                <Badge variant={pillar.toLowerCase() as 'ra' | 'oe' | 'ao'}>
112                  I{pillar}
113                </Badge>
114                <span className="text-sm font-medium">{pillarNames[pillar]}</span>
115              </div>
116              <div className="flex items-baseline gap-2">
117                <span className="text-2xl font-display font-bold">
118                  {pillarIndicators.length}
119                </span>
120                <span className="text-sm text-muted-foreground">{tx("indicadores")}</span>
121              </div>
122              <div className="mt-2">
123                <div className="flex items-center justify-between text-xs text-muted-foreground mb-1">
124                  <span>{tx('Soma dos pesos')}</span>
125                  <span className={cn(
126                    totalWeight > 1 && 'text-amber-500 font-medium',
127                    totalWeight === 1 && 'text-green-500 font-medium'
128                  )}>
129                    {(totalWeight * 100).toFixed(0)}%
130                  </span>
131                </div>
132                <Progress 
133                  value={Math.min(totalWeight * 100, 100)} 
134                  className={cn(
135                    "h-1.5",
136                    totalWeight > 1 && "[&>div]:bg-amber-500"
137                  )} 
138                />
139              </div>
140            </div>
141          );
142        })}
143        
144        {/* IGMA Summary Card */}
145        <div className="p-4 rounded-lg border bg-card border-primary/30">
146          <div className="flex items-center gap-2 mb-2">
147            <Database className="h-4 w-4 text-primary" />
148            <span className="text-sm font-medium">{tx('Fonte IGMA')}</span>
149          </div>
150          <div className="flex items-baseline gap-2">
151            <span className="text-2xl font-display font-bold text-primary">
152              {igmaCount}
153            </span>
154            <span className="text-sm text-muted-foreground">{tx("indicadores")}</span>
155          </div>
156          <p className="mt-2 text-xs text-muted-foreground">
157            {tx('Indicadores oficiais do IGMA integrados ao SISTUR')}
158          </p>
159        </div>
160      </div>
161
162      {/* Inline Edit Info */}
163      <div className="p-3 bg-muted/50 rounded-lg border flex items-center gap-3">
164        <Edit className="h-4 w-4 text-muted-foreground shrink-0" />
165        <p className="text-sm text-muted-foreground">
166          <span className="font-medium text-foreground">{tx('Edição de pesos, tiers e escopo:')}</span> {tx("Clique no peso, tier ou escopo de qualquer indicador para editá-lo. A soma dos pesos por pilar deve totalizar 100% para um cálculo correto.")}
167        </p>
168      </div>
169    </>
170  );
171}
172`;export{e as default};