From a885d73ceec5273d57832f9d5fec0579484d5708 Mon Sep 17 00:00:00 2001 From: ilyasBozdemir Date: Fri, 3 May 2024 11:37:51 +0300 Subject: [PATCH] app layer panel layotu updated --- .../src/frontend/components/ThemeSwitcher.jsx | 5 +- .../frontend/constants/appSidebarItems.jsx | 46 +- .../layouts/Admin/components/Navbar/index.jsx | 19 +- .../src/frontend/layouts/Admin/layout.jsx | 1 - .../layouts/Anon/components/HeroSection.jsx | 6 +- .../layouts/Anon/components/Navbar.jsx | 14 +- .../layouts/App/components/Navbar/index.jsx | 43 +- .../layouts/App/components/Sidebar/index.jsx | 11 +- .../layouts/Me/components/Navbar/index.jsx | 19 +- .../src/frontend/package-lock.json | 283 ++++++++++++ LibraryTrackingApp/src/frontend/package.json | 1 + .../src/frontend/pages/admin/index.jsx | 12 +- .../src/frontend/pages/app/index.jsx | 405 ++++++++++++++++-- .../src/frontend/pages/app/settings/index.jsx | 24 +- 14 files changed, 736 insertions(+), 153 deletions(-) diff --git a/LibraryTrackingApp/src/frontend/components/ThemeSwitcher.jsx b/LibraryTrackingApp/src/frontend/components/ThemeSwitcher.jsx index 26a370d..a27ce7d 100644 --- a/LibraryTrackingApp/src/frontend/components/ThemeSwitcher.jsx +++ b/LibraryTrackingApp/src/frontend/components/ThemeSwitcher.jsx @@ -42,12 +42,11 @@ function ThemeSwitcher() { <> } p={3} - /> ); diff --git a/LibraryTrackingApp/src/frontend/constants/appSidebarItems.jsx b/LibraryTrackingApp/src/frontend/constants/appSidebarItems.jsx index 67b83b7..d50cefa 100644 --- a/LibraryTrackingApp/src/frontend/constants/appSidebarItems.jsx +++ b/LibraryTrackingApp/src/frontend/constants/appSidebarItems.jsx @@ -1,9 +1,4 @@ -import { - FiHome, - FiSettings, - FiLogOut, - FiBook, -} from "react-icons/fi"; +import { FiHome, FiSettings, FiLogOut, FiBook } from "react-icons/fi"; import { BsArrowLeftRight, BsBook, @@ -265,42 +260,3 @@ export const sidebarItems = [ target: "_self", }, ]; - -export const items = [ - { - title: "Kütüphane", - description: "Kütüphane bilgilerini düzenleyin, yeni kütüphaneler ekleyin.", - link: "/app/library", - }, - { - title: "Üyeler", - description: "Üyeleri yönetin, yeni üyeler ekleyin.", - link: "/app/member", - }, - { - title: "Kitaplar", - description: "Kitapları düzenleyin, yeni kitaplar ekleyin.", - link: "/app/book", - }, - { - title: "Personel", - description: "Personel bilgilerini yönetin, yeni personel ekleyin.", - link: "/app/staff", - }, - { - title: "Ödünç Verme", - description: "Kitap ödünç verme işlemlerini yönetin.", - link: "/app/borrow", - }, - { - title: "Kitap Türleri", - description: "Kitap türlerini düzenleyin, yeni türler ekleyin.", - link: "/app/genre", - }, - { - title: "Kitap Etiketleri", - description: - "Arama terimlerini yönetin, popüler arama terimlerini görüntüleyin ve düzenleyin.", - link: "/app/book-tag", - }, -]; diff --git a/LibraryTrackingApp/src/frontend/layouts/Admin/components/Navbar/index.jsx b/LibraryTrackingApp/src/frontend/layouts/Admin/components/Navbar/index.jsx index 8cdec15..6891113 100644 --- a/LibraryTrackingApp/src/frontend/layouts/Admin/components/Navbar/index.jsx +++ b/LibraryTrackingApp/src/frontend/layouts/Admin/components/Navbar/index.jsx @@ -54,16 +54,15 @@ const Navbar = ({ isOpen, onMenuToggle }) => { return ( {children} diff --git a/LibraryTrackingApp/src/frontend/layouts/Anon/components/HeroSection.jsx b/LibraryTrackingApp/src/frontend/layouts/Anon/components/HeroSection.jsx index 9aedeba..4cb63da 100644 --- a/LibraryTrackingApp/src/frontend/layouts/Anon/components/HeroSection.jsx +++ b/LibraryTrackingApp/src/frontend/layouts/Anon/components/HeroSection.jsx @@ -76,7 +76,7 @@ const HeroSection = () => { maxH="52px" w="max-content" color="white" - bgGradient="linear(to-br, #228be6, #15aabf)" + bgGradient="linear(to-br, teal.500, teal.300)" rounded="md" > {feature.icon} @@ -108,9 +108,9 @@ const HeroSection = () => { - - + diff --git a/LibraryTrackingApp/src/frontend/layouts/App/components/Navbar/index.jsx b/LibraryTrackingApp/src/frontend/layouts/App/components/Navbar/index.jsx index 2e094f4..2eabcaa 100644 --- a/LibraryTrackingApp/src/frontend/layouts/App/components/Navbar/index.jsx +++ b/LibraryTrackingApp/src/frontend/layouts/App/components/Navbar/index.jsx @@ -20,6 +20,7 @@ import LanguageSwitcher from "../../../../components/LanguageSwitcher"; import { FiMinimize, FiMaximize } from "react-icons/fi"; import { HiMenuAlt2 } from "react-icons/hi"; +import { CloseIcon } from "@chakra-ui/icons"; const Navbar = ({ isOpen, onMenuToggle }) => { const [isMaximized, setIsMaximized] = useState(false); @@ -54,30 +55,40 @@ const Navbar = ({ isOpen, onMenuToggle }) => { return ( - + {isOpen ? ( + + ) : ( + + )} - - + + + ); }; diff --git a/LibraryTrackingApp/src/frontend/layouts/App/components/Sidebar/index.jsx b/LibraryTrackingApp/src/frontend/layouts/App/components/Sidebar/index.jsx index c22fa7b..6c82666 100644 --- a/LibraryTrackingApp/src/frontend/layouts/App/components/Sidebar/index.jsx +++ b/LibraryTrackingApp/src/frontend/layouts/App/components/Sidebar/index.jsx @@ -17,7 +17,7 @@ import { useRouter } from "next/router"; import { sidebarItems } from "@/constants/appSidebarItems"; import { useState } from "react"; -function Sidebar({ isOpen, toggleSidebar }) { +function Sidebar({ isOpen }) { const router = useRouter(); return ( @@ -33,21 +33,12 @@ function Sidebar({ isOpen, toggleSidebar }) { transition="0.3s ease-in-out" transform={isOpen ? "translateX(0)" : "translateX(-275px)"} boxShadow="md" - zIndex="2" > Application Panel - - - {sidebarItems.map((item, index) => ( diff --git a/LibraryTrackingApp/src/frontend/layouts/Me/components/Navbar/index.jsx b/LibraryTrackingApp/src/frontend/layouts/Me/components/Navbar/index.jsx index 27718d6..76b1087 100644 --- a/LibraryTrackingApp/src/frontend/layouts/Me/components/Navbar/index.jsx +++ b/LibraryTrackingApp/src/frontend/layouts/Me/components/Navbar/index.jsx @@ -54,16 +54,15 @@ const Navbar = ({ isOpen, onMenuToggle }) => { return ( =12" + } + }, + "node_modules/d3-color": { + "version": "3.1.0", + "resolved": "https://registry.npmjs.org/d3-color/-/d3-color-3.1.0.tgz", + "integrity": "sha512-zg/chbXyeBtMQ1LbD/WSoW2DpC3I0mpmPdW+ynRTj/x2DAWYrIY7qeZIHidozwV24m4iavr15lNwIwLxRmOxhA==", + "engines": { + "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", + "integrity": "sha512-YyUI6AEuY/Wpt8KWLgZHsIU86atmikuoOmCfommt0LYHiQSPjvX2AcFc38PX0CBpr2RCyZhjex+NS/LPOv6YqA==", + "engines": { + "node": ">=12" + } + }, + "node_modules/d3-interpolate": { + "version": "3.0.1", + "resolved": "https://registry.npmjs.org/d3-interpolate/-/d3-interpolate-3.0.1.tgz", + "integrity": "sha512-3bYs1rOD33uo8aqJfKP3JWPAibgw8Zm2+L9vBKEHJ2Rg+viTR7o5Mmv5mZcieN+FRYaAOWX5SJATX6k1PWz72g==", + "dependencies": { + "d3-color": "1 - 3" + }, + "engines": { + "node": ">=12" + } + }, + "node_modules/d3-path": { + "version": "3.1.0", + "resolved": "https://registry.npmjs.org/d3-path/-/d3-path-3.1.0.tgz", + "integrity": "sha512-p3KP5HCf/bvjBSSKuXid6Zqijx7wIfNW+J/maPs+iwR35at5JCbLUT0LzF1cnjbCHWhqzQTIN2Jpe8pRebIEFQ==", + "engines": { + "node": ">=12" + } + }, + "node_modules/d3-scale": { + "version": "4.0.2", + "resolved": "https://registry.npmjs.org/d3-scale/-/d3-scale-4.0.2.tgz", + "integrity": "sha512-GZW464g1SH7ag3Y7hXjf8RoUuAFIqklOAq3MRl4OaWabTFJY9PN/E1YklhXLh+OQ3fM9yS2nOkCoS+WLZ6kvxQ==", + "dependencies": { + "d3-array": "2.10.0 - 3", + "d3-format": "1 - 3", + "d3-interpolate": "1.2.0 - 3", + "d3-time": "2.1.1 - 3", + "d3-time-format": "2 - 4" + }, + "engines": { + "node": ">=12" + } + }, + "node_modules/d3-shape": { + "version": "3.2.0", + "resolved": "https://registry.npmjs.org/d3-shape/-/d3-shape-3.2.0.tgz", + "integrity": "sha512-SaLBuwGm3MOViRq2ABk3eLoxwZELpH6zhl3FbAoJ7Vm1gofKx6El1Ib5z23NUEhF9AsGl7y+dzLe5Cw2AArGTA==", + "dependencies": { + "d3-path": "^3.1.0" + }, + "engines": { + "node": ">=12" + } + }, + "node_modules/d3-time": { + "version": "3.1.0", + "resolved": "https://registry.npmjs.org/d3-time/-/d3-time-3.1.0.tgz", + "integrity": "sha512-VqKjzBLejbSMT4IgbmVgDjpkYrNWUYJnbCGo874u7MMKIWsILRX+OpX/gTk8MqjpT1A/c6HY2dCA77ZN0lkQ2Q==", + "dependencies": { + "d3-array": "2 - 3" + }, + "engines": { + "node": ">=12" + } + }, + "node_modules/d3-time-format": { + "version": "4.1.0", + "resolved": "https://registry.npmjs.org/d3-time-format/-/d3-time-format-4.1.0.tgz", + "integrity": "sha512-dJxPBlzC7NugB2PDLwo9Q8JiTR3M3e4/XANkreKSUxF8vvXKqm1Yfq4Q5dl8budlunRVlUUaDUgFt7eA8D6NLg==", + "dependencies": { + "d3-time": "1 - 3" + }, + "engines": { + "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/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/decko": { "version": "1.2.0", "resolved": "https://registry.npmjs.org/decko/-/decko-1.2.0.tgz", @@ -2434,6 +2604,15 @@ "resolved": "https://registry.npmjs.org/dlv/-/dlv-1.1.3.tgz", "integrity": "sha512-+HlytyjlPKnIG8XuRG8WvmBP8xs8P71y+SKKS6ZXWoEgLuePxtDoUEiH7WkdePWrQ5JBpE6aoVqfZfJUQkjXwA==" }, + "node_modules/dom-helpers": { + "version": "5.2.1", + "resolved": "https://registry.npmjs.org/dom-helpers/-/dom-helpers-5.2.1.tgz", + "integrity": "sha512-nRCa7CK3VTrM2NmGkIy4cbK7IZlgBE/PYMn55rrXefr5xXDP0LdtfPnblFDoVdcAfslJ7or6iqAUnx0CCGIWQA==", + "dependencies": { + "@babel/runtime": "^7.8.7", + "csstype": "^3.0.2" + } + }, "node_modules/dompurify": { "version": "2.5.0", "resolved": "https://registry.npmjs.org/dompurify/-/dompurify-2.5.0.tgz", @@ -2556,6 +2735,14 @@ "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", @@ -2940,6 +3127,14 @@ "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.4.tgz", "integrity": "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==" }, + "node_modules/internmap": { + "version": "2.0.3", + "resolved": "https://registry.npmjs.org/internmap/-/internmap-2.0.3.tgz", + "integrity": "sha512-5Hh7Y1wQbvY5ooGgPbDaL5iYLAPzMTUrjMulskHLH6wnv/A+1q5rgEaiuqEjB+oxGXIVZs1FF+R/KPN3ZSQYYg==", + "engines": { + "node": ">=12" + } + }, "node_modules/invariant": { "version": "2.2.4", "resolved": "https://registry.npmjs.org/invariant/-/invariant-2.2.4.tgz", @@ -4150,6 +4345,20 @@ "react-easy-swipe": "^0.0.21" } }, + "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-style-singleton": { "version": "2.2.1", "resolved": "https://registry.npmjs.org/react-style-singleton/-/react-style-singleton-2.2.1.tgz", @@ -4184,6 +4393,21 @@ "react": "^16.8.0 || ^17.0.0-0 || ^18.0.0" } }, + "node_modules/react-transition-group": { + "version": "4.4.5", + "resolved": "https://registry.npmjs.org/react-transition-group/-/react-transition-group-4.4.5.tgz", + "integrity": "sha512-pZcd1MCJoiKiBR2NRxeCRg13uCXbydPnmB4EOeRrY7480qNWO8IIgQG6zlDkm6uRMsURXPuKq0GWtiM59a5Q6g==", + "dependencies": { + "@babel/runtime": "^7.5.5", + "dom-helpers": "^5.0.1", + "loose-envify": "^1.4.0", + "prop-types": "^15.6.2" + }, + "peerDependencies": { + "react": ">=16.6.0", + "react-dom": ">=16.6.0" + } + }, "node_modules/read-cache": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/read-cache/-/read-cache-1.0.0.tgz", @@ -4203,6 +4427,44 @@ "node": ">=8.10.0" } }, + "node_modules/recharts": { + "version": "2.12.6", + "resolved": "https://registry.npmjs.org/recharts/-/recharts-2.12.6.tgz", + "integrity": "sha512-D+7j9WI+D0NHauah3fKHuNNcRK8bOypPW7os1DERinogGBGaHI7i6tQKJ0aUF3JXyBZ63dyfKIW2WTOPJDxJ8w==", + "dependencies": { + "clsx": "^2.0.0", + "eventemitter3": "^4.0.1", + "lodash": "^4.17.21", + "react-is": "^16.10.2", + "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/clsx": { + "version": "2.1.1", + "resolved": "https://registry.npmjs.org/clsx/-/clsx-2.1.1.tgz", + "integrity": "sha512-eYm0QWBtUrBWZWG0d386OGAw16Z995PiOVo2B7bjWSbHedGl5e0ZWaq65kOGgUSNesEIDkB9ISbTg/JK9dhCZA==", + "engines": { + "node": ">=6" + } + }, "node_modules/redoc": { "version": "2.1.3", "resolved": "https://registry.npmjs.org/redoc/-/redoc-2.1.3.tgz", @@ -4853,6 +5115,27 @@ "resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz", "integrity": "sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==" }, + "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/void-elements": { "version": "3.1.0", "resolved": "https://registry.npmjs.org/void-elements/-/void-elements-3.1.0.tgz", diff --git a/LibraryTrackingApp/src/frontend/package.json b/LibraryTrackingApp/src/frontend/package.json index 9fa326a..bea0c0e 100644 --- a/LibraryTrackingApp/src/frontend/package.json +++ b/LibraryTrackingApp/src/frontend/package.json @@ -36,6 +36,7 @@ "react-joyride": "^2.8.1", "react-leaflet": "^4.2.1", "react-responsive-carousel": "^3.2.23", + "recharts": "^2.12.6", "redoc": "^2.1.3", "tailwindcss": "3.3.3", "yup": "^1.4.0" diff --git a/LibraryTrackingApp/src/frontend/pages/admin/index.jsx b/LibraryTrackingApp/src/frontend/pages/admin/index.jsx index ec2818b..3b5ad9b 100644 --- a/LibraryTrackingApp/src/frontend/pages/admin/index.jsx +++ b/LibraryTrackingApp/src/frontend/pages/admin/index.jsx @@ -1,15 +1,9 @@ import StatData from "@/layouts/Admin/components/Stats"; -import { Box, Flex, Heading, VStack, Text, Badge, HStack } from "@chakra-ui/react"; -import { FiUsers, FiBook, FiMapPin, FiClock } from "react-icons/fi"; +import { Box } from "@chakra-ui/react"; const AdminIndexPage = () => { - const todayActivities = { - newUsers: 5, - newBooks: 10, - newLibraries: 2, - newLocations: 3, - newWorkingHours: 15, - }; + + return ( diff --git a/LibraryTrackingApp/src/frontend/pages/app/index.jsx b/LibraryTrackingApp/src/frontend/pages/app/index.jsx index bc6d6e5..12b0568 100644 --- a/LibraryTrackingApp/src/frontend/pages/app/index.jsx +++ b/LibraryTrackingApp/src/frontend/pages/app/index.jsx @@ -1,51 +1,374 @@ -import { items } from "@/constants/appSidebarItems"; import { + Box, Flex, Heading, - Grid, - GridItem, Text, - Box, - Link as ChakraLink, + SimpleGrid, + VStack, + Stat, + StatLabel, + StatNumber, + CircularProgress, + CircularProgressLabel, + useStatStyles, } from "@chakra-ui/react"; -import Link from "next/link"; +import { useEffect, useState } from "react"; +import { + LineChart, + Line, + XAxis, + YAxis, + CartesianGrid, + Tooltip, + Legend, + ResponsiveContainer, + BarChart, + Bar, +} from "recharts"; + +// Örnek veri +const upcomingEvents = [ + { title: "Kitap Kulübü Toplantısı", date: "24 Mayıs 2024" }, + { title: "Yazar Söyleşisi", date: "28 Mayıs 2024" }, + { title: "Okuma Maratonu", date: "2 Haziran 2024" }, +]; + +const popularBooks = [ + { title: "Yabancı", author: "Albert Camus", borrowed: 42 }, + { title: "Suç ve Ceza", author: "Fyodor Dostoevsky", borrowed: 35 }, + { title: "1984", author: "George Orwell", borrowed: 30 }, + { title: "Küçük Prens", author: "Antoine de Saint-Exupéry", borrowed: 28 }, +]; + +const stockData = [ + { name: "Romanlar", value: 450 }, + { name: "Polisiye", value: 320 }, + { name: "Bilim Kurgu", value: 280 }, + { name: "Klasikler", value: 210 }, +]; + +const dailyStats = { + newMembers: 15, + newBooks: 25, + returnedBooks: 10, +}; + +// Örnek veri kümesi 1 +const monthlyData = [ + { month: "Ocak", newMembers: 200, newBooks: 300 }, + { month: "Şubat", newMembers: 150, newBooks: 250 }, + { month: "Mart", newMembers: 250, newBooks: 350 }, + { month: "Nisan", newMembers: 180, newBooks: 280 }, + { month: "Mayıs", newMembers: 220, newBooks: 320 }, + { month: "Haziran", newMembers: 190, newBooks: 270 }, +]; + +// Örnek veri kümesi 2 +const weeklyData = [ + { week: "Hafta 1", newMembers: 30, newBooks: 40 }, + { week: "Hafta 2", newMembers: 35, newBooks: 45 }, + { week: "Hafta 3", newMembers: 28, newBooks: 38 }, + { week: "Hafta 4", newMembers: 32, newBooks: 42 }, +]; + +// Örnek veri kümesi 3 +const yearlyData = [ + { year: 2022, newMembers: 1500, newBooks: 2000 }, + { year: 2023, newMembers: 1800, newBooks: 2300 }, + { year: 2024, newMembers: 2200, newBooks: 2700 }, +]; + +const totalBooksData = [ + { name: "Romanlar", total: 550 }, + { name: "Polisiye", total: 380 }, + { name: "Bilim Kurgu", total: 320 }, + { name: "Klasikler", total: 230 }, + { name: "Dergiler", total: 180 }, +]; + +// Kütüphane istatistikleri için örnek veri seti +const libraryStatsData = [ + { name: 'Romanlar', total: 550 }, + { name: 'Polisiye', total: 380 }, + { name: 'Bilim Kurgu', total: 320 }, + { name: 'Klasikler', total: 230 }, + { name: 'Dergiler', total: 180 }, +]; + +// Kullanıcı istatistikleri için örnek veri seti +const userStatsData = [ + { name: 'Pazartesi', newUsers: 20, activeUsers: 15 }, + { name: 'Salı', newUsers: 15, activeUsers: 10 }, + { name: 'Çarşamba', newUsers: 25, activeUsers: 20 }, + { name: 'Perşembe', newUsers: 18, activeUsers: 13 }, + { name: 'Cuma', newUsers: 22, activeUsers: 18 }, + { name: 'Cumartesi', newUsers: 27, activeUsers: 22 }, + { name: 'Pazar', newUsers: 30, activeUsers: 25 }, +]; + + +const Dashboard = () => { + const [mount, setMount] = useState(false); + + useEffect(() => { + setMount(true); + }, []); -function AppIndexPage() { return ( - - - Hoş Geldiniz! - - - Bu, kütüphane yönetim paneline hoş geldiniz. Buradan kütüphane, üye, - kitap, personel ve diğer kaynakları yönetebilirsiniz. - - - {items.map((item, index) => ( - - - - {item.title} - - {item.description} - - Detaylar - + + Hoş Geldiniz, Yönetici! + + {/* Günlük Rapor */} + + + Günlük Rapor + + + + Yeni Üyeler + {dailyStats.newMembers} + + + Yeni Kitaplar + {dailyStats.newBooks} + + + İade Edilen Kitaplar + {dailyStats.returnedBooks} + + + + + {/* Yaklaşan Etkinlikler */} + + + Yaklaşan Etkinlikler + + + {upcomingEvents.map((event, index) => ( + + {event.title} + {event.date} + + ))} + + + + {/* En Popüler Kitaplar */} + + + En Popüler Kitaplar + + + {popularBooks.map((book, index) => ( + + {book.title} + {book.author} + {book.borrowed} kez ödünç alındı - - ))} - - + ))} + + + + {/* Stok Durumu ve Kütüphane Dolum Oranı */} + + + + Stok Durumu + + + {stockData.map((data, index) => ( + + {data.name} + {data.value} + + ))} + + + + + Kütüphane Dolum Oranı + + + {70}% + + + + + {/* Grafik */} + + + Günlük Üye ve Kitap İstatistikleri + + + + + + + + + + + + + + + + + + + + + {mount && ( + + + + + + )} + ); -} +}; + +// Aylık istatistikler için grafik +const MonthlyChart = () => ( + + + + + + + + + +); + +// Haftalık istatistikler için grafik +const WeeklyChart = () => ( + + + + + + + + + +); + +// Yıllık istatistikler için grafik +const YearlyChart = () => ( + + + + + + + + + +); +// Toplam eser istatistikleri için grafik +const TotalBooksChart = () => ( + + + + + + + + +); + +// Kütüphane istatistikleri için grafik +const LibraryStatsChart = () => ( + + + + + + + + +); + +// Kullanıcı İstatistikleri için grafik +const UserStatsChart = () => ( + + + + + + + + + + + +); -export default AppIndexPage; +export default Dashboard; diff --git a/LibraryTrackingApp/src/frontend/pages/app/settings/index.jsx b/LibraryTrackingApp/src/frontend/pages/app/settings/index.jsx index a51b0c1..b8ba6fa 100644 --- a/LibraryTrackingApp/src/frontend/pages/app/settings/index.jsx +++ b/LibraryTrackingApp/src/frontend/pages/app/settings/index.jsx @@ -1,4 +1,4 @@ -import { useState } from "react"; +import { useEffect, useState } from "react"; import { Button, Container, @@ -20,7 +20,7 @@ import { Box, Heading, Switch, - ButtonGroup, + useColorMode, } from "@chakra-ui/react"; const LibraryProfileSettingsPage = () => { @@ -60,7 +60,7 @@ const LibraryProfileSettingsPage = () => { return ( - + { }; const GeneralSettingsPage = () => { + const { colorMode, toggleColorMode } = useColorMode(); const toast = useToast(); const [formData, setFormData] = useState({ enableDarkMode: false, @@ -280,8 +281,25 @@ const GeneralSettingsPage = () => { enableAutoApproval: false, }); + useEffect(() => { + const channelBroadcast = () => {}; + const channel = new BroadcastChannel("themeChannel"); + let newColorMode = ""; + + if (formData.enableDarkMode) { + newColorMode = "dark"; + } else { + newColorMode = "light"; + } + + channel.postMessage({ colorMode: newColorMode }); + + channelBroadcast(); + }, [formData.enableDarkMode]); + const handleChange = (e) => { const { name, checked } = e.target; + setFormData((prevData) => ({ ...prevData, [name]: checked,