# Agent Reports Page - Visual Guide ## Page Layout Overview ``` ┌─────────────────────────────────────────────────────────────────┐ │ PERFORMANCE REPORTS │ │ Comprehensive client and will tracking │ │ [Print] [Export] │ └─────────────────────────────────────────────────────────────────┘ ┌──────────────┬──────────────┬──────────────┬──────────────┐ │ Total │ Total │ Completed │ Total │ │ Clients: 25 │ Wills: 25 │ Wills: 15 │ Commission │ │ │ │ │ RM 12,500 │ └──────────────┴──────────────┴──────────────┴──────────────┘ ╔═══════════════════════════════════════════════════════════════════╗ ║ FILTERS ║ ╠═══════════════════════════════════════════════════════════════════╣ ║ Will Status │ Commission │ Month │ Year │ Search │ Apply ║ ║ [Dropdown] │ [Dropdown] │ [mmyyyy] │ [____] │ [___] │ [btn] │ ╚═══════════════════════════════════════════════════════════════════╝ ╔═══════════════════════════════════════════════════════════════════════════════════════════════════════════╗ ║ COMPREHENSIVE REPORTS TABLE ║ ╠═════════════╦════════════╦═════════╦══════════════╦════════════╦═══════════════╦═════════════════════╣ ║ Client Name ║ Email ║ Phone ║ Date Created ║ Will ║ Will ║ Admin ║ ║ ║ ║ ║ ║ Status ║ Completed ║ Approved ║ ╠═════════════╬════════════╬═════════╬══════════════╬════════════╬═══════════════╬═════════════════════╣ ║ John Tan ║ john@... ║ 012... ║ Jul 01, 2026 ║ [Approved] ║ Jul 15, 2026 ║ ✓ Jul 20, 2026 ║ ║ Mary Wong ║ mary@... ║ 016... ║ Jul 02, 2026 ║ [Complete] ║ Jul 14, 2026 ║ Awaiting ║ ║ David Lee ║ david@... ║ 014... ║ Jun 28, 2026 ║ [Pending] ║ Pending ║ ✓ Jul 10, 2026 ║ ║ Sarah Ooi ║ sarah@... ║ 011... ║ Jul 05, 2026 ║ [Draft] ║ Pending ║ Awaiting ║ ╠═════════════╩════════════╩═════════╩══════════════╩════════════╩═══════════════╩═════════════════════╣ ║ Commission ║ Commission ║ Commission Received ║ Actions ║ ║ Amount ║ Status ║ ║ ║ ╠═════════════╬════════════╬═════════════════════╬═════════════════════════════════════════════════════╣ ║ RM 1,250.00 ║ [Paid] ║ Jul 25, 2026 ║ [View] ║ ║ RM 800.00 ║ [Pending] ║ Not Yet ║ [View] ║ ║ RM 1,100.00 ║ [Paid] ║ Jul 22, 2026 ║ [View] ║ ║ RM 0.00 ║ N/A ║ N/A ║ [View] ║ ╚═════════════╩════════════╩═════════════════════╩═════════════════════════════════════════════════════╝ ┌─────────────────────────────────────────────────────────────────┐ │ Total Commission │ Paid Commission │ Pending │ │ (All Time) │ (Green badge) │ (Yellow badge) │ │ RM 1,234,567.89 │ RM 567,890.12 │ RM 234,567.77 │ │ │ │ │ │ Completion Rate: 78.5% │ └─────────────────────────────────────────────────────────────────┘ ``` ## Detailed Features ### 1. Header Section - **Title**: "Performance Reports" - **Subtitle**: "Comprehensive client and will performance data" - **Print Button**: Brown gradient, prints without filters - **Export CSV Button**: Green gradient, downloads spreadsheet ### 2. Summary Cards (4 Cards) - Color-coded with icons - Real-time calculations - Shows key metrics at a glance ### 3. Filter Section **5 Input Fields**: 1. **Will Status**: Dropdown (All Status, Draft, Pending, Completed, Approved) 2. **Commission Status**: Dropdown (All Commission, Pending, Paid) 3. **Month**: Month/Year picker 4. **Year**: Year dropdown (current - 5 years back) 5. **Client Search**: Text input for name/email **Buttons**: - **Apply Filters**: Brown background, applies selected criteria - **Clear**: Gray background, resets all filters ### 4. Main Table (11 Columns) **Column Details**: 1. **Client Name**: Text, left-aligned 2. **Email**: Email address 3. **Phone**: Contact number 4. **Date Created**: Formatted as "Mon DD, YYYY" 5. **Will Status**: Badge (Draft-gray, Pending-yellow, Completed-blue, Approved-green) 6. **Will Completed**: Date or "Pending" 7. **Admin Approved**: Date with checkmark icon or "Awaiting" in yellow 8. **Commission Amount**: RM format with 2 decimals 9. **Commission Status**: Badge (Paid-green, Pending-yellow) 10. **Commission Received**: Date or "Not Yet" 11. **Actions**: View button link to client details **Row Interactions**: - Hover effect: Light gray background - All rows clickable through View button ### 5. Bottom Statistics (4 Cards) - **Left Border**: Color-coded (Brown, Green, Yellow, Blue) - **Label**: Description - **Amount**: Large bold number - **Format**: RM values, percentages ### 6. Pagination - Located below table - Laravel links component - 15 records per page ### 7. Empty State When no data: ``` 📭 No reports found. Create your first client to get started. [Create Client →] ``` ## Color Coding Reference ### Status Badges ``` Draft: Gray background (#F3F4F6), dark text Pending: Yellow background (#FEF3C7), dark text Completed: Blue background (#DBEAFE), dark text Approved: Green background (#DCFCE7), dark text ``` ### Commission Status ``` Pending: Yellow background (#FEF3C7), dark text Paid: Green background (#DCFCE7), dark text ``` ### Summary Cards ``` Clients: Brown (#772B10 to #8B3D15) Wills: Blue (#3B82F6 to #2563EB) Completed: Green (#10B981 to #059669) Commission: Yellow (#F59E0B to #D97706) ``` ## Responsive Behavior ### Desktop (1024px+) - Full table with all 11 columns visible - Horizontal scroll for overflow ### Tablet (768px - 1023px) - Filter buttons stack - Table may require horizontal scroll - Cards stack 2 per row ### Mobile (< 768px) - All sections stack vertically - Filter fields full width - Table horizontal scroll required - Cards stack 1 per row ## Data Calculations ### Summary Statistics ``` Total Clients = COUNT(clients WHERE referred_by = agent_id) Total Wills = COUNT(wills WHERE client.referred_by = agent_id OR created_by = agent_id) Completed Wills = COUNT(wills WHERE status IN ['completed', 'approved', 'stored'] AND (client.referred_by = agent_id OR created_by = agent_id)) Total Commission = SUM(commission.amount WHERE user_id = agent_id) Paid Commission = SUM(commission.amount WHERE user_id = agent_id AND status = 'paid') Pending Commission = SUM(commission.amount WHERE user_id = agent_id AND status = 'pending') Completion Rate = (Completed Wills / Total Wills) * 100 ``` ## Key Features Summary ✅ **Comprehensive Data**: Client, will, and commission info in one table ✅ **Advanced Filtering**: Multiple filter options with real-time updates ✅ **Status Tracking**: Clear visual indicators for will and commission status ✅ **Commission Tracking**: See pending vs paid commissions at a glance ✅ **Print Ready**: Professional print layout ✅ **CSV Export**: Spreadsheet-compatible format ✅ **Responsive**: Works on all devices ✅ **Pagination**: Handles large datasets efficiently ✅ **Performance**: Optimized queries with eager loading ✅ **User Friendly**: Clear labels and intuitive layout ## Usage Scenarios ### Scenario 1: Check Monthly Performance 1. Use Month filter to select July 2026 2. View all clients and wills created in that month 3. Check which commissions have been paid 4. Print or export for record keeping ### Scenario 2: Track Commission Status 1. Use Commission Status filter: "Pending" 2. See all pending commissions 3. Follow up with admin if necessary 4. Export for accounting ### Scenario 3: Find Specific Client 1. Use Search box: "John" 2. Quickly locate client by name 3. View all their will and commission info 4. Click View to see full details ### Scenario 4: Annual Performance Review 1. Use Year filter: 2026 2. View all clients and wills from that year 3. Note completion rate percentage 4. Export for performance discussion --- **Last Updated**: July 9, 2026 **Version**: 1.0