// ============================================================= // TIME TRACKING GRAPHICS — animated mocks for the overview page // (Gfx, small, side-by-side with copy) and the feature detail // pages (Mock, full-width, top of page). Self-contained: does not // depend on helpers from other graphics-*.jsx files. // ============================================================= const useTickTT = (interval = 1600) => { const [t, setT] = React.useState(0); React.useEffect(() => { const id = setInterval(() => setT(x => x + 1), interval); return () => clearInterval(id); }, [interval]); return t; }; const TBar = ({ url }) => (
{url}
); const TAvatar = ({ s, color = 'var(--cyan-600)', size = 28 }) => ( {s} ); // ============================================================= // OVERVIEW "GFX" — used beside copy on the /time-tracking page // ============================================================= // ---- 1. Keyboard/mouse activity + screenshots + all-screens ---- const ActivityCaptureGfx = () => { const t = useTickTT(900); const bars = Array.from({ length: 14 }, (_, i) => 30 + Math.abs(((i * 37 + t * 13) % 70) - 35)); const shots = [0, 1, 2]; return (
keyboard & mouse
Input intensity — live
Recording
{bars.map((h, i) => (
60 ? 'var(--cyan-600)' : 'var(--cyan-500)', opacity: 0.35 + (h / 100) * 0.65, transition: 'height 0.5s ease' }} /> ))}
Screenshots · all screens
{shots.map(i => { const active = t % 3 === i; return (
Screen {i + 1}
); })}
); }; // ---- 2. Live monitoring + AI cheating deduction ---- const LiveMonitorGfx = () => { const t = useTickTT(1700); const team = [ { n: 'Priya S.', c: 'var(--cyan-600)' }, { n: 'Rahul K.', c: 'var(--brand-500)' }, { n: 'Meera J.', c: 'var(--accent-500)' }, { n: 'Anish M.', c: 'var(--warn-500)' }, ]; const statuses = ['Active', 'Active', 'Idle', 'Active']; const flagIdx = t % 4; return (
live monitoring
3 active · 1 idle
Live
{team.map((m, i) => (
{m.n}
))}
AI cheating deduction
{team[flagIdx].n} — mouse-jiggle pattern flagged, marked idle automatically.
); }; // ---- 3. Edit time + project analytics + productivity rules ---- const ProjectAnalyticsGfx = () => { const t = useTickTT(1500); const projects = [ { n: 'Client — Nimbus', h: 62, c: 'var(--cyan-600)' }, { n: 'Internal — Website', h: 38, c: 'var(--brand-500)' }, { n: 'Client — Surya', h: 51, c: 'var(--accent-500)' }, ]; const rules = [ { l: 'Flag idle > 5 min', on: true }, { l: 'Block non-work apps 9–6', on: true }, { l: 'Screenshot every 10 min', on: t % 2 === 0 }, ]; return (
project analytics
151 hrs logged this week
1 manual edit
{projects.map((p, i) => (
{p.n}
))}
Productivity rules
{rules.map((r, i) => (
{r.l}
))}
); }; // ============================================================= // FEATURE DETAIL "MOCK" — full-width, top of each feature page // ============================================================= // 1. Keyboard & mouse activity const KeyboardMouseMock = () => { const t = useTickTT(1400); const blocks = Array.from({ length: 24 }, (_, i) => { const v = (i * 53 + 7) % 100; return v > 70 ? 'high' : v > 35 ? 'mid' : 'low'; }); const colors = { high: '#0891b2', mid: '#67e8f9', low: 'var(--ink-100)' }; return (
activity · today
Priya Sharma — Active 6h 42m
Recording
{blocks.map((b, i) => (
))}
High input Moderate Idle
{[{ l: 'Keystrokes', v: '6,412' }, { l: 'Mouse clicks', v: '2,180' }, { l: 'Scroll distance', v: '318 m' }].map((s, i) => (
{s.l}
{s.v}
))}
); }; // 2. Take screenshots const ScreenshotsMock = () => { const t = useTickTT(1200); const shots = Array.from({ length: 6 }, (_, i) => ({ time: `${9 + Math.floor(i / 2)}:${i % 2 ? '40' : '10'} am`, tone: ['linear-gradient(135deg,#e0e7ff,#c7d2fe)', 'linear-gradient(135deg,#cffafe,#a5f3fc)', 'linear-gradient(135deg,#dcfce7,#bbf7d0)'][i % 3], })); return (
take screenshots
Captured every 10 minutes
Blurred by default
{shots.map((s, i) => { const flashing = t % 6 === i; return (
{flashing && } {s.time}
); })}
Employees can blur or skip a capture once per day — every skip is logged for the manager.
); }; // 3. Live monitoring const LiveMonitoringMock = () => { const t = useTickTT(1600); const rows = [ { n: 'Priya S.', app: 'Figma', base: 'Active', c: 'var(--cyan-600)' }, { n: 'Rahul K.', app: 'VS Code', base: 'Active', c: 'var(--brand-500)' }, { n: 'Meera J.', app: 'Away', base: 'Idle', c: 'var(--warn-500)' }, { n: 'Anish M.', app: 'Chrome', base: 'Active', c: 'var(--rose-500)' }, { n: 'Karthik V.', app: 'Offline', base: 'Offline', c: 'var(--ink-400)' }, ]; const dotColor = { Active: '#22c55e', Idle: '#f59e0b', Offline: '#94a3b8' }; return (
live monitoring
3 online · 1 idle · 1 offline
Live
{rows.map((r, i) => (
{r.n} {r.app} {r.base}
))}
); }; // 4. All screens const AllScreensMock = () => { const t = useTickTT(1800); const screens = [ { l: 'Screen 1', app: 'VS Code — payroll.js' }, { l: 'Screen 2', app: 'Chrome — app.primehr.in' }, { l: 'Screen 3', app: 'Slack — #engineering' }, ]; return (
all screens
Karthik V. — 3 monitors
Multi-monitor
{screens.map((s, i) => { const active = t % 3 === i; return (
{s.l}
{s.app}
); })}
Every connected display is captured in the same snapshot — nothing off-screen goes untracked.
); }; // 5. AI cheating deduction const AICheatDetectionMock = () => { const t = useTickTT(1500); const score = 92 - (t % 4) * 3; const flags = [ { l: 'Mouse-jiggle pattern detected', sev: 'High', c: 'var(--rose-500)', time: '11:42 am' }, { l: 'Screenshot blank 3× in a row', sev: 'Medium', c: 'var(--warn-500)', time: '2:05 pm' }, { l: 'Keyboard silent but marked active (22m)', sev: 'Medium', c: 'var(--warn-500)', time: '4:18 pm' }, ]; return (
ai cheating deduction
12 signals monitored in real-time
85 ? 'var(--accent-600)' : 'var(--warn-500)', transition: 'color 0.4s' }}>{score}%
Trust score
{flags.map((f, i) => (
{f.l} {f.sev} {f.time}
))}
); }; // 6. Edit time manually const EditTimeManuallyMock = () => { const t = useTickTT(1800); const editing = t % 2 === 1; return (
edit time manually
Weekly timesheet — Rahul K.
Audit-logged
DayClock inClock outTotal
{['Mon', 'Tue', 'Wed'].map((d, i) => (
{d} {i === 1 ? ( <> {editing ? '09:00' : 09:14} {editing ? '18:00' : 18:02} {editing ? '9h 00m' : '8h 48m'} ) : ( <> 09:0{i} 18:0{i} 8h 5{i}m )}
))}
Audit log
Manager Meera J. edited Tue 09:14→09:00, 18:02→18:00 — reason: "forgot to clock in, approved". Just now
); }; // 7. Project analytics const ProjectAnalyticsMock = () => { const t = useTickTT(1400); const projects = [ { n: 'Client — Nimbus Fin', h: 42, budget: 60, c: 'var(--cyan-600)' }, { n: 'Internal — Website', h: 18, budget: 40, c: 'var(--brand-500)' }, { n: 'Client — Surya Pharma', h: 36, budget: 45, c: 'var(--accent-500)' }, { n: 'Client — BlueWave', h: 55, budget: 50, c: 'var(--warn-500)' }, ]; return (
project analytics
151 hrs logged · 79% billable
This week
{projects.map((p, i) => { const pct = Math.min(100, Math.round((p.h / p.budget) * 100)); return (
{p.n} {p.h}h / {p.budget}h
); })}
Top contributors
{[{ n: 'Priya', h: '38h', c: 'var(--cyan-600)' }, { n: 'Rahul', h: '34h', c: 'var(--brand-500)' }, { n: 'Meera', h: '29h', c: 'var(--accent-500)' }].map((c, i) => (
{c.n}
{c.h}
))}
); }; // 8. Custom productivity rules const ProductivityRulesMock = () => { const t = useTickTT(1700); const rules = [ { l: 'Flag idle after 5 minutes', on: true }, { l: 'Block non-work apps 9 am – 6 pm', on: true }, { l: 'Require screenshot every 10 min', on: t % 3 !== 0 }, { l: 'Auto clock-out after 30 min idle', on: false }, ]; return (
productivity rules
Custom rule builder
{rules.map((r, i) => (
{r.l}
))}
Triggered just now: idle 6 min — Rahul K. flagged per "Flag idle after 5 minutes".
); }; // ============================================================= // ALL-FEATURES SHOWCASE — single grid, one animated mini-preview // per feature, all 8 visible together on the /time-tracking page. // ============================================================= const FEATURE_CARDS = [ { slug: 'keyboard-mouse-activity', icon: 'keyboard', t: 'Keyboard & mouse activity', d: 'Live input-intensity, minute by minute.', kind: 'activity' }, { slug: 'screenshots', icon: 'camera', t: 'Take screenshots', d: 'Randomized, timed desktop captures.', kind: 'screenshot' }, { slug: 'live-monitoring', icon: 'eye', t: 'Live monitoring', d: 'Active, idle or offline — right now.', kind: 'live' }, { slug: 'all-screens', icon: 'grid', t: 'All screens', d: 'Every connected monitor, captured.', kind: 'screens' }, { slug: 'ai-cheating-detection', icon: 'scan', t: 'AI cheating deduction', d: 'Flags idle-fraud & proxy work.', kind: 'scan' }, { slug: 'edit-time-manually', icon: 'edit', t: 'Edit time manually', d: 'Manager overrides, audit-logged.', kind: 'edit' }, { slug: 'project-analytics', icon: 'chart', t: 'Project analytics', d: 'Hours, budget and utilization.', kind: 'analytics' }, { slug: 'productivity-rules', icon: 'sliders', t: 'Productivity rules', d: 'Custom idle & app-usage rules.', kind: 'rules' }, ]; const MiniVisual = ({ kind, t }) => { switch (kind) { case 'activity': { const bars = Array.from({ length: 9 }, (_, i) => 24 + Math.abs(((i * 41 + t * 17) % 76) - 38)); return (
{bars.map((h, i) =>
)}
); } case 'screenshot': { const flash = t % 3 === 0; return (
{[0, 1, 2].map(i => (
{flash && i === t % 3 &&
}
))}
); } case 'live': return (
LIVE · 3 ACTIVE
); case 'screens': return (
{[0, 1, 2].map(i => (
))}
); case 'scan': return (
); case 'edit': return (
{t % 2 === 0 ? '09:00' : '09:14'} audit-logged
); case 'analytics': { const hs = [t % 2 === 0 ? 65 : 45, 40, t % 2 === 0 ? 30 : 55]; return (
{hs.map((h, i) =>
)}
); } case 'rules': return ( ); default: return null; } }; const FeatureShowcaseGrid = () => { const t = useTickTT(1100); return (
{FEATURE_CARDS.map((f, i) => (
{f.t}
{f.d}
 ))}
); }; Object.assign(window, { ActivityCaptureGfx, LiveMonitorGfx, ProjectAnalyticsGfx, FeatureShowcaseGrid, KeyboardMouseMock, ScreenshotsMock, LiveMonitoringMock, AllScreensMock, AICheatDetectionMock, EditTimeManuallyMock, ProjectAnalyticsMock, ProductivityRulesMock, });