Daily Time Record (DTR)

import { DailyTimeRecord, SCHEDULE_STANDARD } from "@/components/micto/daily-time-record";

const logs = [
  {
    date: "2026-10-01",
    punches: { amIn: "07:52 AM", amOut: "12:02 PM", pmIn: "12:58 PM", pmOut: "05:04 PM" },
    status: "regular",
  },
  {
    date: "2026-10-02",
    punches: { amIn: "07:48 AM", amOut: "12:01 PM", pmIn: "12:55 PM", pmOut: "05:02 PM" },
    status: "regular",
  },
  {
    date: "2026-10-03",
    punches: {},
    status: "weekend",
  },
  {
    date: "2026-10-04",
    punches: {},
    status: "weekend",
  },
];

export default function SimpleDtr() {
  return (
    <DailyTimeRecord
      employeeId="2026-1082"
      employeeName="Nehry Dedoro"
      department="Municipal Information and Communications Technology Office"
      position="Information Systems Analyst II"
      month="October 2026"
      schedule={SCHEDULE_STANDARD}
      logs={logs}
    />
  );
}

import {
  SCHEDULE_STANDARD,
  SCHEDULE_STRAIGHT,
  SCHEDULE_NIGHT,
} from "@/components/micto/daily-time-record";
import type { ScheduleConfig } from "@/components/micto/daily-time-record";

// Use a built-in preset
<DailyTimeRecord schedule={SCHEDULE_STANDARD} ... />

// Or define a custom schedule from backend data
const customSchedule: ScheduleConfig = {
  name: "Split Shift",
  slots: [
    { key: "morningIn",  label: "Morning In",  expectedTime: "06:00", type: "in" },
    { key: "morningOut", label: "Morning Out", expectedTime: "10:00", type: "out" },
    { key: "eveningIn",  label: "Evening In",  expectedTime: "16:00", type: "in" },
    { key: "eveningOut", label: "Evening Out", expectedTime: "20:00", type: "out" },
  ],
  expectedDailyHours: 8,
  breakMinutes: 0,
  tardinessGraceMinutes: 15,
};

<DailyTimeRecord schedule={customSchedule} ... />

import * as React from "react";
import { DailyTimeRecord, SCHEDULE_STANDARD } from "@/components/micto/daily-time-record";

export default function InteractiveDtr() {
  const [logs, setLogs] = React.useState([
    {
      date: "2026-10-12",
      punches: { amOut: "12:01 PM", pmIn: "12:56 PM", pmOut: "05:03 PM" },
      status: "regular", // amIn is missing!
    }
  ]);

  const handleAdjustment = (date: string, slotKey: string) => {
    const timePrompt = prompt(`Enter correct time for ${slotKey} on ${date}:`, "08:00 AM");
    if (!timePrompt) return;

    setLogs((prev) =>
      prev.map((log) =>
        log.date === date
          ? { ...log, punches: { ...log.punches, [slotKey]: timePrompt } }
          : log
      )
    );
  };

  return (
    <DailyTimeRecord
      employeeId="2026-1082"
      employeeName="Nehry Dedoro"
      department="MICTO"
      position="Information Systems Analyst II"
      month="October 2026"
      schedule={SCHEDULE_STANDARD}
      logs={logs}
      onFileAdjustment={handleAdjustment}
    />
  );
}