fix: the styles,and components
This commit is contained in:
parent
efb1990a55
commit
275e49f678
|
|
@ -594,8 +594,8 @@ export function DashboardHome() {
|
|||
<p className="p-6 font-persian font-semibold text-lg ">
|
||||
تحقق ارزش ها
|
||||
</p>
|
||||
<TabsList className="bg-transparent py-2 border m-6 border-gray-600">
|
||||
<TabsTrigger value="canvas" className="cursor-pointer">
|
||||
<TabsList className="bg-transparent py-2 m-6 border-[1px] border-[#5F6284]">
|
||||
<TabsTrigger value="canvas" className="cursor-pointer">
|
||||
شماتیک
|
||||
</TabsTrigger>
|
||||
<TabsTrigger value="charts" className=" text-white cursor-pointer font-light ">
|
||||
|
|
|
|||
|
|
@ -932,15 +932,7 @@ export function ManageIdeasTechPage() {
|
|||
|
||||
{/* Infinite scroll trigger */}
|
||||
<div ref={observerRef} className="h-auto">
|
||||
{loadingMore && (
|
||||
<div className="flex items-center justify-center py-2">
|
||||
<div className="flex items-center gap-2">
|
||||
<RefreshCw className="w-4 h-4 animate-spin text-success" />
|
||||
<span className="font-persian text-muted-foreground text-sm">
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
</div>
|
||||
</CardContent>
|
||||
|
||||
|
|
@ -951,10 +943,19 @@ export function ManageIdeasTechPage() {
|
|||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
{loadingMore && (
|
||||
<div className="flex items-center justify-center py-2">
|
||||
<div className="flex items-center gap-2">
|
||||
<RefreshCw className="w-4 h-4 animate-spin text-success" />
|
||||
<span className="font-persian text-muted-foreground text-sm">
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
{/* Chart Section */}
|
||||
<BaseCard icon={TrendingUp} className="col-span-1 mt-12 row-start-2 col-start-3 row-span-1" title="نمودار ایدهها">
|
||||
<MemoizedVerticalBarChart
|
||||
<MemoizedVerticalBarChart
|
||||
chartData={chartData}
|
||||
loadingChart={loadingChart}
|
||||
chartConfig={chartConfig}
|
||||
|
|
|
|||
|
|
@ -756,7 +756,7 @@ export function ProductInnovationPage() {
|
|||
</div>
|
||||
|
||||
{/* Funnel Chart */}
|
||||
<Card className="bg-[linear-gradient(to_bottom_left,#464861,50%,#111628)] h-full backdrop-blur-sm rounded-2xl w-full overflow-hidden">
|
||||
<Card className=" bg-[linear-gradient(to_bottom_left,#464861,50%,#111628)] h-full 2xl:h-auto pb-8 backdrop-blur-sm rounded-2xl w-full overflow-hidden">
|
||||
<CardContent className="px-0 py-4">
|
||||
<FunnelChart
|
||||
title="قيف فرآیند پروژه ها"
|
||||
|
|
|
|||
|
|
@ -13,6 +13,7 @@ interface FunnelChartProps {
|
|||
title?: string;
|
||||
className?: string;
|
||||
}
|
||||
const greenColors = ["#3C9F71","#3BC47A","#3BC47A","#3BD77E","#3AEA83"]
|
||||
|
||||
export function FunnelChart({ data, title, className = "" }: FunnelChartProps) {
|
||||
const maxValue = Math.max(...data.map(d => d.value));
|
||||
|
|
@ -20,7 +21,7 @@ export function FunnelChart({ data, title, className = "" }: FunnelChartProps) {
|
|||
if (!maxValue || maxValue <= 0) return 0;
|
||||
return Math.round((value / maxValue) * 100);
|
||||
};
|
||||
|
||||
|
||||
return (
|
||||
<div className={`w-full ${className}`}>
|
||||
{title && (
|
||||
|
|
@ -28,7 +29,7 @@ export function FunnelChart({ data, title, className = "" }: FunnelChartProps) {
|
|||
{title}
|
||||
</h3>
|
||||
)}
|
||||
|
||||
|
||||
<div className="flex px-4 flex-col items-center gap-2 space-y-2">
|
||||
{/* Start Process Line */}
|
||||
<div className="flex items-center w-full gap-10 mt-6 px-4">
|
||||
|
|
@ -47,18 +48,18 @@ export function FunnelChart({ data, title, className = "" }: FunnelChartProps) {
|
|||
{data.map((item, index) => {
|
||||
const widthPercentage = toPercent(item.value);
|
||||
const barWidth = Math.max(20, widthPercentage); // Minimum 20% width
|
||||
|
||||
|
||||
return (
|
||||
<div key={index} className="grid grid-cols-[6rem_1fr] gap-2 w-full">
|
||||
<div className="text-sm font-light text-white cols-start-1 justify-self-start font-thin min-w-[max-content] text-center">
|
||||
<div className="text-sm font-light text-white font-persian cols-start-1 justify-self-start min-w-[max-content] text-center">
|
||||
{item.label}
|
||||
</div>
|
||||
<div className="flex items-center gap-10 w-full cols-start-2 flex items-center justify-center w-full">
|
||||
<div className="flex items-center gap-10 w-full cols-start-2 justify-center">
|
||||
<div className="flex items-center w-full">
|
||||
<div style={{ width: `${(100 - barWidth) / 2}%` }} />
|
||||
<div
|
||||
className="bg-[#3BC47A] h-8 rounded-2xl flex items-center justify-center text-lg relative"
|
||||
style={{ width: `${barWidth}%` }}
|
||||
style={{ width: `${barWidth}%` ,backgroundColor : `${greenColors[index]}`}}
|
||||
>
|
||||
<span className="text-pr-gray text-base font-semibold">
|
||||
{item.value.toLocaleString('fa-IR')}
|
||||
|
|
|
|||
|
|
@ -19,7 +19,7 @@ const Progress = React.forwardRef<
|
|||
<span className="w-full right-0 text-sm absolute z-10 px-2 text-[#5F6284]"
|
||||
>{formatNumber(Math.ceil(value || 0 * 10) / 10)}%</span>
|
||||
<ProgressPrimitive.Indicator
|
||||
className="h-full w-full flex-1 bg-primary transition-all"
|
||||
className="h-full w-full flex-1 bg-pr-green transition-all"
|
||||
style={{ transform: `translateX(-${15 - (value || 0)}%)` }}
|
||||
/>
|
||||
</ProgressPrimitive.Root>
|
||||
|
|
|
|||
|
|
@ -81,7 +81,7 @@ export function TabsTrigger({
|
|||
className={cn(
|
||||
"inline-flex items-center justify-center whitespace-nowrap rounded-sm px-3 py-1.5 text-sm font-medium ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50",
|
||||
isActive
|
||||
? "bg-gray-700 text-foreground shadow-sm"
|
||||
? "bg-pr-gray text-foreground shadow-sm"
|
||||
: "hover:bg-muted/50",
|
||||
className,
|
||||
)}
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user