kediritechnopark/kedaimaster
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

ok

Browse Source
This commit is contained in:
zadit
2024-12-30 07:26:58 +07:00
parent dbe119398d
commit e49cc3812a
6 changed files with 187 additions and 294 deletions
Download Patch File Download Diff File Expand all files Collapse all files

209
package-lock.json generated
View File

@@ -19,6 +19,7 @@
"jsqr": "^1.4.0",
"qrcode.react": "^3.1.0",
"react": "^18.3.1",
"react-apexcharts": "^1.7.0",
"react-bootstrap": "^2.10.4",
"react-dom": "^18.3.1",
"react-loader-spinner": "^6.1.6",
@@ -28,7 +29,6 @@
"react-scripts": "5.0.1",
"react-switch": "^7.0.0",
"react-youtube": "^10.1.0",
"recharts": "^2.13.3",
"smooth-scroll-into-view-if-needed": "^2.0.2",
"socket.io-client": "^4.7.5",
"styled-components": "^6.1.11",
@@ -4049,6 +4049,62 @@
"string.prototype.matchall": "^4.0.6"
}
},
"node_modules/@svgdotjs/svg.draggable.js": {
"version": "3.0.4",
"resolved": "https://registry.npmjs.org/@svgdotjs/svg.draggable.js/-/svg.draggable.js-3.0.4.tgz",
"integrity": "sha512-vWi/Col5Szo74HJVBgMHz23kLVljt3jvngmh0DzST45iO2ubIZ487uUAHIxSZH2tVRyiaaTL+Phaasgp4gUD2g==",
"peer": true,
"peerDependencies": {
"@svgdotjs/svg.js": "^3.2.4"
}
},
"node_modules/@svgdotjs/svg.filter.js": {
"version": "3.0.8",
"resolved": "https://registry.npmjs.org/@svgdotjs/svg.filter.js/-/svg.filter.js-3.0.8.tgz",
"integrity": "sha512-YshF2YDaeRA2StyzAs5nUPrev7npQ38oWD0eTRwnsciSL2KrRPMoUw8BzjIXItb3+dccKGTX3IQOd2NFzmHkog==",
"peer": true,
"dependencies": {
"@svgdotjs/svg.js": "^3.1.1"
},
"engines": {
"node": ">= 0.8.0"
}
},
"node_modules/@svgdotjs/svg.js": {
"version": "3.2.4",
"resolved": "https://registry.npmjs.org/@svgdotjs/svg.js/-/svg.js-3.2.4.tgz",
"integrity": "sha512-BjJ/7vWNowlX3Z8O4ywT58DqbNRyYlkk6Yz/D13aB7hGmfQTvGX4Tkgtm/ApYlu9M7lCQi15xUEidqMUmdMYwg==",
"peer": true,
"funding": {
"type": "github",
"url": "https://github.com/sponsors/Fuzzyma"
}
},
"node_modules/@svgdotjs/svg.resize.js": {
"version": "2.0.5",
"resolved": "https://registry.npmjs.org/@svgdotjs/svg.resize.js/-/svg.resize.js-2.0.5.tgz",
"integrity": "sha512-4heRW4B1QrJeENfi7326lUPYBCevj78FJs8kfeDxn5st0IYPIRXoTtOSYvTzFWgaWWXd3YCDE6ao4fmv91RthA==",
"peer": true,
"engines": {
"node": ">= 14.18"
},
"peerDependencies": {
"@svgdotjs/svg.js": "^3.2.4",
"@svgdotjs/svg.select.js": "^4.0.1"
}
},
"node_modules/@svgdotjs/svg.select.js": {
"version": "4.0.2",
"resolved": "https://registry.npmjs.org/@svgdotjs/svg.select.js/-/svg.select.js-4.0.2.tgz",
"integrity": "sha512-5gWdrvoQX3keo03SCmgaBbD+kFftq0F/f2bzCbNnpkkvW6tk4rl4MakORzFuNjvXPWwB4az9GwuvVxQVnjaK2g==",
"peer": true,
"engines": {
"node": ">= 14.18"
},
"peerDependencies": {
"@svgdotjs/svg.js": "^3.2.4"
}
},
"node_modules/@svgr/babel-plugin-add-jsx-attribute": {
"version": "5.4.0",
"resolved": "https://registry.npmjs.org/@svgr/babel-plugin-add-jsx-attribute/-/babel-plugin-add-jsx-attribute-5.4.0.tgz",
@@ -4650,11 +4706,6 @@
"@types/node": "*"
}
},
"node_modules/@types/d3-array": {
"version": "3.2.1",
"resolved": "https://registry.npmjs.org/@types/d3-array/-/d3-array-3.2.1.tgz",
"integrity": "sha512-Y2Jn2idRrLzUfAKV2LyRImR+y4oa2AntrgID95SHJxuMUrkNXmanDSed71sRNZysveJVt1hLLemQZIady0FpEg=="
},
"node_modules/@types/d3-color": {
"version": "3.1.3",
"resolved": "https://registry.npmjs.org/@types/d3-color/-/d3-color-3.1.3.tgz",
@@ -4665,11 +4716,6 @@
"resolved": "https://registry.npmjs.org/@types/d3-delaunay/-/d3-delaunay-6.0.4.tgz",
"integrity": "sha512-ZMaSKu4THYCU6sV64Lhg6qjf1orxBthaC161plr5KuPHo3CNm8DTHiLw/5Eq2b6TsNP0W0iJrUOFscY6Q450Hw=="
},
"node_modules/@types/d3-ease": {
"version": "3.0.2",
"resolved": "https://registry.npmjs.org/@types/d3-ease/-/d3-ease-3.0.2.tgz",
"integrity": "sha512-NcV1JjO5oDzoK26oMzbILE6HW7uVXOHLQvHshBUW4UMdZGfiY6v5BeQwh9a9tCzv+CeefZQHJt5SRgK154RtiA=="
},
"node_modules/@types/d3-interpolate": {
"version": "3.0.4",
"resolved": "https://registry.npmjs.org/@types/d3-interpolate/-/d3-interpolate-3.0.4.tgz",
@@ -4704,11 +4750,6 @@
"resolved": "https://registry.npmjs.org/@types/d3-time/-/d3-time-3.0.3.tgz",
"integrity": "sha512-2p6olUZ4w3s+07q3Tm2dbiMZy5pCDfYwtLXXHUnVzXgQlZ/OyPtUz6OL382BkOuGlLXqfT+wqv8Fw2v8/0geBw=="
},
"node_modules/@types/d3-timer": {
"version": "3.0.2",
"resolved": "https://registry.npmjs.org/@types/d3-timer/-/d3-timer-3.0.2.tgz",
"integrity": "sha512-Ps3T8E8dZDam6fUyNiMkekK3XUsaUEik+idO9/YjPtfj2qruF8tFBXS7XhtE4iIXBLxhmLjP3SXpLhVf21I9Lw=="
},
"node_modules/@types/eslint": {
"version": "8.56.10",
"resolved": "https://registry.npmjs.org/@types/eslint/-/eslint-8.56.10.tgz",
@@ -5589,6 +5630,12 @@
"resolved": "https://registry.npmjs.org/@xtuc/long/-/long-4.2.2.tgz",
"integrity": "sha512-NuHqBY1PB/D8xU6s/thBgOAiAP7HOYDQ32+BFZILJ8ivkUkAHQnWfn6WhL79Owj1qmUnoN/YPhktdIoucipkAQ=="
},
"node_modules/@yr/monotone-cubic-spline": {
"version": "1.0.3",
"resolved": "https://registry.npmjs.org/@yr/monotone-cubic-spline/-/monotone-cubic-spline-1.0.3.tgz",
"integrity": "sha512-FQXkOta0XBSUPHndIKON2Y9JeQz5ZeMqLYZVVK93FliNBFm7LNMIZmY6FrMEB9XPcDbE2bekMbZD6kzDkxwYjA==",
"peer": true
},
"node_modules/@zxing/browser": {
"version": "0.0.7",
"resolved": "https://registry.npmjs.org/@zxing/browser/-/browser-0.0.7.tgz",
@@ -5855,6 +5902,20 @@
"node": ">= 8"
}
},
"node_modules/apexcharts": {
"version": "4.3.0",
"resolved": "https://registry.npmjs.org/apexcharts/-/apexcharts-4.3.0.tgz",
"integrity": "sha512-PfvZQpv91T68hzry9l5zP3Gip7sQvF0nFK91uCBrswIKX7rbIdbVNS4fOks9m9yP3Ppgs6LHgU2M/mjoG4NM0A==",
"peer": true,
"dependencies": {
"@svgdotjs/svg.draggable.js": "^3.0.4",
"@svgdotjs/svg.filter.js": "^3.0.8",
"@svgdotjs/svg.js": "^3.2.4",
"@svgdotjs/svg.resize.js": "^2.0.2",
"@svgdotjs/svg.select.js": "^4.0.1",
"@yr/monotone-cubic-spline": "^1.0.3"
}
},
"node_modules/arg": {
"version": "5.0.2",
"resolved": "https://registry.npmjs.org/arg/-/arg-5.0.2.tgz",
@@ -7551,14 +7612,6 @@
"node": ">=12"
}
},
"node_modules/d3-ease": {
"version": "3.0.1",
"resolved": "https://registry.npmjs.org/d3-ease/-/d3-ease-3.0.1.tgz",
"integrity": "sha512-wR/XK3D3XcLIZwpbvQwQ5fK+8Ykds1ip7A2Txe0yxncXSdq1L9skcG7blcedkOX+ZcgxGAmLX1FrRGbADwzi0w==",
"engines": {
"node": ">=12"
}
},
"node_modules/d3-format": {
"version": "3.1.0",
"resolved": "https://registry.npmjs.org/d3-format/-/d3-format-3.1.0.tgz",
@@ -7634,14 +7687,6 @@
"node": ">=12"
}
},
"node_modules/d3-timer": {
"version": "3.0.1",
"resolved": "https://registry.npmjs.org/d3-timer/-/d3-timer-3.0.1.tgz",
"integrity": "sha512-ndfJ/JxxMd3nw31uyKoY2naivF+r29V+Lc0svZxe1JvvIRmi8hUsrMvdOwgS1o6uBHmiz91geQ0ylPP0aj1VUA==",
"engines": {
"node": ">=12"
}
},
"node_modules/damerau-levenshtein": {
"version": "1.0.8",
"resolved": "https://registry.npmjs.org/damerau-levenshtein/-/damerau-levenshtein-1.0.8.tgz",
@@ -7729,11 +7774,6 @@
"resolved": "https://registry.npmjs.org/decimal.js/-/decimal.js-10.4.3.tgz",
"integrity": "sha512-VBBaLc1MgL5XpzgIP7ny5Z6Nx3UrRkIViUkPUdtl9aya5amy3De1gsUUSB1g3+3sExYNjCAsAznmukyxCb1GRA=="
},
"node_modules/decimal.js-light": {
"version": "2.5.1",
"resolved": "https://registry.npmjs.org/decimal.js-light/-/decimal.js-light-2.5.1.tgz",
"integrity": "sha512-qIMFpTMZmny+MMIitAB6D7iVPEorVw6YQRWkvarTkT4tBeSLLiHzcwj6q0MmYSFCiVpiqPJTJEYIrpcPzVEIvg=="
},
"node_modules/dedent": {
"version": "0.7.0",
"resolved": "https://registry.npmjs.org/dedent/-/dedent-0.7.0.tgz",
@@ -9239,14 +9279,6 @@
"resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz",
"integrity": "sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q=="
},
"node_modules/fast-equals": {
"version": "5.0.1",
"resolved": "https://registry.npmjs.org/fast-equals/-/fast-equals-5.0.1.tgz",
"integrity": "sha512-WF1Wi8PwwSY7/6Kx0vKXtw8RwuSGoM1bvDaJbu7MxDlR1vovZjIAKrnzyrThgAjm6JDTu0fVgWXDlMGspodfoQ==",
"engines": {
"node": ">=6.0.0"
}
},
"node_modules/fast-glob": {
"version": "3.3.2",
"resolved": "https://registry.npmjs.org/fast-glob/-/fast-glob-3.3.2.tgz",
@@ -15832,6 +15864,18 @@
"node": ">=0.10.0"
}
},
"node_modules/react-apexcharts": {
"version": "1.7.0",
"resolved": "https://registry.npmjs.org/react-apexcharts/-/react-apexcharts-1.7.0.tgz",
"integrity": "sha512-03oScKJyNLRf0Oe+ihJxFZliBQM9vW3UWwomVn4YVRTN1jsIR58dLWt0v1sb8RwJVHDMbeHiKQueM0KGpn7nOA==",
"dependencies": {
"prop-types": "^15.8.1"
},
"peerDependencies": {
"apexcharts": ">=4.0.0",
"react": ">=0.13"
}
},
"node_modules/react-app-polyfill": {
"version": "3.0.0",
"resolved": "https://registry.npmjs.org/react-app-polyfill/-/react-app-polyfill-3.0.0.tgz",
@@ -16245,20 +16289,6 @@
"node": ">=10"
}
},
"node_modules/react-smooth": {
"version": "4.0.1",
"resolved": "https://registry.npmjs.org/react-smooth/-/react-smooth-4.0.1.tgz",
"integrity": "sha512-OE4hm7XqR0jNOq3Qmk9mFLyd6p2+j6bvbPJ7qlB7+oo0eNcL2l7WQzG6MBnT3EXY6xzkLMUBec3AfewJdA0J8w==",
"dependencies": {
"fast-equals": "^5.0.1",
"prop-types": "^15.8.1",
"react-transition-group": "^4.4.5"
},
"peerDependencies": {
"react": "^16.8.0 || ^17.0.0 || ^18.0.0",
"react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0"
}
},
"node_modules/react-switch": {
"version": "7.0.0",
"resolved": "https://registry.npmjs.org/react-switch/-/react-switch-7.0.0.tgz",
@@ -16334,41 +16364,6 @@
"node": ">=8.10.0"
}
},
"node_modules/recharts": {
"version": "2.13.3",
"resolved": "https://registry.npmjs.org/recharts/-/recharts-2.13.3.tgz",
"integrity": "sha512-YDZ9dOfK9t3ycwxgKbrnDlRC4BHdjlY73fet3a0C1+qGMjXVZe6+VXmpOIIhzkje5MMEL8AN4hLIe4AMskBzlA==",
"dependencies": {
"clsx": "^2.0.0",
"eventemitter3": "^4.0.1",
"lodash": "^4.17.21",
"react-is": "^18.3.1",
"react-smooth": "^4.0.0",
"recharts-scale": "^0.4.4",
"tiny-invariant": "^1.3.1",
"victory-vendor": "^36.6.8"
},
"engines": {
"node": ">=14"
},
"peerDependencies": {
"react": "^16.0.0 || ^17.0.0 || ^18.0.0",
"react-dom": "^16.0.0 || ^17.0.0 || ^18.0.0"
}
},
"node_modules/recharts-scale": {
"version": "0.4.5",
"resolved": "https://registry.npmjs.org/recharts-scale/-/recharts-scale-0.4.5.tgz",
"integrity": "sha512-kivNFO+0OcUNu7jQquLXAxz1FIwZj8nrj+YkOKc5694NbjCvcT6aSZiIzNzd2Kul4o4rTto8QVR9lMNtxD4G1w==",
"dependencies": {
"decimal.js-light": "^2.4.1"
}
},
"node_modules/recharts/node_modules/react-is": {
"version": "18.3.1",
"resolved": "https://registry.npmjs.org/react-is/-/react-is-18.3.1.tgz",
"integrity": "sha512-/LLMVyas0ljjAtoYiPqYiL8VWXzUUdThrmU5+n20DZv+a+ClRoevUzw5JxU+Ieh5/c87ytoTBV9G1FiKfNJdmg=="
},
"node_modules/recursive-readdir": {
"version": "2.2.3",
"resolved": "https://registry.npmjs.org/recursive-readdir/-/recursive-readdir-2.2.3.tgz",
@@ -18231,11 +18226,6 @@
"resolved": "https://registry.npmjs.org/thunky/-/thunky-1.1.0.tgz",
"integrity": "sha512-eHY7nBftgThBqOyHGVN+l8gF0BucP09fMo0oO/Lb0w1OF80dJv+lDVpXG60WMQvkcxAkNybKsrEIE3ZtKGmPrA=="
},
"node_modules/tiny-invariant": {
"version": "1.3.3",
"resolved": "https://registry.npmjs.org/tiny-invariant/-/tiny-invariant-1.3.3.tgz",
"integrity": "sha512-+FbBPE1o9QAYvviau/qC5SE3caw21q3xkvWKBtja5vgqOWIHHJ3ioaq1VPfn/Szqctz2bU/oYeKd9/z5BL+PVg=="
},
"node_modules/tmpl": {
"version": "1.0.5",
"resolved": "https://registry.npmjs.org/tmpl/-/tmpl-1.0.5.tgz",
@@ -18740,27 +18730,6 @@
"node": ">= 0.8"
}
},
"node_modules/victory-vendor": {
"version": "36.9.2",
"resolved": "https://registry.npmjs.org/victory-vendor/-/victory-vendor-36.9.2.tgz",
"integrity": "sha512-PnpQQMuxlwYdocC8fIJqVXvkeViHYzotI+NJrCuav0ZYFoq912ZHBk3mCeuj+5/VpodOjPe1z0Fk2ihgzlXqjQ==",
"dependencies": {
"@types/d3-array": "^3.0.3",
"@types/d3-ease": "^3.0.0",
"@types/d3-interpolate": "^3.0.1",
"@types/d3-scale": "^4.0.2",
"@types/d3-shape": "^3.1.0",
"@types/d3-time": "^3.0.0",
"@types/d3-timer": "^3.0.0",
"d3-array": "^3.1.6",
"d3-ease": "^3.0.1",
"d3-interpolate": "^3.0.1",
"d3-scale": "^4.0.2",
"d3-shape": "^3.1.0",
"d3-time": "^3.0.0",
"d3-timer": "^3.0.1"
}
},
"node_modules/w3c-hr-time": {
"version": "1.0.2",
"resolved": "https://registry.npmjs.org/w3c-hr-time/-/w3c-hr-time-1.0.2.tgz",

2
package.json
View File

@@ -15,6 +15,7 @@
"jsqr": "^1.4.0",
"qrcode.react": "^3.1.0",
"react": "^18.3.1",
"react-apexcharts": "^1.7.0",
"react-bootstrap": "^2.10.4",
"react-dom": "^18.3.1",
"react-loader-spinner": "^6.1.6",
@@ -24,7 +25,6 @@
"react-scripts": "5.0.1",
"react-switch": "^7.0.0",
"react-youtube": "^10.1.0",
"recharts": "^2.13.3",
"smooth-scroll-into-view-if-needed": "^2.0.2",
"socket.io-client": "^4.7.5",
"styled-components": "^6.1.11",

214
src/components/BarChart.js
View File

@@ -1,48 +1,17 @@
import React, { useRef, useEffect } from 'react';
import { BarChart, Bar, XAxis, Tooltip, Legend, CartesianGrid, ResponsiveContainer, LabelList } from 'recharts';
import ReactApexChart from 'react-apexcharts';
// Colors palette
const colors = [
// **Analogous Colors** (near greens, yellows)
"#D0E14F", // Light green-yellow
"#B2B83D", // Olive yellow
"#A9C96E", // Muted olive green (your bg color itself)
"#A8B64E", // Olive green with yellow undertones
// **Complementary Colors** (contrast with green)
"#FF6347", // Tomato red
"#FF4500", // Orange red
"#FF8C00", // Dark orange
"#FF7F50", // Coral
// **Triadic Colors** (balanced vibrant combination)
"#1E90FF", // Dodger blue
"#FF00FF", // Magenta
"#32CD32", // Lime green
// **Tetradic Colors** (4-color palette: 2 complementary pairs)
"#00CED1", // Dark turquoise
"#FFD700", // Gold
"#FF1493", // Deep pink
"#8A2BE2", // Blue violet
// **Neutral Tones** (earthy, muted tones to balance the palette)
"#FFDAB9", // Peach
"#F0E68C", // Khaki
"#8B4513", // Saddle brown
"#4B0082", // Indigo
"#C71585", // Medium violet red
// **Pastels for softer contrast**
"#FFB6C1", // Light pink
"#E6E6FA", // Lavender
"#98FB98", // Pale green
"#F0FFF0", // Honeydew
"#D3D3D3", // Light grey
];
"#D0E14F", "#B2B83D", "#A9C96E", "#A8B64E",
"#FF6347", "#FF4500", "#FF8C00", "#FF7F50",
"#1E90FF", "#FF00FF", "#32CD32",
"#00CED1", "#FFD700", "#FF1493", "#8A2BE2",
"#FFDAB9", "#F0E68C", "#8B4513", "#4B0082", "#C71585",
"#FFB6C1", "#E6E6FA", "#98FB98", "#F0FFF0", "#D3D3D3"
];
const SimpleBarChart = ({ Data }) => {
const SimpleLineChart = ({ Data }) => {
const lastMonthRef = useRef('');
const lastYearRef = useRef('');
const usedColors = useRef([]); // Keep track of used colors
@@ -54,23 +23,19 @@ const SimpleBarChart = ({ Data }) => {
// Ensure Data is not null or undefined
const transformedData = (Data?.length ? Data.reduce((acc, { date, materialId, priceAtp, stockDifference, name }) => {
function isSameDay(date1, date2) {
const d1 = new Date(date1);
const d2 = new Date(date2);
return d1.getFullYear() === d2.getFullYear() &&
d1.getMonth() === d2.getMonth() &&
d1.getDate() === d2.getDate();
const d1 = new Date(date1);
const d2 = new Date(date2);
return d1.getFullYear() === d2.getFullYear() &&
d1.getMonth() === d2.getMonth() &&
d1.getDate() === d2.getDate();
}
// Assuming `acc` is an array of entries and `date` is the input date you're checking
const existingEntry = acc.find(d => isSameDay(d.date, date));
console.log(existingEntry)
if (existingEntry) {
// If it exists, sum the stockDifference (priceAtp * stockDifference)
existingEntry[name] = (existingEntry[name] || 0) + (priceAtp * stockDifference);
} else {
// If it doesn't exist yet, add a new entry
acc.push({
date,
materialId,
@@ -78,123 +43,84 @@ const SimpleBarChart = ({ Data }) => {
[name]: priceAtp * stockDifference
});
}
return acc;
}, []) : []);
// Sort the data by date (ascending) to easily find the oldest date
const sortedData = [...transformedData].sort((a, b) => new Date(a.date) - new Date(b.date));
// The first date in the sorted array will be the oldest
const oldestDate = sortedData[0]?.date;
// Get the unique materials (names) from the data
const uniqueMaterials = Array.from(new Set(Data?.map(item => item.name) || []));
const uniqueDates = Array.from(new Set(transformedData.map(item => item.date)));
// Function to format date and handle month and year changes
const formatDate = (date) => {
const formattedDate = new Date(date);
const day = formattedDate.getDate(); // Get the day of the month
const month = formattedDate.toLocaleString('en-US', { month: 'short' }); // Get the abbreviated month (e.g., "Nov")
const year = formattedDate.getFullYear().toString().slice(2); // Get the last two digits of the year (e.g., "24")
// Extract the year from the first data point
const firstYear = new Date(sortedData[0]?.date).getFullYear();
// Check if all dates have the same year
const allSameYear = sortedData.every((item) => new Date(item.date).getFullYear() === firstYear);
// If all dates are from the same year, show only "day month"
if (allSameYear && formattedDate.toLocaleString('en-US', { month: 'short' }) !== lastMonthRef.current) {
lastMonthRef.current = formattedDate.toLocaleString('en-US', { month: 'short' });
// Show just the day and month if all dates have the same year
return `${day} ${month}`;
}
// if (allSameYear) {
// // Show just the day and month if all dates have the same year
// return `${day} ${month}`;
// }
// Check if it's the oldest date (first entry)
if (date === oldestDate) {
lastMonthRef.current = formattedDate.toLocaleDateString('en-US', { month: 'short' });
lastYearRef.current = formattedDate.getFullYear();
return `${day} ${month} ${year}`; // Format as "day month year" (e.g., "4 Nov 24")
}
// If the year changes, show the full date with year
if (formattedDate.getFullYear() !== lastYearRef.current) {
lastYearRef.current = formattedDate.getFullYear();
return `${day} ${month} ${year}`; // Show full date: day month year
}
// If the month changes, show the full date with month and year
if (formattedDate.toLocaleString('en-US', { month: 'short' }) !== lastMonthRef.current) {
lastMonthRef.current = formattedDate.toLocaleString('en-US', { month: 'short' });
return `${day} ${month} `; // Show full date: day month year
}
// Only show the day if the month hasn't changed
return `${day}`; // Show just the day if the month remains the same
};
// Function to get the next available color from the palette, starting from a random index
const getNextColor = () => {
// Randomly pick a starting index from the color palette
const randomIndex = Math.floor(Math.random() * colors.length);
// Find the first unused color from the random starting point
let color = null;
for (let i = 0; i < colors.length; i++) {
const index = (randomIndex + i) % colors.length;
if (!usedColors.current.includes(colors[index])) {
color = colors[index];
usedColors.current.push(color); // Mark color as used
usedColors.current.push(color);
break;
}
}
return color || '#000000'; // Fallback color if no colors are available
return color || '#000000';
};
// Extract unique dates for the XAxis
const uniqueDates = Array.from(new Set(transformedData.map(item => item.date)));
// Prepare data for ApexCharts
const series = uniqueMaterials.map((material) => {
return {
name: material,
data: transformedData.map(item => item[material] || 0)
};
});
const options = {
chart: {
type: 'line',
height: '100%',
zoom: {
enabled: true
}
},
xaxis: {
categories: uniqueDates,
labels: {
style: {
fontSize: '12px',
}
}
},
colors: uniqueMaterials.map(() => getNextColor()), // Assign unique colors for each material
legend: {
position: 'top',
horizontalAlign: 'center',
itemMargin: {
horizontal: 10,
vertical: 0
},
labels: {
colors: '#3498db', // Set legend text color
},
},
tooltip: {
theme: 'light',
style: {
fontSize: '14px',
color: '#3498db'
}
}
};
return (
<div style={{ width: '100%', height: '20vh' }}>
<ResponsiveContainer width="100%" height="100%">
<BarChart data={transformedData}>
{/* Format the XAxis ticks to show only the month when it changes */}
<XAxis
dataKey="date"
tickFormatter={formatDate} // Custom formatting function
interval={0} // Set interval to 0 to display all dates in data
ticks={uniqueDates} // Only use unique dates for the XAxis
/>
<Tooltip
itemStyle={{
color: '#3498db', // Set the tooltip text color to blue
}}
/>
<CartesianGrid strokeDasharray="3 3" />
{/* Dynamically create bars and labels for each unique material */}
{uniqueMaterials.map((material) => (
<React.Fragment key={material}>
<Bar dataKey={material} fill={getNextColor()}>
</Bar>
</React.Fragment>
))}<Legend
wrapperStyle={{
color: '#3498db', // Set the legend text color to blue
backgroundColor: 'white'
}}
/>
</BarChart>
</ResponsiveContainer>
<ReactApexChart
options={options}
series={series}
type="line"
height="100%"
/>
</div>
);
};
export default SimpleBarChart;
export default SimpleLineChart;

10
src/pages/Dashboard.js
View File

@@ -181,7 +181,7 @@ const LinktreePage = ({ user, setModal }) => {
"#9C6E5C", // Muted Brown (earthy, grounded tone)
"#A1A1A1", // Silver (neutral highlight)
];
console.log(items)
const selectedItems = items.items?.find(item => (item.userId || item.cafeId) === selectedItemId);
@@ -191,7 +191,7 @@ const LinktreePage = ({ user, setModal }) => {
// 1. Optionally combine all report items from cafes of the selected tenant
let allSelectedSubItems = null;
if (user.roleId == 1)
allSelectedSubItems = selectedSubItems?.flatMap(cafe => cafe.report?.items || selectedItems.report.items || []);
allSelectedSubItems = selectedSubItems?.flatMap(cafe => cafe.report?.items || selectedItems.report?.items || []);
// 2. Retrieve the specific cafe's report items if needed
const filteredItems = selectedSubItems?.find(cafe => cafe.cafeId == selectedSubItemId) || { report: { items: [] } };
@@ -201,7 +201,7 @@ const LinktreePage = ({ user, setModal }) => {
if (user.roleId == 1 || user.roleId == 0 && selectedItemId == 0)
segments = (selectedItemId != 0 && selectedItemId != -1 && selectedSubItemId == 0 ? allSelectedSubItems : selectedItemId != 0 && selectedItemId != -1 ? filteredItems.report?.items || [] : items?.items || []).map((item, index) => ({
percentage: item.percentage || (items.totalIncome / item.totalIncome || items.totalIncome / item.report.totalIncome) * 100,
percentage: item.percentage || (items?.totalIncome / item?.totalIncome || items?.totalIncome / item?.report?.totalIncome) * 100,
value: item.username || item.name,
color: (colors && colors[index]) || "#cccccc", // Safe check for colors array
})) || []; // Ensure segments is an empty array if no items are availabled
@@ -613,7 +613,7 @@ const sortedMaterials = allMaterials.sort((a, b) => new Date(a.date) - new Date(
1 -205 -24 -27 -69 -23 -89 7 -20 31 -17 172 5 198 17 22 59 22 83 0z"/>
</g>
</svg>
<p>{formatIncome(selectedItems?.report.totalIncome)}</p>
<p>{formatIncome(selectedItems?.report?.totalIncome)}</p>
<p>pemasukan</p>
</div>
<div className={styles.cardItem} >
@@ -657,7 +657,7 @@ const sortedMaterials = allMaterials.sort((a, b) => new Date(a.date) - new Date(
1 -205 -24 -27 -69 -23 -89 7 -20 31 -17 172 5 198 17 22 59 22 83 0z"/>
</g>
</svg>
<p>{formatIncome(selectedItems?.report.currentOutcome)}</p>
<p>{formatIncome(selectedItems?.report?.currentOutcome)}</p>
<p>pengeluaran</p>
</div>
<div className={styles.cardImg}>

44
src/pages/Reports.js
View File

@@ -10,7 +10,6 @@ import MultiSwitch from "react-multi-switch-toggle";
const RoundedRectangle = ({
onClick,
bgColor,
title,
value,
percentage,
@@ -33,7 +32,8 @@ const RoundedRectangle = ({
textAlign: "left",
fontFamily: "Arial, sans-serif",
boxSizing: "border-box",
backgroundColor: loading ? "rgb(127 127 127)" : bgColor,
backgroundColor: loading ? "rgb(127 127 127)" : 'white',
border: '1px solid #b3b1b1'
};
const titleStyle = {
@@ -100,7 +100,7 @@ const RoundedRectangle = ({
);
};
const App = ({ cafeId,
const App = ({ cafeId,
handleClose }) => {
const [analytics, setAnalytics] = useState({});
const [loading, setLoading] = useState(true);
@@ -202,23 +202,26 @@ const App = ({ cafeId,
width: '100vw',
top: 0,
right: 0,
backgroundColor: 'rgb(207, 207, 207)',
overflowY: 'auto'}}
>
backgroundColor: 'white',
overflowY: 'auto'
}}
>
<h2 className={styles["Transactions-title"]}>Laporan</h2>
<div style={{ textAlign: "center",
marginTop: '30px' }}>
<div style={{
textAlign: "center",
marginTop: '30px'
}}>
<MultiSwitch
texts={["kemarin", "minggu ini", "bulan ini", "tahun ini"]}
selectedSwitch={["daily", "weekly", "monthly", "yearly"].indexOf(
filter
)}
borderWidth={0}
bgColor={"rgb(229, 236, 246)"}
borderColor={'#b3b1b1'}
borderWidth={0.1}
onToggleCallback={onToggle}
fontColor={"rgba(88, 55, 50, 1)"}
selectedFontColor={"#1e311b"}
selectedSwitchColor={"rgb(227, 245, 255)"}
fontColor={"black"}
selectedFontColor={"black"}
selectedSwitchColor={"rgb(197, 197, 197)"}
eachSwitchWidth={70}
height={"25px"}
fontSize={"12px"}
@@ -232,7 +235,6 @@ const App = ({ cafeId,
}}
>
<RoundedRectangle
bgColor="#E3F5FF"
title="Pendapatan"
fontSize="12px"
value={!loading && "Rp" + formatIncome(analytics?.totalIncome)}
@@ -241,8 +243,7 @@ const App = ({ cafeId,
loading={loading}
/>
<RoundedRectangle
bgColor="#E5ECF6"
<RoundedRectangle
title="Pengeluaran"
fontSize="12px"
value={!loading && "Rp" + formatIncome(analytics?.currentOutcome)}
@@ -251,7 +252,6 @@ const App = ({ cafeId,
loading={loading}
/>
<RoundedRectangle
bgColor="#E5ECF6"
title="Transaksi"
value={analytics.totalTransactions}
percentage={roundToInteger(analytics.growthTransactions)}
@@ -261,16 +261,14 @@ const App = ({ cafeId,
{analytics?.items &&
analytics?.items.length > 0 && (
<RoundedRectangle
bgColor="#E3F5FF"
title={"Item favorit"}
value={analytics?.items[0]?.name}
loading={loading}
/>
)}
{(!analytics?.items ||
analytics?.items.length === 0) && (
{(!analytics?.items ||
analytics?.items.length === 0) && (
<RoundedRectangle
bgColor="#E5ECF6"
title={"Item favorit"}
value={"-"}
loading={loading}
@@ -281,7 +279,7 @@ const App = ({ cafeId,
>
<div style={{ marginRight: "5px", fontSize: "1.2em" }}>ⓘ</div>
<h6 style={{ margin: 0, textAlign: "left" }}>
Persentase pertumbuhan dihitung dengan membandingkan periode{" "}
Persentase pertumbuhan dihitung dengan membandingkan periode{" "}
{comparisonText} terakhir dengan {comparisonText} hari sebelumnya.
</h6>
</div>
@@ -323,7 +321,7 @@ const App = ({ cafeId,
</div>
</div>
<div class="ItemLister_PaymentOption__YZlDL"><div style={{marginTop:'20px'}} onClick={handleClose} class="ItemLister_Pay2Button__+MIxX">Kembali</div></div>
<div class="ItemLister_PaymentOption__YZlDL"><div style={{ marginTop: '20px' }} onClick={handleClose} class="ItemLister_Pay2Button__+MIxX">Kembali</div></div>
</div>
);
};

2
src/pages/Transactions.module.css
View File

@@ -27,7 +27,7 @@
font-weight: 500;
font-style: normal;
font-size: 32px;
color: rgba(88, 55, 50, 1);
color: black;
text-align: left;
margin-left: 20px;
margin-top: 40px;