2024-07-19 11:43:09 +00:00
|
|
|
|
|
|
|
<main class="max-w-8xl mx-40 py-6 sm:px-6 lg:px-8">
|
|
|
|
<!-- Overview Section -->
|
|
|
|
<section class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-6">
|
|
|
|
<div class="bg-white p-6 rounded-lg shadow-lg">
|
|
|
|
<div class="text-gray-500">Total Forms Created</div>
|
|
|
|
<div class="text-2xl font-bold">50</div>
|
|
|
|
</div>
|
|
|
|
<div class="bg-white p-6 rounded-lg shadow-lg">
|
|
|
|
<div class="text-gray-500">Total Forms Published</div>
|
|
|
|
<div class="text-2xl font-bold">35</div>
|
|
|
|
</div>
|
|
|
|
<div class="bg-white p-6 rounded-lg shadow-lg">
|
|
|
|
<div class="text-gray-500">Total Responses Received</div>
|
|
|
|
<div class="text-2xl font-bold">1500</div>
|
|
|
|
</div>
|
|
|
|
</section>
|
|
|
|
|
|
|
|
<!-- Forms Summary Section -->
|
|
|
|
<section class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-6">
|
|
|
|
<!-- Top 5 Most Active Forms -->
|
|
|
|
<div class="bg-white p-6 rounded-lg shadow-lg">
|
|
|
|
<div class="text-lg font-bold mb-4">Top 5 Most Active Forms</div>
|
|
|
|
<table class="min-w-full bg-white">
|
|
|
|
<thead>
|
|
|
|
<tr>
|
|
|
|
<th class="py-2">Form Title</th>
|
|
|
|
<th class="py-2">Responses</th>
|
|
|
|
</tr>
|
|
|
|
</thead>
|
|
|
|
<tbody>
|
|
|
|
<tr>
|
|
|
|
<td class="py-2">Form A</td>
|
|
|
|
<td class="py-2">500</td>
|
|
|
|
</tr>
|
|
|
|
<tr class="bg-gray-100">
|
|
|
|
<td class="py-2">Form B</td>
|
|
|
|
<td class="py-2">400</td>
|
|
|
|
</tr>
|
|
|
|
<tr>
|
|
|
|
<td class="py-2">Form C</td>
|
|
|
|
<td class="py-2">300</td>
|
|
|
|
</tr>
|
|
|
|
<tr class="bg-gray-100">
|
|
|
|
<td class="py-2">Form D</td>
|
|
|
|
<td class="py-2">200</td>
|
|
|
|
</tr>
|
|
|
|
<tr>
|
|
|
|
<td class="py-2">Form E</td>
|
|
|
|
<td class="py-2">100</td>
|
|
|
|
</tr>
|
|
|
|
</tbody>
|
|
|
|
</table>
|
|
|
|
</div>
|
|
|
|
|
|
|
|
<!-- Recent Forms -->
|
|
|
|
<div class="bg-white p-6 rounded-lg shadow-lg">
|
|
|
|
<div class="text-lg font-bold mb-4">Recent Forms</div>
|
|
|
|
<table class="min-w-full bg-white">
|
|
|
|
<thead>
|
|
|
|
<tr>
|
|
|
|
<th class="py-2">Form Title</th>
|
|
|
|
<th class="py-2">Date Created</th>
|
|
|
|
<th class="py-2">Status</th>
|
|
|
|
</tr>
|
|
|
|
</thead>
|
|
|
|
<tbody>
|
|
|
|
<tr>
|
|
|
|
<td class="py-2">Form X</td>
|
|
|
|
<td class="py-2">2024-07-10</td>
|
|
|
|
<td class="py-2">Draft</td>
|
|
|
|
</tr>
|
|
|
|
<tr class="bg-gray-100">
|
|
|
|
<td class="py-2">Form Y</td>
|
|
|
|
<td class="py-2">2024-07-09</td>
|
|
|
|
<td class="py-2">Published</td>
|
|
|
|
</tr>
|
|
|
|
<tr>
|
|
|
|
<td class="py-2">Form Z</td>
|
|
|
|
<td class="py-2">2024-07-08</td>
|
|
|
|
<td class="py-2">Published</td>
|
|
|
|
</tr>
|
|
|
|
</tbody>
|
|
|
|
</table>
|
|
|
|
</div>
|
|
|
|
</section>
|
|
|
|
|
|
|
|
<!-- Responses Summary Section -->
|
|
|
|
<section class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-6">
|
|
|
|
<!-- Response Trends -->
|
|
|
|
<div class="bg-white p-6 rounded-lg shadow-lg">
|
|
|
|
<div class="text-lg font-bold mb-4">Response Trends</div>
|
|
|
|
<div class="h-40 bg-gray-200 rounded-lg"></div> <!-- Placeholder for Line Chart -->
|
|
|
|
</div>
|
|
|
|
|
|
|
|
<!-- Average Responses per Form -->
|
|
|
|
<div class="bg-white p-6 rounded-lg shadow-lg">
|
|
|
|
<div class="text-lg font-bold mb-4">Average Responses per Form</div>
|
|
|
|
<div class="text-2xl font-bold">30</div>
|
|
|
|
</div>
|
|
|
|
</section>
|
|
|
|
|
|
|
|
<!-- User Engagement Section -->
|
|
|
|
<section class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-6">
|
|
|
|
<div class="bg-white p-6 rounded-lg shadow-lg">
|
|
|
|
<div class="text-gray-500">Active Users</div>
|
|
|
|
<div class="text-2xl font-bold">100</div>
|
|
|
|
</div>
|
|
|
|
<div class="bg-white p-6 rounded-lg shadow-lg">
|
|
|
|
<div class="text-gray-500">New Users</div>
|
|
|
|
<div class="text-2xl font-bold">20</div>
|
|
|
|
</div>
|
|
|
|
</section>
|
|
|
|
</main>
|