first commit
This commit is contained in:
root
526
src/App.jsx
Normal file
526
src/App.jsx
Normal file
@@ -0,0 +1,526 @@
|
||||
import React, { useState, useEffect } from "react";
|
||||
import logo from './logo.png';
|
||||
import { Card, Title, Text, AreaChart } from "@tremor/react";
|
||||
import {
|
||||
CreditCard,
|
||||
Wallet,
|
||||
Wallet2,
|
||||
HandCoins,
|
||||
Boxes,
|
||||
Box,
|
||||
Truck,
|
||||
Gauge,
|
||||
TrendingUp,
|
||||
PiggyBank,
|
||||
ShoppingCart,
|
||||
ShoppingBag,
|
||||
BadgeCheck,
|
||||
DollarSign,
|
||||
Ship,
|
||||
Package,
|
||||
ArrowDownCircle,
|
||||
ArrowUpCircle,
|
||||
LineChart,
|
||||
BarChart3,
|
||||
FileText,
|
||||
Receipt,
|
||||
Newspaper,
|
||||
ScrollText,
|
||||
} from "lucide-react";
|
||||
|
||||
function SplashScreen() {
|
||||
return (
|
||||
<div className="fixed inset-0 flex items-center justify-center bg-white dark:bg-gray-900 z-50">
|
||||
<div className="animate-splash opacity-0 scale-75">
|
||||
<img src={logo} alt="Logo" className="h-32 object-contain" />
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
/* --------------------------
|
||||
Communication Tryton
|
||||
-------------------------- */
|
||||
|
||||
function openInTryton(model, res_id, view_mode = "tree", domain) {
|
||||
window.parent.postMessage(
|
||||
{
|
||||
type: "open_tab",
|
||||
payload: { model, res_id, view_mode, domain },
|
||||
},
|
||||
"*"
|
||||
);
|
||||
}
|
||||
|
||||
/* --------------------------
|
||||
Données
|
||||
-------------------------- */
|
||||
|
||||
const params = new URLSearchParams(window.location.search);
|
||||
const defaultSaleId = params.get("sale_id") || 249;
|
||||
const defaultPnlAmount = params.get("pnl_amount");
|
||||
const exposure = params.get("exposure");
|
||||
const topay = params.get("topay");
|
||||
const toreceive = params.get("toreceive");
|
||||
const draft_p = params.get("draft_p");
|
||||
const val_p = params.get("val_p");
|
||||
const conf_p = params.get("conf_p");
|
||||
const draft_s = params.get("draft_s");
|
||||
const val_s = params.get("val_s");
|
||||
const conf_s = params.get("conf_s");
|
||||
const shipment_d = params.get("shipment_d");
|
||||
const shipment_s = params.get("shipment_s");
|
||||
const shipment_r = params.get("shipment_r");
|
||||
const lot_m = params.get("lot_m");
|
||||
const lot_a = params.get("lot_a");
|
||||
const lot_al = params.get("lot_al");
|
||||
const inv_p = params.get("inv_p");
|
||||
const inv_s = params.get("inv_s");
|
||||
const move_cash = params.get("move_cash");
|
||||
|
||||
const data = [
|
||||
{ date: "2025-01-01", value: 12 },
|
||||
{ date: "2025-01-02", value: 14 },
|
||||
{ date: "2025-01-03", value: 10 },
|
||||
{ date: "2025-01-04", value: 18 },
|
||||
{ date: "2025-01-05", value: 22 },
|
||||
];
|
||||
|
||||
const purchaseData = [
|
||||
{ status: "Draft", count: draft_p, color: "bg-teal-500", onClick: () => openInTryton("purchase.purchase", undefined, "tree")},
|
||||
{ status: "Validated", count: val_p, color: "bg-cyan-500", onClick: () => openInTryton("purchase.purchase", undefined, "tree") },
|
||||
{ status: "Confirmed", count: conf_p, color: "bg-blue-500", onClick: () => openInTryton("purchase.purchase", undefined, "tree") },
|
||||
];
|
||||
|
||||
const saleData = [
|
||||
{ status: "Draft", count: draft_s, color: "bg-teal-500", onClick: () => openInTryton("sale.sale", undefined, "tree")},
|
||||
{ status: "Validated", count: val_s, color: "bg-cyan-500", onClick: () => openInTryton("sale.sale", undefined, "tree") },
|
||||
{ status: "Confirmed", count: conf_s, color: "bg-blue-500", onClick: () => openInTryton("sale.sale", undefined, "tree") },
|
||||
];
|
||||
|
||||
const shipmentData = [
|
||||
{ status: "Draft", count: shipment_d, color: "bg-teal-500", onClick: () => openInTryton("stock.shipment.in", undefined, "tree")},
|
||||
{ status: "Started", count: shipment_s, color: "bg-cyan-500", onClick: () => openInTryton("stock.shipment.in", undefined, "tree") },
|
||||
{ status: "Received", count: shipment_r, color: "bg-blue-500", onClick: () => openInTryton("stock.shipment.in", undefined, "tree") },
|
||||
];
|
||||
|
||||
const lotData = [
|
||||
{ status: "Matched", count: lot_m, color: "bg-teal-500", onClick: () => openInTryton("lot.report", undefined, "tree")},
|
||||
{ status: "Available", count: lot_a, color: "bg-cyan-500", onClick: () => openInTryton("lot.report", undefined, "tree") },
|
||||
{ status: "All", count: lot_al, color: "bg-blue-500", onClick: () => openInTryton("lot.report", undefined, "tree") },
|
||||
];
|
||||
|
||||
const kpis = [
|
||||
{
|
||||
title: "PNL ($)",
|
||||
value: defaultPnlAmount,
|
||||
trend: "+12% vs last month",
|
||||
trendValue: 12,
|
||||
icon: BarChart3,
|
||||
action: () => openInTryton("pnl.bi", [1], "form")
|
||||
},
|
||||
{
|
||||
title: "Exposure (Mt)",
|
||||
value: exposure,
|
||||
trend: "-3% this month",
|
||||
trendValue: -3,
|
||||
icon: Gauge,
|
||||
action: () => openInTryton("open.position.report", undefined, "tree")
|
||||
},
|
||||
{
|
||||
title: "Amount to pay ($)",
|
||||
value: topay,
|
||||
trend: "+5% this month",
|
||||
trendValue: 5,
|
||||
icon: DollarSign,
|
||||
action: () => openInTryton("account.invoice", undefined, "tree")
|
||||
},
|
||||
{
|
||||
title: "Amount to receive ($)",
|
||||
value: toreceive,
|
||||
trend: "-1% this month",
|
||||
trendValue: -1,
|
||||
icon: HandCoins,
|
||||
action: () => openInTryton("account.invoice", undefined, "tree")
|
||||
},
|
||||
];
|
||||
|
||||
const news = [
|
||||
{
|
||||
type: "Forex",
|
||||
label: "EUR/USD: 1.1400",
|
||||
trend: "+0.88%",
|
||||
color: "#1E3A8A", // bleu foncé
|
||||
date: "30-11-2025",
|
||||
icon: TrendingUp, // icône tendance boursière
|
||||
},
|
||||
{
|
||||
type: "Logistic",
|
||||
label: "INTHIRA NAREE loaded",
|
||||
date: "08-10-2025",
|
||||
color: "#1E3A8A",
|
||||
icon: Newspaper,
|
||||
},
|
||||
];
|
||||
|
||||
const cards = [
|
||||
// {
|
||||
// id: "sales_pending",
|
||||
// title: "Sales Pending",
|
||||
// value: 7,
|
||||
// trend: "+3% this week",
|
||||
// icon: Receipt,
|
||||
// action: () => openInTryton("sale.sale", undefined, "tree")
|
||||
// },
|
||||
{
|
||||
id: "purchase_invoices",
|
||||
title: "Purchase Invoices",
|
||||
value: inv_p,
|
||||
trend: "-2% this week",
|
||||
icon: Receipt,
|
||||
action: () => openInTryton("account.invoice", undefined, "tree")
|
||||
},
|
||||
{
|
||||
id: "sale_invoices",
|
||||
title: "Sale Invoices",
|
||||
value: inv_s,
|
||||
trend: "+2% this week",
|
||||
icon: FileText,
|
||||
action: () => openInTryton("account.invoice", undefined, "tree")
|
||||
},
|
||||
{
|
||||
id: "payments_to_validate",
|
||||
title: "Payments To Validate",
|
||||
value: move_cash,
|
||||
trend: "+12% this week",
|
||||
icon: HandCoins,
|
||||
action: () => openInTryton("account.move", undefined, "tree")
|
||||
},
|
||||
// {
|
||||
// id: "prepayments",
|
||||
// title: "Prepayments To Validate",
|
||||
// value: 9,
|
||||
// trend: "+5% this week",
|
||||
// icon: PiggyBank,
|
||||
// action: () => openInTryton("account.move", undefined, "tree")
|
||||
// },
|
||||
];
|
||||
|
||||
/* --------------------------
|
||||
Dashboard Component
|
||||
-------------------------- */
|
||||
|
||||
export default function App() {
|
||||
const [loading, setLoading] = useState(true);
|
||||
|
||||
useEffect(() => {
|
||||
// durée du splash
|
||||
const timer = setTimeout(() => setLoading(false), 1500);
|
||||
return () => clearTimeout(timer);
|
||||
}, []);
|
||||
|
||||
if (loading) return <SplashScreen />;
|
||||
|
||||
const saleId = defaultSaleId;
|
||||
const total_p = purchaseData.reduce((sum, item) => sum + Number(item.count), 0);
|
||||
const total_s = saleData.reduce((sum, item) => sum + Number(item.count), 0);
|
||||
const total_sh = shipmentData.reduce((sum, item) => sum + Number(item.count), 0);
|
||||
const total_l = lotData.reduce((sum, item) => sum + Number(item.count), 0);
|
||||
|
||||
return (
|
||||
<div className="flex min-h-screen bg-gray-50 dark:bg-gray-900 p-6">
|
||||
<main className="flex-1">
|
||||
|
||||
{/* KPIs en tête */}
|
||||
<div className="grid grid-cols-2 md:grid-cols-4 gap-4 mb-6">
|
||||
{kpis.map((kpi) => {
|
||||
const Icon = kpi.icon;
|
||||
return (
|
||||
<Card
|
||||
key={kpi.title}
|
||||
onClick={kpi.action}
|
||||
className="relative p-4 flex flex-col items-center gap-2 shadow-md rounded-xl bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 overflow-hidden"
|
||||
>
|
||||
|
||||
<Icon className="absolute top-2 right-2 w-10 h-10 opacity-10" />
|
||||
|
||||
<Title className="text-sm text-center">{kpi.title}</Title>
|
||||
<Text className="text-4xl font-bold text-center">{kpi.value}</Text>
|
||||
|
||||
<button onClick={kpi.action} className="mt-4 text-xs text-teal-600 underline">
|
||||
View details
|
||||
</button>
|
||||
</Card>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4">
|
||||
|
||||
{/* Purchase */}
|
||||
<Card className="p-4 rounded-xl border border-gray-200 dark:border-gray-700 shadow-md bg-white dark:bg-gray-800 hover:shadow-lg transition">
|
||||
<div className="flex items-center justify-between mb-4">
|
||||
<Title className="text-base">Purchases</Title>
|
||||
<ShoppingCart className="w-6 h-6" />
|
||||
</div>
|
||||
<Text className="text-3xl font-bold mb-1">{total_p}</Text>
|
||||
<Text className="text-xs text-gray-500 mb-4">Across all statuses</Text>
|
||||
|
||||
<div className="w-full h-1 bg-gray-200 dark:bg-gray-600 mb-4"></div>
|
||||
|
||||
<div className="flex w-full h-3 rounded overflow-hidden mb-4 bg-gray-200 dark:bg-gray-600">
|
||||
{purchaseData.map((item, i) => (
|
||||
<div
|
||||
key={i}
|
||||
className={`${item.color} h-3`}
|
||||
style={{
|
||||
width: `${(item.count / total_p) * 100}%`,
|
||||
marginRight: i < purchaseData.length - 1 ? "2px" : "0",
|
||||
}}
|
||||
></div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<div className="space-y-2 text-xs">
|
||||
{purchaseData.map((item) => (
|
||||
<div
|
||||
key={item.status}
|
||||
onClick={item.onClick}
|
||||
className="flex items-center gap-2 cursor-pointer p-1 rounded hover:bg-gray-100 dark:hover:bg-gray-700"
|
||||
>
|
||||
<span className={`w-3 h-3 rounded ${item.color}`}></span>
|
||||
<span className="flex-1">{item.status}</span>
|
||||
<span className="text-gray-500">
|
||||
({item.count} / {((item.count / total_p) * 100).toFixed(1)}%)
|
||||
</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</Card>
|
||||
{/* Sale */}
|
||||
<Card className="p-4 rounded-xl border border-gray-200 dark:border-gray-700 shadow-md bg-white dark:bg-gray-800 hover:shadow-lg transition">
|
||||
<div className="flex items-center justify-between mb-4">
|
||||
<Title className="text-base">Sales</Title>
|
||||
<BadgeCheck className="w-6 h-6" />
|
||||
</div>
|
||||
<Text className="text-3xl font-bold mb-1">{total_s}</Text>
|
||||
<Text className="text-xs text-gray-500 mb-4">Across all statuses</Text>
|
||||
|
||||
<div className="w-full h-1 bg-gray-200 dark:bg-gray-600 mb-4"></div>
|
||||
|
||||
<div className="flex w-full h-3 rounded overflow-hidden mb-4 bg-gray-200 dark:bg-gray-600">
|
||||
{saleData.map((item, i) => (
|
||||
<div
|
||||
key={i}
|
||||
className={`${item.color} h-3`}
|
||||
style={{
|
||||
width: `${(item.count / total_s) * 100}%`,
|
||||
marginRight: i < saleData.length - 1 ? "2px" : "0",
|
||||
}}
|
||||
></div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<div className="space-y-2 text-xs">
|
||||
{saleData.map((item) => (
|
||||
<div
|
||||
key={item.status}
|
||||
onClick={item.onClick}
|
||||
className="flex items-center gap-2 cursor-pointer p-1 rounded hover:bg-gray-100 dark:hover:bg-gray-700"
|
||||
>
|
||||
<span className={`w-3 h-3 rounded ${item.color}`}></span>
|
||||
<span className="flex-1">{item.status}</span>
|
||||
<span className="text-gray-500">
|
||||
({item.count} / {((item.count / total_s) * 100).toFixed(1)}%)
|
||||
</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</Card>
|
||||
{/* Shipment */}
|
||||
<Card className="p-4 rounded-xl border border-gray-200 dark:border-gray-700 shadow-md bg-white dark:bg-gray-800 hover:shadow-lg transition">
|
||||
<div className="flex items-center justify-between mb-4">
|
||||
<Title className="text-base">Shipments</Title>
|
||||
<Ship className="w-6 h-6" />
|
||||
</div>
|
||||
<Text className="text-3xl font-bold mb-1">{total_sh}</Text>
|
||||
<Text className="text-xs text-gray-500 mb-4">Across all statuses</Text>
|
||||
|
||||
<div className="w-full h-1 bg-gray-200 dark:bg-gray-600 mb-4"></div>
|
||||
|
||||
<div className="flex w-full h-3 rounded overflow-hidden mb-4 bg-gray-200 dark:bg-gray-600">
|
||||
{shipmentData.map((item, i) => (
|
||||
<div
|
||||
key={i}
|
||||
className={`${item.color} h-3`}
|
||||
style={{
|
||||
width: `${(item.count / total_sh) * 100}%`,
|
||||
marginRight: i < shipmentData.length - 1 ? "2px" : "0",
|
||||
}}
|
||||
></div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<div className="space-y-2 text-xs">
|
||||
{shipmentData.map((item) => (
|
||||
<div
|
||||
key={item.status}
|
||||
onClick={item.onClick}
|
||||
className="flex items-center gap-2 cursor-pointer p-1 rounded hover:bg-gray-100 dark:hover:bg-gray-700"
|
||||
>
|
||||
<span className={`w-3 h-3 rounded ${item.color}`}></span>
|
||||
<span className="flex-1">{item.status}</span>
|
||||
<span className="text-gray-500">
|
||||
({item.count} / {((item.count / total_sh) * 100).toFixed(1)}%)
|
||||
</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</Card>
|
||||
{/* Lot */}
|
||||
<Card className="p-4 rounded-xl border border-gray-200 dark:border-gray-700 shadow-md bg-white dark:bg-gray-800 hover:shadow-lg transition">
|
||||
<div className="flex items-center justify-between mb-4">
|
||||
<Title className="text-base">Lots</Title>
|
||||
<Package className="w-6 h-6" />
|
||||
</div>
|
||||
<Text className="text-3xl font-bold mb-1">{total_l}</Text>
|
||||
<Text className="text-xs text-gray-500 mb-4">Across all statuses</Text>
|
||||
|
||||
<div className="w-full h-1 bg-gray-200 dark:bg-gray-600 mb-4"></div>
|
||||
|
||||
<div className="flex w-full h-3 rounded overflow-hidden mb-4 bg-gray-200 dark:bg-gray-600">
|
||||
{lotData.map((item, i) => (
|
||||
<div
|
||||
key={i}
|
||||
className={`${item.color} h-3`}
|
||||
style={{
|
||||
width: `${(item.count / total_l) * 100}%`,
|
||||
marginRight: i < lotData.length - 1 ? "2px" : "0",
|
||||
}}
|
||||
></div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<div className="space-y-2 text-xs">
|
||||
{lotData.map((item) => (
|
||||
<div
|
||||
key={item.status}
|
||||
onClick={item.onClick}
|
||||
className="flex items-center gap-2 cursor-pointer p-1 rounded hover:bg-gray-100 dark:hover:bg-gray-700"
|
||||
>
|
||||
<span className={`w-3 h-3 rounded ${item.color}`}></span>
|
||||
<span className="flex-1">{item.status}</span>
|
||||
<span className="text-gray-500">
|
||||
({item.count} / {((item.count / total_l) * 100).toFixed(1)}%)
|
||||
</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</Card>
|
||||
{/* Analytics Card (Rows written style) */}
|
||||
{/* <Card className="p-4 rounded-xl border border-gray-200 dark:border-gray-700 shadow-md bg-white dark:bg-gray-800 hover:shadow-lg transition">
|
||||
<div className="flex items-center justify-between mb-2">
|
||||
<h2 className="text-sm font-medium text-gray-700 dark:text-gray-300">
|
||||
Rows written
|
||||
</h2>
|
||||
<span className="text-xs bg-red-100 text-red-600 px-2 py-1 rounded-md font-semibold">
|
||||
-3.9%
|
||||
</span>
|
||||
</div>
|
||||
<div>
|
||||
<span className="text-3xl font-bold">83,197</span>
|
||||
<span className="text-gray-400 ml-2 text-sm">from 86,580</span>
|
||||
</div>
|
||||
<div className="mt-4 h-20 relative">
|
||||
<svg viewBox="0 0 200 60" className="w-full h-full">
|
||||
<polyline
|
||||
fill="none"
|
||||
stroke="#c1c7d0"
|
||||
strokeWidth="2"
|
||||
points="0,30 20,28 40,25 60,27 80,32 100,35 120,33 140,30 160,29 180,32 200,35"
|
||||
/>
|
||||
<polyline
|
||||
fill="none"
|
||||
stroke="#3b5bdb"
|
||||
strokeWidth="2"
|
||||
points="0,40 20,45 40,42 60,38 80,45 100,48 120,44 140,40 160,42 180,38 200,36"
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
<div className="flex justify-between text-xs text-gray-400 mt-2">
|
||||
<span>16/04/2024</span>
|
||||
<span>16/05/2024</span>
|
||||
</div>
|
||||
</Card> */}
|
||||
{/* Card Last News (taille standard card) */}
|
||||
<Card className="p-4 rounded-xl border border-gray-200 dark:border-gray-700 shadow-md bg-white dark:bg-gray-800 hover:shadow-lg transition">
|
||||
<Title className="text-base mb-4">Last News</Title>
|
||||
|
||||
<div className="space-y-3 text-sm">
|
||||
{news.map((n, idx) => {
|
||||
const Icon = n.icon;
|
||||
return (
|
||||
<div
|
||||
key={idx}
|
||||
className="flex justify-between items-center p-2 rounded hover:bg-gray-100 dark:hover:bg-gray-700 cursor-pointer"
|
||||
>
|
||||
<div>
|
||||
<div className="flex items-center gap-2">
|
||||
<Icon className="w-4 h-4" />
|
||||
<span className="font-semibold">{n.type}</span>
|
||||
</div>
|
||||
<div className="ml-6">
|
||||
<span style={{ color: n.color }}>{n.label}</span>
|
||||
{n.trend && (
|
||||
<span className="ml-2 text-green-600">{n.trend}</span>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
<span className="text-gray-500 text-xs">{n.date}</span>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</Card>
|
||||
{/* Cards KPI */}
|
||||
{cards.map((card) => {
|
||||
const Icon = card.icon;
|
||||
return (
|
||||
<Card
|
||||
key={card.id}
|
||||
className="p-4 rounded-xl border border-gray-200 dark:border-gray-700 shadow-md bg-white dark:bg-gray-800 hover:shadow-lg transition"
|
||||
>
|
||||
<div className="flex justify-between items-center mb-4">
|
||||
<Title className="text-base">{card.title}</Title>
|
||||
<Icon className="w-6 h-6" />
|
||||
</div>
|
||||
|
||||
<Text className="text-3xl font-bold mb-1">{card.value}</Text>
|
||||
<Text className="text-xs text-gray-500 mb-4">{card.trend}</Text>
|
||||
|
||||
<div className="w-full h-1 bg-gray-200 dark:bg-gray-600 mb-4"></div>
|
||||
|
||||
<AreaChart
|
||||
data={data}
|
||||
index="date"
|
||||
categories={["value"]}
|
||||
colors={["teal-300"]}
|
||||
className="h-16"
|
||||
showXAxis={false}
|
||||
showYAxis={false}
|
||||
showGridLines={false}
|
||||
showLegend={false}
|
||||
curve="monotone"
|
||||
/>
|
||||
|
||||
<button onClick={card.action} className="mt-4 text-xs text-teal-600 underline">
|
||||
View details
|
||||
</button>
|
||||
</Card>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user