{"id":46614232,"url":"https://github.com/mosioc/dashlytics-dashboard","last_synced_at":"2026-03-07T19:31:38.932Z","repository":{"id":184809174,"uuid":"664009954","full_name":"mosioc/dashlytics-dashboard","owner":"mosioc","description":"A deep, responsive and informative dashboard","archived":false,"fork":false,"pushed_at":"2025-11-24T21:13:26.000Z","size":308,"stargazers_count":0,"open_issues_count":4,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-11-28T01:39:58.946Z","etag":null,"topics":["antdesign","graphql","react-router","reactjs","refine"],"latest_commit_sha":null,"homepage":"","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/mosioc.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,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2023-07-08T17:12:16.000Z","updated_at":"2025-11-24T21:22:51.000Z","dependencies_parsed_at":"2023-07-30T11:48:15.231Z","dependency_job_id":null,"html_url":"https://github.com/mosioc/dashlytics-dashboard","commit_stats":null,"previous_names":["mosioc/vcain","mosioc/dashlytics-dashboard"],"tags_count":1,"template":false,"template_full_name":null,"purl":"pkg:github/mosioc/dashlytics-dashboard","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mosioc%2Fdashlytics-dashboard","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mosioc%2Fdashlytics-dashboard/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mosioc%2Fdashlytics-dashboard/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mosioc%2Fdashlytics-dashboard/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/mosioc","download_url":"https://codeload.github.com/mosioc/dashlytics-dashboard/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mosioc%2Fdashlytics-dashboard/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":30227800,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-03-07T19:01:10.287Z","status":"ssl_error","status_checked_at":"2026-03-07T18:59:58.103Z","response_time":53,"last_error":"SSL_read: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"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":["antdesign","graphql","react-router","reactjs","refine"],"created_at":"2026-03-07T19:31:38.300Z","updated_at":"2026-03-07T19:31:38.897Z","avatar_url":"https://github.com/mosioc.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Dashlytics\n\nA modern CRM dashboard built with React, TypeScript, and Refine. Dashlytics provides real-time data visualization, company management, and business analytics with a professional Ant Design UI.\n\n![Dashlytics screenshot demo](./dashlytics.png)\n\n## Table of Contents\n\n- [Overview](#overview)\n- [Features](#features)\n- [Technology Stack](#technology-stack)\n- [Installation](#installation)\n- [Usage](#usage)\n- [Architecture Overview](#architecture-overview)\n- [Code Structure](#code-structure)\n- [Diagrams](#diagrams)\n- [Development Workflow](#development-workflow)\n- [Building and Deployment](#building-and-deployment)\n- [Environment Variables](#environment-variables)\n- [Testing](#testing)\n\n## Overview\n\nDashlytics is a sophisticated CRM dashboard application designed to help businesses manage companies, track sales metrics, and visualize key performance indicators in real-time. Built on the Refine framework, it provides a scalable, type-safe foundation for CRUD operations with automatic GraphQL code generation and real-time data synchronization via WebSocket subscriptions.\n\n**Key Characteristics:**\n- TypeScript-first development with strict type checking\n- GraphQL-based data fetching with automatic code generation\n- Real-time updates via WebSocket subscriptions\n- Responsive design supporting desktop and mobile devices\n- Authentication and authorization built-in\n- Production-ready Docker support\n\n## Features\n\n### Dashboard \u0026 Analytics\n- Real-time sales metrics and total counts display\n- Interactive deals chart with data visualization using Ant Design Plots\n- Latest activities feed showing recent business events\n- Responsive grid layout adapting to various screen sizes\n\n### Company Management\n- Comprehensive company list view with search, sort, and filter capabilities\n- Create new company records with full details\n- Edit company information including sales owner, revenue, industry, and company size\n- Contact management within company records\n- Sales owner assignment with avatar preview\n\n### User Interface\n- Professional Ant Design component library\n- Theme customization with built-in Green theme\n- Responsive layout with header and navigation\n- User profile settings and preferences\n- Notification system for user feedback\n\n### Authentication \u0026 Authorization\n- Secure login with email-based authentication\n- Token-based session management\n- Protected routes requiring authentication\n- Automatic logout on token expiration\n- User identity management and profile retrieval\n\n### Data Management\n- Type-safe GraphQL operations with automatic code generation\n- Real-time data synchronization via WebSocket\n- Pagination and filtering support for large datasets\n- Custom fetch wrapper with bearer token authentication\n- Error handling and validation\n\n## Technology Stack\n\n### Frontend Framework \u0026 UI\n- **React** 19.1.0 - Modern UI library with hooks and concurrent features\n- **TypeScript** 5.8.3 - Type-safe JavaScript development\n- **Ant Design** 5.23.0 - Comprehensive UI component library\n- **Ant Design Icons** 5.5.1 - Icon collection for UI components\n- **Ant Design Plots** 2.3.1 - Production-ready chart components\n\n### State Management \u0026 Data\n- **Refine** 5.0.0 - React-based admin framework with automatic CRUD\n- **Refine Ant Design** 6.0.1 - Integration between Refine and Ant Design\n- **Refine React Router** 2.0.0 - Routing provider for Refine\n- **GraphQL** - Query language and runtime for API communication\n- **GraphQL Tag** 2.12.6 - Template literal syntax for GraphQL queries\n- **GraphQL WS** 5.9.1 - WebSocket client for real-time subscriptions\n\n### Routing \u0026 Navigation\n- **React Router** 7.9.6 - Client-side routing library\n- **Refine Kbar** 2.0.0 - Command palette for navigation\n\n### Development Tools\n- **Vite** 6.3.5 - Lightning-fast build tool and dev server\n- **ESLint** 9.25.0 - Code quality and style checking\n- **GraphQL Code Generator** 5.0.0 - Automatic TypeScript type generation from GraphQL\n\n### DevOps \u0026 Deployment\n- **Docker** - Containerization for production deployment\n- **Node.js** 18 LTS - JavaScript runtime environment\n\n## Installation\n\n### Prerequisites\n\n- **Node.js** 18 or higher\n- **npm** or **yarn** package manager\n- Git for version control\n\n### Setup Steps\n\n1. **Clone the repository:**\n   ```powershell\n   git clone https://github.com/mosioc/dashlytics-dashboard.git\n   cd dashlytics-dashboard\n   ```\n\n2. **Install dependencies:**\n   ```powershell\n   npm install\n   ```\n\n3. **Generate GraphQL types:**\n   ```powershell\n   npm run codegen\n   ```\n\n4. **Start the development server:**\n   ```powershell\n   npm run dev\n   ```\n\n   The application will be available at `http://localhost:5173`\n\n5. **Access the application:**\n   - Login with demo credentials:\n     - Email: `michael.scott@dundermifflin.com`\n     - Password: `demodemo`\n\n## Usage\n\n### Running the Application\n\n#### Development Mode\n```powershell\nnpm run dev\n```\nStarts the Vite dev server with hot module replacement for real-time code updates.\n\n#### Production Build\n```powershell\nnpm run build\n```\nCompiles TypeScript and creates an optimized production build in the `dist/` directory.\n\n#### Production Serve\n```powershell\nnpm run start\n```\nServes the built application using the Refine production server.\n\n### GraphQL Operations\n\n#### Generate Types from GraphQL Schema\n```powershell\nnpm run codegen\n```\nThis command:\n- Introspects the GraphQL API at `https://api.crm.refine.dev/graphql`\n- Scans `src/**/*.{ts,tsx}` for GraphQL operations\n- Generates type definitions in `src/graphql/schema.types.ts` and `src/graphql/types.ts`\n- Auto-formats generated files with ESLint and Prettier\n\n#### Available GraphQL Queries\nLocated in `src/graphql/queries.ts`:\n- `USERS_SELECT_QUERY` - Fetch users with filtering, sorting, and pagination\n- `TASK_STAGES_SELECT_QUERY` - Fetch task stages with filtering and pagination\n- `DASHBOARD_TOTAL_COUNTS_QUERY` - Fetch aggregate counts for dashboard metrics\n\n#### Available GraphQL Mutations\nLocated in `src/graphql/mutations.ts`:\n- `UPDATE_USER_MUTATION` - Update user profile and settings\n- `CREATE_COMPANY_MUTATION` - Create new company record\n- `UPDATE_COMPANY_MUTATION` - Update company details (revenue, industry, location)\n- `CREATE_TASK_MUTATION` - Create new task\n- `UPDATE_TASK_MUTATION` - Update task status and assignments\n\n### Common Tasks\n\n#### Creating a New Page\n1. Create a route file in `src/routes/\u003cfeature\u003e/index.tsx`\n2. Define your component using Refine hooks (`useList`, `useCreate`, `useUpdate`)\n3. Add the route to `src/routes/index.ts` exports\n4. Configure the resource in `src/config/resources.tsx`\n\n#### Adding GraphQL Queries\n1. Write the GraphQL operation in `src/graphql/queries.ts` or `src/graphql/mutations.ts`\n2. Import using `graphql-tag`: `import gql from \"graphql-tag\"`\n3. Run `npm run codegen` to generate TypeScript types\n4. Use in components with `useCustom` or `useUpdate` hooks\n\n#### Connecting Components to Data\n```tsx\nimport { useList } from \"@refinedev/core\";\nimport type { GetListResponse } from \"@refinedev/core\";\nimport type { CompanyListResponse } from \"@/graphql/types\";\n\nexport const CompanyList = () =\u003e {\n  const { data, isLoading } = useList\u003cCompanyListResponse\u003e({\n    resource: \"companies\",\n    meta: { gqlQuery: COMPANIES_LIST_QUERY },\n  });\n\n  return \u003cdiv\u003e{/* render data */}\u003c/div\u003e;\n};\n```\n\n## Architecture Overview\n\n### System Architecture\n\n```mermaid\ngraph TB\n    Browser[\"Browser\u003cbr/\u003e(React App)\"]\n    LocalStorage[\"Local Storage\u003cbr/\u003e(Access Token)\"]\n    ViteServer[\"Vite Dev Server\u003cbr/\u003e(HMR)\"]\n    \n    AuthProvider[\"Auth Provider\u003cbr/\u003e(Login/Logout)\"]\n    DataProvider[\"Data Provider\u003cbr/\u003e(GraphQL)\"]\n    LiveProvider[\"Live Provider\u003cbr/\u003e(WebSocket)\"]\n    \n    APIEndpoint[\"GraphQL API\u003cbr/\u003e(https://api.crm.refine.dev/graphql)\"]\n    WSEndpoint[\"WebSocket\u003cbr/\u003e(wss://api.crm.refine.dev/graphql)\"]\n    \n    Browser --\u003e|Dev Server| ViteServer\n    Browser --\u003e|Store Token| LocalStorage\n    Browser --\u003e|Auth| AuthProvider\n    Browser --\u003e|CRUD| DataProvider\n    Browser --\u003e|Subscribe| LiveProvider\n    \n    AuthProvider --\u003e|Login/Check| APIEndpoint\n    DataProvider --\u003e|HTTP+GraphQL| APIEndpoint\n    LiveProvider --\u003e|Subscriptions| WSEndpoint\n    \n    LocalStorage --\u003e|Read Token| AuthProvider\n    LocalStorage --\u003e|Read Token| DataProvider\n    LocalStorage --\u003e|Read Token| LiveProvider\n```\n\n### Application Flow\n\n```mermaid\ngraph LR\n    App[\"App.tsx\u003cbr/\u003e(Root)\"]\n    Router[\"React Router\u003cbr/\u003e(Routes)\"]\n    Auth[\"Refine Auth\u003cbr/\u003e(Protected Routes)\"]\n    Layout[\"Component Layout\u003cbr/\u003e(Header+Nav)\"]\n    Pages[\"Pages\u003cbr/\u003e(Dashboard/Companies)\"]\n    \n    App --\u003e Router\n    Router --\u003e Auth\n    Auth --\u003e|Authenticated| Layout\n    Auth --\u003e|Not Auth| LoginPage[\"Login Page\"]\n    Layout --\u003e Pages\n```\n\n### Data Flow - Queries \u0026 Mutations\n\n```mermaid\nsequenceDiagram\n    participant Component\n    participant RefineHook as Refine Hook\n    participant DataProvider as GraphQL Provider\n    participant FetchWrapper as Fetch Wrapper\n    participant API as GraphQL API\n    \n    Component-\u003e\u003eRefineHook: useList/useCreate\n    RefineHook-\u003e\u003eDataProvider: Execute Operation\n    DataProvider-\u003e\u003eFetchWrapper: Fetch Request\n    FetchWrapper-\u003e\u003eFetchWrapper: Add Bearer Token\n    FetchWrapper-\u003e\u003eAPI: HTTP + GraphQL\n    API-\u003e\u003eFetchWrapper: Response\n    FetchWrapper-\u003e\u003eFetchWrapper: Parse GraphQL Errors\n    FetchWrapper-\u003e\u003eDataProvider: Return Response\n    DataProvider-\u003e\u003eRefineHook: Parsed Data\n    RefineHook-\u003e\u003eComponent: Update State\n```\n\n### Real-Time Subscription Flow\n\n```mermaid\nsequenceDiagram\n    participant Component\n    participant LiveProvider as Live Provider\n    participant WSClient as WebSocket Client\n    participant API as GraphQL API\n    \n    Component-\u003e\u003eLiveProvider: Subscribe\n    LiveProvider-\u003e\u003eWSClient: Create WS Connection\n    WSClient-\u003e\u003eAPI: Connect + Auth Token\n    API-\u003e\u003eWSClient: Connection Established\n    API-\u003e\u003eWSClient: Data Update Event\n    WSClient-\u003e\u003eLiveProvider: Subscription Data\n    LiveProvider-\u003e\u003eComponent: Trigger Refetch\n```\n\n## Code Structure\n\n### Directory Organization\n\n```text\nsrc/\n├── App.tsx                 # Root component with routing and providers\n├── index.tsx              # Application entry point\n│\n├── components/            # Reusable UI components\n│   ├── index.ts          # Component exports\n│   ├── accordion/         # Accordion component\n│   ├── avatar/           # User avatar component\n│   ├── layout/           # Main layout wrapper\n│   │   ├── header/       # Header with navigation\n│   │   └── settings/     # User settings page\n│   ├── pagination/       # Pagination controls\n│   └── text/            # Text display components\n│\n├── routes/               # Page components organized by feature\n│   ├── index.ts         # Route exports\n│   ├── dashboard/       # Dashboard page with charts\n│   │   ├── index.tsx\n│   │   ├── queries.ts\n│   │   └── components/\n│   │       ├── deals-chart/      # Sales deals visualization\n│   │       └── latest-activities/ # Activity feed\n│   ├── companies/       # Company management\n│   │   ├── index.ts\n│   │   ├── list/       # Company list view\n│   │   ├── create/     # Create company form\n│   │   └── edit/       # Edit company details\n│   └── login/          # Authentication page\n│\n├── graphql/            # GraphQL operations and types\n│   ├── queries.ts      # SELECT operations\n│   ├── mutations.ts    # CREATE/UPDATE/DELETE operations\n│   ├── types.ts        # Generated operation types\n│   └── schema.types.ts # Generated schema types\n│\n├── providers/          # Application providers and configuration\n│   ├── index.ts\n│   ├── auth.ts         # Authentication provider\n│   └── data/\n│       ├── index.ts    # Data and live providers setup\n│       └── fetch-wrapper.ts # Custom fetch with auth\n│\n├── config/            # Configuration files\n│   └── resources.tsx   # Refine resource definitions\n│\n├── contexts/          # React context for state\n│   └── color-mode/    # Theme color context\n│\n├── test/              # Testing utilities and setup\n│   ├── test-wrapper.tsx  # Component wrapper for tests\n│   └── setup.ts          # Test environment configuration\n│\n└── utilities/         # Helper functions\n    └── index.tsx      # Formatting, colors, dates\n```\n\n### Key Files\n\n#### `src/App.tsx`\nRoot component setting up Refine framework with:\n- React Router for client-side routing\n- Ant Design theme configuration (Green theme)\n- Authentication with protected routes\n- Devtools for debugging\n- Command palette (Refine Kbar)\n\n#### `src/providers/data/index.ts`\nGraphQL client setup with:\n- HTTP client for CRUD operations\n- WebSocket client for real-time subscriptions\n- Automatic token inclusion in requests\n- Refine data and live providers\n\n#### `src/providers/auth.ts`\nAuthentication implementation with:\n- Login mutation with email\n- Token management (localStorage)\n- Session verification\n- User identity retrieval\n- Automatic logout on authentication errors\n\n#### `src/config/resources.tsx`\nRefine resource configuration mapping:\n- Routes to CRUD operations\n- Navigation menu items\n- Icons and labels\n- Currently supports: Dashboard, Companies\n\n#### `src/routes/dashboard/index.tsx`\nDashboard page displaying:\n- Sales metrics (deals chart)\n- Latest activities feed\n- GraphQL data fetching with `useCustom`\n\n#### `src/graphql/queries.ts`\nGraphQL SELECT operations:\n- User selection with filtering/sorting/pagination\n- Task stages retrieval\n- Dashboard aggregate counts\n\n#### `src/utilities/index.tsx`\nReusable utility functions:\n- `currencyNumber()` - Format values as USD currency\n- `getNameInitials()` - Extract name initials for avatars\n- `getRandomColorFromString()` - Deterministic color assignment\n- `getDateColor()` - Color status based on date proximity\n\n### Naming Conventions\n\n- **Components** - PascalCase, descriptive names (e.g., `CompanyForm`, `DashboardDealsChart`)\n- **Files** - kebab-case for directories, .tsx/.ts extensions (e.g., `deals-chart/index.tsx`)\n- **Constants** - UPPER_SNAKE_CASE (e.g., `API_URL`, `WS_URL`)\n- **Functions** - camelCase (e.g., `currencyNumber`, `getNameInitials`)\n- **Types/Interfaces** - PascalCase, often prefixed with type intent (e.g., `UpdateCompanyMutation`)\n- **GraphQL Operations** - UPPER_SNAKE_CASE suffixed with type (e.g., `USERS_SELECT_QUERY`, `UPDATE_COMPANY_MUTATION`)\n\n## Diagrams\n\n### System Architecture Diagram\n\n```mermaid\ngraph TB\n    subgraph \"Client Layer\"\n        Browser[\"Web Browser\"]\n        React[\"React Application\"]\n        Router[\"React Router\"]\n    end\n    \n    subgraph \"State Management\"\n        Refine[\"Refine Framework\"]\n        Auth[\"Auth Provider\"]\n        DataProvider[\"Data Provider\"]\n        LiveProvider[\"Live Provider\"]\n    end\n    \n    subgraph \"UI Components\"\n        AntD[\"Ant Design\"]\n        Charts[\"Ant Design Plots\"]\n        Icons[\"Ant Design Icons\"]\n    end\n    \n    subgraph \"Utilities \u0026 Config\"\n        FetchWrapper[\"Fetch Wrapper\u003cbr/\u003e(Auth + Error)\"]\n        GraphQL[\"GraphQL Client\"]\n        WSClient[\"WebSocket Client\"]\n    end\n    \n    subgraph \"Remote Services\"\n        API[\"GraphQL API\u003cbr/\u003ehttps://api.crm.refine.dev/graphql\"]\n        WS[\"WebSocket Server\u003cbr/\u003ewss://api.crm.refine.dev/graphql\"]\n    end\n    \n    Browser --\u003e|Renders| React\n    React --\u003e|Uses| Router\n    React --\u003e|Manages State| Refine\n    Refine --\u003e|Checks| Auth\n    Refine --\u003e|Fetches Data| DataProvider\n    Refine --\u003e|Subscribes| LiveProvider\n    React --\u003e|Displays| AntD\n    React --\u003e|Visualizes| Charts\n    AntD --\u003e|Uses| Icons\n    DataProvider --\u003e|Makes Requests| FetchWrapper\n    DataProvider --\u003e|Queries| GraphQL\n    LiveProvider --\u003e|Subscribes| WSClient\n    FetchWrapper --\u003e|HTTP| API\n    GraphQL --\u003e|HTTP + GraphQL| API\n    WSClient --\u003e|WebSocket| WS\n```\n\n### Component Hierarchy\n\n```mermaid\ngraph TD\n    App[\"App\"]\n    Router[\"Routes\"]\n    Auth[\"Authenticated\u003cbr/\u003e(Protected)\"]\n    Public[\"Authenticated\u003cbr/\u003e(Fallback)\"]\n    Layout[\"ComponentLayout\"]\n    Header[\"Header\"]\n    \n    Dashboard[\"Dashboard Page\"]\n    DashCharts[\"Dashboard Charts\"]\n    LatestActivities[\"Latest Activities\"]\n    \n    Companies[\"Company Routes\"]\n    CompanyList[\"Company List\"]\n    CompanyCreate[\"Create Company\"]\n    CompanyEdit[\"Edit Company\"]\n    CompanyForm[\"Company Form\"]\n    ContactsTable[\"Contacts Table\"]\n    \n    Login[\"Login Page\"]\n    \n    App --\u003e Router\n    Router --\u003e Auth\n    Router --\u003e Public\n    Auth --\u003e Layout\n    Public --\u003e Login\n    Layout --\u003e Header\n    Layout --\u003e Dashboard\n    Layout --\u003e Companies\n    Dashboard --\u003e DashCharts\n    Dashboard --\u003e LatestActivities\n    Companies --\u003e CompanyList\n    Companies --\u003e CompanyCreate\n    Companies --\u003e CompanyEdit\n    CompanyEdit --\u003e CompanyForm\n    CompanyEdit --\u003e ContactsTable\n```\n\n### GraphQL Operations Map\n\n```mermaid\ngraph LR\n    Queries[\"Queries\"]\n    Mutations[\"Mutations\"]\n    Types[\"Generated Types\"]\n    \n    Queries --\u003e|UsersSelect| Types\n    Queries --\u003e|TaskStagesSelect| Types\n    Queries --\u003e|DashboardTotalCounts| Types\n    \n    Mutations --\u003e|CreateCompany| Types\n    Mutations --\u003e|UpdateCompany| Types\n    Mutations --\u003e|CreateTask| Types\n    Mutations --\u003e|UpdateTask| Types\n    Mutations --\u003e|UpdateUser| Types\n    \n    Mutations --\u003e|UpdateTaskStage| Types\n    Queries --\u003e|Operations| Types\n```\n\n## Development Workflow\n\n### TypeScript \u0026 Type Safety\n\nThis project uses strict TypeScript configuration ensuring:\n- Strict null checks\n- No unused variables or parameters\n- No fallthrough switch cases\n- Type imports for better tree-shaking\n\n### Code Generation Workflow\n\n1. **Write GraphQL Operations**\n   ```typescript\n   // src/graphql/queries.ts\n   export const MY_QUERY = gql`\n     query GetUsers($filter: UserFilter!) {\n       users(filter: $filter) {\n         nodes { id name }\n       }\n     }\n   `;\n   ```\n\n2. **Run Code Generation**\n   ```powershell\n   npm run codegen\n   ```\n\n3. **Import Generated Types**\n   ```typescript\n   import type { GetUsersQuery } from \"@/graphql/types\";\n   \n   const { data } = useCustom\u003cGetUsersQuery\u003e({\n     meta: { gqlQuery: MY_QUERY }\n   });\n   ```\n\n### Code Quality\n\n- **ESLint** - Enforces code style and best practices\n- **TypeScript** - Static type checking\n- **Prettier** - Code formatting (auto-applied by codegen)\n- **Strict Mode** - React StrictMode enabled for development\n\n### Git Workflow\n\nRecommended practices:\n- Create feature branches from main\n- Commit messages describing the change\n- Run `npm run codegen` before committing GraphQL changes\n- Push to trigger CI/CD checks\n\n## Building and Deployment\n\n### Development Build\n```powershell\nnpm run dev\n```\n\n### Production Build\n```powershell\nnpm run build\n```\n\nCreates optimized output in `dist/`:\n- Minified JavaScript and CSS\n- Optimized assets\n- Source maps for debugging\n- Tree-shaking enabled\n\n### Docker Deployment\n\nThe project includes a `Dockerfile` for containerized deployment:\n\n```powershell\n# Build the image\ndocker build -t dashlytics:latest .\n\n# Run the container\ndocker run -p 3000:3000 dashlytics:latest\n```\n\nThe Dockerfile uses a multi-stage build:\n1. **deps** - Install dependencies\n2. **builder** - Compile TypeScript and build\n3. **runner** - Serve the static files\n\nThe production image serves built files using the `serve` package.\n\n### Build Targets\n\nThe `tsconfig.json` targets ES2020 with the following features:\n- Native async/await\n- Optional chaining (?.)\n- Nullish coalescing (??)\n- Dynamic imports\n- Promise support\n\n## Environment Variables\n\n### API Configuration\nConfigured in `src/providers/data/index.ts`:\n\n```typescript\nexport const API_BASE_URL = \"https://api.crm.refine.dev\";\nexport const API_URL = `${API_BASE_URL}/graphql`;\nexport const WS_URL = \"wss://api.crm.refine.dev/graphql\";\n```\n\nThese can be modified for different environments (development, staging, production).\n\n### Authentication\n- **Token Storage** - `localStorage.getItem(\"access_token\")`\n- **Login Endpoint** - Uses GraphQL mutation at API_URL\n- **Default Credentials** - Stored in `src/providers/auth.ts` for demo purposes\n\n### Feature Flags\nRefine configuration in `App.tsx`:\n```typescript\noptions={{\n  syncWithLocation: true,        // URL sync with component state\n  warnWhenUnsavedChanges: true, // Prompt on unsaved changes\n  projectId: \"86WOi9-huED18-lKC55a\",\n  liveMode: \"auto\",             // Real-time updates\n}}\n```\n\n## Testing\n\n### Test Framework\n\nDashlytics uses **Vitest** and **React Testing Library** for comprehensive testing:\n- **96 total tests** with **97% passing rate**\n- **9 test files** covering critical business logic\n- **Priority 1 modules** have 100% test coverage\n\n### Test Categories\n\n#### Priority 1: Critical Business Logic (All Passing)\n\n1. **Authentication Provider** - Login/logout flows, session management, error handling\n2. **Fetch Wrapper** - Authorization header injection, GraphQL error parsing\n3. **Utilities** - Currency formatting, name initials, date color calculation\n4. **Filter Utilities** - Saved views management, localStorage operations\n\n#### Priority 2: Component Integration Tests\n\n1. **Company CRUD** - List, create, and edit operations\n2. **Dashboard Components** - Data display and loading states\n3. **Forms** - Validation and submission\n\n### Test Utilities\n\n#### TestWrapper Component\n\nLocated at `src/test/test-wrapper.tsx`, provides necessary providers for component tests:\n\n- `QueryClientProvider` - React Query client for data fetching hooks\n- `ConfigProvider` - Ant Design theme configuration\n\n#### Test Setup\n\nThe test setup file (`src/test/setup.ts`) configures:\n\n- `@testing-library/jest-dom` matchers\n- `localStorage` mocking\n- `window.matchMedia` mocking\n\n* Cleanup after each test\n\n### Running Tests\n\n```bash\n# Run all tests once\nnpm test\n\n# Run tests in watch mode\nnpm run test:watch\n\n# Run tests with UI\nnpm run test:ui\n\n# Run tests with coverage report\nnpm run test:coverage\n\n# Run specific test file\nnpm test -- src/providers/__tests__/auth.test.ts\n```\n\n### Test Structure\n\nTests are located next to their source files in `__tests__` directories:\n\n```text\nsrc/\n├── providers/\n│   ├── __tests__/\n│   │   └── auth.test.ts\n│   └── data/\n│       └── __tests__/\n│           └── fetch-wrapper.test.ts\n├── routes/\n│   ├── companies/\n│   │   ├── list/\n│   │   │   ├── __tests__/\n│   │   │   │   ├── company-list.test.tsx\n│   │   │   │   ├── create-modal.test.tsx\n│   │   │   │   └── filter-utils.test.ts\n│   │   └── edit/\n│   │       └── __tests__/\n│   │           └── company-edit.test.tsx\n│   └── dashboard/\n│       ├── __tests__/\n│       │   └── dashboard.test.tsx\n│       └── components/\n│           └── total-counts-card/\n│               └── __tests__/\n│                   └── index.test.tsx\n└── utilities/\n    └── __tests__/\n        └── utilities.test.ts\n```\n\n### Best Practices\n\n- Test behavior, not implementation details\n- Use appropriate queries (`getByRole`, `getByLabelText`, `getByText`)\n- Handle async operations with `waitFor` and `findBy`\n- Mock external dependencies (API calls, localStorage, third-party services)\n- Keep tests focused with one assertion per test when possible\n\n### Coverage Goals\n\n- **Priority 1 modules**: 80%+ coverage\n- **Priority 2 modules**: 60-70% coverage\n- **Overall project**: 60-70% (realistic, not 100%)\n\n\n### Performance Testing\n\nMonitor with Refine Devtools:\n\n```tsx\n// Available in App.tsx\n\u003cDevtoolsProvider\u003e\n  \u003cRefine {...props}\u003e\n    {/* content */}\n    \u003cDevtoolsPanel /\u003e\n  \u003c/Refine\u003e\n\u003c/DevtoolsProvider\u003e\n```\n\n- - -\n\n**Test Statistics**: 96 tests, 97% passing rate","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmosioc%2Fdashlytics-dashboard","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmosioc%2Fdashlytics-dashboard","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmosioc%2Fdashlytics-dashboard/lists"}