TIMESHEET

APPLICATION
SYSTEM

23 August 2023
Contents
1. INTRODUCTION...............................................................................................................................2
2. TABLES DESIGN.............................................................................................................................3
2.1. Workers Table Design..............................................................................................................3
2.2. Timesheets Table Design........................................................................................................4
2.3. Approvers Table Design...........................................................................................................4
2.4. TimesheetApprovalHistory Table Design..............................................................................4
2.5. Relationship...............................................................................................................................4
3. FUNCTIONAL REQUIREMENTS..................................................................................................4
3.1. User Management....................................................................................................................4
3.2. Timesheet Management..........................................................................................................5
3.3. Timesheet Approval..................................................................................................................5
3.4. Multi-Level Approval.................................................................................................................5
3.5. Approval History........................................................................................................................5
3.6. Notifications...............................................................................................................................5
4. NON-FUNCTIONAL REQUIREMENTS........................................................................................5
4.1. Usability......................................................................................................................................5
4.2. Performance..............................................................................................................................6
4.3. Security.......................................................................................................................................6
4.4. Scalability...................................................................................................................................6
4.5. Reliability....................................................................................................................................6
4.6. Backup and Recovery..............................................................................................................6
4.7. Audit and Compliance..............................................................................................................6
5. QUERIES...........................................................................................................................................6
5.1. User Management....................................................................................................................6
5.2. Timesheet Management..........................................................................................................7
5.3. Timesheet Approval..................................................................................................................7
5.4. Timesheet Approval History.....................................................................................................7
5.5. Notifications (not directly SQL, but related actions).............................................................7
6. UI/UX DESIGN..................................................................................................................................7
6.1. General Design Principles.......................................................................................................7

Page 1 of 13
 6.2. Layout & Components..............................................................................................................8
6.3. Colors & Typography................................................................................................................8
6.4. Responsive Design...................................................................................................................9
6.5. Microinteractions.......................................................................................................................9
6.6. Feedback Mechanisms............................................................................................................9
6.7. Accessibility...............................................................................................................................9
7. FRONT-END TECHNOLOGIES.....................................................................................................9
7.1. Form Validation.........................................................................................................................9
7.2. Dynamic Loading of Content.................................................................................................10
7.3. Dashboard & Visual Representation....................................................................................10
7.4. Interactive UI Components....................................................................................................10
7.5. Notifications.............................................................................................................................10
7.6. Feedback and Microinteractions...........................................................................................10
7.7. Responsive Design.................................................................................................................10
7.8. Error Handling and Display....................................................................................................10
7.9. Search & Filter Functionalities...............................................................................................10
7.10. Accessibility Enhancements..............................................................................................10
7.11. Local Storage & Session Management............................................................................10
7.12. Integrations with External Libraries or APIs.....................................................................11
7.13. Optimization and Lazy Loading.........................................................................................11

Page 2 of 13
1. INTRODUCTION
Welcome to TimeMint, where precision meets efficiency in the world of time tracking. In today's
fast-paced business landscape, the importance of accurate time management and tracking cannot be
overstated. Whether you're a freelancer juggling multiple projects, a manager overseeing a dynamic
team, or an executive aiming to optimize company operations, understanding where time is spent is
pivotal.

TimeMint is designed with you in mind, transforming the often-tedious task of logging hours into a
seamless experience. Gone are the days of manual entries and inaccurate logs. With TimeMint,
every minute counts—literally. Our platform is not just about recording time; it's about enhancing
productivity, streamlining operations, and fostering accountability within teams.

But that's not all. Our in-built approval workflows ensure that managers can swiftly review, approve,
or provide feedback on entries, maintaining a smooth flow of communication and transparency.
Insights and analytics derived from TimeMint can be the catalyst for refining processes, identifying
training needs, or even recognizing the hardworking individuals in a team.

Dive in and discover a world where time is not just tracked but optimized for the betterment of
individuals and businesses alike. Welcome to a smarter way of managing time welcome to
TimeMint!

Page 3 of 13
2. TABLES DESIGN
2.1. Workers Table Design
• worker_id (Primary Key): Unique identifier for each worker.
• first_name: First name of the worker.
• last_name: Last name of the worker.
• email: Email address of the worker.
• position: Job position/title of the worker.

2.2. Timesheets Table Design

• timesheet_id (Primary Key): Unique identifier for each timesheet entry.
• worker_id (Foreign Key): Refers to the Workers table.
• date: Date of the timesheet entry.
• hours_worked: Number of hours worked on that day.
• task_description: Description of the task performed.
• approval_status: Current status of approval (e.g., 'Pending', 'Approved', 'Rejected').
• approver_id: ID of the approver who approved/rejected the timesheet (can be NULL if not yet
reviewed).

2.3. Approvers Table Design

• approver_id (Primary Key): Unique identifier for each approver.
• first_name: First name of the approver.
• last_name: Last name of the approver.
• email: Email address of the approver.
• approval_level: Hierarchical level of approval (e.g., 'Manager', 'Director', 'Executive').

2.4. TimesheetApprovalHistory Table Design

• history_id (Primary Key): Unique identifier for each approval action.
• timesheet_id (Foreign Key): Refers to the Timesheets table.
• approver_id (Foreign Key): Refers to the Approvers table.
• approval_date: Date when the approval action took place.
• status: Status of this approval action (e.g., 'Approved', 'Rejected').
• comments: Comments provided by the approver during this approval action.

2.5. Relationship
• Workers and Timesheets: One-to-Many.
• One worker can have many timesheets, but each timesheet belongs to only one worker.
• Timesheets and Approvers: Many-to-One.
• Each timesheet can be approved/rejected by one approver, but one approver can approve many
timesheets.
• Timesheets and TimesheetApprovalHistory: One-to-Many.
• Each timesheet can have multiple approval actions in its history (e.g., first approved by a manager,
then by a director).
• Approvers and TimesheetApprovalHistory: One-to-Many.
• An approver can approve/reject many timesheets over time, and each of these approval actions
gets recorded in history.

Page 4 of 13
3. FUNCTIONAL REQUIREMENTS
3.1. User Management
• The system shall allow admin users to add, edit, and delete workers.
• The system shall allow admin users to add, edit, and delete approvers.
• The system shall support role-based access control (RBAC) to differentiate between regular
workers, approvers, and admin users.

3.2. Timesheet Management

• Workers shall be able to submit their timesheets, specifying the date, hours worked, and task
description.
• Workers shall be able to view their past timesheet submissions.
• Workers shall be able to edit or delete their timesheets prior to any approval.
• Once a timesheet has been approved or rejected, the worker cannot edit or delete that timesheet.

3.3. Timesheet Approval

• Approvers shall be able to view timesheets submitted by workers that are awaiting their approval.
• Approvers shall be able to approve or reject timesheets.
• Approvers shall be able to provide comments when approving or rejecting a timesheet.
• Timesheets shall have a status indicating whether they are 'Pending', 'Approved', or 'Rejected'.
• Timesheets shall track which approver approved or rejected them.

3.4. Multi-Level Approval

• Timesheets can require multiple levels of approval based on the defined hierarchy (e.g., 'Manager',
then 'Director', then 'Executive').
• The system shall notify the next-level approver when a timesheet is approved at a lower level and
is pending their approval.

3.5. Approval History

• The system shall maintain a history of all approval actions for a timesheet, including the approver,
date, and any comments.
• Workers shall be able to view the approval history of their timesheets.

3.6. Notifications
• Workers shall receive notifications when their timesheets are approved or rejected.
• Approvers shall receive notifications when there are timesheets awaiting their approval.

Page 5 of 13
4. NON-FUNCTIONAL REQUIREMENTS
4.1. Usability
• The system shall provide a user-friendly interface that is intuitive and easy to navigate.
• Help tooltips shall be available for new users to understand the features and functionalities.

4.2. Performance
• The system shall load timesheet data in under 2 seconds for queries under normal operational
load.
• The system shall support up to 10,000 simultaneous users without performance degradation.

4.3. Security
• Passwords must be hashed and stored securely.
• The system shall use role-based access controls to ensure workers cannot approve timesheets,
and approvers can only approve and not create timesheets.
• All data transmissions shall be encrypted using industry-standard methods.

4.4. Scalability
• The system architecture should be scalable to accommodate an increasing number of users and
data entries.

4.5. Reliability
• The system should have a 99.9% uptime, excluding planned maintenance windows .

4.6. Backup and Recovery

• The system shall perform daily backups of all data.
• There shall be a recovery procedure in place to restore data from backups in the event of data loss
or corruption.

4.7. Audit and Compliance

• All actions (addition, edits, approvals, rejections) should be logged with timestamps for audit
purposes.
• The system shall comply with relevant data protection and privacy regulations.

Page 6 of 13
5. QUERIES
5.1. User Management

5.1.1. Add a new worker:

INSERT INTO Workers (first_name, last_name,

5.1.2. Add a new approver:

INSERT INTO Approvers (first_name, last_name, email, approval_level) VALUES ('Jane', 'Smith',
'jane.smith@example.com', 'Manager');

5.1.3. Delete a worker:

DELETE FROM Workers WHERE worker_id = 1;

5.1.4. Delete an approver:

DELETE FROM Approvers WHERE approver_id = 1;

5.2. Timesheet Management

5.2.1. Submit a new timesheet
INSERT INTO Timesheets (worker_id, date, hours_worked, task_description, approval_status)
VALUES (1, '2023-08-22', 8, 'Developed new feature', 'Pending');

5.2.2. View a worker's past submissions

SELECT * FROM Timesheets WHERE worker_id = 1;

5.3. Timesheet Approval

5.3.1. List timesheets awaiting approval by a specific approver
SELECT * FROM Timesheets WHERE approval_status = 'Pending';

5.3.2. Approve a timesheet

UPDATE Timesheets SET approval_status = 'Approved', approver_id = 1 WHERE timesheet_id =
100;

5.4. Timesheet Approval History

5.4.1. Insert a new approval history record.
INSERT INTO TimesheetApprovalHistory (timesheet_id, approver_id, approval_date, status,
comments) VALUES (100, 1, '2023-08-22', 'Approved', 'Great work!');

5.4.2. View approval history for a specific timesheet

SELECT * FROM TimesheetApprovalHistory WHERE timesheet_id = 100;

5.5. Notifications (not directly SQL, but related actions)

5.5.1. Check for timesheets awaiting approval to notify approvers:
SELECT * FROM Timesheets WHERE approval_status = 'Approved' AND notification_sent = FALSE;

5.5.2. Check for timesheets awaiting approval to notify approvers:

SELECT * FROM Timesheets WHERE approval_status = 'Pending' AND notification_sent = FALSE;

Page 7 of 13
6. UI/UX DESIGN
6.1. General Design Principles
• Simplicity: Keep the design clean and straightforward. Avoid unnecessary clutter.

• Consistency: Maintain a consistent look, feel, and behavior across all screens.

• Feedback: Always inform the user about actions, changes, errors, or exceptions.

• Intuitiveness: Design with the user's intuition in mind. Use recognizable symbols and familiar
patterns.

• Accessibility: Ensure the design is accessible to all users, including those with disabilities.

6.2. Layout & Components

6.2.1. Navigation Bar:
• Placed at the top. It should include the application's name/logo on the left and essential navigation
links/icons on the right like Home, Timesheet History, Approvals (for approvers), Admin Panel (for
admins), and User Profile

6.2.2. Dashboard/Home Page

•Workers: A visual representation (like cards or a list) of pending timesheets, approved timesheets,
and total hours worked in the current month.
• Approvers: A list of pending approvals, recently approved timesheets, and a section to add
comments.

6.2.3. Timesheet Entry Form

• Simple form with fields for Date, Hours Worked, Task Description. A calendar icon next to the date
for easy date selection.

• Submit button to submit the timesheet. Before submission, validate the form to ensure all fields are
correctly filled.

6.2.4. Approval Page (for approvers)

• List view of all timesheets pending approval with essential details.

• Each list item should be expandable to view more details and the history of that timesheet.

•Approve and Reject buttons, with an optional comment field.

6.2.5. Timesheet History

• Tabulated view of submitted timesheets with columns for Date, Hours, Task, Status, and
Comments.
• Filters at the top to filter by date range, status, or task type.

6.2.6. Admin Panel

• User management sections for adding, editing, and removing workers and approvers.
• System settings or configurations, if any.

6.2.7. User Profile:

• Display user details, role, and an option to change the password.
• Log out button.

6.2.8. • Notifications
• Bell icon in the navigation bar, indicating the number of unread notifications.
• Dropdown list on click, showing the latest notifications.

Page 8 of 13
6.3. Colors & Typography
6.3.1. Colors: Use a neutral background color (like light gray or white) and a primary color for buttons, links,
and headers. Use red for error messages or critical notifications and green for success messages.
6.3.2. Typography: Use a readable font, with bold for headings and regular for content. Ensure good
contrast between text and background.

6.4. Responsive Design

• Ensure that the application is usable on various screen sizes, especially if it's a web app.
Workers might want to fill in timesheets on mobile devices

6.5. Microinteractions
6.5.1. Hover effects buttons and links
6.5.2. Loading spinners for asynchronous actions.
6.5.3. Toast notifications for success or error messages.

6.6. Feedback Mechanisms

6.6.1. Tooltips for icons or non-obvious functionalities.
6.6.2. Help or FAQ section for common queries or guidelines.

6.7. Accessibility
6.7.1. Ensure that all elements are keyboard navigable.
6.7.2. Use proper ARIA roles for improved screen reader compatibility.
6.7.3. Provide alternate text for images or icons.

Page 9 of 13
7. FRONT-END TECHNOLOGIES
7.1. Form Validation
7.1.1. Client-side validation of form fields, such as ensuring that the timesheet date or number of hours is
entered correctly.
7.1.2. Displaying instant feedback messages (e.g., "This field is required" or "Enter a valid date").

7.2. Dynamic Loading of Content

7.2.1. AJAX calls to load more timesheets, additional approval details, or other content without needing to
refresh the entire page.
7.2.2. Submitting the timesheet or approval decisions without a page reload.

7.3. Dashboard & Visual Representation

7.3.1. Displaying charts or graphs that showcase hours worked, number of approvals, etc. Libraries like
Chart.js or D3.js can be utilized for this purpose.

7.4. Interactive UI Components

7.4.1. Creating modal windows for confirmations, notifications, or showing additional details.
7.4.2. Adding toggle switches, tabs, accordions, or dropdown menus that respond to user actions.
7.4.3. Date pickers for selecting dates on the timesheet form.

7.5. Notifications
7.5.1. Dynamically updating the notification bell icon or list in real-time as new notifications arrive.

7.6. Feedback and Microinteractions

7.6.1. Displaying loading spinners or progress bars during background operations.
7.6.2. Showing tooltips when hovering over specific elements or icons.
7.6.3. Implementing hover effects, animations, or transitions for smoother UI interactions.

7.7. Responsive Design

7.7.1. Adjusting UI elements or repositioning content based on the screen size or device orientation using
JavaScript in conjunction with CSS media queries.

7.8. Error Handling and Display

7.8.1. Capturing and handling errors during AJAX operations and then displaying them in a user-friendly
manner.

7.9. Search & Filter Functionalities

7.9.1. Implementing a dynamic search or filter mechanism on the timesheet history or approval pages,
where results update as users type or adjust filters.

7.10. Accessibility Enhancements

7.10.1. Managing focus for keyboard-only users.
7.10.2. Implementing custom keyboard shortcuts or interactions.

Page 10 of 13
7.11.Local Storage & Session Management
7.11.1. Storing temporary data in the browser's local storage or session storage, like saving an incomplete
timesheet form or user preferences.

7.12. Integrations with External Libraries or APIs

7.12.1. If you plan to integrate with third-party services, plugins, or widgets, you'll often use JavaScript to
initialize and manage these integrations.

7.13. Optimization and Lazy Loading

7.13.1. Lazy loading images or content, where content is loaded only when it's needed or when it enters
the viewport.

Page 11 of 13