dashboard.md

Gotowy projekt dashboardu dla GrantForge AI (2026) Oto nowoczesny, profesjonalny i funkcjonalny główny ekran dashboardu dla Twojej aplikacji. Zaprojektowałem go tak, aby od razu pokazywał wartość systemu (nie jest to zwykły czat), budował zaufanie i prowadził użytkownika krok po kroku przez proces aplikowania o dotacje. Ogólna struktura layoutu (3-kolumnowa, responsywna)

Lewy Sidebar (stały, 20-22% szerokości) – Profil Firmy + Szybkie akcje Główna kolumna środkowa (55-60%) – Kroki procesu + obszar pracy Prawy Sidebar (~20-22%) – Live Status & Wizualizacja agentów

Kolorystyka rekomendowana:

Ciemny motyw (dark mode) z akcentem zielono-niebieskim (#00C853 / #2196F3) – kojarzy się z pieniędzmi, wzrostem i technologią UE. Czcionka: Inter lub Satoshi (nowoczesna, czytelna).

Szczegółowy opis komponentów

1. Lewy Sidebar – Profil Firmy (zawsze widoczny)

Nagłówek: GrantForge AI + logo + nazwa użytkownika/firmy Karta Profilu Firmy (aktualizowana na żywo przez Profiler Agent): NIP / Nazwa firmy Wielkość przedsiębiorstwa (mikro/małe/średnie) Branża (PKD + ikona) Województwo + region UE Szacowany budżet projektu Poziom innowacyjności (ikona + pasek)

Przyciski szybkie: „Edytuj profil firmy” „Wrzuć nowy dokument” (biznesplan, KRS, bilans) „Rozpocznij nowy projekt dotacyjny”

Sekcja „Twoje projekty” (lista ostatnich sesji z % ukończenia)

2. Główna kolumna – Serce dashboardu Na górze: Progress Tracker (poziomy stepper z 5 krokami):

Profil firmy → 2. Dopasowanie dotacji → 3. Analiza dokumentów → 4. Generowanie wniosku → 5. Ocena ryzyka & gotowość

Każdy krok ma status: Nie rozpoczęty / W toku / Ukończony / Wymaga uwagi (z kolorami). Poniżej – zakładki (tabs):

Dashboard główny (widok startowy) Karty z dopasowanymi programami (Matcher) – np. „Ścieżka SMART – szansa 87%”, „FENG – 2,4 mln zł”, z przyciskiem „Zobacz szczegóły” „Największe ryzyka” (z Risk Scoring Agent) – lista 3-5 punktów z priorytetem Mini-karta „Szacowana wartość dotacji” + pasek postępu

Czat kontekstowy (nie czysty chat, tylko wspomagający) Czat z widocznym kontekstem bieżącego kroku Wiadomości agentów oznaczone ikoną (Profiler 🏢, Wizard ✍️, Critic 🔍 itp.)

Generowanie wniosku (Wizard) Sekcje wniosku (A1, B2, opis projektu itp.) w formie accordionów Przycisk „Generuj sekcję X” + edytor tekstu z wersjonowaniem Przycisk „Eksport do Word/PDF”

Analiza dokumentów Podgląd wgranych plików + wyniki Verifier + Document Gap Analyzer

3. Prawy Sidebar – Live Mission Control

Aktualny krok procesu (duża karta z ikoną aktualnego agenta) Wizualizacja grafu LangGraph (mały, interaktywny diagram – który agent pracuje, strzałki między nimi) Aktywni agenci (lista z statusem: Pracuje / Czeka / Zakończył) Metryki sesji: Zużyte tokeny / szacowany koszt Czas sesji Poziom pewności odpowiedzi (z Critic)

Przyciski akcji: „Wstrzymaj / Kontynuuj proces” „Poproś o recenzję Critica” „Wyeksportuj cały wniosek”

Dodatkowo na dole ekranu: mały pasek z disclaimerem + przycisk „Feedback” (ocena odpowiedzi). Dlaczego ten dashboard jest znacznie lepszy niż obecny czat?

Od razu widać profesjonalizm i wartość (nie wygląda jak zwykły ChatGPT) Użytkownik widzi postęp i wie, na jakim etapie jest Zmniejsza liczbę błędów dzięki widocznemu profilowi i ryzykom Buduje zaufanie (przezroczystość działania agentów) Łatwość użycia dla przedsiębiorców i konsultantów dotacyjnych

Co przekazać agentowi (prompt do Chainlit / frontend developera) Skopiuj i wklej ten prompt do swojego agenta frontendu (np. do Chainlit lub Lovable AI / Galileo AI / Figma AI): textZaprojektuj nowoczesny dashboard dla aplikacji GrantForge AI – systemu multi-agentowego wspierającego aplikacje o fundusze europejskie (PARP, NCBR, Ścieżka SMART itp.).

Użyj ciemnego motywu (dark mode) z akcentami zielono-niebieskimi.

Layout 3-kolumnowy:

• Lewy sidebar (stały): Profil firmy (NIP, wielkość, branża, województwo, budżet), szybkie przyciski (Edytuj profil, Wrzuć dokument, Nowy projekt)
• Środkowa kolumna (główna):
  • Progress stepper z 5 krokami: 1. Profil → 2. Dopasowanie dotacji → 3. Analiza dokumentów → 4. Generowanie wniosku → 5. Ocena ryzyka
  • Zakładki: Dashboard główny (karty programów dotacyjnych + szacowana wartość + ryzyka), Czat kontekstowy, Generowanie wniosku (sekcje z edytorem), Analiza dokumentów
• Prawy sidebar: Live status – aktualny krok, wizualizacja grafu LangGraph (prosty diagram), aktywni agenci, metryki sesji (tokeny, koszt, czas), przyciski akcji (wstrzymaj, recenzja Critica, eksport)

Użyj komponentów Chainlit: cl.sidebar, cl.Step, cl.Card, cl.Tabs, cl.ChatMessage z custom elements, cl.Button, expanders dla sekcji wniosku.

Dodaj live aktualizacje profilu firmy i postępu agentów. Zrób to profesjonalnie, czysto i enterprise-like – jak dashboardy SaaS do grant management (np. Fluxx, Foundant, SmartSimple).

Zwróć gotowy kod Chainlit + opis komponentów + sugestie stylów CSS jeśli potrzeba.