feat: final polish — navigation updates and component refinements#17
Open
marcelomatao wants to merge 14 commits into
Open
feat: final polish — navigation updates and component refinements#17marcelomatao wants to merge 14 commits into
marcelomatao wants to merge 14 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
- Create DocumentsPage component with AppShell layout - Display documents in responsive grid cards - Add search functionality with real-time filtering - Implement upload modal with file selection - Add delete functionality with confirmation - Show document details (size, date, hash) - Handle loading and empty states Features: - Upload modal with drag-and-drop UI - File size formatting (B, KB, MB) - Copy hash to clipboard - Create envelope from document - Delete with confirmation - Responsive 3-column grid - Full i18n support
- Create EnvelopesPage with search, status filters, and envelope cards - Create EnvelopeDetailPage with full details, signers list, and blockchain proof - Create CreateEnvelopePage with document selection and signer management - Add routes: /app/envelopes, /app/envelopes/:id, /app/envelopes/new Features: - Envelopes list with status filtering (all/draft/pending/completed/anchored) - Status counts in filter buttons - Envelope cards with progress indicators - Detail page with document info, blockchain proof (for anchored), signers list - Create form with dynamic signer addition/removal - Document pre-selection from state (when coming from documents page) - Loading and not found states - Full i18n support
- Create SigningPage component for signers to sign documents - Add /sign/:token route (public, no auth required) - Implement draw/type signature methods - Show document preview with mock PDF content - Display signing panel with legal notice - Show success state after signing Features: - Public access via token-based URL - Two signing methods: draw (canvas placeholder) and type - Typed signature preview with serif italic font - Mock document preview with NDA content - Legal notice about electronic signature validity - Success state with signing details and next steps info - Responsive layout (document preview + signing panel) - Sticky signing panel on desktop Note: Canvas drawing implementation would use HTML5 Canvas API in production. Current implementation shows placeholder UI.
- Create SettingsPage component with 3 tabs - Add /app/settings route with ProtectedRoute - Implement profile editing (name, company) - Add language selector (EN/PT-BR) - Add theme toggle (light/dark) - Add notification toggles - Implement change password with validation - Add 2FA placeholder - Add danger zone (delete account) Features: - Tab navigation (Profile, Preferences, Security) - Profile form with save functionality - Language selector with i18n integration - Theme toggle buttons - Notification switches - Password change with validation (match, min length) - 2FA enable button (placeholder) - Delete account danger zone - Responsive layout with sidebar
- Create BillingPage component with current plan, usage, and history - Add /app/billing route with ProtectedRoute - Display current plan with status and next billing date - Show usage stats for documents, envelopes, and storage - Add payment method display - Show available plans for upgrade/downgrade - Display billing history with download option Features: - Current plan card with change/cancel buttons - Usage progress bars with color coding (green/yellow/red) - Payment method display (Visa ending in 4242) - Available plans comparison (Free/Pro/Business) - Billing history list with paid status - Download invoice buttons - Responsive grid layout
- Update Sidebar to include Billing link - Add i18n support to Sidebar navigation - Update AppShell with improved top bar - Add user avatar and name display - Improve mobile responsiveness Changes: - Sidebar now shows: Dashboard, Documents, Envelopes, Settings, Billing - AppShell top bar shows language switcher, theme toggle, and user info - Logout button uses AuthContext.logout() - All navigation uses i18n translations
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.
Final polish pass across all pages: