<div class="flex w-full flex-auto flex-col">
    <div class="mx-auto flex w-full max-w-screen-xl flex-wrap p-6 md:p-8">
        <!-- Title and action buttons -->
        <div class="flex w-full items-center justify-between">
            <div>
                <h2 class="text-3xl font-semibold leading-8 tracking-tight">
                    Finance dashboard
                </h2>
                <div class="text-secondary font-medium tracking-tight">
                    Keep track of your financial status
                </div>
            </div>
            <div class="ml-6 flex items-center">
                <button class="hidden sm:inline-flex" mat-stroked-button>
                    <mat-icon
                        class="icon-size-5"
                        [svgIcon]="'heroicons_solid:document-chart-bar'"
                    ></mat-icon>
                    <span class="ml-2">Reports</span>
                </button>
                <button class="ml-3 hidden sm:inline-flex" mat-stroked-button>
                    <mat-icon
                        class="icon-size-5"
                        [svgIcon]="'heroicons_solid:cog-8-tooth'"
                    ></mat-icon>
                    <span class="ml-2">Settings</span>
                </button>
                <button
                    class="ml-3 hidden sm:inline-flex"
                    mat-flat-button
                    [color]="'primary'"
                >
                    <mat-icon
                        class="icon-size-5"
                        [svgIcon]="'heroicons_solid:arrow-up-tray'"
                    ></mat-icon>
                    <span class="ml-2">Export</span>
                </button>

                <!-- Actions menu (visible on xs) -->
                <div class="sm:hidden">
                    <button [matMenuTriggerFor]="actionsMenu" mat-icon-button>
                        <mat-icon
                            [svgIcon]="'heroicons_mini:ellipsis-vertical'"
                        ></mat-icon>
                    </button>
                    <mat-menu #actionsMenu="matMenu">
                        <button mat-menu-item>Export</button>
                        <button mat-menu-item>Reports</button>
                        <button mat-menu-item>Settings</button>
                    </mat-menu>
                </div>
            </div>
        </div>

        <div class="mt-8 grid w-full grid-cols-1 gap-8 xl:grid-cols-2">
            <div class="grid gap-8 sm:grid-flow-col xl:grid-flow-row">
                <!-- Previous statement -->
                <div
                    class="bg-card relative flex flex-auto flex-col overflow-hidden rounded-2xl p-6 pb-3 pr-3 shadow"
                >
                    <div class="absolute bottom-0 right-0 -m-6 h-24 w-24">
                        <mat-icon
                            class="text-green-500 opacity-25 icon-size-24 dark:text-green-400"
                            [svgIcon]="'heroicons_outline:check-circle'"
                        ></mat-icon>
                    </div>
                    <div class="flex items-center">
                        <div class="flex flex-col">
                            <div
                                class="truncate text-lg font-medium leading-6 tracking-tight"
                            >
                                Previous Statement
                            </div>
                            <div class="text-sm font-medium text-green-600">
                                Paid on {{ data.previousStatement.date }}
                            </div>
                        </div>
                        <div class="-mt-2 ml-auto">
                            <button
                                mat-icon-button
                                [matMenuTriggerFor]="previousStatementMenu"
                            >
                                <mat-icon
                                    class="icon-size-5"
                                    [svgIcon]="
                                        'heroicons_mini:ellipsis-vertical'
                                    "
                                ></mat-icon>
                            </button>
                            <mat-menu #previousStatementMenu="matMenu">
                                <button mat-menu-item>
                                    <span class="flex items-center">
                                        <mat-icon
                                            class="mr-3 icon-size-5"
                                            [svgIcon]="
                                                'heroicons_solid:credit-card'
                                            "
                                        ></mat-icon>
                                        <span>View statement</span>
                                    </span>
                                </button>
                                <button mat-menu-item>
                                    <span class="flex items-center">
                                        <mat-icon
                                            class="mr-3 icon-size-5"
                                            [svgIcon]="
                                                'heroicons_solid:banknotes'
                                            "
                                        ></mat-icon>
                                        <span>Spending breakdown</span>
                                    </span>
                                </button>
                                <button mat-menu-item>
                                    <span class="flex items-center">
                                        <mat-icon
                                            class="mr-3 icon-size-5"
                                            [svgIcon]="
                                                'heroicons_solid:receipt-percent'
                                            "
                                        ></mat-icon>
                                        <span>Tax breakdown</span>
                                    </span>
                                </button>
                                <mat-divider class="my-2"></mat-divider>
                                <button mat-menu-item>
                                    <span class="flex items-center">
                                        <mat-icon
                                            class="mr-3 icon-size-5"
                                            [svgIcon]="
                                                'heroicons_solid:printer'
                                            "
                                        ></mat-icon>
                                        <span>Print statement</span>
                                    </span>
                                </button>
                                <button mat-menu-item>
                                    <span class="flex items-center">
                                        <mat-icon
                                            class="mr-3 icon-size-5"
                                            [svgIcon]="
                                                'heroicons_solid:envelope'
                                            "
                                        ></mat-icon>
                                        <span>Email statement</span>
                                    </span>
                                </button>
                            </mat-menu>
                        </div>
                    </div>
                    <div class="-mx-6 mt-4 flex flex-row flex-wrap">
                        <div class="mx-6 my-3 flex flex-col">
                            <div
                                class="text-secondary text-sm font-medium leading-none"
                            >
                                Card Limit
                            </div>
                            <div class="mt-2 text-3xl font-medium leading-none">
                                {{
                                    data.previousStatement.limit
                                        | currency: 'USD'
                                }}
                            </div>
                        </div>
                        <div class="mx-6 my-3 flex flex-col">
                            <div
                                class="text-secondary text-sm font-medium leading-none"
                            >
                                Spent
                            </div>
                            <div class="mt-2 text-3xl font-medium leading-none">
                                {{
                                    data.previousStatement.spent
                                        | currency: 'USD'
                                }}
                            </div>
                        </div>
                        <div class="mx-6 my-3 flex flex-col">
                            <div
                                class="text-secondary text-sm font-medium leading-none"
                            >
                                Minimum
                            </div>
                            <div class="mt-2 text-3xl font-medium leading-none">
                                {{
                                    data.previousStatement.minimum
                                        | currency: 'USD'
                                }}
                            </div>
                        </div>
                    </div>
                </div>
                <!-- Current statement -->
                <div
                    class="bg-card relative flex flex-auto flex-col overflow-hidden rounded-2xl p-6 pb-3 pr-3 shadow"
                >
                    <div class="absolute bottom-0 right-0 -m-6 h-24 w-24">
                        <mat-icon
                            class="text-red-500 opacity-25 icon-size-24 dark:text-red-400"
                            [svgIcon]="'heroicons_outline:exclamation-circle'"
                        ></mat-icon>
                    </div>
                    <div class="flex items-center">
                        <div class="flex flex-col">
                            <div
                                class="truncate text-lg font-medium leading-6 tracking-tight"
                            >
                                Current Statement
                            </div>
                            <div class="text-sm font-medium text-red-600">
                                Must be paid before
                                {{ data.currentStatement.date }}
                            </div>
                        </div>
                        <div class="-mt-2 ml-auto">
                            <button
                                mat-icon-button
                                [matMenuTriggerFor]="currentStatementMenu"
                            >
                                <mat-icon
                                    class="icon-size-5"
                                    [svgIcon]="
                                        'heroicons_mini:ellipsis-vertical'
                                    "
                                ></mat-icon>
                            </button>
                            <mat-menu #currentStatementMenu="matMenu">
                                <button mat-menu-item>
                                    <span class="flex items-center">
                                        <mat-icon
                                            class="mr-3 icon-size-5"
                                            [svgIcon]="
                                                'heroicons_solid:credit-card'
                                            "
                                        ></mat-icon>
                                        <span>View statement</span>
                                    </span>
                                </button>
                                <button mat-menu-item>
                                    <span class="flex items-center">
                                        <mat-icon
                                            class="mr-3 icon-size-5"
                                            [svgIcon]="
                                                'heroicons_solid:banknotes'
                                            "
                                        ></mat-icon>
                                        <span>Spending breakdown</span>
                                    </span>
                                </button>
                                <button mat-menu-item>
                                    <span class="flex items-center">
                                        <mat-icon
                                            class="mr-3 icon-size-5"
                                            [svgIcon]="
                                                'heroicons_solid:receipt-percent'
                                            "
                                        ></mat-icon>
                                        <span>Tax breakdown</span>
                                    </span>
                                </button>
                                <mat-divider class="my-2"></mat-divider>
                                <button mat-menu-item>
                                    <span class="flex items-center">
                                        <mat-icon
                                            class="mr-3 icon-size-5"
                                            [svgIcon]="
                                                'heroicons_solid:printer'
                                            "
                                        ></mat-icon>
                                        <span>Print statement</span>
                                    </span>
                                </button>
                                <button mat-menu-item>
                                    <span class="flex items-center">
                                        <mat-icon
                                            class="mr-3 icon-size-5"
                                            [svgIcon]="
                                                'heroicons_solid:envelope'
                                            "
                                        ></mat-icon>
                                        <span>Email statement</span>
                                    </span>
                                </button>
                            </mat-menu>
                        </div>
                    </div>
                    <div class="-mx-6 mt-4 flex flex-row flex-wrap">
                        <div class="mx-6 my-3 flex flex-col">
                            <div
                                class="text-secondary text-sm font-medium leading-none"
                            >
                                Card Limit
                            </div>
                            <div class="mt-2 text-3xl font-medium leading-none">
                                {{
                                    data.currentStatement.limit
                                        | currency: 'USD'
                                }}
                            </div>
                        </div>
                        <div class="mx-6 my-3 flex flex-col">
                            <div
                                class="text-secondary text-sm font-medium leading-none"
                            >
                                Spent
                            </div>
                            <div class="mt-2 text-3xl font-medium leading-none">
                                {{
                                    data.currentStatement.spent
                                        | currency: 'USD'
                                }}
                            </div>
                        </div>
                        <div class="mx-6 my-3 flex flex-col">
                            <div
                                class="text-secondary text-sm font-medium leading-none"
                            >
                                Minimum
                            </div>
                            <div class="mt-2 text-3xl font-medium leading-none">
                                {{
                                    data.currentStatement.minimum
                                        | currency: 'USD'
                                }}
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!-- Account balance -->
            <div
                class="bg-card flex flex-auto flex-col overflow-hidden rounded-2xl shadow"
            >
                <div class="flex flex-col p-6 pb-4">
                    <div class="flex items-center justify-between">
                        <div class="flex flex-col">
                            <div
                                class="mr-4 truncate text-lg font-medium leading-6 tracking-tight"
                            >
                                Account Balance
                            </div>
                            <div class="text-secondary font-medium">
                                Monthly balance growth and avg. monthly income
                            </div>
                        </div>
                        <div class="ml-2">
                            <button
                                class="bg-hover h-6 min-h-6 rounded-full px-2"
                                mat-button
                                [matMenuTriggerFor]="accountBalanceMenu"
                            >
                                <span class="text-secondary text-sm font-medium"
                                    >12 months</span
                                >
                            </button>
                            <mat-menu #accountBalanceMenu="matMenu">
                                <button mat-menu-item>3 months</button>
                                <button mat-menu-item>6 months</button>
                                <button mat-menu-item>9 months</button>
                                <button mat-menu-item>12 months</button>
                            </mat-menu>
                        </div>
                    </div>
                    <div class="mr-2 mt-6 flex items-start">
                        <div class="flex flex-col">
                            <div
                                class="text-3xl font-semibold tracking-tighter md:text-5xl"
                            >
                                {{ data.accountBalance.growRate }}%
                            </div>
                            <div
                                class="text-secondary text-sm font-medium leading-none"
                            >
                                Average Monthly Growth
                            </div>
                        </div>
                        <div class="ml-8 flex flex-col md:ml-16">
                            <div
                                class="text-3xl font-semibold tracking-tighter md:text-5xl"
                            >
                                {{ data.accountBalance.ami | currency: 'USD' }}
                            </div>
                            <div
                                class="text-secondary text-sm font-medium leading-none"
                            >
                                Average Monthly Income
                            </div>
                        </div>
                    </div>
                </div>
                <div class="flex flex-auto flex-col">
                    <apx-chart
                        class="h-full w-full flex-auto"
                        [chart]="accountBalanceOptions.chart"
                        [colors]="accountBalanceOptions.colors"
                        [fill]="accountBalanceOptions.fill"
                        [series]="accountBalanceOptions.series"
                        [stroke]="accountBalanceOptions.stroke"
                        [tooltip]="accountBalanceOptions.tooltip"
                        [xaxis]="accountBalanceOptions.xaxis"
                    ></apx-chart>
                </div>
            </div>
        </div>

        <div class="mt-8 grid w-full grid-cols-1 gap-8 xl:grid-cols-3">
            <!-- Recent transactions table -->
            <div
                class="bg-card flex flex-auto flex-col overflow-hidden rounded-2xl shadow xl:col-span-2"
            >
                <div class="p-6">
                    <div
                        class="mr-4 truncate text-lg font-medium leading-6 tracking-tight"
                    >
                        Recent transactions
                    </div>
                    <div class="text-secondary font-medium">
                        1 pending, 4 completed
                    </div>
                </div>
                <div class="mx-6 overflow-x-auto">
                    <table
                        class="w-full bg-transparent"
                        mat-table
                        matSort
                        [dataSource]="recentTransactionsDataSource"
                        [trackBy]="trackByFn"
                        #recentTransactionsTable
                    >
                        <!-- Transaction ID -->
                        <ng-container matColumnDef="transactionId">
                            <th
                                mat-header-cell
                                mat-sort-header
                                *matHeaderCellDef
                            >
                                Transaction ID
                            </th>
                            <td mat-cell *matCellDef="let transaction">
                                <span
                                    class="text-secondary whitespace-nowrap pr-6 text-sm font-medium"
                                >
                                    {{ transaction.transactionId }}
                                </span>
                            </td>
                        </ng-container>

                        <!-- Date -->
                        <ng-container matColumnDef="date">
                            <th
                                mat-header-cell
                                mat-sort-header
                                *matHeaderCellDef
                            >
                                Date
                            </th>
                            <td mat-cell *matCellDef="let transaction">
                                <span class="whitespace-nowrap pr-6">
                                    {{ transaction.date | date: 'MMM dd, y' }}
                                </span>
                            </td>
                        </ng-container>

                        <!-- Name -->
                        <ng-container matColumnDef="name">
                            <th
                                mat-header-cell
                                mat-sort-header
                                *matHeaderCellDef
                            >
                                Name
                            </th>
                            <td mat-cell *matCellDef="let transaction">
                                <span class="whitespace-nowrap pr-6">
                                    {{ transaction.name }}
                                </span>
                            </td>
                        </ng-container>

                        <!-- Amount -->
                        <ng-container matColumnDef="amount">
                            <th
                                mat-header-cell
                                mat-sort-header
                                *matHeaderCellDef
                            >
                                Amount
                            </th>
                            <td mat-cell *matCellDef="let transaction">
                                <span
                                    class="whitespace-nowrap pr-6 font-medium"
                                >
                                    {{ transaction.amount | currency: 'USD' }}
                                </span>
                            </td>
                        </ng-container>

                        <!-- Status -->
                        <ng-container matColumnDef="status">
                            <th
                                mat-header-cell
                                mat-sort-header
                                *matHeaderCellDef
                            >
                                Status
                            </th>
                            <td mat-cell *matCellDef="let transaction">
                                <span
                                    class="inline-flex items-center rounded-full px-2.5 py-0.5 text-xs font-bold uppercase tracking-wide"
                                    [ngClass]="{
                                        'bg-red-200 text-red-800 dark:bg-red-600 dark:text-red-50':
                                            transaction.status === 'pending',
                                        'bg-green-200 text-green-800 dark:bg-green-600 dark:text-green-50':
                                            transaction.status === 'completed',
                                    }"
                                >
                                    <span
                                        class="whitespace-nowrap leading-relaxed"
                                        >{{ transaction.status }}</span
                                    >
                                </span>
                            </td>
                        </ng-container>

                        <!-- Footer -->
                        <ng-container matColumnDef="recentOrdersTableFooter">
                            <td
                                class="border-0 px-0 py-6"
                                mat-footer-cell
                                *matFooterCellDef
                                colspan="6"
                            >
                                <button mat-stroked-button>
                                    See all transactions
                                </button>
                            </td>
                        </ng-container>

                        <tr
                            mat-header-row
                            *matHeaderRowDef="recentTransactionsTableColumns"
                        ></tr>
                        <tr
                            class="order-row h-16"
                            mat-row
                            *matRowDef="
                                let row;
                                columns: recentTransactionsTableColumns
                            "
                        ></tr>
                        <tr
                            class="h-16 border-0"
                            mat-footer-row
                            *matFooterRowDef="['recentOrdersTableFooter']"
                        ></tr>
                    </table>
                </div>
            </div>

            <!-- Budget -->
            <div class="bg-card flex flex-auto flex-col rounded-2xl p-6 shadow">
                <div class="flex items-center">
                    <div class="flex flex-col">
                        <div
                            class="mr-4 truncate text-lg font-medium leading-6 tracking-tight"
                        >
                            Budget
                        </div>
                        <div class="text-secondary font-medium">
                            Monthly budget summary
                        </div>
                    </div>
                    <div class="-mr-2 -mt-2 ml-auto">
                        <button
                            mat-icon-button
                            [matMenuTriggerFor]="budgetMenu"
                        >
                            <mat-icon
                                class="icon-size-5"
                                [svgIcon]="'heroicons_mini:ellipsis-vertical'"
                            ></mat-icon>
                        </button>
                        <mat-menu #budgetMenu="matMenu">
                            <button mat-menu-item>Expenses breakdown</button>
                            <button mat-menu-item>Savings breakdown</button>
                            <button mat-menu-item>Bills breakdown</button>
                            <mat-divider class="my-2"></mat-divider>
                            <button mat-menu-item>
                                <span class="flex items-center">
                                    <mat-icon
                                        class="mr-3 icon-size-5"
                                        [svgIcon]="'heroicons_solid:printer'"
                                    ></mat-icon>
                                    <span>Print budget summary</span>
                                </span>
                            </button>
                            <button mat-menu-item>
                                <span class="flex items-center">
                                    <mat-icon
                                        class="mr-3 icon-size-5"
                                        [svgIcon]="'heroicons_solid:envelope'"
                                    ></mat-icon>
                                    <span>Email budget summary</span>
                                </span>
                            </button>
                        </mat-menu>
                    </div>
                </div>
                <div class="mt-6">
                    Last month; you had <strong>223</strong> expense
                    transactions, <strong>12</strong> savings entries and
                    <strong>4</strong> bills.
                </div>
                <div class="my-8 space-y-8">
                    <div class="flex flex-col">
                        <div class="flex items-center">
                            <div
                                class="flex h-14 w-14 items-center justify-center rounded bg-red-100 text-red-800 dark:bg-red-600 dark:text-red-50"
                            >
                                <mat-icon
                                    class="text-current"
                                    [svgIcon]="'heroicons_outline:credit-card'"
                                ></mat-icon>
                            </div>
                            <div class="ml-4 flex-auto leading-none">
                                <div class="text-secondary text-sm font-medium">
                                    Expenses
                                </div>
                                <div class="mt-2 text-2xl font-medium">
                                    {{ data.budget.expenses | currency: 'USD' }}
                                </div>
                                <mat-progress-bar
                                    class="mt-3 rounded-full"
                                    [color]="'warn'"
                                    [mode]="'determinate'"
                                    [value]="
                                        (data.budget.expenses * 100) /
                                        data.budget.expensesLimit
                                    "
                                ></mat-progress-bar>
                            </div>
                            <div
                                class="ml-6 mt-auto flex min-w-18 items-end justify-end"
                            >
                                <div class="text-lg leading-none">2.6%</div>
                                <mat-icon
                                    class="ml-1 text-green-600 icon-size-4"
                                    [svgIcon]="'heroicons_mini:arrow-long-down'"
                                ></mat-icon>
                            </div>
                        </div>
                    </div>
                    <div class="flex flex-col">
                        <div class="flex items-center">
                            <div
                                class="flex h-14 w-14 items-center justify-center rounded bg-indigo-100 text-indigo-800 dark:bg-indigo-600 dark:text-indigo-50"
                            >
                                <mat-icon
                                    class="text-current"
                                    [svgIcon]="'heroicons_outline:banknotes'"
                                ></mat-icon>
                            </div>
                            <div class="ml-4 flex-auto leading-none">
                                <div class="text-secondary text-sm font-medium">
                                    Savings
                                </div>
                                <div class="mt-2 text-2xl font-medium">
                                    {{ data.budget.savings | currency: 'USD' }}
                                </div>
                                <mat-progress-bar
                                    class="mt-3 rounded-full"
                                    [mode]="'determinate'"
                                    [value]="
                                        (data.budget.savings * 100) /
                                        data.budget.savingsGoal
                                    "
                                ></mat-progress-bar>
                            </div>
                            <div
                                class="ml-6 mt-auto flex min-w-18 items-end justify-end"
                            >
                                <div class="text-lg leading-none">12.7%</div>
                                <mat-icon
                                    class="ml-1 text-red-600 icon-size-4"
                                    [svgIcon]="'heroicons_mini:arrow-long-up'"
                                ></mat-icon>
                            </div>
                        </div>
                    </div>
                    <div class="flex flex-col">
                        <div class="flex items-center">
                            <div
                                class="flex h-14 w-14 items-center justify-center rounded bg-teal-100 text-teal-800 dark:bg-teal-600 dark:text-teal-50"
                            >
                                <mat-icon
                                    class="text-current"
                                    [svgIcon]="'heroicons_outline:light-bulb'"
                                ></mat-icon>
                            </div>
                            <div class="ml-4 flex-auto leading-none">
                                <div class="text-secondary text-sm font-medium">
                                    Bills
                                </div>
                                <div class="mt-2 text-2xl font-medium">
                                    {{ data.budget.bills | currency: 'USD' }}
                                </div>
                                <mat-progress-bar
                                    class="mt-3 rounded-full"
                                    [mode]="'determinate'"
                                    [value]="
                                        (data.budget.bills * 100) /
                                        data.budget.billsLimit
                                    "
                                ></mat-progress-bar>
                            </div>
                            <div
                                class="ml-6 mt-auto flex min-w-18 items-end justify-end"
                            >
                                <div class="text-lg leading-none">105.7%</div>
                                <mat-icon
                                    class="ml-1 text-red-600 icon-size-4"
                                    [svgIcon]="'heroicons_mini:arrow-long-up'"
                                ></mat-icon>
                            </div>
                        </div>
                        <div class="text-secondary mt-3 text-md">
                            Exceeded your personal limit! Be careful next month.
                        </div>
                    </div>
                </div>
                <div class="mt-auto flex items-center">
                    <button class="mt-2" mat-stroked-button>
                        Download Summary
                    </button>
                </div>
            </div>
        </div>
    </div>
</div>
