Skip to content

Commit 7a07ceb

Browse files
MiftahulH23MiftahulH23
committed
create admin & supplier
1 parent 7d34d34 commit 7a07ceb

24 files changed

+828
-37
lines changed

‎tim9/frontend/src/App.jsx‎

Lines changed: 73 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -1,37 +1,88 @@
1-
import * as React from 'react';
2-
import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
3-
import Header from './components/Header';
4-
import Footer from './components/Footer';
5-
import { MenuCard, TestimoniCard } from './components/Card';
6-
import Home from './pages/customer/Home';
7-
import Product from './pages/customer/Product';
8-
import Cart from './pages/customer/Cart';
9-
import Payment from './pages/customer/Payment';
1+
import * as React from "react";
2+
import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
3+
import Footer from "./components/Footer";
4+
import { MenuCard, TestimoniCard } from "./components/Card";
5+
import Home from "./pages/customer/Home";
6+
import Product from "./pages/customer/Product";
7+
import Cart from "./pages/customer/Cart";
8+
import Payment from "./pages/customer/Payment";
9+
import HeaderAdmin from "./components/HeaderAdmin";
10+
import Sidebar from "./components/Sidebar";
11+
import Dashboard from "./pages/admin/Dashboard";
12+
import DashboardSupplier from "./pages/supplier/DashboardSupplier";
13+
import Pesanan from "./pages/admin/Pesanan";
14+
import Supplier from "./pages/admin/Supplier";
15+
import Calender from "./pages/admin/Calender";
16+
import { DataProduct } from "./pages/admin/DataProduct";
17+
import HeaderSupplier from "./components/HeaderSupplier";
18+
import SidebarSupplier from "./components/SidebarSupplier";
19+
import BahanBaku from "./pages/supplier/BahanBaku";
20+
import Permintaan from "./pages/supplier/Permintaan";
21+
import Form from "./pages/supplier/Form";
1022
function App() {
1123
// login state
12-
const [isLogin, setIsLogin] = React.useState(false);
24+
const [isLogin, setIsLogin] = React.useState(true);
1325
const handleLogin = () => setIsLogin(!isLogin);
1426

1527
// user state
16-
const [user, setUser] = React.useState();
28+
const [user, setUser] = React.useState("supplier");
1729
const handleUser = (id) => setUser(id);
18-
30+
1931
return (
32+
// <div className="flex">
33+
// <div>
34+
// <p>ahhahaahha</p>
35+
// </div>
36+
// <div className="flex-auto">
37+
// <HeaderAdmin />
38+
// </div>
39+
// </div>
2040
<Router>
2141
{!isLogin ? (
2242
<>
23-
<Routes>
24-
<Route path='/' element={<Home />} />
25-
<Route path='/product' element={<Product />} />
26-
<Route path='/cart' element={<Cart />} />
27-
<Route path='/payment' element={<Payment />} />
28-
</Routes>
29-
43+
<Routes>
44+
<Route path="/" element={<Home />} />
45+
<Route path="/product" element={<Product />} />
46+
<Route path="/cart" element={<Cart />} />
47+
<Route path="/payment" element={<Payment />} />
48+
</Routes>
3049
</>
3150
) : (
32-
<>
33-
34-
</>
51+
<div className="w-full h-screen flex">
52+
{user === "admin" ? (
53+
<Sidebar user={user} />
54+
):(<SidebarSupplier />)}
55+
<div className="flex-auto h-screen overflow-y-scroll bg-[#f5f5f5]">
56+
{user === "admin" ? (
57+
<HeaderAdmin />
58+
):(<HeaderSupplier />)}
59+
<Routes>
60+
{user === "admin" ? (
61+
<>
62+
<Route path="/dashboard" element={<Dashboard />} />
63+
<Route path="/pesanan" element={<Pesanan />} />
64+
<Route path="/supplier" element={<Supplier />} />
65+
<Route path="/calender" element={<Calender />} />
66+
<Route path="/product" element={<DataProduct />} />
67+
</>
68+
) :user === "supplier"? (
69+
<>
70+
<Route path="/dashboard-suplier" element={<DashboardSupplier />} />
71+
<Route path="/bahanbaku" element={<BahanBaku />} />
72+
<Route path="/permintaan" element={<Permintaan />} />
73+
<Route path="/form" element={<Form />} />
74+
</>
75+
): (
76+
<>
77+
{/* <Route path="/" element={<Beranda />} />
78+
<Route path="/menu" element={<Menu />} />
79+
<Route path="/pesanan" element={<PesananSaya />} />
80+
<Route path="/tentang" element={<TentangKami />} /> */}
81+
</>
82+
)}
83+
</Routes>
84+
</div>
85+
</div>
3586
)}
3687
</Router>
3788
);

‎tim9/frontend/src/assets/img/Vector1.png‎

1.02 KB
Loading

‎tim9/frontend/src/assets/img/Vector2.png‎

1.33 KB
Loading

‎tim9/frontend/src/assets/img/Vector3.png‎

2.27 KB
Loading

‎tim9/frontend/src/assets/img/Vector4.png‎

3.45 KB
Loading

‎tim9/frontend/src/assets/img/darhboard.png‎

270 Bytes
Loading

‎tim9/frontend/src/components/Card.jsx‎

Lines changed: 55 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,13 @@
1-
import Menu1 from "../assets/img/menu1.png";
21
import { Star } from "./Svg";
32

4-
export const MenuCard = ({img,menu,desc}) => {
3+
export const MenuCard = ({ img, menu, desc }) => {
54
return (
65
<div className="w- flex flex-col items-center px-10 py-10 bg-white rounded-lg shadow-lg relative gap-6 ">
76
<img src={img} alt="" className="w-40 aspect-square bg-contain" />
87
<div className="w-full h-px bg-slate-500 px-10"></div>
98
<div>
109
<p className="font-bold text-xl">{menu}</p>
11-
<p className="text-[#333333]">
12-
{desc}
13-
</p>
10+
<p className="text-[#333333]">{desc}</p>
1411
</div>
1512
<button className="px-10 py-2 rounded-xl bg-button absolute -bottom-5 left-1/2 -translate-x-1/2 text-white">
1613
Order Now
@@ -19,7 +16,7 @@ export const MenuCard = ({img,menu,desc}) => {
1916
);
2017
};
2118

22-
export const TestimoniCard = ({img,coment,name}) => {
19+
export const TestimoniCard = ({ img, coment, name }) => {
2320
return (
2421
<div className="w- flex flex-col items-center px-10 py-10 bg-white rounded-lg shadow-lg relative gap-3 ">
2522
<img
@@ -41,3 +38,55 @@ export const TestimoniCard = ({img,coment,name}) => {
4138
</div>
4239
);
4340
};
41+
42+
export const CardInfo = ({ img, judul, desc }) => {
43+
return (
44+
<div className="bg-white aspect-[8/3] grid grid-cols-2 items-center rounded-lg py-7">
45+
<div className="w-10 aspect-square flex mx-auto">
46+
<img src={img} alt="" className="w-full h-full object-contain" />
47+
</div>
48+
<div>
49+
<p className="text-sm">{judul}</p>
50+
<p className="text-xl font-bold">{desc}</p>
51+
</div>
52+
</div>
53+
);
54+
};
55+
56+
export const SupplierCard = ({img,nama,desc}) => {
57+
return (
58+
<div className="aspect-[6/5] rounded-lg bg-white flex flex-col gap-4 items-center justify-center">
59+
<div className="bg-slate-400 w-16 h-16 rounded-full overflow-hidden">
60+
<img src={img} alt="" className="w-full h-full object-cover" />
61+
</div>
62+
<p className="text-xl font-bold text-darkblue">{nama}</p>
63+
<p className="text-sm text-slate-400">{desc}</p>
64+
<div className="flex justify-center items-center gap-2">
65+
<div className="flex bg-darkblue justify-center items-center w-6 h-6 rounded-full stroke-white">
66+
<svg
67+
xmlns="http://www.w3.org/2000/svg"
68+
width="16"
69+
height="16"
70+
fill="currentColor"
71+
class="bi bi-telephone"
72+
viewBox="0 0 16 16"
73+
>
74+
<path d="M3.654 1.328a.678.678 0 0 0-1.015-.063L1.605 2.3c-.483.484-.661 1.169-.45 1.77a17.568 17.568 0 0 0 4.168 6.608 17.569 17.569 0 0 0 6.608 4.168c.601.211 1.286.033 1.77-.45l1.034-1.034a.678.678 0 0 0-.063-1.015l-2.307-1.794a.678.678 0 0 0-.58-.122l-2.19.547a1.745 1.745 0 0 1-1.657-.459L5.482 8.062a1.745 1.745 0 0 1-.46-1.657l.548-2.19a.678.678 0 0 0-.122-.58L3.654 1.328zM1.884.511a1.745 1.745 0 0 1 2.612.163L6.29 2.98c.329.423.445.974.315 1.494l-.547 2.19a.678.678 0 0 0 .178.643l2.457 2.457a.678.678 0 0 0 .644.178l2.189-.547a1.745 1.745 0 0 1 1.494.315l2.306 1.794c.829.645.905 1.87.163 2.611l-1.034 1.034c-.74.74-1.846 1.065-2.877.702a18.634 18.634 0 0 1-7.01-4.42 18.634 18.634 0 0 1-4.42-7.009c-.362-1.03-.037-2.137.703-2.877L1.885.511z" />
75+
</svg>
76+
</div>
77+
<div className="flex bg-darkblue justify-center items-center w-6 h-6 rounded-full stroke-white">
78+
<svg
79+
xmlns="http://www.w3.org/2000/svg"
80+
width="16"
81+
height="16"
82+
fill="currentColor"
83+
class="bi bi-envelope"
84+
viewBox="0 0 16 16"
85+
>
86+
<path d="M0 4a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V4Zm2-1a1 1 0 0 0-1 1v.217l7 4.2 7-4.2V4a1 1 0 0 0-1-1H2Zm13 2.383-4.708 2.825L15 11.105V5.383Zm-.034 6.876-5.64-3.471L8 9.583l-1.326-.795-5.64 3.47A1 1 0 0 0 2 13h12a1 1 0 0 0 .966-.741ZM1 11.105l4.708-2.897L1 5.383v5.722Z" />
87+
</svg>
88+
</div>
89+
</div>
90+
</div>
91+
);
92+
};

‎tim9/frontend/src/components/HeaderAdmin.jsx‎

Lines changed: 38 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
import React from "react";
2+
import { List } from "./Svg";
3+
import DashboardIcon from "../assets/img/darhboard.png";
4+
import Logo from "../assets/img/logo-usr.svg";
5+
import { NavLink } from "react-router-dom";
6+
const HeaderAdmin = ({ user }) => {
7+
return (
8+
<div className="flex px-7 py-5 justify-between items-center">
9+
<div className="w-72">
10+
<input
11+
type="text"
12+
placeholder="Search"
13+
className="px-4 py-2 w-full h-full border-2"
14+
/>
15+
</div>
16+
<div className="flex gap-2">
17+
<div className="bg-white rounded-full mr-8 w-12 h-12 flex items-center justify-center">
18+
<svg
19+
xmlns="http://www.w3.org/2000/svg"
20+
fill="currentColor"
21+
class="bi bi-gear w-6 h-6"
22+
viewBox="0 0 16 16"
23+
>
24+
<path d="M8 4.754a3.246 3.246 0 1 0 0 6.492 3.246 3.246 0 0 0 0-6.492zM5.754 8a2.246 2.246 0 1 1 4.492 0 2.246 2.246 0 0 1-4.492 0z" />
25+
<path d="M9.796 1.343c-.527-1.79-3.065-1.79-3.592 0l-.094.319a.873.873 0 0 1-1.255.52l-.292-.16c-1.64-.892-3.433.902-2.54 2.541l.159.292a.873.873 0 0 1-.52 1.255l-.319.094c-1.79.527-1.79 3.065 0 3.592l.319.094a.873.873 0 0 1 .52 1.255l-.16.292c-.892 1.64.901 3.434 2.541 2.54l.292-.159a.873.873 0 0 1 1.255.52l.094.319c.527 1.79 3.065 1.79 3.592 0l.094-.319a.873.873 0 0 1 1.255-.52l.292.16c1.64.893 3.434-.902 2.54-2.541l-.159-.292a.873.873 0 0 1 .52-1.255l.319-.094c1.79-.527 1.79-3.065 0-3.592l-.319-.094a.873.873 0 0 1-.52-1.255l.16-.292c.893-1.64-.902-3.433-2.541-2.54l-.292.159a.873.873 0 0 1-1.255-.52l-.094-.319zm-2.633.283c.246-.835 1.428-.835 1.674 0l.094.319a1.873 1.873 0 0 0 2.693 1.115l.291-.16c.764-.415 1.6.42 1.184 1.185l-.159.292a1.873 1.873 0 0 0 1.116 2.692l.318.094c.835.246.835 1.428 0 1.674l-.319.094a1.873 1.873 0 0 0-1.115 2.693l.16.291c.415.764-.42 1.6-1.185 1.184l-.291-.159a1.873 1.873 0 0 0-2.693 1.116l-.094.318c-.246.835-1.428.835-1.674 0l-.094-.319a1.873 1.873 0 0 0-2.692-1.115l-.292.16c-.764.415-1.6-.42-1.184-1.185l.159-.291A1.873 1.873 0 0 0 1.945 8.93l-.319-.094c-.835-.246-.835-1.428 0-1.674l.319-.094A1.873 1.873 0 0 0 3.06 4.377l-.16-.292c-.415-.764.42-1.6 1.185-1.184l.292.159a1.873 1.873 0 0 0 2.692-1.115l.094-.319z" />
26+
</svg>
27+
</div>
28+
<div>
29+
<p className="text-lg">Shiren</p>
30+
<p className="text-sm">Admin</p>
31+
</div>
32+
<img src={Logo} alt="" />
33+
</div>
34+
</div>
35+
);
36+
};
37+
38+
export default HeaderAdmin;

‎tim9/frontend/src/components/HeaderSupplier.jsx‎

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
import React from "react";
2+
import { List } from "./Svg";
3+
4+
const HeaderSupplier = () => {
5+
return (
6+
<div className="bg-[#d4b98f] py-5 flex justify-between items-center px-4">
7+
<div>
8+
<List />
9+
</div>
10+
<div className="flex gap-3 items-center">
11+
<svg
12+
xmlns="http://www.w3.org/2000/svg"
13+
fill="currentColor"
14+
class="bi bi-person-fill w-6 h-6"
15+
viewBox="0 0 16 16"
16+
>
17+
<path d="M3 14s-1 0-1-1 1-4 6-4 6 3 6 4-1 1-1 1H3Zm5-6a3 3 0 1 0 0-6 3 3 0 0 0 0 6Z" />
18+
</svg>
19+
<p>Pt.ABC</p>
20+
</div>
21+
</div>
22+
);
23+
};
24+
25+
export default HeaderSupplier;

‎tim9/frontend/src/components/Sidebar.jsx‎

Lines changed: 70 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,70 @@
1+
import React from "react";
2+
import DashboardIcon from '../assets/img/darhboard.png'
3+
import Logo from '../assets/img/logo.png'
4+
import { NavLink } from "react-router-dom";
5+
const Sidebar = ({user}) => {
6+
const Menu = {
7+
admin: [
8+
["Dashboard", "/dashboard"],
9+
["Pesanan", "/pesanan"],
10+
["Supplier", "/supplier"],
11+
["Calender", "/calender"],
12+
["Product", "/product"],
13+
],
14+
supplier: [
15+
["Dashboard", "/dashboard-supplier"],
16+
["Bahan Baku", "/bahanbaku"],
17+
["Permintaan", "/permintaan"],
18+
],
19+
};
20+
return (
21+
<div className="bg-[#a9752a] flex-none flex flex-col items-center w-[15%] h-screen px-5 py-20">
22+
<img src={Logo} alt="" className="w-[100%]" />
23+
<ul className="flex flex-col gap-3 mt-20">
24+
{Menu[user].map(([name, path], i) => (
25+
<li key={i}>
26+
<NavLink
27+
to={path}
28+
className={({ isActive }) =>
29+
isActive ? "text-hijau stroke-hijau" : "text-black stroke-black"
30+
}
31+
>
32+
<div className="flex gap-3 items-center text-white">
33+
{user === "admin"
34+
? (() => {
35+
switch (name) {
36+
case "Dashboard":
37+
return <img src={DashboardIcon} alt="" className="w-5 h-5" />
38+
case "Pesanan":
39+
return <img src={DashboardIcon} alt="" className="w-5 h-5" />
40+
case "Supplier":
41+
return <img src={DashboardIcon} alt="" className="w-5 h-5" />
42+
case "Calender":
43+
return <img src={DashboardIcon} alt="" className="w-5 h-5" />
44+
case "Product":
45+
return <img src={DashboardIcon} alt="" className="w-5 h-5" />
46+
default:
47+
return null;
48+
}
49+
})()
50+
: (() => {
51+
switch (name) {
52+
case "Dashboard":
53+
return <img src={DashboardIcon} alt="" className="w-5 h-5" />
54+
case "Bahan Baku":
55+
return <img src={DashboardIcon} alt="" className="w-5 h-5" />
56+
case "Permintaan":
57+
return <img src={DashboardIcon} alt="" className="w-5 h-5" />
58+
}
59+
})()}
60+
<span>{name}</span>
61+
</div>
62+
</NavLink>
63+
</li>
64+
))}
65+
</ul>
66+
</div>
67+
);
68+
};
69+
70+
export default Sidebar;

0 commit comments

Comments
 (0)