diff --git a/Client/package-lock.json b/Client/package-lock.json index 454b381c9..1ca169357 100644 --- a/Client/package-lock.json +++ b/Client/package-lock.json @@ -13,6 +13,7 @@ "@fontsource/roboto": "^5.0.13", "@mui/icons-material": "^5.15.16", "@mui/material": "^5.15.16", + "@mui/x-data-grid": "7.3.2", "react": "^18.2.0", "react-dom": "^18.2.0", "react-router": "^6.23.0", @@ -1338,6 +1339,31 @@ "resolved": "https://registry.npmjs.org/react-is/-/react-is-18.3.1.tgz", "integrity": "sha512-/LLMVyas0ljjAtoYiPqYiL8VWXzUUdThrmU5+n20DZv+a+ClRoevUzw5JxU+Ieh5/c87ytoTBV9G1FiKfNJdmg==" }, + "node_modules/@mui/x-data-grid": { + "version": "7.3.2", + "resolved": "https://registry.npmjs.org/@mui/x-data-grid/-/x-data-grid-7.3.2.tgz", + "integrity": "sha512-seuRiZ2yyhzeUa7Thzap0xvvizGPSEwJRNOjY9kffjUr+0iXGF3PZGEsMoJ7jCjZ2peHX7FjfqBdssDvizxIDQ==", + "dependencies": { + "@babel/runtime": "^7.24.0", + "@mui/system": "^5.15.14", + "@mui/utils": "^5.15.14", + "clsx": "^2.1.0", + "prop-types": "^15.8.1", + "reselect": "^4.1.8" + }, + "engines": { + "node": ">=14.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/mui-org" + }, + "peerDependencies": { + "@mui/material": "^5.15.14", + "react": "^17.0.0 || ^18.0.0", + "react-dom": "^17.0.0 || ^18.0.0" + } + }, "node_modules/@nodelib/fs.scandir": { "version": "2.1.5", "resolved": "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz", @@ -4213,6 +4239,11 @@ "url": "https://github.com/sponsors/ljharb" } }, + "node_modules/reselect": { + "version": "4.1.8", + "resolved": "https://registry.npmjs.org/reselect/-/reselect-4.1.8.tgz", + "integrity": "sha512-ab9EmR80F/zQTMNeneUr4cv+jSwPJgIlvEmVwLerwrWVbpLlBuls9XHzIeTFy4cegU2NHBp3va0LKOzU5qFEYQ==" + }, "node_modules/resolve": { "version": "2.0.0-next.5", "resolved": "https://registry.npmjs.org/resolve/-/resolve-2.0.0-next.5.tgz", diff --git a/Client/package.json b/Client/package.json index f8025f1de..b03852b78 100644 --- a/Client/package.json +++ b/Client/package.json @@ -15,6 +15,7 @@ "@fontsource/roboto": "^5.0.13", "@mui/icons-material": "^5.15.16", "@mui/material": "^5.15.16", + "@mui/x-data-grid": "7.3.2", "react": "^18.2.0", "react-dom": "^18.2.0", "react-router": "^6.23.0", diff --git a/Client/src/App.jsx b/Client/src/App.jsx index 1c388ab5d..b47c3082e 100644 --- a/Client/src/App.jsx +++ b/Client/src/App.jsx @@ -1,24 +1,23 @@ - -import { Routes, Route } from 'react-router-dom' -import './App.css' -import NotFound from './Pages/NotFound' -import Login from './Pages/Login' -import Register from './Pages/Register' -import HomeLayout from './Layouts/HomeLayout' - +import { Routes, Route } from "react-router-dom"; +import "./App.css"; +import NotFound from "./Pages/NotFound"; +import Login from "./Pages/Login"; +import Register from "./Pages/Register"; +import HomeLayout from "./Layouts/HomeLayout"; +import Demo from "./Pages/Demo/Demo"; function App() { return ( <> - } /> - } /> - } /> - } /> + } /> + } /> + } /> + } /> + } /> - ) + ); } -export default App - +export default App; diff --git a/Client/src/Components/Label/BaseLabel.css b/Client/src/Components/Label/BaseLabel.css index 6aed6326d..961e6c128 100644 --- a/Client/src/Components/Label/BaseLabel.css +++ b/Client/src/Components/Label/BaseLabel.css @@ -3,4 +3,5 @@ display: inline-flex; justify-content: center; align-items: center; + line-height: normal; } diff --git a/Client/src/Pages/Demo/Demo.css b/Client/src/Pages/Demo/Demo.css new file mode 100644 index 000000000..e69de29bb diff --git a/Client/src/Pages/Demo/Demo.jsx b/Client/src/Pages/Demo/Demo.jsx new file mode 100644 index 000000000..7d26b8724 --- /dev/null +++ b/Client/src/Pages/Demo/Demo.jsx @@ -0,0 +1,182 @@ +import React from "react"; +import Button from "../../Components/Button"; +import Link from "../../Components/Link"; +import ColoredLabel from "../../Components/Label/ColoredLabel"; +import { + useTheme, + Switch, + Checkbox, + FormControl, + FormLabel, + FormControlLabel, + Radio, + RadioGroup, +} from "@mui/material"; +import StatusLabel from "../../Components/Label/StautsLabel"; +import Avatar from "../../Components/Avatar/Avatar"; +import avatarImage from "../../assets/Images/avatar_placeholder.png"; +import { DataGrid } from "@mui/x-data-grid"; + +const cols = [ + { + field: "name", + headerName: "Name", + renderCell: (params) => { + return ( +
+ +
+ {params.value.firstName} {params.value.lastName} +
+
+ ); + }, + flex: 1, + }, + { + field: "status", + headerName: "Status", + renderCell: (params) => { + return ; + }, + flex: 1, + }, + { field: "role", headerName: "Role", flex: 1 }, + { field: "team", headerName: "Team", flex: 1 }, + { field: "hireDate", headerName: "Hire date", flex: 1 }, +]; + +const rows = ((count) => { + const arr = []; + for (let i = 0; i < count; i++) { + let row = { + id: i, + name: { + avatarImage: i % 2 === 0 ? avatarImage : null, + firstName: "Placeholder Name", + lastName: i, + }, + status: "Active", + role: "Product Designer", + team: "Marketing", + hireDate: new Date().toLocaleDateString(), + }; + arr.push(row); + } + return arr; +})(100); + +const Demo = () => { + const [radio, setRadio] = React.useState(1); + + const handleRadio = (event) => { + setRadio(event.target.value); + }; + + const change = (event, type) => { + alert(event.target.checked ? `${type} checked` : `${type} unchecked`); + }; + + const theme = useTheme(); + return ( +
+

Buttons

+
+
+

Disabled Buttons

+
+
+
+ +
+

Labels

+
+ + + + +
+ +

Status Lables

+
+ + + + +
+

Avatar

+
+ + + + +
+

Switches

+
+ change(event, "Switch")} /> + + + +
+

Checkboxes

+
+ change(event, "Checkbox")} /> + + + +
+

Radio

+
+ + Demo Radio + +
+ } label="1" /> + } label="2" /> + } + label="3" + /> + } + label="4" + /> +
+ + +
+

Table

+
+ +
+
+ ); +}; +export default Demo; diff --git a/Client/src/Pages/Home/index.jsx b/Client/src/Pages/Home/index.jsx index 604051995..28d7d6ac4 100644 --- a/Client/src/Pages/Home/index.jsx +++ b/Client/src/Pages/Home/index.jsx @@ -1,69 +1,11 @@ import DropdownTeamMember from "../../Components/DropdownTeamMember"; import "./index.css"; -import Button from "../../Components/Button"; -import Link from "../../Components/Link"; -import ColoredLabel from "../../Components/Label/ColoredLabel"; -import { useTheme } from "@mui/material"; -import StatusLabel from "../../Components/Label/StautsLabel"; -import Avatar from "../../Components/Avatar/Avatar"; -import avatarImage from "../../assets/Images/avatar_placeholder.png"; const Home = () => { - const theme = useTheme(); return ( <>
Home
-
-

Buttons

-
-
-

Disabled Buttons

-
-
-
- -
-

Labels

-
- - - - -
- -

Status Lables

-
- - - - -
-

Avatar

-
- - - - -
-
); };