Spaces:
Running
Running
| 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. |