all: sync with master

client/src/components/Dashboard/StatsCard.tsx

@@ -0,0 +1,34 @@
+import React from 'react';
+
+import { STATUS_COLORS } from '../../helpers/constants';
+
+import { formatNumber } from '../../helpers/helpers';
+
+import Card from '../ui/Card';
+
+import Line from '../ui/Line';
+
+interface StatsCardProps {
+    total: number;
+    lineData: unknown[];
+    title: object;
+    color: string;
+    percent?: number;
+}
+
+const StatsCard = ({ total, lineData, percent, title, color }: StatsCardProps) => (
+    <Card type="card--full" bodyType="card-wrap">
+        <div className="card-body-stats">
+            <div className={`card-value card-value-stats text-${color}`}>{formatNumber(total)}</div>
+
+            <div className="card-title-stats">{title}</div>
+        </div>
+        {percent >= 0 && <div className={`card-value card-value-percent text-${color}`}>{percent}</div>}
+
+        <div className="card-chart-bg">
+            <Line data={lineData} color={STATUS_COLORS[color]} />
+        </div>
+    </Card>
+);
+
+export default StatsCard;