Styled Card - Copy this React, Mui Component to your project
I want to create a ui of reports on this data 1. Project Overview The purpose of this document is to define the requirements for creating a Report Model in the ERP system designed for the printing factory. The ERP system currently tracks various processes including: 1. Computer to Plate (CTP) 2. Offset Printing 3. Cutting 4. Mixing 5. Numbering 6. Bundling 7. Dispatch The factory works based on Quantity Sheets. A Quantity Sheet contains information about multiple Lots. Each Lot contains multiple Catches that need to be processed and tracked at each stage. The Report Model will provide structured and insightful data, enabling efficient monitoring and reporting of the progress, quantities, and statuses at various stages. 2. Objectives The Report Model aims to achieve the following objectives: 1. Provide summarized and detailed reports for each process. 2. Track the progress of lots, and catches. 3. Generate real time insights into the factory's production workflow. 4. Enable data export (PDF, Excel, etc.) for management purposes. 5. Improve decision making with accurate and consolidated reporting. 6. Identify delays and bottlenecks across processes. 3. Scope ● Creation of a Report Model to provide data visualization and tabular reports. ● Integration of all processes into the reporting structure. ● Report generation for Projects, Lots, and Catches. ● Status tracking at each process stage. ● Inclusion of interim and completed quantities in reports. ● Export functionality (PDF, Excel). ● User role based access for reports. ● Filters and search options in reports (e.g., Date, Process Stage, Status). 4. Functional Requirements 4.1 Report Data Structure The reporting model will have three main levels: 1. Quantity Sheet Level ○ ID ○ Uploaded Date ○ Total Quantity ○ Total Lots ○ Total Catches ○ Completed Catches ○ Pending Catches ○ Process Status Summary (e.g., % completed) ○ Quantity Sheet uploaded By 2. Lot Level ○ Lot ID ○ Quantity Sheet ID ○ Total Catches in Lot ○ Process Status (e.g., In Progress, Completed) ○ Date Started ○ Date Completed 3. Catch Level ○ Catch ID ○ Lot ID ○ Process Stage (CTP, Printing, Cutting, etc.) ○ Assigned Team ○ Start Date and End Date for each process stage ○ Status (Pending, In Progress, Completed) ○ Interim Quantity Updates ○ Remarks/Comments 4.2 Report Types 1. Summary Report ○ Displays a high level summary of the processes at the Quantity Sheet level. ○ Aggregated counts of lots and catches. ○ Overall completion percentage. 2. Detailed Report ○ Drill down capability to view information at the Lot and Catch levels. ○ Process wise tracking for each Catch. 3. Process Specific Reports ○ Reports for individual processes (e.g., CTP, Printing, Cutting). ○ Display counts and progress for specific processes. 4. Interim Quantity Report ○ Tracks interim quantity updates at various stages. ○ Displays team details and status. 5. Delay/Issue Report ○ Highlights delays and bottlenecks in the process. ○ Identifies lots/catches exceeding expected timelines. 4.3 Filters & Search Options ● Filter by Quantity Sheet, Lot, or Catch. ● Filter by Process Stage (CTP, Printing, Cutting, etc.). ● Filter by Date Range. ● Filter by Status (Pending, In Progress, Completed). Filter by User Filter by Project name Filter by Catch Filter by Lot Filter by Project status Completed Pending Filter by Process specific Filter by Alarm Who and when alarm was raised By whom alarm was resolved Filter by Remarks Filter Stopped Catch Filter by Group Filter by Project Type Paper Booklet Total number of lots & lots released for production Activity Type Crud Logged In / At 4.4 Export Functionality ● Export reports in PDF and Excel formats. ● Reports should retain all formatting, filters, and selected data. Please give me suggestion of ui professional reports like i want card s on home screen when i click on certain card it will show details of that particular project and i also want to filter according to need onclick on card dont open a new scrren i want to expand clicked card and show detials show that particular clicked card
