ai-document-analysis / index.html
fascorp's picture
undefined - Initial Deployment
630e35d verified
Raw History Blame Contribute Delete
55.6 kB
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Litigation Defense Data Analysis & Management Tool</title>
<script src="https://cdn.tailwindcss.com"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<style>
.dropzone {
border: 2px dashed #3b82f6;
border-radius: 0.5rem;
transition: all 0.3s ease;
}
.dropzone.active {
border-color: #10b981;
background-color: #f0f9ff;
}
.document-card {
transition: all 0.2s ease;
}
.document-card:hover {
transform: translateY(-2px);
box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
}
.chat-message {
max-width: 80%;
}
.sidebar {
transition: all 0.3s ease;
}
@media (max-width: 768px) {
.sidebar {
position: absolute;
left: -100%;
z-index: 50;
width: 80%;
}
.sidebar.open {
left: 0;
}
}
.transaction-category {
position: relative;
}
.transaction-category select {
appearance: none;
}
.transaction-category::after {
content: "▼";
position: absolute;
right: 0.75rem;
top: 50%;
transform: translateY(-50%);
pointer-events: none;
color: #6b7280;
}
</style>
</head>
<body class="bg-gray-50 min-h-screen">
<div class="flex h-screen overflow-hidden">
<!-- Sidebar -->
<div id="sidebar" class="sidebar bg-white w-64 border-r border-gray-200 flex flex-col">
<div class="p-4 border-b border-gray-200 flex justify-between items-center">
<h1 class="text-xl font-bold text-blue-600">Defense Analytics</h1>
<button id="closeSidebar" class="md:hidden text-gray-500">
<i class="fas fa-times"></i>
</button>
</div>
<div class="p-4">
<div class="mb-6">
<h2 class="text-sm font-semibold text-gray-500 uppercase tracking-wider mb-2">Case Details</h2>
<div class="space-y-2">
<div>
<label class="block text-sm font-medium text-gray-700">Client</label>
<input type="text" value="Maria & Fast Court" class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 sm:text-sm" disabled>
</div>
<div>
<label class="block text-sm font-medium text-gray-700">Opposing Party</label>
<input type="text" value="Trident" class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 sm:text-sm" disabled>
</div>
</div>
</div>
<div class="mb-6">
<h2 class="text-sm font-semibold text-gray-500 uppercase tracking-wider mb-2">AI Configuration</h2>
<div class="space-y-3">
<div>
<label class="block text-sm font-medium text-gray-700">LLM Provider</label>
<select class="mt-1 block w-full rounded-md border-gray-300 py-2 pl-3 pr-10 text-base focus:border-blue-500 focus:outline-none focus:ring-blue-500 sm:text-sm">
<option>OpenAI (GPT-4)</option>
<option>Gemini</option>
<option>Grok</option>
<option>Claude</option>
</select>
</div>
<div>
<label class="block text-sm font-medium text-gray-700">API Key</label>
<div class="mt-1 flex rounded-md shadow-sm">
<input type="password" id="apiKeyInput" placeholder="Enter API key" class="flex-1 rounded-l-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 sm:text-sm">
<button id="saveApiKey" class="inline-flex items-center px-3 rounded-r-md border border-l-0 border-gray-300 bg-gray-50 text-gray-500 hover:bg-gray-100">
Save
</button>
</div>
</div>
</div>
</div>
<div>
<h2 class="text-sm font-semibold text-gray-500 uppercase tracking-wider mb-2">Categories</h2>
<div class="space-y-2">
<div class="flex items-center justify-between bg-gray-50 px-3 py-2 rounded">
<span class="text-sm">Hardware</span>
<button class="text-red-400 hover:text-red-600">
<i class="fas fa-trash-alt text-xs"></i>
</button>
</div>
<div class="flex items-center justify-between bg-gray-50 px-3 py-2 rounded">
<span class="text-sm">Licensing</span>
<button class="text-red-400 hover:text-red-600">
<i class="fas fa-trash-alt text-xs"></i>
</button>
</div>
<div class="flex items-center justify-between bg-gray-50 px-3 py-2 rounded">
<span class="text-sm">Vendors</span>
<button class="text-red-400 hover:text-red-600">
<i class="fas fa-trash-alt text-xs"></i>
</button>
</div>
<div class="flex items-center justify-between bg-gray-50 px-3 py-2 rounded">
<span class="text-sm">Services</span>
<button class="text-red-400 hover:text-red-600">
<i class="fas fa-trash-alt text-xs"></i>
</button>
</div>
<div class="flex items-center justify-between bg-gray-50 px-3 py-2 rounded">
<span class="text-sm">Data purchases</span>
<button class="text-red-400 hover:text-red-600">
<i class="fas fa-trash-alt text-xs"></i>
</button>
</div>
<div class="flex items-center justify-between bg-gray-50 px-3 py-2 rounded">
<span class="text-sm">Azure tenant</span>
<button class="text-red-400 hover:text-red-600">
<i class="fas fa-trash-alt text-xs"></i>
</button>
</div>
<div class="flex items-center justify-between bg-gray-50 px-3 py-2 rounded">
<span class="text-sm">Data center</span>
<button class="text-red-400 hover:text-red-600">
<i class="fas fa-trash-alt text-xs"></i>
</button>
</div>
<div class="flex items-center justify-between bg-gray-50 px-3 py-2 rounded">
<span class="text-sm">Other Sources</span>
<button class="text-red-400 hover:text-red-600">
<i class="fas fa-trash-alt text-xs"></i>
</button>
</div>
</div>
<div class="mt-3 flex">
<input type="text" placeholder="New category" class="flex-1 rounded-l-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 sm:text-sm">
<button class="bg-blue-600 text-white px-3 rounded-r-md hover:bg-blue-700">
<i class="fas fa-plus"></i>
</button>
</div>
</div>
</div>
</div>
<!-- Main content -->
<div class="flex-1 flex flex-col overflow-hidden">
<!-- Top navigation -->
<header class="bg-white shadow-sm">
<div class="px-4 py-3 flex items-center justify-between">
<div class="flex items-center">
<button id="openSidebar" class="mr-4 text-gray-500 md:hidden">
<i class="fas fa-bars"></i>
</button>
<h2 class="text-lg font-semibold text-gray-900">Document Analysis Dashboard</h2>
</div>
<div class="flex items-center space-x-4">
<button class="bg-green-600 text-white px-4 py-1 rounded-md text-sm font-medium hover:bg-green-700 flex items-center">
<i class="fas fa-file-excel mr-2"></i> Export Excel
</button>
<button class="bg-blue-600 text-white px-4 py-1 rounded-md text-sm font-medium hover:bg-blue-700 flex items-center">
<i class="fas fa-file-pdf mr-2"></i> Export PDF
</button>
</div>
</div>
<div class="border-t border-gray-200">
<nav class="flex -mb-px">
<a href="#" class="border-blue-500 text-blue-600 whitespace-nowrap py-4 px-4 border-b-2 font-medium text-sm">Documents</a>
<a href="#" class="border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300 whitespace-nowrap py-4 px-4 border-b-2 font-medium text-sm">Transactions</a>
<a href="#" class="border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300 whitespace-nowrap py-4 px-4 border-b-2 font-medium text-sm">Analysis</a>
<a href="#" class="border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300 whitespace-nowrap py-4 px-4 border-b-2 font-medium text-sm">Reports</a>
</nav>
</div>
</header>
<!-- Main content area -->
<div class="flex-1 overflow-auto p-4">
<div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
<!-- Document upload and list -->
<div class="lg:col-span-2 space-y-6">
<!-- Document upload -->
<div class="bg-white rounded-lg shadow p-4">
<h3 class="text-lg font-medium text-gray-900 mb-4">Upload Documents</h3>
<div id="dropzone" class="dropzone p-8 text-center cursor-pointer">
<div class="flex flex-col items-center justify-center">
<i class="fas fa-cloud-upload-alt text-4xl text-blue-500 mb-2"></i>
<p class="text-sm text-gray-600 mb-1">Drag & drop files here or click to browse</p>
<p class="text-xs text-gray-500">Supported formats: PDF, Word, Excel, Text, Markdown</p>
</div>
<input type="file" id="fileInput" class="hidden" multiple>
</div>
<div class="mt-4 flex items-center justify-between">
<div class="flex items-center space-x-2">
<input type="checkbox" id="tridentFilter" class="h-4 w-4 rounded border-gray-300 text-blue-600 focus:ring-blue-500">
<label for="tridentFilter" class="text-sm font-medium text-gray-700">Show only Trident-related</label>
</div>
<div class="relative">
<input type="text" placeholder="Search documents..." class="pl-8 pr-4 py-2 border border-gray-300 rounded-md text-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500">
<i class="fas fa-search absolute left-3 top-3 text-gray-400"></i>
</div>
</div>
</div>
<!-- Document list -->
<div class="bg-white rounded-lg shadow overflow-hidden">
<div class="px-4 py-3 bg-gray-50 border-b border-gray-200 flex justify-between items-center">
<h3 class="text-sm font-medium text-gray-700">Uploaded Documents (12)</h3>
<div class="flex items-center space-x-2">
<button class="text-gray-500 hover:text-gray-700">
<i class="fas fa-sort-alpha-down"></i>
</button>
<button class="text-gray-500 hover:text-gray-700">
<i class="fas fa-filter"></i>
</button>
</div>
</div>
<div class="divide-y divide-gray-200 max-h-96 overflow-y-auto">
<!-- Document item -->
<div class="document-card p-4 hover:bg-gray-50 cursor-pointer flex items-start">
<div class="flex-shrink-0">
<i class="fas fa-file-pdf text-red-500 text-2xl"></i>
</div>
<div class="ml-3 flex-1 min-w-0">
<p class="text-sm font-medium text-gray-900 truncate">Bank_Statement_2023_Q1.pdf</p>
<p class="text-xs text-gray-500">Processed: 45 transactions</p>
<div class="mt-1 flex flex-wrap gap-1">
<span class="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium bg-green-100 text-green-800">Trident</span>
<span class="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium bg-blue-100 text-blue-800">Licensing</span>
<span class="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium bg-purple-100 text-purple-800">Services</span>
</div>
</div>
<div class="ml-2 flex-shrink-0 flex">
<button class="text-gray-400 hover:text-gray-500">
<i class="fas fa-ellipsis-v"></i>
</button>
</div>
</div>
<!-- Document item -->
<div class="document-card p-4 hover:bg-gray-50 cursor-pointer flex items-start">
<div class="flex-shrink-0">
<i class="fas fa-file-excel text-green-500 text-2xl"></i>
</div>
<div class="ml-3 flex-1 min-w-0">
<p class="text-sm font-medium text-gray-900 truncate">Vendor_Payments_Q2_2023.xlsx</p>
<p class="text-xs text-gray-500">Processed: 28 transactions</p>
<div class="mt-1 flex flex-wrap gap-1">
<span class="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium bg-yellow-100 text-yellow-800">Vendors</span>
<span class="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium bg-indigo-100 text-indigo-800">Hardware</span>
</div>
</div>
<div class="ml-2 flex-shrink-0 flex">
<button class="text-gray-400 hover:text-gray-500">
<i class="fas fa-ellipsis-v"></i>
</button>
</div>
</div>
<!-- Document item -->
<div class="document-card p-4 hover:bg-gray-50 cursor-pointer flex items-start">
<div class="flex-shrink-0">
<i class="fas fa-file-word text-blue-500 text-2xl"></i>
</div>
<div class="ml-3 flex-1 min-w-0">
<p class="text-sm font-medium text-gray-900 truncate">Legal_Complaint_Trident.docx</p>
<p class="text-xs text-gray-500">Processed: Summary available</p>
<div class="mt-1 flex flex-wrap gap-1">
<span class="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium bg-green-100 text-green-800">Trident</span>
<span class="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium bg-red-100 text-red-800">Legal</span>
</div>
</div>
<div class="ml-2 flex-shrink-0 flex">
<button class="text-gray-400 hover:text-gray-500">
<i class="fas fa-ellipsis-v"></i>
</button>
</div>
</div>
<!-- Document item -->
<div class="document-card p-4 hover:bg-gray-50 cursor-pointer flex items-start">
<div class="flex-shrink-0">
<i class="fas fa-file-alt text-gray-500 text-2xl"></i>
</div>
<div class="ml-3 flex-1 min-w-0">
<p class="text-sm font-medium text-gray-900 truncate">Service_Agreement.txt</p>
<p class="text-xs text-gray-500">Processed: 5 key points</p>
<div class="mt-1 flex flex-wrap gap-1">
<span class="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium bg-purple-100 text-purple-800">Services</span>
</div>
</div>
<div class="ml-2 flex-shrink-0 flex">
<button class="text-gray-400 hover:text-gray-500">
<i class="fas fa-ellipsis-v"></i>
</button>
</div>
</div>
</div>
</div>
</div>
<!-- Transaction summary and chat -->
<div class="space-y-6">
<!-- Transaction summary -->
<div class="bg-white rounded-lg shadow p-4">
<h3 class="text-lg font-medium text-gray-900 mb-4">Transaction Summary</h3>
<div class="grid grid-cols-2 gap-4">
<div class="bg-blue-50 p-3 rounded-lg">
<p class="text-xs font-medium text-blue-800 uppercase">Total Credits</p>
<p class="text-xl font-semibold text-blue-900">$42,750.00</p>
</div>
<div class="bg-red-50 p-3 rounded-lg">
<p class="text-xs font-medium text-red-800 uppercase">Total Debits</p>
<p class="text-xl font-semibold text-red-900">$38,420.00</p>
</div>
</div>
<div class="mt-4">
<h4 class="text-sm font-medium text-gray-700 mb-2">By Category</h4>
<div class="space-y-2">
<div class="flex items-center justify-between">
<span class="text-sm text-gray-600">Hardware</span>
<span class="text-sm font-medium">$12,450.00</span>
</div>
<div class="flex items-center justify-between">
<span class="text-sm text-gray-600">Licensing</span>
<span class="text-sm font-medium">$8,750.00</span>
</div>
<div class="flex items-center justify-between">
<span class="text-sm text-gray-600">Vendors</span>
<span class="text-sm font-medium">$6,320.00</span>
</div>
<div class="flex items-center justify-between">
<span class="text-sm text-gray-600">Services</span>
<span class="text-sm font-medium">$9,850.00</span>
</div>
<div class="flex items-center justify-between">
<span class="text-sm text-gray-600">Trident-related</span>
<span class="text-sm font-medium">$15,200.00</span>
</div>
</div>
</div>
</div>
<!-- Chat interface -->
<div class="bg-white rounded-lg shadow flex flex-col" style="height: 400px;">
<div class="px-4 py-3 bg-gray-50 border-b border-gray-200">
<h3 class="text-sm font-medium text-gray-700">Document Analysis Chat</h3>
</div>
<div id="chatMessages" class="flex-1 p-4 overflow-y-auto space-y-4">
<!-- AI message -->
<div class="chat-message">
<div class="flex items-start">
<div class="flex-shrink-0 bg-blue-100 rounded-full p-1">
<i class="fas fa-robot text-blue-600"></i>
</div>
<div class="ml-3">
<div class="bg-gray-100 rounded-lg py-2 px-4">
<p class="text-sm text-gray-800">Hello! I've analyzed your uploaded documents. How can I assist with your litigation defense preparation today?</p>
</div>
<div class="mt-1 flex items-center text-xs text-gray-500">
<span>AI Assistant</span>
<span class="mx-1">•</span>
<span>Just now</span>
</div>
</div>
</div>
</div>
<!-- User message -->
<div class="chat-message ml-auto">
<div class="flex items-start justify-end">
<div class="ml-3">
<div class="bg-blue-600 rounded-lg py-2 px-4">
<p class="text-sm text-white">Show me all transactions related to Trident in Q1 2023</p>
</div>
<div class="mt-1 flex items-center justify-end text-xs text-gray-500">
<span>You</span>
<span class="mx-1">•</span>
<span>2 min ago</span>
</div>
</div>
<div class="flex-shrink-0 bg-blue-600 rounded-full p-1">
<i class="fas fa-user text-white"></i>
</div>
</div>
</div>
<!-- AI response -->
<div class="chat-message">
<div class="flex items-start">
<div class="flex-shrink-0 bg-blue-100 rounded-full p-1">
<i class="fas fa-robot text-blue-600"></i>
</div>
<div class="ml-3">
<div class="bg-gray-100 rounded-lg py-2 px-4">
<p class="text-sm text-gray-800">I found 14 transactions related to Trident in Q1 2023 totaling $15,200.00. Here's a summary:</p>
<ul class="mt-2 list-disc list-inside text-sm">
<li>8 licensing payments ($9,600)</li>
<li>4 service fees ($4,200)</li>
<li>2 hardware purchases ($1,400)</li>
</ul>
<button class="mt-2 text-xs text-blue-600 hover:text-blue-800">View detailed breakdown</button>
</div>
<div class="mt-1 flex items-center text-xs text-gray-500">
<span>AI Assistant</span>
<span class="mx-1">•</span>
<span>1 min ago</span>
</div>
</div>
</div>
</div>
</div>
<div class="p-4 border-t border-gray-200">
<div class="relative">
<input type="text" placeholder="Ask about your documents..." class="block w-full rounded-md border-gray-300 shadow-sm pl-4 pr-12 py-2 focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm">
<div class="absolute inset-y-0 right-0 flex items-center pr-3">
<button class="text-blue-600 hover:text-blue-800">
<i class="fas fa-paper-plane"></i>
</button>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Transactions table (hidden by default, shown when Transactions tab is selected) -->
<div class="mt-6 bg-white shadow rounded-lg overflow-hidden hidden">
<div class="px-4 py-3 bg-gray-50 border-b border-gray-200 flex justify-between items-center">
<h3 class="text-sm font-medium text-gray-700">Processed Transactions (73)</h3>
<div class="flex items-center space-x-3">
<div class="relative">
<input type="text" placeholder="Search transactions..." class="pl-8 pr-4 py-2 border border-gray-300 rounded-md text-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500">
<i class="fas fa-search absolute left-3 top-3 text-gray-400"></i>
</div>
<button class="text-gray-500 hover:text-gray-700">
<i class="fas fa-filter"></i>
</button>
</div>
</div>
<div class="overflow-x-auto">
<table class="min-w-full divide-y divide-gray-200">
<thead class="bg-gray-50">
<tr>
<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Date</th>
<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Description</th>
<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Amount</th>
<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Type</th>
<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Category</th>
<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Trident</th>
<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Source</th>
</tr>
</thead>
<tbody class="bg-white divide-y divide-gray-200">
<tr>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">03/15/2023</td>
<td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">Software License Renewal</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">$1,200.00</td>
<td class="px-6 py-4 whitespace-nowrap">
<span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-red-100 text-red-800">Debit</span>
</td>
<td class="px-6 py-4 whitespace-nowrap">
<div class="transaction-category">
<select class="block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 sm:text-sm">
<option>Licensing</option>
<option>Hardware</option>
<option>Services</option>
<option>Vendors</option>
<option>Other</option>
</select>
</div>
</td>
<td class="px-6 py-4 whitespace-nowrap">
<input type="checkbox" class="h-4 w-4 rounded border-gray-300 text-blue-600 focus:ring-blue-500">
</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Bank_Statement.pdf</td>
</tr>
<tr>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">03/10/2023</td>
<td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">Consulting Services</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">$2,500.00</td>
<td class="px-6 py-4 whitespace-nowrap">
<span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800">Credit</span>
</td>
<td class="px-6 py-4 whitespace-nowrap">
<div class="transaction-category">
<select class="block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 sm:text-sm">
<option selected>Services</option>
<option>Hardware</option>
<option>Licensing</option>
<option>Vendors</option>
<option>Other</option>
</select>
</div>
</td>
<td class="px-6 py-4 whitespace-nowrap">
<input type="checkbox" checked class="h-4 w-4 rounded border-gray-300 text-blue-600 focus:ring-blue-500">
</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Income_Report.xlsx</td>
</tr>
<tr>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">03/05/2023</td>
<td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">Server Hardware</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">$4,800.00</td>
<td class="px-6 py-4 whitespace-nowrap">
<span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-red-100 text-red-800">Debit</span>
</td>
<td class="px-6 py-4 whitespace-nowrap">
<div class="transaction-category">
<select class="block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 sm:text-sm">
<option selected>Hardware</option>
<option>Licensing</option>
<option>Services</option>
<option>Vendors</option>
<option>Other</option>
</select>
</div>
</td>
<td class="px-6 py-4 whitespace-nowrap">
<input type="checkbox" class="h-4 w-4 rounded border-gray-300 text-blue-600 focus:ring-blue-500">
</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Expenses_Q1.pdf</td>
</tr>
<tr>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">03/01/2023</td>
<td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">Trident Project Payment</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">$5,000.00</td>
<td class="px-6 py-4 whitespace-nowrap">
<span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800">Credit</span>
</td>
<td class="px-6 py-4 whitespace-nowrap">
<div class="transaction-category">
<select class="block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 sm:text-sm">
<option>Licensing</option>
<option selected>Services</option>
<option>Hardware</option>
<option>Vendors</option>
<option>Other</option>
</select>
</div>
</td>
<td class="px-6 py-4 whitespace-nowrap">
<input type="checkbox" checked class="h-4 w-4 rounded border-gray-300 text-blue-600 focus:ring-blue-500">
</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Client_Payments.xlsx</td>
</tr>
</tbody>
</table>
</div>
<div class="bg-gray-50 px-4 py-3 flex items-center justify-between border-t border-gray-200 sm:px-6">
<div class="flex-1 flex justify-between sm:hidden">
<a href="#" class="relative inline-flex items-center px-4 py-2 border border-gray-300 text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50">Previous</a>
<a href="#" class="ml-3 relative inline-flex items-center px-4 py-2 border border-gray-300 text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50">Next</a>
</div>
<div class="hidden sm:flex-1 sm:flex sm:items-center sm:justify-between">
<div>
<p class="text-sm text-gray-700">
Showing <span class="font-medium">1</span> to <span class="font-medium">4</span> of <span class="font-medium">73</span> results
</p>
</div>
<div>
<nav class="relative z-0 inline-flex rounded-md shadow-sm -space-x-px" aria-label="Pagination">
<a href="#" class="relative inline-flex items-center px-2 py-2 rounded-l-md border border-gray-300 bg-white text-sm font-medium text-gray-500 hover:bg-gray-50">
<span class="sr-only">Previous</span>
<i class="fas fa-chevron-left"></i>
</a>
<a href="#" aria-current="page" class="z-10 bg-blue-50 border-blue-500 text-blue-600 relative inline-flex items-center px-4 py-2 border text-sm font-medium">1</a>
<a href="#" class="bg-white border-gray-300 text-gray-500 hover:bg-gray-50 relative inline-flex items-center px-4 py-2 border text-sm font-medium">2</a>
<a href="#" class="bg-white border-gray-300 text-gray-500 hover:bg-gray-50 relative inline-flex items-center px-4 py-2 border text-sm font-medium">3</a>
<span class="relative inline-flex items-center px-4 py-2 border border-gray-300 bg-white text-sm font-medium text-gray-700">...</span>
<a href="#" class="bg-white border-gray-300 text-gray-500 hover:bg-gray-50 relative inline-flex items-center px-4 py-2 border text-sm font-medium">8</a>
<a href="#" class="relative inline-flex items-center px-2 py-2 rounded-r-md border border-gray-300 bg-white text-sm font-medium text-gray-500 hover:bg-gray-50">
<span class="sr-only">Next</span>
<i class="fas fa-chevron-right"></i>
</a>
</nav>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Modal for document processing -->
<div id="processingModal" class="fixed inset-0 z-50 flex items-center justify-center bg-black bg-opacity-50 hidden">
<div class="bg-white rounded-lg shadow-xl max-w-md w-full p-6">
<div class="flex items-center justify-between mb-4">
<h3 class="text-lg font-medium text-gray-900">Processing Documents</h3>
<button id="closeModal" class="text-gray-500 hover:text-gray-700">
<i class="fas fa-times"></i>
</button>
</div>
<div class="mb-4">
<div class="flex items-center mb-2">
<div class="w-8 h-8 rounded-full bg-blue-100 flex items-center justify-center mr-3">
<i class="fas fa-file-pdf text-blue-600"></i>
</div>
<div class="flex-1">
<p class="text-sm font-medium text-gray-900">Bank_Statement_2023_Q1.pdf</p>
<div class="w-full bg-gray-200 rounded-full h-1.5">
<div class="bg-blue-600 h-1.5 rounded-full" style="width: 75%"></div>
</div>
</div>
</div>
<div class="flex items-center mb-2">
<div class="w-8 h-8 rounded-full bg-green-100 flex items-center justify-center mr-3">
<i class="fas fa-file-excel text-green-600"></i>
</div>
<div class="flex-1">
<p class="text-sm font-medium text-gray-900">Vendor_Payments_Q2_2023.xlsx</p>
<div class="w-full bg-gray-200 rounded-full h-1.5">
<div class="bg-green-600 h-1.5 rounded-full" style="width: 45%"></div>
</div>
</div>
</div>
<div class="flex items-center">
<div class="w-8 h-8 rounded-full bg-blue-100 flex items-center justify-center mr-3">
<i class="fas fa-file-word text-blue-600"></i>
</div>
<div class="flex-1">
<p class="text-sm font-medium text-gray-900">Legal_Complaint_Trident.docx</p>
<div class="w-full bg-gray-200 rounded-full h-1.5">
<div class="bg-blue-600 h-1.5 rounded-full" style="width: 20%"></div>
</div>
</div>
</div>
</div>
<div class="bg-blue-50 rounded-lg p-3">
<div class="flex">
<div class="flex-shrink-0">
<i class="fas fa-info-circle text-blue-400"></i>
</div>
<div class="ml-3">
<p class="text-sm text-blue-700">
Processing may take a few minutes depending on document size and complexity. You can continue working while this completes.
</p>
</div>
</div>
</div>
</div>
</div>
<script>
// API Key save functionality
document.getElementById('saveApiKey').addEventListener('click', function() {
const apiKey = document.getElementById('apiKeyInput').value;
if (apiKey) {
localStorage.setItem('apiKey', apiKey);
alert('API key saved successfully!');
} else {
alert('Please enter an API key');
}
});
// Load saved API key if exists
const savedApiKey = localStorage.getItem('apiKey');
if (savedApiKey) {
document.querySelector('#sidebar input[type="password"]').value = savedApiKey;
}
// Sidebar toggle for mobile
document.getElementById('openSidebar').addEventListener('click', function() {
document.getElementById('sidebar').classList.add('open');
});
document.getElementById('closeSidebar').addEventListener('click', function() {
document.getElementById('sidebar').classList.remove('open');
});
// File upload handling
const dropzone = document.getElementById('dropzone');
const fileInput = document.getElementById('fileInput');
const processingModal = document.getElementById('processingModal');
dropzone.addEventListener('click', () => fileInput.click());
fileInput.addEventListener('change', function() {
if (this.files.length > 0) {
const apiKey = localStorage.getItem('apiKey');
if (!apiKey) {
alert('Please save your API key first');
return;
}
showProcessingModal();
// Create FormData and append files
const formData = new FormData();
for (let i = 0; i < this.files.length; i++) {
formData.append('files', this.files[i]);
}
// Example API call (replace with your actual endpoint)
fetch('https://your-api-endpoint.com/upload', {
method: 'POST',
headers: {
'Authorization': `Bearer ${apiKey}`
},
body: formData
})
.then(response => response.json())
.then(data => {
// Handle successful upload
console.log('Upload successful', data);
// Update UI with processed data
})
.catch(error => {
console.error('Upload failed', error);
// Show error message in chat instead of alert
const chatMessages = document.getElementById('chatMessages');
const errorMessage = `
<div class="chat-message">
<div class="flex items-start">
<div class="flex-shrink-0 bg-red-100 rounded-full p-1">
<i class="fas fa-robot text-red-600"></i>
</div>
<div class="ml-3">
<div class="bg-red-50 rounded-lg py-2 px-4">
<p class="text-sm text-red-800">Document processing failed. Please check your API key and try again.</p>
<p class="text-xs text-red-600 mt-1">Error: ${error.message || 'Network or server error'}</p>
</div>
<div class="mt-1 flex items-center text-xs text-gray-500">
<span>AI Assistant</span>
<span class="mx-1">•</span>
<span>Just now</span>
</div>
</div>
</div>
</div>
`;
chatMessages.insertAdjacentHTML('beforeend', errorMessage);
chatMessages.scrollTop = chatMessages.scrollHeight;
})
.finally(() => {
processingModal.classList.add('hidden');
});
}
});
['dragenter', 'dragover', 'dragleave', 'drop'].forEach(eventName => {
dropzone.addEventListener(eventName, preventDefaults, false);
});
function preventDefaults(e) {
e.preventDefault();
e.stopPropagation();
}
['dragenter', 'dragover'].forEach(eventName => {
dropzone.addEventListener(eventName, highlight, false);
});
['dragleave', 'drop'].forEach(eventName => {
dropzone.addEventListener(eventName, unhighlight, false);
});
function highlight() {
dropzone.classList.add('active');
}
function unhighlight() {
dropzone.classList.remove('active');
}
dropzone.addEventListener('drop', function(e) {
const dt = e.dataTransfer;
const files = dt.files;
fileInput.files = files;
if (files.length > 0) {
showProcessingModal();
}
});
function showProcessingModal() {
processingModal.classList.remove('hidden');
}
document.getElementById('closeModal').addEventListener('click', function() {
processingModal.classList.add('hidden');
});
// Simulate processing completion after 5 seconds
setTimeout(() => {
const progressBars = document.querySelectorAll('.bg-gray-200 > div');
progressBars.forEach(bar => {
bar.style.width = '100%';
});
setTimeout(() => {
processingModal.classList.add('hidden');
// Show success message in chat
const chatMessages = document.getElementById('chatMessages');
const successMessage = `
<div class="chat-message">
<div class="flex items-start">
<div class="flex-shrink-0 bg-blue-100 rounded-full p-1">
<i class="fas fa-robot text-blue-600"></i>
</div>
<div class="ml-3">
<div class="bg-gray-100 rounded-lg py-2 px-4">
<p class="text-sm text-gray-800">I've finished processing your documents. I found 73 transactions across all files. Would you like me to generate a summary report?</p>
<button class="mt-2 text-xs text-blue-600 hover:text-blue-800">Generate Summary Report</button>
</div>
<div class="mt-1 flex items-center text-xs text-gray-500">
<span>AI Assistant</span>
<span class="mx-1">•</span>
<span>Just now</span>
</div>
</div>
</div>
</div>
`;
chatMessages.insertAdjacentHTML('beforeend', successMessage);
chatMessages.scrollTop = chatMessages.scrollHeight;
}, 1000);
}, 3000);
// Check API key before upload
function validateApiKey() {
const apiKey = localStorage.getItem('apiKey');
if (!apiKey) {
const chatMessages = document.getElementById('chatMessages');
const warningMessage = `
<div class="chat-message">
<div class="flex items-start">
<div class="flex-shrink-0 bg-yellow-100 rounded-full p-1">
<i class="fas fa-robot text-yellow-600"></i>
</div>
<div class="ml-3">
<div class="bg-yellow-50 rounded-lg py-2 px-4">
<p class="text-sm text-yellow-800">Please save your API key in the sidebar before uploading documents.</p>
</div>
<div class="mt-1 flex items-center text-xs text-gray-500">
<span>AI Assistant</span>
<span class="mx-1">•</span>
<span>Just now</span>
</div>
</div>
</div>
</div>
`;
chatMessages.insertAdjacentHTML('beforeend', warningMessage);
chatMessages.scrollTop = chatMessages.scrollHeight;
return false;
}
return true;
}
</script>
<p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=fascorp/ai-document-analysis" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
</html>