HourGlass

HourGlass is a personal web application for tracking work hours and managing tasks. The app is designed for simplicity and elegance, allowing users to log their daily work, add task descriptions, and generate PDF summaries for selected time periods.

Project Overview

HourGlass consists of:

1. Frontend: A Vue.js app providing a beautiful, interactive interface for data entry, editing, and viewing stats.
2. Backend: A FastAPI Python app handling data storage, business logic, and PDF generation.
3. Dockerized Deployment: The entire app is containerized for easy local deployment using Docker Desktop.

---

Features

Core Functionality

• Work Hour Logging:

  • Log daily work hours as either:
    • A float number (e.g., 7.5 hours).
    • One or more time periods (e.g., 12:00–14:00, 16:00–19:00) using a friendly time-range picker.
  • Edit previously logged work hours easily.

• Task Management:

  • Add tasks with:
    • A title.
    • A link for reference (optional).
    • A description of the work done.
  • Update tasks or delete them when necessary.

• PDF Export:

  • Generate a PDF report for a specific month or custom date range.
  • The PDF includes:
    • Date.
    • Total hours worked.
    • Tasks with their descriptions and links.
  • The generated file is downloaded directly to the user's device.

Homepage

• Monthly Stats:

  • Display total hours worked in the past month.
  • Summarize tasks completed with a visual breakdown (e.g., charts or progress bars).

• History List:

  • Show a card for each logged day with:
    • Date.
    • Hours worked.
    • Tasks and their descriptions (if available).

User Experience

• Interactive Time Input:

  • Enter time as either float hours or via a visual time-range picker.
  • Ensure validation for overlapping or incorrect ranges.

• Responsive Design:

  • A fully responsive UI that works seamlessly on desktops, tablets, and mobile devices.

---

Screenshots

Landing Page

The landing page shows an overview of your work statistics and recent activities.

Tasks Overview

View and manage all your tasks in one place.

Create New Task

Easily create new tasks with detailed information.

Date Selection

Intuitive date selection for logging work hours and generating reports.

---

Tech Stack

Frontend

• Framework: Vue.js
• UI Library: Vuetify (or Element Plus for lightweight UI components)
• State Management: Vuex or Pinia (for simplicity)
• Other Tools:
  • Vue Router for navigation.
  • Axios for API communication.

Backend

• Framework: FastAPI
• Database: PostgreSQL (for reliable data storage)
• Libraries:
  • SQLAlchemy for database ORM.
  • ReportLab or WeasyPrint for PDF generation.

Deployment

• Dockerized using Docker Desktop, including:
  • A Vue.js container for the frontend.
  • A FastAPI container for the backend.
  • A PostgreSQL container for the database.

---

Setup and Usage

1. Clone the Repository:

   git clone https://github.com/CoekCx/HourGlass.git
   cd HourGlass

2. Run the Application:

   • Ensure Docker is installed and running.
   • Use the included docker-compose.yml file to spin up the application:

     docker-compose up --build

3. Access the App:

   • Open your browser and navigate to http://localhost:8080 for the Vue.js frontend.
   • API documentation is available at http://localhost:8000/docs via FastAPI.

4. Environment Variables:

   • Configure sensitive values (e.g., database URL, secret keys) in a .env file.