Refactor

28 files changed, 0 insertions, 1352 deletions

diff --git a/src/components/auth/WithAuth.js b/src/components/auth/WithAuth.js
deleted file mode 100644
index ef975873..00000000
--- a/src/components/auth/WithAuth.js
+++ /dev/null
@@ -1,20 +0,0 @@
-import { getAuth } from "@/core/utils/auth";
-import { useRouter } from "next/router";
-import { useEffect, useState } from "react";
-
-const WithAuth = ({ children }) => {
-  const router = useRouter();
-  const [response, setResponse] = useState(<></>);
-
-  useEffect(() => {
-    if (!getAuth()) {
-      router.replace('/login');
-    } else {
-      setResponse(children);
-    }
-  }, [children, router]);
-
-  return response;
-}
-
-export default WithAuth;
\ No newline at end of file
diff --git a/src/components/elements/Alert.js b/src/components/elements/Alert.js
deleted file mode 100644
index 914d1590..00000000
--- a/src/components/elements/Alert.js
+++ /dev/null
@@ -1,19 +0,0 @@
-const Alert = ({ children, className, type }) => {
-  let typeClass = '';
-  switch (type) {
-    case 'info':
-      typeClass = ' bg-blue-100 text-blue-900 border-blue-400 '
-      break;
-    case 'success':
-      typeClass = ' bg-green-100 text-green-900 border-green-400 '
-      break;
-    case 'warning':
-      typeClass = ' bg-yellow-100 text-yellow-900 border-yellow-400 '
-      break;
-  }
-  return (
-    <div className={"rounded-md w-full text-medium p-3 border" + typeClass + className}>{children}</div>
-  );
-}
-
-export default Alert;
\ No newline at end of file
diff --git a/src/components/elements/BottomPopup.js b/src/components/elements/BottomPopup.js
deleted file mode 100644
index c1a56e10..00000000
--- a/src/components/elements/BottomPopup.js
+++ /dev/null
@@ -1,25 +0,0 @@
-import CloseIcon from "@/icons/close.svg";
-
-const BottomPopup = ({ 
-  active = false, 
-  title, 
-  children, 
-  closePopup = () => {}
-}) => {
-  return (
-    <>
-      <div className={"menu-overlay " + (active ? 'block' : 'hidden')} onClick={closePopup} />
-      <div className={`fixed w-full z-[60] py-6 px-4 bg-white rounded-t-3xl idt-transition bottom-0 ${active ? 'block' : 'hidden'}`}>
-        <div className="flex justify-between items-center mb-5">
-          <h2 className="text-xl font-semibold">{ title }</h2>
-          <button onClick={closePopup}>
-            <CloseIcon className="w-7" />
-          </button>
-        </div>
-        { children }
-      </div>
-    </>
-  );
-};
-
-export default BottomPopup;
\ No newline at end of file
diff --git a/src/components/elements/ConfirmAlert.js b/src/components/elements/ConfirmAlert.js
deleted file mode 100644
index d33abb89..00000000
--- a/src/components/elements/ConfirmAlert.js
+++ /dev/null
@@ -1,27 +0,0 @@
-const ConfirmAlert = ({
-  title,
-  caption,
-  show,
-  onClose,
-  onSubmit,
-  closeText,
-  submitText
-}) => {
-  return (
-    <>
-      {show && (
-        <div className="menu-overlay" onClick={onClose}></div>
-      )}
-      <div className={"p-4 rounded border bg-white border-gray_r-6 fixed top-[50%] left-[50%] translate-x-[-50%] z-[70] w-[90%] translate-y-[-50%] " + (show ? "block" : "hidden")}>
-        <p className="h2 mb-2">{title}</p>
-        <p className="text-gray_r-11 mb-6">{caption}</p>
-        <div className="flex gap-x-2">
-          <button className="flex-1 btn-yellow" onClick={onClose}>{closeText}</button>
-          <button className="flex-1 btn-solid-red" onClick={onSubmit}>{submitText}</button>
-        </div>
-      </div>
-    </>
-  );
-};
-
-export default ConfirmAlert;
\ No newline at end of file
diff --git a/src/components/elements/DescriptionRow.js b/src/components/elements/DescriptionRow.js
deleted file mode 100644
index 7fe9e3a1..00000000
--- a/src/components/elements/DescriptionRow.js
+++ /dev/null
@@ -1,10 +0,0 @@
-const DescriptionRow = ({ label, children }) => (
-  <div className="grid grid-cols-2">
-    <p className="leading-normal text-gray_r-11">{ label }</p>
-    <div className="text-right leading-normal">
-      { children }
-    </div>
-  </div>
-);
-
-export default DescriptionRow;
\ No newline at end of file
diff --git a/src/components/elements/Disclosure.js b/src/components/elements/Disclosure.js
deleted file mode 100644
index 1f334be3..00000000
--- a/src/components/elements/Disclosure.js
+++ /dev/null
@@ -1,14 +0,0 @@
-const { ChevronUpIcon, ChevronDownIcon } = require("@heroicons/react/24/outline");
-
-const Disclosure = ({ label, active, onClick }) => (
-  <div className={`flex justify-between p-4 ` + (active && 'bg-yellow_r-2')} onClick={onClick}>
-    <p className="font-medium leading-normal">{ label }</p>
-    { onClick && ( active ? (
-      <ChevronUpIcon className="w-5 h-5 stroke-2" />
-    ) : (
-      <ChevronDownIcon className="w-5 h-5 stroke-2" />
-    ) ) }
-  </div>
-);
-
-export default Disclosure;
\ No newline at end of file
diff --git a/src/components/elements/Fields.js b/src/components/elements/Fields.js
deleted file mode 100644
index 586a6a22..00000000
--- a/src/components/elements/Fields.js
+++ /dev/null
@@ -1,21 +0,0 @@
-import ReactSelect from "react-select";
-
-const Select = ({
-  field,
-  ...props
-}) => (
-  <>
-  <ReactSelect
-    classNamePrefix="form-select"
-    ref={field.ref}
-    onChange={(option) => field.onChange(option.value)}
-    value={field.value ? props.options.find(option => option.value === field.value) : ''}
-    isDisabled={props.disabled}
-    {...props}
-  />
-  </>
-);
-
-export {
-  Select
-};
\ No newline at end of file
diff --git a/src/components/elements/Filter.js b/src/components/elements/Filter.js
deleted file mode 100644
index f2051ba8..00000000
--- a/src/components/elements/Filter.js
+++ /dev/null
@@ -1,176 +0,0 @@
-import { useRouter } from "next/router";
-import { useEffect, useState } from "react";
-import BottomPopup from "./BottomPopup";
-
-const Filter = ({ 
-  isActive,
-  closeFilter,
-  defaultRoute,
-  defaultPriceFrom,
-  defaultPriceTo,
-  defaultCategory,
-  defaultBrand,
-  defaultOrderBy,
-  searchResults,
-  disableFilter = []
-}) => {
-  const router = useRouter();
-
-  const [priceFrom, setPriceFrom] = useState(defaultPriceFrom);
-  const [priceTo, setPriceTo] = useState(defaultPriceTo);
-  const [orderBy, setOrderBy] = useState(defaultOrderBy);
-  const [selectedCategory, setSelectedCategory] = useState(defaultCategory);
-  const [selectedBrand, setSelectedBrand] = useState(defaultBrand);
-  const [categories, setCategories] = useState([]);
-  const [brands, setBrands] = useState([]);
-
-  const filterRoute = () => {
-    let filterRoute = [];
-    let filterRoutePrefix = '?';
-    if (selectedBrand) filterRoute.push(`brand=${selectedBrand}`);
-    if (selectedCategory) filterRoute.push(`category=${selectedCategory}`);
-    if (priceFrom) filterRoute.push(`price_from=${priceFrom}`);
-    if (priceTo) filterRoute.push(`price_to=${priceTo}`);
-    if (orderBy) filterRoute.push(`order_by=${orderBy}`);
-
-    if (defaultRoute.includes('?')) filterRoutePrefix = '&';
-    if (filterRoute.length > 0) {
-      filterRoute = filterRoutePrefix + filterRoute.join('&');
-    } else {
-      filterRoute = '';
-    }
-
-    return defaultRoute + filterRoute;
-  }
-
-  useEffect(() => {
-    const filterCategory = searchResults.facet_counts.facet_fields.category_name_str.filter((category, index) => {
-      if (index % 2 == 0) {
-        const productCountInCategory = searchResults.facet_counts.facet_fields.category_name_str[index + 1];
-        if (productCountInCategory > 0) return category;
-      }
-    });
-    setCategories(filterCategory);
-
-    const filterBrand = searchResults.facet_counts.facet_fields.brand_str.filter((brand, index) => {
-      if (index % 2 == 0) {
-        const productCountInBrand = searchResults.facet_counts.facet_fields.brand_str[index + 1];
-        if (productCountInBrand > 0) return brand;
-      }
-    });
-    setBrands(filterBrand);
-  }, [searchResults]);
-
-  const submit = (e) => {
-    e.preventDefault();
-    closeFilter();
-    router.push(filterRoute(), undefined, { scroll: false });
-  }
-
-  const reset = () => {
-    setSelectedBrand('');
-    setSelectedCategory('');
-    setPriceFrom('');
-    setPriceTo('');
-    setOrderBy('');
-  }
-
-  const changeOrderBy = (value) => {
-    if (orderBy == value) {
-      setOrderBy('');
-    } else {
-      setOrderBy(value);
-    }
-  }
-
-  const sortOptions = [
-    {
-      name: 'Harga Terendah',
-      value: 'price-asc',
-    }, 
-    {
-      name: 'Harga Tertinggi',
-      value: 'price-desc',
-    },
-    {
-      name: 'Populer',
-      value: 'popular',
-    },
-    {
-      name: 'Ready Stock',
-      value: 'stock',
-    },
-  ];
-
-  return (
-    <>
-      <BottomPopup active={isActive} closePopup={closeFilter} title="Filter Produk">
-        <form className="flex flex-col gap-y-4" onSubmit={submit}>
-          {(selectedBrand || selectedCategory || priceFrom || priceTo || orderBy) && (
-            <button type="button" className="text-yellow_r-11 font-semibold ml-auto" onClick={reset}>
-              Reset Filter
-            </button>
-          )}
-
-          {!disableFilter.includes('orderBy') && (
-            <div>
-              <label>Urutkan</label>
-              <div className="flex gap-2 mt-2 overflow-x-auto w-full">
-              {sortOptions.map((sortOption, index) => (
-                <button 
-                  key={index}
-                  type="button" 
-                  className={"p-2 rounded border border-gray_r-6 flex-shrink-0" + (orderBy == sortOption.value ? ' border-yellow_r-10 bg-yellow_r-3 text-yellow_r-11' : '')} 
-                  onClick={() => changeOrderBy(sortOption.value)}
-                >
-                  {sortOption.name}
-                </button>
-              ))}
-              </div>
-            </div>
-          )}
-
-          {!disableFilter.includes('category') && (
-            <div>
-              <label>Kategori</label>
-              <select className="form-input mt-2" value={selectedCategory} onChange={(e) => setSelectedCategory(e.target.value)}>
-                <option value="">Pilih kategori...</option>
-                {categories?.map((category, index) => (
-                  <option key={index} value={category}>{category}</option>
-                ))}
-              </select>
-            </div>
-          )}
-
-          {!disableFilter.includes('brand') && (
-            <div>
-              <label>Brand</label>
-              <select className="form-input mt-2" value={selectedBrand} onChange={(e) => setSelectedBrand(e.target.value)}>
-                <option value="">Pilih brand...</option>
-                {brands?.map((brand, index) => (
-                  <option key={index} value={brand}>{brand}</option>
-                ))}
-              </select>
-            </div>
-          )}
-
-          {!disableFilter.includes('price') && (
-            <div>
-              <label>Harga</label>
-              <div className="flex gap-x-4 mt-2 items-center">
-                <input className="form-input" type="number" placeholder="Dari" value={priceFrom} onChange={(e) => setPriceFrom(e.target.value)}/>
-                <span>&mdash;</span>
-                <input className="form-input" type="number" placeholder="Sampai" value={priceTo} onChange={(e) => setPriceTo(e.target.value)}/>
-              </div>
-            </div>
-          )}
-          <button type="submit" className="btn-yellow font-semibold mt-2 w-full">
-            Terapkan Filter
-          </button>
-        </form>
-      </BottomPopup>
-    </>
-  )
-};
-
-export default Filter;
\ No newline at end of file
diff --git a/src/components/elements/Image.js b/src/components/elements/Image.js
deleted file mode 100644
index 60e249b9..00000000
--- a/src/components/elements/Image.js
+++ /dev/null
@@ -1,17 +0,0 @@
-import { LazyLoadImage } from "react-lazy-load-image-component"
-import "react-lazy-load-image-component/src/effects/opacity.css"
-
-const Image = ({ ...props }) => {
-  return (
-    <LazyLoadImage
-      {...props}
-      effect="opacity"
-      src={props.src || '/images/noimage.jpeg'}
-      alt={props.src ? props.alt : 'Image Not Found - Indoteknik'}
-    />
-  )
-}
-
-Image.defaultProps = LazyLoadImage.defaultProps
-
-export default Image
\ No newline at end of file
diff --git a/src/components/elements/LineDivider.js b/src/components/elements/LineDivider.js
deleted file mode 100644
index 4e8c7b52..00000000
--- a/src/components/elements/LineDivider.js
+++ /dev/null
@@ -1,7 +0,0 @@
-const LineDivider = () => {
-  return (
-    <hr className="h-1 bg-gray_r-4 border-none"/>
-  );
-};
-
-export default LineDivider;
\ No newline at end of file
diff --git a/src/components/elements/Link.js b/src/components/elements/Link.js
deleted file mode 100644
index 065b5c9e..00000000
--- a/src/components/elements/Link.js
+++ /dev/null
@@ -1,13 +0,0 @@
-import NextLink from "next/link";
-
-const Link = ({ children, ...props }) => {
-  return (
-    <NextLink {...props} scroll={false}>
-      {children}
-    </NextLink>
-  )
-}
-
-Link.defaultProps = NextLink.defaultProps
-
-export default Link
\ No newline at end of file
diff --git a/src/components/elements/Pagination.js b/src/components/elements/Pagination.js
deleted file mode 100644
index ff2a8462..00000000
--- a/src/components/elements/Pagination.js
+++ /dev/null
@@ -1,58 +0,0 @@
-import Link from "./Link";
-
-export default function Pagination({ pageCount, currentPage, url }) {
-  let firstPage = false;
-  let lastPage = false;
-  let dotsPrevPage = false;
-  let dotsNextPage = false;
-  let urlParameterPrefix = url.includes('?') ? '&' : '?';
-
-  return pageCount > 1 && (
-    <div className="pagination">
-      {Array.from(Array(pageCount)).map((v, i) => {
-        let page = i + 1;
-        let rangePrevPage = currentPage - 2;
-        let rangeNextPage = currentPage + 2;
-        let PageComponent = <Link key={i} href={`${url + urlParameterPrefix}page=${page}`} className={"pagination-item" + (page == currentPage ? " pagination-item--active " : "")}>{page}</Link>;
-        let DotsComponent = <div key={i} className="pagination-dots">...</div>;
-
-        if (pageCount == 7) {
-          return PageComponent;
-        }
-
-        if (currentPage == 1) rangeNextPage += 3;
-        if (currentPage == 2) rangeNextPage += 2;
-        if (currentPage == 3) rangeNextPage += 1;
-        if (currentPage == 4) rangePrevPage -= 1;
-        if (currentPage == pageCount) rangePrevPage -= 3;
-        if (currentPage == pageCount - 1) rangePrevPage -= 2;
-        if (currentPage == pageCount - 2) rangePrevPage -= 1;
-        if (currentPage == pageCount - 3) rangeNextPage += 1;
-
-        if (page > rangePrevPage && page < rangeNextPage) {
-          return PageComponent;
-        }
-
-        if (page == 1 && rangePrevPage >= 1 && !firstPage) {
-          firstPage = true;
-          return PageComponent;
-        }
-
-        if (page == pageCount && rangeNextPage <= pageCount && !lastPage) {
-          lastPage = true;
-          return PageComponent;
-        }
-
-        if (page > currentPage && (pageCount - currentPage) > 1 && !dotsNextPage) {
-          dotsNextPage = true;
-          return DotsComponent;
-        }
-
-        if (page < currentPage && (currentPage - 1) > 1 && !dotsPrevPage) {
-          dotsPrevPage = true;
-          return DotsComponent;
-        }
-      })}
-    </div>
-  )
-}
\ No newline at end of file
diff --git a/src/components/elements/ProgressBar.js b/src/components/elements/ProgressBar.js
deleted file mode 100644
index 0adedcdf..00000000
--- a/src/components/elements/ProgressBar.js
+++ /dev/null
@@ -1,25 +0,0 @@
-import { Fragment } from "react";
-
-const ProgressBar = ({ current, labels }) => {
-  return (
-    <div className="bg-gray_r-1 flex gap-x-2 p-4 rounded-md">
-      {labels.map((label, index) => (
-        <Fragment key={index}>
-          <div className={"flex gap-x-2 items-center " + (index < current ? 'text-gray_r-12' : 'text-gray_r-11')}>
-            <div className={"leading-none p-2 rounded-full w-7 text-center text-caption-2 " + (index < current ? 'bg-yellow_r-9' : 'bg-gray_r-5')}>
-              { index + 1 }
-            </div>
-            <p className="font-medium text-caption-2">{ label }</p>
-          </div>
-          { index < (labels.length - 1) && (
-            <div className="flex-1 flex items-center">
-              <div className="h-0.5 w-full bg-gray_r-7"></div>
-            </div>
-          ) }
-        </Fragment>
-      ))}
-    </div>
-  )
-}
-
-export default ProgressBar;
\ No newline at end of file
diff --git a/src/components/elements/Skeleton.js b/src/components/elements/Skeleton.js
deleted file mode 100644
index fbdbc245..00000000
--- a/src/components/elements/Skeleton.js
+++ /dev/null
@@ -1,48 +0,0 @@
-import ImagePlaceholderIcon from "../../icons/image-placeholder.svg";
-
-const SkeletonList = ({ number }) => (
-  <div role="status" className="space-y-6 animate-pulse">
-    { Array.from(Array(number), (e, i) => (
-      <div className="flex items-center justify-between" key={i}>
-        <div>
-            <div className="h-2.5 bg-gray-300 rounded-full w-24 mb-2.5"></div>
-            <div className="w-32 h-2 bg-gray-200 rounded-full"></div>
-        </div>
-        <div className="h-2.5 bg-gray-300 rounded-full w-12"></div>
-    </div>
-    )) }
-    <span className="sr-only">Loading...</span>
-  </div>
-);
-
-const SkeletonProduct = () => (
-  <div className="grid grid-cols-2 gap-x-4">
-    <div role="status" className="p-4 max-w-sm rounded border border-gray-300 shadow animate-pulse md:p-6">
-      <div className="flex justify-center items-center mb-4 h-48 bg-gray-300 rounded">
-      <ImagePlaceholderIcon className="w-12 h-12 text-gray-200" />
-      </div>
-      <div className="h-2 bg-gray-200 rounded-full w-10 mb-1"></div>
-      <div className="h-2.5 bg-gray-200 rounded-full w-full mb-4"></div>
-      <div className="h-2 bg-gray-200 rounded-full mb-2.5"></div>
-      <div className="h-2 bg-gray-200 rounded-full mb-2.5"></div>
-      <div className="h-2 bg-gray-200 rounded-full"></div>
-      <span className="sr-only">Loading...</span>
-    </div>
-    <div role="status" className="p-4 max-w-sm rounded border border-gray-300 shadow animate-pulse md:p-6">
-      <div className="flex justify-center items-center mb-4 h-48 bg-gray-300 rounded">
-        <ImagePlaceholderIcon className="w-12 h-12 text-gray-200" />
-      </div>
-      <div className="h-2 bg-gray-200 rounded-full w-10 mb-1"></div>
-      <div className="h-2.5 bg-gray-200 rounded-full w-full mb-4"></div>
-      <div className="h-2 bg-gray-200 rounded-full mb-2.5"></div>
-      <div className="h-2 bg-gray-200 rounded-full mb-2.5"></div>
-      <div className="h-2 bg-gray-200 rounded-full"></div>
-      <span className="sr-only">Loading...</span>
-    </div>
-  </div>
-);
-
-export {
-  SkeletonList,
-  SkeletonProduct
-};
\ No newline at end of file
diff --git a/src/components/elements/Spinner.js b/src/components/elements/Spinner.js
deleted file mode 100644
index 21006ecd..00000000
--- a/src/components/elements/Spinner.js
+++ /dev/null
@@ -1,13 +0,0 @@
-const Spinner = ({ className }) => {
-  return (
-    <div role="status">
-        <svg aria-hidden="true" className={"animate-spin " + className} viewBox="0 0 100 101" fill="none" xmlns="http://www.w3.org/2000/svg">
-            <path d="M100 50.5908C100 78.2051 77.6142 100.591 50 100.591C22.3858 100.591 0 78.2051 0 50.5908C0 22.9766 22.3858 0.59082 50 0.59082C77.6142 0.59082 100 22.9766 100 50.5908ZM9.08144 50.5908C9.08144 73.1895 27.4013 91.5094 50 91.5094C72.5987 91.5094 90.9186 73.1895 90.9186 50.5908C90.9186 27.9921 72.5987 9.67226 50 9.67226C27.4013 9.67226 9.08144 27.9921 9.08144 50.5908Z" fill="currentColor"/>
-            <path d="M93.9676 39.0409C96.393 38.4038 97.8624 35.9116 97.0079 33.5539C95.2932 28.8227 92.871 24.3692 89.8167 20.348C85.8452 15.1192 80.8826 10.7238 75.2124 7.41289C69.5422 4.10194 63.2754 1.94025 56.7698 1.05124C51.7666 0.367541 46.6976 0.446843 41.7345 1.27873C39.2613 1.69328 37.813 4.19778 38.4501 6.62326C39.0873 9.04874 41.5694 10.4717 44.0505 10.1071C47.8511 9.54855 51.7191 9.52689 55.5402 10.0491C60.8642 10.7766 65.9928 12.5457 70.6331 15.2552C75.2735 17.9648 79.3347 21.5619 82.5849 25.841C84.9175 28.9121 86.7997 32.2913 88.1811 35.8758C89.083 38.2158 91.5421 39.6781 93.9676 39.0409Z" fill="currentFill"/>
-        </svg>
-        <span className="sr-only">Loading...</span>
-    </div>
-  )
-}
-
-export default Spinner;
\ No newline at end of file
diff --git a/src/components/layouts/AppBar.js b/src/components/layouts/AppBar.js
deleted file mode 100644
index fe74c940..00000000
--- a/src/components/layouts/AppBar.js
+++ /dev/null
@@ -1,47 +0,0 @@
-import { Bars3Icon, ChevronLeftIcon, HomeIcon, ShoppingCartIcon } from "@heroicons/react/24/outline";
-import Head from "next/head";
-import { useRouter } from "next/router";
-import Link from "../elements/Link";
-
-const AppBar = ({ title }) => {
-  const router = useRouter();
-
-  const handleBackButtonClick = (event) => {
-    event.currentTarget.disabled = true;
-    router.back();
-  }
-
-  return (
-    <>
-      <Head>
-        <title>{ title } - Indoteknik</title>
-      </Head>
-      <div className="sticky-header flex justify-between !p-0 !pr-4 idt-transition">
-        {/* --- Start Title */}
-        <div className="flex items-center">
-          <button type="button" onClick={handleBackButtonClick} className="text-gray_r-12 px-4 py-5">
-            <ChevronLeftIcon className="w-6 stroke-2"/>
-          </button>
-          <h1 className="text-h-md">{ title }</h1> 
-        </div>
-        {/* --- End Title */}
-
-        {/* --- Start Icons */}
-        <div className="flex gap-x-4 items-center">
-          <Link href="/shop/cart">
-            <ShoppingCartIcon className="w-6 stroke-2 text-gray_r-12"/>
-          </Link>
-          <Link href="/">
-            <HomeIcon className="w-6 stroke-2 text-gray_r-12"/>
-          </Link>
-          <Link href="/my/menu">
-            <Bars3Icon className="w-6 stroke-2 text-gray_r-12"/>
-          </Link>
-        </div>
-        {/* --- End Icons */}
-      </div>
-    </>
-  );
-};
-
-export default AppBar;
\ No newline at end of file
diff --git a/src/components/layouts/Footer.js b/src/components/layouts/Footer.js
deleted file mode 100644
index d173a525..00000000
--- a/src/components/layouts/Footer.js
+++ /dev/null
@@ -1,91 +0,0 @@
-import { 
-  PhoneIcon,
-  DevicePhoneMobileIcon,
-  EnvelopeIcon
-} from "@heroicons/react/24/outline";
-import Image from "next/image";
-import InstagramIcon from "@/icons/instagram.svg";
-import LinkedinIcon from "@/icons/linkedin.svg";
-import Link from "../elements/Link";
-
-export default function Footer() {
-  return (
-    <div className="p-4 bg-gray_r-3">
-      <div className="grid grid-cols-2 gap-x-2 mb-4">
-        <div>
-          <p className="font-medium mb-2">Kantor Pusat</p>
-          <p className="text-gray_r-11 leading-6 text-caption-2">
-            Jl. Bandengan Utara 85A No. 8-9 RT.3/RW.16, Penjaringan, Kec. Penjaringan
-          </p>
-
-          <p className="font-medium mb-2 mt-6">Layanan Informasi</p>
-          <div className="flex items-center gap-x-2 text-gray_r-11 text-caption-2 mb-2">
-            <PhoneIcon className="w-5 h-5 stroke-2"/>
-            <a className="text-gray_r-11 font-normal" href="tel:02129338828">
-              (021) 2933-8828
-            </a>
-            {'/'}
-            <a className="text-gray_r-11 font-normal" href="tel:02129338829">
-              29
-            </a>
-          </div>
-          <div className="flex items-center gap-x-2 text-gray_r-11 text-caption-2 mb-2">
-            <DevicePhoneMobileIcon className="w-5 h-5 stroke-2"/>
-            <a className="text-gray_r-11 font-normal" href="https://wa.me/628128080622">
-              0812-8080-622
-            </a>
-          </div>
-          <div className="flex items-center gap-x-2 text-gray_r-11 text-caption-2">
-            <EnvelopeIcon className="w-5 h-5 stroke-2"/>
-            <a className="text-gray_r-11 font-normal" href="mailto:sales@indoteknik.com">
-              sales@indoteknik.com
-            </a>
-          </div>
-
-          <p className="font-medium mb-2 mt-6">Panduan Pelanggan</p>
-          <div className="text-caption-2 flex flex-col gap-y-2">
-            <Link className="text-gray_r-11 font-normal" href="/faqs">FAQ</Link>
-            <Link className="text-gray_r-11 font-normal" href="/">Kebijakan Privasi</Link>
-            <Link className="text-gray_r-11 font-normal" href="/">Pengajuan Tempo</Link>
-            <Link className="text-gray_r-11 font-normal" href="/">Garansi Produk</Link>
-            <Link className="text-gray_r-11 font-normal" href="/">Online Quotation</Link>
-            <Link className="text-gray_r-11 font-normal" href="/">Pengiriman</Link>
-            <Link className="text-gray_r-11 font-normal" href="/">Pembayaran</Link>
-            <Link className="text-gray_r-11 font-normal" href="/">Syarat & Ketentuan</Link>
-
-          </div>
-        </div>
-        <div>
-          <p className="font-medium mb-2">Jam Operasional</p>
-          <p className="text-gray_r-11 leading-6 text-caption-2">
-            <span className="font-medium">Senin - Jumat:</span> 08:30 - 17:00
-          </p>
-          <p className="text-gray_r-11 leading-6 text-caption-2">
-            <span className="font-medium">Sabtu:</span> 08:30 - 14:00
-          </p>
-
-          <p className="font-medium mb-2 mt-6">Temukan Kami</p>
-          <div className="flex gap-x-2">
-            <InstagramIcon className="w-5 h-5 stroke-gray_r-11" />
-            <LinkedinIcon className="w-5 h-5 stroke-gray_r-11" />
-          </div>
-
-          <p className="font-medium mb-2 mt-6">Pembayaran</p>
-          <div className="grid grid-cols-4 gap-2">
-            <Image src="/images/payments/bca.webp" alt="BCA Payment" width={48} height={48} className="w-full" />
-            <Image src="/images/payments/bca.webp" alt="BCA Payment" width={48} height={48} className="w-full" />
-            <Image src="/images/payments/bca.webp" alt="BCA Payment" width={48} height={48} className="w-full" />
-            <Image src="/images/payments/bca.webp" alt="BCA Payment" width={48} height={48} className="w-full" />
-            <Image src="/images/payments/bca.webp" alt="BCA Payment" width={48} height={48} className="w-full" />
-            <Image src="/images/payments/bca.webp" alt="BCA Payment" width={48} height={48} className="w-full" />
-            <Image src="/images/payments/bca.webp" alt="BCA Payment" width={48} height={48} className="w-full" />
-            <Image src="/images/payments/bca.webp" alt="BCA Payment" width={48} height={48} className="w-full" />
-          </div>
-
-          {/* <p className="font-medium mb-2 mt-6">Pengiriman</p> */}
-        </div>
-      </div>
-      <h6 className="h2">PT. Indoteknik Dotcom Gemilang</h6>
-    </div>
-  );
-}
\ No newline at end of file
diff --git a/src/components/layouts/Header.js b/src/components/layouts/Header.js
deleted file mode 100644
index 23fda642..00000000
--- a/src/components/layouts/Header.js
+++ /dev/null
@@ -1,253 +0,0 @@
-import Image from "next/image";
-import { Fragment, useCallback, useEffect, useRef, useState } from "react";
-import Head from "next/head";
-import { useRouter } from "next/router";
-import axios from "axios";
-import {
-  MagnifyingGlassIcon,
-  Bars3Icon,
-  ShoppingCartIcon,
-  ChevronRightIcon,
-  Cog6ToothIcon,
-  HeartIcon,
-  ChevronDownIcon,
-  ChevronUpIcon
-} from "@heroicons/react/24/outline";
-
-// Helpers
-import { useAuth } from "@/core/utils/auth";
-// Components
-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: 'Tentang Indoteknik', href: '/' },
-  { name: 'Pusat Bantuan', href: '/' },
-];
-
-export default function Header({ title }) {
-  const router = useRouter();
-  const { q = '' } = router.query;
-  const [searchQuery, setSearchQuery] = useState(q != '*' ? q : '');
-  const [suggestions, setSuggestions] = useState([]);
-  const searchQueryRef = useRef();
-  const [isMenuActive, setIsMenuActive] = useState(false);
-  const [auth] = useAuth();
-  
-  useEffect(() => {
-    if (q) {
-      searchQueryRef.current.blur();
-      setSuggestions([]);
-    };
-  }, [q]);
-
-  const clickSuggestion = (value) => {
-    router.push(`/shop/search?q=${value}`, undefined, { scroll: false });
-  };
-
-  const getSuggestion = useCallback(async () => {
-    if (searchQuery.trim().length > 0) {
-      let result = await axios(`${process.env.SELF_HOST}/api/shop/suggest?q=${searchQuery.trim()}`);
-      setSuggestions(result.data.suggest.mySuggester[searchQuery.trim()].suggestions);
-    } else {
-      setSuggestions([]);
-    }
-  }, [searchQuery]);
-
-  useEffect(() => {
-    if (document.activeElement == searchQueryRef.current) getSuggestion();
-  }, [getSuggestion]);
-
-  const openMenu = () => setIsMenuActive(true);
-  const closeMenu = () => setIsMenuActive(false);
-
-  const searchSubmit = (e) => {
-    e.preventDefault();
-    if (searchQuery.length > 0) {
-      router.push(`/shop/search?q=${searchQuery}`, undefined, { scroll: false });
-    } else {
-      searchQueryRef.current.focus();
-    }
-  }
-
-  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>
-        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
-        <title>{title}</title>
-      </Head>
-      
-      <div className={'menu-wrapper' + (isMenuActive ? ' active ' : '')}>
-        <div className="flex gap-x-2 items-center border-b border-gray_r-6 p-4">
-          { auth && (
-            <Link href="/my/menu" className="w-full flex items-center text-gray_r-12" onClick={closeMenu}>
-              <div>
-                <p className="text-gray_r-11 text-caption-2">{ greeting() },</p>
-                <h1>{auth.name}</h1>
-              </div>
-              <div className="ml-auto">
-                <Cog6ToothIcon className="w-5" />
-              </div>
-            </Link>
-          ) }
-
-          { !auth && (
-            <>
-              <Link href="/login" onClick={closeMenu} className="w-full py-2 btn-light text-gray_r-12">Masuk</Link>
-              <Link href="/register" onClick={closeMenu} className="w-full py-2 btn-yellow text-gray_r-12">Daftar</Link>
-            </>
-          ) }
-        </div>
-        <div className="flex flex-col">
-          { menus.map((menu, index) => (
-            <Link className="flex w-full font-normal text-gray_r-11 border-b border-gray_r-6 p-4" href={menu.href} key={index} onClick={closeMenu}>
-                <span>{ menu.name }</span>
-                <div className="ml-auto">
-                  <ChevronRightIcon className="text-gray_r-12 w-5" />
-                </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-4 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 ${category.isOpen ? 'bg-gray_r-2' : ''}`}>
-                    <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-4 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>
-
-      <div className="sticky-header">
-        <div className="flex justify-between items-center">
-          <Link href="/" scroll={false}>
-            <Image src={Logo} alt="Logo Indoteknik" width={120} height={40} />
-          </Link>
-          <div className="flex gap-x-4">
-            <Link href="/my/wishlist">
-              <HeartIcon className="w-6 text-gray_r-12" />
-            </Link>
-            <Link href="/shop/cart">
-              <ShoppingCartIcon className="w-6 text-gray_r-12" />
-            </Link>
-            <button onClick={openMenu}>
-              <Bars3Icon className="w-6 text-gray_r-12" />
-            </button>
-          </div>
-        </div>
-        <form onSubmit={searchSubmit} className="relative flex mt-2">
-          <input 
-            ref={searchQueryRef}
-            type="text" 
-            name="q" 
-            onChange={(e) => setSearchQuery(e.target.value)} 
-            onFocus={getSuggestion}
-            value={searchQuery} 
-            className="form-input rounded-r-none border-r-0 focus:border-gray_r-7" 
-            placeholder="Ketikan nama, merek, part number"
-            autoComplete="off"
-          />
-
-          <button 
-            type="submit" 
-            aria-label="search" 
-            className="btn-light bg-transparent px-2 py-1 rounded-l-none border-l-0"
-          >
-            <MagnifyingGlassIcon className="w-6" />
-          </button>
-
-          {suggestions.length > 1 && (
-            <div className="absolute w-full top-[50px] rounded-b bg-gray_r-2 border border-gray_r-6">
-              {suggestions.map((suggestion, index) => (
-                <p onClick={() => clickSuggestion(suggestion.term)} className="w-full p-2" key={index}>{suggestion.term}</p>
-              ))}
-            </div>
-          )}
-        </form>
-      </div>
-
-      {suggestions.length > 1 && (
-        <div className="menu-overlay !z-40" onClick={() => setSuggestions([])}></div>
-      )}
-    </>
-  )
-}
\ No newline at end of file
diff --git a/src/components/layouts/Layout.js b/src/components/layouts/Layout.js
deleted file mode 100644
index fd507963..00000000
--- a/src/components/layouts/Layout.js
+++ /dev/null
@@ -1,20 +0,0 @@
-import { motion } from 'framer-motion'; 
-
-export default function Layout({ children, ...pageProps }) {
-  const transition = { 
-    ease: 'easeOut', 
-    duration: 0.3
-  };
-
-  return children && (
-    <motion.main
-      initial={{ opacity: 0, x: 30, y: 0 }}
-      animate={{ opacity: 1, x: 0, y: 0 }}
-      exit={{ opacity: 0, x: 30, y: 0 }}
-      transition={transition}
-      {...pageProps}
-    >
-      {children}
-    </motion.main>
-  );
-}
\ No newline at end of file
diff --git a/src/components/manufactures/ManufactureCard.js b/src/components/manufactures/ManufactureCard.js
deleted file mode 100644
index 73a96902..00000000
--- a/src/components/manufactures/ManufactureCard.js
+++ /dev/null
@@ -1,18 +0,0 @@
-import { createSlug } from "@/core/utils/slug";
-import Image from "../elements/Image";
-import Link from "../elements/Link";
-
-export default function ManufactureCard({ data }) {
-  const manufacture = data;
-  return (
-    <Link href={`/shop/brands/${createSlug(manufacture.name, manufacture.id)}`} className="flex justify-center items-center border border-gray-300 p-1 rounded h-16 text-gray-800 text-sm text-center bg-white">
-      {manufacture.logo ? (
-        <Image 
-          src={manufacture.logo} 
-          alt={manufacture.name} 
-          className="w-full max-h-full object-contain object-center" 
-        />
-      ) : manufacture.name}
-    </Link>
-  );
-}
\ No newline at end of file
diff --git a/src/components/products/ProductCard.js b/src/components/products/ProductCard.js
deleted file mode 100644
index c79a4900..00000000
--- a/src/components/products/ProductCard.js
+++ /dev/null
@@ -1,69 +0,0 @@
-import Link from "../elements/Link";
-import currencyFormat from "@/core/utils/currencyFormat";
-import { createSlug } from "@/core/utils/slug";
-import { ChevronRightIcon } from "@heroicons/react/20/solid";
-import Image from "../elements/Image";
-
-
-export default function ProductCard({ 
-  data,
-  simpleProductTitleLine = false
-}) {
-  let product = data;
-  return (
-    <div className="product-card">
-      <Link href={'/shop/product/' + createSlug(product.name, product.id)} className="block relative bg-white">
-        <Image 
-          src={product.image}
-          alt={product.name}
-          className="product-card__image"
-        />
-        {product.variant_total > 1 ? (
-          <div className="absolute bottom-2 left-2 badge-gray">{product.variant_total} Varian</div>
-        ) : ''}
-      </Link>
-      <div className="product-card__content">
-        <div>
-          {typeof product.manufacture.name !== "undefined" ? (
-            <Link href={'/shop/brands/' + createSlug(product.manufacture.name, product.manufacture.id)} className="product-card__brand">{product.manufacture.name}</Link>
-          ) : (
-            <span className="product-card__brand">-</span>
-          )}
-          <Link href={'/shop/product/' + createSlug(product.name, product.id)} className={`product-card__title ${simpleProductTitleLine ? 'wrap-line-ellipsis-2' : 'wrap-line-ellipsis-3'}`}>
-            {product.name}
-          </Link>
-        </div>
-        <div className="mt-2">
-          {product.lowest_price.discount_percentage > 0 ? (
-            <div className="flex gap-x-1 items-center mb-1">
-              <p className="text-caption-2 text-gray_r-11 line-through">{currencyFormat(product.lowest_price.price)}</p>
-              <span className="badge-solid-red">{product.lowest_price.discount_percentage}%</span>
-            </div>
-          ) : ''}
-          
-          {product.lowest_price.price_discount > 0 ? (
-            <p className="text-caption-1 text-gray_r-12 font-bold">
-              {currencyFormat(product.lowest_price.price_discount)}
-            </p>
-          ) : (
-            <a 
-              href="https://wa.me" 
-              target="_blank" 
-              rel="noreferrer" 
-              className="flex items-center gap-x-1 text-caption-1"
-            >
-              Tanya Harga <ChevronRightIcon className="text-yellow_r-11 w-5 h-5" />
-            </a>
-          )}
-          
-          {product.stock_total > 0 ? (
-            <div className="flex gap-x-1 mt-2">
-              <div className="badge-solid-red">Ready Stock</div>
-              <div className="badge-gray">{product.stock_total > 5 ? '> 5' : '< 5'}</div>
-            </div>
-          ) : ''}
-        </div>
-      </div>
-    </div>
-  )
-}
\ No newline at end of file
diff --git a/src/components/products/ProductCategories.js b/src/components/products/ProductCategories.js
deleted file mode 100644
index 3b671f29..00000000
--- a/src/components/products/ProductCategories.js
+++ /dev/null
@@ -1,62 +0,0 @@
-import { useEffect, useState } from "react";
-import ProductSlider from "./ProductSlider";
-import apiOdoo from "@/core/utils/apiOdoo";
-import { LazyLoadComponent } from "react-lazy-load-image-component";
-import { SkeletonProduct } from "../elements/Skeleton";
-
-const ProductCategory = ({ id }) => {
-  const [ content, setContent ] = useState(null);
-  
-  useEffect(() => {
-    const loadContent = async () => {
-      if (!content) {
-        const dataContent = await apiOdoo('GET', `/api/v1/categories_homepage?id=${id}`);
-        setContent(dataContent[0]);
-      }
-    }
-    loadContent();
-  }, [id, content]);
-  
-  return (
-    <div className="p-4 relative bg-yellow_r-2">
-      { content ? (
-        <ProductSlider 
-          products={{
-            products: content.products,
-            banner: {
-              image: content.image,
-              name: content.name,
-              url: `/shop/search?category=${content.name}`
-            }
-          }} 
-          simpleProductTitleLine
-          bannerMode
-        />
-      ) : <SkeletonProduct /> }
-    </div>
-  );
-}
-
-export default function ProductCategories() {
-  const [ contentIds, setContentIds ] = useState([]);
-
-  useEffect(() => {
-    const getContentIds = async () => {
-      if (contentIds.length == 0) {
-        const dataContentIds = await apiOdoo('GET', '/api/v1/categories_homepage/ids');
-        setContentIds(dataContentIds);
-      }
-    }
-    getContentIds();
-  }, [ contentIds ]);
-
-  return (
-    <div className="flex flex-col gap-y-6">
-      { contentIds.map((contentId) => (
-        <LazyLoadComponent placeholder={<SkeletonProduct/>}  key={contentId}>
-          <ProductCategory id={contentId} />
-        </LazyLoadComponent>
-      )) }
-    </div>
-  ) 
-}
\ No newline at end of file
diff --git a/src/components/products/ProductSimilar.js b/src/components/products/ProductSimilar.js
deleted file mode 100644
index 9e2292cb..00000000
--- a/src/components/products/ProductSimilar.js
+++ /dev/null
@@ -1,25 +0,0 @@
-import apiOdoo from '@/core/utils/apiOdoo';
-import { useEffect, useState } from 'react';
-import ProductSlider from './ProductSlider';
-
-export default function ProductSimilar({ productId }) {
-  const [similarProducts, setSimilarProducts] = useState(null);
-
-  useEffect(() => {
-    const getSimilarProducts = async () => {
-      if (productId && !similarProducts) {
-        const dataSimilarProducts = await apiOdoo('GET', `/api/v1/product/${productId}/similar?limit=20`);
-        setSimilarProducts(dataSimilarProducts);
-      }
-    }
-    getSimilarProducts();
-  }, [productId, similarProducts]);
-
-
-  return (
-    <div className="p-4">
-      <h2 className="font-bold mb-4">Kamu Mungkin Juga Suka</h2>
-      <ProductSlider products={similarProducts}/>
-    </div>
-  )
-}
\ No newline at end of file
diff --git a/src/components/products/ProductSlider.js b/src/components/products/ProductSlider.js
deleted file mode 100644
index 662a6511..00000000
--- a/src/components/products/ProductSlider.js
+++ /dev/null
@@ -1,39 +0,0 @@
-import { Swiper, SwiperSlide } from "swiper/react";
-import ProductCard from "./ProductCard";
-import "swiper/css";
-import Image from "../elements/Image";
-import Link from "../elements/Link";
-import { SkeletonProduct } from "../elements/Skeleton";
-import { useState } from "react";
-
-export default function ProductSlider({ 
-  products, 
-  simpleProductTitleLine = false,
-  bannerMode = false 
-}) {
-  const [ activeIndex, setActiveIndex ] = useState(0);
-  const swiperSliderFirstMove = (swiper) => {
-    setActiveIndex(swiper.activeIndex);
-  };
-
-  return (
-    <>
-      { bannerMode && (
-        <Image src={products.banner.image} alt={products.banner.name} className={`absolute rounded-r top-0 left-0 h-full max-w-[52%] idt-transition border border-gray_r-6 ` + (activeIndex > 0 ? 'opacity-0' : 'opacity-100')} />
-      ) }
-      <Swiper freeMode={true} slidesPerView={2.2} spaceBetween={8} onSlideChange={swiperSliderFirstMove} prefix="product">
-        { bannerMode && (
-          <SwiperSlide>
-            <Link href={products.banner.url} className="w-full h-full block"></Link>
-          </SwiperSlide>
-        ) }
-        {products?.products?.map((product, index) => (
-          <SwiperSlide key={index}>
-            <ProductCard data={product} simpleProductTitleLine={simpleProductTitleLine} />
-          </SwiperSlide>
-        ))}
-      </Swiper>
-      { !products ? <SkeletonProduct /> : ''}
-    </>
-  )
-}
\ No newline at end of file
diff --git a/src/components/transactions/TransactionDetail.js b/src/components/transactions/TransactionDetail.js
deleted file mode 100644
index 295a4f9f..00000000
--- a/src/components/transactions/TransactionDetail.js
+++ /dev/null
@@ -1,67 +0,0 @@
-import { useState } from "react";
-import DescriptionRow from "../elements/DescriptionRow";
-import Disclosure from "../elements/Disclosure";
-
-const DetailAddress = ({ address }) => {
-  const fullAddress = [];
-  if (address?.street) fullAddress.push(address.street);
-  if (address?.sub_district?.name) fullAddress.push(address.sub_district.name);
-  if (address?.district?.name) fullAddress.push(address.district.name);
-  if (address?.city?.name) fullAddress.push(address.city.name);
-  return (
-    <div className="p-4 flex flex-col gap-y-4">
-      <DescriptionRow label="Nama">{ address?.name }</DescriptionRow>
-      <DescriptionRow label="Email">{ address?.email || '-' }</DescriptionRow>
-      <DescriptionRow label="No Telepon">{ address?.mobile || '-' }</DescriptionRow>
-      <DescriptionRow label="Alamat">{ fullAddress.join(', ') }</DescriptionRow>
-    </div>
-  );
-};
-
-const TransactionDetailAddress = ({ transaction }) => {
-  const [ activeSection, setActiveSection ] = useState({
-    purchase: false,
-    shipping: false,
-    invoice: false,
-  });
-
-  const toggleSection = ( name ) => {
-    setActiveSection({
-      ...activeSection,
-      [name]: !activeSection[name] 
-    });
-  };
-
-  return (
-    <div className="m-4 rounded-md border border-gray_r-6 divide-y divide-gray_r-6">
-      <Disclosure 
-        label="Detail Pelanggan" 
-        active={activeSection.purchase} 
-        onClick={() => toggleSection('purchase')} 
-      />
-      { activeSection.purchase && (
-        <DetailAddress address={transaction?.address?.customer} />
-      ) }
-
-      <Disclosure 
-        label="Detail Pengiriman" 
-        active={activeSection.shipping} 
-        onClick={() => toggleSection('shipping')} 
-      />
-      { activeSection.shipping && (
-        <DetailAddress address={transaction?.address?.shipping} />
-      ) }
-
-      <Disclosure 
-        label="Detail Penagihan" 
-        active={activeSection.invoice} 
-        onClick={() => toggleSection('invoice')} 
-      />
-      { activeSection.invoice && (
-        <DetailAddress address={transaction?.address?.invoice} />
-      ) }
-    </div>
-  );
-};
-
-export { TransactionDetailAddress };
\ No newline at end of file
diff --git a/src/components/transactions/TransactionStatusBadge.js b/src/components/transactions/TransactionStatusBadge.js
deleted file mode 100644
index f94fd3fd..00000000
--- a/src/components/transactions/TransactionStatusBadge.js
+++ /dev/null
@@ -1,45 +0,0 @@
-const TransactionStatusBadge = ({ status }) => {
-  let badgeProps = {
-    className: ['h-fit'],
-    text: ''
-  };
-  switch (status) {
-    case 'cancel':
-      badgeProps.className.push('badge-solid-red');
-      badgeProps.text = 'Pesanan Batal'
-      break;
-    case 'draft':
-      badgeProps.className.push('badge-red');
-      badgeProps.text = 'Pending Quotation'
-      break;
-    case 'waiting':
-      badgeProps.className.push('badge-yellow');
-      badgeProps.text = 'Pesanan diterima'
-      break;
-    case 'sale':
-      badgeProps.className.push('badge-yellow');
-      badgeProps.text = 'Pesanan diproses'
-      break;
-    case 'shipping':
-      badgeProps.className.push('badge-green');
-      badgeProps.text = 'Pesanan dikirim'
-      break;
-    case 'partial_shipping':
-      badgeProps.className.push('badge-green');
-      badgeProps.text = 'Dikirim sebagian'
-      break;
-    case 'done':
-      badgeProps.className.push('badge-solid-green');
-      badgeProps.text = 'Pesanan Selesai'
-      break;
-  }
-  badgeProps.className = badgeProps.className.join(' ');
-
-  return (
-    <div className={badgeProps.className}>
-      { badgeProps.text }
-    </div>
-  )
-};
-
-export default TransactionStatusBadge;
\ No newline at end of file
diff --git a/src/components/variants/VariantCard.js b/src/components/variants/VariantCard.js
deleted file mode 100644
index a821480c..00000000
--- a/src/components/variants/VariantCard.js
+++ /dev/null
@@ -1,92 +0,0 @@
-import { createSlug } from "@/core/utils/slug";
-import Image from "../elements/Image";
-import Link from "../elements/Link";
-import currencyFormat from "@/core/utils/currencyFormat";
-import { useRouter } from "next/router";
-import { toast } from "react-hot-toast";
-import { createOrUpdateItemCart } from "@/core/utils/cart";
-
-export default function VariantCard({ 
-  data,
-  openOnClick = true, 
-  buyMore = false
-}) {
-  let product = data;
-  const router = useRouter();
-
-  const addItemToCart = () => {
-    toast.success('Berhasil menambahkan ke keranjang', { duration: 1500 });
-    createOrUpdateItemCart(product.id, 1);
-    return;
-  };
-  
-  const checkoutItem = () => {
-    router.push(`/shop/checkout?product_id=${product.id}&qty=${product.quantity}`);
-  }
-
-  const Card = () => (
-    <div className="flex gap-x-3">
-      <div className="w-4/12 flex items-center gap-x-2">
-        <Image
-          src={product.parent.image} 
-          alt={product.parent.name} 
-          className="object-contain object-center border border-gray_r-6 h-32 w-full rounded-md"
-        />
-      </div>
-      <div className="w-8/12 flex flex-col">
-        <p className="product-card__title wrap-line-ellipsis-2">
-          {product.parent.name}
-        </p>
-        <p className="text-caption-2 text-gray_r-11 mt-1">
-          {product.code || '-'}
-          {product.attributes.length > 0 ? ` ・ ${product.attributes.join(', ')}` : ''}
-        </p>
-        <div className="flex flex-wrap gap-x-1 items-center mt-auto">
-          {product.price.discount_percentage > 0 && (
-            <>
-              <p className="text-caption-2 text-gray_r-11 line-through">{currencyFormat(product.price.price)}</p>
-              <span className="badge-red">{product.price.discount_percentage}%</span>
-            </>
-          )}
-          <p className="text-caption-2 text-gray_r-12">{currencyFormat(product.price.price_discount)}</p>
-        </div>
-        <p className="text-caption-2 text-gray_r-11 mt-1">
-          {currencyFormat(product.price.price_discount)} × {product.quantity} Barang
-        </p>
-        <p className="text-caption-2 text-gray_r-12 font-bold mt-2">
-          {currencyFormat(product.quantity * product.price.price_discount)}
-        </p>
-      </div>
-    </div>
-  );
-
-  if (openOnClick) {
-    return (
-      <>
-        <Link href={'/shop/product/' + createSlug(product.parent.name, product.parent.id)}>
-          <Card />
-        </Link>
-        { buyMore && (
-          <div className="flex justify-end gap-x-2 mb-2">
-            <button 
-              type="button" 
-              onClick={addItemToCart} 
-              className="btn-yellow text-gray_r-12 py-2 px-3"
-            >
-              Tambah Keranjang
-            </button>
-            <button 
-              type="button" 
-              onClick={checkoutItem} 
-              className="btn-solid-red py-2 px-3"
-            >
-              Beli Lagi
-            </button>
-          </div>
-        ) }
-      </>
-    );
-  }
-
-  return <Card/>;
-}
\ No newline at end of file
diff --git a/src/components/variants/VariantGroupCard.js b/src/components/variants/VariantGroupCard.js
deleted file mode 100644
index 462c63cf..00000000
--- a/src/components/variants/VariantGroupCard.js
+++ /dev/null
@@ -1,31 +0,0 @@
-import { useState } from "react"
-import VariantCard from "./VariantCard"
-
-export default function VariantGroupCard({
-  variants,
-  ...props
-}) {
-  const [ showAll, setShowAll ] = useState(false)
-  const variantsToShow = showAll ? variants : variants.slice(0, 2)
-
-  return (
-    <>
-      { variantsToShow?.map((variant, index) => (
-        <VariantCard
-          key={index}
-          data={variant}
-          {...props}
-        />
-      )) }
-      { variants.length > 2 && (
-        <button 
-          type="button" 
-          className="btn-light py-2 w-full"
-          onClick={() => setShowAll(!showAll)}
-        >
-          { !showAll ? `Lihat Semua +${variants.length - variantsToShow.length}` : 'Tutup' }
-        </button>
-      ) }
-    </>
-  )
-}
\ No newline at end of file