khata-ui/src/components/ProgressCard/ProgressCard.view.tsx

import * as React from "react";
import {
  Box,
  Typography,
  Paper,
  LinearProgress,
  Divider,
  linearProgressClasses
} from "@mui/material";
import { useTheme, alpha } from "@mui/material/styles";
import { getPercentage, formatCurrency } from "../report.helpers";
import { ProgressCardViewProps } from "./ProgressCard.props";

export default function ProgressCardView({
  title,
  settings,

  isFetching,

  colorScheme,

  progressAmount,
  totalAmount,
  selected,
  onClick,
}: ProgressCardViewProps) {
  const theme = useTheme();

  const percentage = getPercentage(progressAmount, totalAmount);
  const formattedProgress = formatCurrency(progressAmount);
  const formattedTotal = formatCurrency(totalAmount);

  return (
    <Paper
      elevation={settings.compact ? 2 : 4}
      onClick={onClick}
      sx={{
        width: "100%",
        p: settings.compact ? { xs: 2.5, md: 3 } : { xs: 3, md: 4 },
        borderRadius: settings.compact ? 3 : 4,
        transform: selected ? "scale(1.02)" : "scale(1)",
        transition: "transform 0.2s ease, box-shadow 0.2s ease",
        bgcolor: colorScheme.surface,
        color: colorScheme.text,
        display: "flex",
        flexDirection: "column",
        alignItems: settings.compact ? "flex-start" : "center",
        justifyContent: "center",
        position: "relative",
        overflow: "hidden",
        border: selected
          ? `2px solid ${colorScheme.primary}`
          : "1px solid",
        borderColor: selected ? colorScheme.primary : "divider",
        boxShadow: "none",
        opacity: isFetching ? 0.6 : 1,
        pointerEvents: isFetching ? "none" : "auto",
      }}
    >
      <Typography
        variant={settings.compact ? "body2" : "subtitle1"}
        fontWeight={700}
        sx={{
          opacity: 0.95,
          mb: settings.compact ? 1.5 : 2,
          width: "100%",
          overflow: "hidden",
          textOverflow: "ellipsis",
          whiteSpace: "nowrap",
          letterSpacing: 0.5,
        }}
      >
        {title}
      </Typography>

      <Box sx={{ mb: settings.compact ? 2 : 3, width: "100%" }}>
        <Typography
          variant={settings.compact ? "h5" : "h3"}
          fontWeight={900}
          sx={{
            mb: 0.5,
            lineHeight: 1.2,
          }}
        >
          {formattedProgress}
        </Typography>

        <Divider
          sx={{
            my: 1,
            borderColor: "divider",
            width: "100%",
          }}
        />

        <Typography
          variant={settings.compact ? "caption" : "body2"}
          sx={{
            opacity: 0.85,
            fontWeight: 500,
            display: "block",
            color: alpha(colorScheme.text, 0.85),
          }}
        >
          of {formattedTotal}
        </Typography>
      </Box>

      <Box sx={{ width: "100%", mt: "auto" }}>
        <LinearProgress
          variant="determinate"
          value={percentage}
          sx={{
            height: settings.compact ? 6 : 10,
            borderRadius: 5,
            [`&.${linearProgressClasses.colorPrimary}`]: {
              backgroundColor: alpha(theme.palette.divider, 0.5),
            },
            [`& .${linearProgressClasses.bar}`]: {
              borderRadius: 5,
              backgroundColor: colorScheme.primary,
              boxShadow: `0 0 8px ${alpha(colorScheme.primary, 0.4)}`,
            },
          }}
        />
      </Box>
    </Paper>
  );
}