1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
|
import AppBar from "../../components/AppBar";
import Layout from "../../components/Layout";
import Link from "../../components/Link";
import { useAuth } from "../../helpers/auth";
import {
ArrowRightOnRectangleIcon,
ChatBubbleLeftRightIcon,
ChevronRightIcon,
ClipboardDocumentIcon,
ClipboardIcon,
ClockIcon,
DocumentArrowDownIcon,
MapIcon,
PaperClipIcon,
PencilSquareIcon,
QuestionMarkCircleIcon,
ReceiptPercentIcon,
UserIcon
} from "@heroicons/react/24/outline";
const activityMenus = [
{ icon: (<ReceiptPercentIcon className="w-5" />), name: 'Daftar Transaksi', url: '/my/profile' },
{ icon: (<ClipboardIcon className="w-5" />), name: 'Penawaran Harga', url: '/my/profile' },
{ icon: (<ClockIcon className="w-5" />), name: 'Purchase Order', url: '/my/profile' },
{ icon: (<DocumentArrowDownIcon className="w-5" />), name: 'Faktur Penjualan', url: '/my/profile' },
{ icon: (<PaperClipIcon className="w-5" />), name: 'Faktur Pajak', url: '/my/profile' },
{ icon: (<ClipboardDocumentIcon className="w-5" />), name: 'Surat Jalan', url: '/my/profile' }
];
const serviceMenus = [
{ icon: (<ChatBubbleLeftRightIcon className="w-5"/>), name: 'Customer Support', url: '/my/profile' },
{ icon: (<QuestionMarkCircleIcon className="w-5"/>), name: 'F.A.Q', url: '/my/profile' },
];
const settingMenus = [
{ icon: (<MapIcon className="w-5" />),name: 'Daftar Alamat', url: '/my/profile' },
{ icon: (<ArrowRightOnRectangleIcon className="w-5" />),name: 'Keluar Akun', url: '/logout' },
];
export default function MyMenu() {
const [auth, setAuth] = useAuth();
return (
<>
<Layout>
<AppBar title="Menu Utama" />
<div className="p-4 flex gap-x-2 items-center">
<div className="flex-1 flex gap-x-3 items-center">
<div className="p-2 bg-gray_r-4 rounded-full h-fit">
<UserIcon className="w-6" />
</div>
<div>
<h2>{ auth.name }</h2>
<div className="badge-red font-normal text-xs">Akun Bisnis</div>
</div>
</div>
<Link href="/my/profile">
<PencilSquareIcon className="w-6 text-yellow_r-12"/>
</Link>
</div>
<div className="px-4 mt-4">
<p className="font-medium mb-2">Aktivitas Pembelian</p>
<div className="flex flex-col mb-6">
{ activityMenus.map((menu, index) => (
<Link href={menu.url} className="text-gray_r-11 font-normal flex gap-x-2 items-center py-4 border-b border-gray_r-6" key={index}>
<span className="flex gap-x-2">
{ menu.icon }
{ menu.name }
</span>
<ChevronRightIcon className="w-5 ml-auto"/>
</Link>
)) }
</div>
<p className="font-medium mb-2">Pusat Bantuan</p>
<div className="flex flex-col mb-6">
{ serviceMenus.map((menu, index) => (
<Link href={menu.url} className="text-gray_r-11 font-normal flex gap-x-2 items-center py-4 border-b border-gray_r-6" key={index}>
<span className="flex gap-x-2">
{ menu.icon }
{ menu.name }
</span>
<ChevronRightIcon className="w-5 ml-auto"/>
</Link>
)) }
</div>
<p className="font-medium mb-2">Pengaturan Akun</p>
<div className="flex flex-col mb-6">
{ settingMenus.map((menu, index) => (
<Link href={menu.url} className="text-gray_r-11 font-normal flex gap-x-2 items-center py-4 border-b border-gray_r-6" key={index}>
<span className="flex gap-x-2">
{ menu.icon }
{ menu.name }
</span>
<ChevronRightIcon className="w-5 ml-auto"/>
</Link>
)) }
</div>
</div>
</Layout>
</>
);
}
|
