API tools faq
paste
Advertisement
Abhisek92

Dashboard

Abhisek92
Mar 23rd, 2025
320
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 22.45 KB | None | 0 0
raw download clone embed print report
  1. import React, { useState } from 'react';
  2. import { AlertCircle, CheckCircle, FileText, Mail, ChevronRight, Upload, Inbox, FileDown, ArrowRightCircle, Settings, Filter, Clock } from 'lucide-react';
  3.  
  4. const Dashboard = () => {
  5.   const [activeTab, setActiveTab] = useState('overview');
  6.  
  7.   // Sample data for demonstration
  8.   const stats = {
  9.     documentsProcessed: 247,
  10.     emailsTriaged: 183,
  11.     validationRules: 56,
  12.     pendingReview: 12,
  13.     automatedFixes: 143
  14.   };
  15.  
  16.   const recentDocuments = [
  17.     { id: 1, name: 'Quarterly Compliance Report.pdf', type: 'Regulatory', priority: 'High', status: 'Validated', timestamp: '2025-03-22 09:23:15' },
  18.     { id: 2, name: 'Customer Data Breach Report.docx', type: 'Incident', priority: 'Critical', status: 'Needs Review', timestamp: '2025-03-22 11:47:32' },
  19.     { id: 3, name: 'Annual Risk Assessment.xlsx', type: 'Financial', priority: 'Medium', status: 'Processing', timestamp: '2025-03-21 16:08:45' },
  20.     { id: 4, name: 'GDPR Regulatory Update.pdf', type: 'Regulatory', priority: 'High', status: 'Routed', timestamp: '2025-03-21 14:30:11' },
  21.     { id: 5, name: 'Transaction Error Log.csv', type: 'Error Report', priority: 'Medium', status: 'Validated', timestamp: '2025-03-21 10:15:27' }
  22.   ];
  23.  
  24.   const validationIssues = [
  25.     { id: 1, rule: 'Customer ID Format', severity: 'High', affectedDocs: 3, status: 'Remediated', timestamp: '2025-03-22 08:45:12' },
  26.     { id: 2, rule: 'Transaction Amount Range', severity: 'Critical', affectedDocs: 7, status: 'Pending Review', timestamp: '2025-03-22 09:23:05' },
  27.     { id: 3, rule: 'Missing Required Fields', severity: 'Medium', affectedDocs: 12, status: 'Remediated', timestamp: '2025-03-21 15:37:41' },
  28.     { id: 4, rule: 'Date Format Inconsistency', severity: 'Low', affectedDocs: 28, status: 'Automated Fix', timestamp: '2025-03-21 11:52:18' },
  29.     { id: 5, rule: 'Cross-validation Failure', severity: 'High', affectedDocs: 4, status: 'Manual Review', timestamp: '2025-03-20 16:20:33' }
  30.   ];
  31.  
  32.   const getStatusColor = (status) => {
  33.     switch (status.toLowerCase()) {
  34.       case 'validated':
  35.       case 'remediated':
  36.       case 'automated fix':
  37.         return 'bg-green-100 text-green-800';
  38.       case 'needs review':
  39.       case 'pending review':
  40.       case 'manual review':
  41.         return 'bg-yellow-100 text-yellow-800';
  42.       case 'processing':
  43.       case 'routed':
  44.         return 'bg-blue-100 text-blue-800';
  45.       default:
  46.         return 'bg-gray-100 text-gray-800';
  47.     }
  48.   };
  49.  
  50.   const getSeverityColor = (severity) => {
  51.     switch (severity.toLowerCase()) {
  52.       case 'critical':
  53.         return 'bg-red-100 text-red-800';
  54.       case 'high':
  55.         return 'bg-orange-100 text-orange-800';
  56.       case 'medium':
  57.         return 'bg-yellow-100 text-yellow-800';
  58.       case 'low':
  59.         return 'bg-blue-100 text-blue-800';
  60.       default:
  61.         return 'bg-gray-100 text-gray-800';
  62.     }
  63.   };
  64.  
  65.   return (
  66.     <div className="flex h-screen bg-gray-50">
  67.       {/* Sidebar */}
  68.       <div className="w-64 bg-indigo-800 text-white">
  69.         <div className="p-4">
  70.           <h1 className="text-xl font-bold">AI Orchestrator</h1>
  71.           <p className="text-xs text-indigo-200 mt-1">Data Profiling & Routing</p>
  72.        </div>
  73.        
  74.        <nav className="mt-6">
  75.          <a
  76.            href="#overview"
  77.            onClick={() => setActiveTab('overview')}
  78.            className={`flex items-center px-4 py-3 ${activeTab === 'overview' ? 'bg-indigo-900' : 'hover:bg-indigo-700'}`}
  79.          >
  80.            <Inbox className="w-5 h-5 mr-3" />
  81.            <span>Overview</span>
  82.          </a>
  83.          
  84.          <a
  85.            href="#documents"
  86.            onClick={() => setActiveTab('documents')}
  87.            className={`flex items-center px-4 py-3 ${activeTab === 'documents' ? 'bg-indigo-900' : 'hover:bg-indigo-700'}`}
  88.          >
  89.            <FileText className="w-5 h-5 mr-3" />
  90.            <span>Documents</span>
  91.          </a>
  92.          
  93.          <a
  94.            href="#emails"
  95.            onClick={() => setActiveTab('emails')}
  96.            className={`flex items-center px-4 py-3 ${activeTab === 'emails' ? 'bg-indigo-900' : 'hover:bg-indigo-700'}`}
  97.          >
  98.            <Mail className="w-5 h-5 mr-3" />
  99.            <span>Emails</span>
  100.          </a>
  101.          
  102.          <a
  103.            href="#validation"
  104.            onClick={() => setActiveTab('validation')}
  105.            className={`flex items-center px-4 py-3 ${activeTab === 'validation' ? 'bg-indigo-900' : 'hover:bg-indigo-700'}`}
  106.          >
  107.            <CheckCircle className="w-5 h-5 mr-3" />
  108.            <span>Validation</span>
  109.          </a>
  110.          
  111.          <a
  112.            href="#settings"
  113.            onClick={() => setActiveTab('settings')}
  114.            className={`flex items-center px-4 py-3 ${activeTab === 'settings' ? 'bg-indigo-900' : 'hover:bg-indigo-700'}`}
  115.          >
  116.            <Settings className="w-5 h-5 mr-3" />
  117.            <span>Settings</span>
  118.          </a>
  119.        </nav>
  120.      </div>
  121.      
  122.      {/* Main content */}
  123.      <div className="flex-1 overflow-y-auto">
  124.        {activeTab === 'overview' && (
  125.          <div className="p-8">
  126.            <div className="flex items-center justify-between mb-8">
  127.              <h2 className="text-2xl font-bold text-gray-800">Dashboard Overview</h2>
  128.              <div className="flex space-x-4">
  129.                <button className="px-4 py-2 bg-indigo-600 text-white rounded-md flex items-center">
  130.                  <Upload className="w-4 h-4 mr-2" />
  131.                  Upload Documents
  132.                </button>
  133.                <button className="px-4 py-2 bg-white border border-gray-300 text-gray-700 rounded-md flex items-center">
  134.                  <Filter className="w-4 h-4 mr-2" />
  135.                  Filters
  136.                </button>
  137.              </div>
  138.            </div>
  139.            
  140.            {/* Stats cards */}
  141.            <div className="grid grid-cols-1 md:grid-cols-3 lg:grid-cols-5 gap-6 mb-8">
  142.              <div className="bg-white p-6 rounded-lg shadow-sm border border-gray-100">
  143.                <div className="flex items-center justify-between">
  144.                  <div>
  145.                    <p className="text-sm text-gray-500 mb-1">Documents Processed</p>
  146.                    <h3 className="text-2xl font-bold text-gray-800">{stats.documentsProcessed}</h3>
  147.                  </div>
  148.                  <div className="p-3 rounded-full bg-indigo-100 text-indigo-600">
  149.                    <FileText className="w-6 h-6" />
  150.                  </div>
  151.                </div>
  152.              </div>
  153.              
  154.              <div className="bg-white p-6 rounded-lg shadow-sm border border-gray-100">
  155.                <div className="flex items-center justify-between">
  156.                  <div>
  157.                    <p className="text-sm text-gray-500 mb-1">Emails Triaged</p>
  158.                    <h3 className="text-2xl font-bold text-gray-800">{stats.emailsTriaged}</h3>
  159.                  </div>
  160.                  <div className="p-3 rounded-full bg-blue-100 text-blue-600">
  161.                    <Mail className="w-6 h-6" />
  162.                  </div>
  163.                </div>
  164.              </div>
  165.              
  166.              <div className="bg-white p-6 rounded-lg shadow-sm border border-gray-100">
  167.                <div className="flex items-center justify-between">
  168.                  <div>
  169.                    <p className="text-sm text-gray-500 mb-1">Validation Rules</p>
  170.                    <h3 className="text-2xl font-bold text-gray-800">{stats.validationRules}</h3>
  171.                  </div>
  172.                  <div className="p-3 rounded-full bg-green-100 text-green-600">
  173.                    <CheckCircle className="w-6 h-6" />
  174.                  </div>
  175.                </div>
  176.              </div>
  177.              
  178.              <div className="bg-white p-6 rounded-lg shadow-sm border border-gray-100">
  179.                <div className="flex items-center justify-between">
  180.                  <div>
  181.                    <p className="text-sm text-gray-500 mb-1">Pending Review</p>
  182.                    <h3 className="text-2xl font-bold text-gray-800">{stats.pendingReview}</h3>
  183.                  </div>
  184.                  <div className="p-3 rounded-full bg-yellow-100 text-yellow-600">
  185.                    <Clock className="w-6 h-6" />
  186.                  </div>
  187.                </div>
  188.              </div>
  189.              
  190.              <div className="bg-white p-6 rounded-lg shadow-sm border border-gray-100">
  191.                <div className="flex items-center justify-between">
  192.                  <div>
  193.                    <p className="text-sm text-gray-500 mb-1">Automated Fixes</p>
  194.                    <h3 className="text-2xl font-bold text-gray-800">{stats.automatedFixes}</h3>
  195.                  </div>
  196.                  <div className="p-3 rounded-full bg-purple-100 text-purple-600">
  197.                    <ArrowRightCircle className="w-6 h-6" />
  198.                  </div>
  199.                </div>
  200.              </div>
  201.            </div>
  202.            
  203.            {/* Recent documents */}
  204.            <div className="bg-white rounded-lg shadow-sm border border-gray-100 mb-8">
  205.              <div className="px-6 py-4 border-b border-gray-100 flex justify-between items-center">
  206.                <h3 className="font-semibold text-gray-800">Recent Documents</h3>
  207.                <a href="#" className="text-sm text-indigo-600 hover:text-indigo-800 flex items-center">
  208.                  View All
  209.                  <ChevronRight className="w-4 h-4 ml-1" />
  210.                </a>
  211.              </div>
  212.              <div className="divide-y divide-gray-100">
  213.                {recentDocuments.map(doc => (
  214.                  <div key={doc.id} className="px-6 py-4 flex items-center justify-between">
  215.                    <div className="flex items-center">
  216.                      <div className="p-2 rounded-md bg-gray-100 mr-4">
  217.                        <FileText className="w-5 h-5 text-gray-500" />
  218.                      </div>
  219.                      <div>
  220.                        <h4 className="text-sm font-medium text-gray-800">{doc.name}</h4>
  221.                        <p className="text-xs text-gray-500">{doc.timestamp}</p>
  222.                      </div>
  223.                    </div>
  224.                    <div className="flex items-center space-x-3">
  225.                      <span className={`text-xs px-2 py-1 rounded-full ${getStatusColor(doc.status)}`}>
  226.                        {doc.status}
  227.                      </span>
  228.                      <button className="text-gray-400 hover:text-indigo-600">
  229.                        <ArrowRightCircle className="w-4 h-4" />
  230.                      </button>
  231.                    </div>
  232.                  </div>
  233.                ))}
  234.              </div>
  235.            </div>
  236.            
  237.            {/* Validation Issues */}
  238.            <div className="bg-white rounded-lg shadow-sm border border-gray-100">
  239.              <div className="px-6 py-4 border-b border-gray-100 flex justify-between items-center">
  240.                <h3 className="font-semibold text-gray-800">Recent Validation Issues</h3>
  241.                <a href="#" className="text-sm text-indigo-600 hover:text-indigo-800 flex items-center">
  242.                  View All
  243.                  <ChevronRight className="w-4 h-4 ml-1" />
  244.                </a>
  245.              </div>
  246.              <div className="divide-y divide-gray-100">
  247.                {validationIssues.map(issue => (
  248.                  <div key={issue.id} className="px-6 py-4 flex items-center justify-between">
  249.                    <div className="flex items-center">
  250.                      <div className="p-2 rounded-md bg-red-50 mr-4">
  251.                        <AlertCircle className="w-5 h-5 text-red-500" />
  252.                      </div>
  253.                      <div>
  254.                        <h4 className="text-sm font-medium text-gray-800">{issue.rule}</h4>
  255.                        <p className="text-xs text-gray-500">{issue.timestamp}</p>
  256.                      </div>
  257.                    </div>
  258.                    <div className="flex items-center space-x-3">
  259.                      <span className={`text-xs px-2 py-1 rounded-full ${getSeverityColor(issue.severity)}`}>
  260.                        {issue.severity}
  261.                      </span>
  262.                      <span className={`text-xs px-2 py-1 rounded-full ${getStatusColor(issue.status)}`}>
  263.                        {issue.status}
  264.                      </span>
  265.                      <button className="text-gray-400 hover:text-indigo-600">
  266.                        <ArrowRightCircle className="w-4 h-4" />
  267.                      </button>
  268.                    </div>
  269.                  </div>
  270.                ))}
  271.              </div>
  272.            </div>
  273.          </div>
  274.        )}
  275.        
  276.        {activeTab === 'validation' && (
  277.          <div className="p-8">
  278.            <div className="flex items-center justify-between mb-8">
  279.              <h2 className="text-2xl font-bold text-gray-800">Validation Rules & Issues</h2>
  280.              <div className="flex space-x-4">
  281.                <button className="px-4 py-2 bg-indigo-600 text-white rounded-md flex items-center">
  282.                  <FileDown className="w-4 h-4 mr-2" />
  283.                  Export Report
  284.                </button>
  285.              </div>
  286.            </div>
  287.            
  288.            <div className="bg-white rounded-lg shadow-sm border border-gray-100 mb-8">
  289.              <div className="px-6 py-4 border-b border-gray-100">
  290.                <h3 className="font-semibold text-gray-800">Active Validation Rules</h3>
  291.              </div>
  292.              <div className="p-6">
  293.                <table className="min-w-full divide-y divide-gray-200">
  294.                  <thead>
  295.                    <tr>
  296.                      <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Rule ID</th>
  297.                      <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Description</th>
  298.                      <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Field(s)</th>
  299.                      <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Type</th>
  300.                      <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Severity</th>
  301.                      <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Actions</th>
  302.                    </tr>
  303.                  </thead>
  304.                  <tbody className="bg-white divide-y divide-gray-200">
  305.                    <tr>
  306.                      <td className="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">VR-001</td>
  307.                      <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Customer ID must be 10 digits</td>
  308.                      <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500">customer_id</td>
  309.                      <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Format Check</td>
  310.                      <td className="px-6 py-4 whitespace-nowrap">
  311.                        <span className="px-2 py-1 text-xs rounded-full bg-orange-100 text-orange-800">High</span>
  312.                      </td>
  313.                      <td className="px-6 py-4 whitespace-nowrap text-sm font-medium">
  314.                        <a href="#" className="text-indigo-600 hover:text-indigo-900">Edit</a>
  315.                      </td>
  316.                    </tr>
  317.                    <tr>
  318.                      <td className="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">VR-002</td>
  319.                      <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Transaction amount must be positive</td>
  320.                      <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500">amount</td>
  321.                      <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Range Check</td>
  322.                      <td className="px-6 py-4 whitespace-nowrap">
  323.                        <span className="px-2 py-1 text-xs rounded-full bg-red-100 text-red-800">Critical</span>
  324.                      </td>
  325.                      <td className="px-6 py-4 whitespace-nowrap text-sm font-medium">
  326.                        <a href="#" className="text-indigo-600 hover:text-indigo-900">Edit</a>
  327.                      </td>
  328.                    </tr>
  329.                    <tr>
  330.                      <td className="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">VR-003</td>
  331.                      <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Required fields must not be empty</td>
  332.                      <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500">name, email, address</td>
  333.                      <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Not Null Check</td>
  334.                      <td className="px-6 py-4 whitespace-nowrap">
  335.                        <span className="px-2 py-1 text-xs rounded-full bg-yellow-100 text-yellow-800">Medium</span>
  336.                      </td>
  337.                      <td className="px-6 py-4 whitespace-nowrap text-sm font-medium">
  338.                        <a href="#" className="text-indigo-600 hover:text-indigo-900">Edit</a>
  339.                      </td>
  340.                    </tr>
  341.                  </tbody>
  342.                </table>
  343.              </div>
  344.            </div>
  345.            
  346.            <div className="grid grid-cols-1 md:grid-cols-2 gap-8">
  347.              <div className="bg-white rounded-lg shadow-sm border border-gray-100">
  348.                <div className="px-6 py-4 border-b border-gray-100">
  349.                  <h3 className="font-semibold text-gray-800">Validation Status</h3>
  350.                </div>
  351.                <div className="p-6">
  352.                  <div className="flex flex-col">
  353.                    <div className="flex items-center justify-between mb-4">
  354.                      <div className="text-sm text-gray-500">Total Rules</div>
  355.                      <div className="font-medium text-gray-900">56</div>
  356.                    </div>
  357.                    <div className="flex items-center justify-between mb-4">
  358.                      <div className="text-sm text-gray-500">Passing</div>
  359.                      <div className="font-medium text-green-600">42 (75%)</div>
  360.                    </div>
  361.                    <div className="flex items-center justify-between mb-4">
  362.                      <div className="text-sm text-gray-500">Failed</div>
  363.                      <div className="font-medium text-red-600">14 (25%)</div>
  364.                    </div>
  365.                    <div className="flex items-center justify-between mb-4">
  366.                      <div className="text-sm text-gray-500">Automated Fixes</div>
  367.                      <div className="font-medium text-gray-900">9</div>
  368.                    </div>
  369.                    <div className="flex items-center justify-between">
  370.                      <div className="text-sm text-gray-500">Manual Review Required</div>
  371.                      <div className="font-medium text-gray-900">5</div>
  372.                    </div>
  373.                  </div>
  374.                </div>
  375.              </div>
  376.              
  377.              <div className="bg-white rounded-lg shadow-sm border border-gray-100">
  378.                <div className="px-6 py-4 border-b border-gray-100">
  379.                  <h3 className="font-semibold text-gray-800">Recent Remediation Actions</h3>
  380.                </div>
  381.                <div className="p-6">
  382.                  <div className="space-y-4">
  383.                    <div className="p-4 bg-green-50 rounded-md border border-green-100">
  384.                      <div className="flex items-center">
  385.                        <CheckCircle className="w-5 h-5 text-green-500 mr-2" />
  386.                        <h4 className="text-sm font-medium text-gray-800">Auto-fixed: Date Format Standardization</h4>
  387.                      </div>
  388.                      <p className="mt-2 text-xs text-gray-500">28 records updated to ISO date format</p>
  389.                      <p className="mt-1 text-xs text-gray-400">2025-03-21 11:52:18</p>
  390.                    </div>
  391.                    
  392.                    <div className="p-4 bg-green-50 rounded-md border border-green-100">
  393.                      <div className="flex items-center">
  394.                        <CheckCircle className="w-5 h-5 text-green-500 mr-2" />
  395.                        <h4 className="text-sm font-medium text-gray-800">Auto-fixed: Missing Required Fields</h4>
  396.                      </div>
  397.                      <p className="mt-2 text-xs text-gray-500">12 records updated with default values</p>
  398.                      <p className="mt-1 text-xs text-gray-400">2025-03-21 15:37:41</p>
  399.                    </div>
  400.                    
  401.                    <div className="p-4 bg-yellow-50 rounded-md border border-yellow-100">
  402.                      <div className="flex items-center">
  403.                        <AlertCircle className="w-5 h-5 text-yellow-500 mr-2" />
  404.                        <h4 className="text-sm font-medium text-gray-800">Manual Review: Transaction Amount Range</h4>
  405.                      </div>
  406.                      <p className="mt-2 text-xs text-gray-500">7 records flagged for manual review</p>
  407.                      <p className="mt-1 text-xs text-gray-400">2025-03-22 09:23:05</p>
  408.                    </div>
  409.                  </div>
  410.                </div>
  411.              </div>
  412.            </div>
  413.          </div>
  414.        )}
  415.        
  416.        {activeTab === 'documents' && (
  417.          <div className="p-8">
  418.            <h2 className="text-2xl font-bold text-gray-800 mb-8">Document Management</h2>
  419.            <p className="text-gray-600">Document processing view would be displayed here.</p>
  420.          </div>
  421.        )}
  422.        
  423.        {activeTab === 'emails' && (
  424.          <div className="p-8">
  425.            <h2 className="text-2xl font-bold text-gray-800 mb-8">Email Triage</h2>
  426.            <p className="text-gray-600">Email triage and routing view would be displayed here.</p>
  427.          </div>
  428.        )}
  429.        
  430.        {activeTab === 'settings' && (
  431.          <div className="p-8">
  432.            <h2 className="text-2xl font-bold text-gray-800 mb-8">System Settings</h2>
  433.            <p className="text-gray-600">Settings and configuration view would be displayed here.</p>
  434.          </div>
  435.        )}
  436.      </div>
  437.    </div>
  438.  );
  439. };
  440.  
  441. export default Dashboard;
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!