Repo rebuild
This commit is contained in:
Mark Gregory
@@ -0,0 +1,20 @@
|
||||
@extends('documentation::layouts.master')
|
||||
|
||||
@section('title', 'Create Category')
|
||||
|
||||
@section('content')
|
||||
<div class="doc-page">
|
||||
@include('documentation::partials.hero', [
|
||||
'title' => 'Create category',
|
||||
'subtitle' => 'Add a professional grouping for documents and operational knowledge.',
|
||||
])
|
||||
<section class="doc-card">
|
||||
<div class="doc-card-header"><strong>Category details</strong></div>
|
||||
<div class="doc-card-body">
|
||||
<form method="POST" action="{{ route('documentation.categories.store') }}">
|
||||
@include('documentation::partials.category-form')
|
||||
</form>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
@endsection
|
||||
@@ -0,0 +1,20 @@
|
||||
@extends('documentation::layouts.master')
|
||||
|
||||
@section('title', 'Edit Category')
|
||||
|
||||
@section('content')
|
||||
<div class="doc-page">
|
||||
@include('documentation::partials.hero', [
|
||||
'title' => 'Edit category',
|
||||
'subtitle' => 'Update category naming, ordering, visibility, and presentation metadata.',
|
||||
])
|
||||
<section class="doc-card">
|
||||
<div class="doc-card-header"><strong>{{ $category->name }}</strong></div>
|
||||
<div class="doc-card-body">
|
||||
<form method="POST" action="{{ route('documentation.categories.update', $category) }}">
|
||||
@include('documentation::partials.category-form')
|
||||
</form>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
@endsection
|
||||
@@ -0,0 +1,71 @@
|
||||
@extends('documentation::layouts.master')
|
||||
|
||||
@section('title', 'Document Categories')
|
||||
|
||||
@section('content')
|
||||
<div class="doc-page">
|
||||
@include('documentation::partials.hero', [
|
||||
'title' => 'Document categories',
|
||||
'subtitle' =>
|
||||
'Organise documents by policy, process, onboarding, operational support, or technical area.',
|
||||
])
|
||||
|
||||
@if (session('status'))
|
||||
<div class="doc-alert">{{ session('status') }}</div>
|
||||
@endif
|
||||
|
||||
<section class="doc-card">
|
||||
<div class="doc-card-header">
|
||||
<strong>Categories</strong>
|
||||
<a class="doc-button category" href="{{ route('documentation.categories.create') }}">New category</a>
|
||||
</div>
|
||||
<div class="doc-card-body">
|
||||
<table class="doc-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Name</th>
|
||||
<th>Description</th>
|
||||
<th>Documents</th>
|
||||
<th>Order</th>
|
||||
<th>Status</th>
|
||||
<th></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
@forelse($categories as $category)
|
||||
<tr>
|
||||
<td><strong>{{ $category->name }}</strong>
|
||||
<div class="doc-muted">{{ $category->slug }}</div>
|
||||
</td>
|
||||
<td>{{ $category->description ?: 'No description' }}</td>
|
||||
<td>{{ $category->documents_count }}</td>
|
||||
<td>{{ $category->sort_order }}</td>
|
||||
<td><span
|
||||
class="doc-badge {{ $category->is_active ? '' : 'archived' }}">{{ $category->is_active ? 'Active' : 'Inactive' }}</span>
|
||||
</td>
|
||||
<td>
|
||||
<a class="doc-link"
|
||||
href="{{ route('documentation.categories.edit', $category) }}">Edit</a>
|
||||
<form method="POST"
|
||||
action="{{ route('documentation.categories.destroy', $category) }}"
|
||||
style="display:inline;"
|
||||
onsubmit="return confirm('Delete this category? Documents will become uncategorised.')">
|
||||
@csrf
|
||||
@method('DELETE')
|
||||
<button type="submit" class="doc-button danger"
|
||||
style="border:0;cursor:pointer;margin-left:10px;">Delete</button>
|
||||
</form>
|
||||
</td>
|
||||
</tr>
|
||||
@empty
|
||||
<tr>
|
||||
<td colspan="6" class="doc-muted">No categories found.</td>
|
||||
</tr>
|
||||
@endforelse
|
||||
</tbody>
|
||||
</table>
|
||||
<div style="margin-top:18px;">{{ $categories->links() }}</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
@endsection
|
||||
@@ -0,0 +1,20 @@
|
||||
@extends('documentation::layouts.master')
|
||||
|
||||
@section('title', 'Create Document')
|
||||
|
||||
@section('content')
|
||||
<div class="doc-page">
|
||||
@include('documentation::partials.hero', [
|
||||
'title' => 'Create document',
|
||||
'subtitle' => 'Add a controlled document, guide, policy, SOP, upload, or operational note.',
|
||||
])
|
||||
<section class="doc-card">
|
||||
<div class="doc-card-header"><strong>Document details</strong></div>
|
||||
<div class="doc-card-body">
|
||||
<form method="POST" action="{{ route('documentation.documents.store') }}" enctype="multipart/form-data">
|
||||
@include('documentation::partials.document-form')
|
||||
</form>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
@endsection
|
||||
@@ -0,0 +1,30 @@
|
||||
@extends('documentation::layouts.master')
|
||||
|
||||
@section('title', 'Edit Document')
|
||||
|
||||
@section('content')
|
||||
<div class="doc-page">
|
||||
@include('documentation::partials.hero', [
|
||||
'title' => 'Edit document',
|
||||
'subtitle' => 'Maintain document metadata, workflow status, version and attachment details.',
|
||||
])
|
||||
<section class="doc-card">
|
||||
<div class="doc-card-header"><strong>{{ $document->title }}</strong></div>
|
||||
<div class="doc-card-body">
|
||||
<form method="POST" action="{{ route('documentation.documents.update', $document) }}"
|
||||
enctype="multipart/form-data">
|
||||
@include('documentation::partials.document-form')
|
||||
</form>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
@foreach ($document->attachments as $attachment)
|
||||
<form id="delete-attachment-{{ $attachment->id }}" method="POST"
|
||||
action="{{ route('documentation.documents.attachments.destroy', [$document, $attachment]) }}"
|
||||
onsubmit="return confirm('Remove this attachment?')">
|
||||
@csrf
|
||||
@method('DELETE')
|
||||
</form>
|
||||
@endforeach
|
||||
</div>
|
||||
@endsection
|
||||
@@ -0,0 +1,105 @@
|
||||
@extends('documentation::layouts.master')
|
||||
|
||||
@section('title', 'Documentation')
|
||||
|
||||
@section('content')
|
||||
<div class="doc-page">
|
||||
@include('documentation::partials.hero', [
|
||||
'title' => 'Documentation Centre',
|
||||
'subtitle' =>
|
||||
'Create, control, publish, and archive operational documents from a clean professional register.',
|
||||
])
|
||||
|
||||
@if (session('status'))
|
||||
<div class="doc-alert">{{ session('status') }}</div>
|
||||
@endif
|
||||
|
||||
<section class="doc-grid stats">
|
||||
<article class="doc-card doc-stat"><strong>{{ $stats['total'] }}</strong><span>Total documents</span></article>
|
||||
<article class="doc-card doc-stat"><strong>{{ $stats['published'] }}</strong><span>Published</span></article>
|
||||
<article class="doc-card doc-stat"><strong>{{ $stats['drafts'] }}</strong><span>Drafts</span></article>
|
||||
<article class="doc-card doc-stat"><strong>{{ $stats['categories'] }}</strong><span>Categories</span></article>
|
||||
</section>
|
||||
|
||||
@if ($featuredDocuments->isNotEmpty())
|
||||
<section class="doc-card" style="margin-bottom:18px;">
|
||||
<div class="doc-card-header"><strong>Featured documents</strong></div>
|
||||
<div class="doc-card-body doc-grid" style="grid-template-columns:repeat(auto-fit,minmax(220px,1fr));">
|
||||
@foreach ($featuredDocuments as $featured)
|
||||
<a class="doc-card doc-card-body" style="text-decoration:none;color:inherit;box-shadow:none;"
|
||||
href="{{ route('documentation.documents.show', $featured) }}">
|
||||
<span class="doc-badge {{ $featured->status }}">{{ ucfirst($featured->status) }}</span>
|
||||
<h3 style="margin:12px 0 6px;">{{ $featured->title }}</h3>
|
||||
<p class="doc-muted" style="margin:0;">{{ $featured->summary ?: 'No summary provided.' }}</p>
|
||||
</a>
|
||||
@endforeach
|
||||
</div>
|
||||
</section>
|
||||
@endif
|
||||
|
||||
<section class="doc-card">
|
||||
<div class="doc-card-header">
|
||||
<strong>Document register</strong>
|
||||
<a class="doc-button success" href="{{ route('documentation.documents.create') }}">New document</a>
|
||||
</div>
|
||||
<div class="doc-card-body">
|
||||
<form class="doc-filter" method="GET" action="{{ route('documentation.documents.index') }}">
|
||||
<input class="doc-input" name="search" value="{{ request('search') }}"
|
||||
placeholder="Search title, reference, summary or body">
|
||||
<select class="doc-select" name="status">
|
||||
<option value="">All statuses</option>
|
||||
@foreach ($statuses as $value => $label)
|
||||
<option value="{{ $value }}" @selected(request('status') === $value)>{{ $label }}</option>
|
||||
@endforeach
|
||||
</select>
|
||||
<select class="doc-select" name="category">
|
||||
<option value="">All categories</option>
|
||||
@foreach ($categories as $category)
|
||||
<option value="{{ $category->id }}" @selected((string) request('category') === (string) $category->id)>{{ $category->name }}
|
||||
</option>
|
||||
@endforeach
|
||||
</select>
|
||||
<button class="doc-button primary" type="submit">Filter</button>
|
||||
</form>
|
||||
|
||||
<table class="doc-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Document</th>
|
||||
<th>Category</th>
|
||||
<th>Status</th>
|
||||
<th>Version</th>
|
||||
<th>Updated</th>
|
||||
<th></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
@forelse($documents as $document)
|
||||
<tr>
|
||||
<td>
|
||||
<a
|
||||
href="{{ route('documentation.documents.show', $document) }}">{{ $document->title }}</a>
|
||||
<div class="doc-muted">{{ $document->reference ?: 'No reference' }} ·
|
||||
{{ $document->summary ?: 'No summary' }}</div>
|
||||
</td>
|
||||
<td>{{ $document->category?->name ?: 'Uncategorised' }}</td>
|
||||
<td><span
|
||||
class="doc-badge {{ $document->status }}">{{ ucfirst($document->status) }}</span>
|
||||
</td>
|
||||
<td>{{ $document->version }}</td>
|
||||
<td>{{ $document->updated_at?->format('d M Y H:i') }}</td>
|
||||
<td><a class="doc-link"
|
||||
href="{{ route('documentation.documents.edit', $document) }}">Edit</a></td>
|
||||
</tr>
|
||||
@empty
|
||||
<tr>
|
||||
<td colspan="6" class="doc-muted">No documents found.</td>
|
||||
</tr>
|
||||
@endforelse
|
||||
</tbody>
|
||||
</table>
|
||||
<div style="margin-top:18px;">{{ $documents->links() }}</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
@endsection
|
||||
@@ -0,0 +1,70 @@
|
||||
@extends('documentation::layouts.master')
|
||||
|
||||
@section('title', $document->title)
|
||||
|
||||
@section('content')
|
||||
<div class="doc-page">
|
||||
@include('documentation::partials.hero', [
|
||||
'title' => $document->title,
|
||||
'subtitle' =>
|
||||
$document->summary ?:
|
||||
'Controlled documentation record with versioning, attachments and Markdown rendering.',
|
||||
'actions' => [
|
||||
[
|
||||
'label' => 'Edit document',
|
||||
'url' => route('documentation.documents.edit', $document),
|
||||
'class' => 'primary',
|
||||
],
|
||||
[
|
||||
'label' => 'Back to documents',
|
||||
'url' => route('documentation.documents.index'),
|
||||
'class' => 'secondary',
|
||||
],
|
||||
],
|
||||
])
|
||||
|
||||
<section class="doc-card">
|
||||
<div class="doc-card-header">
|
||||
<div>
|
||||
<strong>{{ $document->reference ?: 'Document' }}</strong>
|
||||
<div class="doc-muted">Version {{ $document->version }} @if ($document->category)
|
||||
· {{ $document->category->name }}
|
||||
@endif
|
||||
</div>
|
||||
</div>
|
||||
<span class="doc-badge {{ $document->status }}">{{ ucfirst($document->status) }}</span>
|
||||
</div>
|
||||
<div class="doc-card-body">
|
||||
<article class="doc-content">{!! $document->rendered_body !!}</article>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
@if ($document->attachment_name || $document->attachments->isNotEmpty())
|
||||
<section class="doc-card" style="margin-top: 18px;">
|
||||
<div class="doc-card-header"><strong>Attachments</strong></div>
|
||||
<div class="doc-card-body">
|
||||
<div class="doc-attachment-list">
|
||||
@if ($document->attachment_name)
|
||||
<div class="doc-attachment-item">
|
||||
<div>
|
||||
<a class="doc-link"
|
||||
href="{{ route('documentation.documents.download', $document) }}">{{ $document->attachment_name }}</a>
|
||||
<span class="doc-muted">Primary file</span>
|
||||
</div>
|
||||
</div>
|
||||
@endif
|
||||
@foreach ($document->attachments as $attachment)
|
||||
<div class="doc-attachment-item">
|
||||
<div>
|
||||
<a class="doc-link"
|
||||
href="{{ route('documentation.documents.attachments.download', [$document, $attachment]) }}">{{ $attachment->original_name }}</a>
|
||||
<span class="doc-muted">{{ $attachment->size_label }}</span>
|
||||
</div>
|
||||
</div>
|
||||
@endforeach
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
@endif
|
||||
</div>
|
||||
@endsection
|
||||
@@ -0,0 +1 @@
|
||||
@extends('documentation::documents.index')
|
||||
@@ -0,0 +1,659 @@
|
||||
<x-layouts.app>
|
||||
<style>
|
||||
:root {
|
||||
--doc-ink: #18181b;
|
||||
--doc-muted: #71717a;
|
||||
--doc-line: #e4e4e7;
|
||||
--doc-panel: #ffffff;
|
||||
--doc-soft: #f4f4f5;
|
||||
--doc-brand: #2563eb;
|
||||
--doc-brand-dark: #1d4ed8;
|
||||
--doc-accent: #059669;
|
||||
--doc-danger: #dc2626;
|
||||
--doc-warning: #d97706;
|
||||
--doc-radius: 22px;
|
||||
--doc-shadow: 0 18px 55px rgba(15, 23, 42, .10);
|
||||
}
|
||||
|
||||
html.dark {
|
||||
--doc-ink: #f4f4f5;
|
||||
--doc-muted: #a1a1aa;
|
||||
--doc-line: #3f3f46;
|
||||
--doc-panel: #18181b;
|
||||
--doc-soft: #09090b;
|
||||
--doc-shadow: 0 18px 55px rgba(0, 0, 0, .28);
|
||||
}
|
||||
|
||||
body.documentation-module {
|
||||
margin: 0;
|
||||
background: #ffffff;
|
||||
color: var(--doc-ink);
|
||||
font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
html.dark body.documentation-module {
|
||||
background: #09090b;
|
||||
}
|
||||
|
||||
.doc-shell {
|
||||
max-width: 1800px;
|
||||
margin: 0 auto;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.doc-page {
|
||||
margin: 0 auto;
|
||||
max-width: 1800px;
|
||||
padding: 0;
|
||||
display: grid;
|
||||
gap: 1.5rem;
|
||||
}
|
||||
|
||||
.doc-hero-wrap {
|
||||
overflow: hidden;
|
||||
border: 1px solid var(--doc-line);
|
||||
border-radius: 1.5rem;
|
||||
background: var(--doc-panel);
|
||||
box-shadow: 0 1px 2px rgba(15, 23, 42, .06);
|
||||
}
|
||||
|
||||
.doc-hero {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 1rem;
|
||||
padding: 1.75rem 1.5rem;
|
||||
color: #ffffff;
|
||||
background: linear-gradient(135deg, #020617 0%, #0f172a 48%, #172554 100%);
|
||||
}
|
||||
|
||||
.doc-hero-row {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.doc-hero h1 {
|
||||
margin: .5rem 0 0;
|
||||
font-size: clamp(1.875rem, 4vw, 3rem);
|
||||
line-height: 1;
|
||||
font-weight: 700;
|
||||
letter-spacing: -.04em;
|
||||
}
|
||||
|
||||
.doc-eyebrow {
|
||||
margin: 0;
|
||||
color: #bfdbfe;
|
||||
text-transform: uppercase;
|
||||
font-size: .75rem;
|
||||
letter-spacing: .28em;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.doc-hero p {
|
||||
max-width: 48rem;
|
||||
margin: .5rem 0 0;
|
||||
color: rgba(219, 234, 254, .9);
|
||||
font-size: .875rem;
|
||||
line-height: 1.65;
|
||||
}
|
||||
|
||||
.doc-actions {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: .5rem;
|
||||
}
|
||||
|
||||
.doc-button {
|
||||
border: 1px solid transparent;
|
||||
border-radius: .75rem;
|
||||
padding: .625rem .875rem;
|
||||
font-weight: 700;
|
||||
font-size: .875rem;
|
||||
line-height: 1.25rem;
|
||||
text-decoration: none;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: .5rem;
|
||||
cursor: pointer;
|
||||
transition: background-color .15s ease, border-color .15s ease, transform .15s ease, box-shadow .15s ease;
|
||||
}
|
||||
|
||||
.doc-button:hover {
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
|
||||
.doc-button.primary,
|
||||
.doc-button.register,
|
||||
.doc-button.dark {
|
||||
background: #2563eb;
|
||||
color: #ffffff;
|
||||
border-color: #2563eb;
|
||||
box-shadow: 0 8px 18px rgba(37, 99, 235, .22);
|
||||
}
|
||||
|
||||
.doc-button.primary:hover,
|
||||
.doc-button.register:hover,
|
||||
.doc-button.dark:hover {
|
||||
background: #1d4ed8;
|
||||
border-color: #1d4ed8;
|
||||
}
|
||||
|
||||
.doc-button.secondary,
|
||||
.doc-button.category,
|
||||
.doc-button.settings {
|
||||
background: #7c3aed;
|
||||
color: #ffffff;
|
||||
border-color: #7c3aed;
|
||||
box-shadow: 0 8px 18px rgba(124, 58, 237, .22);
|
||||
}
|
||||
|
||||
.doc-button.secondary:hover,
|
||||
.doc-button.category:hover,
|
||||
.doc-button.settings:hover {
|
||||
background: #6d28d9;
|
||||
border-color: #6d28d9;
|
||||
}
|
||||
|
||||
.doc-button.light,
|
||||
.doc-button.cancel,
|
||||
.doc-button.warning {
|
||||
background: #f59e0b;
|
||||
color: #ffffff;
|
||||
border-color: #f59e0b;
|
||||
box-shadow: 0 8px 18px rgba(245, 158, 11, .22);
|
||||
}
|
||||
|
||||
.doc-button.light:hover,
|
||||
.doc-button.cancel:hover,
|
||||
.doc-button.warning:hover {
|
||||
background: #d97706;
|
||||
border-color: #d97706;
|
||||
}
|
||||
|
||||
.doc-button.success {
|
||||
background: #059669;
|
||||
color: #ffffff;
|
||||
border-color: #059669;
|
||||
box-shadow: 0 8px 18px rgba(5, 150, 105, .22);
|
||||
}
|
||||
|
||||
.doc-button.success:hover {
|
||||
background: #047857;
|
||||
border-color: #047857;
|
||||
}
|
||||
|
||||
.doc-button.danger {
|
||||
background: #dc2626;
|
||||
color: #ffffff;
|
||||
border-color: #dc2626;
|
||||
box-shadow: 0 8px 18px rgba(220, 38, 38, .22);
|
||||
}
|
||||
|
||||
.doc-button.danger:hover {
|
||||
background: #b91c1c;
|
||||
border-color: #b91c1c;
|
||||
}
|
||||
|
||||
.doc-card {
|
||||
background: var(--doc-panel);
|
||||
border: 1px solid var(--doc-line);
|
||||
border-radius: 1rem;
|
||||
box-shadow: 0 1px 2px rgba(15, 23, 42, .06);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.doc-card-header {
|
||||
padding: 1rem 1.25rem;
|
||||
border-bottom: 1px solid var(--doc-line);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.doc-card-body {
|
||||
padding: 1.25rem;
|
||||
}
|
||||
|
||||
.doc-grid {
|
||||
display: grid;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.doc-grid.stats {
|
||||
grid-template-columns: repeat(4, minmax(0, 1fr));
|
||||
}
|
||||
|
||||
.doc-stat {
|
||||
padding: 1.25rem;
|
||||
}
|
||||
|
||||
.doc-stat strong {
|
||||
display: block;
|
||||
font-size: 1.875rem;
|
||||
line-height: 2.25rem;
|
||||
letter-spacing: -.04em;
|
||||
color: var(--doc-ink);
|
||||
}
|
||||
|
||||
.doc-stat span {
|
||||
color: var(--doc-muted);
|
||||
font-size: .75rem;
|
||||
font-weight: 700;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: .08em;
|
||||
}
|
||||
|
||||
.doc-table {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
}
|
||||
|
||||
.doc-table th {
|
||||
text-align: left;
|
||||
font-size: .75rem;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: .08em;
|
||||
color: var(--doc-muted);
|
||||
padding: .75rem;
|
||||
border-bottom: 1px solid var(--doc-line);
|
||||
}
|
||||
|
||||
.doc-table td {
|
||||
padding: .875rem .75rem;
|
||||
border-bottom: 1px solid var(--doc-line);
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
.doc-table a,
|
||||
.doc-link {
|
||||
color: #1d4ed8;
|
||||
font-weight: 700;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
html.dark .doc-table a,
|
||||
html.dark .doc-link {
|
||||
color: #93c5fd;
|
||||
}
|
||||
|
||||
.doc-badge {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
border-radius: 999px;
|
||||
padding: .25rem .625rem;
|
||||
font-size: .75rem;
|
||||
font-weight: 800;
|
||||
background: #dbeafe;
|
||||
color: #1e40af;
|
||||
border: 1px solid #bfdbfe;
|
||||
}
|
||||
|
||||
.doc-badge.published {
|
||||
background: #ecfdf5;
|
||||
color: #065f46;
|
||||
border-color: #a7f3d0;
|
||||
}
|
||||
|
||||
.doc-badge.draft {
|
||||
background: #f4f4f5;
|
||||
color: #52525b;
|
||||
border-color: #d4d4d8;
|
||||
}
|
||||
|
||||
.doc-badge.archived {
|
||||
background: #fef2f2;
|
||||
color: #991b1b;
|
||||
border-color: #fecaca;
|
||||
}
|
||||
|
||||
html.dark .doc-badge {
|
||||
background: rgba(37, 99, 235, .18);
|
||||
color: #bfdbfe;
|
||||
border-color: rgba(59, 130, 246, .35);
|
||||
}
|
||||
|
||||
html.dark .doc-badge.published {
|
||||
background: rgba(5, 150, 105, .18);
|
||||
color: #a7f3d0;
|
||||
border-color: rgba(16, 185, 129, .35);
|
||||
}
|
||||
|
||||
html.dark .doc-badge.draft {
|
||||
background: rgba(113, 113, 122, .18);
|
||||
color: #d4d4d8;
|
||||
border-color: rgba(161, 161, 170, .30);
|
||||
}
|
||||
|
||||
html.dark .doc-badge.archived {
|
||||
background: rgba(220, 38, 38, .16);
|
||||
color: #fecaca;
|
||||
border-color: rgba(248, 113, 113, .32);
|
||||
}
|
||||
|
||||
.doc-form-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.doc-field.full {
|
||||
grid-column: 1 / -1;
|
||||
}
|
||||
|
||||
.doc-label {
|
||||
display: block;
|
||||
font-weight: 700;
|
||||
margin-bottom: .5rem;
|
||||
font-size: .875rem;
|
||||
color: var(--doc-ink);
|
||||
}
|
||||
|
||||
.doc-input,
|
||||
.doc-select,
|
||||
.doc-textarea {
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
border: 1px solid #d4d4d8;
|
||||
border-radius: .75rem;
|
||||
padding: .75rem .875rem;
|
||||
background: #ffffff;
|
||||
color: #18181b;
|
||||
font: inherit;
|
||||
box-shadow: 0 1px 2px rgba(15, 23, 42, .04);
|
||||
}
|
||||
|
||||
.doc-input:focus,
|
||||
.doc-select:focus,
|
||||
.doc-textarea:focus {
|
||||
outline: 2px solid rgba(37, 99, 235, .24);
|
||||
border-color: #2563eb;
|
||||
}
|
||||
|
||||
html.dark .doc-input,
|
||||
html.dark .doc-select,
|
||||
html.dark .doc-textarea {
|
||||
background: #09090b;
|
||||
color: #f4f4f5;
|
||||
border-color: #3f3f46;
|
||||
}
|
||||
|
||||
.doc-textarea {
|
||||
min-height: 360px;
|
||||
line-height: 1.6;
|
||||
resize: vertical;
|
||||
font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
|
||||
}
|
||||
|
||||
.doc-editor {
|
||||
border: 1px solid #d4d4d8;
|
||||
border-radius: 1rem;
|
||||
overflow: hidden;
|
||||
background: #ffffff;
|
||||
}
|
||||
|
||||
html.dark .doc-editor {
|
||||
background: #09090b;
|
||||
border-color: #3f3f46;
|
||||
}
|
||||
|
||||
.doc-editor .doc-textarea {
|
||||
border: 0;
|
||||
border-radius: 0;
|
||||
min-height: 420px;
|
||||
}
|
||||
|
||||
.doc-editor-toolbar {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: .375rem;
|
||||
padding: .625rem;
|
||||
background: #f4f4f5;
|
||||
border-bottom: 1px solid var(--doc-line);
|
||||
}
|
||||
|
||||
html.dark .doc-editor-toolbar {
|
||||
background: #18181b;
|
||||
}
|
||||
|
||||
.doc-editor-toolbar button {
|
||||
border: 1px solid #d4d4d8;
|
||||
background: #ffffff;
|
||||
color: #18181b;
|
||||
border-radius: .625rem;
|
||||
padding: .45rem .625rem;
|
||||
font-weight: 800;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
html.dark .doc-editor-toolbar button {
|
||||
border-color: #3f3f46;
|
||||
background: #09090b;
|
||||
color: #f4f4f5;
|
||||
}
|
||||
|
||||
.doc-editor-toolbar button:hover,
|
||||
.doc-editor-toolbar button:focus {
|
||||
border-color: #2563eb;
|
||||
outline: 2px solid rgba(37, 99, 235, .20);
|
||||
}
|
||||
|
||||
.editor-help {
|
||||
padding: 0 .875rem .75rem;
|
||||
margin: -.25rem 0 0;
|
||||
font-size: .8125rem;
|
||||
}
|
||||
|
||||
.doc-error {
|
||||
color: #dc2626;
|
||||
font-size: .8125rem;
|
||||
margin-top: .375rem;
|
||||
}
|
||||
|
||||
.doc-alert {
|
||||
border-radius: 1rem;
|
||||
padding: .875rem 1rem;
|
||||
background: #ecfdf5;
|
||||
color: #065f46;
|
||||
border: 1px solid #a7f3d0;
|
||||
font-size: .875rem;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
html.dark .doc-alert {
|
||||
background: #022c22;
|
||||
color: #a7f3d0;
|
||||
border-color: #065f46;
|
||||
}
|
||||
|
||||
.doc-warning {
|
||||
border-radius: 1rem;
|
||||
padding: .875rem 1rem;
|
||||
background: #fffbeb;
|
||||
color: #92400e;
|
||||
border: 1px solid #fcd34d;
|
||||
font-size: .875rem;
|
||||
}
|
||||
|
||||
html.dark .doc-warning {
|
||||
background: #451a03;
|
||||
color: #fef3c7;
|
||||
border-color: #92400e;
|
||||
}
|
||||
|
||||
.doc-filter {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 180px 220px auto;
|
||||
gap: .75rem;
|
||||
margin-bottom: 1.125rem;
|
||||
}
|
||||
|
||||
.doc-content {
|
||||
line-height: 1.75;
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.doc-content h1,
|
||||
.doc-content h2,
|
||||
.doc-content h3 {
|
||||
line-height: 1.2;
|
||||
letter-spacing: -.025em;
|
||||
margin: 1.4em 0 .55em;
|
||||
}
|
||||
|
||||
.doc-content h1 {
|
||||
font-size: 2rem;
|
||||
}
|
||||
|
||||
.doc-content h2 {
|
||||
font-size: 1.55rem;
|
||||
border-bottom: 1px solid var(--doc-line);
|
||||
padding-bottom: .35rem;
|
||||
}
|
||||
|
||||
.doc-content h3 {
|
||||
font-size: 1.25rem;
|
||||
}
|
||||
|
||||
.doc-content p,
|
||||
.doc-content ul,
|
||||
.doc-content ol,
|
||||
.doc-content blockquote,
|
||||
.doc-content pre {
|
||||
margin: 0 0 1rem;
|
||||
}
|
||||
|
||||
.doc-content code {
|
||||
background: #f1f5f9;
|
||||
border-radius: .4375rem;
|
||||
padding: .14rem .32rem;
|
||||
font-size: .92em;
|
||||
}
|
||||
|
||||
html.dark .doc-content code {
|
||||
background: #1e293b;
|
||||
color: #e2e8f0;
|
||||
}
|
||||
|
||||
.doc-content pre {
|
||||
overflow-x: auto;
|
||||
background: #0f172a;
|
||||
color: #e2e8f0;
|
||||
border-radius: 1rem;
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
.doc-content pre code {
|
||||
background: transparent;
|
||||
color: inherit;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.doc-content blockquote {
|
||||
border-left: 4px solid #2563eb;
|
||||
padding-left: 1rem;
|
||||
color: var(--doc-muted);
|
||||
}
|
||||
|
||||
.doc-content table {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
margin: 1rem 0;
|
||||
}
|
||||
|
||||
.doc-content th,
|
||||
.doc-content td {
|
||||
border: 1px solid var(--doc-line);
|
||||
padding: .625rem .75rem;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.doc-muted {
|
||||
color: var(--doc-muted);
|
||||
}
|
||||
|
||||
.doc-attachment-list {
|
||||
display: grid;
|
||||
gap: .625rem;
|
||||
}
|
||||
|
||||
.doc-attachment-item {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
gap: .875rem;
|
||||
border: 1px solid var(--doc-line);
|
||||
border-radius: .875rem;
|
||||
padding: .75rem .875rem;
|
||||
background: var(--doc-panel);
|
||||
}
|
||||
|
||||
@media (min-width: 1024px) {
|
||||
.doc-hero-row {
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 860px) {
|
||||
.doc-grid.stats {
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
}
|
||||
|
||||
.doc-filter,
|
||||
.doc-form-grid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.doc-table {
|
||||
display: block;
|
||||
overflow-x: auto;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 560px) {
|
||||
.doc-grid.stats {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.doc-hero {
|
||||
padding: 1.375rem;
|
||||
border-radius: 1.375rem;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
<div class="mx-auto max-w-[1800px] space-y-6" dusk="documentation-module">
|
||||
@yield('content')
|
||||
</div>
|
||||
|
||||
<script>
|
||||
document.addEventListener('click', function(event) {
|
||||
const button = event.target.closest('[data-md-before]');
|
||||
|
||||
if (!button) {
|
||||
return;
|
||||
}
|
||||
|
||||
const editor = button.closest('[data-documentation-editor]');
|
||||
const textarea = editor ? editor.querySelector('[data-markdown-textarea]') : null;
|
||||
|
||||
if (!textarea) {
|
||||
return;
|
||||
}
|
||||
|
||||
const before = button.getAttribute('data-md-before') || '';
|
||||
const after = button.getAttribute('data-md-after') || '';
|
||||
const start = textarea.selectionStart || 0;
|
||||
const end = textarea.selectionEnd || 0;
|
||||
const selected = textarea.value.substring(start, end);
|
||||
const replacement = before + selected + after;
|
||||
|
||||
textarea.setRangeText(replacement, start, end, 'end');
|
||||
textarea.focus();
|
||||
});
|
||||
</script>
|
||||
</x-layouts.app>
|
||||
@@ -0,0 +1,61 @@
|
||||
@csrf
|
||||
@if ($category->exists)
|
||||
@method('PUT')
|
||||
@endif
|
||||
<div class="doc-form-grid">
|
||||
<div class="doc-field">
|
||||
<label class="doc-label" for="name">Name</label>
|
||||
<input class="doc-input" id="name" name="name" value="{{ old('name', $category->name) }}" required
|
||||
maxlength="150">
|
||||
@error('name')
|
||||
<div class="doc-error">{{ $message }}</div>
|
||||
@enderror
|
||||
</div>
|
||||
<div class="doc-field">
|
||||
<label class="doc-label" for="slug">Slug</label>
|
||||
<input class="doc-input" id="slug" name="slug" value="{{ old('slug', $category->slug) }}"
|
||||
maxlength="180" placeholder="Auto-generated when blank">
|
||||
@error('slug')
|
||||
<div class="doc-error">{{ $message }}</div>
|
||||
@enderror
|
||||
</div>
|
||||
<div class="doc-field">
|
||||
<label class="doc-label" for="icon">Icon</label>
|
||||
<input class="doc-input" id="icon" name="icon" value="{{ old('icon', $category->icon) }}" maxlength="80"
|
||||
placeholder="book-open, file-check, shield">
|
||||
@error('icon')
|
||||
<div class="doc-error">{{ $message }}</div>
|
||||
@enderror
|
||||
</div>
|
||||
<div class="doc-field">
|
||||
<label class="doc-label" for="colour">Colour</label>
|
||||
<input class="doc-input" id="colour" name="colour"
|
||||
value="{{ old('colour', $category->colour ?: 'emerald') }}" required maxlength="32">
|
||||
@error('colour')
|
||||
<div class="doc-error">{{ $message }}</div>
|
||||
@enderror
|
||||
</div>
|
||||
<div class="doc-field">
|
||||
<label class="doc-label" for="sort_order">Sort order</label>
|
||||
<input class="doc-input" id="sort_order" name="sort_order" type="number" min="0"
|
||||
value="{{ old('sort_order', $category->sort_order ?: 0) }}">
|
||||
@error('sort_order')
|
||||
<div class="doc-error">{{ $message }}</div>
|
||||
@enderror
|
||||
</div>
|
||||
<div class="doc-field" style="display:flex;align-items:end;">
|
||||
<label><input type="checkbox" name="is_active" value="1" @checked(old('is_active', $category->is_active ?? true))> Active
|
||||
category</label>
|
||||
</div>
|
||||
<div class="doc-field full">
|
||||
<label class="doc-label" for="description">Description</label>
|
||||
<textarea class="doc-textarea" id="description" name="description" style="min-height:140px;">{{ old('description', $category->description) }}</textarea>
|
||||
@error('description')
|
||||
<div class="doc-error">{{ $message }}</div>
|
||||
@enderror
|
||||
</div>
|
||||
</div>
|
||||
<div class="doc-actions" style="margin-top:22px;">
|
||||
<button class="doc-button success" type="submit">Save category</button>
|
||||
<a class="doc-button warning" href="{{ route('documentation.categories.index') }}">Cancel</a>
|
||||
</div>
|
||||
@@ -0,0 +1,147 @@
|
||||
@csrf
|
||||
@if ($document->exists)
|
||||
@method('PUT')
|
||||
@endif
|
||||
|
||||
<div class="doc-form-grid">
|
||||
<div class="doc-field">
|
||||
<label class="doc-label" for="title">Title</label>
|
||||
<input class="doc-input" id="title" name="title" value="{{ old('title', $document->title) }}" required
|
||||
maxlength="220">
|
||||
@error('title')
|
||||
<div class="doc-error">{{ $message }}</div>
|
||||
@enderror
|
||||
</div>
|
||||
<div class="doc-field">
|
||||
<label class="doc-label" for="slug">Slug</label>
|
||||
<input class="doc-input" id="slug" name="slug" value="{{ old('slug', $document->slug) }}"
|
||||
maxlength="240" placeholder="Auto-generated when blank">
|
||||
@error('slug')
|
||||
<div class="doc-error">{{ $message }}</div>
|
||||
@enderror
|
||||
</div>
|
||||
<div class="doc-field">
|
||||
<label class="doc-label" for="documentation_category_id">Category</label>
|
||||
<select class="doc-select" id="documentation_category_id" name="documentation_category_id">
|
||||
<option value="">No category</option>
|
||||
@foreach ($categories as $category)
|
||||
<option value="{{ $category->id }}" @selected((string) old('documentation_category_id', $document->documentation_category_id) === (string) $category->id)>{{ $category->name }}</option>
|
||||
@endforeach
|
||||
</select>
|
||||
@error('documentation_category_id')
|
||||
<div class="doc-error">{{ $message }}</div>
|
||||
@enderror
|
||||
</div>
|
||||
<div class="doc-field">
|
||||
<label class="doc-label" for="status">Status</label>
|
||||
<select class="doc-select" id="status" name="status" required>
|
||||
@foreach ($statuses as $value => $label)
|
||||
<option value="{{ $value }}" @selected(old('status', $document->status) === $value)>{{ $label }}</option>
|
||||
@endforeach
|
||||
</select>
|
||||
@error('status')
|
||||
<div class="doc-error">{{ $message }}</div>
|
||||
@enderror
|
||||
</div>
|
||||
<div class="doc-field">
|
||||
<label class="doc-label" for="version">Version</label>
|
||||
<input class="doc-input" id="version" name="version"
|
||||
value="{{ old('version', $document->version ?: '1.0.0') }}" required maxlength="50">
|
||||
@error('version')
|
||||
<div class="doc-error">{{ $message }}</div>
|
||||
@enderror
|
||||
</div>
|
||||
<div class="doc-field">
|
||||
<label class="doc-label" for="reference">Reference</label>
|
||||
<input class="doc-input" id="reference" name="reference" value="{{ old('reference', $document->reference) }}"
|
||||
maxlength="100" placeholder="SOP-001, POL-002, etc.">
|
||||
@error('reference')
|
||||
<div class="doc-error">{{ $message }}</div>
|
||||
@enderror
|
||||
</div>
|
||||
<div class="doc-field full">
|
||||
<label class="doc-label" for="summary">Summary</label>
|
||||
<input class="doc-input" id="summary" name="summary" value="{{ old('summary', $document->summary) }}"
|
||||
maxlength="500">
|
||||
@error('summary')
|
||||
<div class="doc-error">{{ $message }}</div>
|
||||
@enderror
|
||||
</div>
|
||||
<div class="doc-field full">
|
||||
<label class="doc-label" for="body">Document body</label>
|
||||
<div class="doc-editor" data-documentation-editor>
|
||||
<div class="doc-editor-toolbar" aria-label="Markdown editor controls">
|
||||
<button type="button" data-md-before="## " data-md-after="" title="Heading">H2</button>
|
||||
<button type="button" data-md-before="**" data-md-after="**" title="Bold"><strong>B</strong></button>
|
||||
<button type="button" data-md-before="_" data-md-after="_" title="Italic"><em>I</em></button>
|
||||
<button type="button" data-md-before="> " data-md-after="" title="Quote">Quote</button>
|
||||
<button type="button" data-md-before="- " data-md-after="" title="Bullet list">List</button>
|
||||
<button type="button" data-md-before="1. " data-md-after="" title="Numbered list">1.</button>
|
||||
<button type="button" data-md-before="[" data-md-after="](https://)" title="Link">Link</button>
|
||||
<button type="button" data-md-before="`" data-md-after="`" title="Inline code">Code</button>
|
||||
<button type="button" data-md-before="```php " data-md-after=" ```" title="Code block">Code
|
||||
block</button>
|
||||
<button type="button" data-md-before="| Column | Column | | --- | --- | | Value | Value |"
|
||||
data-md-after="" title="Table">Table</button>
|
||||
</div>
|
||||
<textarea class="doc-textarea" id="body" name="body" data-markdown-textarea>{{ old('body', $document->body) }}</textarea>
|
||||
<p class="doc-muted editor-help">Markdown is supported, including fenced code blocks such as
|
||||
<code>```php</code>, tables, lists, links, and headings.
|
||||
</p>
|
||||
</div>
|
||||
@error('body')
|
||||
<div class="doc-error">{{ $message }}</div>
|
||||
@enderror
|
||||
</div>
|
||||
<div class="doc-field full">
|
||||
<label class="doc-label" for="attachment">Primary attachment</label>
|
||||
<input class="doc-input" id="attachment" name="attachment" type="file">
|
||||
<p class="doc-muted">Primary Markdown files can be imported into the document body when the body is blank.</p>
|
||||
@if ($document->attachment_name)
|
||||
<p class="doc-muted">Current primary file: <a class="doc-link"
|
||||
href="{{ route('documentation.documents.download', $document) }}">{{ $document->attachment_name }}</a>
|
||||
</p>
|
||||
<label><input type="checkbox" name="remove_attachment" value="1"> Remove current primary
|
||||
attachment</label>
|
||||
@endif
|
||||
@error('attachment')
|
||||
<div class="doc-error">{{ $message }}</div>
|
||||
@enderror
|
||||
</div>
|
||||
<div class="doc-field full">
|
||||
<label class="doc-label" for="attachments">Additional attachments</label>
|
||||
<input class="doc-input" id="attachments" name="attachments[]" type="file" multiple>
|
||||
<p class="doc-muted">Attach supporting files such as PDFs, screenshots, spreadsheets, Word documents, Markdown,
|
||||
CSV, and images.</p>
|
||||
@error('attachments')
|
||||
<div class="doc-error">{{ $message }}</div>
|
||||
@enderror
|
||||
@error('attachments.*')
|
||||
<div class="doc-error">{{ $message }}</div>
|
||||
@enderror
|
||||
|
||||
@if ($document->exists && $document->attachments->isNotEmpty())
|
||||
<div class="doc-attachment-list" style="margin-top: 14px;">
|
||||
@foreach ($document->attachments as $attachment)
|
||||
<div class="doc-attachment-item">
|
||||
<div>
|
||||
<a class="doc-link"
|
||||
href="{{ route('documentation.documents.attachments.download', [$document, $attachment]) }}">{{ $attachment->original_name }}</a>
|
||||
<span class="doc-muted">{{ $attachment->size_label }}</span>
|
||||
</div>
|
||||
<button class="doc-button danger" type="submit"
|
||||
form="delete-attachment-{{ $attachment->id }}">Remove</button>
|
||||
</div>
|
||||
@endforeach
|
||||
</div>
|
||||
@endif
|
||||
</div>
|
||||
<div class="doc-field full">
|
||||
<label><input type="checkbox" name="is_featured" value="1" @checked(old('is_featured', $document->is_featured))> Feature this
|
||||
document on the dashboard</label>
|
||||
</div>
|
||||
</div>
|
||||
<div class="doc-actions" style="margin-top:22px;">
|
||||
<button class="doc-button success" type="submit">Save document</button>
|
||||
<a class="doc-button warning" href="{{ route('documentation.documents.index') }}">Cancel</a>
|
||||
</div>
|
||||
@@ -0,0 +1,21 @@
|
||||
<section class="doc-hero-wrap">
|
||||
<div class="doc-hero">
|
||||
<div class="doc-hero-row">
|
||||
<div>
|
||||
<p class="doc-eyebrow">{{ $eyebrow ?? 'Documentation workflow' }}</p>
|
||||
<h1>{{ $title ?? 'Documentation' }}</h1>
|
||||
<p>{{ $subtitle ?? 'Manage controlled documents, policies, guides, files, and operational knowledge in one professional workspace.' }}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="doc-actions">
|
||||
<a class="doc-button success" href="{{ route('documentation.documents.create') }}" wire:navigate>Create
|
||||
document</a>
|
||||
<a class="doc-button category" href="{{ route('documentation.categories.index') }}" wire:navigate>Manage
|
||||
categories</a>
|
||||
<a class="doc-button register" href="{{ route('documentation.documents.index') }}" wire:navigate>Document
|
||||
register</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
Reference in New Issue
Block a user