{"id":40027322,"url":"https://github.com/aspsptyd/tracker-task","last_synced_at":"2026-01-19T04:03:30.516Z","repository":{"id":331534568,"uuid":"1129141330","full_name":"aspsptyd/tracker-task","owner":"aspsptyd","description":"Live time tracker task (vibe coding)","archived":false,"fork":false,"pushed_at":"2026-01-10T14:33:51.000Z","size":1248,"stargazers_count":0,"open_issues_count":4,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2026-01-10T22:42:43.985Z","etag":null,"topics":["ai-assistant","javascript","mysql-database","vibe-coding"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","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/aspsptyd.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":"2026-01-06T17:00:02.000Z","updated_at":"2026-01-10T02:13:09.000Z","dependencies_parsed_at":null,"dependency_job_id":null,"html_url":"https://github.com/aspsptyd/tracker-task","commit_stats":null,"previous_names":["aspsptyd/tracker-task"],"tags_count":null,"template":false,"template_full_name":null,"purl":"pkg:github/aspsptyd/tracker-task","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/aspsptyd%2Ftracker-task","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/aspsptyd%2Ftracker-task/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/aspsptyd%2Ftracker-task/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/aspsptyd%2Ftracker-task/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/aspsptyd","download_url":"https://codeload.github.com/aspsptyd/tracker-task/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/aspsptyd%2Ftracker-task/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":28561688,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-01-19T03:31:16.861Z","status":"ssl_error","status_checked_at":"2026-01-19T03:31:15.069Z","response_time":67,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.6:443 state=error: 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":["ai-assistant","javascript","mysql-database","vibe-coding"],"created_at":"2026-01-19T04:03:30.030Z","updated_at":"2026-01-19T04:03:30.503Z","avatar_url":"https://github.com/aspsptyd.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# ⏰ Time Tracker Application\n\nA full-stack time tracking and task management application with user authentication, built using Node.js/Express.js backend with Supabase database and vanilla JavaScript frontend.\n\n## 🚀 Features\n\n- **Task Management**: Create, edit, and delete tasks with titles and descriptions\n- **Time Tracking**: Start and stop timers for individual tasks with live updates\n- **Session Management**: Track multiple sessions per task with start/end times and durations\n- **User Authentication**: Secure registration and login functionality with user management\n- **Statistics Dashboard**: View daily and weekly statistics including total tasks and duration\n- **History Task Section**: View task completion history organized by creation date\n- **Session Tracking**: Detailed session tracking with timestamps and duration calculation\n- **Dashboard Session Info**: Real-time display of active sessions and remaining time\n- **Dark/Light Theme**: Toggle between themes with persistent preference\n- **Responsive UI**: Clean, modern interface optimized for productivity\n- **Enhanced Security**: Content Security Policy (CSP) and conditional debug output for production environments\n\n## 🛠️ Tech Stack\n\n- **Backend**: Node.js + Express.js\n- **Database**: Supabase (PostgreSQL)\n- **Authentication**: Supabase Auth\n- **Frontend**: Vanilla JavaScript, HTML, CSS\n- **Deployment**: Vercel (Backend), GitHub Pages (Frontend)\n- **Security**: Content Security Policy (CSP), Conditional Debug Output\n\n## 📦 Modular Architecture\n\nThe backend follows a modular architecture with the following structure:\n\n```\nbackend/\n├── api/                      # API routes directory\n├── src/\n│   ├── auth/                 # Authentication module\n│   │   ├── controller.js     # Authentication business logic\n│   │   ├── routes.js         # Authentication API routes\n│   │   └── middleware.js     # Authentication middleware\n│   ├── middleware/           # Shared middleware\n│   │   └── auth.js           # Authentication middleware\n│   ├── tasks/                # Task management module\n│   │   ├── controller.js     # Task business logic\n│   │   ├── statsController.js # Statistics business logic\n│   │   ├── historyController.js # History business logic\n│   │   └── routes.js         # Task API routes\n│   ├── sessions/             # Session management module\n│   │   └── controller.js     # Session business logic\n│   └── utils/                # Utility functions\n│       └── format.js         # Formatting utilities\n├── index.js                  # Main application entry point\n├── app.js                    # Frontend JavaScript\n├── style.css                 # Styling\n├── index.html                # Main HTML\n├── login.html                # Login page\n├── register.html             # Registration page\n├── vercel.json               # Vercel deployment configuration\n└── package.json              # Project dependencies and scripts\n```\n\n## 📋 Prerequisites\n\n- Node.js installed\n- Supabase project with database tables created\n- Supabase Auth enabled for user authentication\n\n## 🚀 Installation \u0026 Setup\n\n### 1. Clone the Repository\n\n```bash\ngit clone \u003crepository-url\u003e\ncd time-tracker\n```\n\n### 2. Backend Setup\n\n```bash\n# Navigate to backend directory\ncd backend\n\n# Install dependencies\nnpm install\n\n# Create environment file\ncp .env.example .env\n\n# Edit .env with your Supabase configuration\n```\n\n### 3. Database Setup\n\nCreate the required database tables in your Supabase project:\n\n```sql\n-- Tasks table\nCREATE TABLE tasks (\n  id BIGSERIAL PRIMARY KEY,\n  title VARCHAR(255) NOT NULL,\n  description TEXT,\n  status TEXT DEFAULT 'active' CHECK (status IN ('active', 'completed')),\n  created_at TIMESTAMP WITH TIME ZONE DEFAULT NOW(),\n  completed_at TIMESTAMP WITH TIME ZONE,\n  user_id UUID REFERENCES auth.users(id)\n);\n\n-- Task sessions table\nCREATE TABLE task_sessions (\n  id BIGSERIAL PRIMARY KEY,\n  task_id BIGINT REFERENCES tasks(id) ON DELETE CASCADE,\n  start_time TIMESTAMP WITH TIME ZONE NOT NULL,\n  end_time TIMESTAMP WITH TIME ZONE NOT NULL,\n  duration INTEGER NOT NULL,\n  keterangan TEXT,\n  created_at TIMESTAMP WITH TIME ZONE DEFAULT NOW(),\n  user_id UUID REFERENCES auth.users(id)\n);\n\n-- Profiles table for user information\nCREATE TABLE profiles (\n  id UUID REFERENCES auth.users(id) ON DELETE CASCADE,\n  email TEXT UNIQUE,\n  nama_lengkap TEXT NOT NULL,\n  alamat TEXT,\n  username TEXT UNIQUE NOT NULL,\n  created_at TIMESTAMP WITH TIME ZONE DEFAULT NOW(),\n  updated_at TIMESTAMP WITH TIME ZONE DEFAULT NOW(),\n  PRIMARY KEY (id)\n);\n```\n\n### 4. Environment Configuration\n\nConfigure your `.env` file:\n\n```env\n# Supabase Configuration\nNEXT_PUBLIC_SUPABASE_URL=https://your-project.supabase.co\nNEXT_PUBLIC_SUPABASE_ANON_KEY=your-anon-key\nSUPABASE_SERVICE_ROLE_KEY=your-service-role-key\n\n# Server Configuration\nPORT=3000\nNODE_ENV=development\n\n# API Base URL (for frontend to connect to backend)\nNEXT_PUBLIC_API_BASE_URL=http://localhost:3000\n```\n\n### 5. Run the Application\n\n```bash\n# Navigate to backend directory and start the server\ncd backend\nnpm start\n```\n\nThe application will be available at `http://localhost:3000`\n\n## 🔐 Authentication System\n\nThe application includes a comprehensive authentication system:\n\n### Registration\n- User fields: email, nama_lengkap, alamat, username, password\n- Validation: Email format validation, password strength requirements\n- Security: Passwords are securely hashed using Supabase Auth\n\n### Login\n- Credentials: Accepts email or username with password\n- Session Management: Secure session handling with JWT tokens\n- After successful login, user sessions are maintained via JWT tokens stored in localStorage\n- All subsequent API requests include the authorization header with the JWT token\n\n### API Endpoints for Authentication\n\n| Method | Endpoint | Description | Body |\n|--------|----------|-------------|------|\n| POST | `/auth/register` | Register new user | `{ email, nama_lengkap, alamat, username, password }` |\n| POST | `/auth/login` | Authenticate user | `{ email_or_username, password }` |\n| POST | `/auth/logout` | End user session | - |\n| GET | `/auth/me` | Get current user profile | - (requires authentication) |\n| PUT | `/auth/profile` | Update user profile | `{ nama_lengkap, alamat, username }` |\n\n## 🌐 API Endpoints\n\n### Task Management Endpoints\n\n| Method | Endpoint | Description | Body |\n|--------|----------|-------------|------|\n| GET | `/api/ping` | Health check | - |\n| GET | `/api/stats` | Dashboard statistics | - |\n| GET | `/api/tasks` | List all tasks with aggregated info | - |\n| POST | `/api/tasks` | Create new task | `{ title, description }` |\n| GET | `/api/tasks/:id` | Get task detail with sessions | - |\n| PUT | `/api/tasks/:id` | Update task | `{ title, description }` |\n| DELETE | `/api/tasks/:id` | Delete task | - |\n| POST | `/api/tasks/:id/sessions` | Add session to task | `{ start_time, end_time }` (ISO) |\n| PUT | `/api/tasks/:taskId/sessions/:sessionId` | Update session | `{ start_time, end_time }` |\n| DELETE | `/api/tasks/:taskId/sessions/:sessionId` | Delete session | - |\n| PUT | `/api/tasks/:id` | Update task (including status) | `{ title, description, status }` |\n| GET | `/api/history` | Get task history organized by completion date | - |\n\n## 🔒 Security Features\n\n### Content Security Policy (CSP)\n- **Script Protection**: Restricts script sources to prevent XSS attacks\n- **Frame Protection**: Controls which sources can be embedded in iframes\n- **Style Protection**: Limits where stylesheets can be loaded from\n- **Connect Protection**: Restricts API endpoint connections\n- **Vercel Integration**: Properly configured to allow Vercel live feedback features\n\n### Conditional Debug Output\n- **Production Safe**: Debug logs are disabled in production environments\n- **Development Friendly**: Full debug information available during development\n- **Information Protection**: Prevents sensitive system information from being exposed\n- **Environment Detection**: Automatically detects NODE_ENV to determine logging level\n\n## 🎨 Frontend Features\n\n### Session Timeout Management\n- **Countdown Timer**: Shows remaining session time with continuous updates every second\n- **Visual Indicators**: Different colors and animations indicate session status\n  - Normal: White/black text (depending on theme)\n  - Warning (\u003c 10 minutes): Orange/yellow text with bold styling\n  - Critical (\u003c 5 minutes): Red text with pulsing animation\n  - Expired: Red/black text indicating session has expired\n- **Automatic Logout**: User is automatically logged out when session expires\n- **Theme Compatibility**: Colors adjust automatically for light/dark mode\n- **Fallback Mechanism**: Uses login time if JWT expiration data is unavailable\n- **Session Storage**: Tracks login time in localStorage for fallback calculations\n\n### Dashboard\n- **Total Hari Ini**: Shows the total accumulated time worked today\n- **Total Keseluruhan**: Shows the total accumulated time across all tasks\n- **Task Running**: Count of currently active timers\n- **Total Task in Week**: Number of tasks completed this week\n- **Active Session Timer**: Real-time display of currently running sessions with elapsed time\n- **Session Duration**: Shows duration for each completed session\n- **Session Status**: Visual indicators for active vs completed sessions\n\n### Task Management\n- Create new tasks with title and description\n- Edit existing tasks\n- Delete tasks (and all associated sessions)\n- Mark tasks as completed/incomplete\n- Tasks are organized into \"Active Tasks\" and \"Completed Tasks\" sections\n\n### Time Tracking\n- Start/Stop timers for individual tasks\n- Dynamic button visibility: When a task is running, the \"Start\" button is hidden and replaced with a \"Stop\" button\n- Live timer display with real-time updates\n- Session history with start/end times and duration\n\n### Session Management After Login\n- **Session Persistence**: After login, user sessions are maintained via JWT tokens\n- **Session Tracking**: Each task can have multiple time tracking sessions\n- **Session Details**: View detailed information about each session including start time, end time, and duration\n- **Session Editing**: Modify session times or add descriptions (keterangan) to sessions\n- **Session History**: All sessions are stored and accessible even after logout and login\n- **User Isolation**: Sessions are tied to the authenticated user, ensuring privacy\n- **Dashboard Session Display**: Active sessions are prominently displayed on the dashboard with real-time timers\n- **Remaining Time Calculation**: The application calculates and shows how much time remains in active sessions\n- **Session Continuation**: If a session was active when the user logged out, it can be resumed after login\n- **Session Timeout Management**: Displays countdown timer showing remaining session time with visual indicators\n- **Theme-Aware Colors**: Session timer colors adjust automatically based on light/dark theme\n- **Automatic Logout**: User is automatically logged out when session expires for security\n- **Visual Warnings**: Color changes and animations warn users when session is about to expire\n\n### History Task Section\n- **Date-based Organization**: Tasks are grouped by creation date\n- **Today's Label**: Current day shows as \"Hari Ini\" (Today in Indonesian)\n- **Date Formatting**: Previous days show in \"DD MMM YYYY\" format\n- **Progress Indicators**: Each date group shows progress in \"X/Y\" format\n\n## ☁️ Deploying to Vercel\n\n### Prerequisites\n- A Vercel account\n- The Vercel CLI installed (`npm i -g vercel`)\n\n### Security Best Practices for Deployment\n\nWhen deploying to production, ensure you follow these security practices:\n\n- **Environment Variables**: Never commit sensitive data to version control\n- **Supabase Keys**: Use proper role-based keys (anon for client, service role for server)\n- **Debug Output**: The application automatically disables debug logs in production\n- **CSP Headers**: Content Security Policy is enforced in production environments\n\n### Deployment Steps\n\n1. Navigate to the backend directory:\n   ```bash\n   cd backend\n   ```\n\n2. Deploy to Vercel:\n   ```bash\n   vercel\n   ```\n\n3. Set Environment Variables in the Vercel dashboard:\n   - `NEXT_PUBLIC_SUPABASE_URL`: Your Supabase project URL\n   - `NEXT_PUBLIC_SUPABASE_ANON_KEY`: Your Supabase anon key\n   - `SUPABASE_SERVICE_ROLE_KEY`: Your Supabase service role key\n\n## 🧪 Testing\n\n### Running Unit Tests\n\nTo run the existing unit tests:\n\n```bash\ncd backend\nnode test/secondsToString.test.js\n```\n\nThis will run the unit tests for the `secondsToString` function and display the results.\n\n## 🔧 Troubleshooting\n\n### Common Issues\n\n#### Port Already in Use Error\nIf you encounter `listen EADDRINUSE: address already in use ::1:3000`:\n```bash\n# Identify the process using port 3000\nlsof -i :3000\n\n# Kill the process (replace PID with actual process ID)\nkill \u003cPID\u003e\n\n# Or use a different port\nPORT=3001 npm start\n```\n\n#### Registration Error: \"Unexpected token '\u003c'\"\nCommon causes and solutions:\n1. Ensure the backend server is running\n2. Verify your Supabase configuration in `.env` file\n3. Check that the `profiles` table exists in your Supabase database\n4. Look at server console for specific error messages\n\n#### Session Management Issues After Login\n- Ensure JWT tokens are properly stored in localStorage after login\n- Check that authorization headers are included in all authenticated API requests\n- Verify that session data is properly associated with the logged-in user\n- Confirm that session times are accurately calculated and displayed\n- Active sessions will continue to run and show remaining time on the dashboard after login\n- Session timeout countdown appears in the header next to the user's name after login\n- Session automatically expires after 1 hour (or as configured in JWT) with automatic logout\n- Session timer colors adjust based on light/dark theme for optimal visibility\n\n## 🤝 Contributing\n\n1. Fork the repository\n2. Create a feature branch (`git checkout -b feature/amazing-feature`)\n3. Commit your changes (`git commit -m 'Add some amazing feature'`)\n4. Push to the branch (`git push origin feature.amazing-feature`)\n5. Open a Pull Request\n\n## 🐛 Known Issues \u0026 Future Enhancements\n\n- Export functionality for reports (CSV/PDF)\n- Daily/weekly summary charts\n- Idle detection to improve accuracy\n- Task tagging and categorization\n- More advanced filtering and search capabilities\n\n## 📄 License\n\nThis project is licensed under the MIT License - see the LICENSE file for details.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Faspsptyd%2Ftracker-task","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Faspsptyd%2Ftracker-task","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Faspsptyd%2Ftracker-task/lists"}