Financial Statement

// Financial Statement · syxUI · https://syxui.dev/components/table-financials
// Free in any project. Keep this line and credit syxUI where a person can read it.

import SwiftUI

extension View {
    func tblCard(_ w: CGFloat) -> some View {
        self.frame(width: w)
            .background(Color(.systemBackground), in: RoundedRectangle(cornerRadius: 18, style: .continuous))
            .clipShape(RoundedRectangle(cornerRadius: 18, style: .continuous))
            .overlay(RoundedRectangle(cornerRadius: 18, style: .continuous).stroke(Color.primary.opacity(0.08), lineWidth: 1))
            .shadow(color: .black.opacity(0.04), radius: 10, x: 0, y: 4)
    }
}

/// Financial statement - bold section rows, indented sub-lines, two period columns (Stake).
struct TableFinancials: View {
    let rows: [(String, Bool, String, String, Bool)] = [
        ("Operating Income", false, "1.62B", "923M", true), ("Gross Profit", true, "5.05B", "3.88B", false),
        ("Revenue", true, "28.0B", "22.5B", false), ("Cost of Revenue", true, "23.0B", "18.6B", false),
        ("Operating Expenses", false, "3.43B", "2.96B", true), ("R&D", true, "1.63B", "1.59B", false),
        ("SG&A", true, "1.56B", "1.37B", false), ("Net Income", false, "1.39B", "1.19B", true),
    ]
    var body: some View {
        VStack(spacing: 0) {
            HStack {
                Text("Breakdown").frame(maxWidth: .infinity, alignment: .leading)
                Text("Q3 25").frame(width: 60, alignment: .trailing)
                Text("Q2 25").frame(width: 60, alignment: .trailing)
            }
            .font(.system(size: 11, weight: .semibold)).foregroundStyle(.secondary)
            .padding(.horizontal, 16).padding(.vertical, 10)
            Divider()
            ForEach(Array(rows.enumerated()), id: \.offset) { _, r in
                HStack {
                    Text(r.0)
                        .font(.system(size: 13, weight: r.4 ? .semibold : .regular))
                        .foregroundStyle(r.1 ? Color.secondary : Color.primary)
                        .padding(.leading, r.1 ? 12 : 0)
                        .frame(maxWidth: .infinity, alignment: .leading)
                    Text(r.2).font(.system(size: 13, weight: r.4 ? .semibold : .regular).monospacedDigit()).frame(width: 60, alignment: .trailing)
                    Text(r.3).font(.system(size: 13).monospacedDigit()).foregroundStyle(.secondary).frame(width: 60, alignment: .trailing)
                }
                .padding(.horizontal, 16).padding(.vertical, 9)
            }
        }
        .tblCard(330)
    }
}