409 lines
15 KiB
TypeScript
409 lines
15 KiB
TypeScript
import {
|
|
Bar,
|
|
BarChart,
|
|
CartesianGrid,
|
|
Legend,
|
|
ResponsiveContainer,
|
|
Tooltip,
|
|
XAxis,
|
|
YAxis,
|
|
} from "recharts"
|
|
|
|
import type { ChartReportResponse, ChartReportSeries, CurrencyTotal, ReportChartBucket } from "../../api/reports"
|
|
import { useTranslation } from "../../hooks/useTranslation"
|
|
|
|
const PERSIAN_DIGITS = "۰۱۲۳۴۵۶۷۸۹"
|
|
const SERIES_PALETTE = ["#0ea5e9", "#f97316", "#10b981", "#8b5cf6", "#ef4444", "#eab308", "#14b8a6", "#3b82f6"]
|
|
|
|
type ChartRow = {
|
|
bucket_key: string
|
|
bucket_label: string
|
|
tooltip_label: string
|
|
[key: string]: string | number
|
|
}
|
|
|
|
const localizeDigits = (value: string, lang: "en" | "fa") =>
|
|
lang === "fa" ? value.replace(/\d/g, (digit) => PERSIAN_DIGITS[Number(digit)] || digit) : value
|
|
|
|
const shouldTrimCurrencyDecimals = (currency?: string | null) => {
|
|
const normalized = (currency || "").toUpperCase()
|
|
return normalized === "IRR" || normalized === "IRT"
|
|
}
|
|
|
|
const formatAmount = (value: string, lang: "en" | "fa", currency?: string | null) => {
|
|
const numeric = Number(value.replace(/,/g, ""))
|
|
if (Number.isNaN(numeric)) {
|
|
return localizeDigits(value, lang)
|
|
}
|
|
|
|
const [integerPart, fractionalPart] = value.replace(/,/g, "").split(".")
|
|
const grouped = Math.abs(Number(integerPart)).toLocaleString("en-US")
|
|
const signed = value.startsWith("-") ? `-${grouped}` : grouped
|
|
const normalizedFraction =
|
|
fractionalPart && !shouldTrimCurrencyDecimals(currency) ? fractionalPart.replace(/0+$/, "") : ""
|
|
const formatted = normalizedFraction ? `${signed}.${normalizedFraction}` : signed
|
|
return localizeDigits(formatted, lang)
|
|
}
|
|
|
|
const currencyLabel = (currency: string, lang: "en" | "fa") => {
|
|
if (lang !== "fa") {
|
|
return currency.toUpperCase()
|
|
}
|
|
|
|
return (
|
|
{
|
|
USD: "دلار",
|
|
EUR: "یورو",
|
|
GBP: "پوند",
|
|
IRR: "ریال",
|
|
IRT: "تومان",
|
|
AED: "درهم",
|
|
TRY: "لیر",
|
|
}[currency.toUpperCase()] || currency.toUpperCase()
|
|
)
|
|
}
|
|
|
|
const formatMoneyTotals = (totals: CurrencyTotal[], lang: "en" | "fa") => {
|
|
if (!totals.length) {
|
|
return "-"
|
|
}
|
|
|
|
return totals.map((item) => `${formatAmount(item.amount, lang, item.currency)} ${currencyLabel(item.currency, lang)}`).join(" | ")
|
|
}
|
|
|
|
const formatSecondsTick = (value: number, lang: "en" | "fa") => {
|
|
const hours = value / 3600
|
|
const rounded = hours >= 10 ? hours.toFixed(0) : hours.toFixed(1)
|
|
return localizeDigits(rounded, lang)
|
|
}
|
|
|
|
const parseIsoDate = (value: string) => {
|
|
const [year, month, day] = value.split("-").map(Number)
|
|
return new Date(year, (month || 1) - 1, day || 1)
|
|
}
|
|
|
|
const formatIsoDate = (value: Date) => {
|
|
const year = value.getFullYear()
|
|
const month = String(value.getMonth() + 1).padStart(2, "0")
|
|
const day = String(value.getDate()).padStart(2, "0")
|
|
return `${year}-${month}-${day}`
|
|
}
|
|
|
|
const monthKeyFromDate = (value: Date) => `${value.getFullYear()}-${String(value.getMonth() + 1).padStart(2, "0")}`
|
|
|
|
const getCalendarLocale = (lang: "en" | "fa") => (lang === "fa" ? "fa-IR-u-ca-persian" : "en-US")
|
|
|
|
const getDailyAxisLabel = (date: Date, lang: "en" | "fa", period: string) => {
|
|
if (period === "this_week") {
|
|
return new Intl.DateTimeFormat(getCalendarLocale(lang), { weekday: "short" }).format(date)
|
|
}
|
|
|
|
return new Intl.DateTimeFormat(getCalendarLocale(lang), { day: "numeric" }).format(date)
|
|
}
|
|
|
|
const getDailyTooltipLabel = (date: Date, lang: "en" | "fa") =>
|
|
new Intl.DateTimeFormat(getCalendarLocale(lang), {
|
|
weekday: "long",
|
|
month: "long",
|
|
day: "numeric",
|
|
}).format(date)
|
|
|
|
const getMonthlyAxisLabel = (bucketKey: string, lang: "en" | "fa") => {
|
|
const [year, month] = bucketKey.split("-").map(Number)
|
|
return new Intl.DateTimeFormat(getCalendarLocale(lang), { month: "short" }).format(
|
|
new Date(year, (month || 1) - 1, 1),
|
|
)
|
|
}
|
|
|
|
const getMonthlyTooltipLabel = (bucketKey: string, lang: "en" | "fa") => {
|
|
const [year, month] = bucketKey.split("-").map(Number)
|
|
return new Intl.DateTimeFormat(getCalendarLocale(lang), { month: "long", year: "numeric" }).format(
|
|
new Date(year, (month || 1) - 1, 1),
|
|
)
|
|
}
|
|
|
|
const buildDailyBuckets = (
|
|
fromDate: string,
|
|
toDate: string,
|
|
existing: ReportChartBucket[],
|
|
lang: "en" | "fa",
|
|
period: string,
|
|
) => {
|
|
const map = new Map(existing.map((bucket) => [bucket.bucket_key, bucket]))
|
|
const result: ReportChartBucket[] = []
|
|
const cursor = parseIsoDate(fromDate)
|
|
const limit = parseIsoDate(toDate)
|
|
|
|
while (cursor.getTime() <= limit.getTime()) {
|
|
const key = formatIsoDate(cursor)
|
|
const existingBucket = map.get(key)
|
|
result.push(
|
|
existingBucket ?? {
|
|
bucket_key: key,
|
|
bucket_label: getDailyAxisLabel(cursor, lang, period),
|
|
total_seconds: 0,
|
|
total_duration: "00:00:00",
|
|
},
|
|
)
|
|
cursor.setDate(cursor.getDate() + 1)
|
|
}
|
|
|
|
return result.map((bucket) => ({
|
|
...bucket,
|
|
bucket_label: getDailyAxisLabel(parseIsoDate(bucket.bucket_key), lang, period),
|
|
}))
|
|
}
|
|
|
|
const buildMonthlyBuckets = (fromDate: string, toDate: string, existing: ReportChartBucket[], lang: "en" | "fa") => {
|
|
const map = new Map(existing.map((bucket) => [bucket.bucket_key, bucket]))
|
|
const result: ReportChartBucket[] = []
|
|
const start = parseIsoDate(fromDate)
|
|
const end = parseIsoDate(toDate)
|
|
const cursor = new Date(start.getFullYear(), start.getMonth(), 1)
|
|
const limit = new Date(end.getFullYear(), end.getMonth(), 1)
|
|
|
|
while (cursor.getTime() <= limit.getTime()) {
|
|
const key = monthKeyFromDate(cursor)
|
|
const existingBucket = map.get(key)
|
|
result.push(
|
|
existingBucket ?? {
|
|
bucket_key: key,
|
|
bucket_label: getMonthlyAxisLabel(key, lang),
|
|
total_seconds: 0,
|
|
total_duration: "00:00:00",
|
|
},
|
|
)
|
|
cursor.setMonth(cursor.getMonth() + 1)
|
|
}
|
|
|
|
return result.map((bucket) => ({
|
|
...bucket,
|
|
bucket_label: getMonthlyAxisLabel(bucket.bucket_key, lang),
|
|
}))
|
|
}
|
|
|
|
const buildSeriesBuckets = (
|
|
series: ChartReportSeries,
|
|
data: ChartReportResponse,
|
|
lang: "en" | "fa",
|
|
useMonthlyBuckets: boolean,
|
|
) =>
|
|
useMonthlyBuckets
|
|
? buildMonthlyBuckets(data.scope.from_date, data.scope.to_date, series.buckets, lang)
|
|
: buildDailyBuckets(data.scope.from_date, data.scope.to_date, series.buckets, lang, data.scope.period)
|
|
|
|
const createSeriesKey = (series: ChartReportSeries, index: number) => series.user?.id ?? `series_${index}`
|
|
|
|
const buildChartRows = (data: ChartReportResponse, lang: "en" | "fa") => {
|
|
const useMonthlyBuckets =
|
|
data.scope.period === "this_year" ||
|
|
data.scope.period === "half_year_first" ||
|
|
data.scope.period === "half_year_second"
|
|
|
|
const normalizedSeries = data.series.map((series) => buildSeriesBuckets(series, data, lang, useMonthlyBuckets))
|
|
const baseBuckets = normalizedSeries[0] ?? []
|
|
|
|
const rows: ChartRow[] = baseBuckets.map((bucket, bucketIndex) => {
|
|
const tooltipLabel = useMonthlyBuckets
|
|
? getMonthlyTooltipLabel(bucket.bucket_key, lang)
|
|
: getDailyTooltipLabel(parseIsoDate(bucket.bucket_key), lang)
|
|
|
|
const row: ChartRow = {
|
|
bucket_key: bucket.bucket_key,
|
|
bucket_label: bucket.bucket_label,
|
|
tooltip_label: tooltipLabel,
|
|
}
|
|
|
|
data.series.forEach((series, seriesIndex) => {
|
|
const seriesKey = createSeriesKey(series, seriesIndex)
|
|
row[seriesKey] = normalizedSeries[seriesIndex]?.[bucketIndex]?.total_seconds ?? 0
|
|
})
|
|
|
|
return row
|
|
})
|
|
|
|
return { rows, useMonthlyBuckets }
|
|
}
|
|
|
|
function ChartTooltip({
|
|
active,
|
|
payload,
|
|
label,
|
|
lang,
|
|
totalHoursLabel,
|
|
}: {
|
|
active?: boolean
|
|
payload?: ReadonlyArray<{ color?: string; dataKey?: string | number | ((obj: unknown) => unknown); name?: string | number; value?: unknown }>
|
|
label: string
|
|
lang: "en" | "fa"
|
|
totalHoursLabel: string
|
|
}) {
|
|
if (!active || !payload?.length) {
|
|
return null
|
|
}
|
|
|
|
return (
|
|
<div className="rounded-2xl border border-slate-200 bg-white/95 px-3 py-2 shadow-xl shadow-slate-200/60 backdrop-blur dark:border-slate-700 dark:bg-slate-900/95 dark:shadow-black/30">
|
|
<div className="text-xs font-semibold text-slate-500 dark:text-slate-400">{label}</div>
|
|
<div className="mt-2 space-y-1">
|
|
{payload.map((item) => {
|
|
const seconds = Number(item.value || 0)
|
|
const hours = seconds / 3600
|
|
return (
|
|
<div key={String(item.dataKey)} className="flex items-center gap-2 text-sm text-slate-900 dark:text-white">
|
|
<span className="h-2.5 w-2.5 rounded-full" style={{ backgroundColor: item.color }} />
|
|
<span className="font-medium">{item.name}</span>
|
|
<span className="text-slate-500 dark:text-slate-400">
|
|
{totalHoursLabel}: {localizeDigits(hours.toFixed(hours >= 10 ? 0 : 1), lang)}
|
|
</span>
|
|
</div>
|
|
)
|
|
})}
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
export function ReportsChartPanel({
|
|
data,
|
|
labels,
|
|
isLoading,
|
|
}: {
|
|
data: ChartReportResponse | null
|
|
labels: Record<string, string>
|
|
isLoading: boolean
|
|
}) {
|
|
const { lang } = useTranslation()
|
|
|
|
if (isLoading) {
|
|
return (
|
|
<div className="space-y-4">
|
|
<div className="grid grid-cols-2 gap-3 xl:grid-cols-4">
|
|
{Array.from({ length: 4 }).map((_, index) => (
|
|
<div key={index} className="rounded-3xl border border-slate-200 bg-white p-4 shadow-sm dark:border-slate-800 dark:bg-slate-900">
|
|
<div className="mb-3 text-[11px] font-semibold uppercase tracking-[0.16em] text-slate-500 dark:text-slate-400">
|
|
{labels.loading}
|
|
</div>
|
|
<div className="h-8 animate-pulse rounded-xl bg-slate-200/80 dark:bg-slate-800/80" />
|
|
</div>
|
|
))}
|
|
</div>
|
|
|
|
<div className="rounded-3xl border border-slate-200 bg-white p-4 shadow-sm dark:border-slate-800 dark:bg-slate-900 sm:p-5">
|
|
<div className="mb-4 flex items-center justify-between gap-3">
|
|
<div className="text-sm font-semibold text-slate-900 dark:text-white">{labels.chart}</div>
|
|
<div className="text-xs text-slate-500 dark:text-slate-400">{labels.loading}</div>
|
|
</div>
|
|
<div className="h-[320px] animate-pulse rounded-2xl bg-slate-200/80 dark:bg-slate-800/80 sm:h-[360px]" />
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
if (!data || data.series.length === 0) {
|
|
return null
|
|
}
|
|
|
|
const { rows, useMonthlyBuckets } = buildChartRows(data, lang)
|
|
const interval = useMonthlyBuckets ? 0 : rows.length > 20 ? Math.ceil(rows.length / 10) - 1 : 0
|
|
const chartMinWidth = Math.max(640, rows.length * (useMonthlyBuckets ? 110 : 52))
|
|
const isMultiSeries = data.series.length > 1
|
|
return (
|
|
<div className="space-y-4">
|
|
<div className="grid grid-cols-2 gap-3 xl:grid-cols-4">
|
|
<div className="rounded-3xl border border-slate-200 bg-white p-4 shadow-sm dark:border-slate-800 dark:bg-slate-900">
|
|
<div className="text-[11px] font-semibold uppercase tracking-[0.16em] text-slate-500 dark:text-slate-400">{labels.totalHours}</div>
|
|
<div className="mt-2 text-xl font-bold text-slate-900 dark:text-white sm:text-2xl">
|
|
{localizeDigits(data.summary.total_duration, lang)}
|
|
</div>
|
|
</div>
|
|
<div className="rounded-3xl border border-slate-200 bg-white p-4 shadow-sm dark:border-slate-800 dark:bg-slate-900">
|
|
<div className="text-[11px] font-semibold uppercase tracking-[0.16em] text-slate-500 dark:text-slate-400">{labels.billableHours}</div>
|
|
<div className="mt-2 text-xl font-bold text-slate-900 dark:text-white sm:text-2xl">
|
|
{localizeDigits(data.summary.billable_duration, lang)}
|
|
</div>
|
|
</div>
|
|
<div className="rounded-3xl border border-slate-200 bg-white p-4 shadow-sm dark:border-slate-800 dark:bg-slate-900">
|
|
<div className="text-[11px] font-semibold uppercase tracking-[0.16em] text-slate-500 dark:text-slate-400">{labels.nonBillableHours}</div>
|
|
<div className="mt-2 text-xl font-bold text-slate-900 dark:text-white sm:text-2xl">
|
|
{localizeDigits(data.summary.non_billable_duration, lang)}
|
|
</div>
|
|
</div>
|
|
<div className="rounded-3xl border border-slate-200 bg-white p-4 shadow-sm dark:border-slate-800 dark:bg-slate-900">
|
|
<div className="text-[11px] font-semibold uppercase tracking-[0.16em] text-slate-500 dark:text-slate-400">{labels.totalIncome}</div>
|
|
<div className="mt-2 text-sm font-semibold leading-6 text-slate-900 dark:text-white sm:text-base">
|
|
{formatMoneyTotals(data.summary.income_totals, lang)}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="rounded-3xl border border-slate-200 bg-white p-4 shadow-sm dark:border-slate-800 dark:bg-slate-900 sm:p-5">
|
|
<div className="mb-4 flex items-center justify-between gap-3">
|
|
<div className="text-sm font-semibold text-slate-900 dark:text-white">{labels.chart}</div>
|
|
<div className="text-xs text-slate-500 dark:text-slate-400">{localizeDigits(`${rows.length}`, lang)}</div>
|
|
</div>
|
|
|
|
<div className="overflow-x-auto pb-2">
|
|
<div className="h-[300px] min-w-full sm:h-[360px]" style={{ minWidth: `${chartMinWidth}px` }}>
|
|
<ResponsiveContainer width="100%" height="100%">
|
|
<BarChart data={rows} barCategoryGap={useMonthlyBuckets ? "26%" : "18%"} margin={{ top: 8, right: 18, bottom: 16, left: 10 }}>
|
|
<CartesianGrid strokeDasharray="4 6" stroke="currentColor" className="text-slate-200 dark:text-slate-800" vertical={false} />
|
|
<XAxis
|
|
dataKey="bucket_label"
|
|
interval={interval}
|
|
tickLine={false}
|
|
axisLine={false}
|
|
height={48}
|
|
tickMargin={10}
|
|
tick={{ fontSize: 11, fill: "#64748b" }}
|
|
/>
|
|
<YAxis
|
|
tickFormatter={(value) => formatSecondsTick(value, lang)}
|
|
tickLine={false}
|
|
axisLine={false}
|
|
width={54}
|
|
tickMargin={10}
|
|
tick={{ fontSize: 11, fill: "#64748b" }}
|
|
/>
|
|
<Tooltip
|
|
cursor={{ fill: "rgba(14,165,233,0.08)" }}
|
|
content={({ active, payload, label }) => (
|
|
<ChartTooltip
|
|
active={active}
|
|
payload={payload}
|
|
label={typeof label === "string" ? label : rows[0]?.tooltip_label || ""}
|
|
lang={lang}
|
|
totalHoursLabel={labels.totalHours}
|
|
/>
|
|
)}
|
|
labelFormatter={(_, payload) => String(payload?.[0]?.payload?.tooltip_label || "")}
|
|
/>
|
|
{isMultiSeries ? (
|
|
<Legend
|
|
verticalAlign="top"
|
|
align="left"
|
|
wrapperStyle={{ paddingBottom: "16px", fontSize: "12px" }}
|
|
/>
|
|
) : null}
|
|
{data.series.map((series, index) => {
|
|
const dataKey = createSeriesKey(series, index)
|
|
return (
|
|
<Bar
|
|
key={dataKey}
|
|
dataKey={dataKey}
|
|
name={series.user?.name || labels.totalHours}
|
|
fill={SERIES_PALETTE[index % SERIES_PALETTE.length]}
|
|
radius={[12, 12, 4, 4]}
|
|
maxBarSize={useMonthlyBuckets ? 36 : 22}
|
|
/>
|
|
)
|
|
})}
|
|
</BarChart>
|
|
</ResponsiveContainer>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|