Chris Chen
18b9707e44
Standalone Angular component (Kendo Grid + ExpenseFormDialog) that lets any logged-in user list, create, submit, and delete their own draft reimbursements, with optional receipt upload. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
42 lines
1.8 KiB
HTML
42 lines
1.8 KiB
HTML
<div class="page">
|
|
<header class="page-header">
|
|
<h2>My Reimbursements</h2>
|
|
<button kendoButton themeColor="primary" (click)="openNew()">+ New Reimbursement</button>
|
|
</header>
|
|
|
|
<kendo-grid [data]="rows" [loading]="loading">
|
|
<kendo-grid-column field="expenseDate" title="Date" [width]="110"></kendo-grid-column>
|
|
<kendo-grid-column field="description" title="Description"></kendo-grid-column>
|
|
<kendo-grid-column field="ministryName" title="Ministry" [width]="140"></kendo-grid-column>
|
|
<kendo-grid-column title="Category">
|
|
<ng-template kendoGridCellTemplate let-dataItem>
|
|
{{ dataItem.categoryGroupName }} / {{ dataItem.subCategoryName }}
|
|
</ng-template>
|
|
</kendo-grid-column>
|
|
<kendo-grid-column field="amount" title="Amount" [width]="110" format="c2"></kendo-grid-column>
|
|
<kendo-grid-column title="Status" [width]="140">
|
|
<ng-template kendoGridCellTemplate let-dataItem>
|
|
<span [class]="statusClass(dataItem.status)">{{ dataItem.status }}</span>
|
|
</ng-template>
|
|
</kendo-grid-column>
|
|
<kendo-grid-column title="Actions" [width]="200">
|
|
<ng-template kendoGridCellTemplate let-dataItem>
|
|
<ng-container *ngIf="canEdit(dataItem)">
|
|
<button kendoButton themeColor="primary" fillMode="flat" (click)="submit(dataItem)">Submit</button>
|
|
<button kendoButton fillMode="flat"
|
|
(click)="confirm('Delete this reimbursement?') && remove(dataItem)">Delete</button>
|
|
</ng-container>
|
|
<a *ngIf="dataItem.hasReceipt" [href]="receiptUrl(dataItem.id)" target="_blank" class="receipt-link">Receipt</a>
|
|
</ng-template>
|
|
</kendo-grid-column>
|
|
</kendo-grid>
|
|
|
|
<app-expense-form-dialog
|
|
*ngIf="dialogOpen"
|
|
mode="reimbursement"
|
|
title="New Reimbursement"
|
|
(save)="onSave($event)"
|
|
(cancel)="dialogOpen=false">
|
|
</app-expense-form-dialog>
|
|
</div>
|