Saeed0920/inogen
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

dashboard_popup #8

Merged
Saeed0920 merged 3 commits from dashboard_popup into main 2025-09-09 02:23:55 +03:30
Conversation 0 Commits 3 Files Changed 9 +42 -116
3 changed files with 42 additions and 116 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit bcfd2f4ce3 - Show all commits

74
app/components/common/popup-bar-chart.tsx
View File

@ -1,74 +0,0 @@
import {
Bar,
BarChart,
CartesianGrid,
XAxis,
YAxis,
LabelList,
ResponsiveContainer,
} from "recharts";
import { Card, CardContent } from "~/components/ui/card";
import {
type ChartConfig,
ChartContainer,
} from "~/components/ui/chart";
import { formatNumber } from "~/lib/utils";
export type PopupChartDatum = {
name: string;
value: number;
};
const chartConfig = {
value: {
label: "Operational Fee",
color: "#4ADE80", // Green-400
},
} satisfies ChartConfig;
export function PopupBarChart({
data,
}: {
data: PopupChartDatum[];
}) {
return (
<Card className="py-0 bg-transparent mt-4 border-none h-full">
<CardContent className="px-2 sm:p-6 bg-transparent">
<ChartContainer config={chartConfig} className="aspect-auto h-80 w-full">
<ResponsiveContainer width="100%" height="100%">
<BarChart
accessibilityLayer
data={data}
margin={{ top: 20, right: 20, left: 20, bottom: 5 }}
>
<CartesianGrid vertical={false} stroke="#475569" />
<XAxis
dataKey="name"
tickLine={false}
axisLine={false}
tickMargin={8}
tick={{ fill: "#94a3b8", fontSize: 12 }}
/>
<YAxis
tickLine={false}
axisLine={false}
tickMargin={8}
tick={{ fill: "#94a3b8", fontSize: 12 }}
tickFormatter={(value) => `${formatNumber(Math.round(value))}`}
/>
<Bar dataKey="value" fill={chartConfig.value.color} radius={[8, 8, 0, 0]}>
<LabelList
dataKey="value"
position="top"
style={{ fill: "#ffffff", fontSize: "12px", fontWeight: "bold" }}
formatter={(v: number) => `${formatNumber(Math.round(v))}`}
/>
</Bar>
</BarChart>
</ResponsiveContainer>
</ChartContainer>
</CardContent>
</Card>
);
}

4
app/components/dashboard/sidebar.tsx
View File

@ -31,7 +31,7 @@ interface SidebarProps {
interface MenuItem {
id: string;
label: string;
icon: React.ComponentType<{ className?: string }>;
icon: React.ComponentType<{ className?: string }> | null;
href?: string;
children?: MenuItem[];
badge?: string | number;
@ -109,7 +109,7 @@ const menuItems: MenuItem[] = [
{
id: "strategic-alignment",
label: "میزان انطباق راهبردی",
icon: BarChart3,
icon: null,
href: "#", // This is not a route, it opens a popup
},
];

80
app/root.tsx
View File

@ -41,51 +41,51 @@ export function Layout({ children }: { children: React.ReactNode }) {
</head>
<body className="font-persian bg-gray-900 text-white">
<AuthProvider>
<GlobalRouteGuard>{children}</GlobalRouteGuard>
<Toaster
position="top-center"
reverseOrder={false}
gutter={8}
containerClassName=""
containerStyle={{}}
toastOptions={{
// Define default options
className: "",
<GlobalRouteGuard>{children}</GlobalRouteGuard>
<Toaster
position="top-center"
reverseOrder={false}
gutter={8}
containerClassName=""
containerStyle={{}}
toastOptions={{
// Define default options
className: "",
duration: 4000,
style: {
background: "rgba(31, 41, 55, 0.95)",
color: "#fff",
fontFamily:
"Vazirmatn, Inter, ui-sans-serif, system-ui, sans-serif",
direction: "rtl",
textAlign: "right",
border: "1px solid rgba(16, 185, 129, 0.3)",
},
// Default options for specific types
success: {
duration: 3000,
style: {
background: "rgba(16, 185, 129, 0.9)",
color: "#fff",
},
iconTheme: {
primary: "#fff",
secondary: "#10b981",
},
},
error: {
duration: 4000,
style: {
background: "rgba(31, 41, 55, 0.95)",
background: "rgba(239, 68, 68, 0.9)",
color: "#fff",
fontFamily:
"Vazirmatn, Inter, ui-sans-serif, system-ui, sans-serif",
direction: "rtl",
textAlign: "right",
border: "1px solid rgba(16, 185, 129, 0.3)",
},
// Default options for specific types
success: {
duration: 3000,
style: {
background: "rgba(16, 185, 129, 0.9)",
color: "#fff",
},
iconTheme: {
primary: "#fff",
secondary: "#10b981",
},
iconTheme: {
primary: "#fff",
secondary: "#ef4444",
},
error: {
duration: 4000,
style: {
background: "rgba(239, 68, 68, 0.9)",
color: "#fff",
},
iconTheme: {
primary: "#fff",
secondary: "#ef4444",
},
},
}}
/>
},
}}
/>
</AuthProvider>
<ScrollRestoration />
<Scripts />