TheMaddax
80657cc209
- Replaced Next.js + Express + React stack with Laravel + Inertia + Vue - Created database migrations for docket_entries, documents, subscriptions, admin_users - Built Eloquent models with relationships (DocketEntry, Document, Subscription, AdminUser) - Implemented HomeController with Inertia.js integration - Created Vue home page component matching v1.0 design exactly - Installed Laravel Breeze for authentication scaffolding - Configured Vite 7 for Vue 3 + TypeScript compilation - Updated .gitignore for Laravel project structure - Tested locally - website rendering correctly with empty database - All v1.0 Next.js/Express files removed, replaced with Laravel structure Technology Stack: - Backend: Laravel 12.43.1, PHP 8.3.28, Eloquent ORM - Frontend: Vue 3, TypeScript, Inertia.js, Tailwind CSS 3.x - Build: Vite 7.x, Composer 2.9.2 - Database: SQLite (dev), PostgreSQL (production) Next steps: Email subscription API, document downloads, admin dashboard
196 lines
8.4 KiB
Vue
196 lines
8.4 KiB
Vue
<script setup lang="ts">
|
|
import { Head } from '@inertiajs/vue3';
|
|
import { ref } from 'vue';
|
|
|
|
interface Document {
|
|
id: number;
|
|
title: string;
|
|
file_path: string;
|
|
}
|
|
|
|
interface DocketEntry {
|
|
id: number;
|
|
date: string;
|
|
title: string;
|
|
summary: string;
|
|
documents: Document[];
|
|
}
|
|
|
|
interface CaseInfo {
|
|
title: string;
|
|
status: string;
|
|
lastUpdated: string;
|
|
}
|
|
|
|
interface Props {
|
|
docketEntries: DocketEntry[];
|
|
caseInfo: CaseInfo;
|
|
}
|
|
|
|
const props = defineProps<Props>();
|
|
|
|
const expandedEntry = ref<number | null>(null);
|
|
const email = ref('');
|
|
const subscribeMessage = ref('');
|
|
|
|
const toggleEntry = (id: number) => {
|
|
expandedEntry.value = expandedEntry.value === id ? null : id;
|
|
};
|
|
|
|
const subscribe = async () => {
|
|
// TODO: Implement subscription API call
|
|
subscribeMessage.value = 'Subscription feature coming soon!';
|
|
setTimeout(() => {
|
|
subscribeMessage.value = '';
|
|
}, 3000);
|
|
};
|
|
</script>
|
|
|
|
<template>
|
|
<Head title="Court Docket - Elizabeth Kragh v. Montana Association of the Deaf" />
|
|
|
|
<div class="min-h-screen" style="background-color: #4a5568;">
|
|
<!-- Hero Section -->
|
|
<div class="py-16 px-4" style="background: linear-gradient(135deg, #3f4a5c 0%, #4a5568 100%);">
|
|
<div class="max-w-4xl mx-auto text-center">
|
|
<h1 class="text-4xl md:text-5xl font-bold text-white mb-4">
|
|
ELIZABETH KRAGH
|
|
</h1>
|
|
<p class="text-2xl text-white mb-2">v.</p>
|
|
<h2 class="text-4xl md:text-5xl font-bold text-white mb-6">
|
|
MONTANA ASSOCIATION OF THE DEAF
|
|
</h2>
|
|
<p class="text-xl text-gray-300 mb-8">Court Docket & Legal Documents</p>
|
|
|
|
<!-- Email Subscription -->
|
|
<div class="bg-white/10 backdrop-blur-sm rounded-lg p-6 max-w-2xl mx-auto">
|
|
<h3 class="text-xl font-semibold text-white mb-4">Stay Informed</h3>
|
|
<div class="flex flex-col sm:flex-row gap-3">
|
|
<input
|
|
v-model="email"
|
|
type="email"
|
|
placeholder="Enter your email address"
|
|
class="flex-1 px-4 py-3 rounded-lg border-0 focus:ring-2 focus:ring-green-500"
|
|
/>
|
|
<button
|
|
@click="subscribe"
|
|
class="px-6 py-3 rounded-lg font-semibold text-white transition-colors"
|
|
style="background-color: #6b9080;"
|
|
@mouseover="$event.target.style.backgroundColor = '#5a8070'"
|
|
@mouseout="$event.target.style.backgroundColor = '#6b9080'"
|
|
>
|
|
Subscribe to Updates
|
|
</button>
|
|
</div>
|
|
<p v-if="subscribeMessage" class="mt-3 text-green-300">{{ subscribeMessage }}</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Main Content -->
|
|
<div class="max-w-4xl mx-auto px-4 py-12">
|
|
<!-- Case Information Card -->
|
|
<div class="bg-white rounded-lg shadow-lg p-8 mb-8">
|
|
<h2 class="text-2xl font-bold text-center mb-6">Case Information</h2>
|
|
|
|
<div class="space-y-4">
|
|
<div class="text-center">
|
|
<p class="text-sm text-gray-600 mb-1">Case Title</p>
|
|
<p class="text-lg font-semibold">{{ caseInfo.title }}</p>
|
|
</div>
|
|
|
|
<div class="text-center">
|
|
<p class="text-sm text-gray-600 mb-1">Status</p>
|
|
<span class="inline-block px-4 py-2 rounded-full text-sm font-semibold"
|
|
style="background-color: #d1fae5; color: #10b981;">
|
|
{{ caseInfo.status }}
|
|
</span>
|
|
</div>
|
|
|
|
<div class="text-center">
|
|
<p class="text-sm text-gray-600 mb-1">Last Updated</p>
|
|
<p class="text-lg font-semibold">{{ caseInfo.lastUpdated }}</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Court Docket Entries -->
|
|
<div class="bg-white rounded-lg shadow-lg p-8">
|
|
<h2 class="text-2xl font-bold text-center mb-4">Court Docket Entries</h2>
|
|
<p class="text-center text-gray-600 mb-8">
|
|
Chronological record of all court filings and proceedings
|
|
</p>
|
|
|
|
<div v-if="docketEntries.length === 0" class="text-center text-gray-500 py-8">
|
|
No docket entries yet.
|
|
</div>
|
|
|
|
<div v-else class="space-y-4">
|
|
<div
|
|
v-for="(entry, index) in docketEntries"
|
|
:key="entry.id"
|
|
class="border rounded-lg overflow-hidden transition-shadow hover:shadow-md cursor-pointer"
|
|
@click="toggleEntry(entry.id)"
|
|
>
|
|
<div class="p-4 flex items-start gap-4">
|
|
<!-- Entry Number Badge -->
|
|
<div class="flex-shrink-0 w-10 h-10 rounded-full flex items-center justify-center text-white font-bold"
|
|
style="background-color: #3f4a5c;">
|
|
{{ docketEntries.length - index }}
|
|
</div>
|
|
|
|
<!-- Entry Content -->
|
|
<div class="flex-1 min-w-0">
|
|
<p class="text-sm text-gray-500 mb-1">{{ entry.date }}</p>
|
|
<h3 class="text-lg font-semibold text-gray-900 mb-2">{{ entry.title }}</h3>
|
|
|
|
<!-- Expanded Content -->
|
|
<div v-if="expandedEntry === entry.id" class="mt-4 space-y-4">
|
|
<div>
|
|
<p class="font-semibold text-gray-700 mb-2">Brief Summary:</p>
|
|
<p class="text-gray-600">{{ entry.summary }}</p>
|
|
</div>
|
|
|
|
<div v-if="entry.documents.length > 0">
|
|
<button
|
|
v-for="doc in entry.documents"
|
|
:key="doc.id"
|
|
class="inline-block px-4 py-2 rounded-lg text-white font-semibold mr-2 mb-2 transition-colors"
|
|
style="background-color: #6b9080;"
|
|
@mouseover="$event.target.style.backgroundColor = '#5a8070'"
|
|
@mouseout="$event.target.style.backgroundColor = '#6b9080'"
|
|
>
|
|
📄 View PDF
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Expand/Collapse Icon -->
|
|
<div class="flex-shrink-0">
|
|
<svg
|
|
class="w-6 h-6 text-gray-400 transition-transform"
|
|
:class="{ 'rotate-180': expandedEntry === entry.id }"
|
|
fill="none"
|
|
stroke="currentColor"
|
|
viewBox="0 0 24 24"
|
|
>
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
|
|
</svg>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Footer -->
|
|
<footer class="py-8 px-4 text-center border-t" style="background-color: rgba(57, 64, 83, 0.95); border-color: #4E4A59;">
|
|
<span class="text-gray-400">Designed by </span>
|
|
<a href="http://deafgain.org" target="_blank" rel="noopener noreferrer"
|
|
class="text-yellow-400 hover:text-yellow-500 transition-colors">
|
|
DeafGain LLC
|
|
</a>
|
|
</footer>
|
|
</div>
|
|
</template>
|