spouliot
9dd36238bb
- ClockEntryType enum (Work/Break/Lunch) on EmployeeClockEntry; default 0 = Work so all existing entries are unaffected - Migration AddClockEntryType applied - Break and Lunch buttons on clock status card (only when AllowMultiplePunchesPerDay is enabled); GoOnBreak closes current Work segment and opens Break/Lunch segment - Return to Work button when on break/lunch; closes break segment, opens new Work - Status badges on clock card and Who'\''s In grid: Working / On Break / At Lunch - Break/Lunch hours excluded from all day totals, week totals, metrics, and CSV - Manager: Manual Entry modal to create a time entry for any company employee - Attendance report defaults to current ISO week; Week/Month mode toggle with auto-submitting dropdowns (last 12 weeks or months); period label shown inline - Attendance CSV: Type column added; day/week totals blank on Break/Lunch rows; filename uses period label - Week subtotal rows suppressed in single-week view (shown in month view only) - Help article and AI knowledge base updated for all new features Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
256 lines
14 KiB
Plaintext
256 lines
14 KiB
Plaintext
@{
|
|
ViewData["Title"] = "Timeclock";
|
|
}
|
|
|
|
<div class="d-flex align-items-center gap-2 mb-3">
|
|
<a asp-controller="Help" asp-action="Index" class="btn btn-sm btn-outline-secondary"><i class="bi bi-arrow-left"></i></a>
|
|
<nav aria-label="breadcrumb">
|
|
<ol class="breadcrumb mb-0">
|
|
<li class="breadcrumb-item"><a asp-controller="Help" asp-action="Index">Help</a></li>
|
|
<li class="breadcrumb-item active">Timeclock</li>
|
|
</ol>
|
|
</nav>
|
|
</div>
|
|
|
|
<div class="row g-4">
|
|
<div class="col-lg-9">
|
|
|
|
<section id="overview" class="mb-5">
|
|
<h2 class="h4 fw-bold border-bottom pb-2 mb-3">
|
|
<i class="bi bi-info-circle text-primary me-2"></i>Overview
|
|
</h2>
|
|
<p>
|
|
The Timeclock module tracks facility-level employee attendance — when workers arrive and
|
|
leave the shop each day. It is separate from <em>Job Time Entries</em> (which log hours billed
|
|
against a specific job). Timeclock is about payroll and attendance; Job Time Entries are about job costing.
|
|
</p>
|
|
<p>
|
|
Each punch creates a <strong>segment</strong> with a type: <strong>Work</strong>, <strong>Break</strong>,
|
|
or <strong>Lunch</strong>. Only Work segments count toward paid-hours totals — break and lunch
|
|
time appears in the attendance history for reference but is excluded from day totals, weekly totals,
|
|
and the payroll CSV export.
|
|
</p>
|
|
<p>
|
|
Find Timeclock under <strong>Shop Floor › Timeclock</strong> in the left sidebar.
|
|
</p>
|
|
</section>
|
|
|
|
<section id="clocking-in-out" class="mb-5">
|
|
<h2 class="h4 fw-bold border-bottom pb-2 mb-3">
|
|
<i class="bi bi-box-arrow-in-right text-success me-2"></i>Clocking In, Out, and Breaks
|
|
</h2>
|
|
<p>
|
|
Your <strong>My Clock Status</strong> card on the Timeclock dashboard shows your current state
|
|
and the available actions. The buttons change depending on what you are currently doing.
|
|
</p>
|
|
|
|
<h5 class="fw-semibold mt-3">Starting and ending your day</h5>
|
|
<ul>
|
|
<li><strong>Clock In</strong> — click the green “Clock In” button when you arrive. Your start time is recorded immediately as a Work segment.</li>
|
|
<li><strong>Clock Out</strong> — click the red “Clock Out” button when you leave for the day. Hours worked for that segment are calculated and saved.</li>
|
|
</ul>
|
|
|
|
<h5 class="fw-semibold mt-3">Taking a break or lunch <span class="badge bg-secondary fw-normal small">requires multiple-punches setting</span></h5>
|
|
<p>
|
|
When you are clocked in and working, two additional buttons appear (if your company has
|
|
<em>Allow Multiple Punches Per Day</em> enabled in Timeclock Settings):
|
|
</p>
|
|
<ul>
|
|
<li>
|
|
<strong><i class="bi bi-cup-hot"></i> Break</strong> — closes your current Work segment
|
|
and opens a Break segment. Your status changes to <span class="badge bg-warning text-dark">On Break</span>.
|
|
</li>
|
|
<li>
|
|
<strong><i class="bi bi-cup-straw"></i> Lunch</strong> — same as Break but marks the
|
|
segment as Lunch. Your status changes to <span class="badge bg-info text-dark">At Lunch</span>.
|
|
</li>
|
|
</ul>
|
|
<p>
|
|
While on a break or at lunch, a single <strong>Return to Work</strong> button is shown.
|
|
Clicking it closes the break/lunch segment and immediately opens a new Work segment —
|
|
you are working again without any extra steps.
|
|
</p>
|
|
<div class="alert alert-info alert-permanent">
|
|
<i class="bi bi-info-circle me-2"></i>
|
|
You cannot have two open segments at the same time. The Break/Lunch buttons automatically
|
|
close your current Work segment before opening the break segment, so there is never a gap
|
|
or overlap in your record.
|
|
</div>
|
|
</section>
|
|
|
|
<section id="whos-in" class="mb-5">
|
|
<h2 class="h4 fw-bold border-bottom pb-2 mb-3">
|
|
<i class="bi bi-people-fill text-primary me-2"></i>Who’s In
|
|
</h2>
|
|
<p>
|
|
The <strong>Who’s In</strong> card shows everyone with an open segment right now, along
|
|
with their current status:
|
|
</p>
|
|
<ul>
|
|
<li><span class="badge bg-success">Working</span> — actively on the clock</li>
|
|
<li><span class="badge bg-warning text-dark">Break</span> — on a short break</li>
|
|
<li><span class="badge bg-info text-dark">Lunch</span> — at lunch</li>
|
|
</ul>
|
|
<p>
|
|
Elapsed time for break and lunch segments is displayed in muted text to distinguish it from
|
|
productive work time. The card refreshes automatically every 60 seconds.
|
|
</p>
|
|
</section>
|
|
|
|
<section id="kiosk" class="mb-5">
|
|
<h2 class="h4 fw-bold border-bottom pb-2 mb-3">
|
|
<i class="bi bi-tablet me-2"></i>Shop Floor Kiosk
|
|
</h2>
|
|
<p>
|
|
The Timeclock Kiosk is a tablet-friendly page designed to live on a shared device in the shop.
|
|
Employees do not need to log in — they tap their name tile and enter a 4-digit PIN.
|
|
The system automatically clocks them in (if currently out) or out (if currently in).
|
|
A confirmation screen shows the time, segment duration, and today’s running total,
|
|
then returns to the employee grid after 4 seconds.
|
|
</p>
|
|
<div class="alert alert-warning alert-permanent">
|
|
<i class="bi bi-exclamation-triangle me-2"></i>
|
|
The kiosk performs a simple toggle — it does not have dedicated Break/Lunch buttons.
|
|
Use the main Timeclock dashboard for break and lunch tracking.
|
|
</div>
|
|
<h5 class="fw-semibold mt-3">Activating the kiosk</h5>
|
|
<ol>
|
|
<li>On the tablet, log in as a Manager or Company Admin.</li>
|
|
<li>Navigate to <strong>Timeclock › Activate Kiosk</strong> (or go to <code>/Timeclock/Kiosk/Activate</code>).</li>
|
|
<li>The system generates a device token and writes a secure cookie to that browser.</li>
|
|
<li>From now on, <code>/Timeclock/Kiosk</code> works without login on that device.</li>
|
|
</ol>
|
|
<p>
|
|
Multiple tablets per company are supported — each tablet gets its own token.
|
|
To deactivate a tablet, go to <strong>Settings › Company › Timeclock</strong>
|
|
and click <strong>Deactivate</strong> next to the device.
|
|
</p>
|
|
<h5 class="fw-semibold mt-3">Setting employee PINs</h5>
|
|
<ol>
|
|
<li>Go to <strong>Settings › Users</strong> and open the employee’s Edit page.</li>
|
|
<li>Scroll to the <strong>Timeclock Kiosk PIN</strong> section.</li>
|
|
<li>Enter a 4-digit PIN and click <strong>Set PIN</strong>.</li>
|
|
<li>To disable an employee on the kiosk, click <strong>Clear</strong>.</li>
|
|
</ol>
|
|
<p>
|
|
Only employees with a PIN set will appear on the kiosk employee grid.
|
|
</p>
|
|
</section>
|
|
|
|
<section id="manager-tools" class="mb-5">
|
|
<h2 class="h4 fw-bold border-bottom pb-2 mb-3">
|
|
<i class="bi bi-shield-check text-warning me-2"></i>Manager Tools
|
|
</h2>
|
|
<p>
|
|
Managers and Company Admins have additional controls on the Timeclock dashboard.
|
|
Workers cannot edit or delete their own entries — all corrections must go through a Manager or Company Admin.
|
|
</p>
|
|
|
|
<h5 class="fw-semibold mt-3">Edit an entry</h5>
|
|
<p>
|
|
Click the <i class="bi bi-pencil"></i> pencil icon next to any entry in <strong>My Recent History</strong>
|
|
or the <strong>Team History</strong> table. Adjust the clock-in time, clock-out time, or notes.
|
|
Hours worked are recalculated automatically on save.
|
|
</p>
|
|
|
|
<h5 class="fw-semibold mt-3">Delete an entry</h5>
|
|
<p>
|
|
Click the <i class="bi bi-trash"></i> trash icon. The entry is soft-deleted and excluded from
|
|
all totals and reports immediately.
|
|
</p>
|
|
|
|
<h5 class="fw-semibold mt-3">Add a manual time entry</h5>
|
|
<p>
|
|
Forgot to clock in? Paper timesheet to enter? Click <strong><i class="bi bi-plus-circle"></i> Manual Entry</strong>
|
|
in the Team History card header to open the manual entry modal. Select the employee, enter
|
|
the clock-in time, an optional clock-out time, and optional notes, then click <strong>Save Entry</strong>.
|
|
</p>
|
|
<ul>
|
|
<li>You can create an <em>open</em> entry (no clock-out) if the employee is still on the clock.</li>
|
|
<li>Manual entries are always created as Work segments.</li>
|
|
<li>Only employees in your company appear in the employee dropdown.</li>
|
|
</ul>
|
|
|
|
<h5 class="fw-semibold mt-3">Team History</h5>
|
|
<p>
|
|
The manager section at the bottom of the dashboard lets you load any date range for all
|
|
employees, with full punch detail including segment type (Work / Break / Lunch) and
|
|
edit/delete controls on every row.
|
|
</p>
|
|
</section>
|
|
|
|
<section id="reports" class="mb-5">
|
|
<h2 class="h4 fw-bold border-bottom pb-2 mb-3">
|
|
<i class="bi bi-bar-chart-line text-info me-2"></i>Attendance Report & CSV Export
|
|
</h2>
|
|
<p>
|
|
Go to <strong>Reports › Attendance</strong> for a structured attendance summary.
|
|
Managers see all employees; workers see only their own history.
|
|
</p>
|
|
|
|
<h5 class="fw-semibold mt-3">Choosing a period</h5>
|
|
<p>
|
|
The report defaults to the <strong>current week</strong>. Use the toggle and dropdown at
|
|
the top to switch between views:
|
|
</p>
|
|
<ul>
|
|
<li>
|
|
<strong>Week</strong> — choose any of the last 12 weeks from the dropdown.
|
|
“This Week” and “Last Week” are pre-labelled for quick access.
|
|
Weekly subtotal rows are hidden in week view (they would just repeat the total).
|
|
</li>
|
|
<li>
|
|
<strong>Month</strong> — choose any of the last 12 months. Weekly subtotal rows
|
|
appear inside each employee card so you can see how hours are distributed across weeks.
|
|
</li>
|
|
</ul>
|
|
<p>
|
|
The dropdown auto-applies on change — no separate “Filter” button needed.
|
|
</p>
|
|
|
|
<h5 class="fw-semibold mt-3">Hours totals and break exclusion</h5>
|
|
<p>
|
|
Day totals, weekly subtotals, and the employee total badge count <strong>Work segments only</strong>.
|
|
Break and Lunch segments appear in the table (labelled with a badge) but their hours are
|
|
shown in muted text and do not roll up into any total. This ensures the report is
|
|
payroll-ready without manual adjustments.
|
|
</p>
|
|
|
|
<h5 class="fw-semibold mt-3">Payroll CSV export</h5>
|
|
<p>
|
|
Click <strong>Export CSV (Payroll)</strong> to download a flat file for the current period.
|
|
Each row is one clock segment. Columns:
|
|
</p>
|
|
<ul>
|
|
<li>Employee Name, Date, Day of Week</li>
|
|
<li><strong>Type</strong> — Work, Break, or Lunch</li>
|
|
<li>Clock In, Clock Out, Segment Hours</li>
|
|
<li>Day Total Hours, Week Total Hours — populated on Work rows only; blank on Break/Lunch rows</li>
|
|
<li>Notes</li>
|
|
</ul>
|
|
<p>
|
|
The CSV is self-contained (one row per segment, no merged cells) and imports directly into
|
|
Excel, Google Sheets, and most payroll software. The filename includes the period label
|
|
(e.g. <code>Acme_Attendance_Week_of_May_26-Jun_1_2026.csv</code>).
|
|
</p>
|
|
</section>
|
|
|
|
</div>
|
|
|
|
<div class="col-lg-3 d-none d-lg-block">
|
|
<div class="card shadow-sm sticky-top" style="top:80px;">
|
|
<div class="card-body">
|
|
<h6 class="fw-bold mb-3">On This Page</h6>
|
|
<ul class="list-unstyled small">
|
|
<li><a href="#overview" class="text-decoration-none">Overview</a></li>
|
|
<li><a href="#clocking-in-out" class="text-decoration-none">Clocking In, Out & Breaks</a></li>
|
|
<li><a href="#whos-in" class="text-decoration-none">Who’s In</a></li>
|
|
<li><a href="#kiosk" class="text-decoration-none">Shop Floor Kiosk</a></li>
|
|
<li><a href="#manager-tools" class="text-decoration-none">Manager Tools</a></li>
|
|
<li><a href="#reports" class="text-decoration-none">Attendance Report & CSV</a></li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|