| Project # | Description | Client | Status | Budget | Actual | Health | Actions |
|---|---|---|---|---|---|---|---|
| 3294-00 | Aqeel Test Project | Example Company | In Progress | 320h | 186h | 58% | Open | Edit |
| 3289-00 | Structural Review | Acme Aero | In Progress | 540h | 508h | 94% | Open | Edit |
| 3287-00 | Avionics Upgrade | Northwind | On Hold | 410h | 362h | 88% | Open | Edit |
| 3282-00 | Fuel System Cert | Acme Aero | Over Budget | 260h | 276h | 106% | Open | Edit |
| 3275-00 | Cabin Redesign | Example Company | Planned | 0h | 0h | Not started | Open | Edit |
TPMS wireframe proposal
Project workspace, work plan, mobile time entry, and reporting improvements
A practical, phased UI direction that reduces duplicate setup screens, improves project visibility, and keeps development cost controlled.
01. Proposed flow
One project workspace instead of several competing setup screens
The key change is to guide users from Project List into one workspace. Work package setup, activity budgets, time detail, associations, and reports should live inside that workspace.
Project List
Search, filter, and open the project.
Project Workspace
Single destination for status and setup.
Work Plan
Work packages and activity budgets together.
Cert Plan
Initialize, review, GCP, copy, and report in one workspace.
Time Entry
Project -> package -> activity -> task.
Reports
Preview, filter, export, or print.
Recommended navigation: Dashboard, Projects, Time Entry, Reports, Admin. Move Activities, Tasks, and Allowed Tasks by Activity into Admin.
02. End-to-end flow
Project lifecycle: list, create, update, work packages, and time entry
This is the complete path a user takes for a project. Creating a project automatically sets up the default work package (WP-000) and the standard activities, so the user can move straight into work planning and time entry.
1. Project List
Search, filter, open, edit, or start a new project.
2. New Project
Fill core fields and save.
3. Auto Setup
WP-000 and default activities created automatically.
4. Update + Work Plan
Edit details, add work packages, set activity budgets.
5. Activities
Assign activities and budget hours per package.
6. Time Entry
Project -> package -> activity -> task -> hours.
Backward compatibility: older time entries without a work package fall back to the project's default WP-000, so reporting stays consistent.
03. Desktop wireframe
Step 1 - Project List
The landing screen for projects. Users search and filter, see budget health at a glance, and choose to open, edit, or create a project.
Presentation note: the New Project button is the start of the create flow. Open goes to the Project Workspace; Edit goes to the update form.
04. Desktop wireframe
Step 2 - New Project (Create)
A single create form for the core project fields. On save, the system creates the default work package WP-000 and assigns the standard activities, so the user is ready to plan and track time immediately.
On save: a default work package WP-000 (Default Work Package) is created and the standard activities are assigned to it automatically. No extra setup screen is required to start.
Presentation note: this removes the need for a separate "assign activities" step after creating a project.
05. Desktop wireframe
Step 3 - Update Project
Editing reuses the same fields as create. Moving the project to In Progress unlocks the ability to add work packages beyond the default WP-000.
Details
Work Packages
Activities
Associations
Status is set to In Progress -> the Work Packages tab now allows adding new packages. The default WP-000 cannot be deleted.
Presentation note: keep create and update visually identical so the form is learned once.
06. Desktop wireframe
Step 4 - Work Packages (list and add)
Within the project, users see the work packages and add new ones. Adding work packages is only available once the project is In Progress.
Details
Work Packages
Activities
Associations
| Code | Title | Status | Activities | Budget | Actual | Actions |
|---|---|---|---|---|---|---|
| WP-000 | Default Work Package | Open | 5 | 120h | 88h | View | Activities |
| WP-001 | Design Package | Open | 2 | 110h | 79h | View | Activities | Edit |
| WP-002 | Certification Package | Open | 2 | 90h | 96h | View | Activities | Edit |
Add Work Package
Enabled for In ProgressPresentation note: WP-000 is system-managed. Codes such as WP-001 are generated automatically; packages referenced by time cannot be deleted.
07. Desktop wireframe
Step 5 - Work Package Activities (budgets)
For a selected work package, users assign activities and set budget hours per activity. Tasks remain reusable catalog records.
WP-001
Design Package
Budget 110
Actual 79
Left 31
On Track
Activity
Design
Budget 80
Actual 52
Left 28
OK
Activity
Analysis
Budget 30
Actual 27
Left 3
Watch
Edit Activity Budget
InlinePresentation note: budget hours stay on the activity line within the work package, matching the current data model.
08. Desktop wireframe
Step 6 - Time Entry (end to end)
Time entry follows the full chain: Project -> Work Package -> Activity -> Task -> Hours. Each selection filters the next, so users only see valid options.
Recent Entries
This week| Date | Project | Work Package | Activity | Task | Hours | Status |
|---|---|---|---|---|---|---|
| Jun 17 | 3294-00 | WP-001 | Design | 3D Modeling | 6.0 | Saved |
| Jun 16 | 3294-00 | WP-001 | Analysis | Design Checking | 4.5 | Saved |
| Jun 16 | 3294-00 | WP-000 | Coordination | Meeting | 1.5 | Draft |
Presentation note: this is the payoff of the setup steps. Clean cascading selections reduce wrong charges and missing work package data.
09. Desktop wireframe
Project Workspace - Overview
The overview should answer the project manager's first question: are we on track, how much budget is used, and where is time going?
Overview
Setup
Work Plan
Time Detail
Associations
Reports
320
Approved baseline
186
From timesheets
134
Available hours
58%
On track
OK
No major overrun
Budget by Work Package
Drill downRecent Time
Last 7 daysPresentation note: this replaces a dashboard that behaves like another edit page with a clearer status-first workspace.
10. Desktop wireframe
Project Workspace - Setup
Project setup should contain project details and associations, with clear grouping. This removes confusion between Project Update and Project Dashboard.
Overview
Setup
Work Plan
Time Detail
Associations
Reports
Presentation note: show this as the replacement for multiple edit forms. Associations can be a separate tab if the lists are long.
11. Desktop wireframe
Project Workspace - Work Plan
The Work Plan brings Work Packages and Project Activities together. Users should set each activity budget in context instead of jumping to a separate Project Activity module.
Overview
Setup
Work Plan
Time Detail
Associations
Reports
320
Hours
186
Hours
134
Hours
2
Need review
4
Active
WP-001
Design Package
Budget 110
Actual 79
Left 31
On Track
Design
80 hrs
52 hrs
28 hrs
OK
Analysis
30 hrs
27 hrs
3 hrs
Watch
WP-002
Certification Package
Budget 90
Actual 96
Left -6
Over
Certification
70 hrs
78 hrs
-8 hrs
Over
Training
20 hrs
18 hrs
2 hrs
OK
Presentation note: this screen should replace the confusing split between Work Packages and Project Activities for everyday users.
12. Desktop wireframe
Cert Plan Workspace
Cert Plan should follow the same workspace pattern: one place to initialize regulations, review completion, edit MOC/DDS details, manage GCP rows, copy from another plan, and report progress.
Overview
Initialize
Plan Review
GCP Matrix
Copy
Reports
493
Total rows
5
Marked complete
139
Need assignment
0
No gap
139
Need review
Plan Review
Filter by subpart, group, status| Section | Title | DDS | GCP | Status |
|---|---|---|---|---|
| 25.1309 | Equipment systems | Assigned | 3 rows | Complete |
| 25.1353 | Electrical equipment | Missing | 0 rows | Needs GCP |
| 25.1529 | Instructions continued airworthiness | Missing | 1 row | Needs DDS |
| 25.1581 | Airplane flight manual | Assigned | 2 rows | Open |
Selected Regulation
25.1353GCP / Compliance Matrix Rows
For selected regulation| DAO Specialty | MOC | FOC | Deliverable | Action |
|---|---|---|---|---|
| Avionics | Test | Review | DR-120 | Edit |
| Electrical | Analysis | Approval | DR-142 | Edit |
Presentation note: this consolidates Cert Plan Initialize, Copy, Dashboard, and GCP into one workspace and adds project-level completion insight before the row-by-row editor.
13. Mobile wireframe
Mobile Time Entry
The mobile form should prioritize speed. Most users need to enter a few required fields from a phone with minimal scrolling and clear save actions.
Add Time
Today | Save quickly from the fieldMobile design notes
- Keep the field order aligned with the data dependency: Project, Work Package, Activity, Task.
- Default the date to today.
- Make Hours a large numeric input.
- Keep Notes optional and below required fields.
- Use Save and Add Another for repeated daily entries.
- Show recent entries below the form as compact cards, not a wide table.
14. Desktop wireframe
Reports - Preview First
Reports should be reviewed on screen before export. Users should filter, preview, then print or download.
| Project | Work Package | Activity | Hours |
|---|---|---|---|
| 3294-00 | WP-001 | Design | 52 |
| 3294-00 | WP-002 | Certification | 78 |
| 3294-00 | WP-002 | Training | 18 |
Presentation note: this is a practical improvement over hardcoded PDF-only reporting.
15. Admin wireframe
Admin Dashboard - Portfolio Insights
The admin dashboard should surface exceptions and operational health across all projects, users, budgets, and time entries. The priority is actionable insight, not just totals.
42
Across all clients
6
Need review
1,284
Submitted time
9
This week
18%
Above target
Budget Snapshot
Active projects| Budget View | Budgeted | Actual | Remaining | Status |
|---|---|---|---|---|
| Portfolio hours | 8,600h | 5,940h | 2,660h | 69% Used |
| Billable project hours | 7,400h | 5,180h | 2,220h | On Track |
| At-risk hours | 920h | 875h | 45h | Review |
| Budgeted labor value | $1.24M | $0.86M | $0.38M | If rates enabled |
Budget Risk by Project
Top risksNeeds Attention
Action queue| Issue | Area | Status |
|---|---|---|
| Project over 100% budget | 3294-00 / WP-002 | High |
| Missing timesheets | 9 users | Medium |
| Actual hours with no budget | 3 work packages | Medium |
| Duplicate work package names | 1 project | Review |
Weekly Time Trend
Billable vs non-billableWorkload by Team Member
This week| User | Hours | Billable | Status |
|---|---|---|---|
| Engineer A | 41 | 36 | OK |
| Engineer B | 52 | 45 | High |
| Engineer C | 18 | 12 | Low |
Activity Mix
Month to datePresentation note: the most important admin widget is Needs Attention. It turns dashboard data into a practical action list.
16. Admin wireframe
Catalog setup moved away from daily project work
Activities, Tasks, and Allowed Tasks by Activity should be managed by admins or configured users, not mixed into the normal time tracking flow.
Activity Catalog
Reusable categories used across projects.
Design
Analysis
Certification
Task Catalog
Reusable task options.
3D Modeling
Design Checking
Training Session
Allowed Tasks by Activity
Formerly Activity Tasks.
Design -> 3D Modeling
Design -> Design Checking
Training -> Training Session
17. Budget plan
Same plan, split into monthly task chunks
The overall roadmap does not change. The difference is execution: each phase is broken into smaller monthly tasks so the client can manage budget month by month and approve the next chunk after seeing progress.
Monthly task breakdown
This keeps the roadmap intact, but breaks the work into approval-friendly monthly chunks. Because the full plan includes wireframes, Figma design, implementation, Cert Plan, and QA, the delivery should run across multiple months so the total still lands in the original proposal range.
| Month | Task chunk | Target spend | Visible outcome |
|---|---|---|---|
| Month 1 | Create the project wireframes, project flow wireframes, and dashboard wireframes | $1,000 | The client gets the first complete wireframe package for the core project workflow. |
| Month 2 | Convert the approved wireframes into eye-catching UI/UX design in Figma and collect client approval on the flows | $1,000 | The client sees polished UI/UX design and signs off on the interaction direction before implementation. |
| Month 3 | Finalize the Figma system, apply revisions from client feedback, and prepare the implementation-ready UI package | $1,000 | The design package is complete and ready to hand into implementation without ambiguity. |
| Month 4 | Create Cert Plan wireframes and wireframes for the other major areas that follow the same pattern, and make the UI read | $1,000 | The full product flow is mapped in wireframe form, not just the project area. |
| Month 5 | Implement the approved UI/UX design for the core project workspace using React or the selected framework | $1,000 | The core project flow starts working in code, not only in design. |
| Month 6 | Continue implementation of the project workspace, flow logic, dashboard views, and key interactions | $1,000 | The main project area becomes more complete and closer to production use. |
| Month 7 | Implement Cert Plan and the remaining approved wireframed areas using the same UI/UX system | $1,000 | The next major product area moves from approved design into working screens. |
| Month 8 | Continue Cert Plan and remaining-area implementation, integrations, and consistency fixes | $1,000 | The broader product scope catches up to the core project area. |
| Month 9 | QA testing, bug fixing, validation, cleanup, and permissions review and final pass to make sure everything is stable | $1,000 | The delivered areas are tested, tightened up, and prepared for release. |
How the monthly plan reaches the original total
| Monthly model | Months | Total range | Alignment |
|---|---|---|---|
| $1,000 per month | 4-6 months | $4,000 | Roughly covers the Strong MVP range. |
| $1,000 per month | 7-8 months | $7,000 | Starts to cover the Full package range. |
| $1,000 per month | 8-10 months | $9,000 | Fits the original With Cert Plan target of $9,000. |