Components
Loading preview...
This file contains the reusable Timesheet Confirmation component. It's designed to be highly customizable through props, uses shadcn/ui theme variables for styling, and includes animations for a modern feel.
@ravikatiyar
npx shadcn@latest add https://21st.dev/r/ravikatiyar162/timesheet-confirmationimport * as React from "react";
import { Button } from "@/components/ui/button";
import { TimesheetConfirmation } from "@/components/ui/timesheet-confirmation";
export default function TimesheetConfirmationDemo() {
const [isDialogOpen, setIsDialogOpen] = React.useState(false);
// Sample data to be passed into the component
const sampleData = {
clientName: "ONE Collective GmbH",
taskName: "Product Design",
timeEntries: [
{ date: "Monday, 7 May 2024", duration: "4:30" },
{ date: "Wednesday, 9 May 2024", duration: "1:30" },
{ date: "Wednesday, 11 May 2024", duration: "2:00" },
],
totalHours: "8:00",
financials: [
{ label: "8 Hours of Work", value: 1440.00 },
{ label: "ACME Commission (20%)", value: 288.00, isCommission: true },
],
takeHomeAmount: 1152.00,
};
return (
<div className="flex min-h-[350px] w-full items-center justify-center p-4">
<Button onClick={() => setIsDialogOpen(true)}>
Submit Timesheet
</Button>
<TimesheetConfirmation
isOpen={isDialogOpen}
onClose={() => setIsDialogOpen(false)}
clientName={sampleData.clientName}
taskName={sampleData.taskName}
timeEntries={sampleData.timeEntries}
financials={sampleData.financials}
totalHours={sampleData.totalHours}
takeHomeAmount={sampleData.takeHomeAmount}
/>
</div>
);
}