Business App

Introduction

The Business Diary AI is an AI-powered business management application designed to streamline the process of recording and analyzing daily business activities. It is specifically tailored for use in factories, warehouses, construction sites, and other business environments. By allowing users to input daily notes in natural language, the app leverages AI to extract structured data, which can then be verified and used for generating insightful reports and dashboards.

System Overview

Business Diary AI transforms the traditional method of business record-keeping by integrating AI technology to extract and organize data from user-entered notes. The application supports multiple sites, enabling comprehensive management across various locations. Key features include secure login, AI data extraction, verification processes, and robust reporting capabilities. The app ensures that only verified data is used in reports, maintaining the integrity and accuracy of business analytics.

Functional Requirements as Story Points

• As a User, I should be able to securely log in to the app.
• As a User, I should be able to create and manage unlimited editable sites.
• As a User, I should be able to write daily notes with automatic date, time, and site selection.
• As a User, I should be able to attach photos, PDFs, bills, videos, and voice notes to my entries.
• As a User, I should be able to view AI-extracted data in a Daily Verification Sheet with options to edit.
• As a User, I should be able to verify extracted data before it is used in reports.
• As a User, I should be able to view reports using only verified data.
• As a User, I should be able to access a dashboard with filters for site and date range.
• As a User, I should be able to view notes in a calendar format by date.
• As a User, I should be able to perform powerful searches by date, site, amount, machine, customer, or keyword.
• As a User, I should be able to generate date-range reports with totals for various categories.
• As a User, I should be able to view a full verification table displaying all extracted data.
• As a User, I should be able to see money values highlighted with color coding.
• As a User, I should be able to use AI chat to answer questions using verified data only.
• As a User, I should be able to export reports to PDF, Excel, CSV, and WhatsApp summary.
• As a User, I should be able to use the app offline with automatic sync.
• As a User, I should be able to switch between Dark and Light mode.

User Personas

• Admin: Manages user accounts and site configurations.
• Site Manager: Oversees daily operations and verifies AI-extracted data.
• Employee: Inputs daily notes and attaches relevant documents.

Core User Flows

• User logs in securely → Selects site → Writes daily note → Attaches media → AI extracts data → User verifies data → Data is used in reports.
• User accesses dashboard → Applies filters → Views reports → Exports data.
• User searches for specific data → Views results → Opens detailed view → Edits or verifies data.

Visuals Colors and Theme

• primary: #007AFF (Apple Blue)
• primary_light: #66B3FF
• secondary: #34C759 (Apple Green)
• accent: #FF9500 (Apple Orange)
• highlight: #FF3B30 (Apple Red)
• bg: #F5F5F7 (Light Gray)
• surface: #FFFFFF (White)
• text: #1C1C1E (Dark Gray)
• text_muted: #8E8E93 (Muted Gray)
• border: #D1D1D6 (Light Border Gray)

Signature Design Concept

Interactive Business Timeline: The landing page features an interactive timeline that visually represents the user's business activities. Users can scroll horizontally through a timeline that dynamically updates with entries from their daily notes. Each entry is represented by an icon that, when hovered over, expands to show a summary of the note, including attached media. The timeline is animated using motion/react for smooth transitions and interactions, providing a visually engaging and informative experience.

Landing Hero Motion Brief

The hero section features a dynamic illustration of a business environment where inputs like notes, photos, and documents flow into a central AI processor. This processor transforms the inputs into organized data, which then populates a dashboard display. The animation loop lasts 10 seconds, showing the transformation from raw input to actionable insights. Users can interact with the animation by clicking on elements to see detailed views of the data transformation process.

Interaction Model & Motion Direction

• Interaction Model: Animated
• The landing page will feature moderate scroll-triggered reveals and hover transitions. Interactive elements will have spring physics for a polished feel. The animation will focus on the transformation of user inputs into structured data, enhancing the storytelling aspect of the app.

Non-Functional Requirements

• The app must be responsive and optimized for mobile-first usage.
• It should provide a seamless user experience with fast load times and smooth transitions.
• The app must ensure data security and privacy, especially for sensitive business information.

Tech Stack

• Frontend: React, TypeScript, Tailwind CSS, shadcn/ui
• Backend: Supabase (Auth, PostgreSQL, Storage)
• AI: OpenAI GPT for data extraction and AI chat

Assumptions and Constraints

• The app will primarily be used on mobile devices, but it should also be accessible on desktops.
• Users will have varying levels of technical expertise, so the UI must be intuitive and user-friendly.
• The app must handle large volumes of data efficiently, especially for businesses with multiple sites.

Glossary

• AI: Artificial Intelligence
• Verification Sheet: A feature where users can review and edit AI-extracted data.
• Dashboard: A visual representation of business data, allowing users to filter and analyze information.
• Site: A location or unit within a business where activities are recorded.