feat: dashboard page with stats, quick actions, and recent activity#11
Open
marcelomatao wants to merge 8 commits into
Open
feat: dashboard page with stats, quick actions, and recent activity#11marcelomatao wants to merge 8 commits into
marcelomatao wants to merge 8 commits into
Conversation
- Button: variants (primary/secondary/ghost/danger), sizes, loading state, icons - Card: interactive (hover effects) and flat variants - Badge: success, warning, error, info semantic variants - Input: label, error, helper text, validation states, forwardRef - Textarea: multi-line input with same features as Input - Select: dropdown with label, error, helper text - Modal: dialog with backdrop blur, ESC key close, size variants - Toast: notification system with types (success/error/warning/info) - ToastProvider: global toast context with auto-dismiss - Skeleton: loading placeholders (text, circular, rectangular) - SkeletonCard: pre-built card skeleton - SkeletonList: pre-built list skeleton - EmptyState: empty content illustration with icon variants - Update AppProvider to include ToastProvider - Create comprehensive demo page showcasing all components All components are: - Fully typed with TypeScript - Theme-aware with CSS variables - Accessible with ARIA attributes - Responsive and mobile-friendly Next: Step 4 - API Layer + Auth Context (mock backend integration)
- Create TypeScript types for User, Document, Envelope, Signer - Create mock data (mockUser, mockDocuments, mockEnvelopes) - Build ApiClient class with axios: - Mock mode with realistic delays (300-800ms) - JWT token management in localStorage - Request/response interceptors - Auto-redirect to login on 401 - Methods: login, register, getCurrentUser, getDocuments, getEnvelopes, verifyDocument - Create AuthContext with: - User state management - Login/register/logout functions - Auto-login on app start (if token exists) - isAuthenticated flag - Create ProtectedRoute component for route guards - Create useAuth hook for easy access - Update AppProvider to include AuthProvider - Create demo pages: - Login page with form validation - Protected dashboard with user profile - API demo hub page - Add routing with protected routes Mock credentials: demo@sigra.io / password Next: Step 5 - i18n Setup (PT-BR and EN translations)
- Set up react-i18next with LanguageDetector - Create translation files: - en.json: English translations - pt-BR.json: Portuguese (Brazil) translations - Translation namespaces: - common: shared strings (loading, error, save, cancel, etc.) - nav: navigation labels - auth: login/register forms - landing: hero, features, benefits - dashboard: stats, welcome, quick actions - documents: table headers, empty states - envelopes: statuses, table headers - verify: verification flow - settings: profile, preferences - Create LanguageSwitcher component (Globe icon, toggles EN/PT-BR) - Auto-detect browser language on first visit - Persist language preference in localStorage - Update all demo pages to use translations - Add i18n import to main.tsx Demo pages now fully translated: - Landing page (hero, features) - Login page (form labels, buttons) - Dashboard (stats, welcome message) Next: Step 6 - Landing Page (public marketing page)
- Create LandingPage component with all sections - Update PublicHeader to use CSS variables and i18n - Update PublicFooter to use CSS variables and i18n - Add LanguageSwitcher to PublicHeader - Remove demo pages from App.tsx - Add proper routing for landing page Landing page includes: - Hero section with CTA buttons - Features grid (independent, permanent, cost-effective) - Benefits section (tamper-proof, legally valid, global, enterprise) - Stats section - Final CTA section
- Create PricingPage component with 4 plans (Free, Pro, Business, Enterprise) - Add monthly/annual billing toggle with 20% discount for annual - Include feature comparison for each plan - Add FAQ section with common questions - Add pricing route to App.tsx Features: - Interactive billing toggle (monthly/annual) - Popular plan highlighting - Responsive grid layout - Full i18n support - Theme-aware design
- Create VerifyPage component with hash input and verification flow - Display verification results with document details and signer information - Show blockchain proof for anchored documents (merkle root, tx hash) - Add link to blockchain explorer for transaction verification - Include helpful information about finding document hashes - Add feature cards explaining verification benefits - Handle not found cases with helpful suggestions - Add /verify route to App.tsx Features: - Real-time document verification via API - Detailed envelope and signer information display - Blockchain transaction link (basescan.org) - Status badges for envelope and signer states - Responsive layout with clear success/error states - Full i18n support
- Create LoginPage with email/password, remember me, social login buttons - Create RegisterPage with full registration form and validation - Create ForgotPasswordPage with email submission and success state - Update App.tsx to use new auth pages - Add /login, /register, /forgot-password routes Features: - Social login buttons (Google, GitHub) - UI ready - Form validation (password match, length) - Remember me checkbox - Forgot password link - Success state for password reset - Demo credentials hint on login page - Full i18n support - Responsive design
- Create DashboardPage component with AppShell layout - Display 4 stat cards (documents, pending, completed, anchored) - Add quick actions (new envelope, upload document, verify) - Show recent envelopes list with status badges - Load data from mock API on mount - Handle loading and empty states - Navigate to envelope detail on click Features: - Real-time data loading from apiClient - Trend indicators (+12% from last month) - Responsive grid layout - Empty state with CTA - Full i18n support
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Implement the authenticated dashboard: