ClaudeBankingApp

Claude App built off of Strategy MCP integration to update using Strategy Semantic Layer.

Banking Branch Performance Analytics

A comprehensive React dashboard for analyzing banking branch performance across 15 Texas branches over 8 quarters. Built with data from MicroStrategy's Banking Branch Performance Agent via MCP (Model Context Protocol).

Features

5 Interactive Dashboard Views

• Overview -- KPI summary cards, branch profit rankings, portfolio trend line chart, and an interactive Leaflet map with branch locations
• Branch Performance -- Sortable financial table (profit, interest income, operating cost, savings), click any branch for an 8-quarter trend drilldown
• Digital Transformation -- Mobile app, mobile deposit, and bill pay adoption by branch; teller share trend lines; leaders vs laggards rankings
• Branch Health -- Composite health scores (0-100) with red/yellow/green status indicators, complaint rate vs wait time scatter plot, quarter-over-quarter change tracking
• Operational Efficiency -- Transactions per staff member, wait time rankings, cost vs profit efficiency matrix, cost-per-transaction ranking table

Data

• 15 branches across Texas (Houston, Austin, Dallas, San Antonio, and surrounding areas)
• 8 quarters of data (2024-Q1 through 2025-Q4)
• 21 KPIs per branch per quarter covering financials, customer metrics, digital adoption, staffing, and customer experience
• Data sourced from MicroStrategy's Banking Branch Performance Agent

Tech Stack

• React 19 + TypeScript
• Vite -- dev server and build tool
• Chart.js (via react-chartjs-2) -- bar, line, and scatter charts
• Tailwind CSS -- utility-first styling
• Leaflet (via react-leaflet) -- interactive branch location map
• React Router -- client-side navigation

Getting Started

Prerequisites

• Node.js 18+
• npm

Install and Run

cd banking-app
npm install
npm run dev

Open http://localhost:5173 in your browser.

Build for Production

npm run build

Output is in the dist/ directory.

Project Structure

src/
  App.tsx                         # Router setup
  main.tsx                        # Entry point
  types/branch.ts                 # TypeScript interfaces for branch data
  context/DataContext.tsx          # Shared data state with refresh support
  utils/calculations.ts           # Health scores, aggregations, formatting
  data/sampleData.json            # Branch performance dataset (synthetic)
  components/
    Layout.tsx                    # Sidebar navigation + refresh button
    KPICard.tsx                   # Reusable metric display card
    BranchMap.tsx                 # Leaflet map with branch markers
    StatusBadge.tsx               # Red/yellow/green health indicator
  pages/
    Overview.tsx                  # Executive summary dashboard
    BranchPerformance.tsx         # Financial KPIs + drilldown
    DigitalTransformation.tsx     # Digital adoption tracking
    BranchHealth.tsx              # Composite health scores
    OperationalEfficiency.tsx     # Staffing and cost analysis

Data Source

This app uses synthetic banking data generated by MicroStrategy's Banking Branch Performance Agent via the MCP ask_agent tool. The dataset contains no real customer data, personal information, or credentials.

The "Refresh Data" button in the sidebar re-parses the bundled dataset. For production use, this can be wired to live MCP agent queries.