🚀 ArkOne Projects - Professional Timesheet Quick Entry

A professional, mobile-first React application for streamlined timesheet management and project tracking in ERPNext.

📸 Screenshots

Mobile-First Kanban Board

Drag-and-drop task management with real-time status updates

Professional Timesheet Interface

Clean, professional timesheet entry with detailed tracking

Advanced Filter System

Powerful filtering and search capabilities for large project teams

Mobile-Responsive Design

Optimized for mobile devices with touch-friendly interfaces

🚀 Features

🕒 Professional Timesheet Management

• Quick Entry Interface - Streamlined timesheet creation with minimal clicks
• Real-time Validation - Instant feedback on data entry with professional error handling
• Multiple Activity Types - Support for Development, Testing, Research, Documentation, and custom activities
• Batch Operations - Efficient handling of multiple timesheet entries

✅ Advanced Task Management

• Kanban Board - Visual task management with drag-and-drop functionality
• Smart Filtering - Advanced search and filter system with persistent preferences
• Assignment System - Native ERPNext assignment integration with ToDo management
• Status Tracking - Real-time task status updates with visual indicators

🎨 Modern User Experience

• Mobile-First Design - Responsive interface optimized for all device sizes
• Professional UI - Clean, subtle design focused on productivity
• React 18 - Modern React architecture with hooks and context
• Performance Optimized - Efficient rendering and state management

🔧 Technical Excellence

• ERPNext Integration - Native integration with ERPNext Project and Task modules
• API-First Architecture - RESTful APIs for all operations
• Error Handling - Comprehensive error management and user feedback
• Type Safety - Modern JavaScript with proper validation

📋 Overview

ArkOne Projects is a professional timesheet and project management application built for ERPNext. It transforms the traditional project management experience with a modern, mobile-first React interface that makes timesheet entry and task management intuitive and efficient.

Key Capabilities:

• Streamlined Timesheet Entry - Reduce time tracking overhead by 70%
• Visual Project Management - Kanban boards for better project visibility
• Mobile-Optimized - Full functionality on any device
• Enterprise Ready - Built for teams of all sizes with ERPNext integration

Developed by ArkOne Software, this application brings consumer-grade user experience to enterprise project management.

🔧 Installation

Prerequisites

• Frappe v14+
• ERPNext v14+
• Python 3.10+

Using Bench

# Navigate to your bench directory
cd frappe-bench

# Get the app from GitHub
bench get-app arkone-projects https://github.com/ArkOne-Softwares/timesheet-quick-entry.git

# Install the app on your site
bench --site your-site.local install-app arkone-projects

# Build and restart
bench build
bench restart

Manual Installation

If you prefer manual installation:

1. Clone the repository into your apps folder:

   cd frappe-bench/apps
   git clone https://github.com/ArkOne-Softwares/timesheet-quick-entry.git arkone-projects

2. Install dependencies:

   cd arkone-projects
   pip install -e .

3. Install the app on your site:

   cd ../../
   bench --site your-site.local install-app arkone-projects
   bench build
   bench restart

💻 Usage

Getting Started

1. Navigate to Projects → ArkOne Projects in your ERPNext desk
2. Or access directly via /app/project-home

Main Features

📊 Kanban Board

• Drag & Drop: Move tasks between status columns
• Visual Indicators: Priority colors and progress tracking
• Quick Actions: Edit, assign, and update tasks inline
• Mobile Optimized: Horizontal scrolling on mobile devices

⏱️ Timesheet Management

• Quick Entry: Add timesheet entries directly from task view
• Smart Defaults: Auto-populated project and customer information
• Activity Types: Choose from Development, Testing, Research, Documentation
• Validation: Real-time validation with professional error handling

🔍 Advanced Filtering

• Search: Find tasks by name, description, or project
• Filters: Priority, status, assignment, and date ranges
• Saved Views: Persistent filter preferences
• Mobile Filter Modal: Optimized for small screens

👥 Assignment System

• Quick Assignment: One-click self-assignment
• Team Management: Assign tasks to team members
• Native Integration: Uses ERPNext's assignment system

✅ Implementation Status

🎯 Completed Features

✅ Backend Architecture

• RESTful API Layer - 12+ endpoints for all operations
• Native ERPNext Integration - Uses Project, Task, Timesheet doctypes
• Assignment System - ToDo doctype integration for assignments
• Error Handling - Comprehensive validation and error responses
• Activity Type Management - Dynamic activity type creation and management

✅ Frontend Foundation

• React 18 Application - Modern React with hooks and context
• Mobile-First Design - Responsive layouts for all screen sizes
• Professional UI - Clean, subtle design focused on productivity
• State Management - Context API with useReducer pattern
• Component Library - Reusable, modular components

✅ Core Features

• Kanban Board - Drag-and-drop with react-beautiful-dnd
• Timesheet Interface - Professional timesheet entry and management
• Advanced Filtering - Search, filters, and saved preferences
• Project Management - Dynamic project creation with search
• Assignment System - Native ERPNext assignment integration

✅ Technical Implementation

• TypeScript Ready - Modern JavaScript with proper validation
• Performance Optimized - Efficient rendering and API calls
• Error Boundaries - Graceful error handling throughout
• Build System - Webpack integration with ERPNext

🔄 Development Roadmap

Phase 1: Foundation ✅ Complete

• ✅ Backend API development
• ✅ React application setup
• ✅ Basic component structure

Phase 2: Core Features ✅ Complete

• ✅ Kanban board implementation
• ✅ Timesheet management system
• ✅ Assignment integration

Phase 3: UI/UX Enhancement ✅ Complete

• ✅ Mobile-first responsive design
• ✅ Professional UI styling
• ✅ Advanced filtering system
• ✅ Error handling and validation

Phase 4: Advanced Features 🚧 In Progress

• 🔄 Dashboard and analytics
• 🔄 Bulk operations
• 🔄 Advanced reporting
• 🔄 Notification system

Phase 5: Enterprise Features 📋 Planned

• 📋 Team collaboration tools
• 📋 Advanced permissions
• 📋 API rate limiting
• 📋 Audit logging

🛠️ Development

Quick Start Commands

# Install dependencies
npm install

# Development mode (auto-rebuild)
npm run dev

# Production build
npm run build

# Watch mode for development
npm run watch

ERPNext Integration Commands

# Install the app
bench --site your-site.local install-app arkone-projects

# Database migration
bench --site your-site.local migrate

# Clear cache and rebuild
bench --site your-site.local clear-cache
bench build --app arkone-projects
bench restart

# Development with auto-reload
bench --site your-site.local clear-cache && bench build --app arkone-projects

Project Structure

arkone_projects/
├── arkone_projects/          # Python backend
│   ├── api.py               # RESTful API endpoints
│   ├── hooks.py             # Frappe hooks
│   └── arkone_projects/     # Main app module
├── public/                   # Frontend assets
│   ├── js/project_home/     # React application
│   │   ├── App.jsx          # Main application
│   │   ├── components/      # React components
│   │   └── store/           # State management
│   └── css/                 # Stylesheets
└── setup/                   # Installation scripts

📱 Technical Highlights

Architecture

• Frontend: React 18 with modern hooks and context
• Backend: Python with Frappe framework integration
• Database: Native ERPNext doctypes (Project, Task, Timesheet)
• API: RESTful endpoints with comprehensive error handling
• UI Framework: Custom CSS with mobile-first approach

Performance Features

• Lazy Loading: Components load on demand
• Optimistic Updates: UI updates before server confirmation
• Efficient Rendering: Minimal re-renders with proper state management
• Cached Data: Smart caching for frequently accessed data

Mobile Optimization

• Touch-Friendly: Large touch targets and gestures
• Responsive Layout: Adapts to any screen size
• Offline-Ready: Local state management for offline capability
• Fast Loading: Optimized bundle sizes and asset delivery

Security & Reliability

• Input Validation: Client and server-side validation
• Error Boundaries: Graceful error handling
• Permission Integration: Uses ERPNext's permission system
• Audit Trail: All changes are logged through ERPNext

📚 Documentation

API Documentation

All API endpoints are documented with request/response schemas:

• Projects API: Create, read, update project information
• Tasks API: Task management with status updates
• Timesheet API: Time tracking and entry management
• Assignment API: Task assignment and team management

Component Documentation

Each React component includes:

• Props interface: TypeScript-ready prop definitions
• Usage examples: Common implementation patterns
• Styling guide: CSS class conventions and customization

Deployment Guide

For production deployment:

1. Follow the installation steps above
2. Configure your ERPNext site settings
3. Set up proper permissions for your team
4. Customize the interface for your workflow

For detailed documentation, visit our documentation site or the GitHub Wiki.

🤝 Contributing

We welcome contributions! To get started:

Development Setup

1. Fork the repository
2. Set up your development environment:

   cd frappe-bench/apps
   git clone https://github.com/your-username/timesheet-quick-entry.git arkone-projects
   cd arkone-projects
   pre-commit install

Making Changes

3. Create a feature branch:

   git checkout -b feature/your-feature-name

4. Make your changes following our coding standards
5. Test your changes thoroughly:

   npm run build
   bench --site your-site.local migrate
   bench restart

6. Push your branch and create a pull request

Code Quality Standards

Our pre-commit hooks ensure code quality with:

• Python: ruff (linting), pyupgrade (modernization)
• JavaScript: eslint (linting), prettier (formatting)
• CSS: stylelint (CSS linting)
• Commits: Conventional commit format

Areas for Contribution

• 🐛 Bug fixes and improvements
• 📱 Mobile experience enhancements
• 🎨 UI/UX improvements
• 📊 Dashboard and reporting features
• 🔧 Performance optimizations
• 📖 Documentation improvements

� License

This project is licensed under the MIT License - see the LICENSE file for details.

🌟 Support & Community

• 🐛 Bug Reports: GitHub Issues
• 💡 Feature Requests: GitHub Discussions
• 📧 Support: [email protected]
• 🌐 Website: arkone.dev

🙏 Acknowledgements

• Built with the powerful Frappe Framework
• Seamlessly integrates with ERPNext
• Uses modern React 18 for the frontend
• Inspired by the best project management tools in the industry

---

Professional ERPNext Solutions
🌐 Website | 📧 Contact | 💻 GitHub

---

⭐ Show Your Support

If this project helps your team be more productive, please consider giving it a star! Your support helps us continue developing great tools for the ERPNext community.