apskel-owner-flutter/lib/presentation/pages/finance/widgets/category.dart

import 'package:flutter/material.dart';
import 'package:line_icons/line_icons.dart';

import '../../../../common/theme/theme.dart';

class FinanceCategory extends StatelessWidget {
  const FinanceCategory({super.key});

  @override
  Widget build(BuildContext context) {
    final categories = [
      {
        'name': 'Makanan & Minuman',
        'amount': 'Rp 18.5M',
        'percentage': 72,
        'color': AppColor.primary,
      },
      {
        'name': 'Produk Retail',
        'amount': 'Rp 4.2M',
        'percentage': 16,
        'color': AppColor.secondary,
      },
      {
        'name': 'Jasa & Lainnya',
        'amount': 'Rp 3.1M',
        'percentage': 12,
        'color': AppColor.info,
      },
    ];

    return Container(
      margin: const EdgeInsets.all(16),
      padding: const EdgeInsets.all(20),
      decoration: BoxDecoration(
        color: AppColor.white,
        borderRadius: BorderRadius.circular(16),
        boxShadow: [
          BoxShadow(
            color: AppColor.textLight.withOpacity(0.1),
            spreadRadius: 1,
            blurRadius: 8,
            offset: const Offset(0, 2),
          ),
        ],
      ),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          Row(
            children: [
              Container(
                padding: const EdgeInsets.all(8),
                decoration: BoxDecoration(
                  color: AppColor.secondary.withOpacity(0.1),
                  borderRadius: BorderRadius.circular(8),
                ),
                child: const Icon(
                  LineIcons.pieChart,
                  color: AppColor.secondary,
                  size: 20,
                ),
              ),
              const SizedBox(width: 12),
              Text(
                'Kategori Penjualan',
                style: AppStyle.lg.copyWith(fontWeight: FontWeight.bold),
              ),
            ],
          ),
          const SizedBox(height: 20),

          ...categories
              .map(
                (category) => _buildCategoryItem(
                  category['name'] as String,
                  category['amount'] as String,
                  category['percentage'] as int,
                  category['color'] as Color,
                ),
              )
              .toList(),
        ],
      ),
    );
  }

  Widget _buildCategoryItem(
    String name,
    String amount,
    int percentage,
    Color color,
  ) {
    return Container(
      margin: const EdgeInsets.only(bottom: 16),
      child: Column(
        children: [
          Row(
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            children: [
              Row(
                children: [
                  Container(
                    width: 12,
                    height: 12,
                    decoration: BoxDecoration(
                      color: color,
                      borderRadius: BorderRadius.circular(6),
                    ),
                  ),
                  const SizedBox(width: 12),
                  Text(
                    name,
                    style: AppStyle.md.copyWith(fontWeight: FontWeight.w600),
                  ),
                ],
              ),
              Text(
                amount,
                style: AppStyle.md.copyWith(
                  fontWeight: FontWeight.bold,
                  color: color,
                ),
              ),
            ],
          ),
          const SizedBox(height: 8),
          LinearProgressIndicator(
            value: percentage / 100,
            backgroundColor: AppColor.borderLight,
            valueColor: AlwaysStoppedAnimation<Color>(color),
            minHeight: 6,
          ),
          const SizedBox(height: 4),
          Align(
            alignment: Alignment.centerRight,
            child: Text(
              '$percentage%',
              style: AppStyle.xs.copyWith(color: AppColor.textSecondary),
            ),
          ),
        ],
      ),
    );
  }
}