Skip to content

Commit 2003d43

Browse files
JhunrizJhunriz
committed
arrange the equipment page arrange the table
1 parent 2bc423c commit 2003d43

File tree

1 file changed

+129
-20
lines changed

1 file changed

+129
-20
lines changed

‎resources/js/Pages/Admin/Equipment/Index.jsx

Lines changed: 129 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -1,40 +1,55 @@
11
import ShippingCard from "@/Components/Card";
22
import MainLayout from "@/Layouts/MainLayout";
33
import {
4-
Autocomplete,
54
Avatar,
6-
Button,
5+
Box,
76
Card,
8-
FormControl,
9-
InputLabel,
10-
MenuItem,
11-
Select,
12-
TextField,
7+
IconButton,
8+
ListItem,
9+
ListItemAvatar,
10+
Menu,
11+
Tooltip,
12+
Typography,
1313
} from "@mui/material";
14-
import React from "react";
14+
import React, { useState } from "react";
1515
import MUIDataTable from "mui-datatables";
16-
import TransitionsModal from "@/Components/Modal";
17-
import ReusableModal from "@/Components/Modal";
18-
import AddSharpIcon from "@mui/icons-material/AddSharp";
19-
import BasicTextFields from "@/Components/InputField";
20-
import CustomizedSnackbars from "@/Components/CustomizeSnackBar";
2116
import CustomBreadcrumbs from "@/Components/CustomBreadcrumbs";
2217
import HomeIcon from "@mui/icons-material/Home";
23-
import WhatshotIcon from "@mui/icons-material/Whatshot";
24-
import GrainIcon from "@mui/icons-material/Grain";
2518
import { Link } from "@inertiajs/react";
2619
import InventorySharpIcon from "@mui/icons-material/InventorySharp";
2720
import EastIcon from "@mui/icons-material/East";
21+
import AddIcon from "@mui/icons-material/Add";
22+
import SyncAltIcon from "@mui/icons-material/SyncAlt";
23+
import DeleteForeverIcon from "@mui/icons-material/DeleteForever";
24+
import MoreVertIcon from "@mui/icons-material/MoreVert";
2825

2926
export default function Index({ auth, mustVerifyEmail, status, equipments }) {
27+
const [messageEl, setmessageEl] = useState(null);
28+
29+
const MessagehandleClick = (event) => {
30+
setmessageEl(event.currentTarget);
31+
};
32+
33+
const MessagehandleClose = () => {
34+
setmessageEl(null);
35+
};
3036
const data = equipments.map((equipments) => [
3137
equipments.id,
3238
equipments.equipments,
33-
<div className="flex justify-end pr-5">
34-
<Link href={route("dashboard")}>
35-
<EastIcon />
36-
</Link>
37-
</div>, // Replace 'insert_icon_name_here' with the actual icon name
39+
<div className="flex justify-end pr-5" key={equipments.id}>
40+
<Tooltip title="Account settings">
41+
<IconButton
42+
onClick={MessagehandleClick} // Make sure you have defined MessagehandleClick function
43+
size="medium"
44+
sx={{ ml: 2 }}
45+
aria-controls={messageEl ? "account-menu" : undefined}
46+
aria-haspopup="true"
47+
aria-expanded={messageEl ? "true" : undefined}
48+
>
49+
<MoreVertIcon />
50+
</IconButton>
51+
</Tooltip>
52+
</div>,
3853
]);
3954

4055
const columns = ["ID", "Categories", ""];
@@ -78,6 +93,100 @@ export default function Index({ auth, mustVerifyEmail, status, equipments }) {
7893
<div className="pb-10">
7994
<CustomBreadcrumbs items={breadcrumbItems} />
8095
</div>
96+
<div>
97+
{/* account menu start */}
98+
<Box
99+
sx={{
100+
display: "flex",
101+
alignItems: "center",
102+
textAlign: "center",
103+
}}
104+
>
105+
<div className="flex justify-center items-center">
106+
<div>
107+
<Menu
108+
id="account-menu"
109+
anchorEl={messageEl}
110+
open={Boolean(messageEl)}
111+
onClose={MessagehandleClose}
112+
PaperProps={{
113+
elevation: 0,
114+
sx: {
115+
overflow: "visible",
116+
filter: "drop-shadow(0px 2px 8px rgba(0,0,0,0.202))",
117+
mt: 1.5,
118+
"& .MuiAvatar-root": {
119+
width: 32,
120+
height: 32,
121+
ml: -0.0,
122+
mr: 2,
123+
},
124+
"&:before": {
125+
content: '""',
126+
display: "block",
127+
position: "absolute",
128+
top: 0,
129+
right: 14,
130+
width: 10,
131+
height: 10,
132+
bgcolor: "background.paper",
133+
transform:
134+
"translateY(-50%) rotate(45deg)",
135+
zIndex: 0,
136+
},
137+
},
138+
}}
139+
transformOrigin={{
140+
horizontal: "right",
141+
vertical: "top",
142+
}}
143+
anchorOrigin={{
144+
horizontal: "right",
145+
vertical: "bottom",
146+
}}
147+
>
148+
{/* <MessageNotification /> */}
149+
<Link href={route("equipment.create")}>
150+
<ListItem>
151+
<ListItemAvatar>
152+
<Avatar>
153+
<AddIcon />
154+
</Avatar>
155+
</ListItemAvatar>
156+
<Typography variant="subtitle2">
157+
Create
158+
</Typography>
159+
</ListItem>
160+
</Link>
161+
<Link href={route("branch.create")}>
162+
<ListItem>
163+
<ListItemAvatar>
164+
<Avatar>
165+
<SyncAltIcon />
166+
</Avatar>
167+
</ListItemAvatar>
168+
<Typography variant="subtitle2">
169+
Update
170+
</Typography>
171+
</ListItem>
172+
</Link>
173+
<Link href={route("branch.create")}>
174+
<ListItem>
175+
<ListItemAvatar>
176+
<Avatar>
177+
<DeleteForeverIcon />
178+
</Avatar>
179+
</ListItemAvatar>
180+
<Typography variant="subtitle2">
181+
Delete
182+
</Typography>
183+
</ListItem>
184+
</Link>
185+
</Menu>
186+
</div>
187+
</div>
188+
</Box>
189+
</div>
81190
<div className="py-6 overflow-x-auto max-w-[370px] lg:max-h-[100%] lg:max-w-[100%] max-h-[500px] sm:max-h-[auto]">
82191
<div className="sm:hidden">
83192
{/* Mobile View */}

0 commit comments

Comments
 (0)