|
"use client"; |
|
import React, { useEffect, useRef, useState } from "react"; |
|
import ReactToPrint from "react-to-print"; |
|
import { Button } from "./ui/button"; |
|
import Receipt from "./receipt"; |
|
import { scanCard } from "@/lib/client"; |
|
import { useToast } from "./ui/use-toast"; |
|
|
|
export default function PrintComponent() { |
|
let componentRef = useRef(); |
|
let printRef = useRef(); |
|
|
|
const [isLoading, setIsLoading] = useState(true); |
|
const [barcode, setBarcode] = useState(""); |
|
const [attendance, setAttendance] = useState(); |
|
const [success, setSuccess] = useState(false); |
|
|
|
const toast = useToast(); |
|
|
|
useEffect(() => { |
|
if (attendance) { |
|
printRef.current.handlePrint(); |
|
} |
|
}, [attendance]); |
|
|
|
const onSubmit = async (event: any, barcode: string) => { |
|
if (event.key === "Enter") { |
|
const attendanceData: any = await scanCard(barcode); |
|
if (attendanceData) { |
|
setAttendance(attendanceData.data); |
|
setIsLoading(false); |
|
|
|
|
|
setSuccess(true) |
|
|
|
toast.toast({ |
|
title: "Record Lunch Attendance", |
|
description: attendanceData.message, |
|
}); |
|
} else { |
|
setSuccess(false) |
|
setBarcode("") |
|
} |
|
|
|
} |
|
}; |
|
|
|
// @ts-ignore |
|
return ( |
|
<> |
|
<div className=""> |
|
<input |
|
type="text" |
|
name="" |
|
id="" |
|
className="w-[350px] px-4 py-2 border rounded-lg focus:outline-none focus:border-blue-500 transition duration-300 ease-in-out" |
|
placeholder="Enter Barcode and press Enter" |
|
value={barcode} |
|
onChange={(e: any) => { |
|
setBarcode(e.currentTarget.value); |
|
}} |
|
onKeyUp={(event) => { |
|
onSubmit(event, barcode); |
|
}} |
|
/> |
|
{isLoading ? ( |
|
<p className="semibold mt-2 pl-2">Please enter your barcode</p> |
|
) : ( |
|
<ReactToPrint |
|
trigger={() => <Button className="hidden">Print this out!</Button>} |
|
content={() => componentRef} |
|
documentTitle={`Receipt ${attendance?.staff_name}`} |
|
ref={printRef} |
|
/> |
|
)} |
|
|
|
<div className="hidden"> |
|
<Receipt |
|
ref={(el) => (componentRef = el)} |
|
success={success} |
|
barcode={attendance?.barcode || ""} |
|
name={attendance?.staff_name || ""} |
|
/> |
|
</div> |
|
</div> |
|
</> |
|
); |
|
} |
