Timesheet Confirmation

Dashboards 270

About

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.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Timesheet Confirmation to your project and fits it to your theme.

Code

How Timesheet Confirmation is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

import * 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>
  );
}