Stronger-Together/database_report.html at master · veot2389-tech/Stronger-Together · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Admin Database Panel</title>
    <style>
        body {font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; line-height: 1.6; color: #333; background-color: #f4f4f4; margin: 0; padding: 20px;}
        h1, h2 {color: #2c3e50; border-bottom: 2px solid #3498db; padding-bottom: 10px;}
        .container {max-width: 1200px; margin: auto; background: #fff; padding: 20px; box-shadow: 0 0 10px rgba(0,0,0,0.1); border-radius: 8px;}
        table {width: 100%; border-collapse: collapse; margin-bottom: 30px;}
        th, td {padding: 12px; border: 1px solid #ddd; text-align: left; word-break: break-word;}
        th {background-color: #3498db; color: white;}
        tr:nth-child(even) {background-color: #f2f2f2;}
        .footer {text-align: center; margin-top: 30px; color: #777; font-size: 0.9em;}
        .table-wrapper {overflow-x: auto;}
        .delete-btn {background-color: #e74c3c; color: white; border: none; padding: 8px 12px; border-radius: 4px; cursor: pointer;}
        .delete-btn:hover {background-color: #c0392b;}
        .admin-section {background-color: #ecf0f1; padding: 20px; border-radius: 8px; margin-bottom: 30px;}
        .admin-section textarea, .admin-section input, .admin-section select {width: calc(100% - 24px); padding: 10px; margin-bottom: 10px; border-radius: 4px; border: 1px solid #bdc3c7;}
        .admin-section button {background-color: #2ecc71; color: white; border: none; padding: 10px 15px; border-radius: 4px; cursor: pointer; font-size: 16px;}
        .admin-section button:hover {background-color: #27ae60;}
        #status-message {margin-top: 15px; padding: 10px; border-radius: 4px; display: none;}
        .status-success {background-color: #d4edda; color: #155724; border: 1px solid #c3e6cb;}
        .status-error {background-color: #f8d7da; color: #721c24; border: 1px solid #f5c6cb;}
    </style>
</head>
<body>
    <div class="container">
        <h1>Admin Database Panel</h1>
        <p class="footer">Generated on: 2026-01-25 18:27:17</p>

        <div class="admin-section">
            <h2>⚙️ Database Control</h2>
            <label for="db-selector">Select Database:</label>
            <select id="db-selector" onchange="switchDatabase()">
                <option value="general_law" selected>General Law</option><option value="criminal_law" >Criminal Law</option>
            </select>
        </div>

        <div id="ingest-text-form" class="admin-section">
            <h2>➕ Ingest Legal Text</h2>
            <form onsubmit="ingestLegalText(event)">
                <textarea id="ingest-text-content" rows="10" placeholder="Paste the full legal text here..."></textarea>
                <input type="text" id="ingest-source" placeholder="Source (e.g., Thai Civil and Commercial Code, Website URL)" value="Manual Input">
                <input type="text" id="ingest-category" placeholder="Suggested Category (e.g., Civil, Criminal) - for initial ingestion hint" value="Manual">
                <button type="submit">Ingest Text to Database</button>
            </form>
            <div id="status-message-ingest"></div>
        </div>

        <h2>⚖️ Law Units</h2>
        <div id="law-units-table">
            <p>Loading Law Units...</p>
        </div>

        <h2>📖 Case Segments</h2>
        <div id="case-segments-table">
            <p>Loading Case Segments...</p>
        </div>

    </div>

    <script>
        const CURRENT_DB_KEY = new URLSearchParams(window.location.search).get('db_key') || 'general_law';

        // Set dropdown to current DB
        document.getElementById('db-selector').value = CURRENT_DB_KEY;

        function switchDatabase() {
            const selectedDbKey = document.getElementById('db-selector').value;
            window.location.href = window.location.pathname + '?db_key=' + selectedDbKey;
        }

        async function ingestLegalText(event) {
            event.preventDefault();
            const textContent = document.getElementById('ingest-text-content').value;
            const source = document.getElementById('ingest-source').value;
            const categoryHint = document.getElementById('ingest-category').value; // Not sent to API, for internal hint
            const statusMessage = document.getElementById('status-message-ingest');

            statusMessage.style.display = 'block';
            statusMessage.className = '';
            statusMessage.textContent = 'Processing...';

            try {
                // The ingestion API directly segments and categorizes, so categoryHint is not directly used in the payload
                const response = await fetch('http://localhost:8000/documents/ingest/legal-text', {
                    method: 'POST',
                    headers: { 'Content-Type': 'application/json' },
                    body: JSON.stringify({ text_content: textContent, source: source })
                });

                if (response.ok) {
                    const result = await response.json();
                    statusMessage.className = 'status-success';
                    statusMessage.textContent = `Ingested ${result.ingested_units_count} legal units. Failed: ${result.failed_units_count}. Reloading...`;
                    document.getElementById('ingest-text-content').value = '';
                    document.getElementById('ingest-source').value = 'Manual Input';
                    // Category hint can be cleared or kept
                    setTimeout(() => window.location.reload(), 2000);
                } else {
                    const error = await response.json();
                    statusMessage.className = 'status-error';
                    statusMessage.textContent = `Error: ${error.detail || 'Unknown error'}`;
                }
            } catch (e) {
                statusMessage.className = 'status-error';
                statusMessage.textContent = 'A network error occurred. Is the FastAPI server running at http://localhost:8000?';
            }
        }

        async function loadLawUnits() {
            const lawUnitsTableDiv = document.getElementById('law-units-table');
            try {
                const response = await fetch('http://localhost:8000/api/law_units');
                if (!response.ok) {
                    throw new Error(`HTTP error! status: ${response.status}`);
                }
                const lawUnits = await response.json();

                if (lawUnits.length === 0) {
                    lawUnitsTableDiv.innerHTML = '<p>No Law Units found.</p>';
                    return;
                }

                let tableHTML = '<div class="table-wrapper"><table><thead><tr><th>Law ID</th><th>Category</th><th>Subcategory</th><th>Law Name</th><th>Section</th><th>Title</th><th>Source</th><th>Actions</th></tr></thead><tbody>';
                lawUnits.forEach(unit => {
                    tableHTML += `<tr>
                        <td>${unit.law_id}</td>
                        <td>${unit.category}</td>
                        <td>${unit.subcategory || '-'}</td>
                        <td>${unit.law_name || '-'}</td>
                        <td>${unit.section || '-'}</td>
                        <td>${unit.title || '-'}</td>
                        <td>${unit.source || '-'}</td>
                        <td><button class="delete-btn" onclick="deleteLawUnit('${unit.law_id}')">Delete</button></td>
                    </tr>`;
                });
                tableHTML += '</tbody></table></div>';
                lawUnitsTableDiv.innerHTML = tableHTML;

            } catch (e) {
                lawUnitsTableDiv.innerHTML = `<p class="status-error">Error loading Law Units: ${e.message}. Is the FastAPI server running?</p>`;
                console.error('Error loading law units:', e);
            }
        }

        async function deleteLawUnit(lawId) {
            if (!confirm(`Are you sure you want to delete Law Unit with ID: ${lawId}?`)) {
                return;
            }
            try {
                const response = await fetch(`http://localhost:8000/api/law_units/${lawId}`, {
                    method: 'DELETE'
                });
                if (response.ok) {
                    alert('Law Unit deleted successfully! Reloading...');
                    window.location.reload();
                } else {
                    const error = await response.json();
                    alert(`Error deleting Law Unit: ${error.detail || 'Unknown error'}`);
                }
            } catch (e) {
                alert(`Network error deleting Law Unit: ${e.message}. Is the FastAPI server running?`);
            }
        }

        async function loadCaseSegments() {
            const caseSegmentsTableDiv = document.getElementById('case-segments-table');
            try {
                const response = await fetch('http://localhost:8000/api/case_segments');
                if (!response.ok) {
                    throw new Error(`HTTP error! status: ${response.status}`);
                }
                const caseSegments = await response.json();

                if (caseSegments.length === 0) {
                    caseSegmentsTableDiv.innerHTML = '<p>No Case Segments found.</p>';
                    return;
                }

                let tableHTML = '<div class="table-wrapper"><table><thead><tr><th>ID</th><th>Case ID</th><th>Doc ID</th><th>Type</th><th>Content (Excerpt)</th><th>Law Refs</th><th>Facts</th><th>Actions</th></tr></thead><tbody>';
                caseSegments.forEach(segment => {
                    const contentExcerpt = segment.segment_content.substring(0, 100) + (segment.segment_content.length > 100 ? '...' : '');
                    const lawRefs = segment.extracted_law_references ? JSON.parse(segment.extracted_law_references).join(', ') : '-';
                    const facts = segment.extracted_facts ? JSON.parse(segment.extracted_facts).map(f => f.name).join(', ') : '-'; // Assuming extracted_facts is a list of dicts with 'name'

                    tableHTML += `<tr>
                        <td>${segment.id}</td>
                        <td>${segment.case_id}</td>
                        <td>${segment.document_id || '-'}</td>
                        <td>${segment.segment_type}</td>
                        <td>${contentExcerpt}</td>
                        <td>${lawRefs || '-'}</td>
                        <td>${facts || '-'}</td>
                        <td><button class="delete-btn" onclick="deleteCaseSegment(${segment.id})">Delete</button></td>
                    </tr>`;
                });
                tableHTML += '</tbody></table></div>';
                caseSegmentsTableDiv.innerHTML = tableHTML;

            } catch (e) {
                caseSegmentsTableDiv.innerHTML = `<p class="status-error">Error loading Case Segments: ${e.message}. Is the FastAPI server running?</p>`;
                console.error('Error loading case segments:', e);
            }
        }

        async function deleteCaseSegment(segmentId) {
            if (!confirm(`Are you sure you want to delete Case Segment with ID: ${segmentId}?`)) {
                return;
            }
            try {
                const response = await fetch(`http://localhost:8000/api/case_segments/${segmentId}`, {
                    method: 'DELETE'
                });
                if (response.ok) {
                    alert('Case Segment deleted successfully! Reloading...');
                    window.location.reload();
                } else {
                    const error = await response.json();
                    alert(`Error deleting Case Segment: ${error.detail || 'Unknown error'}`);
                }
            } catch (e) {
                alert(`Network error deleting Case Segment: ${e.message}. Is the FastAPI server running?`);
            }
        }

        // Call functions on page load
        document.addEventListener('DOMContentLoaded', () => {
            loadLawUnits();
            loadCaseSegments();
        });
    </script>
</body>
</html>