8:00 AM - 12:00 PM Approved 4h
Minute7 Timesheet Dashboard
Product UI mockup based on new designer mockups. Features sidebar navigation, view tabs, and modal dialogs.
frontend.minute7.com/timesheets
My Timesheet
GMT-05
MON 26
TUE 27
WED 28
THU 29
FRI 30
SAT 31
7 AM
8 AM
9 AM
10 AM
11 AM
12 PM
1 PM
2 PM
3 PM
4 PM
5 PM
6 PM
Acme Consulting - Website Redesign
8:00 AM - 12:00 PM
Design/Marketing
Acme Consulting - Website Redesign 8:00 AM - 12:00 PM (4h) Category: Design/Marketing Billable • Synced to QuickBooks
Blue Sky Marketing - Campaign Analytics
1:00 PM - 5:00 PM
Consulting
Blue Sky Marketing - Campaign Analytics 1:00 PM - 5:00 PM (4h) Category: Consulting Billable • Synced to QuickBooks
Golden Gate Ventures - Pitch Deck
8:00 AM - 3:30 PM
Design/Marketing
Golden Gate Ventures - Pitch Deck 8:00 AM - 3:30 PM (7.5h) Category: Design/Marketing Billable • Synced to QuickBooks
Mountain View Tech - App Development
8:00 AM - 4:00 PM
Development
Mountain View Tech - App Development 8:00 AM - 4:00 PM (8h) Category: Development Billable • Synced to QuickBooks
Riverside Accounting - Tax Prep
8:00 AM - 3:15 PM
Consulting
Riverside Accounting - Tax Prep 8:00 AM - 3:15 PM (7.25h) Category: Consulting Billable • Synced to QuickBooks
Pacific Retail Group - Store Analytics
8:00 AM - 4:00 PM
Development
Pacific Retail Group - Store Analytics 8:00 AM - 4:00 PM (8h) Category: Development Billable • Synced to QuickBooks
Time Entries
Organized by week for better monthly overview
Mon, May 26 8h
1:00 PM - 5:00 PM Approved 4h
American Express - Custom Dashboard
Tue, May 27 7h 30m
8:00 AM - 3:30 PM Approved 7h 30m
American Express - Custom Dashboard
Customer & Job Details
APPROVED FOR SYNC
Today: 2:30:00 Week Total: 38:45:00
Timesheet
| Customer:Job | Service Item | Pay type | Mon 2 | Tue 3 | Wed 4 | Thu 5 | Fri 6 | Sat 7 | Sun 8 | Total | Action |
|---|---|---|---|---|---|---|---|---|---|---|---|
American Express - Custom Dashboard | Design/Marketing | Regular | 38:45 | BILLABLE | |||||||
TechStart Inc - Mobile App | Development | Regular | 0h | NOT BILLABLE | |||||||
| Total | 0h | 0h | 0h | 0h | 0h | 0h | 0h | 0h | |||
Modal Dialog Examples
Reference implementations for Start Timer and New Time Entry modals.
Start Timer Modal
Start Timer
Current Time 11 : 26 : 44 AM
Timer will start at this exact moment when you confirm.
New Time Entry Modal
New Time Entry
Status Badge Patterns
Draft
.badge-draft Gray with dashed borderApproved
.badge-approved Green solid backgroundConnected
.badge-connected Green outline styleBillable
.badge-billable Primary color solidV1
.badge-v1 Blue version badgeDesign Specifications
Sidebar Navigation
- Width
- 240px fixed
- Background
- White with subtle border
- Active Item
- Light primary background
- Section Labels
- 11px / 600 weight / uppercase / neutral-400
- Nav Items
- 14px / 500 weight / neutral-700
- Icon Size
- 20px with 12px gap
View Tabs
- Style
- Rounded pill buttons
- Active State
- White background, subtle shadow
- Inactive State
- Transparent, neutral-600 text
- Padding
- 8px 16px
- Border Radius
- 6px (rounded)
Modal Dialogs
- Width
- 400px (small) / 600px (medium)
- Border Radius
- 12px
- Shadow
- Large shadow with overlay
- Header Padding
- 20px 24px with bottom border
- Body Padding
- 24px
- Footer
- 20px 24px with top border, right-aligned buttons
Status Badges
- Draft: Gray dashed border, transparent bg
- Approved: Green solid background, white text
- Connected: Green outline, transparent bg
- Billable: Primary solid, white text
- Padding: 2px 8px
- Font: 11px / 600 weight
Timesheet Grid
- Project Column: Flexible width, left-aligned
- Day Columns: Fixed 60px width, centered
- Weekend Columns: Slightly dimmed background
- Time Inputs: Centered, borderless until focus
- Totals Row: Bold text, neutral-50 background
Key Interactions
- Sidebar Collapse: Hover to expand on mobile
- Date Picker: Click to open calendar modal
- Time Input: Click to edit, blur to save
- Add Row: Append new row at bottom
- Timer: Real-time clock display in modal