Document details: two-column layout (category/vendor/amount | date/processed/filename)

This commit is contained in:
James 2026-02-10 04:06:59 -05:00
parent 9c9bd5e881
commit a52ab6e20d
1 changed files with 49 additions and 43 deletions

View File

@ -58,49 +58,55 @@
<h2 class="font-semibold text-gray-900 dark:text-white">Details</h2> <h2 class="font-semibold text-gray-900 dark:text-white">Details</h2>
</div> </div>
<div class="p-6"> <div class="p-6">
<dl class="grid grid-cols-2 gap-4"> <div class="grid grid-cols-2 gap-x-8 gap-y-4">
<div> <!-- Left column -->
<dt class="text-sm text-gray-500 dark:text-gray-400">Category</dt> <dl class="space-y-4">
<dd class="mt-1"> <div>
<select onchange="inlineUpdateCategory(this.value)" <dt class="text-sm text-gray-500 dark:text-gray-400">Category</dt>
class="font-medium text-gray-900 dark:text-white bg-gray-100 dark:bg-gray-700 rounded-lg px-2 py-1 border-0 cursor-pointer hover:bg-gray-200 dark:hover:bg-gray-600 text-sm"> <dd class="mt-1">
{{range .Categories}} <select onchange="inlineUpdateCategory(this.value)"
<option value="{{.}}" {{if eq . $.Document.Category}}selected{{end}}>{{categoryIcon .}} {{title .}}</option> class="font-medium text-gray-900 dark:text-white bg-gray-100 dark:bg-gray-700 rounded-lg px-2 py-1 border-0 cursor-pointer hover:bg-gray-200 dark:hover:bg-gray-600 text-sm">
{{end}} {{range .Categories}}
</select> <option value="{{.}}" {{if eq . $.Document.Category}}selected{{end}}>{{categoryIcon .}} {{title .}}</option>
</dd> {{end}}
</div> </select>
{{if .Document.Date}} </dd>
<div> </div>
<dt class="text-sm text-gray-500 dark:text-gray-400">Date</dt> {{if .Document.Vendor}}
<dd class="mt-1 font-medium text-gray-900 dark:text-white">{{formatDate .Document.Date}}</dd> <div>
</div> <dt class="text-sm text-gray-500 dark:text-gray-400">Vendor</dt>
{{end}} <dd class="mt-1 font-medium text-gray-900 dark:text-white">{{.Document.Vendor}}</dd>
{{if .Document.Amount}} </div>
<div> {{end}}
<dt class="text-sm text-gray-500 dark:text-gray-400">Amount</dt> {{if .Document.Amount}}
<dd class="mt-1 font-medium text-gray-900 dark:text-white">{{.Document.Amount}}</dd> <div>
</div> <dt class="text-sm text-gray-500 dark:text-gray-400">Amount</dt>
{{end}} <dd class="mt-1 font-medium text-gray-900 dark:text-white">{{.Document.Amount}}</dd>
{{if .Document.Vendor}} </div>
<div> {{end}}
<dt class="text-sm text-gray-500 dark:text-gray-400">Vendor</dt> </dl>
<dd class="mt-1 font-medium text-gray-900 dark:text-white">{{.Document.Vendor}}</dd> <!-- Right column -->
</div> <dl class="space-y-4">
{{end}} {{if .Document.Date}}
{{if .Document.ProcessedAt}} <div>
<div> <dt class="text-sm text-gray-500 dark:text-gray-400">Date</dt>
<dt class="text-sm text-gray-500 dark:text-gray-400">Processed</dt> <dd class="mt-1 font-medium text-gray-900 dark:text-white">{{formatDate .Document.Date}}</dd>
<dd class="mt-1 font-medium text-gray-900 dark:text-white">{{formatDateTime .Document.ProcessedAt}}</dd> </div>
</div> {{end}}
{{end}} {{if .Document.ProcessedAt}}
{{if .Document.OriginalFile}} <div>
<div class="col-span-2"> <dt class="text-sm text-gray-500 dark:text-gray-400">Processed</dt>
<dt class="text-sm text-gray-500 dark:text-gray-400">Original File</dt> <dd class="mt-1 font-medium text-gray-900 dark:text-white">{{formatDateTime .Document.ProcessedAt}}</dd>
<dd class="mt-1 font-medium text-gray-900 dark:text-white truncate">{{.Document.OriginalFile}}</dd> </div>
</div> {{end}}
{{end}} {{if .Document.OriginalFile}}
</dl> <div>
<dt class="text-sm text-gray-500 dark:text-gray-400">Original File</dt>
<dd class="mt-1 font-medium text-gray-900 dark:text-white truncate">{{.Document.OriginalFile}}</dd>
</div>
{{end}}
</dl>
</div>
</div> </div>
</div> </div>