Timeclock

Timeclock is a time manager. This app will replace the spreadsheet that I use to track my work time.

Contents

• Links
• Project Goals
• Action Plan
• Project Features
• Technologies Used
• Instructions for Use
• Developer

Links

• GitHub repository: github.com/djknit/timeclock
• Deployed page: daves-timeclock.herokuapp.com/

Project Goals

• Make it as convenient as possible to enter time worked.
• Minimum Viable Product (MVP) should have:
  • Continually update/display time worked for day, week, and month.
  • Allow user to set day and week cutoff.
  • Allow user to analyze arbitrary range of days.
  • Ability to separate multiple different jobs
  • Optional wage entry and compensation earned calculation
  • User authentication
  • Server and database
  • Proper security measures on backend to prevent unauthorized data access.
• Get working MVP before adding optional features.
• After MVP, add punchclock feature to allow user to "punch in" and "punch out" so that they don't have to write down their time and enter it later.

Action Plan

Items in italics are currently being worked on.

This plan is not complete. Future steps will be expanded on in the plan before they are developed.

• Create bare-bones project structure and set up automatic deployment

  • Create repository; initialize node in repo; run create-react-app to create front-end structure.
  • Create express server and configure to serve front-end
  • Add configuration for Mongoose (MongoDB ODM)
  • Add Bash scripts (to package.json) needed for Heroku to install + build
  • Set up automatic deployment to Heroku from github repo.
    • Create 2 Heroku projects. Deploy dev beta branch to 1 project and master branch to another.
    • Provision database for both project.

• Develop back-end for all MVP features

  • Develop code necessary for user authentication.
    • Create User database model
    • Configure passport. Create controller functions needed to create account and login.
    • Create api routes and remaining controller functions needed for authentication.
      • Create account
      • Test login
      • Login and logout
      • Delete account
      • Edit account information
  • Develop code necessary for time management
    • Create job
    • Get jobs for user (basic info only)
    • Get individual job data (w/ all values populated)
    • Edit job information (wage, dayCutoff, timezone, and weekBegins)
    • Change job name
    • Add weeks and days
    • Add time segments
    • Delete time segments (individually by id and in bulk by date)
    • Delete job

• Develop front-end to complete MVP

  • Landing page
  • Account creation & login
  • 404 page
  • Dashboard
    • Add welcome message to display instead of jobs table when user has no jobs
  • Job creation
  • Job page
    • Job dashboard
      • Job basics display and edit
      • Settings summaries and links to settings
      • Time summary and links (Link done. Moving the rest out of MVP.)
    • Settings page (display and edit settings value schedules)
    • Time page
      • Time Summary
      • Basics
        • General time entry
          • Time segment general entry
          • Track and display segments just added
        • Create recently added segments similarly to just added from general entry
        • Session timezone info and management
      • Allow delete time segment
      • Allow edit time segment
      • Time details by weeks/days and corresponding time entry (Combine w/ report)
      • Full report of time data
        • Regular display
        • PDF or printer-friendly version (Not MVP)
        • Arbitrary (user defined) time period (default is all time) (Not MVP)
        • Let user define how much info to include (Not MVP)
  • Navbar navigation menu
  • Ensure at least bare minimum mobile responsiveness
    • Ensure all features can be used on all screen sizes (do concurrently w/ next step)
    • Ensure nothing looks broken or clearly in the wrong place w/ any screen size
      • Complete mobile version of job settings value schedule display
      • Modify full time report for mobile screen size
      • Fix form small screen issues
        • is24hr inputs overlap rest of field on time inputs
        • Indents not appearing on mobile (all fields aligned to left edge of form)

• Review code for bugs and code organization/readability (Ongoing)

• Develop and/or finish developing the most important remaining front-end features for a more complete MVP

  • Improve full report
    • Add buttons to edit time throughout report where convenient for user
    • User defined time period (default is all time) for full report
      • Period inputs
      • Utility function to get arbitrary period data
    • PDF or printer friendly version
  • User preference for AM/PM or 24hr times setting at user level and/or job level

• Work on additional features

  • Punchclock
  • Add special handling for the edge-case situation where a time-change (ex. daylight savings beginning or end) occurs during a work shift. Likewise if any time is recorded both before and after the time-change on the same day.
  • Create (or improve existing) mobile friendly UI
  • Add time section to job dashboard
    • Summary
    • Basic actions such as general entry
  • Let user define how much info to include in time report
    • Inputs
    • Display (update regular display)

• Icebox:

  • Add notes field to time segments & maybe also days and/or weeks
  • Pay periods (should be optional)
  • Mark time as finalized and/or paid, and maybe allow finalized time to be locked so it can't be changed
  • Add manager/supervisor account with privileges to define job, and link manager account to employee account for employee self-reporting of hours. Require manager to finalize hours.

Project Features

(Coming soon...)

Technologies Used

Front End

• React
• Bulma
• Axios
• Moment Timezone
• react-router-dom package
• create-react-app package

Back End

• Passport and passport-local
• Express
• Node
• MongoDB
• Mongoose
• Bcrypt
• Moment and moment-timezone
• Currency-codes

Instructions for Use

(Coming soon...)

Developer

This project is developed and maintained by David Knittel. Any and all questions, comments, suggestions, or proposed contributions are welcome.

• Email: [email protected]
• Portfolio: djknit.github.io
• GitHub: github.com/djknit
• LinkedIn: linkedin.com/in/djknit