makdoc2
This commit is contained in:
Flatlogic Bot
parent
0e82cdc749
commit
015faff9b1
@ -1,93 +1,58 @@
|
|||||||
|
/* Base styles */
|
||||||
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
|
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
|
||||||
|
|
||||||
body {
|
body {
|
||||||
font-family: 'Inter', sans-serif;
|
font-family: 'Inter', sans-serif;
|
||||||
background-color: #f0f2f5;
|
background-color: #f0f2f5; /* Lighter gray background */
|
||||||
}
|
|
||||||
|
|
||||||
.navbar-brand {
|
|
||||||
font-weight: 700;
|
|
||||||
font-size: 1.5rem;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* Glassmorphism card style */
|
||||||
.glass-card {
|
.glass-card {
|
||||||
background: rgba(255, 255, 255, 0.95);
|
background: rgba(255, 255, 255, 0.9);
|
||||||
|
backdrop-filter: blur(12px);
|
||||||
|
-webkit-backdrop-filter: blur(12px);
|
||||||
border-radius: 16px;
|
border-radius: 16px;
|
||||||
border: 1px solid rgba(255, 255, 255, 0.3);
|
border: 1px solid rgba(255, 255, 255, 0.2);
|
||||||
box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.1);
|
box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.1);
|
||||||
padding: 2rem;
|
transition: all 0.3s ease;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.glass-card-header {
|
||||||
|
background: rgba(249, 250, 251, 0.7); /* Light header */
|
||||||
|
border-bottom: 1px solid #e5e7eb;
|
||||||
|
border-top-left-radius: 16px;
|
||||||
|
border-top-right-radius: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Gradient button */
|
||||||
.btn-gradient {
|
.btn-gradient {
|
||||||
background-image: linear-gradient(to right, #6366f1 0%, #8b5cf6 50%, #ec4899 100%);
|
background-image: linear-gradient(to right, #6366f1 0%, #8b5cf6 50%, #ec4899 100%);
|
||||||
background-size: 200% auto;
|
background-size: 200% auto;
|
||||||
color: white;
|
color: white;
|
||||||
transition: 0.5s;
|
transition: 0.5s;
|
||||||
border: none;
|
border: none;
|
||||||
padding: 0.75rem 1.5rem;
|
|
||||||
font-weight: 600;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.btn-gradient:hover:not(:disabled) {
|
.btn-gradient:hover:not(:disabled) {
|
||||||
background-position: right center;
|
background-position: right center; /* change the direction of the change here */
|
||||||
box-shadow: 0 10px 20px -10px rgba(139, 92, 246, 0.6);
|
box-shadow: 0 4px 15px 0 rgba(124, 77, 255, 0.4);
|
||||||
transform: translateY(-2px);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.fir-preview-container {
|
/* For webkit scrollbars */
|
||||||
margin-top: 3rem;
|
::-webkit-scrollbar {
|
||||||
|
width: 8px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.fir-preview {
|
::-webkit-scrollbar-track {
|
||||||
font-family: 'Times New Roman', Times, serif;
|
background: #f1f1f1;
|
||||||
color: #000;
|
border-radius: 10px;
|
||||||
background: #fff;
|
|
||||||
padding: 2.5cm 2cm;
|
|
||||||
margin-top: 2rem;
|
|
||||||
border: 1px solid #dee2e6;
|
|
||||||
line-height: 1.5;
|
|
||||||
font-size: 12pt;
|
|
||||||
white-space: pre-wrap;
|
|
||||||
box-shadow: 0 4px 12px rgba(0,0,0,0.08);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.fir-preview h2 {
|
::-webkit-scrollbar-thumb {
|
||||||
font-family: 'Arial', sans-serif;
|
background: #888;
|
||||||
font-weight: bold;
|
border-radius: 10px;
|
||||||
text-align: center;
|
|
||||||
border: 2px solid #000;
|
|
||||||
padding: 0.5rem;
|
|
||||||
margin-bottom: 1.5rem;
|
|
||||||
font-size: 16pt;
|
|
||||||
text-transform: uppercase;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.fir-preview strong {
|
::-webkit-scrollbar-thumb:hover {
|
||||||
font-weight: bold;
|
background: #555;
|
||||||
}
|
|
||||||
|
|
||||||
.fir-preview .section {
|
|
||||||
margin-bottom: 1rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.fir-preview .grid {
|
|
||||||
display: grid;
|
|
||||||
grid-template-columns: 1fr 1fr;
|
|
||||||
gap: 1rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.fir-preview .full-width {
|
|
||||||
grid-column: 1 / -1;
|
|
||||||
}
|
|
||||||
|
|
||||||
.form-label {
|
|
||||||
font-weight: 500;
|
|
||||||
}
|
|
||||||
|
|
||||||
.form-section-title {
|
|
||||||
font-size: 1.25rem;
|
|
||||||
font-weight: 600;
|
|
||||||
margin-bottom: 1rem;
|
|
||||||
padding-bottom: 0.5rem;
|
|
||||||
border-bottom: 1px solid #e5e7eb;
|
|
||||||
}
|
}
|
||||||
344
index.php
344
index.php
@ -1,195 +1,193 @@
|
|||||||
<?php
|
|
||||||
// --- Form Submission Logic ---
|
|
||||||
$is_submitted = false;
|
|
||||||
$data = [];
|
|
||||||
$fields = [
|
|
||||||
'DISTRICT', 'POLICE_STATION', 'FIR_NO', 'DATE_OF_FIR',
|
|
||||||
'SECTIONS_OF_LAW', 'DATE_OF_OCCURRENCE', 'TIME_OF_OCCURRENCE',
|
|
||||||
'PLACE_OF_OCCURRENCE', 'DATE_OF_INFO', 'TIME_OF_INFO',
|
|
||||||
'COMPLAINANT_NAME', 'COMPLAINANT_FATHER_NAME', 'COMPLAINANT_ADDRESS',
|
|
||||||
'ACCUSED_DETAILS', 'BRIEF_FACTS_OF_THE_CASE', 'INVESTIGATING_OFFICER_NAME',
|
|
||||||
'IO_RANK', 'OFFICER_IN_CHARGE_NAME', 'OFFICER_IN_CHARGE_RANK'
|
|
||||||
];
|
|
||||||
|
|
||||||
if ($_SERVER['REQUEST_METHOD'] === 'POST') {
|
|
||||||
$is_submitted = true;
|
|
||||||
foreach ($fields as $field) {
|
|
||||||
$data[$field] = isset($_POST[$field]) ? htmlspecialchars($_POST[$field], ENT_QUOTES, 'UTF-8') : '';
|
|
||||||
}
|
|
||||||
}
|
|
||||||
?>
|
|
||||||
<!DOCTYPE html>
|
<!DOCTYPE html>
|
||||||
<html lang="en">
|
<html lang="en">
|
||||||
<head>
|
<head>
|
||||||
<meta charset="UTF-8">
|
<meta charset="UTF-8">
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
<title>MAKDOC - AI Legal Assistant</title>
|
<title>MAKDOC - AI Legal Assistant</title>
|
||||||
|
<!-- Scripts -->
|
||||||
<!-- SEO and Meta Tags -->
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/18.2.0/umd/react.production.min.js"></script>
|
||||||
<meta name="description" content="Built with Flatlogic. Generate official Indian legal documents like First Information Reports (FIR) with an easy-to-use form.">
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/18.2.0/umd/react-dom.production.min.js"></script>
|
||||||
<meta name="keywords" content="AI legal assistant, legal document generation, FIR generator, Indian law, police report, legal tech, document automation, CrPC section 154, criminal procedure code, legal forms, Built with Flatlogic Generator">
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/7.23.5/babel.min.js"></script>
|
||||||
<meta property="og:title" content="MAKDOC - AI Legal Assistant">
|
<script src="https://cdn.tailwindcss.com"></script>
|
||||||
<meta property="og:description" content="Built with Flatlogic. Generate official Indian legal documents like First Information Reports (FIR) with an easy-to-use form.">
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/3.11.174/pdf.min.js"></script>
|
||||||
<meta property="og:image" content="<?php echo htmlspecialchars($_SERVER['PROJECT_IMAGE_URL'] ?? '', ENT_QUOTES, 'UTF-8'); ?>">
|
<script>pdfjsLib.GlobalWorkerOptions.workerSrc = `https://cdnjs.cloudflare.com/ajax/libs/pdf.js/3.11.174/pdf.worker.min.js`;</script>
|
||||||
<meta name="twitter:card" content="summary_large_image">
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/mammoth/1.6.0/mammoth.browser.min.js"></script>
|
||||||
<meta name="twitter:image" content="<?php echo htmlspecialchars($_SERVER['PROJECT_IMAGE_URL'] ?? '', ENT_QUOTES, 'UTF-8'); ?>">
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2pdf.js/0.10.1/html2pdf.bundle.min.js"></script>
|
||||||
|
|
||||||
<!-- Styles and Fonts -->
|
|
||||||
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
|
|
||||||
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">
|
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">
|
||||||
<link href="assets/css/custom.css?v=<?php echo time(); ?>" rel="stylesheet">
|
<link href="assets/css/custom.css" rel="stylesheet">
|
||||||
</head>
|
</head>
|
||||||
<body class="bg-light">
|
<body class="bg-gray-100">
|
||||||
|
<div id="root"></div>
|
||||||
|
|
||||||
<!-- Header -->
|
<script type="text/babel">
|
||||||
<nav class="navbar navbar-expand-lg navbar-light bg-white shadow-sm">
|
const { useState, useEffect } = React;
|
||||||
<div class="container">
|
|
||||||
<a class="navbar-brand" href="#">
|
|
||||||
<i class="fas fa-robot text-primary"></i> MAKDOC
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
</nav>
|
|
||||||
|
|
||||||
<!-- Main Content -->
|
// Main App Component
|
||||||
<main class="container my-5">
|
function App() {
|
||||||
<div class="glass-card">
|
const [file, setFile] = useState(null);
|
||||||
<div class="text-center mb-4">
|
const [fileContent, setFileContent] = useState('');
|
||||||
<h1 class="h2">First Information Report (FIR) Generator</h1>
|
const [isLoading, setIsLoading] = useState(false);
|
||||||
<p class="text-muted">Fill in the details below to generate a draft FIR under Section 154 Cr.P.C.</p>
|
const [reportContent, setReportContent] = useState('AI-generated report will appear here.');
|
||||||
</div>
|
|
||||||
|
|
||||||
<form action="index.php" method="POST">
|
const handleFileChange = (e) => {
|
||||||
<!-- Section 1 & 2 -->
|
const selectedFile = e.target.files[0];
|
||||||
<h3 class="form-section-title">1. Case Details</h3>
|
if (selectedFile) {
|
||||||
<div class="row g-3 mb-4">
|
setFile(selectedFile);
|
||||||
<div class="col-md-6"><label class="form-label">District</label><input type="text" class="form-control" name="DISTRICT" required></div>
|
extractText(selectedFile);
|
||||||
<div class="col-md-6"><label class="form-label">Police Station</label><input type="text" class="form-control" name="POLICE_STATION" required></div>
|
}
|
||||||
<div class="col-md-6"><label class="form-label">FIR No.</label><input type="text" class="form-control" name="FIR_NO" required></div>
|
};
|
||||||
<div class="col-md-6"><label class="form-label">Date of FIR</label><input type="date" class="form-control" name="DATE_OF_FIR" required></div>
|
|
||||||
<div class="col-12"><label class="form-label">Act(s) and Section(s)</label><input type="text" class="form-control" name="SECTIONS_OF_LAW" placeholder="e.g., IPC Section 302" required></div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Section 3 -->
|
const extractText = (fileToProcess) => {
|
||||||
<h3 class="form-section-title">2. Occurrence of Offence</h3>
|
setIsLoading(true);
|
||||||
<div class="row g-3 mb-4">
|
setFileContent('');
|
||||||
<div class="col-md-6"><label class="form-label">Date of Occurrence</label><input type="date" class="form-control" name="DATE_OF_OCCURRENCE" required></div>
|
const reader = new FileReader();
|
||||||
<div class="col-md-6"><label class="form-label">Time of Occurrence</label><input type="time" class="form-control" name="TIME_OF_OCCURRENCE"></div>
|
const fileType = fileToProcess.type;
|
||||||
<div class="col-12"><label class="form-label">Place of Occurrence</label><input type="text" class="form-control" name="PLACE_OF_OCCURRENCE" required></div>
|
|
||||||
<div class="col-md-6"><label class="form-label">Date Information Received at P.S.</label><input type="date" class="form-control" name="DATE_OF_INFO" required></div>
|
|
||||||
<div class="col-md-6"><label class="form-label">Time Information Received at P.S.</label><input type="time" class="form-control" name="TIME_OF_INFO" required></div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Section 4 -->
|
if (fileType === 'application/pdf') {
|
||||||
<h3 class="form-section-title">3. Informant / Complainant</h3>
|
reader.onload = (e) => {
|
||||||
<div class="row g-3 mb-4">
|
const typedarray = new Uint8Array(e.target.result);
|
||||||
<div class="col-md-6"><label class="form-label">Name</label><input type="text" class="form-control" name="COMPLAINANT_NAME" required></div>
|
pdfjsLib.getDocument(typedarray).promise.then(pdf => {
|
||||||
<div class="col-md-6"><label class="form-label">Father's/Husband's Name</label><input type="text" class="form-control" name="COMPLAINANT_FATHER_NAME"></div>
|
let text = '';
|
||||||
<div class="col-12"><label class="form-label">Address</label><textarea class="form-control" name="COMPLAINANT_ADDRESS" rows="2" required></textarea></div>
|
const numPages = pdf.numPages;
|
||||||
</div>
|
const promises = [];
|
||||||
|
for (let i = 1; i <= numPages; i++) {
|
||||||
|
promises.push(pdf.getPage(i).then(page => {
|
||||||
|
return page.getTextContent().then(content => {
|
||||||
|
return content.items.map(item => item.str).join(' ');
|
||||||
|
});
|
||||||
|
}));
|
||||||
|
}
|
||||||
|
Promise.all(promises).then(pagesText => {
|
||||||
|
setFileContent(pagesText.join('\n\n'));
|
||||||
|
setIsLoading(false);
|
||||||
|
});
|
||||||
|
});
|
||||||
|
};
|
||||||
|
reader.readAsArrayBuffer(fileToProcess);
|
||||||
|
} else if (fileType === 'application/vnd.openxmlformats-officedocument.wordprocessingml.document') {
|
||||||
|
reader.onload = (e) => {
|
||||||
|
mammoth.extractRawText({ arrayBuffer: e.target.result })
|
||||||
|
.then(result => {
|
||||||
|
setFileContent(result.value);
|
||||||
|
setIsLoading(false);
|
||||||
|
})
|
||||||
|
.catch(err => {
|
||||||
|
console.error("Mammoth error:", err);
|
||||||
|
setFileContent("Error extracting text from DOCX file.");
|
||||||
|
setIsLoading(false);
|
||||||
|
});
|
||||||
|
};
|
||||||
|
reader.readAsArrayBuffer(fileToProcess);
|
||||||
|
} else {
|
||||||
|
setFileContent('Unsupported file type. Please upload a PDF or DOCX file.');
|
||||||
|
setIsLoading(false);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
<!-- Section 5, 6, 7 -->
|
const generateReport = () => {
|
||||||
<h3 class="form-section-title">4. Case Summary & Investigation</h3>
|
// Placeholder for AI report generation
|
||||||
<div class="row g-3 mb-4">
|
setReportContent("Generating report... (This is a placeholder, AI integration is not yet implemented). Based on the document, the key points are...");
|
||||||
<div class="col-12"><label class="form-label">Details of known/suspected/unknown accused</label><textarea class="form-control" name="ACCUSED_DETAILS" rows="3" required></textarea></div>
|
};
|
||||||
<div class="col-12"><label class="form-label">Brief facts of the case (Gist of information)</label><textarea class="form-control" name="BRIEF_FACTS_OF_THE_CASE" rows="5" required></textarea></div>
|
|
||||||
<div class="col-md-6"><label class="form-label">Investigating Officer (IO) Name</label><input type="text" class="form-control" name="INVESTIGATING_OFFICER_NAME" required></div>
|
|
||||||
<div class="col-md-6"><label class="form-label">IO Rank</label><input type="text" class="form-control" name="IO_RANK" required></div>
|
|
||||||
<div class="col-md-6"><label class="form-label">Officer-in-Charge Name</label><input type="text" class="form-control" name="OFFICER_IN_CHARGE_NAME" required></div>
|
|
||||||
<div class="col-md-6"><label class="form-label">Officer-in-Charge Rank</label><input type="text" class="form-control" name="OFFICER_IN_CHARGE_RANK" required></div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="text-center">
|
const exportToPdf = () => {
|
||||||
<button type="submit" class="btn btn-gradient">Generate FIR Preview</button>
|
const element = document.getElementById('report-content-wrapper');
|
||||||
</div>
|
if (!element) {
|
||||||
</form>
|
alert("No content to export.");
|
||||||
</div>
|
return;
|
||||||
|
}
|
||||||
|
const opt = {
|
||||||
|
margin: 0.5,
|
||||||
|
filename: 'MAKDOC_Report.pdf',
|
||||||
|
image: { type: 'jpeg', quality: 0.98 },
|
||||||
|
html2canvas: { scale: 2 },
|
||||||
|
jsPDF: { unit: 'in', format: 'letter', orientation: 'portrait' }
|
||||||
|
};
|
||||||
|
html2pdf().from(element).set(opt).save();
|
||||||
|
}
|
||||||
|
|
||||||
<?php if ($is_submitted): ?>
|
return (
|
||||||
<div class="fir-preview-container" id="fir-preview">
|
<div className="flex h-screen bg-gray-100 font-sans">
|
||||||
<div class="d-flex justify-content-between align-items-center mb-3">
|
{/* Sidebar */}
|
||||||
<h2 class="m-0">Generated FIR Preview</h2>
|
<aside className="w-64 bg-white shadow-md">
|
||||||
<button class="btn btn-outline-secondary" onclick="window.print()"><i class="fas fa-print me-2"></i>Print</button>
|
<div className="p-6">
|
||||||
</div>
|
<h1 className="text-2xl font-bold text-indigo-600">MAKDOC.AI</h1>
|
||||||
<div class="fir-preview">
|
|
||||||
<h2>First Information Report (Under Section 154 Cr.P.C.)</h2>
|
|
||||||
|
|
||||||
<div class="section">
|
|
||||||
<div class="grid">
|
|
||||||
<div><strong>1. District:</strong> <?php echo $data['DISTRICT']; ?></div>
|
|
||||||
<div><strong>Police Station:</strong> <?php echo $data['POLICE_STATION']; ?></div>
|
|
||||||
<div><strong>FIR No.:</strong> <?php echo $data['FIR_NO']; ?></div>
|
|
||||||
<div><strong>Date:</strong> <?php echo $data['DATE_OF_FIR']; ?></div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="section">
|
|
||||||
<strong>2. Act(s) and Section(s):</strong>
|
|
||||||
<p><?php echo $data['SECTIONS_OF_LAW']; ?></p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="section">
|
|
||||||
<strong>3. Occurrence of Offence:</strong>
|
|
||||||
<div class="grid">
|
|
||||||
<div>a) <strong>Date/Time:</strong> From <?php echo $data['DATE_OF_OCCURRENCE']; ?> <?php echo $data['TIME_OF_OCCURRENCE']; ?></div>
|
|
||||||
<div class="full-width">b) <strong>Place of Occurrence:</strong> <?php echo $data['PLACE_OF_OCCURRENCE']; ?></div>
|
|
||||||
<div class="full-width">c) <strong>Information received at P.S.:</strong> Date: <?php echo $data['DATE_OF_INFO']; ?>, Time: <?php echo $data['TIME_OF_INFO']; ?></div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="section">
|
|
||||||
<strong>4. Informant / Complainant:</strong>
|
|
||||||
<div class="grid">
|
|
||||||
<div>a) <strong>Name:</strong> <?php echo $data['COMPLAINANT_NAME']; ?></div>
|
|
||||||
<div>b) <strong>Father's/Husband's Name:</strong> <?php echo $data['COMPLAINANT_FATHER_NAME']; ?></div>
|
|
||||||
<div class="full-width">c) <strong>Address:</strong> <?php echo $data['COMPLAINANT_ADDRESS']; ?></div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="section">
|
|
||||||
<strong>5. Details of known / suspected / unknown accused with full particulars:</strong>
|
|
||||||
<p><?php echo $data['ACCUSED_DETAILS']; ?></p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="section">
|
|
||||||
<strong>6. Brief facts of the case (Gist of information):</strong>
|
|
||||||
<p><?php echo $data['BRIEF_FACTS_OF_THE_CASE']; ?></p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="section">
|
|
||||||
<strong>7. Action Taken:</strong>
|
|
||||||
<p>Since the above report reveals commission of offence(s) u/s as mentioned at Item No. 2. Registered the case and took up the investigation.</p>
|
|
||||||
<div class="grid">
|
|
||||||
<div><strong>Investigating Officer (IO):</strong> <?php echo $data['INVESTIGATING_OFFICER_NAME']; ?></div>
|
|
||||||
<div><strong>Rank:</strong> <?php echo $data['IO_RANK']; ?></div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="section" style="margin-top: 4rem;">
|
|
||||||
<div class="grid">
|
|
||||||
<div style="text-align: center;">
|
|
||||||
_______________________<br>
|
|
||||||
<strong>Signature / Thumb impression of Complainant / Informant</strong>
|
|
||||||
</div>
|
</div>
|
||||||
<div style="text-align: center;">
|
<nav className="mt-6">
|
||||||
_______________________<br>
|
<a href="#" className="flex items-center px-6 py-3 text-gray-700 bg-gray-200">
|
||||||
<strong>Signature of Officer-in-Charge, Police Station</strong><br>
|
<i className="fas fa-file-upload mr-3"></i>
|
||||||
<strong>Name:</strong> <?php echo $data['OFFICER_IN_CHARGE_NAME']; ?><br>
|
Document Analysis
|
||||||
<strong>Rank:</strong> <?php echo $data['OFFICER_IN_CHARGE_RANK']; ?><br>
|
</a>
|
||||||
<strong>PS:</strong> <?php echo $data['POLICE_STATION']; ?>
|
<a href="#" className="flex items-center px-6 py-3 text-gray-600 hover:bg-gray-200">
|
||||||
|
<i className="fas fa-history mr-3"></i>
|
||||||
|
History
|
||||||
|
</a>
|
||||||
|
<a href="#" className="flex items-center px-6 py-3 text-gray-600 hover:bg-gray-200">
|
||||||
|
<i className="fas fa-cog mr-3"></i>
|
||||||
|
Settings
|
||||||
|
</a>
|
||||||
|
</nav>
|
||||||
|
</aside>
|
||||||
|
|
||||||
|
{/* Main Content */}
|
||||||
|
<main className="flex-1 p-8">
|
||||||
|
<div className="glass-card p-6 h-full flex flex-col">
|
||||||
|
<div className="glass-card-header -m-6 mb-6 p-4">
|
||||||
|
<h2 className="text-xl font-semibold text-gray-800">AI Document Analysis</h2>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Upload Area */}
|
||||||
|
<div className="mb-6">
|
||||||
|
<label htmlFor="file-upload" className="cursor-pointer btn-gradient text-white font-bold py-3 px-6 rounded-lg inline-block">
|
||||||
|
<i className="fas fa-upload mr-2"></i>
|
||||||
|
{file ? 'Change Document' : 'Upload Document (PDF/DOCX)'}
|
||||||
|
</label>
|
||||||
|
<input id="file-upload" type="file" className="hidden" onChange={handleFileChange} accept=".pdf,.docx" />
|
||||||
|
{file && <span className="ml-4 text-gray-600">{file.name}</span>}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Content & Report Area */}
|
||||||
|
<div className="flex-1 grid grid-cols-1 md:grid-cols-2 gap-6 min-h-0">
|
||||||
|
{/* Extracted Text */}
|
||||||
|
<div className="bg-white rounded-lg shadow p-4 flex flex-col">
|
||||||
|
<h3 className="text-lg font-semibold text-gray-700 mb-2">Extracted Content</h3>
|
||||||
|
<div className="flex-1 overflow-y-auto p-2 border rounded">
|
||||||
|
{isLoading ? (
|
||||||
|
<div className="flex justify-center items-center h-full">
|
||||||
|
<i className="fas fa-spinner fa-spin text-3xl text-indigo-500"></i>
|
||||||
|
</div>
|
||||||
|
) : (
|
||||||
|
<pre className="whitespace-pre-wrap text-sm text-gray-600">{fileContent || "Upload a document to see its content here."}</pre>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* AI Generated Report */}
|
||||||
|
<div className="bg-white rounded-lg shadow p-4 flex flex-col">
|
||||||
|
<h3 className="text-lg font-semibold text-gray-700 mb-2">Generated Report</h3>
|
||||||
|
<div id="report-content-wrapper" className="flex-1 overflow-y-auto p-2 border rounded">
|
||||||
|
<p className="text-sm text-gray-600">{reportContent}</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Action Buttons */}
|
||||||
|
<div className="mt-6 flex justify-end space-x-4">
|
||||||
|
<button onClick={generateReport} disabled={!fileContent} className="btn-gradient font-bold py-2 px-6 rounded-lg disabled:opacity-50 disabled:cursor-not-allowed">
|
||||||
|
<i className="fas fa-magic mr-2"></i>
|
||||||
|
Generate Report
|
||||||
|
</button>
|
||||||
|
<button onClick={exportToPdf} disabled={!fileContent} className="bg-gray-600 hover:bg-gray-700 text-white font-bold py-2 px-6 rounded-lg disabled:opacity-50 disabled:cursor-not-allowed">
|
||||||
|
<i className="fas fa-file-pdf mr-2"></i>
|
||||||
|
Export as PDF
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</main>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
);
|
||||||
</div>
|
}
|
||||||
<?php endif; ?>
|
|
||||||
</main>
|
|
||||||
|
|
||||||
<!-- Footer -->
|
ReactDOM.render(<App />, document.getElementById('root'));
|
||||||
<footer class="text-center py-4 text-muted border-top">
|
</script>
|
||||||
<p>Built with <a href="https://flatlogic.com" target="_blank">Flatlogic</a></p>
|
|
||||||
</footer>
|
|
||||||
|
|
||||||
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
|
|
||||||
<script src="assets/js/main.js?v=<?php echo time(); ?>"></script>
|
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
Loading…
x
Reference in New Issue
Block a user