From 005b3e3e6df5f9a0a19fdabc37c220bded5eefff Mon Sep 17 00:00:00 2001 From: saeed0920 Date: Tue, 16 Sep 2025 22:07:09 +0330 Subject: [PATCH] refactor the login and dashboard page --- app/app.css | 62 ++- app/components/auth/login-form.tsx | 3 +- app/components/auth/login-layout.tsx | 11 +- app/components/dashboard/d3-image-info.tsx | 36 +- .../dashboard/dashboard-custom-bar-chart.tsx | 16 +- app/components/dashboard/dashboard-home.tsx | 463 +++++++----------- .../dashboard/interactive-bar-chart.tsx | 32 +- .../digital-innovation-page.tsx | 8 +- .../green-innovation-page.tsx | 15 +- .../innovation-built-inside-page.tsx | 10 +- .../mange-ideas-tech-page.tsx | 50 +- .../project-management-page.tsx | 8 +- .../dashboard/strategic-alignment-popup.tsx | 17 +- tailwind.config.js | 9 +- 14 files changed, 352 insertions(+), 388 deletions(-) diff --git a/app/app.css b/app/app.css index 9241773..4247830 100644 --- a/app/app.css +++ b/app/app.css @@ -33,6 +33,10 @@ --color-slate-800: #1e293b; --color-slate-900: #0f172a; --color-slate-950: #020617; + + --color-pr-green : #3AEA83; + --color-pr-blue : #69C8EA; + --color-pr-red : #F76276; } html, @@ -82,9 +86,13 @@ html[dir="rtl"] body { :root { --radius: 0.5rem; + --color-green: #3AEA83; + --color-blue: #69C8EA; + --color-red: #F76276; + /* primary colors */ --color-pr-gray : #3F415A; - --color-pr-green :#3AEA83; + --color-pr-green : var(--color-green); /* Light theme colors */ --background: #ffffff; @@ -201,7 +209,7 @@ html[dir="rtl"] body { --color-dark-950: #020617; /* Login specific colors */ - --color-login-primary: #3aea83; + --color-login-primary: var(--color-green); --color-login-dark-start: #464861; --color-login-dark-end: #111628; } @@ -441,3 +449,53 @@ html[dir="rtl"] body { background: linear-gradient(to bottom, rgba(16, 185, 129, 0.5), rgba(16, 185, 129, 0.9)); border-color: rgba(30, 41, 59, 0.6); } + + +:root { + --form-control-color: #3F415A; + --form-control-disabled: ##5F6284; + --form-background: #3AEA83; +} + +input[type="checkbox"] { + -webkit-appearance: none; + appearance: none; + margin: 0; + font: inherit; + color: #5F6284; + background-color: transparent; + width: 1.15em; + height: 1.15em; + border: 1px solid #5F6284; + border-radius: 0.15em; + transform: translateY(-0.075em); + display: grid; + place-content: center; + cursor: pointer; +} + +input[type="checkbox"]::before { + content: ""; + width: 0.65em; + height: 0.65em; + clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%); + transform: scale(0); + transform-origin: bottom left; + transition: 120ms transform ease-in-out; + box-shadow: inset 1em 1em var(--form-control-color); +} + +input[type="checkbox"]:checked::before { + transform: scale(1); +} + +input[type="checkbox"]:checked { + background-color: #3AEA83 ; + border: 1px solid transparent; +} + +input[type="checkbox"]:disabled { + --form-control-color: var(--form-control-disabled); + color: var(--form-control-disabled); + cursor: not-allowed; +} diff --git a/app/components/auth/login-form.tsx b/app/components/auth/login-form.tsx index f84c0eb..718c489 100644 --- a/app/components/auth/login-form.tsx +++ b/app/components/auth/login-form.tsx @@ -192,7 +192,7 @@ export function LoginForm({ onSuccess }: LoginFormProps) { type="submit" disabled={isLoading || isConnectionError} size="lg" - className="w-full font-persian bg-[var(--color-login-primary)] hover:bg-[var(--color-login-primary)]/90 text-slate-800 font-bold" + className="w-full font-persian bg-[var(--color-login-primary)] hover:bg-[var(--color-login-primary)]/90 text-slate-800 text-base font-semibold" > {isLoading ? ( <> @@ -213,6 +213,7 @@ export function LoginForm({ onSuccess }: LoginFormProps) { } /> diff --git a/app/components/auth/login-layout.tsx b/app/components/auth/login-layout.tsx index 170ed0d..d6ec2f6 100644 --- a/app/components/auth/login-layout.tsx +++ b/app/components/auth/login-layout.tsx @@ -75,12 +75,12 @@ export function LoginHeader({ return (
-

{title}

-

+

{title}

+

{subtitle}

{description && ( -

+

{description}

)} @@ -94,6 +94,7 @@ interface LoginBrandingProps { companyName: string; logo?: React.ReactNode; className?: string; + engSub ?: string; } export function LoginBranding({ @@ -101,6 +102,7 @@ export function LoginBranding({ companyName, logo, className, + engSub }: LoginBrandingProps) { return ( <> @@ -116,7 +118,8 @@ export function LoginBranding({ {/* Bottom Section */}
{logo &&
{logo}
} -
+

{engSub}

+
{companyName}
{/* Logo */} diff --git a/app/components/dashboard/d3-image-info.tsx b/app/components/dashboard/d3-image-info.tsx index 0f9b786..7a9dc02 100644 --- a/app/components/dashboard/d3-image-info.tsx +++ b/app/components/dashboard/d3-image-info.tsx @@ -26,17 +26,17 @@ const InfoBox = ({ company, style }: { company: CompanyInfo; style :any }) => {
درآمد:
-
{formatNumber(company?.revenue || 0)}
+
{formatNumber(company?.revenue || 0)}
میلیون ریال
هزینه:
-
{formatNumber(company?.cost || 0)}
+
{formatNumber(company?.cost || 0)}
میلیون ریال
ظرفیت:
-
{formatNumber(company?.capacity || 0)}
+
{formatNumber(company?.capacity || 0)}
تن در سال
@@ -60,7 +60,7 @@ export function D3ImageInfo({ companies }: D3ImageInfoProps) { ]; return ( -
+
{displayCompanies.map((company, index) => { const gp = gridPositions.find(v => v.name === company.name) ; @@ -121,9 +121,9 @@ export function D3ImageInfo({ companies }: D3ImageInfoProps) { border: 1px solid #3F415A; border-radius: 10px; height: max-content; -align-self : center; -justify-self : center; -padding : .2rem 0 ; + align-self : center; + justify-self : center; + padding : .2rem 1.2rem; background-color: transparent; } @@ -131,16 +131,15 @@ padding : .2rem 0 ; .info-box-content { display: flex; flex-direction: column; - justify-content: space-around; + justify-content: center; } .info-row { position : relative; - margin: 0rem 1rem; + margin: .1rem 0; display: flex; - gap : 1rem; + gap : .5rem; justify-content : space-between; - padding: 0rem .8rem; direction: rtl; &:has(.info-value.revenue) {border-bottom: 1px solid #3AEA83;} @@ -150,15 +149,16 @@ padding : .2rem 0 ; .info-label { color: #FFFFFF; - font-size: 12px; - font-weight: 400; + font-size: 11px; + font-weight: 300; text-align: right; + margin : auto 0; } .info-value { color: #34D399; font-size: 14px; - font-weight: 600; + font-weight: 500; text-align: right; margin-bottom : .5rem; } @@ -169,10 +169,10 @@ padding : .2rem 0 ; .info-unit { position: absolute; - left: 12px; - bottom: 0; - color: #9CA3AF; - font-size: 8px; + left: 0; + bottom: 2px; + color: #ACACAC; + font-size: 6px; font-weight: 400; } `} diff --git a/app/components/dashboard/dashboard-custom-bar-chart.tsx b/app/components/dashboard/dashboard-custom-bar-chart.tsx index 3ef9c0e..5130265 100644 --- a/app/components/dashboard/dashboard-custom-bar-chart.tsx +++ b/app/components/dashboard/dashboard-custom-bar-chart.tsx @@ -21,7 +21,7 @@ export function DashboardCustomBarChart({ if (loading) { return (
-

+

{title}

@@ -40,7 +40,7 @@ export function DashboardCustomBarChart({ return (
-

+

{title}

@@ -51,19 +51,19 @@ export function DashboardCustomBarChart({ return (
{/* Bar container */} -
+
{/* Animated bar */}
- - {formatNumber(item.value)} - - + {item.label}
+ + {formatNumber(item.value)} +
); diff --git a/app/components/dashboard/dashboard-home.tsx b/app/components/dashboard/dashboard-home.tsx index 940ba71..ac9ca0f 100644 --- a/app/components/dashboard/dashboard-home.tsx +++ b/app/components/dashboard/dashboard-home.tsx @@ -26,7 +26,7 @@ import { DollarSign, Minus, CheckCircle, - BookOpen, + Book, } from "lucide-react"; import { Tabs, TabsList, TabsTrigger, TabsContent } from "~/components/ui/tabs"; import { CustomBarChart } from "~/components/ui/custom-bar-chart"; @@ -42,6 +42,8 @@ import { } from "recharts"; import { ChartContainer } from "~/components/ui/chart"; import { formatNumber } from "~/lib/utils"; +import { MetricCard } from "~/components/ui/metric-card"; +import { BaseCard } from "~/components/ui/base-card"; export function DashboardHome() { const [dashboardData, setDashboardData] = useState(null); @@ -310,60 +312,30 @@ export function DashboardHome() { return ( -
+
{/* Top Cards Row - Redesigned to match other components */}
{/* Ideas Card */} - - -
-
-

- ایده‌های فناوری و نوآوری -

-
-
- - 0 - ? Math.round( - (parseFloat( - dashboardData.topData - ?.ongoing_innovation_technology_ideas || - "0", - ) / - parseFloat( - dashboardData.topData - ?.registered_innovation_technology_idea || - "1", - )) * - 100, - ) - : 0, - fill: "green", - }, - ]} - startAngle={90} - endAngle={ - 90 + - ((parseFloat( + +
+ + 0 ? Math.round( (parseFloat( dashboardData.topData - ?.ongoing_innovation_technology_ideas || "0", + ?.ongoing_innovation_technology_ideas || + "0", ) / parseFloat( dashboardData.topData @@ -372,203 +344,141 @@ export function DashboardHome() { )) * 100, ) - : 0) / - 100) * - 360 - } - innerRadius={35} - outerRadius={55} - > - - - - - - -
-
- -
ثبت شده :
- {formatNumber( - dashboardData.topData - ?.registered_innovation_technology_idea || "0", - )} - - -
در حال اجرا :
- {formatNumber( - dashboardData.topData - ?.ongoing_innovation_technology_ideas || "0", - )} - -
-
-
-
- - - {/* Revenue Card */} - - -
-
-

- افزایش درآمد مبتنی بر فناوری و نوآوری -

-
-
-
-
-

- {formatNumber( - dashboardData.topData - ?.technology_innovation_based_revenue_growth || "0", - )} -

-
- میلیون ریال -
-
- / -
-

- {formatNumber( - Math.round( + : 0, + fill: "green", + }, + ]} + startAngle={90} + endAngle={ + 90 + + ((parseFloat( + dashboardData.topData + ?.registered_innovation_technology_idea || "0", + ) > 0 + ? Math.round( + (parseFloat( dashboardData.topData - ?.technology_innovation_based_revenue_growth_percent, - ) || "0", - )} - % -

-
- درصد به کل درآمد -
-
-
+ ?.ongoing_innovation_technology_ideas || "0", + ) / + parseFloat( + dashboardData.topData + ?.registered_innovation_technology_idea || + "1", + )) * + 100, + ) + : 0) / + 100) * + 360 + } + innerRadius={35} + outerRadius={55} + > + + + + + + +
+
+ +
ثبت شده :
+ {formatNumber( + dashboardData.topData + ?.registered_innovation_technology_idea || "0", + )} + + +
در حال اجرا :
+ {formatNumber( + dashboardData.topData + ?.ongoing_innovation_technology_ideas || "0", + )} +
- - +
+ + {/* Revenue Card */} + {/* Cost Reduction Card */} - - -
-
-

- کاهش هزینه ها مبتنی بر فناوری و نوآوری -

-
-
-
-
-

- {formatNumber( - Math.round( - parseFloat( - dashboardData.topData?.technology_innovation_based_cost_reduction?.replace( - /,/g, - "", - ) || "0", - ) / 1000000, - ), - )} -

-
- میلیون ریال -
-
- / -
-

- {formatNumber( - Math.round( - dashboardData.topData - ?.technology_innovation_based_cost_reduction_percent, - ) || "0", - )} - % -

-
- درصد به کل هزینه -
-
-
-
-
- - + {/* Budget Ratio Card */} - - -
-
-

- نسبت تحقق بودجه فناوی و نوآوری -

-
-
+ +
- -
مصوب :
+ +
مصوب :
{formatNumber( Math.round( parseFloat( @@ -656,8 +566,8 @@ export function DashboardHome() { ), )} - -
جذب شده :
+ +
جذب شده :
{formatNumber( Math.round( parseFloat( @@ -672,10 +582,8 @@ export function DashboardHome() {
-
- - -
+ +
{/* Main Content with Tabs */}
- + شدت فناوری

@@ -757,8 +665,8 @@ export function DashboardHome() { {/* Program Status */} - - + + @@ -790,9 +698,9 @@ export function DashboardHome() { {/* Publications */} - + - + انتشارات فناوری و نوآوری @@ -800,10 +708,10 @@ export function DashboardHome() {

- + کتاب:
- + {formatNumber( dashboardData.leftData?.printed_books_count || "0", )} @@ -811,10 +719,10 @@ export function DashboardHome() {
- - پتنت: + + پتنت:
- + {formatNumber( dashboardData.leftData?.registered_patents_count || "0", )} @@ -822,10 +730,10 @@ export function DashboardHome() {
- - گزارش: + + گزارش:
- + {formatNumber( dashboardData.leftData?.published_reports_count || "0", )} @@ -833,10 +741,10 @@ export function DashboardHome() {
- - مقاله: + + مقاله:
- + {formatNumber( dashboardData.leftData?.printed_articles_count || "0", )} @@ -847,9 +755,9 @@ export function DashboardHome() { {/* Promotion */} - + - + ترویج فناوری و نوآوری @@ -857,10 +765,10 @@ export function DashboardHome() {
- - کنفرانس: + + کنفرانس:
- + {formatNumber( dashboardData.leftData?.attended_conferences_count || "0", )} @@ -868,10 +776,10 @@ export function DashboardHome() {
- - شرکت در رویداد: + + شرکت در رویداد:
- + {formatNumber( dashboardData.leftData?.attended_events_count || "0", )} @@ -879,10 +787,10 @@ export function DashboardHome() {
- - نمایشگاه: + + نمایشگاه:
- + {formatNumber( dashboardData.leftData?.attended_exhibitions_count || "0", )} @@ -890,10 +798,10 @@ export function DashboardHome() {
- - برگزاری رویداد: + + برگزاری رویداد:
- + {formatNumber( dashboardData.leftData?.organized_events_count || "0", )} @@ -903,8 +811,9 @@ export function DashboardHome() {
-
- +
+ + ); } diff --git a/app/components/dashboard/interactive-bar-chart.tsx b/app/components/dashboard/interactive-bar-chart.tsx index 505fd78..97d9ae9 100644 --- a/app/components/dashboard/interactive-bar-chart.tsx +++ b/app/components/dashboard/interactive-bar-chart.tsx @@ -42,15 +42,15 @@ export function InteractiveBarChart({ data: CompanyChartDatum[]; }) { return ( - - + + `${formatNumber(Math.round(value))}%`} /> `${formatNumber(Math.round(v))}%`} /> @@ -81,7 +81,7 @@ export function InteractiveBarChart({ `${formatNumber(Math.round(v))}%`} /> @@ -89,7 +89,7 @@ export function InteractiveBarChart({ `${formatNumber(Math.round(v))}%`} /> @@ -97,27 +97,27 @@ export function InteractiveBarChart({ {/* Legend below chart */} -
+
- {chartConfig.capacity.label} + {chartConfig.capacity.label}
- {chartConfig.cost.label} + {chartConfig.cost.label}
- {chartConfig.revenue.label} + {chartConfig.revenue.label}
diff --git a/app/components/dashboard/project-management/digital-innovation-page.tsx b/app/components/dashboard/project-management/digital-innovation-page.tsx index 1713261..7dcb610 100644 --- a/app/components/dashboard/project-management/digital-innovation-page.tsx +++ b/app/components/dashboard/project-management/digital-innovation-page.tsx @@ -12,6 +12,7 @@ import { Zap, } from "lucide-react"; import moment from "moment-jalaali"; +import { formatNumber } from "~/lib/utils"; import { useCallback, useEffect, useMemo, useRef, useState } from "react"; import toast from "react-hot-toast"; import { Badge } from "~/components/ui/badge"; @@ -201,12 +202,7 @@ export function DigitalInnovationPage() { setDetailsDialogOpen(true); }; - const formatNumber = (value: string | number) => { - if (!value) return "0"; - const numericValue = typeof value === "string" ? parseFloat(value) : value; - if (isNaN(numericValue)) return "0"; - return new Intl.NumberFormat("fa-IR").format(numericValue); - }; + // ...existing code... const statsCards: StatsCard[] = [ { diff --git a/app/components/dashboard/project-management/green-innovation-page.tsx b/app/components/dashboard/project-management/green-innovation-page.tsx index 116a4bb..3673c21 100644 --- a/app/components/dashboard/project-management/green-innovation-page.tsx +++ b/app/components/dashboard/project-management/green-innovation-page.tsx @@ -1,5 +1,6 @@ // import moment from "moment-jalaali"; import { useCallback, useEffect, useRef, useState } from "react"; +import { formatNumber } from "~/lib/utils"; import { Bar, BarChart, @@ -182,14 +183,14 @@ export function GreenInnovationPage() { useState(null); const [recycleParams, setRecycleParams] = useState({ water: { - icon: , + icon: , label: "آب", value: 0, suffix: "لیتر", percent: 0, }, food: { - icon: , + icon: , label: "خوراک", value: 0, suffix: "تن", @@ -197,14 +198,14 @@ export function GreenInnovationPage() { }, power: { - icon: , + icon: , label: "برق", value: 0, suffix: "میلیون مگاوات", percent: 0, }, oil: { - icon: , + icon: , label: "سوخت", value: 0, suffix: "متر مربع", @@ -256,11 +257,7 @@ export function GreenInnovationPage() { setDetailsDialogOpen(true); }; - const formatNumber = (value: string | number) => { - const numericValue = typeof value === "string" ? parseFloat(value) : value; - if (isNaN(numericValue)) return "0"; - return new Intl.NumberFormat("fa-IR").format(numericValue); - }; + // ...existing code... const fetchProjects = async (reset = false) => { if (fetchingRef.current) { diff --git a/app/components/dashboard/project-management/innovation-built-inside-page.tsx b/app/components/dashboard/project-management/innovation-built-inside-page.tsx index ddf6848..ffc5215 100644 --- a/app/components/dashboard/project-management/innovation-built-inside-page.tsx +++ b/app/components/dashboard/project-management/innovation-built-inside-page.tsx @@ -1,3 +1,4 @@ +// ...existing code... import { useCallback, useEffect, useRef, useState } from "react"; import { Badge } from "~/components/ui/badge"; import { Button } from "~/components/ui/button"; @@ -39,7 +40,7 @@ import { XAxis, } from "recharts"; import apiService from "~/lib/api"; -import { formatCurrency } from "~/lib/utils"; +import { formatCurrency, formatNumber } from "~/lib/utils"; import DashboardLayout from "../layout"; interface innovationBuiltInDate { @@ -275,12 +276,7 @@ export function InnovationBuiltInsidePage() { }, 500); }; - const formatNumber = (value: string | number) => { - if (!value) return "0"; - const numericValue = typeof value === "string" ? parseFloat(value) : value; - if (isNaN(numericValue)) return "0"; - return new Intl.NumberFormat("fa-IR").format(numericValue); - }; + // ...existing code... const fetchProjects = async (reset = false) => { if (fetchingRef.current) { diff --git a/app/components/dashboard/project-management/mange-ideas-tech-page.tsx b/app/components/dashboard/project-management/mange-ideas-tech-page.tsx index a156de2..7513aa9 100644 --- a/app/components/dashboard/project-management/mange-ideas-tech-page.tsx +++ b/app/components/dashboard/project-management/mange-ideas-tech-page.tsx @@ -552,15 +552,15 @@ export function ManageIdeasTechPage() { const getImportanceColor = (importance: string) => { switch (importance?.toLowerCase()) { case "تایید شده": - return "#3AEA83"; // سبز + return "var(--success)"; // سبز case "در حال بررسی": - return "#69C8EA"; // آبی + return "var(--info)"; // آبی case "رد شده": - return "#F76276"; // قرمز + return "var(--destructive)"; // قرمز case "اجرا شده": - return "#FBBF24"; // زرد/نارنجی + return "var(--warning)"; // زرد/نارنجی default: - return "#6B7280"; // خاکستری پیش‌فرض + return "var(--muted)"; // خاکستری پیش‌فرض } }; @@ -574,9 +574,9 @@ export function ManageIdeasTechPage() { case "remaining_time": { const days = calculateRemainingDays(item.end_date); if (days == null) { - return -; + return -; } - const color = days > 0 ? "#3AEA83" : days < 0 ? "#F76276" : undefined; + const color = days > 0 ? "var(--success)" : days < 0 ? "var(--destructive)" : undefined; return ( + {formatCurrency(String(value))} ); case "personnel_number": // case "idea_originality": return ( - + {toPersianDigits(value as any)}{" "} ); case "idea_registration_date": return ( - {formatDate(String(value))} + {formatDate(String(value))} ); case "project_no": return ( {String(value)} ); case "idea_title": - return {String(value)}; + return {String(value)}; case "idea_status": return ( + {(value && String(value)) || "-"} ); @@ -648,12 +648,12 @@ export function ManageIdeasTechPage() {
- - + + {columns.map((column) => ( {column.sortable ? ( @@ -690,12 +690,12 @@ export function ManageIdeasTechPage() { {columns.map((column) => (
-
+
@@ -709,7 +709,7 @@ export function ManageIdeasTechPage() { colSpan={columns.length} className="text-center py-8" > - + هیچ پروژه‌ای یافت نشد @@ -723,7 +723,7 @@ export function ManageIdeasTechPage() { {columns.map((column) => ( {renderCellContent(project, column)} @@ -740,8 +740,8 @@ export function ManageIdeasTechPage() { {loadingMore && (
- - + +
)} @@ -749,8 +749,8 @@ export function ManageIdeasTechPage() { {/* Footer */} -
-
+
+
کل پروژه‌ها: {formatNumber(actualTotalCount)}
diff --git a/app/components/dashboard/project-management/project-management-page.tsx b/app/components/dashboard/project-management/project-management-page.tsx index 032277e..0c073ac 100644 --- a/app/components/dashboard/project-management/project-management-page.tsx +++ b/app/components/dashboard/project-management/project-management-page.tsx @@ -13,6 +13,7 @@ import { } from "~/components/ui/table"; import apiService from "~/lib/api"; import { formatCurrency } from "~/lib/utils"; +import { formatNumber } from "~/lib/utils"; import { DashboardLayout } from "../layout"; interface ProjectData { @@ -352,12 +353,7 @@ export function ProjectManagementPage() { fetchTotalCount(); }; - const formatNumber = (value: string | number) => { - if (value === undefined || value === null || value === "") return "0"; - const numericValue = typeof value === "string" ? Number(value) : value; - if (Number.isNaN(numericValue)) return "0"; - return new Intl.NumberFormat("fa-IR").format(numericValue as number); - }; + // ...existing code... const toPersianDigits = (input: string | number): string => { const str = String(input); diff --git a/app/components/dashboard/strategic-alignment-popup.tsx b/app/components/dashboard/strategic-alignment-popup.tsx index cebb0bb..046538d 100644 --- a/app/components/dashboard/strategic-alignment-popup.tsx +++ b/app/components/dashboard/strategic-alignment-popup.tsx @@ -132,7 +132,7 @@ export function StrategicAlignmentPopup({ - میزان انطباق راهبردی + میزان انطباق راهبردی {loading ? ( @@ -155,10 +155,9 @@ export function StrategicAlignmentPopup({ axisLine={false} tickMargin={10} interval={0} - style={{ fill: "#94a3b8", fontSize: 12 }} + style={{ fill: "#94a3b8", fontSize: 14 }} tick={(props) => { const { x, y, payload } = props; - console.log(payload) return ( @@ -175,10 +174,10 @@ export function StrategicAlignmentPopup({ domain={[0, 100]} tickLine={false} axisLine={false} - tickMargin={8} + tickMargin={20} tick={{ fill: "#94a3b8", fontSize: 12 }} tickFormatter={(value) => - `${formatNumber(Math.round(value))}%` + `${formatNumber(Math.round(value))}` } @@ -187,7 +186,7 @@ export function StrategicAlignmentPopup({ angle: -90, position: "insideLeft", fill: "#94a3b8", - fontSize: 14, + fontSize: 11, offset: 0, dy: 0, style: { textAnchor: "middle" }, @@ -201,12 +200,14 @@ export function StrategicAlignmentPopup({ `${formatNumber(Math.round(v))}%`} + formatter={(v: number) => `${formatNumber(Math.round(v))}`} /> diff --git a/tailwind.config.js b/tailwind.config.js index a5ae169..b6d5066 100644 --- a/tailwind.config.js +++ b/tailwind.config.js @@ -1,9 +1,16 @@ module.exports = { + content: [ + "./index.html", + "./src/**/*.{js,ts,jsx,tsx}", + ], theme: { extend: { colors: { + green: '#3AEA83', + blue: '#69C8EA', + red: '#F76276', } }, }, + plugins: [], }; -