NQH
Nam Quách Hải

Dashboard - Copy this React, Tailwind Component to your project

Create a dashboard for worksite management. The dashboard can show many worksites' information, as a slide up down scroll. each worksite container basic information: name, address, and manager. Come along with 3 main sections, which is display in a row and can be collapsed/expanded: the employees' attendance section, the worksite's progress section and the daily cost section.The employees' attendance section should include list of employee,The background color shoud not same same as the chart. also give the employees list color that same to chart's component to detect who present, and who absent. group by attendance state, sort from present to absent.In the section Worksite Progress, include all procces (as component of every worksite, and its progress in two way: progress by workload, and progress by cost, which is calculated accumulately until today, also give it scroll up down bar.In Daily Cost section, add summary today cost (labor cost, material cost, and input cost), and a button that pop out a form help enter input cost for today, which can input 3 type of input cost: invoice, receipt, and delivery slip.The enter input costs form will allow to import a form of invoice, and can be select to identity as invoice/receipt/delivery slip. the invoice form has some popular input text fields as general invoce. and can add item which attribute (name, quantity, unit, subtotal, date).The enter input costs form will allow to import a form of invoice, and can be select to identity as invoice/receipt/delivery slip. the invoice form has some popular input text fields as general invoce. and can add item which attribute (name, quantity, unit, subtotal, date).Add to each worksite a report export. In employees' attendance section, add a button to approve emplyee's attendance for each employee is present in workingday. In worksite progress section, add a button to input manday from employee attendance section.

Prompt
Component Preview

About

Dashboard - Manage worksites with employee attendance, progress tracking, and daily cost summaries. Built with React and Tailwind. Get code instantly!

Share

Last updated 1 month ago