Build a modern and responsive web UI template for an AI Mock Drill Simulation platform using React Tailwind CSS with the following key components:1. Login PageSimple, secure UI with:Email and Password fieldsLogin buttonForgot Password linkSignup option (optional)2. Admin DashboardShould have two main sections:✅ a. Add PeopleA form with the following input fields:Full NameEmail AddressDepartmentDesignationLocation(Optional: custom tags)Submit button to add person to the system.📋 b. ListA table that shows:Name, Email, Department, Designation"Delete" button for each entryShould support pagination or search/filter if list is long.3. Campaign Creation PageReplace the original multi-step flow with two campaign options:⚙ Option 1: Manual CampaignAdmin selects individual people from the list.Can configure phishing email content manually or with Gemini help.🤖 Option 2: Auto Campaign (with Gemini LLM)Admin enters the number of people to target.The system randomly selects that number from the list.Gemini LLM reads the personal details (like department, location, tags) and generates tailored phishing emails accordingly.Sends phishing emails automatically.4. Analytics PageVisual breakdown (charts/tables) of campaign results:📬 Number of emails sent✅ Number of users who avoided clicking❌ Number of users who clicked the phishing linkExport option for reports (CSV/PDF)🖌 Design GuidelinesUse modern design (inspired by Material UI or Tailwind UI)Include light/dark mode toggleMobile responsive layoutSidebar navigation with icons: Dashboard | Add People | List | Campaign | Analytics🔌 Tech SuggestionsUse Gemini LLM API integration for generating email contentStore people data using Firebase or a simple backend DBFor analytics, use Chart.js or RechartsGenerate this project structure and UI components in React Tailwind CSS, with mock data where needed and placeholder API hooks for future integration.
I'll create a comprehensive AI Mock Drill Simulation platform with all the components you requested. This will be a modern, responsive React application using Next.js and Tailwind CSS.
I've created a comprehensive AI Mock Drill Simulation platform with all the requested features. Here's what I've built:
The platform includes placeholder functions for:
This platform provides a solid foundation for an AI-powered phishing simulation system with modern UX/UI design and comprehensive functionality for security awareness training.