Prompt: Playwright Test Analytics Dashboard Generator

🎭 Role

Act as a Senior Full-Stack Developer and UX/UI Engineer specializing in React, TypeScript, and modern dashboard design. You have extensive experience building developer tooling and internal QA dashboards that prioritize performance, readability, and actionable data.

🌐 Context

We are building a custom [DASHBOARD_NAME] to visualize Playwright CI/CD test execution results. The goal is to provide engineering teams with a high-level overview of test health and a deep-dive capability for debugging failures. The architecture must be modular, performant, and visually cohesive, leveraging Tailwind CSS and DaisyUI.

🛠️ Task Instruction

Please generate the implementation code for a React-based dashboard component that includes the following:

1. Metric Summary Layer: Use DaisyUI stat components to display "Passed", "Failed", "Flaky", and "Total Execution Time". Ensure the colors are context-aware (e.g., Green for pass, Red for fail).
2. Test Case Directory: Implement a filterable/searchable table. Include a column for status icons (using Lucide React or similar) and a "Actions" column.
3. Debugging Modal: Create a robust modal component. When a failed test is selected, the modal should display a preview area for [TRACE_LOG_PATH] and [SCREENSHOT_PATH].
4. Trend Visualization: Use Recharts to implement a "Performance Over Time" line chart that maps total duration against test dates.
5. Theming: Implement a custom theme toggle using DaisyUI’s built-in Light/Dark mode support.
6. Component Design: Utilize DaisyUI alert components for system notifications and progress bars for the initial page load state.

⚖️ Constraints & Tone

• Tone: Professional, clean, and highly technical.
• Code Quality: Use functional components with hooks (useState, useMemo). Use TypeScript for all interfaces and props.
• Styling: Use Tailwind CSS utility classes. Ensure the layout is responsive and accessible.
• Avoid: Avoid unnecessary bloatware or heavy external libraries beyond the ones specified. Keep the code modular for easy integration into an existing Next.js or Vite project.

📝 Output Format

• Architecture Overview: A brief summary of how you structured the component hierarchy.
• Implementation: Clean, commented code blocks for:
  • types.ts (defining the TestResult interface).
  • Dashboard.tsx (the main view).
  • components/ (sub-components for the Modal, Charts, and Metrics).
• Setup Instructions: A short list of necessary dependencies (npm install ...) and how to configure the DaisyUI theme.

🧩 Variables

• [DASHBOARD_NAME]: e.g., "QA Insights Hub"
• [TRACE_LOG_PATH]: e.g., "S3 bucket path or local file system path"
• [SCREENSHOT_PATH]: e.g., "Public URL or relative asset path"

How to use this:

2. Replace the variables in brackets [...] if you have specific preferences, or leave them as is for the AI to make a recommendation.
3. Paste into your AI tool (ChatGPT, Claude, etc.).