refactor finance.
This commit is contained in:
Chris Chen
@@ -65,47 +65,7 @@
|
||||
</div>
|
||||
|
||||
<!-- Recent Transactions -->
|
||||
<div class="section">
|
||||
<div class="section-header">
|
||||
<h2>Recent Transactions</h2>
|
||||
</div>
|
||||
|
||||
<div class="transactions-list">
|
||||
<!-- Transactions List -->
|
||||
<div *ngIf="recentTransactions.length > 0">
|
||||
<div *ngFor="let transaction of recentTransactions" class="transaction-card">
|
||||
<div class="transaction-header">
|
||||
<div class="transaction-title">{{ transaction.title }}</div>
|
||||
<div class="transaction-status" [class]="transaction.status">
|
||||
{{ transaction.statusLabel }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="transaction-details">
|
||||
<div class="transaction-amount">${{ transaction.amount | number:'1.0-0' }}</div>
|
||||
<div class="transaction-date">{{ transaction.date | date:'MMM d, y' }}</div>
|
||||
</div>
|
||||
<div class="transaction-progress">
|
||||
<div class="progress-bar">
|
||||
<div class="progress-fill" [style.width.%]="transaction.progress"></div>
|
||||
</div>
|
||||
<span class="progress-text">{{ transaction.progress }}% Complete</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Empty State -->
|
||||
<div *ngIf="recentTransactions.length === 0" class="empty-state">
|
||||
<div class="empty-icon">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||
<path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path>
|
||||
<polyline points="14,2 14,8 20,8"></polyline>
|
||||
</svg>
|
||||
</div>
|
||||
<h3>No Recent Transactions</h3>
|
||||
<p>You don't have any recent transactions yet.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Quick Actions -->
|
||||
<div class="section">
|
||||
|
||||
@@ -142,7 +142,7 @@
|
||||
|
||||
<div class="header-right">
|
||||
<div class="header-actions">
|
||||
<button class="action-btn" title="Notifications">
|
||||
<!-- <button class="action-btn" title="Notifications">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||
<path d="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9"></path>
|
||||
<path d="M13.73 21a2 2 0 0 1-3.46 0"></path>
|
||||
@@ -156,7 +156,7 @@
|
||||
<circle cx="11" cy="11" r="8"></circle>
|
||||
<path d="M21 21l-4.35-4.35"></path>
|
||||
</svg>
|
||||
</button>
|
||||
</button> -->
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
@@ -2,7 +2,26 @@ import { Component, OnInit, OnDestroy, HostListener } from '@angular/core';
|
||||
import { CommonModule } from '@angular/common';
|
||||
import { Router, NavigationEnd, RouterModule, RouterOutlet } from '@angular/router';
|
||||
import { IconsModule } from '@progress/kendo-angular-icons';
|
||||
import { SVGIcon, homeIcon, calendarIcon, userIcon, groupIcon } from '@progress/kendo-svg-icons';
|
||||
import {
|
||||
SVGIcon,
|
||||
homeIcon,
|
||||
calendarIcon,
|
||||
userIcon,
|
||||
groupIcon,
|
||||
usersOutlineIcon,
|
||||
bedOutlineIcon,
|
||||
pillsOutlineIcon,
|
||||
graphIcon,
|
||||
buildingsOutlineIcon,
|
||||
banknoteOutlineIcon,
|
||||
questionCircleIcon,
|
||||
dollarIcon,
|
||||
categorizeIcon,
|
||||
moneyExchangeIcon,
|
||||
fileReportIcon,
|
||||
walletOutlineIcon,
|
||||
handIcon,
|
||||
} from '@progress/kendo-svg-icons';
|
||||
import { AuthService, UserInfo } from '../../shared/services/auth.service';
|
||||
import { Subject, takeUntil, filter } from 'rxjs';
|
||||
|
||||
@@ -35,14 +54,14 @@ export class UserPortalComponent implements OnInit, OnDestroy {
|
||||
|
||||
public homeIcon: SVGIcon = homeIcon;
|
||||
public calendarIcon: SVGIcon = calendarIcon;
|
||||
public peopleIcon: SVGIcon = userIcon;
|
||||
public bedIcon: SVGIcon = userIcon;
|
||||
public peopleIcon: SVGIcon = usersOutlineIcon;
|
||||
public bedIcon: SVGIcon = bedOutlineIcon;
|
||||
public userIcon: SVGIcon = userIcon;
|
||||
public pillIcon: SVGIcon = userIcon;
|
||||
public chartIcon: SVGIcon = userIcon;
|
||||
public buildingIcon: SVGIcon = userIcon;
|
||||
public creditCardIcon: SVGIcon = userIcon;
|
||||
public supportIcon: SVGIcon = userIcon;
|
||||
public pillIcon: SVGIcon = pillsOutlineIcon;
|
||||
public chartIcon: SVGIcon = graphIcon;
|
||||
public buildingIcon: SVGIcon = buildingsOutlineIcon;
|
||||
public creditCardIcon: SVGIcon = banknoteOutlineIcon;
|
||||
public supportIcon: SVGIcon = questionCircleIcon;
|
||||
|
||||
public mainNavItems: NavItem[] = [
|
||||
{ text: 'Dashboard', icon: this.homeIcon, path: '/user-portal/dashboard' },
|
||||
@@ -71,16 +90,17 @@ export class UserPortalComponent implements OnInit, OnDestroy {
|
||||
];
|
||||
|
||||
public financeNavItems: NavItem[] = [
|
||||
{ text: 'Offering Entry', icon: this.creditCardIcon, path: '/user-portal/finance/offering-session' },
|
||||
{ text: 'Givings', icon: this.creditCardIcon, path: '/user-portal/finance/givings' },
|
||||
{ text: 'Giving Types', icon: this.creditCardIcon, path: '/user-portal/finance/giving-categories' },
|
||||
{ text: 'Expenses', icon: this.creditCardIcon, path: '/user-portal/finance/expenses' },
|
||||
{ text: 'Expense Categories', icon: this.creditCardIcon, path: '/user-portal/finance/expense-categories' },
|
||||
{ text: 'Monthly Statement', icon: this.creditCardIcon, path: '/user-portal/finance/monthly-statement' },
|
||||
{ text: 'Finance Dashboard', icon: graphIcon, path: '/user-portal/finance/dashboard' },
|
||||
{ text: 'Offering Entry', icon: handIcon, path: '/user-portal/finance/offering-session' },
|
||||
{ text: 'Givings', icon: dollarIcon, path: '/user-portal/finance/givings' },
|
||||
{ text: 'Giving Types', icon: categorizeIcon, path: '/user-portal/finance/giving-categories' },
|
||||
{ text: 'Expenses', icon: moneyExchangeIcon, path: '/user-portal/finance/expenses' },
|
||||
{ text: 'Expense Categories', icon: categorizeIcon, path: '/user-portal/finance/expense-categories' },
|
||||
{ text: 'Monthly Statement', icon: fileReportIcon, path: '/user-portal/finance/monthly-statement' },
|
||||
];
|
||||
|
||||
public personalNavItems: NavItem[] = [
|
||||
{ text: 'My Reimbursements', icon: this.creditCardIcon, path: '/user-portal/reimbursements' },
|
||||
{ text: 'My Reimbursements', icon: walletOutlineIcon, path: '/user-portal/reimbursements' },
|
||||
];
|
||||
|
||||
public showMemberAdminSection = false;
|
||||
@@ -199,6 +219,7 @@ export class UserPortalComponent implements OnInit, OnDestroy {
|
||||
'settings': 'Settings',
|
||||
'admin/members': 'Member Management',
|
||||
'admin/users': 'User Management',
|
||||
'finance/dashboard': 'Finance Dashboard',
|
||||
'finance/offering-session': 'Sunday Offering Entry',
|
||||
'finance/givings': 'Givings',
|
||||
'finance/giving-categories': 'Giving Types',
|
||||
|
||||
Reference in New Issue
Block a user