Project Management Panel

A comprehensive project management system built with Next.js for managing construction/engineering projects, contracts, and tasks.

Features

📋 Project Management

• Create and manage projects with detailed information
• Link projects to contracts
• Track project deadlines and progress
• Add custom notes and contact information

📄 Contract Management

• Create and manage contracts
• Track contract details including customer and investor information
• Link multiple projects to contracts
• Monitor contract deadlines

✅ Task Management

• Create task templates for reusable workflows
• Add tasks to projects (both template-based and custom)
• Track task status and priorities
• Monitor task deadlines and completion

📊 Dashboard

• Overview of project statistics
• Recent projects display
• Task completion tracking
• Quick access to pending items

Tech Stack

• Framework: Next.js 15.1.8
• Database: SQLite with better-sqlite3
• Styling: Tailwind CSS
• Date Handling: date-fns
• Frontend: React 19
• Container: Docker & Docker Compose

Getting Started

Prerequisites

• Node.js (version 16 or higher)
• npm or yarn
• Docker (optional, for containerized development)

Installation

Option 1: Local Development

1. Clone the repository

git clone <repository-url>
cd panel

2. Install dependencies

npm install

3. Start the development server

npm run dev

4. Open http://localhost:3000 in your browser

Option 2: Docker Development

1. Clone the repository

git clone <repository-url>
cd panel

2. Start with Docker Compose

docker-compose up

3. Open http://localhost:3000 in your browser

Database Setup

The application uses SQLite database which will be automatically initialized on first run. The database file is located at data/database.sqlite.

Project Structure

src/
├── app/                    # Next.js app router pages
│   ├── api/               # API routes
│   │   ├── all-project-tasks/ # Get all project tasks endpoint
│   │   ├── contracts/     # Contract management endpoints
│   │   ├── notes/         # Notes management endpoints
│   │   ├── projects/      # Project management endpoints
│   │   ├── project-tasks/ # Task management endpoints
│   │   └── tasks/         # Task template endpoints
│   ├── contracts/         # Contract pages
│   ├── projects/          # Project pages
│   └── tasks/             # Task management pages
├── components/            # Reusable React components
│   ├── ui/               # UI components (Button, Card, etc.)
│   ├── ContractForm.js   # Contract form component
│   ├── NoteForm.js       # Note form component
│   ├── ProjectForm.js    # Project form component
│   ├── ProjectTaskForm.js # Project task form component
│   ├── ProjectTasksSection.js # Project tasks section component
│   ├── TaskForm.js       # Task form component
│   └── TaskTemplateForm.js # Task template form component
└── lib/                  # Utility functions
    ├── queries/          # Database query functions
    ├── db.js            # Database connection
    └── init-db.js       # Database initialization

Available Scripts

• npm run dev - Start development server
• npm run build - Build for production
• npm run start - Start production server
• npm run lint - Run ESLint

Docker Commands

• docker-compose up - Start the application with Docker
• docker-compose down - Stop the Docker containers
• docker-compose up --build - Rebuild and start the application

Database Schema

The application uses the following main tables:

• contracts - Contract information
• projects - Project details linked to contracts
• tasks - Task templates
• project_tasks - Tasks assigned to specific projects
• notes - Project notes and updates

API Endpoints

Projects

• GET /api/projects - Get all projects
• POST /api/projects - Create new project
• GET /api/projects/[id] - Get project by ID
• PUT /api/projects/[id] - Update project
• DELETE /api/projects/[id] - Delete project

Contracts

• GET /api/contracts - Get all contracts
• POST /api/contracts - Create new contract
• GET /api/contracts/[id] - Get contract by ID
• PUT /api/contracts/[id] - Update contract
• DELETE /api/contracts/[id] - Delete contract

Tasks

• GET /api/tasks - Get task templates
• POST /api/tasks - Create new task template
• GET /api/tasks/[id] - Get task template by ID
• PUT /api/tasks/[id] - Update task template
• DELETE /api/tasks/[id] - Delete task template
• GET /api/tasks/templates - Get all task templates

Project Tasks

• GET /api/project-tasks - Get project tasks or task templates
• POST /api/project-tasks - Create new project task
• PATCH /api/project-tasks/[id] - Update task status
• DELETE /api/project-tasks/[id] - Delete task
• GET /api/all-project-tasks - Get all project tasks across all projects

Notes

• POST /api/notes - Create new note
• DELETE /api/notes - Delete note

Advanced Map Features

This project includes a powerful map system for project locations, supporting multiple dynamic base layers:

• OpenStreetMap (default street map)
• Polish Geoportal Orthophoto (aerial imagery via WMTS)
• Polish Land Records (WMS cadastral data)
• Satellite (Esri) and Topographic layers

Users can switch layers using the map control (📚 icon). WMTS/WMS layers are configured dynamically using OGC GetCapabilities, making it easy to add new sources. See docs/MAP_LAYERS.md for details on adding and configuring map layers.

UI/UX

• Modern, responsive interface built with React 19 and Tailwind CSS
• Intuitive dashboards, search, and filter components
• Modular, reusable UI components for forms, lists, and maps

Extensibility & Testing

• Modular codebase: easily add new features, endpoints, or UI components
• Automated tests: Playwright for E2E, Jest and Testing Library for unit/integration
• Dockerized for consistent development and deployment

Contributing

1. Fork the repository
2. Create a feature branch (git checkout -b feature/amazing-feature)
3. Commit your changes (git commit -m 'Add some amazing feature')
4. Push to the branch (git push origin feature/amazing-feature)
5. Open a Pull Request

License

This project is private and proprietary.