zinc-la System Requirements Document

1. Introduction

The zinc-la project is designed to streamline the process of tracking and managing work hours through advanced image processing and AI capabilities. This document outlines the system requirements for zinc-la, focusing on its core functionalities, user interactions, and technical specifications.

2. System Overview

zinc-la is an application that automates the extraction and calculation of work hours from various image formats using AI technology. It provides users with the ability to upload images, manually edit extracted data, and automatically calculate work hours and status.

2a. Source Content Inventory

No authoritative content sources have been provided for this project.

3. Functional Requirements as Story Points

• As a User, I should be able to upload any image (attendance card, printed sheet, screenshot) for processing.
• As a User, I should be able to have Claude AI automatically extract names, IDs, and hours per day from uploaded images.
• As a User, I should be able to manually edit fields to correct or supplement what the AI detected.
• As a User, I should be able to automatically calculate ordinary hours (max 40h), extra hours, total hours, and status (Complete / Incomplete / No data).

4. User Personas

• User: Individuals who need to track and manage work hours through image uploads and AI processing.

5. Core User Flows

• User uploads an image -> Claude AI extracts data -> User reviews and edits data -> System calculates hours and status.

6. Visuals Colors and Theme

[Default — not specified by user]

• primary: #007BFF (a professional blue)
• primary_light: #66B2FF (a lighter tint of blue)
• secondary: #6C757D (a neutral gray)
• accent: #28A745 (a vibrant green for CTAs)
• highlight: #FFC107 (a bright yellow for notifications)
• bg: #F8F9FA (a light gray background)
• surface: #FFFFFF (white for cards/panels)
• text: #212529 (a dark gray for primary text)
• text_muted: #6C757D (a softer gray for secondary text)
• border: #CED4DA (a subtle gray for borders)

7. Signature Design Concept

Interactive Image Processing Experience

The homepage of zinc-la will feature an interactive image processing experience. Users will see a dynamic workflow where uploaded images are visually transformed as they pass through various stages of AI processing.

• Animation: Images will move through a pipeline, with each stage represented by animated icons that highlight the extraction, editing, and calculation processes.
• Interaction: Users can hover over each stage to see detailed animations of the AI extracting data, manual editing tools, and the calculation of hours.
• Libraries: Utilize motion/react for smooth transitions and animations.

LANDING HERO MOTION BRIEF

The landing hero will depict an image being uploaded, with data points (names, IDs, hours) visibly extracted and highlighted. As the image progresses, users will see fields being edited and calculations being performed, culminating in a clear display of the total hours and status. This loop will run continuously, with interactive elements allowing users to explore each stage in detail.

8. Interaction Model & Motion Direction

• Intended Interaction Model: Animated
• The landing page will feature moderate scroll-triggered reveals and hover transitions, enhancing the user experience with polished animations.

9. Non-Functional Requirements

• The system must process images and extract data with a high degree of accuracy.
• The application should be responsive and accessible across various devices and screen sizes.
• Data security and user privacy must be ensured at all times.

10. Tech Stack

• Frontend: React for Web
• Backend: Python, FastAPI
• Database: MySQL or MariaDB, use alembic for migrations
• AI Models: Claude Sonnet 5 for academic or coding work
• Local Orchestration: Docker, docker-compose

11. Assumptions and Constraints

• The application assumes users have access to devices capable of capturing and uploading images.
• The system is constrained by the accuracy of the AI model in extracting data from images.

12. Glossary

• AI: Artificial Intelligence
• CTA: Call to Action
• Claude AI: The AI model used for data extraction in this project
• RDBMS: Relational Database Management System

This document outlines the comprehensive requirements for the zinc-la project, ensuring a seamless and efficient user experience in managing work hours through advanced AI capabilities.