HiveGrid-Wireframes/03 Quellen und Referenzen/hivegrid-cloud/apps/web/app/ui/components/StatsCard/StatsCard.tsx

// @subframe/sync-disable -- local fix: render `label`, `value`, `percentage` and
// `comparisonText` whenever they are present instead of when they are truthy. The
// generated `{value ? … : null}` guards drop the number `0` and the empty string,
// so every card whose metric was legitimately zero rendered as a headline with a
// bare trend arrow and no figure at all (admin audit 2026-07-26: /health,
// /system, /sales/tasks/today, /sales/contacts, /sales/calls, /sales/bookings,
// /accounts/billing).
/*
 * Documentation:
 * Stats Card — https://app.subframe.com/f023064a5ca0/library?component=Stats+Card_63f809c7-22ef-47f8-9fb9-0f33b252be3f
 */

import React from "react";
import { FeatherArrowRight } from "@subframe/core";
import { FeatherDollarSign } from "@subframe/core";
import { FeatherTrendingDown } from "@subframe/core";
import { FeatherTrendingUp } from "@subframe/core";
import * as SubframeCore from "@subframe/core";
import * as SubframeUtils from "../../utils";

/**
 * A slot is rendered when it carries visible content. The number `0` does — it
 * is a legitimate metric — while `undefined`, `null`, `false` and the empty
 * string do not. Call sites pass `percentage=""` to opt out of that slot, so an
 * empty string must stay unrendered rather than produce an empty element.
 */
function hasContent(node: React.ReactNode): boolean {
  return node !== undefined && node !== null && node !== false && node !== "";
}

export interface StatsCardRootProps
  extends React.HTMLAttributes<HTMLDivElement> {
  trend?: "positive" | "negative" | "neutral";
  label?: React.ReactNode;
  value?: React.ReactNode;
  percentage?: React.ReactNode;
  comparisonText?: React.ReactNode;
  icon?: React.ReactNode;
  highContrastText?: boolean;
  className?: string;
}

const StatsCardRoot = React.forwardRef<HTMLDivElement, StatsCardRootProps>(
  function StatsCardRoot(
    {
      trend = "positive",
      label,
      value,
      percentage,
      comparisonText,
      icon = <FeatherDollarSign />,
      highContrastText = false,
      className,
      ...otherProps
    }: StatsCardRootProps,
    ref
  ) {
    return (
      <div
        className={SubframeUtils.twClassNames(
          "group/63f809c7 flex w-full cursor-pointer flex-col items-start gap-3 rounded-md border border-solid border-border-default bg-surface-neutral-primary px-4 py-4 hover:shadow-lg",
          className
        )}
        ref={ref}
        {...otherProps}
      >
        <div className="flex w-full flex-col items-start gap-5">
          <div className="flex w-full items-center justify-between">
            {hasContent(label) ? (
              <span
                className={SubframeUtils.twClassNames(
                  "text-body-default-regular-0 font-body-default-regular-0 text-text-neutral-secondary",
                  { "text-text-neutral-primary": highContrastText }
                )}
              >
                {label}
              </span>
            ) : null}
            {icon ? (
              <SubframeCore.IconWrapper className="text-body-default-regular-0 font-body-default-regular-0 text-icon-neutral-tertiary">
                {icon}
              </SubframeCore.IconWrapper>
            ) : null}
          </div>
          {hasContent(value) ? (
            <span className="text-subtitle-0 font-subtitle-0 text-text-neutral-primary">
              {value}
            </span>
          ) : null}
          <div className="flex items-center gap-1">
            <div className="flex items-center gap-2">
              <FeatherTrendingDown
                className={SubframeUtils.twClassNames(
                  "hidden text-body-large-0 font-body-large-0 text-icon-feedback-negative",
                  { "inline-flex": trend === "negative" }
                )}
              />
              <FeatherArrowRight
                className={SubframeUtils.twClassNames(
                  "hidden text-body-large-0 font-body-large-0 text-icon-neutral-tertiary",
                  { "inline-flex": trend === "neutral" }
                )}
              />
              <FeatherTrendingUp
                className={SubframeUtils.twClassNames(
                  "text-body-large-0 font-body-large-0 text-icon-feedback-positive",
                  { hidden: trend === "neutral" || trend === "negative" }
                )}
              />
              {hasContent(percentage) ? (
                <span
                  className={SubframeUtils.twClassNames(
                    "text-body-small-regular-0 font-body-small-regular-0 text-text-feedback-positive",
                    {
                      "text-text-feedback-neutral": trend === "neutral",
                      "text-text-feedback-negative": trend === "negative",
                    }
                  )}
                >
                  {percentage}
                </span>
              ) : null}
            </div>
            {hasContent(comparisonText) ? (
              <span
                className={SubframeUtils.twClassNames(
                  "text-body-small-regular-0 font-body-small-regular-0 text-text-neutral-tertiary",
                  { "text-text-neutral-secondary": highContrastText }
                )}
              >
                {comparisonText}
              </span>
            ) : null}
          </div>
        </div>
      </div>
    );
  }
);

export const StatsCard = StatsCardRoot;