Document details: two-column layout (category/vendor/amount | date/processed/filename)
This commit is contained in:
parent
9c9bd5e881
commit
a52ab6e20d
|
|
@ -58,49 +58,55 @@
|
|||
<h2 class="font-semibold text-gray-900 dark:text-white">Details</h2>
|
||||
</div>
|
||||
<div class="p-6">
|
||||
<dl class="grid grid-cols-2 gap-4">
|
||||
<div>
|
||||
<dt class="text-sm text-gray-500 dark:text-gray-400">Category</dt>
|
||||
<dd class="mt-1">
|
||||
<select onchange="inlineUpdateCategory(this.value)"
|
||||
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">
|
||||
{{range .Categories}}
|
||||
<option value="{{.}}" {{if eq . $.Document.Category}}selected{{end}}>{{categoryIcon .}} {{title .}}</option>
|
||||
{{end}}
|
||||
</select>
|
||||
</dd>
|
||||
</div>
|
||||
{{if .Document.Date}}
|
||||
<div>
|
||||
<dt class="text-sm text-gray-500 dark:text-gray-400">Date</dt>
|
||||
<dd class="mt-1 font-medium text-gray-900 dark:text-white">{{formatDate .Document.Date}}</dd>
|
||||
</div>
|
||||
{{end}}
|
||||
{{if .Document.Amount}}
|
||||
<div>
|
||||
<dt class="text-sm text-gray-500 dark:text-gray-400">Amount</dt>
|
||||
<dd class="mt-1 font-medium text-gray-900 dark:text-white">{{.Document.Amount}}</dd>
|
||||
</div>
|
||||
{{end}}
|
||||
{{if .Document.Vendor}}
|
||||
<div>
|
||||
<dt class="text-sm text-gray-500 dark:text-gray-400">Vendor</dt>
|
||||
<dd class="mt-1 font-medium text-gray-900 dark:text-white">{{.Document.Vendor}}</dd>
|
||||
</div>
|
||||
{{end}}
|
||||
{{if .Document.ProcessedAt}}
|
||||
<div>
|
||||
<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">{{formatDateTime .Document.ProcessedAt}}</dd>
|
||||
</div>
|
||||
{{end}}
|
||||
{{if .Document.OriginalFile}}
|
||||
<div class="col-span-2">
|
||||
<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 class="grid grid-cols-2 gap-x-8 gap-y-4">
|
||||
<!-- Left column -->
|
||||
<dl class="space-y-4">
|
||||
<div>
|
||||
<dt class="text-sm text-gray-500 dark:text-gray-400">Category</dt>
|
||||
<dd class="mt-1">
|
||||
<select onchange="inlineUpdateCategory(this.value)"
|
||||
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">
|
||||
{{range .Categories}}
|
||||
<option value="{{.}}" {{if eq . $.Document.Category}}selected{{end}}>{{categoryIcon .}} {{title .}}</option>
|
||||
{{end}}
|
||||
</select>
|
||||
</dd>
|
||||
</div>
|
||||
{{if .Document.Vendor}}
|
||||
<div>
|
||||
<dt class="text-sm text-gray-500 dark:text-gray-400">Vendor</dt>
|
||||
<dd class="mt-1 font-medium text-gray-900 dark:text-white">{{.Document.Vendor}}</dd>
|
||||
</div>
|
||||
{{end}}
|
||||
{{if .Document.Amount}}
|
||||
<div>
|
||||
<dt class="text-sm text-gray-500 dark:text-gray-400">Amount</dt>
|
||||
<dd class="mt-1 font-medium text-gray-900 dark:text-white">{{.Document.Amount}}</dd>
|
||||
</div>
|
||||
{{end}}
|
||||
</dl>
|
||||
<!-- Right column -->
|
||||
<dl class="space-y-4">
|
||||
{{if .Document.Date}}
|
||||
<div>
|
||||
<dt class="text-sm text-gray-500 dark:text-gray-400">Date</dt>
|
||||
<dd class="mt-1 font-medium text-gray-900 dark:text-white">{{formatDate .Document.Date}}</dd>
|
||||
</div>
|
||||
{{end}}
|
||||
{{if .Document.ProcessedAt}}
|
||||
<div>
|
||||
<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">{{formatDateTime .Document.ProcessedAt}}</dd>
|
||||
</div>
|
||||
{{end}}
|
||||
{{if .Document.OriginalFile}}
|
||||
<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>
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue