From 0564f90e460e0472d197830eec34db8445121021 Mon Sep 17 00:00:00 2001 From: Jhunriz <93062821+Jhunriz@users.noreply.github.com> Date: Thu, 31 Aug 2023 16:46:01 +0800 Subject: [PATCH 001/182] dashboard-designed-add-card --- resources/js/Components/Card.jsx | 37 ++++++++++++++++++ resources/js/Layouts/MainLayout.jsx | 2 +- resources/js/Pages/Admin/Dashboard/Index.jsx | 40 +++++++++++--------- 3 files changed, 61 insertions(+), 18 deletions(-) create mode 100644 resources/js/Components/Card.jsx diff --git a/resources/js/Components/Card.jsx b/resources/js/Components/Card.jsx new file mode 100644 index 0000000..405bf70 --- /dev/null +++ b/resources/js/Components/Card.jsx @@ -0,0 +1,37 @@ +import React from "react"; +import PropTypes from "prop-types"; +import Card from "@mui/material/Card"; +import CardContent from "@mui/material/CardContent"; +import Typography from "@mui/material/Typography"; + +const ShippingCard = ({ title, count, icon }) => { + return ( + + + + {icon} + +
+ + {title} + + + {count} + +
+ + + ); +}; + +ShippingCard.propTypes = { + icon: PropTypes.string.isRequired, + title: PropTypes.string.isRequired, + count: PropTypes.string.isRequired, +}; + +export default ShippingCard; diff --git a/resources/js/Layouts/MainLayout.jsx b/resources/js/Layouts/MainLayout.jsx index b6f6f38..4ea6111 100644 --- a/resources/js/Layouts/MainLayout.jsx +++ b/resources/js/Layouts/MainLayout.jsx @@ -287,7 +287,7 @@ export default function MainLayout({ user, children }) {
- {children} +
{children}
); diff --git a/resources/js/Pages/Admin/Dashboard/Index.jsx b/resources/js/Pages/Admin/Dashboard/Index.jsx index 870e14b..9d58314 100644 --- a/resources/js/Pages/Admin/Dashboard/Index.jsx +++ b/resources/js/Pages/Admin/Dashboard/Index.jsx @@ -1,27 +1,33 @@ +import ShippingCard from "@/Components/Card"; import MainLayout from "@/Layouts/MainLayout"; import { Typography } from "@mui/material"; import React from "react"; +import LocalShippingSharpIcon from "@mui/icons-material/LocalShippingSharp"; +import CarCrashSharpIcon from "@mui/icons-material/CarCrashSharp"; +import ProductionQuantityLimitsSharpIcon from "@mui/icons-material/ProductionQuantityLimitsSharp"; export default function Index({ auth, mustVerifyEmail, status }) { return ( - {auth.user.email} - - Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do - eiusmod tempor incididunt ut labore et dolore magna aliqua. - Rhoncus dolor purus non enim praesent elementum facilisis leo - vel. Risus at ultrices mi tempus imperdiet. Semper risus in - hendrerit gravida rutrum quisque non tellus. Convallis convallis - tellus id interdum velit laoreet id donec ultrices. Odio morbi - quis commodo odio aenean sed adipiscing. Amet nisl suscipit - adipiscing bibendum est ultricies integer quis. Cursus euismod - quis viverra nibh cras. Metus vulputate eu scelerisque felis - imperdiet proin fermentum leo. Mauris commodo quis imperdiet - massa tincidunt. Cras tincidunt lobortis feugiat vivamus at - augue. At augue eget arcu dictum varius duis at consectetur - lorem. Velit sed ullamcorper morbi tincidunt. Lorem donec massa - sapien faucibus et molestie ac. - +
+ } + title="To Be Order" + count="1" + /> + } + title="To Be Shipped" + count="3" + /> + + } + title="To Be Delivered" + count="5" + /> +
Consequat mauris nunc congue nisi vitae suscipit. Fringilla est ullamcorper eget nulla facilisi etiam dignissim diam. Pulvinar From 2e697fac2e14966c029a7c4d49488a6c39df90cb Mon Sep 17 00:00:00 2001 From: Jhunriz Date: Fri, 1 Sep 2023 10:43:07 +0800 Subject: [PATCH 002/182] side_navigation_designed_add_icon --- database/seeders/DatabaseSeeder.php | 9 +- resources/js/Layouts/MainLayout.jsx | 109 +++++++++++++++++-- resources/js/Pages/Admin/Dashboard/Index.jsx | 48 +++++--- 3 files changed, 139 insertions(+), 27 deletions(-) diff --git a/database/seeders/DatabaseSeeder.php b/database/seeders/DatabaseSeeder.php index a9f4519..f5cbf26 100644 --- a/database/seeders/DatabaseSeeder.php +++ b/database/seeders/DatabaseSeeder.php @@ -14,9 +14,10 @@ public function run(): void { // \App\Models\User::factory(10)->create(); - // \App\Models\User::factory()->create([ - // 'name' => 'Test User', - // 'email' => 'test@example.com', - // ]); + \App\Models\User::factory()->create([ + 'name' => 'Jhunriz', + 'email' => 'jhunriz14@gmail.com', + 'password' => '123456789' + ]); } } diff --git a/resources/js/Layouts/MainLayout.jsx b/resources/js/Layouts/MainLayout.jsx index 4ea6111..64d0108 100644 --- a/resources/js/Layouts/MainLayout.jsx +++ b/resources/js/Layouts/MainLayout.jsx @@ -1,4 +1,4 @@ -import * as React from "react"; +import React, { useState } from "react"; import Drawer from "@mui/material/Drawer"; import CssBaseline from "@mui/material/CssBaseline"; import MuiAppBar from "@mui/material/AppBar"; @@ -15,7 +15,16 @@ import ListItemButton from "@mui/material/ListItemButton"; import ListItemIcon from "@mui/material/ListItemIcon"; import ListItemText from "@mui/material/ListItemText"; import InboxIcon from "@mui/icons-material/MoveToInbox"; +import SendIcon from "@mui/icons-material/Send"; import { Link, useForm } from "@inertiajs/react"; +import ExpandLess from "@mui/icons-material/ExpandLess"; +import ExpandMore from "@mui/icons-material/ExpandMore"; +import StarBorder from "@mui/icons-material/StarBorder"; +import DraftsIcon from "@mui/icons-material/Drafts"; +import SettingsApplicationsSharpIcon from "@mui/icons-material/SettingsApplicationsSharp"; +import DashboardSharpIcon from "@mui/icons-material/DashboardSharp"; +import PersonSharpIcon from "@mui/icons-material/PersonSharp"; +import InventorySharpIcon from "@mui/icons-material/InventorySharp"; import { Avatar, Menu, @@ -24,6 +33,8 @@ import { Box, styled, useTheme, + ListSubheader, + Collapse, } from "@mui/material"; import { Logout, PersonAdd, Settings } from "@mui/icons-material"; @@ -115,7 +126,19 @@ export default function MainLayout({ user, children }) { setAnchorEl(null); }; - // End account avatar + // expand list dropdown in side nav + // start + const [expanded, setExpanded] = useState(true); // Initially expanded + + const listSideNav = () => { + setExpanded(!expanded); + }; + const [QrSideNav, setQrSideNav] = useState(false); + + const toggleQrSideNav = () => { + setQrSideNav(!QrSideNav); + }; + // end return ( @@ -207,9 +230,6 @@ export default function MainLayout({ user, children }) { {user.name} - - My account - @@ -263,7 +283,7 @@ export default function MainLayout({ user, children }) { - + @@ -272,12 +292,87 @@ export default function MainLayout({ user, children }) { + {/* another sidenav list */} + + {/* start */} + + + + + + + {expanded ? : } + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + {QrSideNav ? : } + + + + + + + + + + + + + + {/* end */} + - + diff --git a/resources/js/Pages/Admin/Dashboard/Index.jsx b/resources/js/Pages/Admin/Dashboard/Index.jsx index 9d58314..9b3fcae 100644 --- a/resources/js/Pages/Admin/Dashboard/Index.jsx +++ b/resources/js/Pages/Admin/Dashboard/Index.jsx @@ -1,12 +1,26 @@ import ShippingCard from "@/Components/Card"; import MainLayout from "@/Layouts/MainLayout"; -import { Typography } from "@mui/material"; +import { Card, Typography } from "@mui/material"; import React from "react"; import LocalShippingSharpIcon from "@mui/icons-material/LocalShippingSharp"; import CarCrashSharpIcon from "@mui/icons-material/CarCrashSharp"; import ProductionQuantityLimitsSharpIcon from "@mui/icons-material/ProductionQuantityLimitsSharp"; +import MUIDataTable from "mui-datatables"; export default function Index({ auth, mustVerifyEmail, status }) { + const columns = ["Name", "Age", "Status"]; + + const data = [ + ["Jhunriz", "23", "Active"], + ["Joshua", "22", "Active"], + ]; + + const options = { + filterType: "checkBox", + elevation: 0, + responsive: "standard", + selectableRows: false, + }; return (
@@ -28,21 +42,23 @@ export default function Index({ auth, mustVerifyEmail, status }) { count="5" />
- - Consequat mauris nunc congue nisi vitae suscipit. Fringilla est - ullamcorper eget nulla facilisi etiam dignissim diam. Pulvinar - elementum integer enim neque volutpat ac tincidunt. Ornare - suspendisse sed nisi lacus sed viverra tellus. Purus sit amet - volutpat consequat mauris. Elementum eu facilisis sed odio - morbi. Euismod lacinia at quis risus sed vulputate odio. Morbi - tincidunt ornare massa eget egestas purus viverra accumsan in. - In hendrerit gravida rutrum quisque non tellus orci ac. - Pellentesque nec nam aliquam sem et tortor. Habitant morbi - tristique senectus et. Adipiscing elit duis tristique - sollicitudin nibh sit. Ornare aenean euismod elementum nisi quis - eleifend. Commodo viverra maecenas accumsan lacus vel facilisis. - Nulla posuere sollicitudin aliquam ultrices sagittis orci a. - +
+ + BarGraph + + + BarGraph + +
+
+ + + +
); } From d0f851db225c90ef3a9b7349f6d497116644bc90 Mon Sep 17 00:00:00 2001 From: Jhunriz Date: Fri, 1 Sep 2023 17:33:03 +0800 Subject: [PATCH 003/182] add_user_table_and_modal --- .../Management/UserManagementController.php | 15 ++ resources/js/Components/InputField.jsx | 27 +++ resources/js/Components/Modal.jsx | 75 ++++++++ resources/js/Layouts/MainLayout.jsx | 35 ++-- .../js/Pages/Admin/Management/User/Index.jsx | 169 ++++++++++++++++++ routes/web.php | 3 + 6 files changed, 300 insertions(+), 24 deletions(-) create mode 100644 app/Http/Controllers/Management/UserManagementController.php create mode 100644 resources/js/Components/InputField.jsx create mode 100644 resources/js/Components/Modal.jsx create mode 100644 resources/js/Pages/Admin/Management/User/Index.jsx diff --git a/app/Http/Controllers/Management/UserManagementController.php b/app/Http/Controllers/Management/UserManagementController.php new file mode 100644 index 0000000..34a6750 --- /dev/null +++ b/app/Http/Controllers/Management/UserManagementController.php @@ -0,0 +1,15 @@ + + + + ); +} diff --git a/resources/js/Components/Modal.jsx b/resources/js/Components/Modal.jsx new file mode 100644 index 0000000..b0f7064 --- /dev/null +++ b/resources/js/Components/Modal.jsx @@ -0,0 +1,75 @@ +import * as React from "react"; +import Backdrop from "@mui/material/Backdrop"; +import Box from "@mui/material/Box"; +import Modal from "@mui/material/Modal"; +import Fade from "@mui/material/Fade"; +import Button from "@mui/material/Button"; +import CloseIcon from "@mui/icons-material/Close"; + +const style = { + position: "absolute", + top: "50%", + left: "50%", + transform: "translate(-50%, -50%)", + width: 600, + bgcolor: "background.paper", + borderRadius: 1, + boxShadow: 24, + p: 4, +}; + +// Define a media query for screens with a maximum width of 768px +const responsiveStyle = { + "@media (max-width: 768px)": { + width: "100%", + height: "100%", // Adjust width for smaller screens + maxWidth: "none", // Remove the maximum width + borderRadius: 0, // Remove border radius + boxShadow: "none", // Remove box shadow + overflow: "auto", // Add overflow for scrolling + }, +}; + +const finalStyle = { ...style, ...responsiveStyle }; + +export default function ReusableModal({ content, title, icon, header }) { + const [open, setOpen] = React.useState(false); + const handleOpen = () => setOpen(true); + const handleClose = () => setOpen(false); + + return ( +
+ + + + +
+ +
+
{header}
+ {content} + + + +
+ ); +} diff --git a/resources/js/Layouts/MainLayout.jsx b/resources/js/Layouts/MainLayout.jsx index 64d0108..1a006d6 100644 --- a/resources/js/Layouts/MainLayout.jsx +++ b/resources/js/Layouts/MainLayout.jsx @@ -312,22 +312,17 @@ export default function MainLayout({ user, children }) { {expanded ? : } - - - - - - - - - - - - - - - - + + + + + + + + + + + @@ -336,14 +331,6 @@ export default function MainLayout({ user, children }) { - - - - - - - - diff --git a/resources/js/Pages/Admin/Management/User/Index.jsx b/resources/js/Pages/Admin/Management/User/Index.jsx new file mode 100644 index 0000000..19d02fe --- /dev/null +++ b/resources/js/Pages/Admin/Management/User/Index.jsx @@ -0,0 +1,169 @@ +import ShippingCard from "@/Components/Card"; +import MainLayout from "@/Layouts/MainLayout"; +import { + Autocomplete, + Avatar, + Button, + Card, + FormControl, + InputLabel, + MenuItem, + Select, + TextField, +} from "@mui/material"; +import React from "react"; +import MUIDataTable from "mui-datatables"; +import TransitionsModal from "@/Components/Modal"; +import ReusableModal from "@/Components/Modal"; +import AddSharpIcon from "@mui/icons-material/AddSharp"; +import BasicTextFields from "@/Components/InputField"; + +export default function Index({ auth, mustVerifyEmail, status }) { + const columns = ["Name", "Age", "Status"]; + + const data = [ + ["Jhunriz", "23", "Active"], + ["Joshua", "22", "Active"], + ]; + + const options = { + filterType: "checkBox", + elevation: 0, + responsive: "standard", + selectableRows: false, + }; + + const [age, setAge] = React.useState(""); + + const handleChange = (event) => { + setAge(event.target.value); + }; + + const top100Films = [ + { label: "The Shawshank Redemption", year: 1994 }, + { label: "The Godfather", year: 1972 }, + { label: "The Godfather: Part II", year: 1974 }, + { label: "The Dark Knight", year: 2008 }, + { label: "12 Angry Men", year: 1957 }, + { label: "Schindler's List", year: 1993 }, + { label: "Pulp Fiction", year: 1994 }, + ]; + return ( + +
+ } + title={"Add User"} + header={ +
+ +
+ } + content={ +
+
+ + + + + +
+
+ + + + Status + + + +
+ + +
+ + +
+
+ +
+
+ } + /> +
+
+ + + +
+ + ); +} diff --git a/routes/web.php b/routes/web.php index 985f9b1..b8c4ed0 100644 --- a/routes/web.php +++ b/routes/web.php @@ -2,6 +2,7 @@ use App\Http\Controllers\Library\GenderController; use App\Http\Controllers\Library\LibraryController; +use App\Http\Controllers\Management\UserManagementController; use App\Http\Controllers\ProfileController; use Illuminate\Foundation\Application; use Illuminate\Support\Facades\Route; @@ -42,6 +43,8 @@ // library Route::resource('/library', LibraryController::class); + // Management + Route::resource('/management', UserManagementController::class); From fdf9a3e3991855adb034404ae398781f6ad29934 Mon Sep 17 00:00:00 2001 From: Jhunriz <93062821+Jhunriz@users.noreply.github.com> Date: Mon, 4 Sep 2023 15:19:26 +0800 Subject: [PATCH 004/182] qr-code-product-done --- .../ProductManagementController.php | 15 ++ .../Controllers/Qr/GenerateQrController.php | 15 ++ app/Http/Controllers/Qr/QrController.php | 15 ++ package-lock.json | 11 +- package.json | 3 +- resources/js/Components/InputField.jsx | 12 +- resources/js/Components/QRCodeGenerator.jsx | 153 +++++++++++++++++ resources/js/Layouts/MainLayout.jsx | 52 +++++- .../Pages/Admin/Management/Products/Index.jsx | 160 ++++++++++++++++++ .../js/Pages/Admin/Qr/GenerateQr/Index.jsx | 48 ++++++ resources/js/Pages/Admin/Qr/Index.jsx | 160 ++++++++++++++++++ routes/web.php | 14 +- 12 files changed, 647 insertions(+), 11 deletions(-) create mode 100644 app/Http/Controllers/Management/ProductManagementController.php create mode 100644 app/Http/Controllers/Qr/GenerateQrController.php create mode 100644 app/Http/Controllers/Qr/QrController.php create mode 100644 resources/js/Components/QRCodeGenerator.jsx create mode 100644 resources/js/Pages/Admin/Management/Products/Index.jsx create mode 100644 resources/js/Pages/Admin/Qr/GenerateQr/Index.jsx create mode 100644 resources/js/Pages/Admin/Qr/Index.jsx diff --git a/app/Http/Controllers/Management/ProductManagementController.php b/app/Http/Controllers/Management/ProductManagementController.php new file mode 100644 index 0000000..622a68b --- /dev/null +++ b/app/Http/Controllers/Management/ProductManagementController.php @@ -0,0 +1,15 @@ + ); diff --git a/resources/js/Components/QRCodeGenerator.jsx b/resources/js/Components/QRCodeGenerator.jsx new file mode 100644 index 0000000..8899229 --- /dev/null +++ b/resources/js/Components/QRCodeGenerator.jsx @@ -0,0 +1,153 @@ +import React, { useState } from "react"; +import QRCode from "qrcode.react"; +import { Box, TextField } from "@mui/material"; + +const QRCodeGenerator = () => { + const [ProductName, setProductName] = useState(""); + + const handleInputChange = (e) => { + setProductName(e.target.value); + }; + const [Inventory, setInventory] = useState(""); + const handleInventoryChange = (e) => { + setInventory(e.target.value); + }; + + const [Department, setDepartment] = useState(""); + const handleDepartmentChange = (e) => { + setDepartment(e.target.value); + }; + + const [Purchase, setPurchase] = useState(""); + const handlePurchaseChange = (e) => { + setPurchase(e.target.value); + }; + + const value = + "Product Name:" + + ProductName + + "\n" + + Inventory + + "\n" + + Department + + "\n" + + Purchase; + + const DownloadButton = () => { + const handleDownload = () => { + const canvas = document.getElementById("qrcode-canvas"); + const a = document.createElement("a"); + a.href = canvas.toDataURL("image/png"); + a.download = "qrcode.png"; + a.click(); + }; + + return ( + + ); + }; + + const PrintButton = () => { + const handlePrint = () => { + const printWindow = window.open("", "", "width=600,height=600"); + printWindow.document.open(); + printWindow.document.write( + "QR Code" + ); + printWindow.document.write( + `QR Code` + ); + printWindow.document.write(""); + printWindow.document.close(); + printWindow.print(); + printWindow.close(); + }; + + return ( + + ); + }; + + return ( +
+
+

QR Code Generator

+ +
+ + + + +
+ +
+
+
+ {ProductName && ( + + )} +
+
+ + +
+
+
+ ); +}; + +export default QRCodeGenerator; diff --git a/resources/js/Layouts/MainLayout.jsx b/resources/js/Layouts/MainLayout.jsx index 1a006d6..2dc28fe 100644 --- a/resources/js/Layouts/MainLayout.jsx +++ b/resources/js/Layouts/MainLayout.jsx @@ -25,6 +25,9 @@ import SettingsApplicationsSharpIcon from "@mui/icons-material/SettingsApplicati import DashboardSharpIcon from "@mui/icons-material/DashboardSharp"; import PersonSharpIcon from "@mui/icons-material/PersonSharp"; import InventorySharpIcon from "@mui/icons-material/InventorySharp"; +import QrCodeIcon from "@mui/icons-material/QrCode"; +import QrCodeScannerIcon from "@mui/icons-material/QrCodeScanner"; +import PostAddIcon from "@mui/icons-material/PostAdd"; import { Avatar, Menu, @@ -140,6 +143,12 @@ export default function MainLayout({ user, children }) { }; // end + const [Qr, setQr] = useState(false); + + const generateQr = () => { + setQr(!Qr); + }; + return ( @@ -324,12 +333,14 @@ export default function MainLayout({ user, children }) { - - - - - - + + + + + + + + @@ -353,6 +364,35 @@ export default function MainLayout({ user, children }) { {/* end */} + + + + + + + {Qr ? : } + + + + + + + + + + + + + + + + + + + + + + diff --git a/resources/js/Pages/Admin/Management/Products/Index.jsx b/resources/js/Pages/Admin/Management/Products/Index.jsx new file mode 100644 index 0000000..b01124c --- /dev/null +++ b/resources/js/Pages/Admin/Management/Products/Index.jsx @@ -0,0 +1,160 @@ +import ShippingCard from "@/Components/Card"; +import MainLayout from "@/Layouts/MainLayout"; +import { + Autocomplete, + Avatar, + Button, + Card, + FormControl, + InputLabel, + MenuItem, + Select, + TextField, +} from "@mui/material"; +import React from "react"; +import MUIDataTable from "mui-datatables"; +import TransitionsModal from "@/Components/Modal"; +import ReusableModal from "@/Components/Modal"; +import AddSharpIcon from "@mui/icons-material/AddSharp"; +import BasicTextFields from "@/Components/InputField"; + +export default function Index({ auth, mustVerifyEmail, status }) { + const columns = ["Product Name", "Product ID", "Status"]; + + const data = [ + ["Lenovo laptop", "ABC1234", "Active"], + ["Lenovo PC", "ABC4321", "Pending"], + ]; + + const options = { + filterType: "checkBox", + elevation: 0, + responsive: "standard", + selectableRows: false, + }; + + const [age, setAge] = React.useState(""); + + const handleChange = (event) => { + setAge(event.target.value); + }; + + return ( + +
+ } + title={"Add Product"} + header={ +
+ +
+ } + content={ +
+
+ + + + + +
+
+ + + + Status + + + +
+ + +
+ + +
+
+ +
+
+ } + /> +
+
+ + + +
+ + ); +} diff --git a/resources/js/Pages/Admin/Qr/GenerateQr/Index.jsx b/resources/js/Pages/Admin/Qr/GenerateQr/Index.jsx new file mode 100644 index 0000000..8ec6c13 --- /dev/null +++ b/resources/js/Pages/Admin/Qr/GenerateQr/Index.jsx @@ -0,0 +1,48 @@ +import ShippingCard from "@/Components/Card"; +import MainLayout from "@/Layouts/MainLayout"; +import { + Autocomplete, + Avatar, + Button, + Card, + FormControl, + InputLabel, + MenuItem, + Select, + TextField, +} from "@mui/material"; +import React from "react"; +import MUIDataTable from "mui-datatables"; +import TransitionsModal from "@/Components/Modal"; +import ReusableModal from "@/Components/Modal"; +import AddSharpIcon from "@mui/icons-material/AddSharp"; +import BasicTextFields from "@/Components/InputField"; +import QRCodeGenerator from "@/Components/QRCodeGenerator"; + +export default function Index({ auth, mustVerifyEmail, status }) { + const columns = ["Product Name", "Product ID", "Status"]; + + const data = [ + ["Lenovo laptop", "ABC1234", "Active"], + ["Lenovo PC", "ABC4321", "Pending"], + ]; + + const options = { + filterType: "checkBox", + elevation: 0, + responsive: "standard", + selectableRows: false, + }; + + const [age, setAge] = React.useState(""); + + const handleChange = (event) => { + setAge(event.target.value); + }; + + return ( + + + + ); +} diff --git a/resources/js/Pages/Admin/Qr/Index.jsx b/resources/js/Pages/Admin/Qr/Index.jsx new file mode 100644 index 0000000..554f02c --- /dev/null +++ b/resources/js/Pages/Admin/Qr/Index.jsx @@ -0,0 +1,160 @@ +import ShippingCard from "@/Components/Card"; +import MainLayout from "@/Layouts/MainLayout"; +import { + Autocomplete, + Avatar, + Button, + Card, + FormControl, + InputLabel, + MenuItem, + Select, + TextField, +} from "@mui/material"; +import React from "react"; +import MUIDataTable from "mui-datatables"; +import TransitionsModal from "@/Components/Modal"; +import ReusableModal from "@/Components/Modal"; +import AddSharpIcon from "@mui/icons-material/AddSharp"; +import BasicTextFields from "@/Components/InputField"; + +export default function Index({ auth, mustVerifyEmail, status }) { + const columns = ["Product Name", "Product ID", "Status"]; + + const data = [ + ["Lenovo laptop", "ABC1234", "Active"], + ["Lenovo PC", "ABC4321", "Pending"], + ]; + + const options = { + filterType: "checkBox", + elevation: 0, + responsive: "standard", + selectableRows: false, + }; + + const [age, setAge] = React.useState(""); + + const handleChange = (event) => { + setAge(event.target.value); + }; + + return ( + +
+ } + title={"Add Record"} + header={ +
+ +
+ } + content={ +
+
+ + + + + +
+
+ + + + Status + + + +
+ + +
+ + +
+
+ +
+
+ } + /> +
+
+ + + +
+ + ); +} diff --git a/routes/web.php b/routes/web.php index b8c4ed0..8cc6fbd 100644 --- a/routes/web.php +++ b/routes/web.php @@ -2,8 +2,11 @@ use App\Http\Controllers\Library\GenderController; use App\Http\Controllers\Library\LibraryController; +use App\Http\Controllers\Management\ProductManagementController; use App\Http\Controllers\Management\UserManagementController; use App\Http\Controllers\ProfileController; +use App\Http\Controllers\Qr\GenerateQrController; +use App\Http\Controllers\Qr\QrController; use Illuminate\Foundation\Application; use Illuminate\Support\Facades\Route; use Inertia\Inertia; @@ -45,6 +48,14 @@ Route::resource('/library', LibraryController::class); // Management Route::resource('/management', UserManagementController::class); + Route::resource('/products', ProductManagementController::class); + + // Qr code + Route::resource('/qr', QrController::class); + Route::resource('/generateqr', GenerateQrController::class); + + + @@ -55,11 +66,10 @@ Route::patch('/profile', [ProfileController::class, 'update'])->name('profile.update'); Route::delete('/profile', [ProfileController::class, 'destroy'])->name('profile.destroy'); }); - }); -require __DIR__.'/auth.php'; +require __DIR__ . '/auth.php'; From bb109c64771c5390d14d7dace4a242664b808509 Mon Sep 17 00:00:00 2001 From: Jhunriz <93062821+Jhunriz@users.noreply.github.com> Date: Mon, 4 Sep 2023 16:01:17 +0800 Subject: [PATCH 005/182] organize-forms user and products --- resources/js/Pages/Admin/Qr/Index.jsx | 54 ++++++--------------------- 1 file changed, 11 insertions(+), 43 deletions(-) diff --git a/resources/js/Pages/Admin/Qr/Index.jsx b/resources/js/Pages/Admin/Qr/Index.jsx index 554f02c..7892664 100644 --- a/resources/js/Pages/Admin/Qr/Index.jsx +++ b/resources/js/Pages/Admin/Qr/Index.jsx @@ -54,36 +54,27 @@ export default function Index({ auth, mustVerifyEmail, status }) { } content={
-
+
-
-
- Widow -
- - -
- -
-
- +
+ +
} From 11755ae2f779ccd672e44cc7718b19ee465c9e2c Mon Sep 17 00:00:00 2001 From: Jhunriz <93062821+Jhunriz@users.noreply.github.com> Date: Mon, 4 Sep 2023 16:01:42 +0800 Subject: [PATCH 006/182] organize form --- resources/js/Layouts/MainLayout.jsx | 3 +- .../Pages/Admin/Management/Products/Index.jsx | 56 ++++--------------- 2 files changed, 14 insertions(+), 45 deletions(-) diff --git a/resources/js/Layouts/MainLayout.jsx b/resources/js/Layouts/MainLayout.jsx index 2dc28fe..c88e091 100644 --- a/resources/js/Layouts/MainLayout.jsx +++ b/resources/js/Layouts/MainLayout.jsx @@ -28,6 +28,7 @@ import InventorySharpIcon from "@mui/icons-material/InventorySharp"; import QrCodeIcon from "@mui/icons-material/QrCode"; import QrCodeScannerIcon from "@mui/icons-material/QrCodeScanner"; import PostAddIcon from "@mui/icons-material/PostAdd"; +import AddBoxIcon from "@mui/icons-material/AddBox"; import { Avatar, Menu, @@ -346,7 +347,7 @@ export default function MainLayout({ user, children }) { - + {QrSideNav ? : } diff --git a/resources/js/Pages/Admin/Management/Products/Index.jsx b/resources/js/Pages/Admin/Management/Products/Index.jsx index b01124c..4fd1cab 100644 --- a/resources/js/Pages/Admin/Management/Products/Index.jsx +++ b/resources/js/Pages/Admin/Management/Products/Index.jsx @@ -53,37 +53,28 @@ export default function Index({ auth, mustVerifyEmail, status }) {
} content={ -
-
+
+
-
-
- Widow -
- - -
- -
-
- +
+ +
} From cb2c5bc68e47acbc07d9fb0d66bdb01b1fc29e2f Mon Sep 17 00:00:00 2001 From: Jhunriz <93062821+Jhunriz@users.noreply.github.com> Date: Mon, 4 Sep 2023 16:36:31 +0800 Subject: [PATCH 007/182] add-speed-dial --- resources/js/Pages/Admin/Management/User/Index.jsx | 1 + 1 file changed, 1 insertion(+) diff --git a/resources/js/Pages/Admin/Management/User/Index.jsx b/resources/js/Pages/Admin/Management/User/Index.jsx index 19d02fe..f82484b 100644 --- a/resources/js/Pages/Admin/Management/User/Index.jsx +++ b/resources/js/Pages/Admin/Management/User/Index.jsx @@ -69,6 +69,7 @@ export default function Index({ auth, mustVerifyEmail, status }) { variant="outlined" id="Last Name" size={"medium"} + required /> Date: Mon, 4 Sep 2023 16:36:56 +0800 Subject: [PATCH 008/182] add-speed-dial --- resources/js/Components/CustomSpeedDial.jsx | 25 ++++++++++++++++++++ resources/js/Components/InputField.jsx | 2 ++ resources/js/Layouts/MainLayout.jsx | 26 ++++++++++++++++++++- resources/js/Pages/Profile/Edit.jsx | 2 +- 4 files changed, 53 insertions(+), 2 deletions(-) create mode 100644 resources/js/Components/CustomSpeedDial.jsx diff --git a/resources/js/Components/CustomSpeedDial.jsx b/resources/js/Components/CustomSpeedDial.jsx new file mode 100644 index 0000000..06b09b7 --- /dev/null +++ b/resources/js/Components/CustomSpeedDial.jsx @@ -0,0 +1,25 @@ +import * as React from "react"; +import Box from "@mui/material/Box"; +import SpeedDial from "@mui/material/SpeedDial"; +import SpeedDialIcon from "@mui/material/SpeedDialIcon"; +import SpeedDialAction from "@mui/material/SpeedDialAction"; + +export default function CustomSpeedDial({ actions, openIcon }) { + return ( + + } + > + {actions.map((action) => ( + + ))} + + + ); +} diff --git a/resources/js/Components/InputField.jsx b/resources/js/Components/InputField.jsx index 2b072ef..1c39e8f 100644 --- a/resources/js/Components/InputField.jsx +++ b/resources/js/Components/InputField.jsx @@ -11,6 +11,7 @@ export default function BasicTextFields({ type, value, onchange, + required, }) { return ( ); diff --git a/resources/js/Layouts/MainLayout.jsx b/resources/js/Layouts/MainLayout.jsx index c88e091..ffdd06e 100644 --- a/resources/js/Layouts/MainLayout.jsx +++ b/resources/js/Layouts/MainLayout.jsx @@ -42,6 +42,13 @@ import { } from "@mui/material"; import { Logout, PersonAdd, Settings } from "@mui/icons-material"; +import FileCopyIcon from "@mui/icons-material/FileCopyOutlined"; +import SaveIcon from "@mui/icons-material/Save"; +import PrintIcon from "@mui/icons-material/Print"; +import ShareIcon from "@mui/icons-material/Share"; +import EditIcon from "@mui/icons-material/Edit"; +import CustomSpeedDial from "@/Components/CustomSpeedDial"; + const drawerWidth = 240; const Main = styled("main", { shouldForwardProp: (prop) => prop !== "open" })( @@ -150,6 +157,15 @@ export default function MainLayout({ user, children }) { setQr(!Qr); }; + // speed dial + + const actions = [ + { icon: , name: "Copy" }, + { icon: , name: "Save" }, + { icon: , name: "Print" }, + { icon: , name: "Share" }, + ]; + return ( @@ -410,7 +426,15 @@ export default function MainLayout({ user, children }) {
-
{children}
+
+ {children} +
+ } + /> +
+
); diff --git a/resources/js/Pages/Profile/Edit.jsx b/resources/js/Pages/Profile/Edit.jsx index 144aa1a..f423246 100644 --- a/resources/js/Pages/Profile/Edit.jsx +++ b/resources/js/Pages/Profile/Edit.jsx @@ -13,7 +13,7 @@ export default function Edit({ auth }) { }; return ( -
+
From e5fe2f91bc56cc37214f3305a37308d867a3cc41 Mon Sep 17 00:00:00 2001 From: Jhunriz <93062821+Jhunriz@users.noreply.github.com> Date: Mon, 4 Sep 2023 16:59:12 +0800 Subject: [PATCH 009/182] add-barGraph-and-pieGraph --- package-lock.json | 135 +++++++++++++++++++ package.json | 1 + resources/js/Components/BasicPie.jsx | 22 +++ resources/js/Components/StackBar.jsx | 20 +++ resources/js/Pages/Admin/Dashboard/Index.jsx | 12 +- 5 files changed, 187 insertions(+), 3 deletions(-) create mode 100644 resources/js/Components/BasicPie.jsx create mode 100644 resources/js/Components/StackBar.jsx diff --git a/package-lock.json b/package-lock.json index cbb87a5..defd6ac 100644 --- a/package-lock.json +++ b/package-lock.json @@ -9,6 +9,7 @@ "@emotion/styled": "^11.11.0", "@mui/icons-material": "^5.14.3", "@mui/material": "^5.14.5", + "@mui/x-charts": "^6.0.0-alpha.9", "mui-datatables": "^4.3.0", "qrcode.react": "^3.1.0" }, @@ -1229,6 +1230,38 @@ "react": "^17.0.0 || ^18.0.0" } }, + "node_modules/@mui/x-charts": { + "version": "6.0.0-alpha.9", + "resolved": "https://registry.npmjs.org/@mui/x-charts/-/x-charts-6.0.0-alpha.9.tgz", + "integrity": "sha512-2DVTbyxsm3g0D6kztQP9W4W9OOGeIQ/g6Ip6gjHj2wOOqkDB36bZxwVG/HlJuaVFBL001vI2VkYJYy+helw9gA==", + "dependencies": { + "@babel/runtime": "^7.22.11", + "clsx": "^2.0.0", + "d3-color": "^3.1.0", + "d3-scale": "^4.0.2", + "d3-shape": "^3.2.0", + "prop-types": "^15.8.1" + }, + "engines": { + "node": ">=14.0.0" + }, + "peerDependencies": { + "@emotion/react": "^11.9.0", + "@emotion/styled": "^11.8.1", + "@mui/material": "^5.4.1", + "@mui/system": "^5.4.1", + "react": "^17.0.0 || ^18.0.0", + "react-dom": "^17.0.0 || ^18.0.0" + }, + "peerDependenciesMeta": { + "@emotion/react": { + "optional": true + }, + "@emotion/styled": { + "optional": true + } + } + }, "node_modules/@nodelib/fs.scandir": { "version": "2.1.5", "resolved": "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz", @@ -1746,6 +1779,100 @@ "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.2.tgz", "integrity": "sha512-I7K1Uu0MBPzaFKg4nI5Q7Vs2t+3gWWW648spaF+Rg7pI9ds18Ugn+lvg4SHczUdKlHI5LWBXyqfS8+DufyBsgQ==" }, + "node_modules/d3-array": { + "version": "3.2.4", + "resolved": "https://registry.npmjs.org/d3-array/-/d3-array-3.2.4.tgz", + "integrity": "sha512-tdQAmyA18i4J7wprpYq8ClcxZy3SC31QMeByyCFyRt7BVHdREQZ5lpzoe5mFEYZUWe+oq8HBvk9JjpibyEV4Jg==", + "dependencies": { + "internmap": "1 - 2" + }, + "engines": { + "node": ">=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-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/debug": { "version": "4.3.4", "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.4.tgz", @@ -2161,6 +2288,14 @@ "integrity": "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==", "dev": true }, + "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/is-arrayish": { "version": "0.2.1", "resolved": "https://registry.npmjs.org/is-arrayish/-/is-arrayish-0.2.1.tgz", diff --git a/package.json b/package.json index d57dd4e..4795361 100644 --- a/package.json +++ b/package.json @@ -23,6 +23,7 @@ "@emotion/styled": "^11.11.0", "@mui/icons-material": "^5.14.3", "@mui/material": "^5.14.5", + "@mui/x-charts": "^6.0.0-alpha.9", "mui-datatables": "^4.3.0", "qrcode.react": "^3.1.0" } diff --git a/resources/js/Components/BasicPie.jsx b/resources/js/Components/BasicPie.jsx new file mode 100644 index 0000000..0b59d81 --- /dev/null +++ b/resources/js/Components/BasicPie.jsx @@ -0,0 +1,22 @@ +import * as React from "react"; +import { PieChart } from "@mui/x-charts/PieChart"; + +export default function BasicPie() { + return ( +
+ +
+ ); +} diff --git a/resources/js/Components/StackBar.jsx b/resources/js/Components/StackBar.jsx new file mode 100644 index 0000000..3bbcb7b --- /dev/null +++ b/resources/js/Components/StackBar.jsx @@ -0,0 +1,20 @@ +import * as React from "react"; +import { BarChart } from "@mui/x-charts/BarChart"; + +export default function StackBars() { + return ( +
+ +
+ ); +} diff --git a/resources/js/Pages/Admin/Dashboard/Index.jsx b/resources/js/Pages/Admin/Dashboard/Index.jsx index 9b3fcae..602d718 100644 --- a/resources/js/Pages/Admin/Dashboard/Index.jsx +++ b/resources/js/Pages/Admin/Dashboard/Index.jsx @@ -6,6 +6,8 @@ import LocalShippingSharpIcon from "@mui/icons-material/LocalShippingSharp"; import CarCrashSharpIcon from "@mui/icons-material/CarCrashSharp"; import ProductionQuantityLimitsSharpIcon from "@mui/icons-material/ProductionQuantityLimitsSharp"; import MUIDataTable from "mui-datatables"; +import StackBars from "@/Components/StackBar"; +import BasicPie from "@/Components/BasicPie"; export default function Index({ auth, mustVerifyEmail, status }) { const columns = ["Name", "Age", "Status"]; @@ -42,12 +44,16 @@ export default function Index({ auth, mustVerifyEmail, status }) { count="5" />
-
+
- BarGraph + + + - BarGraph + + +
From 78e8dc8f632a01416b7a6af5a2a24dc65309cb61 Mon Sep 17 00:00:00 2001 From: Jhunriz <93062821+Jhunriz@users.noreply.github.com> Date: Tue, 5 Sep 2023 10:15:03 +0800 Subject: [PATCH 010/182] add-alert-snackbar --- resources/js/Components/CustomizeSnackBar.jsx | 52 +++++++++++++++++++ resources/js/Components/QRCodeGenerator.jsx | 5 +- .../Pages/Admin/Management/Products/Index.jsx | 8 +-- .../js/Pages/Admin/Management/User/Index.jsx | 19 +++---- resources/js/Pages/Admin/Qr/Index.jsx | 8 +-- 5 files changed, 72 insertions(+), 20 deletions(-) create mode 100644 resources/js/Components/CustomizeSnackBar.jsx diff --git a/resources/js/Components/CustomizeSnackBar.jsx b/resources/js/Components/CustomizeSnackBar.jsx new file mode 100644 index 0000000..dd72288 --- /dev/null +++ b/resources/js/Components/CustomizeSnackBar.jsx @@ -0,0 +1,52 @@ +import * as React from "react"; +import Stack from "@mui/material/Stack"; +import Button from "@mui/material/Button"; +import Snackbar from "@mui/material/Snackbar"; +import MuiAlert from "@mui/material/Alert"; + +const Alert = React.forwardRef(function Alert(props, ref) { + return ; +}); + +export default function CustomizedSnackbars({ title, alertMessage }) { + const [open, setOpen] = React.useState(false); + + const handleClick = () => { + setOpen(true); + }; + + const handleClose = (event, reason) => { + if (reason === "clickaway") { + return; + } + setOpen(false); + }; + + // Your condition here (e.g., showSnackbar) + const showSnackbar = true; // Replace this with your condition + + return ( + <> + + + + {showSnackbar && ( + + + {alertMessage} + + + )} + + ); +} diff --git a/resources/js/Components/QRCodeGenerator.jsx b/resources/js/Components/QRCodeGenerator.jsx index 8899229..b91663b 100644 --- a/resources/js/Components/QRCodeGenerator.jsx +++ b/resources/js/Components/QRCodeGenerator.jsx @@ -24,13 +24,16 @@ const QRCodeGenerator = () => { }; const value = - "Product Name:" + + "Product Name: " + ProductName + "\n" + + "Inventory: " + Inventory + "\n" + + "Department: " + Department + "\n" + + "Purchase. :" + Purchase; const DownloadButton = () => { diff --git a/resources/js/Pages/Admin/Management/Products/Index.jsx b/resources/js/Pages/Admin/Management/Products/Index.jsx index 4fd1cab..7f032fc 100644 --- a/resources/js/Pages/Admin/Management/Products/Index.jsx +++ b/resources/js/Pages/Admin/Management/Products/Index.jsx @@ -17,6 +17,7 @@ import TransitionsModal from "@/Components/Modal"; import ReusableModal from "@/Components/Modal"; import AddSharpIcon from "@mui/icons-material/AddSharp"; import BasicTextFields from "@/Components/InputField"; +import CustomizedSnackbars from "@/Components/CustomizeSnackBar"; export default function Index({ auth, mustVerifyEmail, status }) { const columns = ["Product Name", "Product ID", "Status"]; @@ -105,9 +106,10 @@ export default function Index({ auth, mustVerifyEmail, status }) { type={"email"} />
- +
diff --git a/resources/js/Pages/Admin/Management/User/Index.jsx b/resources/js/Pages/Admin/Management/User/Index.jsx index f82484b..77f0407 100644 --- a/resources/js/Pages/Admin/Management/User/Index.jsx +++ b/resources/js/Pages/Admin/Management/User/Index.jsx @@ -17,6 +17,7 @@ import TransitionsModal from "@/Components/Modal"; import ReusableModal from "@/Components/Modal"; import AddSharpIcon from "@mui/icons-material/AddSharp"; import BasicTextFields from "@/Components/InputField"; +import CustomizedSnackbars from "@/Components/CustomizeSnackBar"; export default function Index({ auth, mustVerifyEmail, status }) { const columns = ["Name", "Age", "Status"]; @@ -39,15 +40,6 @@ export default function Index({ auth, mustVerifyEmail, status }) { setAge(event.target.value); }; - const top100Films = [ - { label: "The Shawshank Redemption", year: 1994 }, - { label: "The Godfather", year: 1972 }, - { label: "The Godfather: Part II", year: 1974 }, - { label: "The Dark Knight", year: 2008 }, - { label: "12 Angry Men", year: 1957 }, - { label: "Schindler's List", year: 1993 }, - { label: "Pulp Fiction", year: 1994 }, - ]; return (
@@ -148,16 +140,17 @@ export default function Index({ auth, mustVerifyEmail, status }) { />
- +
} />
- +
- +
From b3d5425b4ccb3de1465b575ff943c908f4d5463d Mon Sep 17 00:00:00 2001 From: Jhunriz <93062821+Jhunriz@users.noreply.github.com> Date: Tue, 5 Sep 2023 13:30:32 +0800 Subject: [PATCH 011/182] add-breadcrumbs --- .../Controllers/Storage/StorageController.php | 15 ++ resources/js/Components/BarcodeGenerator.jsx | 49 ++++++ resources/js/Components/CustomBreadcrumbs.jsx | 30 ++++ resources/js/Components/SkeletonColor.jsx | 29 ++++ resources/js/Layouts/MainLayout.jsx | 48 ++++-- resources/js/Pages/Admin/Dashboard/Index.jsx | 23 +++ .../Pages/Admin/Management/Products/Index.jsx | 29 ++++ .../js/Pages/Admin/Management/User/Index.jsx | 29 ++++ .../js/Pages/Admin/Qr/GenerateQr/Index.jsx | 29 ++++ resources/js/Pages/Admin/Qr/Index.jsx | 29 ++++ resources/js/Pages/Admin/Storage/Index.jsx | 159 ++++++++++++++++++ routes/web.php | 5 + 12 files changed, 459 insertions(+), 15 deletions(-) create mode 100644 app/Http/Controllers/Storage/StorageController.php create mode 100644 resources/js/Components/BarcodeGenerator.jsx create mode 100644 resources/js/Components/CustomBreadcrumbs.jsx create mode 100644 resources/js/Components/SkeletonColor.jsx create mode 100644 resources/js/Pages/Admin/Storage/Index.jsx diff --git a/app/Http/Controllers/Storage/StorageController.php b/app/Http/Controllers/Storage/StorageController.php new file mode 100644 index 0000000..d342a8a --- /dev/null +++ b/app/Http/Controllers/Storage/StorageController.php @@ -0,0 +1,15 @@ + { + const [barcodeValue, setBarcodeValue] = useState(""); + + const handleInputChange = (e) => { + setBarcodeValue(e.target.value); + }; + + return ( +
+
+

Barcode Generator

+ +
+ +
+ +
+
+
+ {barcodeValue && ( + + )} +
+
+
+ ); +}; + +export default BarcodeGenerator; diff --git a/resources/js/Components/CustomBreadcrumbs.jsx b/resources/js/Components/CustomBreadcrumbs.jsx new file mode 100644 index 0000000..4f72139 --- /dev/null +++ b/resources/js/Components/CustomBreadcrumbs.jsx @@ -0,0 +1,30 @@ +import React from "react"; +import Typography from "@mui/material/Typography"; +import Breadcrumbs from "@mui/material/Breadcrumbs"; +import Link from "@mui/material/Link"; + +function handleClick(event) { + event.preventDefault(); + console.info("You clicked a breadcrumb."); +} + +export default function CustomBreadcrumbs({ items }) { + return ( +
+ + {items.map((item, index) => ( + + {item.icon} + {item.text} + + ))} + +
+ ); +} diff --git a/resources/js/Components/SkeletonColor.jsx b/resources/js/Components/SkeletonColor.jsx new file mode 100644 index 0000000..e0f3ccc --- /dev/null +++ b/resources/js/Components/SkeletonColor.jsx @@ -0,0 +1,29 @@ +import * as React from "react"; +import Skeleton from "@mui/material/Skeleton"; +import Box from "@mui/material/Box"; + +export default function CustomSkeleton({ + backgroundColor, + skeletonColor, + width, + height, +}) { + return ( + + + + ); +} diff --git a/resources/js/Layouts/MainLayout.jsx b/resources/js/Layouts/MainLayout.jsx index ffdd06e..61e21fb 100644 --- a/resources/js/Layouts/MainLayout.jsx +++ b/resources/js/Layouts/MainLayout.jsx @@ -29,6 +29,7 @@ import QrCodeIcon from "@mui/icons-material/QrCode"; import QrCodeScannerIcon from "@mui/icons-material/QrCodeScanner"; import PostAddIcon from "@mui/icons-material/PostAdd"; import AddBoxIcon from "@mui/icons-material/AddBox"; +import WidgetsIcon from "@mui/icons-material/Widgets"; import { Avatar, Menu, @@ -48,6 +49,10 @@ import PrintIcon from "@mui/icons-material/Print"; import ShareIcon from "@mui/icons-material/Share"; import EditIcon from "@mui/icons-material/Edit"; import CustomSpeedDial from "@/Components/CustomSpeedDial"; +import HomeIcon from "@mui/icons-material/Home"; +import WhatshotIcon from "@mui/icons-material/Whatshot"; +import GrainIcon from "@mui/icons-material/Grain"; +import CustomBreadcrumbs from "@/Components/CustomBreadcrumbs"; const drawerWidth = 240; @@ -166,10 +171,26 @@ export default function MainLayout({ user, children }) { { icon: , name: "Share" }, ]; + const breadcrumbItems = [ + { + icon: , + text: "MUI", + url: "/", + }, + { + icon: , + text: "Core", + url: "/material-ui/getting-started/installation/", + }, + { + icon: , + text: "Breadcrumb", + }, + ]; + return ( - + + {/* breadCrumbs */} + - - - - - - {QrSideNav ? : } - - - - + + + - + - + - - + + {/* end */} @@ -426,6 +443,7 @@ export default function MainLayout({ user, children }) {
+
{children}
diff --git a/resources/js/Pages/Admin/Dashboard/Index.jsx b/resources/js/Pages/Admin/Dashboard/Index.jsx index 602d718..238385c 100644 --- a/resources/js/Pages/Admin/Dashboard/Index.jsx +++ b/resources/js/Pages/Admin/Dashboard/Index.jsx @@ -8,6 +8,11 @@ import ProductionQuantityLimitsSharpIcon from "@mui/icons-material/ProductionQua import MUIDataTable from "mui-datatables"; import StackBars from "@/Components/StackBar"; import BasicPie from "@/Components/BasicPie"; +import CustomBreadcrumbs from "@/Components/CustomBreadcrumbs"; +import HomeIcon from "@mui/icons-material/Home"; +import WhatshotIcon from "@mui/icons-material/Whatshot"; +import GrainIcon from "@mui/icons-material/Grain"; +import { Link } from "@inertiajs/react"; export default function Index({ auth, mustVerifyEmail, status }) { const columns = ["Name", "Age", "Status"]; @@ -23,8 +28,26 @@ export default function Index({ auth, mustVerifyEmail, status }) { responsive: "standard", selectableRows: false, }; + + const breadcrumbItems = [ + { + icon: ( + + + + ), + text: "Home", + url: "/", + }, + { + icon: , + text: "Administrator", + url: "/material-ui/getting-started/installation/", + }, + ]; return ( +
} diff --git a/resources/js/Pages/Admin/Management/Products/Index.jsx b/resources/js/Pages/Admin/Management/Products/Index.jsx index 7f032fc..a94faf3 100644 --- a/resources/js/Pages/Admin/Management/Products/Index.jsx +++ b/resources/js/Pages/Admin/Management/Products/Index.jsx @@ -18,6 +18,11 @@ import ReusableModal from "@/Components/Modal"; import AddSharpIcon from "@mui/icons-material/AddSharp"; import BasicTextFields from "@/Components/InputField"; import CustomizedSnackbars from "@/Components/CustomizeSnackBar"; +import CustomBreadcrumbs from "@/Components/CustomBreadcrumbs"; +import HomeIcon from "@mui/icons-material/Home"; +import WhatshotIcon from "@mui/icons-material/Whatshot"; +import GrainIcon from "@mui/icons-material/Grain"; +import { Link } from "@inertiajs/react"; export default function Index({ auth, mustVerifyEmail, status }) { const columns = ["Product Name", "Product ID", "Status"]; @@ -40,8 +45,32 @@ export default function Index({ auth, mustVerifyEmail, status }) { setAge(event.target.value); }; + const breadcrumbItems = [ + { + icon: ( + + + + ), + text: Home, + url: ( + + + + ), + }, + { + icon: , + text: "Product", + url: "/material-ui/getting-started/installation/", + }, + ]; + return ( +
+ +
} diff --git a/resources/js/Pages/Admin/Management/User/Index.jsx b/resources/js/Pages/Admin/Management/User/Index.jsx index 77f0407..263dda2 100644 --- a/resources/js/Pages/Admin/Management/User/Index.jsx +++ b/resources/js/Pages/Admin/Management/User/Index.jsx @@ -18,6 +18,11 @@ import ReusableModal from "@/Components/Modal"; import AddSharpIcon from "@mui/icons-material/AddSharp"; import BasicTextFields from "@/Components/InputField"; import CustomizedSnackbars from "@/Components/CustomizeSnackBar"; +import CustomBreadcrumbs from "@/Components/CustomBreadcrumbs"; +import HomeIcon from "@mui/icons-material/Home"; +import WhatshotIcon from "@mui/icons-material/Whatshot"; +import GrainIcon from "@mui/icons-material/Grain"; +import { Link } from "@inertiajs/react"; export default function Index({ auth, mustVerifyEmail, status }) { const columns = ["Name", "Age", "Status"]; @@ -40,8 +45,32 @@ export default function Index({ auth, mustVerifyEmail, status }) { setAge(event.target.value); }; + const breadcrumbItems = [ + { + icon: ( + + + + ), + text: Home, + url: ( + + + + ), + }, + { + icon: , + text: "User", + url: "/material-ui/getting-started/installation/", + }, + ]; + return ( +
+ +
} diff --git a/resources/js/Pages/Admin/Qr/GenerateQr/Index.jsx b/resources/js/Pages/Admin/Qr/GenerateQr/Index.jsx index 8ec6c13..1f2583d 100644 --- a/resources/js/Pages/Admin/Qr/GenerateQr/Index.jsx +++ b/resources/js/Pages/Admin/Qr/GenerateQr/Index.jsx @@ -18,6 +18,11 @@ import ReusableModal from "@/Components/Modal"; import AddSharpIcon from "@mui/icons-material/AddSharp"; import BasicTextFields from "@/Components/InputField"; import QRCodeGenerator from "@/Components/QRCodeGenerator"; +import CustomBreadcrumbs from "@/Components/CustomBreadcrumbs"; +import HomeIcon from "@mui/icons-material/Home"; +import WhatshotIcon from "@mui/icons-material/Whatshot"; +import GrainIcon from "@mui/icons-material/Grain"; +import { Link } from "@inertiajs/react"; export default function Index({ auth, mustVerifyEmail, status }) { const columns = ["Product Name", "Product ID", "Status"]; @@ -40,8 +45,32 @@ export default function Index({ auth, mustVerifyEmail, status }) { setAge(event.target.value); }; + const breadcrumbItems = [ + { + icon: ( + + + + ), + text: Home, + url: ( + + + + ), + }, + { + icon: , + text: "QR", + url: "/material-ui/getting-started/installation/", + }, + ]; + return ( +
+ +
); diff --git a/resources/js/Pages/Admin/Qr/Index.jsx b/resources/js/Pages/Admin/Qr/Index.jsx index 7310538..b4dff56 100644 --- a/resources/js/Pages/Admin/Qr/Index.jsx +++ b/resources/js/Pages/Admin/Qr/Index.jsx @@ -18,6 +18,11 @@ import ReusableModal from "@/Components/Modal"; import AddSharpIcon from "@mui/icons-material/AddSharp"; import BasicTextFields from "@/Components/InputField"; import CustomizedSnackbars from "@/Components/CustomizeSnackBar"; +import CustomBreadcrumbs from "@/Components/CustomBreadcrumbs"; +import HomeIcon from "@mui/icons-material/Home"; +import WhatshotIcon from "@mui/icons-material/Whatshot"; +import GrainIcon from "@mui/icons-material/Grain"; +import { Link } from "@inertiajs/react"; export default function Index({ auth, mustVerifyEmail, status }) { const columns = ["Product Name", "Product ID", "Status"]; @@ -40,8 +45,32 @@ export default function Index({ auth, mustVerifyEmail, status }) { setAge(event.target.value); }; + const breadcrumbItems = [ + { + icon: ( + + + + ), + text: Home, + url: ( + + + + ), + }, + { + icon: , + text: "QR", + url: "/material-ui/getting-started/installation/", + }, + ]; + return ( +
+ +
} diff --git a/resources/js/Pages/Admin/Storage/Index.jsx b/resources/js/Pages/Admin/Storage/Index.jsx new file mode 100644 index 0000000..679f375 --- /dev/null +++ b/resources/js/Pages/Admin/Storage/Index.jsx @@ -0,0 +1,159 @@ +import ShippingCard from "@/Components/Card"; +import MainLayout from "@/Layouts/MainLayout"; +import { + Autocomplete, + Avatar, + Button, + Card, + FormControl, + InputLabel, + MenuItem, + Select, + TextField, +} from "@mui/material"; +import React from "react"; +import MUIDataTable from "mui-datatables"; +import TransitionsModal from "@/Components/Modal"; +import ReusableModal from "@/Components/Modal"; +import AddSharpIcon from "@mui/icons-material/AddSharp"; +import BasicTextFields from "@/Components/InputField"; +import CustomizedSnackbars from "@/Components/CustomizeSnackBar"; +import CustomBreadcrumbs from "@/Components/CustomBreadcrumbs"; +import HomeIcon from "@mui/icons-material/Home"; +import WhatshotIcon from "@mui/icons-material/Whatshot"; +import GrainIcon from "@mui/icons-material/Grain"; +import { Link } from "@inertiajs/react"; + +export default function Index({ auth, mustVerifyEmail, status }) { + const columns = ["Product Name", "Product ID", "Status"]; + + const data = [ + ["Lenovo laptop", "ABC1234", "Active"], + ["Lenovo PC", "ABC4321", "Pending"], + ]; + + const options = { + filterType: "checkBox", + elevation: 0, + responsive: "standard", + selectableRows: false, + }; + + const [age, setAge] = React.useState(""); + + const handleChange = (event) => { + setAge(event.target.value); + }; + + const breadcrumbItems = [ + { + icon: ( + + + + ), + text: Home, + url: ( + + + + ), + }, + { + icon: , + text: "Storage", + url: "/material-ui/getting-started/installation/", + }, + ]; + + return ( + +
+ +
+
+ } + title={"Add Record"} + header={ +
+ +
+ } + content={ +
+
+ + + + + + + + Status + + + + +
+ +
+
+
+ } + /> +
+
+ + + +
+ + ); +} diff --git a/routes/web.php b/routes/web.php index 8cc6fbd..7f4998f 100644 --- a/routes/web.php +++ b/routes/web.php @@ -7,6 +7,7 @@ use App\Http\Controllers\ProfileController; use App\Http\Controllers\Qr\GenerateQrController; use App\Http\Controllers\Qr\QrController; +use App\Http\Controllers\Storage\StorageController; use Illuminate\Foundation\Application; use Illuminate\Support\Facades\Route; use Inertia\Inertia; @@ -54,6 +55,10 @@ Route::resource('/qr', QrController::class); Route::resource('/generateqr', GenerateQrController::class); + // storage + + Route::resource('/storage', StorageController::class); + From ec92d47a6c08e5719f8255178e7f996b278debf3 Mon Sep 17 00:00:00 2001 From: Jhunriz <93062821+Jhunriz@users.noreply.github.com> Date: Tue, 5 Sep 2023 14:15:47 +0800 Subject: [PATCH 012/182] add-tabPanel --- resources/js/Components/TabPanel.jsx | 87 +++++++++++++++ resources/js/Pages/Admin/Storage/Index.jsx | 124 +++++++-------------- 2 files changed, 128 insertions(+), 83 deletions(-) create mode 100644 resources/js/Components/TabPanel.jsx diff --git a/resources/js/Components/TabPanel.jsx b/resources/js/Components/TabPanel.jsx new file mode 100644 index 0000000..3bb14e1 --- /dev/null +++ b/resources/js/Components/TabPanel.jsx @@ -0,0 +1,87 @@ +import React, { useState } from "react"; +import PropTypes from "prop-types"; +import Tabs from "@mui/material/Tabs"; +import Tab from "@mui/material/Tab"; +import Typography from "@mui/material/Typography"; +import Box from "@mui/material/Box"; + +function TabPanel(props) { + const { children, value, index, ...other } = props; + + return ( + + ); +} + +TabPanel.propTypes = { + children: PropTypes.node, + index: PropTypes.number.isRequired, + value: PropTypes.number.isRequired, +}; + +export default function VerticalTabs({ tabs }) { + const [value, setValue] = useState(0); + + const handleChange = (event, newValue) => { + setValue(newValue); + }; + + return ( + + + {tabs.map((tab, index) => ( + + ))} + + {tabs.map((tab, index) => ( + + {tab.content} + + ))} + + ); +} + +VerticalTabs.propTypes = { + tabs: PropTypes.arrayOf( + PropTypes.shape({ + label: PropTypes.string.isRequired, + content: PropTypes.node.isRequired, + }) + ).isRequired, +}; + +function a11yProps(index) { + return { + id: `vertical-tab-${index}`, + "aria-controls": `vertical-tabpanel-${index}`, + }; +} diff --git a/resources/js/Pages/Admin/Storage/Index.jsx b/resources/js/Pages/Admin/Storage/Index.jsx index 679f375..57a93f4 100644 --- a/resources/js/Pages/Admin/Storage/Index.jsx +++ b/resources/js/Pages/Admin/Storage/Index.jsx @@ -23,6 +23,7 @@ import HomeIcon from "@mui/icons-material/Home"; import WhatshotIcon from "@mui/icons-material/Whatshot"; import GrainIcon from "@mui/icons-material/Grain"; import { Link } from "@inertiajs/react"; +import VerticalTabs from "@/Components/TabPanel"; export default function Index({ auth, mustVerifyEmail, status }) { const columns = ["Product Name", "Product ID", "Status"]; @@ -32,6 +33,11 @@ export default function Index({ auth, mustVerifyEmail, status }) { ["Lenovo PC", "ABC4321", "Pending"], ]; + const data1 = [ + ["Lenovo laasdfasdfptop", "ABC1234", "Active"], + ["Lenovo PC", "ABC4321", "Pending"], + ]; + const options = { filterType: "checkBox", elevation: 0, @@ -66,94 +72,46 @@ export default function Index({ auth, mustVerifyEmail, status }) { }, ]; + // Define an array of tab objects with label and content properties + const tabs = [ + { + label: "Desktop", + content: ( +
+ + + +
+ ), + }, + { + label: "Laptops", + content: ( +
+ + + +
+ ), + }, + // Add more tabs as needed + ]; + return (
-
- } - title={"Add Record"} - header={ -
- -
- } - content={ -
-
- - - - - - - - Status - - - - -
- -
-
-
- } - /> -
-
- - - -
+ {/* Pass the tabs array to the VerticalTabs component */} + ); } From f84d3cfbb4ba86b9b1ac4e3d23487aa121e0bdf1 Mon Sep 17 00:00:00 2001 From: Jhunriz <93062821+Jhunriz@users.noreply.github.com> Date: Tue, 5 Sep 2023 16:31:02 +0800 Subject: [PATCH 013/182] add-barcode --- package-lock.json | 130 +++++++++++++++++- package.json | 3 +- resources/js/Components/BarcodeGenerator.jsx | 14 +- .../js/Pages/Admin/Qr/GenerateQr/Index.jsx | 32 ++++- 4 files changed, 171 insertions(+), 8 deletions(-) diff --git a/package-lock.json b/package-lock.json index defd6ac..dd49eba 100644 --- a/package-lock.json +++ b/package-lock.json @@ -11,7 +11,8 @@ "@mui/material": "^5.14.5", "@mui/x-charts": "^6.0.0-alpha.9", "mui-datatables": "^4.3.0", - "qrcode.react": "^3.1.0" + "qrcode.react": "^3.1.0", + "react-barcode": "^1.4.6" }, "devDependencies": { "@inertiajs/react": "^1.0.0", @@ -1342,6 +1343,11 @@ "hoist-non-react-statics": "^3.3.0" } }, + "node_modules/@types/offscreencanvas": { + "version": "2019.7.1", + "resolved": "https://registry.npmjs.org/@types/offscreencanvas/-/offscreencanvas-2019.7.1.tgz", + "integrity": "sha512-+HSrJgjBW77ALieQdMJvXhRZUIRN1597L+BKvsyeiIlHHERnqjcuOLyodK3auJ3Y3zRezNKtKAhuQWYJfEgFHQ==" + }, "node_modules/@types/parse-json": { "version": "4.0.0", "resolved": "https://registry.npmjs.org/@types/parse-json/-/parse-json-4.0.0.tgz", @@ -1352,6 +1358,11 @@ "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.5.tgz", "integrity": "sha512-JCB8C6SnDoQf0cNycqd/35A7MjcnK+ZTqE7judS6o7utxUCg6imJg3QK2qzHKszlTjcj2cn+NwMB2i96ubpj7w==" }, + "node_modules/@types/raf": { + "version": "3.4.0", + "resolved": "https://registry.npmjs.org/@types/raf/-/raf-3.4.0.tgz", + "integrity": "sha512-taW5/WYqo36N7V39oYyHP9Ipfd5pNFvGTIQsNGj86xV88YQ7GnI30/yMfKDF7Zgin0m3e+ikX88FvImnK4RjGw==" + }, "node_modules/@types/react": { "version": "18.2.21", "resolved": "https://registry.npmjs.org/@types/react/-/react-18.2.21.tgz", @@ -1624,6 +1635,22 @@ } ] }, + "node_modules/canvg": { + "version": "4.0.1", + "resolved": "https://registry.npmjs.org/canvg/-/canvg-4.0.1.tgz", + "integrity": "sha512-5gD/d6SiCCT7baLnVr0hokYe93DfcHW2rSqdKOuOQD84YMlyfttnZ8iQsThTdX6koYam+PROz/FuQTo500zqGw==", + "dependencies": { + "@types/offscreencanvas": "^2019.6.4", + "@types/raf": "^3.4.0", + "raf": "^3.4.1", + "rgbcolor": "^1.0.1", + "stackblur-canvas": "^2.0.0", + "svg-pathdata": "^6.0.3" + }, + "engines": { + "node": ">=12.0.0" + } + }, "node_modules/chalk": { "version": "2.4.2", "resolved": "https://registry.npmjs.org/chalk/-/chalk-2.4.2.tgz", @@ -2257,6 +2284,11 @@ "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz", "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==" }, + "node_modules/html-to-image": { + "version": "1.11.11", + "resolved": "https://registry.npmjs.org/html-to-image/-/html-to-image-1.11.11.tgz", + "integrity": "sha512-9gux8QhvjRO/erSnDPv28noDZcPZmYE7e1vFsBLKLlRlKDSqNJYebj6Qz1TGd5lsRV+X+xYyjCKjuZdABinWjA==" + }, "node_modules/import-fresh": { "version": "3.3.0", "resolved": "https://registry.npmjs.org/import-fresh/-/import-fresh-3.3.0.tgz", @@ -2368,6 +2400,66 @@ "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz", "integrity": "sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==" }, + "node_modules/jsbarcode": { + "version": "3.11.5", + "resolved": "https://registry.npmjs.org/jsbarcode/-/jsbarcode-3.11.5.tgz", + "integrity": "sha512-zv3KsH51zD00I/LrFzFSM6dst7rDn0vIMzaiZFL7qusTjPZiPtxg3zxetp0RR7obmjTw4f6NyGgbdkBCgZUIrA==", + "bin": { + "auto.js": "bin/barcodes/CODE128/auto.js", + "Barcode.js": "bin/barcodes/Barcode.js", + "barcodes": "bin/barcodes", + "canvas.js": "bin/renderers/canvas.js", + "checksums.js": "bin/barcodes/MSI/checksums.js", + "codabar": "bin/barcodes/codabar", + "CODE128": "bin/barcodes/CODE128", + "CODE128_AUTO.js": "bin/barcodes/CODE128/CODE128_AUTO.js", + "CODE128.js": "bin/barcodes/CODE128/CODE128.js", + "CODE128A.js": "bin/barcodes/CODE128/CODE128A.js", + "CODE128B.js": "bin/barcodes/CODE128/CODE128B.js", + "CODE128C.js": "bin/barcodes/CODE128/CODE128C.js", + "CODE39": "bin/barcodes/CODE39", + "constants.js": "bin/barcodes/ITF/constants.js", + "defaults.js": "bin/options/defaults.js", + "EAN_UPC": "bin/barcodes/EAN_UPC", + "EAN.js": "bin/barcodes/EAN_UPC/EAN.js", + "EAN13.js": "bin/barcodes/EAN_UPC/EAN13.js", + "EAN2.js": "bin/barcodes/EAN_UPC/EAN2.js", + "EAN5.js": "bin/barcodes/EAN_UPC/EAN5.js", + "EAN8.js": "bin/barcodes/EAN_UPC/EAN8.js", + "encoder.js": "bin/barcodes/EAN_UPC/encoder.js", + "ErrorHandler.js": "bin/exceptions/ErrorHandler.js", + "exceptions": "bin/exceptions", + "exceptions.js": "bin/exceptions/exceptions.js", + "fixOptions.js": "bin/help/fixOptions.js", + "GenericBarcode": "bin/barcodes/GenericBarcode", + "getOptionsFromElement.js": "bin/help/getOptionsFromElement.js", + "getRenderProperties.js": "bin/help/getRenderProperties.js", + "help": "bin/help", + "index.js": "bin/renderers/index.js", + "index.tmp.js": "bin/barcodes/index.tmp.js", + "ITF": "bin/barcodes/ITF", + "ITF.js": "bin/barcodes/ITF/ITF.js", + "ITF14.js": "bin/barcodes/ITF/ITF14.js", + "JsBarcode.js": "bin/JsBarcode.js", + "linearizeEncodings.js": "bin/help/linearizeEncodings.js", + "merge.js": "bin/help/merge.js", + "MSI": "bin/barcodes/MSI", + "MSI.js": "bin/barcodes/MSI/MSI.js", + "MSI10.js": "bin/barcodes/MSI/MSI10.js", + "MSI1010.js": "bin/barcodes/MSI/MSI1010.js", + "MSI11.js": "bin/barcodes/MSI/MSI11.js", + "MSI1110.js": "bin/barcodes/MSI/MSI1110.js", + "object.js": "bin/renderers/object.js", + "options": "bin/options", + "optionsFromStrings.js": "bin/help/optionsFromStrings.js", + "pharmacode": "bin/barcodes/pharmacode", + "renderers": "bin/renderers", + "shared.js": "bin/renderers/shared.js", + "svg.js": "bin/renderers/svg.js", + "UPC.js": "bin/barcodes/EAN_UPC/UPC.js", + "UPCE.js": "bin/barcodes/EAN_UPC/UPCE.js" + } + }, "node_modules/jsesc": { "version": "2.5.2", "resolved": "https://registry.npmjs.org/jsesc/-/jsesc-2.5.2.tgz", @@ -3015,6 +3107,18 @@ "node": ">=0.10.0" } }, + "node_modules/react-barcode": { + "version": "1.4.6", + "resolved": "https://registry.npmjs.org/react-barcode/-/react-barcode-1.4.6.tgz", + "integrity": "sha512-56WCPqjgpExPVi5LgKOfxM6uSCB4Wd1r94jY2VEwkIdigPjLp8P9RyIBIyQmDraxtYGOHE0e4Uer4+QrmOIy7Q==", + "dependencies": { + "jsbarcode": "^3.8.0", + "prop-types": "^15.6.2" + }, + "peerDependencies": { + "react": "^16.0.0 || ^17.0.0 || ^18.0.0" + } + }, "node_modules/react-display-name": { "version": "0.2.5", "resolved": "https://registry.npmjs.org/react-display-name/-/react-display-name-0.2.5.tgz", @@ -3263,6 +3367,14 @@ "node": ">=0.10.0" } }, + "node_modules/rgbcolor": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/rgbcolor/-/rgbcolor-1.0.1.tgz", + "integrity": "sha512-9aZLIrhRaD97sgVhtJOW6ckOEh6/GnvQtdVNfdZ6s67+3/XwLS9lBcQYzEEhYVeUowN7pRzMLsyGhK2i/xvWbw==", + "engines": { + "node": ">= 0.8.15" + } + }, "node_modules/rollup": { "version": "3.28.1", "resolved": "https://registry.npmjs.org/rollup/-/rollup-3.28.1.tgz", @@ -3350,6 +3462,14 @@ "node": ">=0.10.0" } }, + "node_modules/stackblur-canvas": { + "version": "2.6.0", + "resolved": "https://registry.npmjs.org/stackblur-canvas/-/stackblur-canvas-2.6.0.tgz", + "integrity": "sha512-8S1aIA+UoF6erJYnglGPug6MaHYGo1Ot7h5fuXx4fUPvcvQfcdw2o/ppCse63+eZf8PPidSu4v1JnmEVtEDnpg==", + "engines": { + "node": ">=0.1.14" + } + }, "node_modules/stylis": { "version": "4.2.0", "resolved": "https://registry.npmjs.org/stylis/-/stylis-4.2.0.tgz", @@ -3399,6 +3519,14 @@ "url": "https://github.com/sponsors/ljharb" } }, + "node_modules/svg-pathdata": { + "version": "6.0.3", + "resolved": "https://registry.npmjs.org/svg-pathdata/-/svg-pathdata-6.0.3.tgz", + "integrity": "sha512-qsjeeq5YjBZ5eMdFuUa4ZosMLxgr5RZ+F+Y1OrDhuOCEInRMA3x74XdBtggJcj9kOeInz0WE+LgCPDkZFlBYJw==", + "engines": { + "node": ">=12.0.0" + } + }, "node_modules/tailwindcss": { "version": "3.3.3", "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-3.3.3.tgz", diff --git a/package.json b/package.json index 4795361..9fc59bf 100644 --- a/package.json +++ b/package.json @@ -25,6 +25,7 @@ "@mui/material": "^5.14.5", "@mui/x-charts": "^6.0.0-alpha.9", "mui-datatables": "^4.3.0", - "qrcode.react": "^3.1.0" + "qrcode.react": "^3.1.0", + "react-barcode": "^1.4.6" } } diff --git a/resources/js/Components/BarcodeGenerator.jsx b/resources/js/Components/BarcodeGenerator.jsx index cbca3ae..cd615f1 100644 --- a/resources/js/Components/BarcodeGenerator.jsx +++ b/resources/js/Components/BarcodeGenerator.jsx @@ -3,12 +3,16 @@ import Barcode from "react-barcode"; import { Box, TextField } from "@mui/material"; const BarcodeGenerator = () => { - const [barcodeValue, setBarcodeValue] = useState(""); + // const [barcodeValue, setBarcodeValue] = useState(""); + + const [ProductName, setProductName] = useState(""); const handleInputChange = (e) => { - setBarcodeValue(e.target.value); + setProductName(e.target.value); }; + const value = ProductName; + return (
@@ -28,7 +32,7 @@ const BarcodeGenerator = () => { label="Barcode Value" variant="outlined" size="small" - value={barcodeValue} + value={ProductName} fullWidth onChange={handleInputChange} /> @@ -37,8 +41,8 @@ const BarcodeGenerator = () => {
- {barcodeValue && ( - + {ProductName && ( + )}
diff --git a/resources/js/Pages/Admin/Qr/GenerateQr/Index.jsx b/resources/js/Pages/Admin/Qr/GenerateQr/Index.jsx index 1f2583d..f22bea5 100644 --- a/resources/js/Pages/Admin/Qr/GenerateQr/Index.jsx +++ b/resources/js/Pages/Admin/Qr/GenerateQr/Index.jsx @@ -23,6 +23,8 @@ import HomeIcon from "@mui/icons-material/Home"; import WhatshotIcon from "@mui/icons-material/Whatshot"; import GrainIcon from "@mui/icons-material/Grain"; import { Link } from "@inertiajs/react"; +import VerticalTabs from "@/Components/TabPanel"; +import BarcodeGenerator from "@/Components/BarcodeGenerator"; export default function Index({ auth, mustVerifyEmail, status }) { const columns = ["Product Name", "Product ID", "Status"]; @@ -32,6 +34,11 @@ export default function Index({ auth, mustVerifyEmail, status }) { ["Lenovo PC", "ABC4321", "Pending"], ]; + const data1 = [ + ["Lenovo laasdfasdfptop", "ABC1234", "Active"], + ["Lenovo PC", "ABC4321", "Pending"], + ]; + const options = { filterType: "checkBox", elevation: 0, @@ -66,12 +73,35 @@ export default function Index({ auth, mustVerifyEmail, status }) { }, ]; + // Define an array of tab objects with label and content properties + const tabs = [ + { + label: "Barcode", + content: ( +
+ + + +
+ ), + }, + { + label: "QR-Code", + content: ( +
+ +
+ ), + }, + // Add more tabs as needed + ]; + return (
- + ); } From 1e555ffef139ad0e797c82961e89cd9c052e2b11 Mon Sep 17 00:00:00 2001 From: Jhunriz <93062821+Jhunriz@users.noreply.github.com> Date: Wed, 6 Sep 2023 13:13:53 +0800 Subject: [PATCH 014/182] add-design-for-qr-scanner-and-barcode --- resources/js/Components/BarcodeScanner.jsx | 45 +++++++++++++++++++ resources/js/Components/QRCodeScanner.jsx | 37 +++++++++++++++ .../js/Pages/Admin/Qr/GenerateQr/Index.jsx | 6 +++ 3 files changed, 88 insertions(+) create mode 100644 resources/js/Components/BarcodeScanner.jsx create mode 100644 resources/js/Components/QRCodeScanner.jsx diff --git a/resources/js/Components/BarcodeScanner.jsx b/resources/js/Components/BarcodeScanner.jsx new file mode 100644 index 0000000..c180690 --- /dev/null +++ b/resources/js/Components/BarcodeScanner.jsx @@ -0,0 +1,45 @@ +import React, { Component } from "react"; +import Camera, { FACING_MODES } from "react-html5-camera-photo"; +import "react-html5-camera-photo/build/css/index.css"; + +class BarcodeScanner extends Component { + constructor(props) { + super(props); + + this.state = { + data: null, + error: null, + }; + } + + onTakePhoto(dataUri) { + // Here, you can process the barcode dataUri. + this.setState({ data: dataUri }); + } + + onCameraError(error) { + this.setState({ error: `Camera error: ${error.message}` }); + } + + render() { + return ( +
+

Barcode Scanner

+ {this.state.data && ( +
+

Scanned Data:

+

{this.state.data}

+
+ )} + {this.state.error &&

{this.state.error}

} + this.onTakePhoto(dataUri)} + onCameraError={(error) => this.onCameraError(error)} + /> +
+ ); + } +} + +export default BarcodeScanner; diff --git a/resources/js/Components/QRCodeScanner.jsx b/resources/js/Components/QRCodeScanner.jsx new file mode 100644 index 0000000..ec6b287 --- /dev/null +++ b/resources/js/Components/QRCodeScanner.jsx @@ -0,0 +1,37 @@ +import React, { useState } from "react"; + +const QRCodeScanner = () => { + const [result, setResult] = useState(null); + + const handleScan = (data) => { + if (data) { + setResult(data); + } + }; + + const handleError = (error) => { + console.error(error); + }; + + return ( +
+

QR Code Scanner

+
+ {/* */} +
+ {result && ( +
+

Scanned Result:

+

{result}

+
+ )} +
+ ); +}; + +export default QRCodeScanner; diff --git a/resources/js/Pages/Admin/Qr/GenerateQr/Index.jsx b/resources/js/Pages/Admin/Qr/GenerateQr/Index.jsx index f22bea5..45501f1 100644 --- a/resources/js/Pages/Admin/Qr/GenerateQr/Index.jsx +++ b/resources/js/Pages/Admin/Qr/GenerateQr/Index.jsx @@ -25,6 +25,8 @@ import GrainIcon from "@mui/icons-material/Grain"; import { Link } from "@inertiajs/react"; import VerticalTabs from "@/Components/TabPanel"; import BarcodeGenerator from "@/Components/BarcodeGenerator"; +import QRCodeScanner from "@/Components/QRCodeScanner"; +import BarcodeScanner from "@/Components/BarcodeScanner"; export default function Index({ auth, mustVerifyEmail, status }) { const columns = ["Product Name", "Product ID", "Status"]; @@ -81,6 +83,7 @@ export default function Index({ auth, mustVerifyEmail, status }) {
+
), @@ -90,6 +93,9 @@ export default function Index({ auth, mustVerifyEmail, status }) { content: (
+
+ +
), }, From f1a13069d3d3b3192803688986e97c948a5d4b60 Mon Sep 17 00:00:00 2001 From: Jhunriz <93062821+Jhunriz@users.noreply.github.com> Date: Wed, 6 Sep 2023 14:38:35 +0800 Subject: [PATCH 015/182] populate_data --- resources/js/Components/BasicPie.jsx | 6 +- resources/js/Components/StackBar.jsx | 24 +- resources/js/Pages/Admin/Dashboard/Index.jsx | 86 +++++ .../Pages/Admin/Management/Products/Index.jsx | 45 ++- .../js/Pages/Admin/Management/User/Index.jsx | 85 ++++- .../js/Pages/Admin/Qr/GenerateQr/Index.jsx | 7 +- resources/js/Pages/Admin/Qr/Index.jsx | 311 +++++++++++++++++- resources/js/Pages/Admin/Storage/Index.jsx | 84 ++++- 8 files changed, 616 insertions(+), 32 deletions(-) diff --git a/resources/js/Components/BasicPie.jsx b/resources/js/Components/BasicPie.jsx index 0b59d81..23ffd4c 100644 --- a/resources/js/Components/BasicPie.jsx +++ b/resources/js/Components/BasicPie.jsx @@ -3,7 +3,7 @@ import { PieChart } from "@mui/x-charts/PieChart"; export default function BasicPie() { return ( -
+
); diff --git a/resources/js/Components/StackBar.jsx b/resources/js/Components/StackBar.jsx index 3bbcb7b..0458dc0 100644 --- a/resources/js/Components/StackBar.jsx +++ b/resources/js/Components/StackBar.jsx @@ -3,18 +3,16 @@ import { BarChart } from "@mui/x-charts/BarChart"; export default function StackBars() { return ( -
- -
+ ); } diff --git a/resources/js/Pages/Admin/Dashboard/Index.jsx b/resources/js/Pages/Admin/Dashboard/Index.jsx index 238385c..d27207d 100644 --- a/resources/js/Pages/Admin/Dashboard/Index.jsx +++ b/resources/js/Pages/Admin/Dashboard/Index.jsx @@ -20,8 +20,94 @@ export default function Index({ auth, mustVerifyEmail, status }) { const data = [ ["Jhunriz", "23", "Active"], ["Joshua", "22", "Active"], + ["Emily", "25", "Inactive"], + ["Liam", "28", "Active"], + ["Sophia", "20", "Inactive"], + ["Noah", "30", "Active"], + ["Olivia", "24", "Inactive"], + ["Aiden", "27", "Active"], + ["Mia", "29", "Inactive"], + ["Ella", "26", "Active"], + ["Jackson", "31", "Active"], + ["Ava", "19", "Inactive"], + ["Logan", "27", "Active"], + ["Emma", "22", "Inactive"], + ["Landon", "24", "Active"], + ["Grace", "28", "Inactive"], + ["Carter", "25", "Active"], + ["Zoe", "23", "Inactive"], + ["Ethan", "26", "Active"], + ["Lily", "21", "Inactive"], + ["Mason", "29", "Active"], + ["Sophie", "30", "Inactive"], + ["Lucas", "23", "Active"], + ["Evelyn", "27", "Inactive"], + ["Oliver", "25", "Active"], + ["Harper", "24", "Inactive"], + ["Liam", "28", "Active"], + ["Abigail", "22", "Inactive"], + ["Benjamin", "31", "Active"], + ["Aria", "20", "Inactive"], + ["Henry", "29", "Active"], + ["Charlotte", "26", "Inactive"], + ["Elijah", "30", "Active"], + ["Amelia", "23", "Inactive"], + ["William", "24", "Active"], + ["Mila", "27", "Inactive"], + ["James", "25", "Active"], + ["Sofia", "28", "Inactive"], + ["Daniel", "22", "Active"], + ["Avery", "29", "Inactive"], + ["Alexander", "26", "Active"], + ["Chloe", "30", "Inactive"], + ["Michael", "21", "Active"], + ["Madison", "31", "Inactive"], + ["Evelyn", "23", "Active"], + ["Emily", "25", "Inactive"], + ["Ella", "28", "Active"], + ["Grace", "24", "Inactive"], + ["Liam", "27", "Active"], + ["Harper", "22", "Inactive"], + ["Ethan", "29", "Active"], + ["Aria", "20", "Inactive"], + ["Lucas", "26", "Active"], + ["Zoe", "30", "Inactive"], + ["Oliver", "23", "Active"], + ["Ava", "27", "Inactive"], + ["Mason", "25", "Active"], + ["Sofia", "28", "Inactive"], + ["William", "30", "Active"], + ["Charlotte", "21", "Inactive"], + ["James", "29", "Active"], + ["Amelia", "22", "Inactive"], + ["Benjamin", "31", "Active"], + ["Chloe", "24", "Inactive"], + ["Daniel", "26", "Active"], + ["Mila", "23", "Inactive"], + ["Michael", "28", "Active"], + ["Madison", "25", "Inactive"], + ["Evelyn", "30", "Active"], + ["Lily", "27", "Inactive"], + ["Ella", "24", "Active"], + ["Avery", "22", "Inactive"], + ["Liam", "29", "Active"], + ["Harper", "21", "Inactive"], + ["Ethan", "26", "Active"], + ["Aria", "30", "Inactive"], + ["Lucas", "25", "Active"], + ["Zoe", "28", "Inactive"], + ["Oliver", "23", "Active"], + ["Ava", "27", "Inactive"], + ["Mason", "30", "Active"], + ["Sofia", "22", "Inactive"], + ["William", "29", "Active"], + ["Charlotte", "26", "Inactive"], + ["James", "21", "Active"], + ["Amelia", "25", "Inactive"], ]; + // Now, you have a total of 108 rows in the `data` array. + const options = { filterType: "checkBox", elevation: 0, diff --git a/resources/js/Pages/Admin/Management/Products/Index.jsx b/resources/js/Pages/Admin/Management/Products/Index.jsx index a94faf3..1209be7 100644 --- a/resources/js/Pages/Admin/Management/Products/Index.jsx +++ b/resources/js/Pages/Admin/Management/Products/Index.jsx @@ -25,11 +25,50 @@ import GrainIcon from "@mui/icons-material/Grain"; import { Link } from "@inertiajs/react"; export default function Index({ auth, mustVerifyEmail, status }) { - const columns = ["Product Name", "Product ID", "Status"]; + const columns = [ + "Product Name", + "Product ID", + "Item Name", + "Quantity Needed", + "Status", + ]; const data = [ - ["Lenovo laptop", "ABC1234", "Active"], - ["Lenovo PC", "ABC4321", "Pending"], + ["Lenovo laptop", "ABC1234", "Lenovo", "1000", "Active"], + ["HP Desktop", "DEF5678", "HP", "800", "Active"], + ["Dell Monitor", "GHI9012", "Dell", "300", "Active"], + ["Apple MacBook", "JKL3456", "Apple", "1500", "Active"], + ["Acer Chromebook", "MNO7890", "Acer", "400", "Active"], + // Add more entries here... + ["Samsung Tablet", "PQR1234", "Samsung", "600", "Active"], + ["Microsoft Surface", "STU5678", "Microsoft", "1200", "Active"], + ["Asus Gaming Laptop", "VWX9012", "Asus", "1600", "Active"], + ["HP Printer", "YZA3456", "HP", "250", "Active"], + ["Dell Keyboard", "BCD7890", "Dell", "50", "Active"], + // Add more entries here... + ["Lenovo ThinkPad", "EFG1234", "Lenovo", "1200", "Active"], + ["Apple iPad", "HIJ5678", "Apple", "700", "Active"], + ["Acer Monitor", "KLM9012", "Acer", "350", "Active"], + ["Sony VAIO Laptop", "NOP3456", "Sony", "900", "Active"], + ["Toshiba External Hard Drive", "QRS7890", "Toshiba", "200", "Active"], + // Add more entries here... + ["Google Chromebook", "XYZ1234", "Google", "600", "Active"], + ["HP Laptop", "ABC5678", "HP", "1100", "Active"], + ["Dell Desktop", "DEF9012", "Dell", "850", "Active"], + ["Microsoft Mouse", "GHI3456", "Microsoft", "30", "Active"], + ["Samsung Smartphone", "JKL7890", "Samsung", "700", "Active"], + // Add more entries here... + ["Lenovo Yoga Laptop", "MNO1234", "Lenovo", "1300", "Active"], + ["Acer Aspire", "PQR5678", "Acer", "550", "Active"], + ["Apple Watch", "STU9012", "Apple", "400", "Active"], + ["Asus Monitor", "VWX3456", "Asus", "300", "Active"], + ["HP Scanner", "YZA7890", "HP", "150", "Active"], + // Add more entries here... + ["Dell Inspiron", "BCD1234", "Dell", "950", "Active"], + ["Sony PlayStation", "EFG5678", "Sony", "300", "Active"], + ["LG TV", "HIJ9012", "LG", "700", "Active"], + ["Toshiba Laptop", "KLM3456", "Toshiba", "800", "Active"], + ["Amazon Kindle", "NOP7890", "Amazon", "120", "Active"], ]; const options = { diff --git a/resources/js/Pages/Admin/Management/User/Index.jsx b/resources/js/Pages/Admin/Management/User/Index.jsx index 263dda2..6287577 100644 --- a/resources/js/Pages/Admin/Management/User/Index.jsx +++ b/resources/js/Pages/Admin/Management/User/Index.jsx @@ -30,8 +30,91 @@ export default function Index({ auth, mustVerifyEmail, status }) { const data = [ ["Jhunriz", "23", "Active"], ["Joshua", "22", "Active"], + ["Emily", "25", "Inactive"], + ["Liam", "28", "Active"], + ["Sophia", "20", "Inactive"], + ["Noah", "30", "Active"], + ["Olivia", "24", "Inactive"], + ["Aiden", "27", "Active"], + ["Mia", "29", "Inactive"], + ["Ella", "26", "Active"], + ["Jackson", "31", "Active"], + ["Ava", "19", "Inactive"], + ["Logan", "27", "Active"], + ["Emma", "22", "Inactive"], + ["Landon", "24", "Active"], + ["Grace", "28", "Inactive"], + ["Carter", "25", "Active"], + ["Zoe", "23", "Inactive"], + ["Ethan", "26", "Active"], + ["Lily", "21", "Inactive"], + ["Mason", "29", "Active"], + ["Sophie", "30", "Inactive"], + ["Lucas", "23", "Active"], + ["Evelyn", "27", "Inactive"], + ["Oliver", "25", "Active"], + ["Harper", "24", "Inactive"], + ["Liam", "28", "Active"], + ["Abigail", "22", "Inactive"], + ["Benjamin", "31", "Active"], + ["Aria", "20", "Inactive"], + ["Henry", "29", "Active"], + ["Charlotte", "26", "Inactive"], + ["Elijah", "30", "Active"], + ["Amelia", "23", "Inactive"], + ["William", "24", "Active"], + ["Mila", "27", "Inactive"], + ["James", "25", "Active"], + ["Sofia", "28", "Inactive"], + ["Daniel", "22", "Active"], + ["Avery", "29", "Inactive"], + ["Alexander", "26", "Active"], + ["Chloe", "30", "Inactive"], + ["Michael", "21", "Active"], + ["Madison", "31", "Inactive"], + ["Evelyn", "23", "Active"], + ["Emily", "25", "Inactive"], + ["Ella", "28", "Active"], + ["Grace", "24", "Inactive"], + ["Liam", "27", "Active"], + ["Harper", "22", "Inactive"], + ["Ethan", "29", "Active"], + ["Aria", "20", "Inactive"], + ["Lucas", "26", "Active"], + ["Zoe", "30", "Inactive"], + ["Oliver", "23", "Active"], + ["Ava", "27", "Inactive"], + ["Mason", "25", "Active"], + ["Sofia", "28", "Inactive"], + ["William", "30", "Active"], + ["Charlotte", "21", "Inactive"], + ["James", "29", "Active"], + ["Amelia", "22", "Inactive"], + ["Benjamin", "31", "Active"], + ["Chloe", "24", "Inactive"], + ["Daniel", "26", "Active"], + ["Mila", "23", "Inactive"], + ["Michael", "28", "Active"], + ["Madison", "25", "Inactive"], + ["Evelyn", "30", "Active"], + ["Lily", "27", "Inactive"], + ["Ella", "24", "Active"], + ["Avery", "22", "Inactive"], + ["Liam", "29", "Active"], + ["Harper", "21", "Inactive"], + ["Ethan", "26", "Active"], + ["Aria", "30", "Inactive"], + ["Lucas", "25", "Active"], + ["Zoe", "28", "Inactive"], + ["Oliver", "23", "Active"], + ["Ava", "27", "Inactive"], + ["Mason", "30", "Active"], + ["Sofia", "22", "Inactive"], + ["William", "29", "Active"], + ["Charlotte", "26", "Inactive"], + ["James", "21", "Active"], + ["Amelia", "25", "Inactive"], ]; - const options = { filterType: "checkBox", elevation: 0, diff --git a/resources/js/Pages/Admin/Qr/GenerateQr/Index.jsx b/resources/js/Pages/Admin/Qr/GenerateQr/Index.jsx index 45501f1..c7a4187 100644 --- a/resources/js/Pages/Admin/Qr/GenerateQr/Index.jsx +++ b/resources/js/Pages/Admin/Qr/GenerateQr/Index.jsx @@ -10,6 +10,7 @@ import { MenuItem, Select, TextField, + Typography, } from "@mui/material"; import React from "react"; import MUIDataTable from "mui-datatables"; @@ -78,7 +79,11 @@ export default function Index({ auth, mustVerifyEmail, status }) { // Define an array of tab objects with label and content properties const tabs = [ { - label: "Barcode", + label: ( + + button text + + ), content: (
diff --git a/resources/js/Pages/Admin/Qr/Index.jsx b/resources/js/Pages/Admin/Qr/Index.jsx index b4dff56..0d54f9e 100644 --- a/resources/js/Pages/Admin/Qr/Index.jsx +++ b/resources/js/Pages/Admin/Qr/Index.jsx @@ -25,11 +25,314 @@ import GrainIcon from "@mui/icons-material/Grain"; import { Link } from "@inertiajs/react"; export default function Index({ auth, mustVerifyEmail, status }) { - const columns = ["Product Name", "Product ID", "Status"]; - + const columns = [ + "Product Name", + "Product ID", + "Item Name", + "Quantity Needed", + "QR-Code", + "Barcode", + "Status", + ]; const data = [ - ["Lenovo laptop", "ABC1234", "Active"], - ["Lenovo PC", "ABC4321", "Pending"], + [ + "Lenovo laptop", + "ABC1234", + "Lenovo", + "1000", + "qr-code-url-4", + "barcode-url-4", + "Active", + ], + [ + "Dell desktop", + "DEF5678", + "Dell", + "800", + "qr-code-url-5", + "barcode-url-5", + "Inactive", + ], + [ + "HP laptop", + "GHI9012", + "HP", + "1200", + "qr-code-url-6", + "barcode-url-6", + "Active", + ], + [ + "Apple MacBook", + "JKL3456", + "Apple", + "2000", + "qr-code-url-7", + "barcode-url-7", + "Active", + ], + // Add 65 more sample data entries here... + [ + "Acer laptop", + "MNO7890", + "Acer", + "950", + "qr-code-url-8", + "barcode-url-8", + "Inactive", + ], + [ + "Asus desktop", + "PQR1234", + "Asus", + "850", + "qr-code-url-9", + "barcode-url-9", + "Active", + ], + [ + "Lenovo laptop", + "STU5678", + "Lenovo", + "1100", + "qr-code-url-10", + "barcode-url-10", + "Active", + ], + [ + "Dell desktop", + "VWX9012", + "Dell", + "750", + "qr-code-url-11", + "barcode-url-11", + "Inactive", + ], + [ + "HP laptop", + "YZA3456", + "HP", + "1150", + "qr-code-url-12", + "barcode-url-12", + "Active", + ], + [ + "Apple MacBook", + "BCD6789", + "Apple", + "1950", + "qr-code-url-13", + "barcode-url-13", + "Active", + ], + [ + "Acer laptop", + "EFG1234", + "Acer", + "920", + "qr-code-url-14", + "barcode-url-14", + "Inactive", + ], + [ + "Asus desktop", + "HIJ5678", + "Asus", + "830", + "qr-code-url-15", + "barcode-url-15", + "Active", + ], + [ + "Lenovo laptop", + "KLM9012", + "Lenovo", + "1050", + "qr-code-url-16", + "barcode-url-16", + "Active", + ], + [ + "Dell desktop", + "NOP3456", + "Dell", + "720", + "qr-code-url-17", + "barcode-url-17", + "Inactive", + ], + [ + "HP laptop", + "QRS6789", + "HP", + "1100", + "qr-code-url-18", + "barcode-url-18", + "Active", + ], + [ + "Apple MacBook", + "TUV1234", + "Apple", + "1900", + "qr-code-url-19", + "barcode-url-19", + "Active", + ], + [ + "Acer laptop", + "WXY5678", + "Acer", + "890", + "qr-code-url-20", + "barcode-url-20", + "Inactive", + ], + [ + "Asus desktop", + "ZAB9012", + "Asus", + "810", + "qr-code-url-21", + "barcode-url-21", + "Active", + ], + [ + "Lenovo laptop", + "BCD3456", + "Lenovo", + "1030", + "qr-code-url-22", + "barcode-url-22", + "Active", + ], + [ + "Dell desktop", + "EFG6789", + "Dell", + "700", + "qr-code-url-23", + "barcode-url-23", + "Inactive", + ], + [ + "HP laptop", + "HIJ1234", + "HP", + "1075", + "qr-code-url-24", + "barcode-url-24", + "Active", + ], + [ + "Apple MacBook", + "KLM5678", + "Apple", + "1850", + "qr-code-url-25", + "barcode-url-25", + "Active", + ], + [ + "Acer laptop", + "NOP9012", + "Acer", + "870", + "qr-code-url-26", + "barcode-url-26", + "Inactive", + ], + [ + "Asus desktop", + "QRS3456", + "Asus", + "790", + "qr-code-url-27", + "barcode-url-27", + "Active", + ], + [ + "Lenovo laptop", + "TUV6789", + "Lenovo", + "1005", + "qr-code-url-28", + "barcode-url-28", + "Active", + ], + [ + "Dell desktop", + "WXY1234", + "Dell", + "680", + "qr-code-url-29", + "barcode-url-29", + "Inactive", + ], + [ + "HP laptop", + "ZAB5678", + "HP", + "1040", + "qr-code-url-30", + "barcode-url-30", + "Active", + ], + [ + "Apple MacBook", + "BCD9012", + "Apple", + "1800", + "qr-code-url-31", + "barcode-url-31", + "Active", + ], + [ + "Acer laptop", + "EFG3456", + "Acer", + "850", + "qr-code-url-32", + "barcode-url-32", + "Inactive", + ], + [ + "Asus desktop", + "HIJ6789", + "Asus", + "770", + "qr-code-url-33", + "barcode-url-33", + "Active", + ], + [ + "Lenovo laptop", + "KLM1234", + "Lenovo", + "980", + "qr-code-url-34", + "barcode-url-34", + "Active", + ], + [ + "Dell desktop", + "NOP5678", + "Dell", + "660", + "qr-code-url-35", + "barcode-url-35", + "Inactive", + ], + [ + "HP laptop", + "QRS9012", + "HP", + "1020", + "qr-code-url-36", + "barcode-url-36", + "Active", + ], ]; const options = { diff --git a/resources/js/Pages/Admin/Storage/Index.jsx b/resources/js/Pages/Admin/Storage/Index.jsx index 57a93f4..bf99ecb 100644 --- a/resources/js/Pages/Admin/Storage/Index.jsx +++ b/resources/js/Pages/Admin/Storage/Index.jsx @@ -26,18 +26,88 @@ import { Link } from "@inertiajs/react"; import VerticalTabs from "@/Components/TabPanel"; export default function Index({ auth, mustVerifyEmail, status }) { - const columns = ["Product Name", "Product ID", "Status"]; + const columns = [ + "Product Name", + "Product ID", + "Item Name", + "Quantity Needed", + "Status", + ]; const data = [ - ["Lenovo laptop", "ABC1234", "Active"], - ["Lenovo PC", "ABC4321", "Pending"], + ["Lenovo laptop", "ABC1234", "Lenovo", "1000", "Active"], + ["HP Desktop", "DEF5678", "HP", "800", "Active"], + ["Dell Monitor", "GHI9012", "Dell", "300", "Active"], + ["Apple MacBook", "JKL3456", "Apple", "1500", "Active"], + ["Acer Chromebook", "MNO7890", "Acer", "400", "Active"], + // Add more entries here... + ["Samsung Tablet", "PQR1234", "Samsung", "600", "Active"], + ["Microsoft Surface", "STU5678", "Microsoft", "1200", "Active"], + ["Asus Gaming Laptop", "VWX9012", "Asus", "1600", "Active"], + ["HP Printer", "YZA3456", "HP", "250", "Active"], + ["Dell Keyboard", "BCD7890", "Dell", "50", "Active"], + // Add more entries here... + ["Lenovo ThinkPad", "EFG1234", "Lenovo", "1200", "Active"], + ["Apple iPad", "HIJ5678", "Apple", "700", "Active"], + ["Acer Monitor", "KLM9012", "Acer", "350", "Active"], + ["Sony VAIO Laptop", "NOP3456", "Sony", "900", "Active"], + ["Toshiba External Hard Drive", "QRS7890", "Toshiba", "200", "Active"], + // Add more entries here... + ["Google Chromebook", "XYZ1234", "Google", "600", "Active"], + ["HP Laptop", "ABC5678", "HP", "1100", "Active"], + ["Dell Desktop", "DEF9012", "Dell", "850", "Active"], + ["Microsoft Mouse", "GHI3456", "Microsoft", "30", "Active"], + ["Samsung Smartphone", "JKL7890", "Samsung", "700", "Active"], + // Add more entries here... + ["Lenovo Yoga Laptop", "MNO1234", "Lenovo", "1300", "Active"], + ["Acer Aspire", "PQR5678", "Acer", "550", "Active"], + ["Apple Watch", "STU9012", "Apple", "400", "Active"], + ["Asus Monitor", "VWX3456", "Asus", "300", "Active"], + ["HP Scanner", "YZA7890", "HP", "150", "Active"], + // Add more entries here... + ["Dell Inspiron", "BCD1234", "Dell", "950", "Active"], + ["Sony PlayStation", "EFG5678", "Sony", "300", "Active"], + ["LG TV", "HIJ9012", "LG", "700", "Active"], + ["Toshiba Laptop", "KLM3456", "Toshiba", "800", "Active"], + ["Amazon Kindle", "NOP7890", "Amazon", "120", "Active"], ]; - const data1 = [ - ["Lenovo laasdfasdfptop", "ABC1234", "Active"], - ["Lenovo PC", "ABC4321", "Pending"], + ["Lenovo laptop", "ABC1234", "Lenovo", "1000", "Active"], + ["HP Desktop", "DEF5678", "HP", "800", "Active"], + ["Dell Monitor", "GHI9012", "Dell", "300", "Active"], + ["Apple MacBook", "JKL3456", "Apple", "1500", "Active"], + ["Acer Chromebook", "MNO7890", "Acer", "400", "Active"], + // Add more entries here... + ["Samsung Tablet", "PQR1234", "Samsung", "600", "Active"], + ["Microsoft Surface", "STU5678", "Microsoft", "1200", "Active"], + ["Asus Gaming Laptop", "VWX9012", "Asus", "1600", "Active"], + ["HP Printer", "YZA3456", "HP", "250", "Active"], + ["Dell Keyboard", "BCD7890", "Dell", "50", "Active"], + // Add more entries here... + ["Lenovo ThinkPad", "EFG1234", "Lenovo", "1200", "Active"], + ["Apple iPad", "HIJ5678", "Apple", "700", "Active"], + ["Acer Monitor", "KLM9012", "Acer", "350", "Active"], + ["Sony VAIO Laptop", "NOP3456", "Sony", "900", "Active"], + ["Toshiba External Hard Drive", "QRS7890", "Toshiba", "200", "Active"], + // Add more entries here... + ["Google Chromebook", "XYZ1234", "Google", "600", "Active"], + ["HP Laptop", "ABC5678", "HP", "1100", "Active"], + ["Dell Desktop", "DEF9012", "Dell", "850", "Active"], + ["Microsoft Mouse", "GHI3456", "Microsoft", "30", "Active"], + ["Samsung Smartphone", "JKL7890", "Samsung", "700", "Active"], + // Add more entries here... + ["Lenovo Yoga Laptop", "MNO1234", "Lenovo", "1300", "Active"], + ["Acer Aspire", "PQR5678", "Acer", "550", "Active"], + ["Apple Watch", "STU9012", "Apple", "400", "Active"], + ["Asus Monitor", "VWX3456", "Asus", "300", "Active"], + ["HP Scanner", "YZA7890", "HP", "150", "Active"], + // Add more entries here... + ["Dell Inspiron", "BCD1234", "Dell", "950", "Active"], + ["Sony PlayStation", "EFG5678", "Sony", "300", "Active"], + ["LG TV", "HIJ9012", "LG", "700", "Active"], + ["Toshiba Laptop", "KLM3456", "Toshiba", "800", "Active"], + ["Amazon Kindle", "NOP7890", "Amazon", "120", "Active"], ]; - const options = { filterType: "checkBox", elevation: 0, From 5ba6beb9cea904710552585e9013f542cd7af678 Mon Sep 17 00:00:00 2001 From: Jhunriz <93062821+Jhunriz@users.noreply.github.com> Date: Wed, 6 Sep 2023 16:12:17 +0800 Subject: [PATCH 016/182] arrange-barcode-qr-code --- resources/js/Components/BarcodeGenerator.jsx | 10 +++-- resources/js/Components/QRCodeScanner.jsx | 2 +- .../js/Pages/Admin/Qr/GenerateQr/Index.jsx | 37 ++++++++++++++++--- 3 files changed, 38 insertions(+), 11 deletions(-) diff --git a/resources/js/Components/BarcodeGenerator.jsx b/resources/js/Components/BarcodeGenerator.jsx index cd615f1..0969885 100644 --- a/resources/js/Components/BarcodeGenerator.jsx +++ b/resources/js/Components/BarcodeGenerator.jsx @@ -14,9 +14,11 @@ const BarcodeGenerator = () => { const value = ProductName; return ( -
-
-

Barcode Generator

+
+
+

+ Generate Barcode +

{
-
+
{ProductName && ( )} diff --git a/resources/js/Components/QRCodeScanner.jsx b/resources/js/Components/QRCodeScanner.jsx index ec6b287..1db1dbe 100644 --- a/resources/js/Components/QRCodeScanner.jsx +++ b/resources/js/Components/QRCodeScanner.jsx @@ -14,7 +14,7 @@ const QRCodeScanner = () => { }; return ( -
+

QR Code Scanner

{/* - button text + Barcode ), content: (
+
+ } + title={"Scan"} + content={ +
+ +
+ } + /> +
-
), }, { - label: "QR-Code", + label: ( + + QR-Code + + ), content: (
- -
- +
+ } + title={"Scan QR"} + content={ +
+ +
+ } + />
+ + +
), }, From 7bca20311eaf97f323493e459f9505b2e17a53b3 Mon Sep 17 00:00:00 2001 From: Jhunriz <93062821+Jhunriz@users.noreply.github.com> Date: Wed, 6 Sep 2023 16:31:25 +0800 Subject: [PATCH 017/182] qr-code-and-barcode-designed --- resources/js/Components/BarcodeScanner.jsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/resources/js/Components/BarcodeScanner.jsx b/resources/js/Components/BarcodeScanner.jsx index c180690..2c7bab4 100644 --- a/resources/js/Components/BarcodeScanner.jsx +++ b/resources/js/Components/BarcodeScanner.jsx @@ -24,7 +24,7 @@ class BarcodeScanner extends Component { render() { return (
-

Barcode Scanner

+

Barcode Scanner

{this.state.data && (

Scanned Data:

From ea87492df6d48878292d53daa839b1caab6c5596 Mon Sep 17 00:00:00 2001 From: Jhunriz <93062821+Jhunriz@users.noreply.github.com> Date: Wed, 6 Sep 2023 16:35:43 +0800 Subject: [PATCH 018/182] sidenav-updated --- resources/js/Layouts/MainLayout.jsx | 26 ++++++++++++++------------ 1 file changed, 14 insertions(+), 12 deletions(-) diff --git a/resources/js/Layouts/MainLayout.jsx b/resources/js/Layouts/MainLayout.jsx index 61e21fb..29426fb 100644 --- a/resources/js/Layouts/MainLayout.jsx +++ b/resources/js/Layouts/MainLayout.jsx @@ -428,18 +428,20 @@ export default function MainLayout({ user, children }) { - - - - - - - - - - - - +
+ + + + + + + + + + + + +
From 135ea6a70151e3ec3e5258b0f0e78844d2261274 Mon Sep 17 00:00:00 2001 From: Jhunriz <93062821+Jhunriz@users.noreply.github.com> Date: Thu, 7 Sep 2023 08:58:05 +0800 Subject: [PATCH 019/182] update-for-the-inventory-management --- resources/js/Components/BarcodeGenerator.jsx | 54 +++++++++++++++++++ .../js/Pages/Admin/Qr/GenerateQr/Index.jsx | 3 +- 2 files changed, 56 insertions(+), 1 deletion(-) diff --git a/resources/js/Components/BarcodeGenerator.jsx b/resources/js/Components/BarcodeGenerator.jsx index 0969885..d7916a9 100644 --- a/resources/js/Components/BarcodeGenerator.jsx +++ b/resources/js/Components/BarcodeGenerator.jsx @@ -13,6 +13,55 @@ const BarcodeGenerator = () => { const value = ProductName; + const DownloadButton = () => { + const handleDownload = () => { + const canvas = document.getElementById("qrcode-canvas"); + const a = document.createElement("a"); + a.href = canvas.toDataURL("image/png"); + a.download = "qrcode.png"; + a.click(); + }; + + return ( + + ); + }; + + const PrintButton = () => { + const handlePrint = () => { + const printWindow = window.open("", "", "width=600,height=600"); + printWindow.document.open(); + printWindow.document.write( + "QR Code" + ); + printWindow.document.write( + `QR Code` + ); + printWindow.document.write(""); + printWindow.document.close(); + printWindow.print(); + printWindow.close(); + }; + + return ( + + ); + }; + return (
@@ -37,6 +86,7 @@ const BarcodeGenerator = () => { value={ProductName} fullWidth onChange={handleInputChange} + type="number" />
@@ -47,6 +97,10 @@ const BarcodeGenerator = () => { )}
+
+ + +
); diff --git a/resources/js/Pages/Admin/Qr/GenerateQr/Index.jsx b/resources/js/Pages/Admin/Qr/GenerateQr/Index.jsx index 589d2dd..6c8ca56 100644 --- a/resources/js/Pages/Admin/Qr/GenerateQr/Index.jsx +++ b/resources/js/Pages/Admin/Qr/GenerateQr/Index.jsx @@ -29,6 +29,7 @@ import BarcodeGenerator from "@/Components/BarcodeGenerator"; import QRCodeScanner from "@/Components/QRCodeScanner"; import BarcodeScanner from "@/Components/BarcodeScanner"; import QrCodeSharpIcon from "@mui/icons-material/QrCodeSharp"; +import CropFreeIcon from "@mui/icons-material/CropFree"; export default function Index({ auth, mustVerifyEmail, status }) { const columns = ["Product Name", "Product ID", "Status"]; @@ -89,7 +90,7 @@ export default function Index({ auth, mustVerifyEmail, status }) {
} + icon={} title={"Scan"} content={
From 838dc04bb116d1cb81831a4a7370935958736d7d Mon Sep 17 00:00:00 2001 From: Jhunriz <93062821+Jhunriz@users.noreply.github.com> Date: Thu, 7 Sep 2023 15:30:30 +0800 Subject: [PATCH 020/182] barcode-download-and-print-done --- resources/js/Components/QRCodeGenerator.jsx | 29 ++++----------------- 1 file changed, 5 insertions(+), 24 deletions(-) diff --git a/resources/js/Components/QRCodeGenerator.jsx b/resources/js/Components/QRCodeGenerator.jsx index b91663b..b3d80a0 100644 --- a/resources/js/Components/QRCodeGenerator.jsx +++ b/resources/js/Components/QRCodeGenerator.jsx @@ -1,6 +1,6 @@ import React, { useState } from "react"; import QRCode from "qrcode.react"; -import { Box, TextField } from "@mui/material"; +import { Box, Button, TextField } from "@mui/material"; const QRCodeGenerator = () => { const [ProductName, setProductName] = useState(""); @@ -36,26 +36,6 @@ const QRCodeGenerator = () => { "Purchase. :" + Purchase; - const DownloadButton = () => { - const handleDownload = () => { - const canvas = document.getElementById("qrcode-canvas"); - const a = document.createElement("a"); - a.href = canvas.toDataURL("image/png"); - a.download = "qrcode.png"; - a.click(); - }; - - return ( - - ); - }; - const PrintButton = () => { const handlePrint = () => { const printWindow = window.open("", "", "width=600,height=600"); @@ -75,13 +55,14 @@ const QRCodeGenerator = () => { }; return ( - + ); }; From 10cb5c0e82e89eec7dd4a6e3e3023fe8f15e237b Mon Sep 17 00:00:00 2001 From: Jhunriz <93062821+Jhunriz@users.noreply.github.com> Date: Thu, 7 Sep 2023 15:30:56 +0800 Subject: [PATCH 021/182] download-and-print-done --- package-lock.json | 142 ++++++++++++------- package.json | 5 +- resources/js/Components/BarcodeGenerator.jsx | 115 ++++++++------- resources/js/Components/QRCodeScanner.jsx | 71 ++++++---- 4 files changed, 189 insertions(+), 144 deletions(-) diff --git a/package-lock.json b/package-lock.json index dd49eba..29ab57d 100644 --- a/package-lock.json +++ b/package-lock.json @@ -10,9 +10,12 @@ "@mui/icons-material": "^5.14.3", "@mui/material": "^5.14.5", "@mui/x-charts": "^6.0.0-alpha.9", + "html2canvas": "^1.4.1", "mui-datatables": "^4.3.0", "qrcode.react": "^3.1.0", - "react-barcode": "^1.4.6" + "react-barcode": "^1.4.6", + "react-html5-camera-photo": "^1.5.11", + "react-qr-code": "^2.0.12" }, "devDependencies": { "@inertiajs/react": "^1.0.0", @@ -1343,11 +1346,6 @@ "hoist-non-react-statics": "^3.3.0" } }, - "node_modules/@types/offscreencanvas": { - "version": "2019.7.1", - "resolved": "https://registry.npmjs.org/@types/offscreencanvas/-/offscreencanvas-2019.7.1.tgz", - "integrity": "sha512-+HSrJgjBW77ALieQdMJvXhRZUIRN1597L+BKvsyeiIlHHERnqjcuOLyodK3auJ3Y3zRezNKtKAhuQWYJfEgFHQ==" - }, "node_modules/@types/parse-json": { "version": "4.0.0", "resolved": "https://registry.npmjs.org/@types/parse-json/-/parse-json-4.0.0.tgz", @@ -1358,11 +1356,6 @@ "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.5.tgz", "integrity": "sha512-JCB8C6SnDoQf0cNycqd/35A7MjcnK+ZTqE7judS6o7utxUCg6imJg3QK2qzHKszlTjcj2cn+NwMB2i96ubpj7w==" }, - "node_modules/@types/raf": { - "version": "3.4.0", - "resolved": "https://registry.npmjs.org/@types/raf/-/raf-3.4.0.tgz", - "integrity": "sha512-taW5/WYqo36N7V39oYyHP9Ipfd5pNFvGTIQsNGj86xV88YQ7GnI30/yMfKDF7Zgin0m3e+ikX88FvImnK4RjGw==" - }, "node_modules/@types/react": { "version": "18.2.21", "resolved": "https://registry.npmjs.org/@types/react/-/react-18.2.21.tgz", @@ -1522,6 +1515,14 @@ "integrity": "sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==", "dev": true }, + "node_modules/base64-arraybuffer": { + "version": "1.0.2", + "resolved": "https://registry.npmjs.org/base64-arraybuffer/-/base64-arraybuffer-1.0.2.tgz", + "integrity": "sha512-I3yl4r9QB5ZRY3XuJVEPfc2XhZO6YweFPI+UovAzn+8/hb3oJ6lnysaFcjVpkCPfVWFUDvoZ8kmVDP7WyRtYtQ==", + "engines": { + "node": ">= 0.6.0" + } + }, "node_modules/binary-extensions": { "version": "2.2.0", "resolved": "https://registry.npmjs.org/binary-extensions/-/binary-extensions-2.2.0.tgz", @@ -1635,22 +1636,6 @@ } ] }, - "node_modules/canvg": { - "version": "4.0.1", - "resolved": "https://registry.npmjs.org/canvg/-/canvg-4.0.1.tgz", - "integrity": "sha512-5gD/d6SiCCT7baLnVr0hokYe93DfcHW2rSqdKOuOQD84YMlyfttnZ8iQsThTdX6koYam+PROz/FuQTo500zqGw==", - "dependencies": { - "@types/offscreencanvas": "^2019.6.4", - "@types/raf": "^3.4.0", - "raf": "^3.4.1", - "rgbcolor": "^1.0.1", - "stackblur-canvas": "^2.0.0", - "svg-pathdata": "^6.0.3" - }, - "engines": { - "node": ">=12.0.0" - } - }, "node_modules/chalk": { "version": "2.4.2", "resolved": "https://registry.npmjs.org/chalk/-/chalk-2.4.2.tgz", @@ -1789,6 +1774,14 @@ "node": ">=10" } }, + "node_modules/css-line-break": { + "version": "2.1.0", + "resolved": "https://registry.npmjs.org/css-line-break/-/css-line-break-2.1.0.tgz", + "integrity": "sha512-FHcKFCZcAha3LwfVBhCQbW2nCNbkZXn7KVUJcsT5/P8YmfsVja0FMPJr0B903j/E69HUphKiV9iQArX8SDYA4w==", + "dependencies": { + "utrie": "^1.0.2" + } + }, "node_modules/cssesc": { "version": "3.0.0", "resolved": "https://registry.npmjs.org/cssesc/-/cssesc-3.0.0.tgz", @@ -2284,10 +2277,17 @@ "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz", "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==" }, - "node_modules/html-to-image": { - "version": "1.11.11", - "resolved": "https://registry.npmjs.org/html-to-image/-/html-to-image-1.11.11.tgz", - "integrity": "sha512-9gux8QhvjRO/erSnDPv28noDZcPZmYE7e1vFsBLKLlRlKDSqNJYebj6Qz1TGd5lsRV+X+xYyjCKjuZdABinWjA==" + "node_modules/html2canvas": { + "version": "1.4.1", + "resolved": "https://registry.npmjs.org/html2canvas/-/html2canvas-1.4.1.tgz", + "integrity": "sha512-fPU6BHNpsyIhr8yyMpTLLxAbkaK8ArIBcmZIRiBLiDhjeqvXolaEmDGmELFuX9I4xDcaKKcJl+TKZLqruBbmWA==", + "dependencies": { + "css-line-break": "^2.1.0", + "text-segmentation": "^1.0.3" + }, + "engines": { + "node": ">=8.0.0" + } }, "node_modules/import-fresh": { "version": "3.3.0", @@ -2472,6 +2472,11 @@ "node": ">=4" } }, + "node_modules/jslib-html5-camera-photo": { + "version": "3.3.4", + "resolved": "https://registry.npmjs.org/jslib-html5-camera-photo/-/jslib-html5-camera-photo-3.3.4.tgz", + "integrity": "sha512-qysjLnP4bud0+g0qs5uA/7i569x+6ID2ufgezf9XQ+BE3EvhYjz177vi9WXLEuq+V6C/WXEv73NUICvHm5VGmQ==" + }, "node_modules/json-parse-even-better-errors": { "version": "2.3.1", "resolved": "https://registry.npmjs.org/json-parse-even-better-errors/-/json-parse-even-better-errors-2.3.1.tgz", @@ -3045,6 +3050,11 @@ "integrity": "sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg==", "dev": true }, + "node_modules/qr.js": { + "version": "0.0.0", + "resolved": "https://registry.npmjs.org/qr.js/-/qr.js-0.0.0.tgz", + "integrity": "sha512-c4iYnWb+k2E+vYpRimHqSu575b1/wKl4XFeJGpFmrJQz5I88v9aY2czh7s0w36srfCM1sXgC/xpoJz5dJfq+OQ==" + }, "node_modules/qrcode.react": { "version": "3.1.0", "resolved": "https://registry.npmjs.org/qrcode.react/-/qrcode.react-3.1.0.tgz", @@ -3159,6 +3169,18 @@ "react": "^18.2.0" } }, + "node_modules/react-html5-camera-photo": { + "version": "1.5.11", + "resolved": "https://registry.npmjs.org/react-html5-camera-photo/-/react-html5-camera-photo-1.5.11.tgz", + "integrity": "sha512-5OpdW66UmwKwd0ZHvy/U9tEZj19GrcG6RDRXjs1bFBgJoWzLJoJ7YNd8rmdrizV/6go/z9GrwoWMovqCUyaJgQ==", + "dependencies": { + "jslib-html5-camera-photo": "3.3.4" + }, + "peerDependencies": { + "react": ">=16.8.0", + "react-dom": ">=16.8.0" + } + }, "node_modules/react-is": { "version": "18.2.0", "resolved": "https://registry.npmjs.org/react-is/-/react-is-18.2.0.tgz", @@ -3169,6 +3191,24 @@ "resolved": "https://registry.npmjs.org/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz", "integrity": "sha512-fBASbA6LnOU9dOU2eW7aQ8xmYBSXUIWr+UmF9b1efZBazGNO+rcXT/icdKnYm2pTwcRylVUYwW7H1PHfLekVzA==" }, + "node_modules/react-qr-code": { + "version": "2.0.12", + "resolved": "https://registry.npmjs.org/react-qr-code/-/react-qr-code-2.0.12.tgz", + "integrity": "sha512-k+pzP5CKLEGBRwZsDPp98/CAJeXlsYRHM2iZn1Sd5Th/HnKhIZCSg27PXO58zk8z02RaEryg+60xa4vyywMJwg==", + "dependencies": { + "prop-types": "^15.8.1", + "qr.js": "0.0.0" + }, + "peerDependencies": { + "react": "^16.x || ^17.x || ^18.x", + "react-native-svg": "*" + }, + "peerDependenciesMeta": { + "react-native-svg": { + "optional": true + } + } + }, "node_modules/react-refresh": { "version": "0.14.0", "resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.14.0.tgz", @@ -3367,14 +3407,6 @@ "node": ">=0.10.0" } }, - "node_modules/rgbcolor": { - "version": "1.0.1", - "resolved": "https://registry.npmjs.org/rgbcolor/-/rgbcolor-1.0.1.tgz", - "integrity": "sha512-9aZLIrhRaD97sgVhtJOW6ckOEh6/GnvQtdVNfdZ6s67+3/XwLS9lBcQYzEEhYVeUowN7pRzMLsyGhK2i/xvWbw==", - "engines": { - "node": ">= 0.8.15" - } - }, "node_modules/rollup": { "version": "3.28.1", "resolved": "https://registry.npmjs.org/rollup/-/rollup-3.28.1.tgz", @@ -3462,14 +3494,6 @@ "node": ">=0.10.0" } }, - "node_modules/stackblur-canvas": { - "version": "2.6.0", - "resolved": "https://registry.npmjs.org/stackblur-canvas/-/stackblur-canvas-2.6.0.tgz", - "integrity": "sha512-8S1aIA+UoF6erJYnglGPug6MaHYGo1Ot7h5fuXx4fUPvcvQfcdw2o/ppCse63+eZf8PPidSu4v1JnmEVtEDnpg==", - "engines": { - "node": ">=0.1.14" - } - }, "node_modules/stylis": { "version": "4.2.0", "resolved": "https://registry.npmjs.org/stylis/-/stylis-4.2.0.tgz", @@ -3519,14 +3543,6 @@ "url": "https://github.com/sponsors/ljharb" } }, - "node_modules/svg-pathdata": { - "version": "6.0.3", - "resolved": "https://registry.npmjs.org/svg-pathdata/-/svg-pathdata-6.0.3.tgz", - "integrity": "sha512-qsjeeq5YjBZ5eMdFuUa4ZosMLxgr5RZ+F+Y1OrDhuOCEInRMA3x74XdBtggJcj9kOeInz0WE+LgCPDkZFlBYJw==", - "engines": { - "node": ">=12.0.0" - } - }, "node_modules/tailwindcss": { "version": "3.3.3", "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-3.3.3.tgz", @@ -3564,6 +3580,14 @@ "node": ">=14.0.0" } }, + "node_modules/text-segmentation": { + "version": "1.0.3", + "resolved": "https://registry.npmjs.org/text-segmentation/-/text-segmentation-1.0.3.tgz", + "integrity": "sha512-iOiPUo/BGnZ6+54OsWxZidGCsdU8YbE4PSpdPinp7DeMtUJNJBoJ/ouUSTJjHkh1KntHaltHl/gDs2FC4i5+Nw==", + "dependencies": { + "utrie": "^1.0.2" + } + }, "node_modules/thenify": { "version": "3.3.1", "resolved": "https://registry.npmjs.org/thenify/-/thenify-3.3.1.tgz", @@ -3667,6 +3691,14 @@ "integrity": "sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==", "dev": true }, + "node_modules/utrie": { + "version": "1.0.2", + "resolved": "https://registry.npmjs.org/utrie/-/utrie-1.0.2.tgz", + "integrity": "sha512-1MLa5ouZiOmQzUbjbu9VmjLzn1QLXBhwpUa7kdLUQK+KQ5KA9I1vk5U4YHe/X2Ch7PYnJfWuWT+VbuxbGwljhw==", + "dependencies": { + "base64-arraybuffer": "^1.0.2" + } + }, "node_modules/vite": { "version": "4.4.9", "resolved": "https://registry.npmjs.org/vite/-/vite-4.4.9.tgz", diff --git a/package.json b/package.json index 9fc59bf..d143da6 100644 --- a/package.json +++ b/package.json @@ -24,8 +24,11 @@ "@mui/icons-material": "^5.14.3", "@mui/material": "^5.14.5", "@mui/x-charts": "^6.0.0-alpha.9", + "html2canvas": "^1.4.1", "mui-datatables": "^4.3.0", "qrcode.react": "^3.1.0", - "react-barcode": "^1.4.6" + "react-barcode": "^1.4.6", + "react-html5-camera-photo": "^1.5.11", + "react-qr-code": "^2.0.12" } } diff --git a/resources/js/Components/BarcodeGenerator.jsx b/resources/js/Components/BarcodeGenerator.jsx index d7916a9..6350595 100644 --- a/resources/js/Components/BarcodeGenerator.jsx +++ b/resources/js/Components/BarcodeGenerator.jsx @@ -1,65 +1,40 @@ -import React, { useState } from "react"; +import React, { useState, useRef } from "react"; import Barcode from "react-barcode"; -import { Box, TextField } from "@mui/material"; +import { Box, Button, TextField } from "@mui/material"; +import html2canvas from "html2canvas"; const BarcodeGenerator = () => { - // const [barcodeValue, setBarcodeValue] = useState(""); - - const [ProductName, setProductName] = useState(""); + const [productName, setProductName] = useState(""); + const barcodeRef = useRef(null); const handleInputChange = (e) => { setProductName(e.target.value); }; - const value = ProductName; - - const DownloadButton = () => { - const handleDownload = () => { - const canvas = document.getElementById("qrcode-canvas"); - const a = document.createElement("a"); - a.href = canvas.toDataURL("image/png"); - a.download = "qrcode.png"; - a.click(); - }; - - return ( - - ); + const downloadBarcode = () => { + if (barcodeRef.current) { + html2canvas(barcodeRef.current).then((canvas) => { + // Create an "a" element to trigger the download + const a = document.createElement("a"); + a.href = canvas.toDataURL("image/png"); + a.download = "barcode.png"; + a.click(); + }); + } }; - const PrintButton = () => { - const handlePrint = () => { - const printWindow = window.open("", "", "width=600,height=600"); - printWindow.document.open(); - printWindow.document.write( - "QR Code" - ); - printWindow.document.write( - `QR Code` - ); - printWindow.document.write(""); - printWindow.document.close(); - printWindow.print(); - printWindow.close(); - }; - - return ( - + const printBarcode = () => { + const barcodeCanvas = document.getElementById("barcode-canvas"); + const printWindow = window.open("", "", "width=1000,height=1000"); + printWindow.document.open(); + printWindow.document.write( + "Print" ); + printWindow.document.write(barcodeCanvas.innerHTML); + printWindow.document.write(""); + printWindow.document.close(); + printWindow.print(); + printWindow.close(); }; return ( @@ -83,23 +58,45 @@ const BarcodeGenerator = () => { label="Barcode Value" variant="outlined" size="small" - value={ProductName} + value={productName} fullWidth onChange={handleInputChange} - type="number" + type="text" />
-
-
- {ProductName && ( - +
+
+ {productName && ( + )}
- - + +
diff --git a/resources/js/Components/QRCodeScanner.jsx b/resources/js/Components/QRCodeScanner.jsx index 1db1dbe..894f85d 100644 --- a/resources/js/Components/QRCodeScanner.jsx +++ b/resources/js/Components/QRCodeScanner.jsx @@ -1,37 +1,50 @@ -import React, { useState } from "react"; +import React, { Component } from "react"; +import Camera, { FACING_MODES } from "react-html5-camera-photo"; +import "react-html5-camera-photo/build/css/index.css"; -const QRCodeScanner = () => { - const [result, setResult] = useState(null); +class QRCodeScanner extends Component { + constructor(props) { + super(props); - const handleScan = (data) => { - if (data) { - setResult(data); + this.state = { + data: null, + error: null, + }; + } + + // Add a function to handle the QR code scan result + handleQRCodeScan(result) { + if (result) { + this.setState({ data: result }); + } else { + this.setState({ error: "No QR code found" }); } - }; + } - const handleError = (error) => { - console.error(error); - }; + onCameraError(error) { + this.setState({ error: `Camera error: ${error.message}` }); + } - return ( -
-

QR Code Scanner

-
- {/* */} + render() { + return ( +
+

QR Code Scanner

+ {this.state.data && ( +
+

Scanned QR Code:

+

{this.state.data}

+
+ )} + {this.state.error &&

{this.state.error}

} + this.handleQRCodeScan(dataUri)} // Pass the dataUri to the scan handler + onCameraError={(error) => this.onCameraError(error)} + isImageMirror={false} // To prevent mirroring of the camera feed + />
- {result && ( -
-

Scanned Result:

-

{result}

-
- )} -
- ); -}; + ); + } +} export default QRCodeScanner; From 5f19590ebdb42e3a3dae9546475d4f64611c61df Mon Sep 17 00:00:00 2001 From: Jhunriz <93062821+Jhunriz@users.noreply.github.com> Date: Thu, 7 Sep 2023 15:36:02 +0800 Subject: [PATCH 022/182] updated-done-download --- resources/js/Components/BarcodeGenerator.jsx | 2 +- resources/js/Components/QRCodeGenerator.jsx | 21 ++++++++++++++++++++ 2 files changed, 22 insertions(+), 1 deletion(-) diff --git a/resources/js/Components/BarcodeGenerator.jsx b/resources/js/Components/BarcodeGenerator.jsx index 6350595..76e84c8 100644 --- a/resources/js/Components/BarcodeGenerator.jsx +++ b/resources/js/Components/BarcodeGenerator.jsx @@ -84,7 +84,7 @@ const BarcodeGenerator = () => {
+ ); + }; + const PrintButton = () => { const handlePrint = () => { const printWindow = window.open("", "", "width=600,height=600"); From 0e8b07ea8a16e0c1a372c3e4fa73ddb9db072f3b Mon Sep 17 00:00:00 2001 From: Jhunriz <93062821+Jhunriz@users.noreply.github.com> Date: Thu, 7 Sep 2023 15:46:38 +0800 Subject: [PATCH 023/182] updated-barcode-qrcode --- resources/js/Components/BarcodeGenerator.jsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/resources/js/Components/BarcodeGenerator.jsx b/resources/js/Components/BarcodeGenerator.jsx index 76e84c8..edab1a9 100644 --- a/resources/js/Components/BarcodeGenerator.jsx +++ b/resources/js/Components/BarcodeGenerator.jsx @@ -76,7 +76,7 @@ const BarcodeGenerator = () => { From 9aa027866b61071383dad41350cb754182e98c6f Mon Sep 17 00:00:00 2001 From: Jhunriz <93062821+Jhunriz@users.noreply.github.com> Date: Thu, 7 Sep 2023 16:45:31 +0800 Subject: [PATCH 024/182] updated-barcode-download --- resources/js/Components/BarcodeGenerator.jsx | 11 ++++++----- 1 file changed, 6 insertions(+), 5 deletions(-) diff --git a/resources/js/Components/BarcodeGenerator.jsx b/resources/js/Components/BarcodeGenerator.jsx index edab1a9..fca4795 100644 --- a/resources/js/Components/BarcodeGenerator.jsx +++ b/resources/js/Components/BarcodeGenerator.jsx @@ -9,6 +9,8 @@ const BarcodeGenerator = () => { const handleInputChange = (e) => { setProductName(e.target.value); + const inputValue = event.target.value.replace(/\D/g, "").slice(0, 48); + setProductName(inputValue); }; const downloadBarcode = () => { @@ -39,7 +41,7 @@ const BarcodeGenerator = () => { return (
-
+

Generate Barcode

@@ -48,8 +50,7 @@ const BarcodeGenerator = () => { display: "flex", flexDirection: "row", alignItems: "center", - width: 600, - maxWidth: "100%", + width: 900, }} >
@@ -57,7 +58,7 @@ const BarcodeGenerator = () => { id="barcode-value-input" label="Barcode Value" variant="outlined" - size="small" + size="large" value={productName} fullWidth onChange={handleInputChange} @@ -70,7 +71,7 @@ const BarcodeGenerator = () => {
{productName && ( Date: Fri, 8 Sep 2023 13:04:51 +0800 Subject: [PATCH 025/182] update-user-settings --- resources/js/Components/VerticalTabs.jsx | 85 +++++++++++++++++++ resources/js/Pages/Profile/Edit.jsx | 64 +++++++++----- .../Pages/Profile/Partials/UpdatePassword.jsx | 1 + .../Pages/Profile/Partials/UpdateProfile.jsx | 21 +++-- 4 files changed, 143 insertions(+), 28 deletions(-) create mode 100644 resources/js/Components/VerticalTabs.jsx diff --git a/resources/js/Components/VerticalTabs.jsx b/resources/js/Components/VerticalTabs.jsx new file mode 100644 index 0000000..2cd76b8 --- /dev/null +++ b/resources/js/Components/VerticalTabs.jsx @@ -0,0 +1,85 @@ +import React, { useState } from "react"; +import PropTypes from "prop-types"; +import Tabs from "@mui/material/Tabs"; +import Tab from "@mui/material/Tab"; +import Typography from "@mui/material/Typography"; +import Box from "@mui/material/Box"; + +function TabPanel({ children, value, index, ...other }) { + return ( + + ); +} + +TabPanel.propTypes = { + children: PropTypes.node, + index: PropTypes.number.isRequired, + value: PropTypes.number.isRequired, +}; + +function VerticalTabs({ tabs }) { + const [value, setValue] = useState(0); + + const handleChange = (event, newValue) => { + setValue(newValue); + }; + + return ( + + + {tabs.map((tab, index) => ( + + ))} + + {tabs.map((tab, index) => ( + + {tab.content} + + ))} + + ); +} + +VerticalTabs.propTypes = { + tabs: PropTypes.arrayOf( + PropTypes.shape({ + label: PropTypes.string.isRequired, + content: PropTypes.node.isRequired, + }) + ).isRequired, +}; + +function a11yProps(index) { + return { + id: `vertical-tab-${index}`, + "aria-controls": `vertical-tabpanel-${index}`, + }; +} + +export default VerticalTabs; diff --git a/resources/js/Pages/Profile/Edit.jsx b/resources/js/Pages/Profile/Edit.jsx index f423246..ea72a6e 100644 --- a/resources/js/Pages/Profile/Edit.jsx +++ b/resources/js/Pages/Profile/Edit.jsx @@ -3,7 +3,10 @@ import React from "react"; import UpdateProfile from "./Partials/UpdateProfile"; import UpdatePassword from "./Partials/UpdatePassword"; import DeleteAccount from "./Partials/DeleteAccount"; -import { Avatar, IconButton, Typography, Tabs, Tab } from "@mui/material"; +import { Avatar, IconButton, Typography, Tabs, Tab, Box } from "@mui/material"; +import SupervisedUserCircleSharpIcon from "@mui/icons-material/SupervisedUserCircleSharp"; +import ChangeCircleSharpIcon from "@mui/icons-material/ChangeCircleSharp"; +import ManageAccountsSharpIcon from "@mui/icons-material/ManageAccountsSharp"; export default function Edit({ auth }) { const [value, setValue] = React.useState("personalInformation"); @@ -11,9 +14,10 @@ export default function Edit({ auth }) { const handleChange = (event, newValue) => { setValue(newValue); }; + return ( -
+
@@ -30,24 +34,44 @@ export default function Edit({ auth }) {
-
- - - - - - -
+
+ + Account Settings + +
+
+
+ + } + iconPosition="start" + /> + } + iconPosition="start" + /> + } + iconPosition="start" + /> + +
+
{value === "personalInformation" && } {value === "changePassword" && } {value === "accountSettings" && } diff --git a/resources/js/Pages/Profile/Partials/UpdatePassword.jsx b/resources/js/Pages/Profile/Partials/UpdatePassword.jsx index 3e17db7..b3e8107 100644 --- a/resources/js/Pages/Profile/Partials/UpdatePassword.jsx +++ b/resources/js/Pages/Profile/Partials/UpdatePassword.jsx @@ -107,6 +107,7 @@ export default function UpdatePassword() { color="primary" type="submit" disabled={processing} + fullWidth > Save diff --git a/resources/js/Pages/Profile/Partials/UpdateProfile.jsx b/resources/js/Pages/Profile/Partials/UpdateProfile.jsx index f24923a..dbd2a00 100644 --- a/resources/js/Pages/Profile/Partials/UpdateProfile.jsx +++ b/resources/js/Pages/Profile/Partials/UpdateProfile.jsx @@ -1,14 +1,18 @@ -import { useForm, usePage } from '@inertiajs/react'; +import { useForm, usePage } from "@inertiajs/react"; import { Button, Typography, TextField } from "@mui/material"; - -export default function UpdateProfile({ mustVerifyEmail, status, className = '' }) { +export default function UpdateProfile({ + mustVerifyEmail, + status, + className = "", +}) { const user = usePage().props.auth.user; - const { data, setData, patch, errors, processing, recentlySuccessful } = useForm({ - name: user.name, - email: user.email, - }); + const { data, setData, patch, errors, processing, recentlySuccessful } = + useForm({ + name: user.name, + email: user.email, + }); const handleSubmit = (e) => { e.preventDefault(); @@ -32,7 +36,7 @@ export default function UpdateProfile({ mustVerifyEmail, status, className = ''
-
+
Save From e7848415dafebef568e837a67e7280f5b02fb489 Mon Sep 17 00:00:00 2001 From: Jhunriz <93062821+Jhunriz@users.noreply.github.com> Date: Fri, 8 Sep 2023 16:01:29 +0800 Subject: [PATCH 026/182] darkmode-added --- app/Http/Controllers/ProfileController.php | 4 ++ resources/js/Components/CustomizeSnackBar.jsx | 14 ++++- resources/js/Components/Darkmode.jsx | 59 +++++++++++++++++++ resources/js/Layouts/MainLayout.jsx | 1 + resources/js/Pages/Profile/Edit.jsx | 9 +++ .../Pages/Profile/Partials/DeleteAccount.jsx | 49 ++++++++++----- .../Pages/Profile/Partials/UpdatePassword.jsx | 3 +- .../Pages/Profile/Partials/UpdateProfile.jsx | 3 +- resources/js/app.jsx | 4 +- resources/views/app.blade.php | 40 +++++++------ routes/web.php | 3 + tailwind.config.js | 15 ++--- 12 files changed, 158 insertions(+), 46 deletions(-) create mode 100644 resources/js/Components/Darkmode.jsx diff --git a/app/Http/Controllers/ProfileController.php b/app/Http/Controllers/ProfileController.php index 873b4f7..29b52a2 100644 --- a/app/Http/Controllers/ProfileController.php +++ b/app/Http/Controllers/ProfileController.php @@ -24,6 +24,10 @@ public function edit(Request $request): Response ]); } + public function show() + { + return Inertia::render('Profile/Show'); + } /** * Update the user's profile information. */ diff --git a/resources/js/Components/CustomizeSnackBar.jsx b/resources/js/Components/CustomizeSnackBar.jsx index dd72288..39fa069 100644 --- a/resources/js/Components/CustomizeSnackBar.jsx +++ b/resources/js/Components/CustomizeSnackBar.jsx @@ -8,7 +8,12 @@ const Alert = React.forwardRef(function Alert(props, ref) { return ; }); -export default function CustomizedSnackbars({ title, alertMessage }) { +export default function CustomizedSnackbars({ + title, + color, + startIcon, + alertMessage, +}) { const [open, setOpen] = React.useState(false); const handleClick = () => { @@ -28,7 +33,12 @@ export default function CustomizedSnackbars({ title, alertMessage }) { return ( <> - diff --git a/resources/js/Components/Darkmode.jsx b/resources/js/Components/Darkmode.jsx new file mode 100644 index 0000000..e96cac7 --- /dev/null +++ b/resources/js/Components/Darkmode.jsx @@ -0,0 +1,59 @@ +import React, { useState } from "react"; +import { ThemeProvider, createTheme } from "@mui/material/styles"; +import CssBaseline from "@mui/material/CssBaseline"; +import Container from "@mui/material/Container"; +import AppBar from "@mui/material/AppBar"; +import Toolbar from "@mui/material/Toolbar"; +import Typography from "@mui/material/Typography"; +import IconButton from "@mui/material/IconButton"; +import Brightness4Icon from "@mui/icons-material/Brightness4"; +import Brightness7Icon from "@mui/icons-material/Brightness7"; +import Switch from "@mui/material/Switch"; + +function DarkModeToggle() { + const [darkMode, setDarkMode] = useState(false); + + // Toggle the dark mode state + const toggleDarkMode = () => { + setDarkMode(!darkMode); + }; + + // Create a Material-UI theme with dark mode + const theme = createTheme({ + palette: { + mode: darkMode ? "dark" : "light", + }, + }); + + return ( + + + + + + Dark Mode Example + + + {darkMode ? : } + + + + + + Welcome to Dark Mode Example + + + Lorem ipsum dolor sit amet, consectetur adipiscing elit. + Nullam nec purus sed neque bibendum convallis. + + {/* Add more content here */} + + + ); +} + +export default DarkModeToggle; diff --git a/resources/js/Layouts/MainLayout.jsx b/resources/js/Layouts/MainLayout.jsx index 29426fb..66e2ca4 100644 --- a/resources/js/Layouts/MainLayout.jsx +++ b/resources/js/Layouts/MainLayout.jsx @@ -53,6 +53,7 @@ import HomeIcon from "@mui/icons-material/Home"; import WhatshotIcon from "@mui/icons-material/Whatshot"; import GrainIcon from "@mui/icons-material/Grain"; import CustomBreadcrumbs from "@/Components/CustomBreadcrumbs"; +import DarkModeToggle from "@/Components/Darkmode"; const drawerWidth = 240; diff --git a/resources/js/Pages/Profile/Edit.jsx b/resources/js/Pages/Profile/Edit.jsx index ea72a6e..14fda0e 100644 --- a/resources/js/Pages/Profile/Edit.jsx +++ b/resources/js/Pages/Profile/Edit.jsx @@ -7,6 +7,8 @@ import { Avatar, IconButton, Typography, Tabs, Tab, Box } from "@mui/material"; import SupervisedUserCircleSharpIcon from "@mui/icons-material/SupervisedUserCircleSharp"; import ChangeCircleSharpIcon from "@mui/icons-material/ChangeCircleSharp"; import ManageAccountsSharpIcon from "@mui/icons-material/ManageAccountsSharp"; +import { DarkMode } from "@mui/icons-material"; +import Darkmode from "./Partials/Darkmode"; export default function Edit({ auth }) { const [value, setValue] = React.useState("personalInformation"); @@ -69,12 +71,19 @@ export default function Edit({ auth }) { icon={} iconPosition="start" /> + } + iconPosition="start" + />
{value === "personalInformation" && } {value === "changePassword" && } {value === "accountSettings" && } + {value === "Dark Mode" && }
diff --git a/resources/js/Pages/Profile/Partials/DeleteAccount.jsx b/resources/js/Pages/Profile/Partials/DeleteAccount.jsx index c37f35b..eed6b72 100644 --- a/resources/js/Pages/Profile/Partials/DeleteAccount.jsx +++ b/resources/js/Pages/Profile/Partials/DeleteAccount.jsx @@ -9,6 +9,8 @@ import DialogContent from "@mui/material/DialogContent"; import DialogContentText from "@mui/material/DialogContentText"; import DialogTitle from "@mui/material/DialogTitle"; import { Typography } from "@mui/material"; +import DeleteSharpIcon from "@mui/icons-material/DeleteSharp"; +import CustomizedSnackbars from "@/Components/CustomizeSnackBar"; export default function DeleteAccount({ className = "" }) { const [open, setOpen] = React.useState(false); @@ -63,20 +65,39 @@ export default function DeleteAccount({ className = "" }) { return ( <> -
- - Delete Account - - - Once your account is deleted, all of its resources and data - will be permanently deleted. Before deleting your account, - please download any data or information that you wish to - retain. - +
+
+ + Delete Account + + + Once your account is deleted, all of its resources and + data will be permanently deleted. Before deleting your + account, please download any data or information that + you wish to retain. + +
+
+ {/* } + /> */} + +
- + @@ -109,7 +130,7 @@ export default function DeleteAccount({ className = "" }) { -
- + Save diff --git a/resources/js/Pages/Profile/Partials/UpdateProfile.jsx b/resources/js/Pages/Profile/Partials/UpdateProfile.jsx index dbd2a00..9b7f63d 100644 --- a/resources/js/Pages/Profile/Partials/UpdateProfile.jsx +++ b/resources/js/Pages/Profile/Partials/UpdateProfile.jsx @@ -36,7 +36,7 @@ export default function UpdateProfile({
-
+
Save diff --git a/resources/js/app.jsx b/resources/js/app.jsx index 208ddbc..be32ddf 100644 --- a/resources/js/app.jsx +++ b/resources/js/app.jsx @@ -6,7 +6,9 @@ import { createInertiaApp } from "@inertiajs/react"; import { resolvePageComponent } from "laravel-vite-plugin/inertia-helpers"; import { createTheme } from "@mui/material"; import { ThemeProvider } from "@emotion/react"; -import { blue } from "@mui/material/colors"; +import { blue, yellow } from "@mui/material/colors"; +import { dark } from "@mui/material/styles/createPalette"; +import DarkModeToggle from "./Components/Darkmode"; const appName = import.meta.env.VITE_APP_NAME || "Laravel"; diff --git a/resources/views/app.blade.php b/resources/views/app.blade.php index f23e9ff..72a052a 100644 --- a/resources/views/app.blade.php +++ b/resources/views/app.blade.php @@ -1,23 +1,27 @@ - - - - + - {{-- {{ config('app.name', 'Laravel') }} --}} - Inventory Management System + + + - - - + {{-- {{ config('app.name', 'Laravel') }} --}} + Inventory Management System + + + + + + + + @routes + @viteReactRefresh + @vite(['resources/js/app.jsx', "resources/js/Pages/{$page['component']}.jsx"]) + @inertiaHead + + + + @inertia + - - @routes - @viteReactRefresh - @vite(['resources/js/app.jsx', "resources/js/Pages/{$page['component']}.jsx"]) - @inertiaHead - - - @inertia - diff --git a/routes/web.php b/routes/web.php index 7f4998f..661eea5 100644 --- a/routes/web.php +++ b/routes/web.php @@ -67,6 +67,9 @@ + + + Route::get('/profile', [ProfileController::class, 'edit'])->name('profile.edit'); Route::patch('/profile', [ProfileController::class, 'update'])->name('profile.update'); Route::delete('/profile', [ProfileController::class, 'destroy'])->name('profile.destroy'); diff --git a/tailwind.config.js b/tailwind.config.js index 19ae3e3..7776665 100644 --- a/tailwind.config.js +++ b/tailwind.config.js @@ -1,19 +1,20 @@ -import defaultTheme from 'tailwindcss/defaultTheme'; -import forms from '@tailwindcss/forms'; +import defaultTheme from "tailwindcss/defaultTheme"; +import forms from "@tailwindcss/forms"; /** @type {import('tailwindcss').Config} */ export default { + darkMode: "class", content: [ - './vendor/laravel/framework/src/Illuminate/Pagination/resources/views/*.blade.php', - './storage/framework/views/*.php', - './resources/views/**/*.blade.php', - './resources/js/**/*.jsx', + "./vendor/laravel/framework/src/Illuminate/Pagination/resources/views/*.blade.php", + "./storage/framework/views/*.php", + "./resources/views/**/*.blade.php", + "./resources/js/**/*.jsx", ], theme: { extend: { fontFamily: { - sans: ['Figtree', ...defaultTheme.fontFamily.sans], + sans: ["Figtree", ...defaultTheme.fontFamily.sans], }, }, }, From 9a82dc741e6b93c1666e639057452880b6475df6 Mon Sep 17 00:00:00 2001 From: Jhunriz <93062821+Jhunriz@users.noreply.github.com> Date: Fri, 8 Sep 2023 16:19:29 +0800 Subject: [PATCH 027/182] darkmode-updated --- resources/js/Pages/Profile/Edit.jsx | 5 +- .../js/Pages/Profile/Partials/DarkMode.jsx | 162 ++++++++++++++++++ routes/web.php | 7 - 3 files changed, 164 insertions(+), 10 deletions(-) create mode 100644 resources/js/Pages/Profile/Partials/DarkMode.jsx diff --git a/resources/js/Pages/Profile/Edit.jsx b/resources/js/Pages/Profile/Edit.jsx index 14fda0e..16a7975 100644 --- a/resources/js/Pages/Profile/Edit.jsx +++ b/resources/js/Pages/Profile/Edit.jsx @@ -7,8 +7,7 @@ import { Avatar, IconButton, Typography, Tabs, Tab, Box } from "@mui/material"; import SupervisedUserCircleSharpIcon from "@mui/icons-material/SupervisedUserCircleSharp"; import ChangeCircleSharpIcon from "@mui/icons-material/ChangeCircleSharp"; import ManageAccountsSharpIcon from "@mui/icons-material/ManageAccountsSharp"; -import { DarkMode } from "@mui/icons-material"; -import Darkmode from "./Partials/Darkmode"; +import DarkMode from "./Partials/DarkMode"; export default function Edit({ auth }) { const [value, setValue] = React.useState("personalInformation"); @@ -83,7 +82,7 @@ export default function Edit({ auth }) { {value === "personalInformation" && } {value === "changePassword" && } {value === "accountSettings" && } - {value === "Dark Mode" && } + {value === "Dark Mode" && }
diff --git a/resources/js/Pages/Profile/Partials/DarkMode.jsx b/resources/js/Pages/Profile/Partials/DarkMode.jsx new file mode 100644 index 0000000..a97d68f --- /dev/null +++ b/resources/js/Pages/Profile/Partials/DarkMode.jsx @@ -0,0 +1,162 @@ +import { useRef, useState, useEffect } from "react"; +import { useForm } from "@inertiajs/react"; +import * as React from "react"; +import Button from "@mui/material/Button"; +import TextField from "@mui/material/TextField"; +import Dialog from "@mui/material/Dialog"; +import DialogActions from "@mui/material/DialogActions"; +import DialogContent from "@mui/material/DialogContent"; +import DialogContentText from "@mui/material/DialogContentText"; +import DialogTitle from "@mui/material/DialogTitle"; +import { Typography } from "@mui/material"; +import NightsStaySharpIcon from "@mui/icons-material/NightsStaySharp"; +import Brightness7SharpIcon from "@mui/icons-material/Brightness7Sharp"; +import DesktopMacSharpIcon from "@mui/icons-material/DesktopMacSharp"; + +export default function DarkMode({ className = "" }) { + const [open, setOpen] = React.useState(false); + + const handleClickOpen = () => { + setOpen(true); + }; + + const handleClose = () => { + setOpen(false); + }; + + const [confirmingUserDeletion, setConfirmingUserDeletion] = useState(false); + const passwordInput = useRef(); + + const { + data, + setData, + delete: destroy, + processing, + reset, + errors, + } = useForm({ + password: "", + }); + + const confirmUserDeletion = () => { + setConfirmingUserDeletion(true); + }; + + const deleteUser = (e) => { + e.preventDefault(); + + const confirmation = window.confirm( + "Are you sure you want to delete your account?" + ); + if (confirmation) { + destroy(route("profile.destroy"), { + preserveScroll: true, + onSuccess: () => closeModal(), + onError: () => passwordInput.current.focus(), + onFinish: () => reset(), + }); + } + }; + + const closeModal = () => { + setConfirmingUserDeletion(false); + + reset(); + }; + + // Start Dark Mode + + const [theme, setTheme] = useState( + localStorage.getItem("theme") ? localStorage.getItem("theme") : "system" + ); + const element = document.documentElement; + const darkQuery = window.matchMedia("(prefers-color-scheme: dark)"); + + const options = [ + { + icons: , + text: "light", + }, + { + icons: , + text: "dark", + }, + { + icons: , + text: "system", + }, + ]; + + function onWindowMatch() { + if ( + localStorage.theme === "dark" || + (!("theme" in localStorage) && darkQuery.matches) + ) { + element.classList.add("dark"); + } else { + element.classList.remove("dark"); + } + } + + onWindowMatch(); + + useEffect(() => { + switch (theme) { + case "dark": + element.classList.add("dark"); + localStorage.setItem("theme", "dark"); + break; + + case "light": + element.classList.remove("dark"); + localStorage.setItem("theme", "light"); + break; + + default: + localStorage.removeItem("theme"); + onWindowMatch(); + break; + } + }, [theme]); + + // End of the Dark Mode + + return ( + <> +
+
+ + Experience the DarkMode + + + Once your account is deleted, all of its resources and + data will be permanently deleted. Before deleting your + account, please download any data or information that + you wish to retain. + +
+
+ {/* start of the dark mode */} +
+ {options?.map((opt) => ( + + ))} +
+ {/* End of the Dark Mode */} +
+
+ + ); +} diff --git a/routes/web.php b/routes/web.php index 661eea5..a0da00f 100644 --- a/routes/web.php +++ b/routes/web.php @@ -63,13 +63,6 @@ - - - - - - - Route::get('/profile', [ProfileController::class, 'edit'])->name('profile.edit'); Route::patch('/profile', [ProfileController::class, 'update'])->name('profile.update'); Route::delete('/profile', [ProfileController::class, 'destroy'])->name('profile.destroy'); From 5a09cdce0283f0a201e0114af23b44ef82a930ef Mon Sep 17 00:00:00 2001 From: Jhunriz Date: Mon, 11 Sep 2023 14:01:26 +0800 Subject: [PATCH 028/182] darkMode-added --- .../js/Components/CustomizedSwitches.jsx | 16 + resources/js/Layouts/MainLayout.jsx | 569 ++++++++++-------- 2 files changed, 330 insertions(+), 255 deletions(-) create mode 100644 resources/js/Components/CustomizedSwitches.jsx diff --git a/resources/js/Components/CustomizedSwitches.jsx b/resources/js/Components/CustomizedSwitches.jsx new file mode 100644 index 0000000..0d6d6be --- /dev/null +++ b/resources/js/Components/CustomizedSwitches.jsx @@ -0,0 +1,16 @@ +import React from "react"; +import Switch from "@mui/material/Switch"; + +function CustomizedSwitches({ darkMode, toggleDarkMode }) { + return ( +
+ + {/* Add any additional content or styling for your switch here */} +
+ ); +} + +export default CustomizedSwitches; diff --git a/resources/js/Layouts/MainLayout.jsx b/resources/js/Layouts/MainLayout.jsx index 66e2ca4..7fcea06 100644 --- a/resources/js/Layouts/MainLayout.jsx +++ b/resources/js/Layouts/MainLayout.jsx @@ -40,6 +40,8 @@ import { useTheme, ListSubheader, Collapse, + Switch, + Button, } from "@mui/material"; import { Logout, PersonAdd, Settings } from "@mui/icons-material"; @@ -52,8 +54,8 @@ import CustomSpeedDial from "@/Components/CustomSpeedDial"; import HomeIcon from "@mui/icons-material/Home"; import WhatshotIcon from "@mui/icons-material/Whatshot"; import GrainIcon from "@mui/icons-material/Grain"; -import CustomBreadcrumbs from "@/Components/CustomBreadcrumbs"; -import DarkModeToggle from "@/Components/Darkmode"; +import { ThemeProvider, createTheme } from "@mui/material/styles"; +import CustomizedSwitches from "@/Components/CustomizedSwitches"; const drawerWidth = 240; @@ -188,275 +190,332 @@ export default function MainLayout({ user, children }) { text: "Breadcrumb", }, ]; + // Initialize DarkMode state with a default value from localStorage if available + const [DarkMode, SetDarkMode] = useState( + localStorage.getItem("DarkMode") === "true" + ); + + // Function to toggle DarkMode and store the preference in localStorage + const toggleDarkMode = () => { + const newDarkMode = !DarkMode; + SetDarkMode(newDarkMode); + localStorage.setItem("DarkMode", newDarkMode); + }; + + // Create the theme based on DarkMode state + const darkTheme = createTheme({ + palette: { + mode: DarkMode ? "dark" : "light", + }, + }); return ( - - - - - - - - - Inventory Management System - -
- - {/* account menu start */} - - + + + + + + - + - - - + Inventory Management System + +
+ + {/* account menu start */} + + + + + + + + + + {user.name} + + +
+

Dark Mode

+ + +
+ + + + + + + Add another account + + + + + + + Settings + + + + + + + Logout + + + {/* account menu end */} + + + + {/* breadCrumbs */} + + - - {user.name} - + + + {theme.direction === "ltr" ? ( + + ) : ( + + )} + + - - - - - Add another account - - - - - - - Settings - - - - - - - Logout - - - {/* account menu end */} - - - - {/* breadCrumbs */} - - - - - {theme.direction === "ltr" ? ( - - ) : ( - - )} - - - - - - - + + + + + + + + + + + + + + + {/* another sidenav list */} + + {/* start */} + + - + - + + {expanded ? : } - - - - - - {/* another sidenav list */} - - {/* start */} - - - - - - - {expanded ? : } - - - - - - - - - - - - + + + + + + + + + + + - - - - - - - - - - - - - - - - - - - - - - - - - {/* end */} - - - - - - - {Qr ? : } - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + - - - + + {/* end */} + + - + - + + {Qr ? : } - - - - -
- - - - - - - - - - - - -
- -
- - -
- {children} -
- } - /> -
-
-
- + + + + + + + + + + + + + + + + + + + + + + +
+ + + + + + + + + + + + +
+ +
+ + +
+ {children} +
+ } + /> +
+
+
+ + + ); } From 47db13134d965101b4f089bde2200e30e5f8ae99 Mon Sep 17 00:00:00 2001 From: Jhunriz Date: Mon, 11 Sep 2023 14:32:35 +0800 Subject: [PATCH 029/182] dark-mode/lightmode-done --- .../js/Components/CustomizedSwitches.jsx | 78 ++++++++++++++++--- resources/js/Layouts/MainLayout.jsx | 36 +++------ 2 files changed, 79 insertions(+), 35 deletions(-) diff --git a/resources/js/Components/CustomizedSwitches.jsx b/resources/js/Components/CustomizedSwitches.jsx index 0d6d6be..67b23b2 100644 --- a/resources/js/Components/CustomizedSwitches.jsx +++ b/resources/js/Components/CustomizedSwitches.jsx @@ -1,16 +1,74 @@ -import React from "react"; +import * as React from "react"; +import { styled } from "@mui/material/styles"; +import FormGroup from "@mui/material/FormGroup"; +import FormControlLabel from "@mui/material/FormControlLabel"; import Switch from "@mui/material/Switch"; +import Stack from "@mui/material/Stack"; +import IconButton from "@mui/material/IconButton"; +import CheckIcon from "@mui/icons-material/Check"; +import CloseIcon from "@mui/icons-material/Close"; -function CustomizedSwitches({ darkMode, toggleDarkMode }) { +const MaterialUISwitch = styled(Switch)(({ theme }) => ({ + width: 62, + height: 34, + padding: 7, + "& .MuiSwitch-switchBase": { + margin: 1, + padding: 0, + transform: "translateX(6px)", + "&.Mui-checked": { + color: "#fff", + transform: "translateX(22px)", + "& .MuiSwitch-thumb:before": { + backgroundImage: `url('data:image/svg+xml;utf8,')`, + }, + "& + .MuiSwitch-track": { + opacity: 1, + backgroundColor: + theme.palette.mode === "dark" ? "#8796A5" : "#aab4be", + }, + }, + }, + "& .MuiSwitch-thumb": { + backgroundColor: theme.palette.mode === "dark" ? "#003892" : "#001e3c", + width: 32, + height: 32, + "&:before": { + content: "''", + position: "absolute", + width: "100%", + height: "100%", + left: 0, + top: 0, + backgroundRepeat: "no-repeat", + backgroundPosition: "center", + backgroundImage: `url('data:image/svg+xml;utf8,')`, + }, + }, + "& .MuiSwitch-track": { + opacity: 1, + backgroundColor: theme.palette.mode === "dark" ? "#8796A5" : "#aab4be", + borderRadius: 20 / 2, + }, +})); + +export default function CustomizedSwitches({ checked, onChange, label }) { return ( -
- + + } + label={label} /> - {/* Add any additional content or styling for your switch here */} -
+ ); } - -export default CustomizedSwitches; diff --git a/resources/js/Layouts/MainLayout.jsx b/resources/js/Layouts/MainLayout.jsx index 7fcea06..fcea22d 100644 --- a/resources/js/Layouts/MainLayout.jsx +++ b/resources/js/Layouts/MainLayout.jsx @@ -55,8 +55,8 @@ import HomeIcon from "@mui/icons-material/Home"; import WhatshotIcon from "@mui/icons-material/Whatshot"; import GrainIcon from "@mui/icons-material/Grain"; import { ThemeProvider, createTheme } from "@mui/material/styles"; +import Brightness7Icon from "@mui/icons-material/Brightness7"; import CustomizedSwitches from "@/Components/CustomizedSwitches"; - const drawerWidth = 240; const Main = styled("main", { shouldForwardProp: (prop) => prop !== "open" })( @@ -306,30 +306,16 @@ export default function MainLayout({ user, children }) { {user.name} -
-

Dark Mode

- - -
+ + {/* */} From 16cb09ef9b63bfe5bc5636208eb202b0750816e9 Mon Sep 17 00:00:00 2001 From: Jhunriz Date: Mon, 11 Sep 2023 14:41:58 +0800 Subject: [PATCH 030/182] other-update --- resources/js/Layouts/MainLayout.jsx | 15 +++++++++------ 1 file changed, 9 insertions(+), 6 deletions(-) diff --git a/resources/js/Layouts/MainLayout.jsx b/resources/js/Layouts/MainLayout.jsx index fcea22d..78dd2fa 100644 --- a/resources/js/Layouts/MainLayout.jsx +++ b/resources/js/Layouts/MainLayout.jsx @@ -310,12 +310,15 @@ export default function MainLayout({ user, children }) { checked={DarkMode} onChange={toggleDarkMode} /> - {/* */} + + + {DarkMode + ? "Switch to Light Mode" + : "Switch to Dark Mode"} + From bd89ef50ef0c7c5e2f8f31d20fef553fc070def5 Mon Sep 17 00:00:00 2001 From: Jhunriz <93062821+Jhunriz@users.noreply.github.com> Date: Tue, 12 Sep 2023 09:39:32 +0800 Subject: [PATCH 031/182] arrange this user settings --- .../Controllers/Library/SettingController.php | 15 ++++++ resources/js/Layouts/MainLayout.jsx | 2 +- .../js/Pages/Admin/Library/Settings/Index.jsx | 54 +++++++++++++++++++ resources/js/Pages/Profile/Edit.jsx | 15 ++---- .../Pages/Profile/Partials/UpdateProfile.jsx | 24 --------- routes/web.php | 7 +++ 6 files changed, 81 insertions(+), 36 deletions(-) create mode 100644 app/Http/Controllers/Library/SettingController.php create mode 100644 resources/js/Pages/Admin/Library/Settings/Index.jsx diff --git a/app/Http/Controllers/Library/SettingController.php b/app/Http/Controllers/Library/SettingController.php new file mode 100644 index 0000000..ed0d477 --- /dev/null +++ b/app/Http/Controllers/Library/SettingController.php @@ -0,0 +1,15 @@ + - + diff --git a/resources/js/Pages/Admin/Library/Settings/Index.jsx b/resources/js/Pages/Admin/Library/Settings/Index.jsx new file mode 100644 index 0000000..dc18cdc --- /dev/null +++ b/resources/js/Pages/Admin/Library/Settings/Index.jsx @@ -0,0 +1,54 @@ +import MainLayout from "@/Layouts/MainLayout"; +import { Button, Tab, Tabs, TextField, Typography } from "@mui/material"; +import React from "react"; + +export default function Index({ auth, user }) { + const [value, setValue] = React.useState("gender"); + + const handleChange = (event, newValue) => { + setValue(newValue); + }; + return ( + +
+ +
+
+ + Settings Page + + +
+ Username + Jhunriz +
+ +
+ + + + +
+
+ + ); +} diff --git a/resources/js/Pages/Profile/Edit.jsx b/resources/js/Pages/Profile/Edit.jsx index 16a7975..b5a9db7 100644 --- a/resources/js/Pages/Profile/Edit.jsx +++ b/resources/js/Pages/Profile/Edit.jsx @@ -27,16 +27,16 @@ export default function Edit({ auth }) { src="/static/images/avatar/2.jpg" /> - + {auth.user.name} - + {auth.user.email}
-
- +
+ Account Settings
@@ -70,19 +70,12 @@ export default function Edit({ auth }) { icon={} iconPosition="start" /> - } - iconPosition="start" - />
{value === "personalInformation" && } {value === "changePassword" && } {value === "accountSettings" && } - {value === "Dark Mode" && }
diff --git a/resources/js/Pages/Profile/Partials/UpdateProfile.jsx b/resources/js/Pages/Profile/Partials/UpdateProfile.jsx index 9b7f63d..0d5f1c2 100644 --- a/resources/js/Pages/Profile/Partials/UpdateProfile.jsx +++ b/resources/js/Pages/Profile/Partials/UpdateProfile.jsx @@ -76,30 +76,6 @@ export default function UpdateProfile({
- - {/* {mustVerifyEmail && user.email_verified_at === null && ( -
-

- Your email address is unverified. - - Click here to re-send the verification - email. - -

- - {status === "verification-link-sent" && ( -
- A new verification link has been sent to - your email address. -
- )} -
- )} */} ); } diff --git a/routes/web.php b/routes/web.php index a0da00f..a558a2d 100644 --- a/routes/web.php +++ b/routes/web.php @@ -2,6 +2,7 @@ use App\Http\Controllers\Library\GenderController; use App\Http\Controllers\Library\LibraryController; +use App\Http\Controllers\library\SettingController; use App\Http\Controllers\Management\ProductManagementController; use App\Http\Controllers\Management\UserManagementController; use App\Http\Controllers\ProfileController; @@ -47,6 +48,8 @@ // library Route::resource('/library', LibraryController::class); + + // Management Route::resource('/management', UserManagementController::class); Route::resource('/products', ProductManagementController::class); @@ -59,6 +62,10 @@ Route::resource('/storage', StorageController::class); + // Setting navigationbar + Route::resource('/settings', SettingController::class); + + From 078a272d837c22f96429b368515e32332cd33575 Mon Sep 17 00:00:00 2001 From: Jhunriz <93062821+Jhunriz@users.noreply.github.com> Date: Tue, 12 Sep 2023 10:20:16 +0800 Subject: [PATCH 032/182] position&location added --- resources/js/Layouts/MainLayout.jsx | 2 +- .../js/Pages/Admin/Library/Company/Index.jsx | 49 ++++++++++++++ resources/js/Pages/Admin/Library/Index.jsx | 10 ++- .../js/Pages/Admin/Library/Position/Index.jsx | 64 +++++++++++++++++++ 4 files changed, 123 insertions(+), 2 deletions(-) create mode 100644 resources/js/Pages/Admin/Library/Company/Index.jsx create mode 100644 resources/js/Pages/Admin/Library/Position/Index.jsx diff --git a/resources/js/Layouts/MainLayout.jsx b/resources/js/Layouts/MainLayout.jsx index 2049e1b..78dd2fa 100644 --- a/resources/js/Layouts/MainLayout.jsx +++ b/resources/js/Layouts/MainLayout.jsx @@ -477,7 +477,7 @@ export default function MainLayout({ user, children }) {
- + diff --git a/resources/js/Pages/Admin/Library/Company/Index.jsx b/resources/js/Pages/Admin/Library/Company/Index.jsx new file mode 100644 index 0000000..4626a54 --- /dev/null +++ b/resources/js/Pages/Admin/Library/Company/Index.jsx @@ -0,0 +1,49 @@ +import { Typography } from "@mui/material"; +import React from "react"; +import MUIDataTable from "mui-datatables"; + +export default function Index({ genders }) { + const columns = ["Company Name", "Location"]; + + // const data = genders.map((data) => [ + // data.gender, + // data.isActive ? "Active" : "Inactive", + // ]); + + const data = [ + ["EasyPC", "MAKATI CITY"], + ["ARK-PC", "CAMARIN CALOOCAN CITY"], + ["Tech Haven", "QUEZON CITY"], + ["Gadget Galaxy", "TAGUIG CITY"], + ["Digital Delights", "MANILA"], + ["PC Paradise", "PASAY CITY"], + ["ElectroTech", "MANDALUYONG CITY"], + ["Tech Trends", "PASIG CITY"], + ["Gizmo World", "QUEZON CITY"], + ["Future Fusion", "MARIKINA CITY"], + ["PC Powerhouse", "LAS PIÑAS CITY"], + ["Cyber Central", "PARAÑAQUE CITY"], + ["MegaBytes", "VALENZUELA CITY"], + ["Innovate IT", "ANTIPOLLO CITY"], + ["E-Tech Solutions", "SAN JUAN CITY"], + ["iGadget Hub", "MUNTINLUPA CITY"], + ]; + + const options = { + filterType: "checkBox", + elevation: 0, + responsive: "standard", + selectableRows: false, + }; + + return ( + <> + + + ); +} diff --git a/resources/js/Pages/Admin/Library/Index.jsx b/resources/js/Pages/Admin/Library/Index.jsx index ee525d0..93a87f7 100644 --- a/resources/js/Pages/Admin/Library/Index.jsx +++ b/resources/js/Pages/Admin/Library/Index.jsx @@ -3,6 +3,8 @@ import { Tab, Tabs, Typography } from "@mui/material"; import React from "react"; import Gender from "./Gender/Index"; import Religion from "./Religion/Index"; +import Company from "./Company/Index"; +import Position from "./Position/Index"; export default function Index({ auth }) { const [value, setValue] = React.useState("gender"); @@ -10,6 +12,7 @@ export default function Index({ auth }) { const handleChange = (event, newValue) => { setValue(newValue); }; + return (
@@ -17,7 +20,7 @@ export default function Index({ auth }) { Settings Page - Add or update settings or global parameter + Add or update settings or global parameters + + {" "} + {/* Fix the casing here */}
{value === "gender" && } {value === "religion" && } + {value === "companies" && } + {value === "position" && }
diff --git a/resources/js/Pages/Admin/Library/Position/Index.jsx b/resources/js/Pages/Admin/Library/Position/Index.jsx new file mode 100644 index 0000000..f2e4dd7 --- /dev/null +++ b/resources/js/Pages/Admin/Library/Position/Index.jsx @@ -0,0 +1,64 @@ +import { Typography } from "@mui/material"; +import React from "react"; +import MUIDataTable from "mui-datatables"; + +export default function Index({ genders }) { + const columns = ["Position", "Location"]; + + // const data = genders.map((data) => [ + // data.gender, + // data.isActive ? "Active" : "Inactive", + // ]); + + const data = [ + ["Inventory Clerk", "MAKATI CITY"], + ["Sales Manager", "QUEZON CITY"], + ["Customer Service Representative", "MANILA"], + ["Software Developer", "TAGUIG CITY"], + ["Marketing Coordinator", "CEBU CITY"], + ["Accountant", "DAVAO CITY"], + ["Warehouse Supervisor", "PASIG CITY"], + ["HR Specialist", "MANDALUYONG CITY"], + ["Operations Manager", "PASAY CITY"], + ["Graphic Designer", "MUNTINLUPA CITY"], + ["Inventory Clerk", "MAKATI CITY"], + ["Sales Manager", "QUEZON CITY"], + ["Customer Service Representative", "MANILA"], + ["Software Developer", "TAGUIG CITY"], + ["Marketing Coordinator", "CEBU CITY"], + ["Accountant", "DAVAO CITY"], + ["Warehouse Supervisor", "PASIG CITY"], + ["HR Specialist", "MANDALUYONG CITY"], + ["Operations Manager", "PASAY CITY"], + ["Graphic Designer", "MUNTINLUPA CITY"], + ["Data Analyst", "QUEZON CITY"], + ["Product Manager", "MANILA"], + ["Frontend Developer", "TAGUIG CITY"], + ["Event Planner", "CEBU CITY"], + ["Financial Analyst", "DAVAO CITY"], + ["Logistics Coordinator", "PASIG CITY"], + ["Recruitment Specialist", "MANDALUYONG CITY"], + ["Restaurant Manager", "PASAY CITY"], + ["UI/UX Designer", "MUNTINLUPA CITY"], + ["Quality Assurance Tester", "QUEZON CITY"], + ["Marketing Manager", "MANILA"], + ]; + + const options = { + filterType: "checkBox", + elevation: 0, + responsive: "standard", + selectableRows: false, + }; + + return ( + <> + + + ); +} From c677f9c98ab0b130cf3d5bffddb1d37585d3c0e1 Mon Sep 17 00:00:00 2001 From: Jhunriz <93062821+Jhunriz@users.noreply.github.com> Date: Tue, 12 Sep 2023 10:41:41 +0800 Subject: [PATCH 033/182] update positopn& company --- resources/js/Pages/Admin/Library/Company/Index.jsx | 2 +- resources/js/Pages/Admin/Library/Position/Index.jsx | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/resources/js/Pages/Admin/Library/Company/Index.jsx b/resources/js/Pages/Admin/Library/Company/Index.jsx index 4626a54..affb4c9 100644 --- a/resources/js/Pages/Admin/Library/Company/Index.jsx +++ b/resources/js/Pages/Admin/Library/Company/Index.jsx @@ -39,7 +39,7 @@ export default function Index({ genders }) { return ( <> Date: Wed, 13 Sep 2023 10:30:29 +0800 Subject: [PATCH 034/182] qr-code scanner --- package-lock.json | 92 ++++++++++++++++++- package.json | 4 +- resources/css/app.css | 1 + resources/js/Components/QRCodeScanner.jsx | 103 +++++++++++++--------- 4 files changed, 155 insertions(+), 45 deletions(-) diff --git a/package-lock.json b/package-lock.json index 29ab57d..92fbee5 100644 --- a/package-lock.json +++ b/package-lock.json @@ -11,11 +11,13 @@ "@mui/material": "^5.14.5", "@mui/x-charts": "^6.0.0-alpha.9", "html2canvas": "^1.4.1", + "modern-react-qr-reader": "^1.0.12", "mui-datatables": "^4.3.0", "qrcode.react": "^3.1.0", "react-barcode": "^1.4.6", "react-html5-camera-photo": "^1.5.11", - "react-qr-code": "^2.0.12" + "react-qr-code": "^2.0.12", + "react-qr-reader": "^1.0.0" }, "devDependencies": { "@inertiajs/react": "^1.0.0", @@ -2494,6 +2496,11 @@ "node": ">=6" } }, + "node_modules/jsqr": { + "version": "0.2.2", + "resolved": "https://registry.npmjs.org/jsqr/-/jsqr-0.2.2.tgz", + "integrity": "sha512-dptW6r8NkPynywLcgAGBAaRxy80GmSzf07qL1yHr+t19c2Nj0rAvvWJDFFavX2MRCPg/6FEPG90sdN8jt4KNRg==" + }, "node_modules/laravel-vite-plugin": { "version": "0.8.0", "resolved": "https://registry.npmjs.org/laravel-vite-plugin/-/laravel-vite-plugin-0.8.0.tgz", @@ -2658,6 +2665,43 @@ "node": "*" } }, + "node_modules/modern-react-qr-reader": { + "version": "1.0.12", + "resolved": "https://registry.npmjs.org/modern-react-qr-reader/-/modern-react-qr-reader-1.0.12.tgz", + "integrity": "sha512-PlKpqPkC1G2mHcdqK/rqCr3lejueHUqwW7NWzAqPVLcwm134P/SngpEf9u87DT7YUFogqznP1CURvovHGBXhkA==", + "dependencies": { + "jsqr": "^1.2.0", + "prop-types": "^15.7.2", + "webrtc-adapter": "^7.2.1" + }, + "peerDependencies": { + "react": "~16", + "react-dom": "~16" + } + }, + "node_modules/modern-react-qr-reader/node_modules/jsqr": { + "version": "1.4.0", + "resolved": "https://registry.npmjs.org/jsqr/-/jsqr-1.4.0.tgz", + "integrity": "sha512-dxLob7q65Xg2DvstYkRpkYtmKm2sPJ9oFhrhmudT1dZvNFFTlroai3AWSpLey/w5vMcLBXRgOJsbXpdN9HzU/A==" + }, + "node_modules/modern-react-qr-reader/node_modules/sdp": { + "version": "2.12.0", + "resolved": "https://registry.npmjs.org/sdp/-/sdp-2.12.0.tgz", + "integrity": "sha512-jhXqQAQVM+8Xj5EjJGVweuEzgtGWb3tmEEpl3CLP3cStInSbVHSg0QWOGQzNq8pSID4JkpeV2mPqlMDLrm0/Vw==" + }, + "node_modules/modern-react-qr-reader/node_modules/webrtc-adapter": { + "version": "7.7.1", + "resolved": "https://registry.npmjs.org/webrtc-adapter/-/webrtc-adapter-7.7.1.tgz", + "integrity": "sha512-TbrbBmiQBL9n0/5bvDdORc6ZfRY/Z7JnEj+EYOD1ghseZdpJ+nF2yx14k3LgQKc7JZnG7HAcL+zHnY25So9d7A==", + "dependencies": { + "rtcpeerconnection-shim": "^1.2.15", + "sdp": "^2.12.0" + }, + "engines": { + "node": ">=6.0.0", + "npm": ">=3.10.0" + } + }, "node_modules/ms": { "version": "2.1.2", "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz", @@ -3209,6 +3253,19 @@ } } }, + "node_modules/react-qr-reader": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/react-qr-reader/-/react-qr-reader-1.0.0.tgz", + "integrity": "sha512-BZih016uN+76uu2iL0713654fmHuXWFCIYo2Wjl40kQgo/RJmtQD60kRqDBnduGKnN9KO233FlAwNm9ucVFeGw==", + "dependencies": { + "jsqr": "^0.2.1", + "webrtc-adapter": "^2.0.8" + }, + "peerDependencies": { + "react": "^15.0.2", + "react-dom": "^15.0.2" + } + }, "node_modules/react-refresh": { "version": "0.14.0", "resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.14.0.tgz", @@ -3423,6 +3480,23 @@ "fsevents": "~2.3.2" } }, + "node_modules/rtcpeerconnection-shim": { + "version": "1.2.15", + "resolved": "https://registry.npmjs.org/rtcpeerconnection-shim/-/rtcpeerconnection-shim-1.2.15.tgz", + "integrity": "sha512-C6DxhXt7bssQ1nHb154lqeL0SXz5Dx4RczXZu2Aa/L1NJFnEVDxFwCBo3fqtuljhHIGceg5JKBV4XJ0gW5JKyw==", + "dependencies": { + "sdp": "^2.6.0" + }, + "engines": { + "node": ">=6.0.0", + "npm": ">=3.10.0" + } + }, + "node_modules/rtcpeerconnection-shim/node_modules/sdp": { + "version": "2.12.0", + "resolved": "https://registry.npmjs.org/sdp/-/sdp-2.12.0.tgz", + "integrity": "sha512-jhXqQAQVM+8Xj5EjJGVweuEzgtGWb3tmEEpl3CLP3cStInSbVHSg0QWOGQzNq8pSID4JkpeV2mPqlMDLrm0/Vw==" + }, "node_modules/run-parallel": { "version": "1.2.0", "resolved": "https://registry.npmjs.org/run-parallel/-/run-parallel-1.2.0.tgz", @@ -3454,6 +3528,11 @@ "loose-envify": "^1.1.0" } }, + "node_modules/sdp": { + "version": "1.5.4", + "resolved": "https://registry.npmjs.org/sdp/-/sdp-1.5.4.tgz", + "integrity": "sha512-9x0+fpJHW2bbqtIktmL+H9m+BswgurPVPhWrur4cCZPDWDSsdGYvRBaKhDXlnNCD1b/Xi8cOTG2u703CTQuwgg==" + }, "node_modules/semver": { "version": "6.3.1", "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.1.tgz", @@ -3767,6 +3846,17 @@ "vite": "^2 || ^3 || ^4" } }, + "node_modules/webrtc-adapter": { + "version": "2.1.0", + "resolved": "https://registry.npmjs.org/webrtc-adapter/-/webrtc-adapter-2.1.0.tgz", + "integrity": "sha512-i38RPNdm68QS6jQFWDuYEOLv5HvWE0Hz99eePd7Nk/c3FmhFUR6zNyfhASdPewm2u1tMfHkRTx9cAZyq3prRlA==", + "dependencies": { + "sdp": "^1.0.0" + }, + "engines": { + "npm": "^3.10.0" + } + }, "node_modules/wrappy": { "version": "1.0.2", "resolved": "https://registry.npmjs.org/wrappy/-/wrappy-1.0.2.tgz", diff --git a/package.json b/package.json index d143da6..d508354 100644 --- a/package.json +++ b/package.json @@ -25,10 +25,12 @@ "@mui/material": "^5.14.5", "@mui/x-charts": "^6.0.0-alpha.9", "html2canvas": "^1.4.1", + "modern-react-qr-reader": "^1.0.12", "mui-datatables": "^4.3.0", "qrcode.react": "^3.1.0", "react-barcode": "^1.4.6", "react-html5-camera-photo": "^1.5.11", - "react-qr-code": "^2.0.12" + "react-qr-code": "^2.0.12", + "react-qr-reader": "^1.0.0" } } diff --git a/resources/css/app.css b/resources/css/app.css index b42ef0f..8a24077 100644 --- a/resources/css/app.css +++ b/resources/css/app.css @@ -6,3 +6,4 @@ /* @apply w-full sm:max-w-md mt-6 px-6 py-4 shadow-lg overflow-hidden sm:rounded-lg */ @apply rounded p-10 shadow-lg } + diff --git a/resources/js/Components/QRCodeScanner.jsx b/resources/js/Components/QRCodeScanner.jsx index 894f85d..2ff343e 100644 --- a/resources/js/Components/QRCodeScanner.jsx +++ b/resources/js/Components/QRCodeScanner.jsx @@ -1,50 +1,67 @@ -import React, { Component } from "react"; -import Camera, { FACING_MODES } from "react-html5-camera-photo"; -import "react-html5-camera-photo/build/css/index.css"; +import React, { useState, useCallback } from "react"; +import { QrReader } from "react-qr-reader"; -class QRCodeScanner extends Component { - constructor(props) { - super(props); +const QRCodeScanner = () => { + const [selected, setSelected] = useState("environment"); + const [startScan, setStartScan] = useState(false); + const [loadingScan, setLoadingScan] = useState(false); + const [data, setData] = useState(""); - this.state = { - data: null, - error: null, - }; - } + const handleScan = useCallback( + (scanData) => { + setLoadingScan(true); + console.log("Scanned Data:", scanData); + if (scanData) { + setData(scanData); + setStartScan(false); + setLoadingScan(false); + } + }, + [setData, setStartScan, setLoadingScan] + ); - // Add a function to handle the QR code scan result - handleQRCodeScan(result) { - if (result) { - this.setState({ data: result }); - } else { - this.setState({ error: "No QR code found" }); - } - } + const handleError = (err) => { + console.error(err); + }; - onCameraError(error) { - this.setState({ error: `Camera error: ${error.message}` }); - } + return ( +
+

QR Code Scanner

+

Last Scan: {selected}

- render() { - return ( -
-

QR Code Scanner

- {this.state.data && ( -
-

Scanned QR Code:

-

{this.state.data}

-
- )} - {this.state.error &&

{this.state.error}

} - this.handleQRCodeScan(dataUri)} // Pass the dataUri to the scan handler - onCameraError={(error) => this.onCameraError(error)} - isImageMirror={false} // To prevent mirroring of the camera feed - /> -
- ); - } -} + + {startScan && ( + <> + + + + )} + {loadingScan &&

Loading

} + {data !== "" &&

{data}

} +
+ ); +}; export default QRCodeScanner; From e33c5332f037d4e70200f82cf29b10a89b0ed374 Mon Sep 17 00:00:00 2001 From: Jhunriz Date: Wed, 13 Sep 2023 14:23:47 +0800 Subject: [PATCH 035/182] qr-code-scanner --- package-lock.json | 92 +++++++++---- package.json | 2 +- resources/js/Components/QRCodeScanner.jsx | 161 ++++++++++++++-------- resources/views/app.blade.php | 2 + 4 files changed, 168 insertions(+), 89 deletions(-) diff --git a/package-lock.json b/package-lock.json index 92fbee5..23707fc 100644 --- a/package-lock.json +++ b/package-lock.json @@ -17,7 +17,7 @@ "react-barcode": "^1.4.6", "react-html5-camera-photo": "^1.5.11", "react-qr-code": "^2.0.12", - "react-qr-reader": "^1.0.0" + "react-qr-reader": "^3.0.0-beta-1" }, "devDependencies": { "@inertiajs/react": "^1.0.0", @@ -1407,6 +1407,37 @@ "vite": "^4.2.0" } }, + "node_modules/@zxing/browser": { + "version": "0.0.7", + "resolved": "https://registry.npmjs.org/@zxing/browser/-/browser-0.0.7.tgz", + "integrity": "sha512-AepzMgDnD6EjxewqmXpHJsi4S3Gw9ilZJLIbTf6fWuWySEcHBodnGu3p7FWlgq1Sd5QyfPhTum5z3CBkkhMVng==", + "optionalDependencies": { + "@zxing/text-encoding": "^0.9.0" + }, + "peerDependencies": { + "@zxing/library": "^0.18.3" + } + }, + "node_modules/@zxing/library": { + "version": "0.18.6", + "resolved": "https://registry.npmjs.org/@zxing/library/-/library-0.18.6.tgz", + "integrity": "sha512-bulZ9JHoLFd9W36pi+7e7DnEYNJhljYjZ1UTsKPOoLMU3qtC+REHITeCRNx40zTRJZx18W5TBRXt5pq2Uopjsw==", + "dependencies": { + "ts-custom-error": "^3.0.0" + }, + "engines": { + "node": ">= 10.4.0" + }, + "optionalDependencies": { + "@zxing/text-encoding": "~0.9.0" + } + }, + "node_modules/@zxing/text-encoding": { + "version": "0.9.0", + "resolved": "https://registry.npmjs.org/@zxing/text-encoding/-/text-encoding-0.9.0.tgz", + "integrity": "sha512-U/4aVJ2mxI0aDNI8Uq0wEhMgY+u4CNtEb0om3+y3+niDAsoTCOB33UF0sxpzqzdqXLqmvc+vZyAt4O8pPdfkwA==", + "optional": true + }, "node_modules/ansi-styles": { "version": "3.2.1", "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-3.2.1.tgz", @@ -2143,7 +2174,6 @@ "version": "2.3.3", "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.3.tgz", "integrity": "sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw==", - "dev": true, "hasInstallScript": true, "optional": true, "os": [ @@ -2496,11 +2526,6 @@ "node": ">=6" } }, - "node_modules/jsqr": { - "version": "0.2.2", - "resolved": "https://registry.npmjs.org/jsqr/-/jsqr-0.2.2.tgz", - "integrity": "sha512-dptW6r8NkPynywLcgAGBAaRxy80GmSzf07qL1yHr+t19c2Nj0rAvvWJDFFavX2MRCPg/6FEPG90sdN8jt4KNRg==" - }, "node_modules/laravel-vite-plugin": { "version": "0.8.0", "resolved": "https://registry.npmjs.org/laravel-vite-plugin/-/laravel-vite-plugin-0.8.0.tgz", @@ -3254,16 +3279,31 @@ } }, "node_modules/react-qr-reader": { - "version": "1.0.0", - "resolved": "https://registry.npmjs.org/react-qr-reader/-/react-qr-reader-1.0.0.tgz", - "integrity": "sha512-BZih016uN+76uu2iL0713654fmHuXWFCIYo2Wjl40kQgo/RJmtQD60kRqDBnduGKnN9KO233FlAwNm9ucVFeGw==", + "version": "3.0.0-beta-1", + "resolved": "https://registry.npmjs.org/react-qr-reader/-/react-qr-reader-3.0.0-beta-1.tgz", + "integrity": "sha512-5HeFH9x/BlziRYQYGK2AeWS9WiKYZtGGMs9DXy3bcySTX3C9UJL9EwcPnWw8vlf7JP4FcrAlr1SnZ5nsWLQGyw==", "dependencies": { - "jsqr": "^0.2.1", - "webrtc-adapter": "^2.0.8" + "@zxing/browser": "0.0.7", + "@zxing/library": "^0.18.3", + "rollup": "^2.67.2" }, "peerDependencies": { - "react": "^15.0.2", - "react-dom": "^15.0.2" + "react": "^16.8.0 || ^17.0.0", + "react-dom": "^16.8.0 || ^17.0.0" + } + }, + "node_modules/react-qr-reader/node_modules/rollup": { + "version": "2.79.1", + "resolved": "https://registry.npmjs.org/rollup/-/rollup-2.79.1.tgz", + "integrity": "sha512-uKxbd0IhMZOhjAiD5oAFp7BqvkA4Dv47qpOCtaNvng4HBwdbWtdOh8f5nZNuk2rp51PMGk3bzfWu5oayNEuYnw==", + "bin": { + "rollup": "dist/bin/rollup" + }, + "engines": { + "node": ">=10.0.0" + }, + "optionalDependencies": { + "fsevents": "~2.3.2" } }, "node_modules/react-refresh": { @@ -3528,11 +3568,6 @@ "loose-envify": "^1.1.0" } }, - "node_modules/sdp": { - "version": "1.5.4", - "resolved": "https://registry.npmjs.org/sdp/-/sdp-1.5.4.tgz", - "integrity": "sha512-9x0+fpJHW2bbqtIktmL+H9m+BswgurPVPhWrur4cCZPDWDSsdGYvRBaKhDXlnNCD1b/Xi8cOTG2u703CTQuwgg==" - }, "node_modules/semver": { "version": "6.3.1", "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.1.tgz", @@ -3708,6 +3743,14 @@ "node": ">=8.0" } }, + "node_modules/ts-custom-error": { + "version": "3.3.1", + "resolved": "https://registry.npmjs.org/ts-custom-error/-/ts-custom-error-3.3.1.tgz", + "integrity": "sha512-5OX1tzOjxWEgsr/YEUWSuPrQ00deKLh6D7OTWcvNHm12/7QPyRh8SYpyWvA4IZv8H/+GQWQEh/kwo95Q9OVW1A==", + "engines": { + "node": ">=14.0.0" + } + }, "node_modules/ts-interface-checker": { "version": "0.1.13", "resolved": "https://registry.npmjs.org/ts-interface-checker/-/ts-interface-checker-0.1.13.tgz", @@ -3846,17 +3889,6 @@ "vite": "^2 || ^3 || ^4" } }, - "node_modules/webrtc-adapter": { - "version": "2.1.0", - "resolved": "https://registry.npmjs.org/webrtc-adapter/-/webrtc-adapter-2.1.0.tgz", - "integrity": "sha512-i38RPNdm68QS6jQFWDuYEOLv5HvWE0Hz99eePd7Nk/c3FmhFUR6zNyfhASdPewm2u1tMfHkRTx9cAZyq3prRlA==", - "dependencies": { - "sdp": "^1.0.0" - }, - "engines": { - "npm": "^3.10.0" - } - }, "node_modules/wrappy": { "version": "1.0.2", "resolved": "https://registry.npmjs.org/wrappy/-/wrappy-1.0.2.tgz", diff --git a/package.json b/package.json index d508354..1bf80cc 100644 --- a/package.json +++ b/package.json @@ -31,6 +31,6 @@ "react-barcode": "^1.4.6", "react-html5-camera-photo": "^1.5.11", "react-qr-code": "^2.0.12", - "react-qr-reader": "^1.0.0" + "react-qr-reader": "^3.0.0-beta-1" } } diff --git a/resources/js/Components/QRCodeScanner.jsx b/resources/js/Components/QRCodeScanner.jsx index 2ff343e..fe86f2e 100644 --- a/resources/js/Components/QRCodeScanner.jsx +++ b/resources/js/Components/QRCodeScanner.jsx @@ -1,67 +1,112 @@ -import React, { useState, useCallback } from "react"; -import { QrReader } from "react-qr-reader"; - -const QRCodeScanner = () => { - const [selected, setSelected] = useState("environment"); - const [startScan, setStartScan] = useState(false); - const [loadingScan, setLoadingScan] = useState(false); - const [data, setData] = useState(""); - - const handleScan = useCallback( - (scanData) => { - setLoadingScan(true); - console.log("Scanned Data:", scanData); - if (scanData) { - setData(scanData); - setStartScan(false); - setLoadingScan(false); +import { Button, Typography } from "@mui/material"; +import React, { useEffect, useRef } from "react"; // Import useRef +// import "./styles.css"; // Import your CSS file + +function QRCodeScanner() { + const videoRef = useRef(null); // Create a ref for the video element + + useEffect(() => { + const qrcode = window.qrcode; + + const canvasElement = document.getElementById("qr-canvas"); + const canvas = canvasElement.getContext("2d"); + + const qrResult = document.getElementById("qr-result"); + const outputData = document.getElementById("outputData"); + const btnScanQR = document.getElementById("btn-scan-qr"); + + let scanning = false; + + qrcode.callback = (res) => { + if (res) { + outputData.innerText = res; + scanning = false; + + if (videoRef.current) { + const stream = videoRef.current.srcObject; + const tracks = stream.getTracks(); + + tracks.forEach((track) => { + track.stop(); + }); + } + + qrResult.hidden = false; + canvasElement.hidden = true; + btnScanQR.hidden = false; } - }, - [setData, setStartScan, setLoadingScan] - ); + }; - const handleError = (err) => { - console.error(err); + btnScanQR.onclick = () => { + navigator.mediaDevices + .getUserMedia({ video: { facingMode: "environment" } }) + .then(function (stream) { + scanning = true; + qrResult.hidden = true; + btnScanQR.hidden = true; + canvasElement.hidden = false; + if (videoRef.current) { + videoRef.current.setAttribute("playsinline", true); + videoRef.current.srcObject = stream; + videoRef.current.play(); + tick(); + scan(); + } + }); + }; + + function tick() { + if (videoRef.current) { + canvasElement.width = 400; // Set your desired width here + canvasElement.height = 300; // Set your desired height here + canvas.drawImage( + videoRef.current, + 0, + 0, + canvasElement.width, + canvasElement.height + ); + + scanning && requestAnimationFrame(tick); + } + } + + function scan() { + try { + qrcode.decode(); + } catch (e) { + setTimeout(scan, 300); + } + } + }, []); + + const style = { + backgroundColor: "green", }; return ( -
-

QR Code Scanner

-

Last Scan: {selected}

- - - {startScan && ( - <> - - - - )} - {loadingScan &&

Loading

} - {data !== "" &&

{data}

} +
+ + + + + + + + +
+ +
); -}; +} export default QRCodeScanner; diff --git a/resources/views/app.blade.php b/resources/views/app.blade.php index 72a052a..764e8ed 100644 --- a/resources/views/app.blade.php +++ b/resources/views/app.blade.php @@ -11,6 +11,8 @@ + + From 3f6ba137492929a6d16e00c1e3e66b85b58bcfde Mon Sep 17 00:00:00 2001 From: Jhunriz Date: Wed, 13 Sep 2023 16:14:16 +0800 Subject: [PATCH 036/182] add-qr-code-scanner --- resources/js/Components/QRCodeScanner.jsx | 14 +++++++++----- 1 file changed, 9 insertions(+), 5 deletions(-) diff --git a/resources/js/Components/QRCodeScanner.jsx b/resources/js/Components/QRCodeScanner.jsx index fe86f2e..de83337 100644 --- a/resources/js/Components/QRCodeScanner.jsx +++ b/resources/js/Components/QRCodeScanner.jsx @@ -1,5 +1,6 @@ import { Button, Typography } from "@mui/material"; import React, { useEffect, useRef } from "react"; // Import useRef + // import "./styles.css"; // Import your CSS file function QRCodeScanner() { @@ -80,10 +81,6 @@ function QRCodeScanner() { } }, []); - const style = { - backgroundColor: "green", - }; - return (
@@ -92,8 +89,15 @@ function QRCodeScanner() { -