diff --git a/README.md b/README.md new file mode 100644 index 0000000..35ebd3c --- /dev/null +++ b/README.md @@ -0,0 +1,116 @@ +# LiveDash-Node + +A real-time analytics dashboard for monitoring user sessions and interactions with interactive data visualizations and detailed metrics. + +![Next.js](https://img.shields.io/badge/dynamic/regex?url=https%3A%2F%2Fraw.githubusercontent.com%2Fkjanat%2Flivedash-node%2Fmaster%2Fpackage.json&search=%22next%22%5Cs*%3A%5Cs*%22%5C%5E(%3F%3Cversion%3E%5Cd%2B%5C.%5Cd*).*%22&replace=%24%3Cversion%3E&logo=nextdotjs&label=Nextjs&color=%23000000) +![React](https://img.shields.io/badge/dynamic/regex?url=https%3A%2F%2Fraw.githubusercontent.com%2Fkjanat%2Flivedash-node%2Fmaster%2Fpackage.json&search=%22react%22%5Cs*%3A%5Cs*%22%5C%5E(%3F%3Cversion%3E%5Cd%2B%5C.%5Cd*).*%22&replace=%24%3Cversion%3E&logo=react&label=React&color=%2361DAFB) +![TypeScript](https://img.shields.io/badge/dynamic/regex?url=https%3A%2F%2Fraw.githubusercontent.com%2Fkjanat%2Flivedash-node%2Fmaster%2Fpackage.json&search=%22typescript%22%5Cs*%3A%5Cs*%22%5C%5E(%3F%3Cversion%3E%5Cd%2B%5C.%5Cd*).*%22&replace=%24%3Cversion%3E&logo=typescript&label=TypeScript&color=%233178C6) +![Prisma](https://img.shields.io/badge/dynamic/regex?url=https%3A%2F%2Fraw.githubusercontent.com%2Fkjanat%2Flivedash-node%2Fmaster%2Fpackage.json&search=%22prisma%22%5Cs*%3A%5Cs*%22%5C%5E(%3F%3Cversion%3E%5Cd%2B%5C.%5Cd*).*%22&replace=%24%3Cversion%3E&logo=prisma&label=Prisma&color=%232D3748) +![TailwindCSS](https://img.shields.io/badge/dynamic/regex?url=https%3A%2F%2Fraw.githubusercontent.com%2Fkjanat%2Flivedash-node%2Fmaster%2Fpackage.json&search=%22tailwindcss%22%5Cs*%3A%5Cs*%22%5C%5E(%3F%3Cversion%3E%5Cd%2B%5C.%5Cd*).*%22&replace=%24%3Cversion%3E&logo=tailwindcss&label=TailwindCSS&color=%2306B6D4) + +## Features + +- **Real-time Session Monitoring**: Track and analyze user sessions as they happen +- **Interactive Visualizations**: Geographic maps, response time distributions, and more +- **Advanced Analytics**: Detailed metrics and insights about user behavior +- **User Management**: Secure authentication with role-based access control +- **Customizable Dashboard**: Filter and sort data based on your specific needs +- **Session Details**: In-depth analysis of individual user sessions + +## Tech Stack + +- **Frontend**: React 19, Next.js 15, TailwindCSS 4 +- **Backend**: Next.js API Routes, Node.js +- **Database**: Prisma ORM with SQLite (default), compatible with PostgreSQL +- **Authentication**: NextAuth.js +- **Visualization**: Chart.js, D3.js, React Leaflet +- **Data Processing**: Node-cron for scheduled tasks + +## Getting Started + +### Prerequisites + +- Node.js (LTS version recommended) +- npm or yarn + +### Installation + +1. Clone this repository: + + ```bash + git clone https://github.com/kjanat/livedash-node.git + cd livedash-node + ``` + +2. Install dependencies: + + ```bash + npm install + ``` + +3. Set up the database: + + ```bash + npm run prisma:generate + npm run prisma:migrate + npm run prisma:seed + ``` + +4. Start the development server: + + ```bash + npm run dev + ``` + +5. Open your browser and navigate to + +## Environment Setup + +Create a `.env` file in the root directory with the following variables: + +```env +DATABASE_URL="file:./dev.db" +NEXTAUTH_URL=http://localhost:3000 +NEXTAUTH_SECRET=your-secret-here +``` + +## Project Structure + +- `app/`: Next.js App Router components and pages +- `components/`: Reusable React components +- `lib/`: Utility functions and shared code +- `pages/`: API routes and server-side code +- `prisma/`: Database schema and migrations +- `public/`: Static assets +- `docs/`: Project documentation + +## Available Scripts + +- `npm run dev`: Start the development server +- `npm run build`: Build the application for production +- `npm run start`: Run the production build +- `npm run lint`: Run ESLint +- `npm run format`: Format code with Prettier +- `npm run prisma:studio`: Open Prisma Studio to view database + +## Contributing + +1. Fork the repository +2. Create your feature branch: `git checkout -b feature/my-new-feature` +3. Commit your changes: `git commit -am 'Add some feature'` +4. Push to the branch: `git push origin feature/my-new-feature` +5. Submit a pull request + +## License + +This project is not licensed; you are no commercial use is allowed without explicit permission. Free to use for educational purposes/ personal projects. +Feel free to modify and adapt the code as needed. + +## Acknowledgments + +- [Next.js](https://nextjs.org/) +- [Prisma](https://prisma.io/) +- [TailwindCSS](https://tailwindcss.com/) +- [Chart.js](https://www.chartjs.org/) +- [D3.js](https://d3js.org/) +- [React Leaflet](https://react-leaflet.js.org/) diff --git a/TODO.md b/TODO.md index 317678f..c6dd717 100644 --- a/TODO.md +++ b/TODO.md @@ -1,43 +1,96 @@ -# Application Improvement TODOs +# TODO.md -This file lists general areas for improvement and tasks that are broader in scope or don't map to a single specific file. +## Dashboard Integration -## General Enhancements & Features - -- [ ] **Real-time Updates:** Implement real-time updates for the dashboard and session list (e.g., using WebSockets or Server-Sent Events). -- [ ] **Data Export:** Provide functionality for users (especially admins) to export session data (e.g., to CSV). -- [ ] **Customizable Dashboard:** Allow users to customize their dashboard view, choosing which metrics or charts are most important to them. -- [ ] **Resolve `GeographicMap.tsx` and `ResponseTimeDistribution.tsx` data simulation:** The `docs/dashboard-components.md` mentions these use simulated data. Investigate integrating real data sources. - -## Robustness and Maintainability - -- [ ] **Comprehensive Testing:** - - [ ] Implement unit tests (e.g., for utility functions, API logic). - - [ ] Implement integration tests (e.g., for API endpoints with the database). - - [ ] Implement end-to-end tests (e.g., for user flows using Playwright or Cypress). -- [ ] **Error Monitoring and Logging:** Integrate a robust error monitoring service (like Sentry) and enhance server-side logging. -- [ ] **Accessibility (a11y):** Review and improve the application's accessibility according to WCAG guidelines (keyboard navigation, screen reader compatibility, color contrast). - -## Security Enhancements - -- [x] **Password Reset Functionality:** Implement a secure password reset mechanism. (Related: `app/forgot-password/page.tsx`, `app/reset-password/page.tsx`, `pages/api/forgot-password.ts`, `pages/api/reset-password.ts` - ensure these are robust and secure if already implemented). -- [ ] **Two-Factor Authentication (2FA):** Consider adding 2FA, especially for admin accounts. -- [ ] **Input Validation and Sanitization:** Rigorously review and ensure all user inputs (API request bodies, query parameters) are validated and sanitized. - -## Code Quality and Development Practices - -- [ ] **Code Reviews:** Enforce code reviews for all changes. -- [ ] **Environment Configuration:** Ensure secure and effective management of environment-specific configurations. -- [ ] **Dependency Review:** Periodically review dependencies for vulnerabilities or updates. -- [ ] **Documentation:** - - Ensure `docs/dashboard-components.md` is up-to-date with actual component implementations. - - Verify that "Dashboard Enhancements" (Improved Layout, Visual Hierarchies, Color Coding) are consistently applied. +- [ ] **Resolve `GeographicMap.tsx` and `ResponseTimeDistribution.tsx` data simulation** + - Investigate integrating real data sources with server-side analytics + - Replace simulated data mentioned in `docs/dashboard-components.md` ## Component Specific -- [ ] **`pages/api/dashboard/users.ts`:** Implement robust emailing of temporary passwords. -- [x] **`app/dashboard/sessions/page.tsx`:** Implement pagination, advanced filtering, and sorting. +- [ ] **Implement robust emailing of temporary passwords** + - File: `pages/api/dashboard/users.ts` + - Set up proper email service integration + +- [x] **Session page improvements** ✅ + - File: `app/dashboard/sessions/page.tsx` + - Implemented pagination, advanced filtering, and sorting ## File Cleanup -- [x] Review and remove `.bak` and `.new` files once changes are integrated (e.g., `GeographicMap.tsx.bak`, `SessionDetails.tsx.bak`, `SessionDetails.tsx.new`). +- [x] **Remove backup files** ✅ + - Reviewed and removed `.bak` and `.new` files after integration + - Cleaned up `GeographicMap.tsx.bak`, `SessionDetails.tsx.bak`, `SessionDetails.tsx.new` + +## Database Schema Improvements + +- [ ] **Update EndTime field** + - Make `endTime` field nullable in Prisma schema to match TypeScript interfaces + +- [ ] **Add database indices** + - Add appropriate indices to improve query performance + - Focus on dashboard metrics and session listing queries + +- [ ] **Implement production email service** + - Replace console logging in `lib/sendEmail.ts` + - Consider providers: Nodemailer, SendGrid, AWS SES + +## General Enhancements & Features + +- [ ] **Real-time updates** + - Implement for dashboard and session list + - Consider WebSockets or Server-Sent Events + +- [ ] **Data export functionality** + - Allow users (especially admins) to export session data + - Support CSV format initially + +- [ ] **Customizable dashboard** + - Allow users to customize dashboard view + - Let users choose which metrics/charts are most important + +## Testing & Quality Assurance + +- [ ] **Comprehensive testing suite** + - [ ] Unit tests for utility functions and API logic + - [ ] Integration tests for API endpoints with database + - [ ] End-to-end tests for user flows (Playwright or Cypress) + +- [ ] **Error monitoring and logging** + - Integrate robust error monitoring service (Sentry) + - Enhance server-side logging + +- [ ] **Accessibility improvements** + - Review application against WCAG guidelines + - Improve keyboard navigation and screen reader compatibility + - Check color contrast ratios + +## Security Enhancements + +- [x] **Password reset functionality** ✅ + - Implemented secure password reset mechanism + - Files: `app/forgot-password/page.tsx`, `app/reset-password/page.tsx`, `pages/api/forgot-password.ts`, `pages/api/reset-password.ts` + +- [ ] **Two-Factor Authentication (2FA)** + - Consider adding 2FA, especially for admin accounts + +- [ ] **Input validation and sanitization** + - Review all user inputs (API request bodies, query parameters) + - Ensure proper validation and sanitization + +## Code Quality & Development + +- [ ] **Code review process** + - Enforce code reviews for all changes + +- [ ] **Environment configuration** + - Ensure secure management of environment-specific configurations + +- [ ] **Dependency management** + - Periodically review dependencies for vulnerabilities + - Keep dependencies updated + +- [ ] **Documentation updates** + - [ ] Ensure `docs/dashboard-components.md` reflects actual implementations + - [ ] Verify "Dashboard Enhancements" are consistently applied + - [ ] Update documentation for improved layout and visual hierarchies