add htmx web frontend with templates and session auth
This commit is contained in:
162
portal/internal/web/templates/pages/app_detail.html
Normal file
162
portal/internal/web/templates/pages/app_detail.html
Normal file
@@ -0,0 +1,162 @@
|
||||
{{define "content"}}
|
||||
<div class="mb-6">
|
||||
<a href="/dashboard" class="inline-flex items-center text-sm text-gray-500 hover:text-gray-700">
|
||||
<svg class="w-4 h-4 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"/>
|
||||
</svg>
|
||||
Back to Dashboard
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<!-- App Header -->
|
||||
<div class="bg-white rounded-lg shadow-sm border border-gray-200 p-6 mb-6">
|
||||
<div class="flex items-start justify-between">
|
||||
<div class="flex items-center space-x-4">
|
||||
<div class="w-16 h-16 bg-gray-100 rounded-xl flex items-center justify-center">
|
||||
<svg class="w-8 h-8 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2H6a2 2 0 01-2-2V6zM14 6a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2h-2a2 2 0 01-2-2V6zM4 16a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2H6a2 2 0 01-2-2v-2zM14 16a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2h-2a2 2 0 01-2-2v-2z"/>
|
||||
</svg>
|
||||
</div>
|
||||
<div>
|
||||
<h1 class="text-2xl font-bold text-gray-900">{{.App.Name}}</h1>
|
||||
<p class="text-gray-500">{{.App.PackageID}}</p>
|
||||
<div class="mt-2">
|
||||
{{if eq .App.Status "published"}}
|
||||
<span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-green-100 text-green-800">
|
||||
<span class="w-1.5 h-1.5 mr-1.5 bg-green-400 rounded-full"></span>
|
||||
Published
|
||||
</span>
|
||||
{{else if eq .App.Status "draft"}}
|
||||
<span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-gray-100 text-gray-800">
|
||||
<span class="w-1.5 h-1.5 mr-1.5 bg-gray-400 rounded-full"></span>
|
||||
Draft
|
||||
</span>
|
||||
{{else if eq .App.Status "review"}}
|
||||
<span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-yellow-100 text-yellow-800">
|
||||
<span class="w-1.5 h-1.5 mr-1.5 bg-yellow-400 rounded-full"></span>
|
||||
In Review
|
||||
</span>
|
||||
{{end}}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<a href="/apps/{{.App.ID}}/versions/new" class="inline-flex items-center px-4 py-2 bg-indigo-600 text-white text-sm font-medium rounded-lg hover:bg-indigo-700 transition-colors">
|
||||
<svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-8l-4-4m0 0L8 8m4-4v12"/>
|
||||
</svg>
|
||||
Submit New Version
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Tabs -->
|
||||
<div class="border-b border-gray-200 mb-6">
|
||||
<nav class="-mb-px flex space-x-8">
|
||||
<a href="/apps/{{.App.ID}}" class="{{if eq .Tab "overview"}}border-indigo-500 text-indigo-600{{else}}border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300{{end}} whitespace-nowrap py-4 px-1 border-b-2 font-medium text-sm">
|
||||
Overview
|
||||
</a>
|
||||
<a href="/apps/{{.App.ID}}/versions" class="{{if eq .Tab "versions"}}border-indigo-500 text-indigo-600{{else}}border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300{{end}} whitespace-nowrap py-4 px-1 border-b-2 font-medium text-sm">
|
||||
Versions
|
||||
</a>
|
||||
<a href="/apps/{{.App.ID}}/analytics" class="{{if eq .Tab "analytics"}}border-indigo-500 text-indigo-600{{else}}border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300{{end}} whitespace-nowrap py-4 px-1 border-b-2 font-medium text-sm">
|
||||
Analytics
|
||||
</a>
|
||||
<a href="/apps/{{.App.ID}}/settings" class="{{if eq .Tab "settings"}}border-indigo-500 text-indigo-600{{else}}border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300{{end}} whitespace-nowrap py-4 px-1 border-b-2 font-medium text-sm">
|
||||
Settings
|
||||
</a>
|
||||
</nav>
|
||||
</div>
|
||||
|
||||
<!-- Tab Content -->
|
||||
{{block "tab_content" .}}
|
||||
<!-- Overview Tab (default) -->
|
||||
<div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
|
||||
<!-- Left Column -->
|
||||
<div class="lg:col-span-2 space-y-6">
|
||||
<!-- Latest Version -->
|
||||
<div class="bg-white rounded-lg shadow-sm border border-gray-200 p-6">
|
||||
<h2 class="text-lg font-semibold text-gray-900 mb-4">Latest Version</h2>
|
||||
{{if .LatestVersion}}
|
||||
<div class="flex items-center justify-between">
|
||||
<div>
|
||||
<p class="text-2xl font-bold text-gray-900">{{.LatestVersion.VersionName}}</p>
|
||||
<p class="text-sm text-gray-500">Version code: {{.LatestVersion.VersionCode}}</p>
|
||||
</div>
|
||||
<div class="text-right">
|
||||
{{if .LatestVersion.PublishedAt}}
|
||||
<p class="text-sm text-gray-500">Published</p>
|
||||
<p class="text-sm text-gray-700">{{.LatestVersion.PublishedAt.Format "Jan 2, 2006"}}</p>
|
||||
{{else}}
|
||||
<span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-gray-100 text-gray-800">
|
||||
{{.LatestVersion.Status}}
|
||||
</span>
|
||||
{{end}}
|
||||
</div>
|
||||
</div>
|
||||
{{else}}
|
||||
<p class="text-gray-500">No versions uploaded yet.</p>
|
||||
<a href="/apps/{{.App.ID}}/versions/new" class="inline-flex items-center mt-4 text-indigo-600 hover:text-indigo-700">
|
||||
Upload your first version
|
||||
<svg class="w-4 h-4 ml-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/>
|
||||
</svg>
|
||||
</a>
|
||||
{{end}}
|
||||
</div>
|
||||
|
||||
<!-- Description -->
|
||||
<div class="bg-white rounded-lg shadow-sm border border-gray-200 p-6">
|
||||
<h2 class="text-lg font-semibold text-gray-900 mb-4">Description</h2>
|
||||
{{if .App.Description}}
|
||||
<p class="text-gray-700">{{.App.Description}}</p>
|
||||
{{else}}
|
||||
<p class="text-gray-500">No description provided.</p>
|
||||
{{end}}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Right Column -->
|
||||
<div class="space-y-6">
|
||||
<!-- Quick Stats -->
|
||||
<div class="bg-white rounded-lg shadow-sm border border-gray-200 p-6">
|
||||
<h2 class="text-lg font-semibold text-gray-900 mb-4">Statistics</h2>
|
||||
<dl class="space-y-4">
|
||||
<div class="flex justify-between">
|
||||
<dt class="text-sm text-gray-500">Downloads</dt>
|
||||
<dd class="text-sm font-medium text-gray-900">0</dd>
|
||||
</div>
|
||||
<div class="flex justify-between">
|
||||
<dt class="text-sm text-gray-500">Active Users</dt>
|
||||
<dd class="text-sm font-medium text-gray-900">0</dd>
|
||||
</div>
|
||||
<div class="flex justify-between">
|
||||
<dt class="text-sm text-gray-500">Total Versions</dt>
|
||||
<dd class="text-sm font-medium text-gray-900">{{.TotalVersions}}</dd>
|
||||
</div>
|
||||
</dl>
|
||||
</div>
|
||||
|
||||
<!-- App Info -->
|
||||
<div class="bg-white rounded-lg shadow-sm border border-gray-200 p-6">
|
||||
<h2 class="text-lg font-semibold text-gray-900 mb-4">Information</h2>
|
||||
<dl class="space-y-4">
|
||||
{{if .App.Category}}
|
||||
<div class="flex justify-between">
|
||||
<dt class="text-sm text-gray-500">Category</dt>
|
||||
<dd class="text-sm font-medium text-gray-900">{{.App.Category}}</dd>
|
||||
</div>
|
||||
{{end}}
|
||||
<div class="flex justify-between">
|
||||
<dt class="text-sm text-gray-500">Created</dt>
|
||||
<dd class="text-sm font-medium text-gray-900">{{.App.CreatedAt.Format "Jan 2, 2006"}}</dd>
|
||||
</div>
|
||||
<div class="flex justify-between">
|
||||
<dt class="text-sm text-gray-500">Updated</dt>
|
||||
<dd class="text-sm font-medium text-gray-900">{{.App.UpdatedAt.Format "Jan 2, 2006"}}</dd>
|
||||
</div>
|
||||
</dl>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{{end}}
|
||||
{{end}}
|
||||
Reference in New Issue
Block a user