);
}
// ── Timesheets (attendance editor) ────────────────────────────
// Owner/admin tool: pick an employee → day-wise attendance timeline →
// click any day to open a side editor where individual punch
// timestamps can be edited, deleted, or added (with a source + note).
// All writes are audit-stamped (edited_by/edited_at) on the server.
const PP_KIND_OPTS = [
{ id: "in", label: "Punch in" },
{ id: "out", label: "Punch out" },
{ id: "break_start", label: "Break start" },
{ id: "break_end", label: "Break end" },
];
const PP_SOURCE_OPTS = [
{ key: "manual", label: "Manual", source: "manual" },
{ key: "biometric", label: "Biometric", source: "biometric" },
{ key: "forgot", label: "Forgot to punch", source: "manual", note: "Forgot to punch" },
{ key: "web", label: "Web", source: "web" },
{ key: "mobile", label: "Mobile", source: "mobile" },
];
function ppKindLabel(k) { return (PP_KIND_OPTS.find(o => o.id === k) || {}).label || k; }
function ppResolveSource(key, note) {
const o = PP_SOURCE_OPTS.find(x => x.key === key) || PP_SOURCE_OPTS[0];
const n = (note && note.trim()) ? note.trim() : (o.note || "");
return { source: o.source, note: n };
}
function ppFmtDur(mins) {
if (!mins) return "0m";
const h = Math.floor(mins / 60), mm = Math.round(mins % 60);
return (h ? h + "h " : "") + mm + "m";
}
function ppYmd(d) {
return d.getFullYear() + "-" + String(d.getMonth() + 1).padStart(2, "0") + "-" + String(d.getDate()).padStart(2, "0");
}
// Date-range presets for the Timesheets filter. Returns { key, from, to }.
// Week starts on Monday (matches IST work-week convention).
function ppPresetRange(key) {
const today = new Date();
const dow = (today.getDay() + 6) % 7; // 0=Mon … 6=Sun
let from = new Date(), to = new Date();
if (key === "today") { /* both = today */ }
else if (key === "yesterday") { from.setDate(today.getDate() - 1); to.setDate(today.getDate() - 1); }
else if (key === "7") from.setDate(today.getDate() - 6);
else if (key === "20") from.setDate(today.getDate() - 19);
else if (key === "30") from.setDate(today.getDate() - 29);
else if (key === "thisweek") { from = new Date(today); from.setDate(today.getDate() - dow); }
else if (key === "lastweek") { from = new Date(today); from.setDate(today.getDate() - dow - 7);
to = new Date(from); to.setDate(from.getDate() + 6); }
else if (key === "thismonth") from = new Date(today.getFullYear(), today.getMonth(), 1);
else if (key === "lastmonth") { from = new Date(today.getFullYear(), today.getMonth() - 1, 1); to = new Date(today.getFullYear(), today.getMonth(), 0); }
else if (key === "thisyear") from = new Date(today.getFullYear(), 0, 1);
return { key, from: ppYmd(from), to: ppYmd(to) };
}
const PP_RANGE_PRESETS = [
{ key: "today", label: "Today" },
{ key: "yesterday", label: "Yesterday" },
{ key: "thisweek", label: "This week" },
{ key: "lastweek", label: "Last week" },
{ key: "7", label: "Last 7 days" },
{ key: "20", label: "Last 20 days" },
{ key: "30", label: "Last 30 days" },
{ key: "thismonth", label: "This month" },
{ key: "lastmonth", label: "Last month" },
{ key: "thisyear", label: "This year" },
];
// Aggregate stats for a list of day objects (as returned by people.timeline).
// Used to show a summary card above the day list.
// shortDays: a worked day that logged less than 8 hours — useful for
// spotting under-time without combing the list.
function ppRangeSummary(days) {
const s = { worked: 0, lateMins: 0, present: 0, late: 0, absent: 0, leave: 0, holiday: 0, shortDays: 0, days: 0 };
for (const d of (days || [])) {
s.days++;
if (d.hoursLogged) s.worked += d.hoursLogged * 60;
if (d.minsLate) s.lateMins += d.minsLate;
const isWorked = d.status === "in" || d.status === "out" || d.status === "remote" || d.status === "late";
if (d.status === "in" || d.status === "out" || d.status === "remote") s.present++;
else if (d.status === "late") { s.present++; s.late++; }
else if (d.status === "absent") s.absent++;
else if (d.status === "leave" || d.status === "sick") s.leave++;
else if (d.status === "holiday") s.holiday++;
// Count finished (out) days that fell short of 8h. Ignore the
// ongoing day (still "in") so a person checked in but not yet
// out at 5pm isn't flagged.
if (isWorked && d.out && (d.hoursLogged || 0) < 8) s.shortDays++;
}
return s;
}
// Fixed window for the per-day timeline bar (06:00–22:00), so bars are
// comparable across rows. Minutes-of-day.
const PP_BAR_WS = 360, PP_BAR_WE = 1320;
function ppBarPct(v) { return Math.max(0, Math.min(100, ((v - PP_BAR_WS) / (PP_BAR_WE - PP_BAR_WS)) * 100)); }
function PpTimesheets() {
const [members, setMembers] = React.useState(null);
const [sel, setSel] = React.useState(null); // selected member
const [days, setDays] = React.useState(null);
const [loadingDays, setLD] = React.useState(false);
const [editDate, setEditDate] = React.useState(null);
const [q, setQ] = React.useState("");
const [err, setErr] = React.useState("");
const [range, setRange] = React.useState(() => ppPresetRange("20")); // default last 20 days
const [tick, setTick] = React.useState(0); // bump to re-fetch after edits
const [todayMap, setTodayMap] = React.useState({}); // user_id → today {status,in,out,leaveType}
const [teamToday, setTeamToday] = React.useState(null);// full team list for the day summary card
React.useEffect(() => {
window.api.people.members()
.then(r => setMembers((r.members || []).filter(m => m.is_employee)))
.catch(e => setErr((e && e.body && (e.body.message || e.body.error)) || "Could not load employees"));
// Pull today's in/out for everyone so each row can show it under the email.
window.api.people.team()
.then(r => {
const map = {};
for (const p of (r.people || [])) map[p.id] = p.today || {};
setTodayMap(map);
setTeamToday(r.people || []);
})
.catch(() => {});
}, []);
// Re-fetch whenever the selected person, the date range, or the
// refresh tick changes.
React.useEffect(() => {
if (!sel) { setDays(null); return; }
let alive = true;
setLD(true);
window.api.people.timeline({ userId: sel.id, from: range.from, to: range.to })
.then(r => { if (alive) { setDays((r.days || []).slice().reverse()); setLD(false); } })
.catch(() => { if (alive) { setDays([]); setLD(false); } });
return () => { alive = false; };
}, [sel, range, tick]);
function setCustom(field, val) {
setRange(r => ({ ...r, key: "custom", [field]: val }));
}
const STATUS_META = {
in: ["Present", "#21a366"], late: ["Late", "#fdab3d"], remote: ["Remote", "#0073ea"],
out: ["Worked", "#5b6172"], absent: ["Absent", "#c93636"], leave: ["Leave", "#a25ddc"],
holiday: ["Holiday", "#e8862a"],
};
if (err) return
{err}
;
const ql = q.trim().toLowerCase();
const filtered = (members || []).filter(m => !ql || (m.name || "").toLowerCase().includes(ql) || (m.email || "").toLowerCase().includes(ql));
// ── Company "today" snapshot ────────────────────────────────
// Derived from /people/team. Counts statuses (in/late/remote count
// as Present), sums worked hours, picks out currently-working
// (checked in but not out) and short-day stragglers (< 8h done so
// far). Refreshes whenever the team payload comes back.
const todaySum = React.useMemo(() => {
if (!teamToday) return null;
const s = {
total: teamToday.length,
present: 0, late: 0, leave: 0, holiday: 0, absent: 0,
working: 0, doneShort: 0, doneFull: 0, hoursTotal: 0,
};
for (const p of teamToday) {
const t = p.today || {};
const st = t.status;
// The backend's resolveDay returns status="out" for BOTH:
// (a) the person punched in, then out (real Present)
// (b) the person never punched in (no in/out timestamps)
// Case (b) is really an Absent, but the status string doesn't
// distinguish it. We use the presence of `t.in` to tell them
// apart so the counts add up: every employee lands in exactly
// one of Present / Late / Absent / On leave / Holiday.
const hasIn = !!t.in;
if (st === "leave" || st === "sick") s.leave++;
else if (st === "holiday") s.holiday++;
else if (st === "absent") s.absent++;
else if (st === "in" || st === "remote") s.present++;
else if (st === "late") { s.present++; s.late++; }
else if (st === "out" && hasIn) s.present++;
else s.absent++; // never punched in
if (t.hoursLogged) s.hoursTotal += Number(t.hoursLogged);
const isWorked = hasIn && (st === "in" || st === "out" || st === "remote" || st === "late");
if (isWorked && !t.out) s.working++;
if (isWorked && t.out) {
if ((Number(t.hoursLogged) || 0) < 8) s.doneShort++;
else s.doneFull++;
}
}
return s;
}, [teamToday]);
const todayLabel = React.useMemo(() => {
const d = new Date();
return d.toLocaleDateString(undefined, { weekday: "long", day: "numeric", month: "long" });
}, []);
return (
<>
{/* Company "today" summary — shows above the Timesheets card so
an admin can see the workforce status at a glance before
drilling into any one person. */}
{todaySum && (
Example: pick Casual here. After an employee takes a sick leave without
uploading a certificate, the very next sick leave they file will land as
Casual instead — they only get sick leave back once the certificate is
submitted.
{err &&
{err}
}
,
document.body
);
}
// ── Admin: Leave balances ─────────────────────────────────────
// Per-employee × per-type table. Owner/admin can click any cell to
// open the adjuster — bump entitled days up, reset used to zero
// after a correction, or just inspect what's left. Edits go through
// PATCH /api/people/leave/balances and the row reloads on save.
function PpBalancesAdmin() {
const [members, setMembers] = React.useState(null);
const [types, setTypes] = React.useState([]);
const [balByUser, setBalByUser] = React.useState({}); // userId → typeId → bal
const [q, setQ] = React.useState("");
const [err, setErr] = React.useState("");
const [loading, setLoading] = React.useState(true);
const [edit, setEdit] = React.useState(null); // { user, type, bal }
// editAll: opens the "edit every leave type at once" modal for one
// employee. Set when the user clicks the employee name; cleared on
// close. Carries the user row + the types list + the current
// per-type balance map so the modal renders the right rows.
const [editAll, setEditAll] = React.useState(null); // { user, balances: {typeId: bal} }
const reload = React.useCallback(async () => {
setLoading(true); setErr("");
try {
const [m, t] = await Promise.all([
window.api.people.members(),
window.api.people.leaveTypes(),
]);
const emps = (m.members || []).filter(x => x.is_employee);
setMembers(emps);
setTypes(t.types || []);
// Pull balances for everyone in parallel — small workspaces only.
const map = {};
await Promise.all(emps.map(async u => {
try {
const b = await window.api.people.balances({ userId: u.id });
const inner = {};
for (const it of (b.items || [])) inner[it.id] = it;
map[u.id] = inner;
} catch { map[u.id] = {}; }
}));
setBalByUser(map);
} catch (e) {
setErr((e && e.body && (e.body.message || e.body.error)) || (e && e.message) || "Could not load balances");
} finally { setLoading(false); }
}, []);
React.useEffect(() => { reload(); }, [reload]);
const ql = q.trim().toLowerCase();
const filtered = (members || []).filter(m => !ql
|| (m.name || "").toLowerCase().includes(ql)
|| (m.email || "").toLowerCase().includes(ql)
|| (m.employee_code || "").toLowerCase().includes(ql));
if (err) return
{err}
;
return (
Leave balances
Per-employee × per-type. Click a cell to adjust one type, or click the employee name to edit every leave type at once.