Compare commits
No commits in common. "8cce0a0580db8873e0e64ea86bda6e9800738f76" and "676e3b5cf629133fa25c071f7aebe6fb21914c4a" have entirely different histories.
8cce0a0580
...
676e3b5cf6
|
|
@ -1,241 +0,0 @@
|
||||||
"use client";
|
|
||||||
|
|
||||||
import React, { useEffect, useRef, useState } from "react";
|
|
||||||
import * as d3 from "d3";
|
|
||||||
import {
|
|
||||||
Dialog,
|
|
||||||
DialogContent,
|
|
||||||
DialogDescription,
|
|
||||||
DialogHeader,
|
|
||||||
DialogTitle,
|
|
||||||
} from "~/components/ui/dialog";
|
|
||||||
|
|
||||||
export type D3ImageInfoProps = {
|
|
||||||
imageUrl?: string;
|
|
||||||
title?: string;
|
|
||||||
description?: string;
|
|
||||||
width?: number; // fallback width if container size not measured yet
|
|
||||||
height?: number; // fallback height
|
|
||||||
};
|
|
||||||
|
|
||||||
/**
|
|
||||||
* D3ImageInfo
|
|
||||||
* - Renders an image and an information box beside it using D3 within an SVG.
|
|
||||||
* - Includes a clickable "show" chip that opens a popup dialog with more details.
|
|
||||||
*/
|
|
||||||
export function D3ImageInfo({
|
|
||||||
imageUrl = "/placeholder.svg",
|
|
||||||
title = "عنوان آیتم",
|
|
||||||
description = "توضیحات تکمیلی در مورد این آیتم در این قسمت نمایش داده میشود.",
|
|
||||||
width = 800,
|
|
||||||
height = 360,
|
|
||||||
}: D3ImageInfoProps) {
|
|
||||||
const containerRef = useRef<HTMLDivElement | null>(null);
|
|
||||||
const svgRef = useRef<SVGSVGElement | null>(null);
|
|
||||||
const [open, setOpen] = useState(false);
|
|
||||||
|
|
||||||
// Redraw helper
|
|
||||||
const draw = () => {
|
|
||||||
if (!containerRef.current || !svgRef.current) return;
|
|
||||||
|
|
||||||
const container = containerRef.current;
|
|
||||||
const svg = d3.select(svgRef.current);
|
|
||||||
|
|
||||||
const W = Math.max(480, container.clientWidth || width);
|
|
||||||
const H = Math.max(260, height);
|
|
||||||
|
|
||||||
svg.attr("width", W).attr("height", H);
|
|
||||||
|
|
||||||
// Clear previous content
|
|
||||||
svg.selectAll("*").remove();
|
|
||||||
|
|
||||||
// Layout
|
|
||||||
const padding = 16;
|
|
||||||
const imageAreaWidth = Math.min(300, Math.max(220, W * 0.35));
|
|
||||||
const infoAreaX = padding + imageAreaWidth + padding;
|
|
||||||
const infoAreaWidth = W - infoAreaX - padding;
|
|
||||||
|
|
||||||
// Image area (with rounded border)
|
|
||||||
const imgGroup = svg
|
|
||||||
.append("g")
|
|
||||||
.attr("transform", `translate(${padding}, ${padding})`);
|
|
||||||
|
|
||||||
const imgW = imageAreaWidth;
|
|
||||||
const imgH = H - 2 * padding;
|
|
||||||
|
|
||||||
// Frame
|
|
||||||
imgGroup
|
|
||||||
.append("rect")
|
|
||||||
.attr("width", imgW)
|
|
||||||
.attr("height", imgH)
|
|
||||||
.attr("rx", 10)
|
|
||||||
.attr("ry", 10)
|
|
||||||
.attr("fill", "#1F2937") // gray-800
|
|
||||||
.attr("stroke", "#4B5563") // gray-600
|
|
||||||
.attr("stroke-width", 1.5);
|
|
||||||
|
|
||||||
// Image
|
|
||||||
imgGroup
|
|
||||||
.append("image")
|
|
||||||
.attr("href", imageUrl)
|
|
||||||
.attr("x", 4)
|
|
||||||
.attr("y", 4)
|
|
||||||
.attr("width", imgW - 8)
|
|
||||||
.attr("height", imgH - 8)
|
|
||||||
.attr("preserveAspectRatio", "xMidYMid slice")
|
|
||||||
.attr("clip-path", null);
|
|
||||||
|
|
||||||
// Info area
|
|
||||||
const infoGroup = svg
|
|
||||||
.append("g")
|
|
||||||
.attr("transform", `translate(${infoAreaX}, ${padding})`);
|
|
||||||
|
|
||||||
// Info container
|
|
||||||
infoGroup
|
|
||||||
.append("rect")
|
|
||||||
.attr("width", Math.max(220, infoAreaWidth))
|
|
||||||
.attr("height", imgH)
|
|
||||||
.attr("rx", 12)
|
|
||||||
.attr("ry", 12)
|
|
||||||
.attr("fill", "url(#infoGradient)")
|
|
||||||
.attr("stroke", "#6B7280") // gray-500
|
|
||||||
.attr("stroke-width", 1);
|
|
||||||
|
|
||||||
// Background gradient
|
|
||||||
const defs = svg.append("defs");
|
|
||||||
const gradient = defs
|
|
||||||
.append("linearGradient")
|
|
||||||
.attr("id", "infoGradient")
|
|
||||||
.attr("x1", "0%")
|
|
||||||
.attr("y1", "0%")
|
|
||||||
.attr("x2", "0%")
|
|
||||||
.attr("y2", "100%");
|
|
||||||
|
|
||||||
gradient.append("stop").attr("offset", "0%").attr("stop-color", "#111827"); // gray-900
|
|
||||||
gradient
|
|
||||||
.append("stop")
|
|
||||||
.attr("offset", "100%")
|
|
||||||
.attr("stop-color", "#374151"); // gray-700
|
|
||||||
|
|
||||||
// Title
|
|
||||||
infoGroup
|
|
||||||
.append("text")
|
|
||||||
.attr("x", 16)
|
|
||||||
.attr("y", 36)
|
|
||||||
.attr("fill", "#F9FAFB") // gray-50
|
|
||||||
.attr("font-weight", 700)
|
|
||||||
.attr("font-size", 18)
|
|
||||||
.text(title);
|
|
||||||
|
|
||||||
// Description (wrapped)
|
|
||||||
const wrapText = (text: string, maxWidth: number) => {
|
|
||||||
const words = text.split(/\s+/).reverse();
|
|
||||||
const lines: string[] = [];
|
|
||||||
let line: string[] = [];
|
|
||||||
let t = "";
|
|
||||||
while (words.length) {
|
|
||||||
const word = words.pop()!;
|
|
||||||
const test = (t + " " + word).trim();
|
|
||||||
// Approximate measure using character count
|
|
||||||
const tooLong = test.length * 8 > maxWidth; // 8px avg char width
|
|
||||||
if (tooLong && t.length) {
|
|
||||||
lines.push(t);
|
|
||||||
t = word;
|
|
||||||
} else {
|
|
||||||
t = test;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
if (t) lines.push(t);
|
|
||||||
return lines;
|
|
||||||
};
|
|
||||||
|
|
||||||
const descMaxWidth = Math.max(200, infoAreaWidth - 32);
|
|
||||||
const descLines = wrapText(description, descMaxWidth);
|
|
||||||
|
|
||||||
descLines.forEach((line, i) => {
|
|
||||||
infoGroup
|
|
||||||
.append("text")
|
|
||||||
.attr("x", 16)
|
|
||||||
.attr("y", 70 + i * 22)
|
|
||||||
.attr("fill", "#E5E7EB") // gray-200
|
|
||||||
.attr("font-size", 14)
|
|
||||||
.text(line);
|
|
||||||
});
|
|
||||||
|
|
||||||
// Show button-like chip
|
|
||||||
const chipY = Math.min(imgH - 48, 70 + descLines.length * 22 + 16);
|
|
||||||
const chip = infoGroup
|
|
||||||
.append("g")
|
|
||||||
.attr("class", "show-chip")
|
|
||||||
.style("cursor", "pointer");
|
|
||||||
|
|
||||||
const chipW = 120;
|
|
||||||
const chipH = 36;
|
|
||||||
|
|
||||||
chip
|
|
||||||
.append("rect")
|
|
||||||
.attr("x", 16)
|
|
||||||
.attr("y", chipY)
|
|
||||||
.attr("width", chipW)
|
|
||||||
.attr("height", chipH)
|
|
||||||
.attr("rx", 8)
|
|
||||||
.attr("ry", 8)
|
|
||||||
.attr("fill", "#3B82F6") // blue-500
|
|
||||||
.attr("stroke", "#60A5FA")
|
|
||||||
.attr("stroke-width", 1.5)
|
|
||||||
.attr("opacity", 0.95);
|
|
||||||
|
|
||||||
chip
|
|
||||||
.append("text")
|
|
||||||
.attr("x", 16 + chipW / 2)
|
|
||||||
.attr("y", chipY + chipH / 2 + 5)
|
|
||||||
.attr("text-anchor", "middle")
|
|
||||||
.attr("fill", "#FFFFFF")
|
|
||||||
.attr("font-weight", 700)
|
|
||||||
.text("نمایش");
|
|
||||||
|
|
||||||
// Hover & click
|
|
||||||
chip
|
|
||||||
.on("mouseenter", function () {
|
|
||||||
d3.select(this).select("rect").attr("fill", "#2563EB"); // blue-600
|
|
||||||
})
|
|
||||||
.on("mouseleave", function () {
|
|
||||||
d3.select(this).select("rect").attr("fill", "#3B82F6"); // blue-500
|
|
||||||
})
|
|
||||||
.on("click", () => setOpen(true));
|
|
||||||
};
|
|
||||||
|
|
||||||
useEffect(() => {
|
|
||||||
const ro = new ResizeObserver(() => draw());
|
|
||||||
if (containerRef.current) ro.observe(containerRef.current);
|
|
||||||
draw();
|
|
||||||
return () => ro.disconnect();
|
|
||||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
||||||
}, [imageUrl, title, description]);
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div className="w-full h-full">
|
|
||||||
<div ref={containerRef} className="w-full h-[380px]">
|
|
||||||
<svg ref={svgRef} className="block w-full h-full"></svg>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<Dialog open={open} onOpenChange={setOpen}>
|
|
||||||
<DialogContent className="sm:max-w-[520px]">
|
|
||||||
<DialogHeader>
|
|
||||||
<DialogTitle className="font-persian">{title}</DialogTitle>
|
|
||||||
<DialogDescription className="font-persian">
|
|
||||||
{description}
|
|
||||||
</DialogDescription>
|
|
||||||
</DialogHeader>
|
|
||||||
<div className="mt-4">
|
|
||||||
<img
|
|
||||||
src={imageUrl}
|
|
||||||
alt={title}
|
|
||||||
className="w-full h-60 object-cover rounded-md border border-gray-700"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</DialogContent>
|
|
||||||
</Dialog>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
@ -1,74 +0,0 @@
|
||||||
import React from "react";
|
|
||||||
import { formatNumber } from "~/lib/utils";
|
|
||||||
|
|
||||||
interface DataItem {
|
|
||||||
label: string;
|
|
||||||
value: number;
|
|
||||||
color: string;
|
|
||||||
}
|
|
||||||
|
|
||||||
interface DashboardCustomBarChartProps {
|
|
||||||
title: string;
|
|
||||||
data: DataItem[];
|
|
||||||
loading?: boolean;
|
|
||||||
}
|
|
||||||
|
|
||||||
export function DashboardCustomBarChart({
|
|
||||||
title,
|
|
||||||
data,
|
|
||||||
loading = false,
|
|
||||||
}: DashboardCustomBarChartProps) {
|
|
||||||
if (loading) {
|
|
||||||
return (
|
|
||||||
<div className="w-full">
|
|
||||||
<h3 className="text-lg font-bold text-white font-persian mb-4 text-center border-b-2 border-gray-500/20 pb-3">
|
|
||||||
{title}
|
|
||||||
</h3>
|
|
||||||
<div className="space-y-3">
|
|
||||||
{[1, 2, 3].map((i) => (
|
|
||||||
<div key={i} className="animate-pulse">
|
|
||||||
<div className="h-12 bg-gray-600/30 rounded-lg"></div>
|
|
||||||
</div>
|
|
||||||
))}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
// Calculate the maximum value for scaling
|
|
||||||
const maxValue = Math.max(...data.map((item) => item.value));
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div className="w-full">
|
|
||||||
<h3 className="text-lg font-bold text-white font-persian mb-4 text-center border-b-2 border-gray-500/20">
|
|
||||||
{title}
|
|
||||||
</h3>
|
|
||||||
<div className="px-4">
|
|
||||||
{data.map((item, index) => {
|
|
||||||
const widthPercentage =
|
|
||||||
maxValue > 0 ? (item.value / maxValue) * 100 : 0;
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div key={index} className="relative">
|
|
||||||
{/* Bar container */}
|
|
||||||
<div className="relative min-h-6 h-10 rounded-lg overflow-hidden">
|
|
||||||
{/* Animated bar */}
|
|
||||||
<div
|
|
||||||
className={`absolute left-0 h-auto gap-2 top-0 ${item.color} rounded-lg transition-all duration-1000 ease-out flex items-center justify-between px-2`}
|
|
||||||
style={{ width: `${widthPercentage}%` }}
|
|
||||||
>
|
|
||||||
<span className="text-white font-bold text-base">
|
|
||||||
{formatNumber(item.value)}
|
|
||||||
</span>
|
|
||||||
<span className="text-white font-persian font-medium text-sm w-max">
|
|
||||||
{item.label}
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
})}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
File diff suppressed because it is too large
Load Diff
|
|
@ -144,8 +144,145 @@ export function DashboardHome() {
|
||||||
<path d="m22 21-3-3" />
|
<path d="m22 21-3-3" />
|
||||||
</svg>
|
</svg>
|
||||||
</CardHeader>
|
</CardHeader>
|
||||||
|
<CardContent>
|
||||||
|
<div className="text-2xl font-bold">24</div>
|
||||||
|
<p className="text-xs text-muted-foreground font-persian">
|
||||||
|
+2 از ماه گذشته
|
||||||
|
</p>
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
|
||||||
|
<Card>
|
||||||
|
<CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
|
||||||
|
<CardTitle className="text-sm font-medium font-persian">
|
||||||
|
پروژههای فعال
|
||||||
|
</CardTitle>
|
||||||
|
<svg
|
||||||
|
className="h-4 w-4 text-muted-foreground"
|
||||||
|
fill="none"
|
||||||
|
stroke="currentColor"
|
||||||
|
strokeLinecap="round"
|
||||||
|
strokeLinejoin="round"
|
||||||
|
strokeWidth="2"
|
||||||
|
viewBox="0 0 24 24"
|
||||||
|
>
|
||||||
|
<rect width="20" height="14" x="2" y="5" rx="2" />
|
||||||
|
<path d="M2 10h20" />
|
||||||
|
</svg>
|
||||||
|
</CardHeader>
|
||||||
|
<CardContent>
|
||||||
|
<div className="text-2xl font-bold">12</div>
|
||||||
|
<p className="text-xs text-muted-foreground font-persian">
|
||||||
|
+1 از هفته گذشته
|
||||||
|
</p>
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
|
||||||
|
<Card>
|
||||||
|
<CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
|
||||||
|
<CardTitle className="text-sm font-medium font-persian">
|
||||||
|
پروژههای تکمیل شده
|
||||||
|
</CardTitle>
|
||||||
|
<svg
|
||||||
|
className="h-4 w-4 text-muted-foreground"
|
||||||
|
fill="none"
|
||||||
|
stroke="currentColor"
|
||||||
|
strokeLinecap="round"
|
||||||
|
strokeLinejoin="round"
|
||||||
|
strokeWidth="2"
|
||||||
|
viewBox="0 0 24 24"
|
||||||
|
>
|
||||||
|
<path d="M22 12h-4l-3 9L9 3l-3 9H2" />
|
||||||
|
</svg>
|
||||||
|
</CardHeader>
|
||||||
|
<CardContent>
|
||||||
|
<div className="text-2xl font-bold">8</div>
|
||||||
|
<p className="text-xs text-muted-foreground font-persian">
|
||||||
|
+3 از ماه گذشته
|
||||||
|
</p>
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
|
||||||
|
<Card>
|
||||||
|
<CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
|
||||||
|
<CardTitle className="text-sm font-medium font-persian">
|
||||||
|
درصد موفقیت
|
||||||
|
</CardTitle>
|
||||||
|
<svg
|
||||||
|
className="h-4 w-4 text-muted-foreground"
|
||||||
|
fill="none"
|
||||||
|
stroke="currentColor"
|
||||||
|
strokeLinecap="round"
|
||||||
|
strokeLinejoin="round"
|
||||||
|
strokeWidth="2"
|
||||||
|
viewBox="0 0 24 24"
|
||||||
|
>
|
||||||
|
<path d="M12 2v20m8-10H4" />
|
||||||
|
</svg>
|
||||||
|
</CardHeader>
|
||||||
|
<CardContent>
|
||||||
|
<div className="text-2xl font-bold">85%</div>
|
||||||
|
<p className="text-xs text-muted-foreground font-persian">
|
||||||
|
+5% از ماه گذشته
|
||||||
|
</p>
|
||||||
|
</CardContent>
|
||||||
</Card>
|
</Card>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
{/* Recent Projects */}
|
||||||
|
<Card>
|
||||||
|
<CardHeader>
|
||||||
|
<CardTitle className="font-persian">پروژههای اخیر</CardTitle>
|
||||||
|
</CardHeader>
|
||||||
|
<CardContent>
|
||||||
|
<div className="space-y-4">
|
||||||
|
{[
|
||||||
|
{
|
||||||
|
name: "سیستم مدیریت محتوا",
|
||||||
|
status: "در حال انجام",
|
||||||
|
progress: 75,
|
||||||
|
},
|
||||||
|
{ name: "اپلیکیشن موبایل", status: "تکمیل شده", progress: 100 },
|
||||||
|
{
|
||||||
|
name: "پلتفرم تجارت الکترونیک",
|
||||||
|
status: "شروع شده",
|
||||||
|
progress: 25,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "سیستم مدیریت مالی",
|
||||||
|
status: "در حال بررسی",
|
||||||
|
progress: 10,
|
||||||
|
},
|
||||||
|
].map((project, index) => (
|
||||||
|
<div
|
||||||
|
key={index}
|
||||||
|
className="flex items-center space-x-4 space-x-reverse"
|
||||||
|
>
|
||||||
|
<div className="w-2 h-2 bg-green-500 rounded-full"></div>
|
||||||
|
<div className="flex-1 min-w-0">
|
||||||
|
<p className="text-sm font-medium text-gray-900 dark:text-white font-persian">
|
||||||
|
{project.name}
|
||||||
|
</p>
|
||||||
|
<p className="text-sm text-gray-500 dark:text-gray-400 font-persian">
|
||||||
|
{project.status}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<div className="flex items-center space-x-2 space-x-reverse">
|
||||||
|
<div className="w-16 bg-gray-200 rounded-full h-2 dark:bg-gray-700">
|
||||||
|
<div
|
||||||
|
className="bg-green-600 h-2 rounded-full"
|
||||||
|
style={{ width: `${project.progress}%` }}
|
||||||
|
></div>
|
||||||
|
</div>
|
||||||
|
<span className="text-sm text-gray-500 dark:text-gray-400">
|
||||||
|
{project.progress}%
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
</div>
|
</div>
|
||||||
</DashboardLayout>
|
</DashboardLayout>
|
||||||
);
|
);
|
||||||
|
|
|
||||||
|
|
@ -4,7 +4,7 @@ import { Link } from "react-router";
|
||||||
import { cn } from "~/lib/utils";
|
import { cn } from "~/lib/utils";
|
||||||
import { Button } from "~/components/ui/button";
|
import { Button } from "~/components/ui/button";
|
||||||
import {
|
import {
|
||||||
PanelLeft,
|
PanelLeft,
|
||||||
Search,
|
Search,
|
||||||
Bell,
|
Bell,
|
||||||
Settings,
|
Settings,
|
||||||
|
|
@ -54,9 +54,7 @@ export function Header({
|
||||||
)}
|
)}
|
||||||
|
|
||||||
{/* Page Title */}
|
{/* Page Title */}
|
||||||
<h1 className="text-xl flex items-center justify-center gap-4 font-bold text-white font-persian">
|
<h1 className="text-xl flex items-center justify-center gap-4 font-bold text-white font-persian"><PanelLeft /> {title}</h1>
|
||||||
<PanelLeft /> {title}
|
|
||||||
</h1>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{/* Right Section */}
|
{/* Right Section */}
|
||||||
|
|
|
||||||
|
|
@ -1,125 +0,0 @@
|
||||||
import { Bar, BarChart, CartesianGrid, XAxis, YAxis, LabelList } from "recharts";
|
|
||||||
import React, { useState, useEffect } from "react";
|
|
||||||
|
|
||||||
import {
|
|
||||||
Card,
|
|
||||||
CardContent,
|
|
||||||
CardDescription,
|
|
||||||
CardHeader,
|
|
||||||
CardTitle,
|
|
||||||
} from "~/components/ui/card";
|
|
||||||
import {
|
|
||||||
type ChartConfig,
|
|
||||||
ChartContainer,
|
|
||||||
ChartTooltip,
|
|
||||||
ChartTooltipContent,
|
|
||||||
} from "~/components/ui/chart";
|
|
||||||
|
|
||||||
export const description = "An interactive bar chart";
|
|
||||||
|
|
||||||
const chartData = [
|
|
||||||
{ category: "کیمیا", ideas: 12, revenue: 850, cost: 320 },
|
|
||||||
{ category: "ُفرآروزش", ideas: 19, revenue: 1200, cost: 450 },
|
|
||||||
{ category: "خوارزمی", ideas: 15, revenue: 1400, cost: 520 },
|
|
||||||
];
|
|
||||||
|
|
||||||
const chartConfig = {
|
|
||||||
ideas: {
|
|
||||||
label: "ایدهها",
|
|
||||||
color: "#60A5FA", // Blue-400
|
|
||||||
},
|
|
||||||
revenue: {
|
|
||||||
label: "درآمد (میلیون)",
|
|
||||||
color: "#4ADE80", // Green-400
|
|
||||||
},
|
|
||||||
cost: {
|
|
||||||
label: "کاهش هزینه (میلیون)",
|
|
||||||
color: "#F87171", // Red-400
|
|
||||||
},
|
|
||||||
} satisfies ChartConfig;
|
|
||||||
|
|
||||||
export function InteractiveBarChart() {
|
|
||||||
const [activeChart, setActiveChart] =
|
|
||||||
React.useState<keyof typeof chartConfig>("ideas");
|
|
||||||
|
|
||||||
const total = React.useMemo(
|
|
||||||
() => ({
|
|
||||||
ideas: chartData.reduce((acc, curr) => acc + curr.ideas, 0),
|
|
||||||
revenue: chartData.reduce((acc, curr) => acc + curr.revenue, 0),
|
|
||||||
cost: chartData.reduce((acc, curr) => acc + curr.cost, 0),
|
|
||||||
}),
|
|
||||||
[],
|
|
||||||
);
|
|
||||||
|
|
||||||
return (
|
|
||||||
<Card className="py-0 bg-transparent mt-20 border-none h-full">
|
|
||||||
<CardContent className="px-2 sm:p-6 bg-transparent">
|
|
||||||
<ChartContainer
|
|
||||||
config={chartConfig}
|
|
||||||
className="aspect-auto h-96 w-full"
|
|
||||||
>
|
|
||||||
<BarChart
|
|
||||||
accessibilityLayer
|
|
||||||
data={chartData}
|
|
||||||
margin={{
|
|
||||||
left: 12,
|
|
||||||
right: 12,
|
|
||||||
}}
|
|
||||||
barCategoryGap="42%"
|
|
||||||
>
|
|
||||||
<CartesianGrid vertical={false} stroke="#475569" />
|
|
||||||
<XAxis
|
|
||||||
dataKey="category"
|
|
||||||
tickLine={false}
|
|
||||||
axisLine={false}
|
|
||||||
tickMargin={8}
|
|
||||||
minTickGap={32}
|
|
||||||
tick={{ fill: "#94a3b8", fontSize: 12 }}
|
|
||||||
/>
|
|
||||||
<YAxis
|
|
||||||
domain={[0, 100]}
|
|
||||||
tickLine={false}
|
|
||||||
axisLine={false}
|
|
||||||
tickMargin={8}
|
|
||||||
tick={{ fill: "#94a3b8", fontSize: 12 }}
|
|
||||||
tickFormatter={(value) => `${value}%`}
|
|
||||||
/>
|
|
||||||
<Bar
|
|
||||||
dataKey="ideas"
|
|
||||||
fill={chartConfig.ideas.color}
|
|
||||||
radius={[8, 8, 0, 0]}
|
|
||||||
>
|
|
||||||
<LabelList
|
|
||||||
dataKey="ideas"
|
|
||||||
position="top"
|
|
||||||
style={{ fill: "#ffffff", fontSize: "12px", fontWeight: "bold" }}
|
|
||||||
/>
|
|
||||||
</Bar>
|
|
||||||
<Bar
|
|
||||||
dataKey="revenue"
|
|
||||||
fill={chartConfig.revenue.color}
|
|
||||||
radius={[8, 8, 0, 0]}
|
|
||||||
>
|
|
||||||
<LabelList
|
|
||||||
dataKey="revenue"
|
|
||||||
position="top"
|
|
||||||
style={{ fill: "#ffffff", fontSize: "12px", fontWeight: "bold" }}
|
|
||||||
/>
|
|
||||||
</Bar>
|
|
||||||
<Bar
|
|
||||||
dataKey="cost"
|
|
||||||
fill={chartConfig.cost.color}
|
|
||||||
radius={[8, 8, 0, 0]}
|
|
||||||
>
|
|
||||||
<LabelList
|
|
||||||
dataKey="cost"
|
|
||||||
position="top"
|
|
||||||
style={{ fill: "#ffffff", fontSize: "12px", fontWeight: "bold" }}
|
|
||||||
/>
|
|
||||||
</Bar>
|
|
||||||
</BarChart>
|
|
||||||
</ChartContainer>
|
|
||||||
</CardContent>
|
|
||||||
</Card>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
@ -153,7 +153,7 @@ export function Sidebar({
|
||||||
menuItems.forEach((item) => {
|
menuItems.forEach((item) => {
|
||||||
if (item.children) {
|
if (item.children) {
|
||||||
const hasActiveChild = item.children.some(
|
const hasActiveChild = item.children.some(
|
||||||
(child) => child.href && location.pathname === child.href,
|
(child) => child.href && location.pathname === child.href
|
||||||
);
|
);
|
||||||
if (hasActiveChild) {
|
if (hasActiveChild) {
|
||||||
newExpandedItems.push(item.id);
|
newExpandedItems.push(item.id);
|
||||||
|
|
@ -171,10 +171,10 @@ export function Sidebar({
|
||||||
setExpandedItems((prev) => {
|
setExpandedItems((prev) => {
|
||||||
// If trying to collapse, check if any child is active
|
// If trying to collapse, check if any child is active
|
||||||
if (prev.includes(itemId)) {
|
if (prev.includes(itemId)) {
|
||||||
const item = menuItems.find((menuItem) => menuItem.id === itemId);
|
const item = menuItems.find(menuItem => menuItem.id === itemId);
|
||||||
if (item?.children) {
|
if (item?.children) {
|
||||||
const hasActiveChild = item.children.some(
|
const hasActiveChild = item.children.some(
|
||||||
(child) => child.href && location.pathname === child.href,
|
(child) => child.href && location.pathname === child.href
|
||||||
);
|
);
|
||||||
// Don't collapse if a child is active
|
// Don't collapse if a child is active
|
||||||
if (hasActiveChild) {
|
if (hasActiveChild) {
|
||||||
|
|
@ -200,11 +200,9 @@ export function Sidebar({
|
||||||
|
|
||||||
const renderMenuItem = (item: MenuItem, level = 0) => {
|
const renderMenuItem = (item: MenuItem, level = 0) => {
|
||||||
const isActive = isActiveRoute(item.href, item.children);
|
const isActive = isActiveRoute(item.href, item.children);
|
||||||
const isExpanded =
|
const isExpanded = expandedItems.includes(item.id) ||
|
||||||
expandedItems.includes(item.id) ||
|
(item.children && item.children.some(child =>
|
||||||
(item.children &&
|
child.href && location.pathname === child.href
|
||||||
item.children.some(
|
|
||||||
(child) => child.href && location.pathname === child.href,
|
|
||||||
));
|
));
|
||||||
const hasChildren = item.children && item.children.length > 0;
|
const hasChildren = item.children && item.children.length > 0;
|
||||||
|
|
||||||
|
|
@ -230,8 +228,7 @@ export function Sidebar({
|
||||||
? " text-emerald-400 border-r-2 border-emerald-400"
|
? " text-emerald-400 border-r-2 border-emerald-400"
|
||||||
: "text-gray-300 hover:bg-gradient-to-r hover:from-emerald-500/10 hover:to-teal-500/10 hover:text-emerald-300",
|
: "text-gray-300 hover:bg-gradient-to-r hover:from-emerald-500/10 hover:to-teal-500/10 hover:text-emerald-300",
|
||||||
isCollapsed && level === 0 && "justify-center px-2",
|
isCollapsed && level === 0 && "justify-center px-2",
|
||||||
item.id === "logout" &&
|
item.id === "logout" && "hover:bg-red-500/10 hover:text-red-400",
|
||||||
"hover:bg-red-500/10 hover:text-red-400",
|
|
||||||
)}
|
)}
|
||||||
>
|
>
|
||||||
<div className="flex items-center gap-3 min-w-0 flex-1">
|
<div className="flex items-center gap-3 min-w-0 flex-1">
|
||||||
|
|
@ -272,11 +269,9 @@ export function Sidebar({
|
||||||
className={cn(
|
className={cn(
|
||||||
"w-full text-right",
|
"w-full text-right",
|
||||||
// Disable pointer cursor when child is active (cannot collapse)
|
// Disable pointer cursor when child is active (cannot collapse)
|
||||||
item.children &&
|
item.children && item.children.some(child =>
|
||||||
item.children.some(
|
child.href && location.pathname === child.href
|
||||||
(child) => child.href && location.pathname === child.href,
|
) && "cursor-not-allowed"
|
||||||
) &&
|
|
||||||
"cursor-not-allowed",
|
|
||||||
)}
|
)}
|
||||||
onClick={handleClick}
|
onClick={handleClick}
|
||||||
>
|
>
|
||||||
|
|
@ -288,8 +283,7 @@ export function Sidebar({
|
||||||
? " text-emerald-400 border-r-2 border-emerald-400"
|
? " text-emerald-400 border-r-2 border-emerald-400"
|
||||||
: "text-gray-300 hover:bg-gradient-to-r hover:from-emerald-500/10 hover:to-teal-500/10 hover:text-emerald-300",
|
: "text-gray-300 hover:bg-gradient-to-r hover:from-emerald-500/10 hover:to-teal-500/10 hover:text-emerald-300",
|
||||||
isCollapsed && level === 0 && "justify-center px-2",
|
isCollapsed && level === 0 && "justify-center px-2",
|
||||||
item.id === "logout" &&
|
item.id === "logout" && "hover:bg-red-500/10 hover:text-red-400",
|
||||||
"hover:bg-red-500/10 hover:text-red-400",
|
|
||||||
)}
|
)}
|
||||||
>
|
>
|
||||||
<div className="flex items-center gap-3 min-w-0 flex-1">
|
<div className="flex items-center gap-3 min-w-0 flex-1">
|
||||||
|
|
@ -319,13 +313,9 @@ export function Sidebar({
|
||||||
"w-4 h-4 transition-transform duration-200",
|
"w-4 h-4 transition-transform duration-200",
|
||||||
isExpanded ? "rotate-180" : "rotate-0",
|
isExpanded ? "rotate-180" : "rotate-0",
|
||||||
// Show different color when child is active (cannot collapse)
|
// Show different color when child is active (cannot collapse)
|
||||||
item.children &&
|
item.children && item.children.some(child =>
|
||||||
item.children.some(
|
child.href && location.pathname === child.href
|
||||||
(child) =>
|
) ? "text-emerald-400" : "text-current"
|
||||||
child.href && location.pathname === child.href,
|
|
||||||
)
|
|
||||||
? "text-emerald-400"
|
|
||||||
: "text-current",
|
|
||||||
)}
|
)}
|
||||||
/>
|
/>
|
||||||
)}
|
)}
|
||||||
|
|
@ -334,12 +324,14 @@ export function Sidebar({
|
||||||
</div>
|
</div>
|
||||||
</button>
|
</button>
|
||||||
)}
|
)}
|
||||||
|
|
||||||
{/* Submenu */}
|
{/* Submenu */}
|
||||||
{hasChildren && isExpanded && !isCollapsed && (
|
{hasChildren && isExpanded && !isCollapsed && (
|
||||||
<div className="mt-1 space-y-0.5">
|
<div className="mt-1 space-y-0.5">
|
||||||
{item.children?.map((child) => renderMenuItem(child, level + 1))}
|
{item.children?.map((child) => renderMenuItem(child, level + 1))}
|
||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
|
|
||||||
{/* Tooltip for collapsed state */}
|
{/* Tooltip for collapsed state */}
|
||||||
{isCollapsed && level === 0 && (
|
{isCollapsed && level === 0 && (
|
||||||
<div className="absolute right-full top-1/2 transform -translate-y-1/2 mr-2 opacity-0 group-hover:opacity-100 transition-opacity duration-200 pointer-events-none z-50">
|
<div className="absolute right-full top-1/2 transform -translate-y-1/2 mr-2 opacity-0 group-hover:opacity-100 transition-opacity duration-200 pointer-events-none z-50">
|
||||||
|
|
@ -383,12 +375,7 @@ export function Sidebar({
|
||||||
</div>
|
</div>
|
||||||
) : (
|
) : (
|
||||||
<div className="flex justify-center w-full">
|
<div className="flex justify-center w-full">
|
||||||
<GalleryVerticalEnd
|
<InogenLogo size="sm" />
|
||||||
color="black"
|
|
||||||
size={32}
|
|
||||||
strokeWidth={1}
|
|
||||||
className="bg-green-400 p-1.5 rounded-lg"
|
|
||||||
/>
|
|
||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
|
|
|
||||||
|
|
@ -16,23 +16,17 @@ interface TabsProps {
|
||||||
children: React.ReactNode;
|
children: React.ReactNode;
|
||||||
}
|
}
|
||||||
|
|
||||||
export function Tabs({
|
export function Tabs({ defaultValue, value, onValueChange, className, children }: TabsProps) {
|
||||||
defaultValue,
|
|
||||||
value,
|
|
||||||
onValueChange,
|
|
||||||
className,
|
|
||||||
children,
|
|
||||||
}: TabsProps) {
|
|
||||||
const [internalValue, setInternalValue] = useState(defaultValue || "");
|
const [internalValue, setInternalValue] = useState(defaultValue || "");
|
||||||
|
|
||||||
const currentValue = value ?? internalValue;
|
const currentValue = value ?? internalValue;
|
||||||
const handleValueChange = onValueChange ?? setInternalValue;
|
const handleValueChange = onValueChange ?? setInternalValue;
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<TabsContext.Provider
|
<TabsContext.Provider value={{ value: currentValue, onValueChange: handleValueChange }}>
|
||||||
value={{ value: currentValue, onValueChange: handleValueChange }}
|
<div className={cn("w-full", className)}>
|
||||||
>
|
{children}
|
||||||
<div className={cn("w-full", className)}>{children}</div>
|
</div>
|
||||||
</TabsContext.Provider>
|
</TabsContext.Provider>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
@ -44,12 +38,7 @@ interface TabsListProps {
|
||||||
|
|
||||||
export function TabsList({ className, children }: TabsListProps) {
|
export function TabsList({ className, children }: TabsListProps) {
|
||||||
return (
|
return (
|
||||||
<div
|
<div className={cn("inline-flex h-10 items-center justify-center rounded-md bg-muted p-1 text-muted-foreground", className)}>
|
||||||
className={cn(
|
|
||||||
"inline-flex h-10 items-center justify-center rounded-md bg-muted p-1 text-muted-foreground",
|
|
||||||
className,
|
|
||||||
)}
|
|
||||||
>
|
|
||||||
{children}
|
{children}
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
|
|
@ -62,12 +51,7 @@ interface TabsTriggerProps {
|
||||||
children: React.ReactNode;
|
children: React.ReactNode;
|
||||||
}
|
}
|
||||||
|
|
||||||
export function TabsTrigger({
|
export function TabsTrigger({ value, className, disabled, children }: TabsTriggerProps) {
|
||||||
value,
|
|
||||||
className,
|
|
||||||
disabled,
|
|
||||||
children,
|
|
||||||
}: TabsTriggerProps) {
|
|
||||||
const context = useContext(TabsContext);
|
const context = useContext(TabsContext);
|
||||||
if (!context) throw new Error("TabsTrigger must be used within Tabs");
|
if (!context) throw new Error("TabsTrigger must be used within Tabs");
|
||||||
|
|
||||||
|
|
@ -80,10 +64,8 @@ export function TabsTrigger({
|
||||||
onClick={() => !disabled && context.onValueChange(value)}
|
onClick={() => !disabled && context.onValueChange(value)}
|
||||||
className={cn(
|
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",
|
"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
|
isActive ? "bg-background text-foreground shadow-sm" : "hover:bg-muted/50",
|
||||||
? "bg-gray-700 text-foreground shadow-sm"
|
className
|
||||||
: "hover:bg-muted/50",
|
|
||||||
className,
|
|
||||||
)}
|
)}
|
||||||
>
|
>
|
||||||
{children}
|
{children}
|
||||||
|
|
@ -104,12 +86,7 @@ export function TabsContent({ value, className, children }: TabsContentProps) {
|
||||||
if (context.value !== value) return null;
|
if (context.value !== value) return null;
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div
|
<div className={cn("mt-2 ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2", className)}>
|
||||||
className={cn(
|
|
||||||
"mt-2 ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
|
|
||||||
className,
|
|
||||||
)}
|
|
||||||
>
|
|
||||||
{children}
|
{children}
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue
Block a user