{"id":30667381,"url":"https://github.com/gmartins-dev/seller-console","last_synced_at":"2025-08-31T22:48:43.987Z","repository":{"id":310561211,"uuid":"1040325590","full_name":"gmartins-dev/seller-console","owner":"gmartins-dev","description":null,"archived":false,"fork":false,"pushed_at":"2025-08-18T22:00:16.000Z","size":87,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2025-08-18T22:29:42.332Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/gmartins-dev.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2025-08-18T19:57:16.000Z","updated_at":"2025-08-18T22:00:20.000Z","dependencies_parsed_at":"2025-08-18T22:29:44.184Z","dependency_job_id":"de067ac3-9162-4878-94bd-b55512736a88","html_url":"https://github.com/gmartins-dev/seller-console","commit_stats":null,"previous_names":["gmartins-dev/seller-console"],"tags_count":null,"template":false,"template_full_name":null,"purl":"pkg:github/gmartins-dev/seller-console","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gmartins-dev%2Fseller-console","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gmartins-dev%2Fseller-console/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gmartins-dev%2Fseller-console/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gmartins-dev%2Fseller-console/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/gmartins-dev","download_url":"https://codeload.github.com/gmartins-dev/seller-console/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gmartins-dev%2Fseller-console/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":273051859,"owners_count":25037078,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-08-31T02:00:09.071Z","response_time":79,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2025-08-31T22:48:43.387Z","updated_at":"2025-08-31T22:48:43.971Z","avatar_url":"https://github.com/gmartins-dev.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# 🎯 Seller Console\n\n\u003cdiv align=\"center\"\u003e\n\n![Version](https://img.shields.io/badge/version-1.0.0-blue.svg)\n![React](https://img.shields.io/badge/React-19.x-61DAFB.svg?logo=react)\n![TypeScript](https://img.shields.io/badge/TypeScript-5.x-3178C6.svg?logo=typescript)\n![Vite](https://img.shields.io/badge/Vite-7.x-646CFF.svg?logo=vite)\n![Tailwind CSS](https://img.shields.io/badge/Tailwind_CSS-4.x-38B2AC.svg?logo=tailwind-css)\n![License](https://img.shields.io/badge/license-MIT-green.svg)\n\n*A modern, professional lead and opportunity management system built with React, TypeScript, and cutting-edge UI frameworks.*\n\n[🚀 Live Demo](#-live-demo) • [✨ Features](#-features) • [⚡ Getting Started](#-getting-started) • [📚 Usage Guide](#-usage-guide) • [🏗️ Architecture](#-architecture) • [🎨 UI Components](#-ui-components) • [🌐 Deployment](#-deployment)\n\n\u003c/div\u003e\n\n## 📋 Overview\n\nSeller Console is a powerful CRM application designed for sales teams to efficiently manage leads and convert them into opportunities. Built with modern web technologies and best practices, it provides a seamless experience across all devices.\n\n## 🌟 Live Demo\n\nTry it live: https://seller-console-fawn.vercel.app/\n\n*Experience the complete functionality in action.*\n\nWhat to explore:\n- 📊 Browse and filter leads in real-time\n- 🔍 Search through lead data with instant results\n- 🔄 Convert leads to opportunities with optimistic updates\n- 📱 Responsive design on mobile/desktop\n- 🌙 Toggle between dark and light themes\n- 🎯 Navigate through the complete UI workflow\n\n## ✨ Features\n\n### 🎯 Key Highlights\n- 🏆 Complete MVP implementation (core requirements fulfilled)\n- ⚡ Optimistic updates with automatic rollback on errors\n- 📱 Mobile-first, responsive across all screen sizes\n- 🔄 Real-time state management with Zustand and TanStack Query\n- 🛡️ Type-safe with TypeScript and Zod validation\n- 🎨 Modern UI with Shadcn UI and Tailwind CSS\n- 🌙 Dark/Light mode with system preference detection\n\n### 🎪 Core Functionality\n\n#### 📊 Lead Management\n- 📥 Load leads from local JSON data source\n- 🔍 Search leads by name or company\n- 🏷️ Filter leads by status (New, Contacted, Qualified, etc.)\n- 📈 Sort leads by score, name, company, or creation date\n- 👀 View detailed lead information in slide-over panel\n- 📱 Mobile-optimized dual layout (cards + tables)\n- 📑 Advanced pagination controls (5, 10, 20, 30, 50 items per page)\n- 🔢 Smart page navigation with ellipsis for large datasets\n- 📊 Real-time pagination stats (showing X-Y of Z items)\n- 💾 Persistent data across browser refreshes\n\n#### ✏️ Lead Editing\n- ✅ Inline edit lead status and email\n- 🔐 Real-time email format validation\n- 💾 Save/Cancel actions with comprehensive error handling\n- 🔄 Optimistic updates with automatic rollback on failure\n- 💽 Auto-save to localStorage for data persistence\n\n#### 🎯 Opportunity Conversion\n- 🚀 Convert qualified leads to opportunities\n- 📝 Create opportunities with name, stage, amount, and account details\n- 🎛️ Comprehensive form validation\n- 📊 Track opportunity pipeline and stages\n- 📑 Advanced pagination controls for opportunities table\n- 🔍 Search opportunities by name or account\n- 🏷️ Filter opportunities by stage (Prospecting, Qualification, etc.)\n- 📈 Sort opportunities by stage, amount, or creation date\n- 📱 Responsive opportunity cards for mobile viewing\n- 🔢 Real-time pagination with customizable items per page\n- 💾 Persistent conversions that survive browser refreshes\n\n#### 📈 Dashboard \u0026 Analytics\n- 📊 Real-time statistics cards\n- 🎯 Conversion rate tracking\n- 💰 Pipeline value calculations\n- 📱 Responsive navigation with mobile sidebar\n- 📑 Paginated tables with mobile card layouts\n- 📊 Advanced pagination controls for both leads and opportunities\n- 🔢 Customizable page sizes (5, 10, 20, 30, 50 items)\n- 📋 Intelligent page navigation with ellipsis for large datasets\n- 📊 Real-time pagination statistics and item counts\n\n### 🌟 Advanced Features\n\n#### 📦 Data Persistence\n- 💽 Comprehensive localStorage integration via Zustand persist\n- 💾 Auto-backup mechanism (every 30 minutes)\n- 📤 Data export/import functionality (JSON format)\n- 🛡️ Data validation with Zod schemas\n- 📊 Storage monitoring and management tools\n- 🔄 Lead conversion persistence across browser sessions\n\n#### 📱 Mobile Responsiveness\n- 🎯 Dual-layout design (mobile cards + desktop tables)\n- 📱 Mobile-first responsive breakpoints\n- 🎨 Optimized card layouts for small screens\n- 📑 Touch-friendly pagination controls\n- 📊 Responsive pagination component with adaptive sizing\n- 💪 Progressive enhancement for all device sizes\n- 🎭 Conditional rendering based on screen size\n\n#### 📋 State Management\n- 💾 Persistent filters (localStorage)\n- ⚡ Optimistic updates with rollback capability\n- 🔄 Real-time sync with automatic persistence\n- 🛡️ Error boundaries for graceful recovery\n- 📊 **Multi-layer storage strategy** (Zustand + API service)\n\n#### 🎨 User Experience\n- 🌐 Responsive design (mobile-first)\n- ⏳ Loading states (skeletons, progress)\n- 🚫 Empty states with helpful messaging\n- ❌ Error states with retry options\n- 🎭 Smooth transitions and micro-interactions\n\n#### 🔧 Developer Experience\n- 📝 TypeScript throughout the application\n- 🧪 Schema validation with Zod\n- 🎯 Custom hooks for reusable logic\n- 📦 Component architecture for maintainability\n\n### 📄 Pagination System\n\nSeller Console features a comprehensive pagination system designed for optimal performance and user experience:\n\n#### 🚀 Key Features\n- 📄 **Smart Pagination Controls** — Navigate large datasets efficiently\n- 🔢 **Customizable Page Sizes** — Choose from 5, 10, 20, 30, or 50 items per page\n- 📊 **Real-time Statistics** — Shows \"X-Y of Z items\" for clear context\n- 🎯 **Intelligent Navigation** — Ellipsis pattern for large page counts\n- ⚡ **Performance Optimized** — Only renders visible items for fast performance\n- 📱 **Mobile Responsive** — Touch-friendly controls on all devices\n- 💾 **State Persistence** — Page preferences maintained across sessions\n\n#### 🛠️ Implementation Details\n- **Auto-reset**: Automatically resets to page 1 when filters change\n- **Boundary Handling**: Prevents navigation beyond valid page ranges\n- **Visual Feedback**: Clear active page indication and disabled states\n- **Accessibility**: Keyboard navigation and screen reader support\n- **Consistent API**: Same pagination interface for leads and opportunities\n\n#### 📊 Coverage\n- ✅ **Leads Table** — Full pagination with filtering and sorting\n- ✅ **Opportunities Table** — Complete pagination functionality\n- ✅ **Mobile Cards** — Paginated card layouts for small screens\n- ✅ **Test Coverage** — Comprehensive unit and integration tests\n\n### 🌙 Theme System\n\nSeller Console features a sophisticated dark/light mode toggle that enhances user experience:\n\n- 🎯 One-click toggle in the dashboard header\n- 💾 Persistent preference across sessions\n- 🖥️ System detection on first visit\n- ✨ Smooth transitions (sun/moon icon transforms)\n- ♿ Accessibility: screen readers and keyboard navigation\n- 🎨 Professional design following shadcn/ui and Tailwind best practices\n\n## ⚡ Getting Started\n\n### 📋 Prerequisites\n\n- Node.js (v18 or higher)\n- pnpm (recommended) or npm/yarn\n\n### 🚀 Quick Start\n\n1) Clone the repository\n```bash\ngit clone https://github.com/gmartins-dev/seller-console\ncd seller-console\n```\n\n2) Install dependencies\n```bash\npnpm install\n# or\nnpm install\n```\n\n3) Start the development server\n```bash\npnpm dev\n# or\nnpm run dev\n```\n\n4) Open your browser at http://localhost:5173\n\n## 📚 Usage Guide\n\n### 🎯 Managing Leads\n1. 👀 View leads in the main sortable, paginated table\n2. 🔍 Search by name or company\n3. 🏷️ Filter by status to narrow the list\n4. 📊 Click column headers to sort\n5. 📄 Navigate through pages using pagination controls\n6. 🔢 Adjust items per page (5, 10, 20, 30, 50) as needed\n7. 📱 Mobile users: Swipe through card layouts on small screens\n\n### ✏️ Editing Lead Details\n1. 🖱️ Click any lead row to open the detail panel\n2. ✏️ Click \"Edit\" to modify information\n3. 💾 Save changes or cancel to revert\n4. ✅ Validation ensures data integrity\n5. 💽 Changes automatically persist across browser sessions\n\n### 🎯 Converting to Opportunities\n1. 🎯 Open details for a qualified lead\n2. 🚀 Click \"Convert to Opportunity\"\n3. 📝 Fill in opportunity details (name, stage, amount, account)\n4. ✅ Submit to create the opportunity\n5. 💾 Conversions persist even after browser refresh\n\n### 📊 Tracking Opportunities\n1. 📊 Navigate to the Opportunities tab\n2. 👀 View paginated pipeline with all active opportunities\n3. 🔍 Search opportunities by name or account\n4. 🏷️ Filter by stage (Prospecting, Qualification, Proposal, etc.)\n5. 📈 Sort by stage, amount, or creation date\n6. 📑 Navigate through pages with advanced pagination controls\n7. 🔢 Customize items per page for optimal viewing\n8. 📈 Monitor stages and pipeline value\n9. 📊 Analyze distribution across stages\n10. 📱 Mobile-optimized opportunity cards for small screens\n\n### 💾 Data Management\n1. 📤 Export data: Download all leads and opportunities as JSON\n2. 📥 Import data: Upload JSON files to restore data\n3. 🔄 Auto-backup: Data automatically backs up every 30 minutes\n4. 🗑️ Clear data: Reset all data when needed\n5. 📊 Storage info: Monitor localStorage usage and data size\n\n## 🔧 Development\n\n### 📝 Available Scripts\n\n```bash\n# Development\npnpm dev                    # Start dev server\npnpm build                  # Build for production\npnpm preview                # Preview production build\n\n# Code Quality\npnpm lint                   # Run ESLint\npnpm lint:fix               # Fix ESLint issues\npnpm type-check             # TypeScript type checking\npnpm format                 # Format code with Prettier\npnpm format:check           # Check code formatting\n\n# Testing\npnpm test                   # Run tests in watch mode\npnpm test:run               # Run tests once\npnpm test:coverage          # Run tests with coverage report\n```\n\n## 🌐 Deployment\n\n### 🚀 Live Production\n\nThe application is deployed and running live on Vercel:\n\n- 🌍 Production URL: https://seller-console-fawn.vercel.app/\n- 🚀 Hosting Platform: Vercel (optimal for React/Vite)\n- ⚡ Performance: Edge network with global CDN\n- 🔄 Auto Deployment: Continuous deployment from `main` branch\n\n## 🏗️ Architecture\n\n### 🗂️ Project Structure\n\n```\nseller-console/\n├── 📁 src/\n│   ├── 📁 components/          # Reusable UI components\n│   │   ├── 📁 leads/           # Lead-specific components\n│   │   ├── 📁 opportunities/   # Opportunity-specific components\n│   │   ├── 📁 ui/              # Base UI components (Shadcn)\n│   │   └── 📁 __tests__/       # Component unit tests\n│   ├── 📁 data/               # Mock data and static assets\n│   ├── 📁 hooks/              # Custom React hooks\n│   │   └── 📁 __tests__/       # Hook unit tests\n│   ├── 📁 lib/                # Utilities and configurations\n│   │   └── 📁 __tests__/       # Utility function tests\n│   ├── 📁 pages/              # Page components\n│   ├── 📁 stores/             # Zustand state stores\n│   │   └── 📁 __tests__/       # Store unit tests\n│   ├── 📁 test/               # Test setup and configuration\n│   └── 📁 types/              # TypeScript type definitions\n├── 📄 vitest.config.ts        # Test configuration\n├── 📄 eslint.config.js        # Linting configuration\n├── 📄 README.md               # Project documentation\n└── 📄 package.json            # Dependencies and scripts\n```\n\n### 🛠️ Technology Stack\n\n#### 🎨 Frontend Core\n- ⚛️ React 19 — latest React with concurrent features\n- 📘 TypeScript 5.8 — static type checking and enhanced DX\n- ⚡ Vite 7 — lightning-fast build tool and dev server\n- 🎨 Tailwind CSS 4 — utility-first CSS framework\n\n#### 🧩 UI \u0026 Components\n- 🎭 Shadcn UI — high-quality, accessible component library\n- 🎨 Radix UI — unstyled, accessible UI primitives\n- 🎯 Lucide React — beautiful \u0026 consistent icon library\n\n#### 📊 State Management\n- 🐻 Zustand — lightweight state management\n- 🔄 TanStack Query — server state management \u0026 caching\n- 💾 Persistent storage — localStorage integration\n- 🔄 Zustand persist middleware — automatic state persistence\n- 📊 Multi-layer storage strategy — store + API service persistence\n\n#### 🔐 Forms \u0026 Validation\n- 📝 React Hook Form — performant forms with minimal re-renders\n- ✅ Zod — TypeScript-first schema validation\n\n#### 🧪 Code Quality \u0026 Testing\n- 🔍 Vitest — fast, modern test runner with native TypeScript support\n- 🧪 React Testing Library — simple and complete React testing utilities\n- 📏 ESLint — code linting with React and TypeScript rules\n- ✨ Prettier — consistent code formatting\n- 🎯 52 tests across 11 test files — comprehensive coverage\n- 🧪 Integration testing — data persistence, API layer, and pagination\n- 📱 Responsive testing — dual-layout component verification\n- 🔄 State management testing — Zustand store and custom hooks\n- 📄 Pagination testing — comprehensive pagination functionality coverage\n\n### 🏛️ Architecture Patterns\n\n- 🧱 Atomic design — scalable component hierarchy\n- 🔄 Composition over inheritance — flexible component patterns\n- 🎭 Render props \u0026 custom hooks — logic sharing and reuse\n- 🌐 Global state (Zustand), 🔄 server state (TanStack Query), 📍 local state (useState), 📝 form state (React Hook Form)\n- 🛡️ Error boundaries, 🔄 retry logic with backoff, 📊 clear user feedback\n- 🧪 Unit test coverage across components, hooks, API layer, and business logic\n- 💾 Multi-layer persistence — Zustand store + API service storage\n- 📱 Responsive architecture — dual-layout patterns for mobile/desktop\n- 🔄 State synchronization — real-time updates with localStorage backup\n\n## 🎨 UI Components\n\n### 🧩 Component Library\n\nOur application uses a carefully curated set of components built on top of Shadcn UI:\n\n#### 📊 Data Display\n- 📋 Table — sortable, filterable data tables with pagination\n- 🎯 Badge — status indicators and labels\n- 📄 Card — content containers with consistent spacing\n- 📊 Tabs — organized content sections\n- 📄 Pagination — advanced pagination controls with customizable page sizes\n\n#### 📝 Form Elements\n- 📝 Input — text inputs with validation states\n- 📋 Select — dropdown selections with search\n- 🔘 Button — primary, secondary, and icon variants\n- 📝 Form — integrated form components with error handling\n\n#### 🔄 Feedback\n- ⏳ Loading states — skeleton loaders and spinners\n- ❌ Error states — user-friendly error messages\n- 🔄 Sheet/Dialog — modal and slide-over panels\n\n### 🎨 Design System\n\n#### 🎨 Color Palette\n- Primary: modern blue tones for actions and highlights\n- Success: green for positive actions and completed states\n- Warning: amber for caution and pending states\n- Destructive: red for errors and dangerous actions\n- Muted: subtle grays for secondary content\n\n#### 📐 Typography\n- Headings: clear hierarchy with appropriate weight\n- Body text: optimized for readability across devices\n- Captions: subtle text for metadata and descriptions\n\n#### 📏 Spacing \u0026 Layout\n- 4px grid system — consistent spacing throughout\n- Responsive breakpoints — mobile-first approach\n- Flexbox \u0026 Grid — modern layout techniques\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgmartins-dev%2Fseller-console","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fgmartins-dev%2Fseller-console","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgmartins-dev%2Fseller-console/lists"}