summaryrefslogtreecommitdiff
path: root/src/components
diff options
context:
space:
mode:
Diffstat (limited to 'src/components')
-rw-r--r--src/components/layouts/AppBar.js2
-rw-r--r--src/components/layouts/Header.js89
-rw-r--r--src/components/transactions/TransactionStatusBadge.js41
3 files changed, 128 insertions, 4 deletions
diff --git a/src/components/layouts/AppBar.js b/src/components/layouts/AppBar.js
index b4c7703c..c3d38707 100644
--- a/src/components/layouts/AppBar.js
+++ b/src/components/layouts/AppBar.js
@@ -43,7 +43,7 @@ const AppBar = ({ title }) => {
{/* --- Start Icons */}
<div className="flex gap-x-4 items-center">
- <Link href="/">
+ <Link href="/my/wishlist">
<HeartIcon className="w-6 stroke-2 text-gray_r-12"/>
</Link>
<Link href="/">
diff --git a/src/components/layouts/Header.js b/src/components/layouts/Header.js
index 4741905f..bc740810 100644
--- a/src/components/layouts/Header.js
+++ b/src/components/layouts/Header.js
@@ -1,5 +1,5 @@
import Image from "next/image";
-import { useCallback, useEffect, useRef, useState } from "react";
+import { Fragment, useCallback, useEffect, useRef, useState } from "react";
import Head from "next/head";
import { useRouter } from "next/router";
import axios from "axios";
@@ -9,7 +9,9 @@ import {
ShoppingCartIcon,
ChevronRightIcon,
Cog6ToothIcon,
- HeartIcon
+ HeartIcon,
+ ChevronDownIcon,
+ ChevronUpIcon
} from "@heroicons/react/24/outline";
// Helpers
@@ -19,11 +21,11 @@ import Link from "../elements/Link";
// Images
import Logo from "@/images/logo.png";
import greeting from "@/core/utils/greeting";
+import apiOdoo from "@/core/utils/apiOdoo";
const menus = [
{ name: 'Semua Brand', href: '/shop/brands' },
{ name: 'Blog Indoteknik', href: '/' },
- { name: 'Kategori', href: '/' },
];
export default function Header({ title }) {
@@ -71,6 +73,47 @@ export default function Header({ title }) {
}
}
+ const [ isOpenCategory, setOpenCategory ] = useState(false);
+ const [ categories, setCategories ] = useState([]);
+
+ useEffect(() => {
+ const loadCategories = async () => {
+ if (isOpenCategory && categories.length == 0) {
+ let dataCategories = await apiOdoo('GET', '/api/v1/category/tree');
+ dataCategories = dataCategories.map((category) => {
+ category.childs = category.childs.map((child1Category) => {
+ return {
+ ...child1Category,
+ isOpen: false
+ }
+ })
+ return {
+ ...category,
+ isOpen: false
+ }
+ });
+ setCategories(dataCategories);
+ }
+ }
+ loadCategories();
+ }, [ isOpenCategory, categories ]);
+
+ const toggleCategories = (id = 0) => {
+ let newCategories = categories.map((category) => {
+ category.childs = category.childs.map((child1Category) => {
+ return {
+ ...child1Category,
+ isOpen: id == child1Category.id ? !child1Category.isOpen : child1Category.isOpen
+ }
+ })
+ return {
+ ...category,
+ isOpen: id == category.id ? !category.isOpen : category.isOpen
+ }
+ });
+ setCategories(newCategories);
+ }
+
return (
<>
<Head>
@@ -108,6 +151,46 @@ export default function Header({ title }) {
</div>
</Link>
)) }
+ <div className="flex w-full font-normal text-gray_r-11 border-b border-gray_r-6 p-4" onClick={() => setOpenCategory(!isOpenCategory)}>
+ <span>Kategori</span>
+ <div className="ml-auto">
+ { !isOpenCategory && <ChevronDownIcon className="text-gray_r-12 w-5" /> }
+ { isOpenCategory && <ChevronUpIcon className="text-gray_r-12 w-5" /> }
+ </div>
+ </div>
+ { isOpenCategory && categories.map((category) => (
+ <Fragment key={category.id}>
+ <div className="flex w-full text-gray_r-11 border-b border-gray_r-6 px-4 pl-8">
+ <Link href={`/shop/search?category=${category.name}`} className="flex-1 font-normal text-gray_r-11 py-4">
+ { category.name }
+ </Link>
+ <div className="ml-3 h-full py-4" onClick={() => toggleCategories(category.id)}>
+ { !category.isOpen && <ChevronDownIcon className="text-gray_r-12 w-5" /> }
+ { category.isOpen && <ChevronUpIcon className="text-gray_r-12 w-5" /> }
+ </div>
+ </div>
+ { category.isOpen && category.childs.map((child1Category) => (
+ <Fragment key={child1Category.id}>
+ <div className="flex w-full text-gray_r-11 border-b border-gray_r-6 p-4 pl-12">
+ <Link href={`/shop/search?category=${child1Category.name}`} className="flex-1 font-normal text-gray_r-11">
+ { child1Category.name }
+ </Link>
+ { child1Category.childs.length > 0 && (
+ <div className="ml-3 h-full" onClick={() => toggleCategories(child1Category.id)}>
+ { !child1Category.isOpen && <ChevronDownIcon className="text-gray_r-12 w-5" /> }
+ { child1Category.isOpen && <ChevronUpIcon className="text-gray_r-12 w-5" /> }
+ </div>
+ ) }
+ </div>
+ { child1Category.isOpen && child1Category.childs.map((child2Category) => (
+ <Link key={child2Category.id} href={`/shop/search?category=${child2Category.name}`} className="flex w-full font-normal text-gray_r-11 border-b border-gray_r-6 p-4 pl-16">
+ { child2Category.name }
+ </Link>
+ )) }
+ </Fragment>
+ )) }
+ </Fragment>
+ )) }
</div>
</div>
<div className={isMenuActive ? 'menu-overlay block opacity-100' : 'menu-overlay hidden opacity-0'} onClick={closeMenu}></div>
diff --git a/src/components/transactions/TransactionStatusBadge.js b/src/components/transactions/TransactionStatusBadge.js
new file mode 100644
index 00000000..588542fe
--- /dev/null
+++ b/src/components/transactions/TransactionStatusBadge.js
@@ -0,0 +1,41 @@
+const TransactionStatusBadge = ({ status }) => {
+ let badgeProps = {
+ className: ['h-fit'],
+ text: ''
+ };
+ switch (status) {
+ case 'cancel':
+ badgeProps.className.push('badge-red');
+ badgeProps.text = 'Batal'
+ break;
+ case 'draft':
+ badgeProps.className.push('badge-gray');
+ badgeProps.text = 'Pending Quotation'
+ break;
+ case 'waiting':
+ badgeProps.className.push('badge-yellow');
+ badgeProps.text = 'Menunggu Konfirmasi'
+ break;
+ case 'sale':
+ badgeProps.className.push('badge-blue');
+ badgeProps.text = 'Pesanan Diproses'
+ break;
+ case 'shipping':
+ badgeProps.className.push('badge-blue');
+ badgeProps.text = 'Pesanan Dikirim'
+ break;
+ case 'done':
+ badgeProps.className.push('badge-green');
+ badgeProps.text = 'Selesai'
+ break;
+ }
+ badgeProps.className = badgeProps.className.join(' ');
+
+ return (
+ <div className={badgeProps.className}>
+ { badgeProps.text }
+ </div>
+ )
+};
+
+export default TransactionStatusBadge; \ No newline at end of file
generated by cgit v1.2.3 (git 2.25.1) at 2026-04-17 23:48:24 +0000