+
+
+
+
+
+
+
+
+ );
+}
diff --git a/components/delete-confirmation-dialog.tsx b/components/delete-confirmation-dialog.tsx
new file mode 100644
index 0000000..5f48309
--- /dev/null
+++ b/components/delete-confirmation-dialog.tsx
@@ -0,0 +1,70 @@
+import React, { useState, useTransition } from "react";
+import {
+ AlertDialog,
+ AlertDialogAction,
+ AlertDialogCancel,
+ AlertDialogContent,
+ AlertDialogDescription,
+ AlertDialogFooter,
+ AlertDialogHeader,
+ AlertDialogTitle,
+} from "@/components/ui/alert-dialog";
+import { toast } from "react-hot-toast";
+import { Loader2 } from "lucide-react";
+
+const DeleteConfirmationDialog = ({
+ open,
+ onClose,
+ onConfirm,
+ defaultToast = true,
+ toastMessage = "Successfully deleted",
+}: {
+ open: boolean;
+ onClose: () => void;
+ onConfirm?: () => Promise
+
+ )
+ }
+);
+
+interface EditorProps {
+ data?: string;
+ onChange?: (data: string) => void;
+ onReady?: (editor: any) => void;
+ onBlur?: (event: any, editor: any) => void;
+ onFocus?: (event: any, editor: any) => void;
+ config?: any;
+ disabled?: boolean;
+ className?: string;
+ fallbackToSimple?: boolean;
+}
+
+export default function Editor({
+ data = '',
+ onChange,
+ onReady,
+ onBlur,
+ onFocus,
+ config = {},
+ disabled = false,
+ className = '',
+ fallbackToSimple = true
+}: EditorProps) {
+ const [useSimpleEditor, setUseSimpleEditor] = useState(false);
+ const [isMounted, setIsMounted] = useState(false);
+
+ useEffect(() => {
+ setIsMounted(true);
+ }, []);
+
+ useEffect(() => {
+ // Check if CKEditor is available
+ const checkCKEditor = async () => {
+ try {
+ await import('@ckeditor/ckeditor5-react');
+ await import('ckeditor5');
+ setUseSimpleEditor(false);
+ } catch (error) {
+ console.warn('CKEditor not available, falling back to simple editor:', error);
+ if (fallbackToSimple) {
+ setUseSimpleEditor(true);
+ }
+ }
+ };
+
+ if (isMounted) {
+ checkCKEditor();
+ }
+ }, [isMounted, fallbackToSimple]);
+
+ if (!isMounted) {
+ return (
+ Loading editor...
+
+
+ );
+ }
+
+ if (useSimpleEditor) {
+ return (
+ Loading editor...
+
+
+ );
+ }
+
+ return (
+ Loading editor...
+
+ {/* Toolbar */}
+
+ );
+}
diff --git a/components/layout/admin-layout.tsx b/components/layout/admin-layout.tsx
deleted file mode 100644
index 537bcdb..0000000
--- a/components/layout/admin-layout.tsx
+++ /dev/null
@@ -1,89 +0,0 @@
-"use client";
-
-import { useEffect, useState } from "react";
-import React, { ReactNode } from "react";
-import { ThemeProvider } from "./theme-context";
-import { Breadcrumbs } from "./breadcrumbs";
-import { BurgerButtonIcon } from "../icons";
-
-import { motion, AnimatePresence } from "framer-motion";
-import { SidebarProvider } from "./sidebar-context";
-import { RetractingSidebar } from "../landing-page/retracting-sidedar";
-
-export const AdminLayout = ({ children }: { children: ReactNode }) => {
- const [isOpen, setIsOpen] = useState(true);
- const [hasMounted, setHasMounted] = useState(false);
-
- const updateSidebarData = (newData: boolean) => {
- setIsOpen(newData);
- };
-
- // Hooks
- useEffect(() => {
- setHasMounted(true);
- }, []);
-
- // Render loading state until mounted
- if (!hasMounted) {
- return (
-
+ {toolbarButtons.map((button) => {
+ const IconComponent = button.icon;
+ return (
+
+ );
+ })}
+
+
+
+ {/* Editor Content */}
+
+
-
-
- );
- }
-
- return (
-
-
-
-
-
- {/* Header */}
-
-
-
- {/* Main Content */}
-
-
-
-
-
-
-
-
-
-
- {children}
-
+
+ );
+};
+
+export default Loader;
+
diff --git a/components/logo.tsx b/components/logo.tsx
new file mode 100644
index 0000000..941e434
--- /dev/null
+++ b/components/logo.tsx
@@ -0,0 +1,42 @@
+"use client";
+import React from "react";
+import DashCodeLogo from "./dascode-logo";
+import { Link } from "@/i18n/routing";
+import { useConfig } from "@/hooks/use-config";
+import { useMenuHoverConfig } from "@/hooks/use-menu-hover";
+import { useMediaQuery } from "@/hooks/use-media-query";
+
+const Logo = () => {
+ const [config] = useConfig();
+ const [hoverConfig] = useMenuHoverConfig();
+ const { hovered } = hoverConfig;
+ const isDesktop = useMediaQuery("(min-width: 1280px)");
+
+ if (config.sidebar === "compact") {
+ return (
+
+
+ {/*
+
+ + DashCode +
*/} +D
+ )} */} +
+
+ );
+};
+
+export default Logo;
diff --git a/components/main/dashboard/dashboard-container.tsx b/components/main/dashboard/dashboard-container.tsx
index 4f2e0e1..61d8d44 100644
--- a/components/main/dashboard/dashboard-container.tsx
+++ b/components/main/dashboard/dashboard-container.tsx
@@ -125,18 +125,19 @@ export default function DashboardContainer() {
return (
{/* Stats Cards */}
-
+
{/* Total Shares */}
{/* User Profile Card */}
{/* Total Views */}
-
{username}
- +Welcome back,
+{username}
+Admin Dashboard
-
- {summary?.totalAll} +
+ {summary?.totalAll || 0}
-Total Posts
+Total Posts
-
- {summary?.totalViews} +
+ {summary?.totalViews || 0}
-Total Views
+Total Views
-
{/* Total Comments */}
- {summary?.totalShares} +
+ {summary?.totalShares || 0}
-Total Shares
+Total Shares
-
{/* Content Section */}
- - {summary?.totalComments} +
+ {summary?.totalComments || 0}
-Total Comments
+Total Comments
+
{/* Analytics Chart */}
{/* Recent Articles */}
-
+
+
+
Analytics Overview
@@ -250,25 +251,28 @@ export default function DashboardContainer() {
handleChange(option.value, checked as boolean)
}
/>
- {option.label}
+ {option.label}
))}
+
Chart will be displayed here
+
-
+
+
Recent Content
-
+
@@ -279,7 +283,7 @@ export default function DashboardContainer() {
{article?.map((list: any) => (
@@ -291,10 +295,10 @@ export default function DashboardContainer() {
className="h-20 w-20 object-cover rounded-lg shadow-sm flex-shrink-0"
/>
-
+
{list?.title}
-
+
{convertDateFormat(list?.createdAt)}
diff --git a/components/maps/Map copy.js b/components/maps/Map copy.js
new file mode 100644
index 0000000..1c0197d
--- /dev/null
+++ b/components/maps/Map copy.js
@@ -0,0 +1,365 @@
+import Cookies from "js-cookie";
+import React, { Component } from "react";
+import Geocode from "react-geocode";
+import Autocomplete from "react-google-autocomplete";
+import {
+ GoogleMap,
+ InfoWindow,
+ Marker,
+ withGoogleMap,
+ withScriptjs,
+} from "react-google-maps";
+import { GoogleMapsAPI } from "./client-config";
+
+Geocode.setApiKey(GoogleMapsAPI);
+Geocode.enableDebug();
+
+class Map extends Component {
+ constructor(props) {
+ super(props);
+ this.state = {
+ address: "",
+ city: "",
+ area: "",
+ state: "",
+ mapPosition: {
+ lat: this.props.center.lat,
+ lng: this.props.center.lng,
+ },
+ markerPosition: {
+ lat: this.props.center.lat,
+ lng: this.props.center.lng,
+ },
+ };
+ }
+
+ /**
+ * Get the current address from the default map position and set those values in the state
+ */
+ componentDidMount() {
+ Geocode.fromLatLng(
+ this.state.mapPosition.lat,
+ this.state.mapPosition.lng,
+ ).then(
+ (response) => {
+ const address = response.results[0].formatted_address;
+ const addressArray = response.results[0].address_components;
+ const city = this.getCity(addressArray);
+ const area = this.getArea(addressArray);
+ const state = this.getState(addressArray);
+
+ console.log("city", city, area, state);
+
+ this.setState({
+ address: address || "",
+ area: area || "",
+ city: city || "",
+ state: state || "",
+ });
+ },
+ (error) => {
+ console.error(error);
+ },
+ );
+ }
+
+ /**
+ * Component should only update ( meaning re-render ), when the user selects the address, or drags the pin
+ *
+ * @param nextProps
+ * @param nextState
+ * @return {boolean}
+ */
+ shouldComponentUpdate(nextProps, nextState) {
+ if (
+ this.state.markerPosition.lat !== this.props.center.lat ||
+ this.state.address !== nextState.address ||
+ this.state.city !== nextState.city ||
+ this.state.area !== nextState.area ||
+ this.state.state !== nextState.state
+ ) {
+ return true;
+ }
+
+ if (this.props.center.lat == nextProps.center.lat) {
+ return false;
+ }
+ }
+
+ /**
+ * Get the city and set the city input value to the one selected
+ *
+ * @param addressArray
+ * @return {string}
+ */
+ getCity = (addressArray) => {
+ let city = "";
+
+ for (const element of addressArray) {
+ if (
+ element.types[0] &&
+ element.types[0] == "administrative_area_level_2"
+ ) {
+ city = element.long_name;
+ return city;
+ }
+ }
+ };
+ /**
+ * Get the area and set the area input value to the one selected
+ *
+ * @param addressArray
+ * @return {string}
+ */
+ getArea = (addressArray) => {
+ let area = "";
+
+ for (const element of addressArray) {
+ if (element.types[0]) {
+ for (let j = 0; j < element.types.length; j++) {
+ if (
+ element.types[j] == "sublocality_level_1" ||
+ element.types[j] == "locality"
+ ) {
+ area = element.long_name;
+ return area;
+ }
+ }
+ }
+ }
+ };
+ /**
+ * Get the address and set the address input value to the one selected
+ *
+ * @param addressArray
+ * @return {string}
+ */
+ getState = (addressArray) => {
+ let state = "";
+
+ for (let i = 0; i < addressArray.length; i++) {
+ for (const element of addressArray) {
+ if (
+ element.types[0] &&
+ element.types[0] == "administrative_area_level_1"
+ ) {
+ state = element.long_name;
+ return state;
+ }
+ }
+ }
+ };
+ /**
+ * And function for city,state and address input
+ * @param event
+ */
+ onChange = (event) => {
+ this.setState({
+ [event.target.name]: event.target.value,
+ });
+ };
+ /**
+ * This Event triggers when the marker window is closed
+ *
+ * @param event
+ */
+ onInfoWindowClose = () => {};
+ /**
+ * When the marker is dragged you get the lat and long using the functions available from event object.
+ * Use geocode to get the address, city, area and state from the lat and lng positions.
+ * And then set those values in the state.
+ *
+ * @param event
+ */
+ onMarkerDragEnd = (event) => {
+ const newLat = event.latLng.lat();
+ const newLng = event.latLng.lng();
+
+ Geocode.fromLatLng(newLat, newLng).then(
+ (response) => {
+ const address = response.results[0].formatted_address;
+ const addressArray = response.results[0].address_components;
+ const city = this.getCity(addressArray);
+ const area = this.getArea(addressArray);
+ const state = this.getState(addressArray);
+
+ this.setState({
+ address: address || "",
+ area: area || "",
+ city: city || "",
+ state: state || "",
+ markerPosition: {
+ lat: newLat,
+ lng: newLng,
+ },
+ mapPosition: {
+ lat: newLat,
+ lng: newLng,
+ },
+ });
+ Cookies.set("map_lat", `${newLat}`, {
+ expires: 1
+ });
+ Cookies.set("map_long", `${newLng}`, {
+ expires: 1
+ });
+ $(".input-location-schedule").val(address);
+ },
+ (error) => {
+ console.error(error);
+ },
+ );
+ };
+ /**
+ * When the user types an address in the search box
+ * @param place
+ */
+ onPlaceSelected = (place) => {
+ console.log("plc", place);
+ const address = place.formatted_address;
+ const addressArray = place.address_components;
+ const city = this.getCity(addressArray);
+ const area = this.getArea(addressArray);
+ const state = this.getState(addressArray);
+ const latValue = place.geometry.location.lat();
+ const lngValue = place.geometry.location.lng();
+
+ // Set these values in the state.
+ this.setState({
+ address: address || "",
+ area: area || "",
+ city: city || "",
+ state: state || "",
+ markerPosition: {
+ lat: latValue,
+ lng: lngValue,
+ },
+ mapPosition: {
+ lat: latValue,
+ lng: lngValue,
+ },
+ });
+ Cookies.set("map_lat", `${latValue}`, {
+ expires: 1
+ });
+ Cookies.set("map_long", `${lngValue}`, {
+ expires: 1
+ });
+ $(".input-location-schedule").val(address);
+ };
+ render() {
+ const AsyncMap = withScriptjs(
+ withGoogleMap(() => (
+
+
+
+
+ {this.state.address}
+
+
+
+ {/* Marker */}
+
+ )),
+ );
+
+ let map;
+
+ if (this.props.center.lat == undefined) {
+ map = (
+
+ );
+ } else {
+ map = (
+
+ {/*
+
+
+
+
+
+
+
+
+ */}
+
+
+ );
+}
diff --git a/components/maps/MapHome.tsx b/components/maps/MapHome.tsx
new file mode 100644
index 0000000..691d4fa
--- /dev/null
+++ b/components/maps/MapHome.tsx
@@ -0,0 +1,29 @@
+import React, { Component } from "react";
+import Places from "./Maps";
+interface MapHomeProps {
+ newLat?: any;
+ newLng?: any;
+ draggable?: boolean;
+ setLocation: (location: string) => void;
+}
+
+class MapHome extends Component {
+ render() {
+ const { newLat, newLng, draggable, setLocation } = this.props;
+
+ const lat = newLat || -6.2393033;
+ const lng = newLng || 106.8013579;
+
+ return (
+
+
+ {selected && (
+
+
+ );
+}
+
+interface PlacesAutocompleteProps {
+ setSelected: (coords: { lat: number; lng: number }) => void;
+}
+
+function PlacesAutocomplete({ setSelected }: PlacesAutocompleteProps) {
+ const {
+ ready,
+ value,
+ setValue,
+ suggestions: { status, data },
+ clearSuggestions,
+ } = usePlacesAutocomplete();
+
+ const handleSelect = async (address: string) => {
+ setValue(address, false);
+ clearSuggestions();
+
+ try {
+ const results = await getGeocode({ address });
+ const { lat, lng } = await getLatLng(results[0]);
+
+ setSelected({ lat, lng });
+ console.log("Selected Lat/Lng:", { lat, lng });
+ Cookies.set("map_lat", `${lat}`, { expires: 1 });
+ Cookies.set("map_long", `${lng}`, { expires: 1 });
+ } catch (error) {
+ console.error("Error fetching coordinates:", error);
+ }
+ };
+
+ return (
+ setValue(newValue)}
+ onSelect={handleSelect}
+ suggestions={data}
+ status={status}
+ disabled={!ready}
+ placeholder="Cari Alamat"
+ className="border"
+ />
+ );
+}
diff --git a/components/maps/client-config.tsx b/components/maps/client-config.tsx
new file mode 100644
index 0000000..5b6e64a
--- /dev/null
+++ b/components/maps/client-config.tsx
@@ -0,0 +1 @@
+export const GoogleMapsAPI = "AIzaSyCuQHorDceMCzlSgrB9AEY5ns8KeriFsME";
diff --git a/components/nav.tsx b/components/nav.tsx
new file mode 100644
index 0000000..69551ea
--- /dev/null
+++ b/components/nav.tsx
@@ -0,0 +1,61 @@
+'use client'
+import React from 'react'
+import { cn } from '@/lib/utils'
+import { Icon } from '@/components/ui/icon'
+import { Button } from "@/components/ui/button"
+interface navProps {
+ dotStyle?: boolean
+ links: {
+ title: string
+ href?: string
+ active: boolean
+ label?: string
+ icon?: any
+ }[]
+}
+const Nav = ({ links, dotStyle = false }: navProps) => {
+ if (dotStyle) {
+ return (
+
+ )
+ }
+ return (
+
+ )
+}
+
+export default Nav
diff --git a/components/navigation.ts b/components/navigation.ts
index 86e4b05..9ac0445 100644
--- a/components/navigation.ts
+++ b/components/navigation.ts
@@ -1,5 +1,8 @@
-// import {createSharedPathnamesNavigation} from 'next-intl/navigation';
-// import {locales} from '@/config';
+import { createSharedPathnamesNavigation } from 'next-intl/navigation';
+import { locales } from '@/config';
-// export const {Link, redirect, usePathname, useRouter} =
-// createSharedPathnamesNavigation({locales,});
+export const { Link, redirect, usePathname, useRouter } =
+ createSharedPathnamesNavigation({
+ locales: locales,
+ defaultLocale: "in",
+ });
diff --git a/components/page-title.tsx b/components/page-title.tsx
new file mode 100644
index 0000000..d5cc348
--- /dev/null
+++ b/components/page-title.tsx
@@ -0,0 +1,269 @@
+"use client";
+import React, { useEffect, useState } from "react";
+import DateRangePicker from "@/components/date-range-picker";
+import { usePathname } from "@/components/navigation";
+import { cn, getCookiesDecrypt } from "@/lib/utils";
+import {
+ Dialog,
+ DialogContent,
+ DialogFooter,
+ DialogHeader,
+ DialogTitle,
+ DialogTrigger,
+} from "./ui/dialog";
+import { Button } from "./ui/button";
+import { Label } from "./ui/label";
+import { Input } from "./ui/input";
+import pdfGenerator from "@/utils/pdf-generator";
+import {
+ tableauSignin,
+ tableauViewImage,
+} from "@/service/tableau/tableau-service";
+
+const PageTitle = ({
+ title,
+ className,
+}: {
+ title?: string;
+ className?: string;
+}) => {
+ const [reportDate, setReportDate] = useState();
+ const pathname = usePathname();
+ const name = pathname?.split("/").slice(1).join(" ");
+ const roleId = getCookiesDecrypt("urie");
+
+ useEffect(() => {
+ console.log("role", roleId);
+ }, [roleId]);
+
+ const downloadReport = async () => {
+ console.log(reportDate);
+ const formattedDate = `${reportDate.year}-${String(
+ reportDate.month
+ ).padStart(2, "0")}-${String(reportDate.day).padStart(2, "0")}`;
+
+ const resLogin = await tableauSignin();
+ const token = resLogin?.data?.data?.credentials?.token;
+
+ const resFrontCover = await tableauViewImage(
+ token,
+ "5b35ec9c-add5-45e7-b71a-31a28db9954d",
+ reportDate
+ );
+ const resAssignmentDetail = await tableauViewImage(
+ token,
+ "b2e7e184-8311-49e1-8314-a6b2d8a8c6f8",
+ reportDate
+ );
+ // const resMonitoringContent = await tableauViewImage(
+ // token,
+ // "34683f52-1029-49e4-950d-2c94159ebd8f",
+ // reportDate
+ // );
+ // const resMonitoringArticle = await tableauViewImage(
+ // token,
+ // "34683f52-1029-49e4-950d-2c94159ebd8f",
+ // reportDate
+ // );
+ const resInteractionContent = await tableauViewImage(
+ token,
+ "8f038669-4135-4693-96e5-e6a957a1cc4f",
+ reportDate
+ );
+ const resTotalInteractionContent = await tableauViewImage(
+ token,
+ "e019e7f7-8d3b-4303-aa20-3fdbb318df1e",
+ reportDate
+ );
+ const resInteractionContentCategory1 = await tableauViewImage(
+ token,
+ "c1dcc6c8-17dc-4e30-85db-7938e30b4418",
+ reportDate
+ );
+ const resInteractionContentCategory2 = await tableauViewImage(
+ token,
+ "68b95c1d-aee1-4073-afb7-05188eccee67",
+ reportDate
+ );
+ const resInteractionContentCategory3 = await tableauViewImage(
+ token,
+ "7de1f07f-9a09-45a8-8ff6-96484106492d",
+ reportDate
+ );
+ const resInteractionDistribution = await tableauViewImage(
+ token,
+ "0781d7e6-e133-416c-bf41-e5b2fa5996dd",
+ reportDate
+ );
+ const resAssignments = await tableauViewImage(
+ token,
+ "b2e7e184-8311-49e1-8314-a6b2d8a8c6f8",
+ reportDate
+ );
+ const resUserCount = await tableauViewImage(
+ token,
+ "36ff675d-790c-4420-b0c7-0a6441f59cb1",
+ reportDate
+ );
+ const resUserCountDistribution = await tableauViewImage(
+ token,
+ "86370e20-b13d-4cb0-a54a-c25dc13bb427",
+ reportDate
+ );
+ const resBackCover = await tableauViewImage(
+ token,
+ "516c8790-ccd5-44dc-bb66-b0e146d7168b",
+ reportDate
+ );
+ const blobFrontCover = new Blob([resFrontCover.data], {
+ type: "image/png",
+ });
+ const blobAssignmentDetail = new Blob([resAssignmentDetail.data], {
+ type: "image/png",
+ });
+ // const blobMonitoringContent = new Blob([resMonitoringContent.data], { type: "image/png" });
+ // const blobMonitoringArticle = new Blob([resMonitoringArticle.data], { type: "image/png" });
+ const blobInteractionContent = new Blob([resInteractionContent.data], {
+ type: "image/png",
+ });
+ const blobTotalInteractionContent = new Blob(
+ [resTotalInteractionContent.data],
+ { type: "image/png" }
+ );
+ const blobInteractionContentCategory1 = new Blob(
+ [resInteractionContentCategory1.data],
+ { type: "image/png" }
+ );
+ const blobInteractionContentCategory2 = new Blob(
+ [resInteractionContentCategory2.data],
+ { type: "image/png" }
+ );
+ const blobInteractionContentCategory3 = new Blob(
+ [resInteractionContentCategory3.data],
+ { type: "image/png" }
+ );
+ const blobInteractionDistribution = new Blob(
+ [resInteractionDistribution.data],
+ { type: "image/png" }
+ );
+ const blobAssignments = new Blob([resAssignments.data], {
+ type: "image/png",
+ });
+ const blobUserCount = new Blob([resUserCount.data], { type: "image/png" });
+ const blobUserCountDistribution = new Blob(
+ [resUserCountDistribution.data],
+ { type: "image/png" }
+ );
+ const blobBackCover = new Blob([resBackCover.data], { type: "image/png" });
+
+ console.log(blobFrontCover);
+
+ await pdfGenerator([
+ blobFrontCover,
+ blobAssignmentDetail,
+ // blobMonitoringContent,
+ // blobMonitoringArticle,
+ blobInteractionContent,
+ blobTotalInteractionContent,
+ blobInteractionContentCategory1,
+ blobInteractionContentCategory2,
+ blobInteractionContentCategory3,
+ blobInteractionDistribution,
+ blobAssignments,
+ blobUserCount,
+ blobUserCountDistribution,
+ blobBackCover,
+ ]);
+ };
+
+ async function mergeImagesToCanvas(blobs: Blob[]) {
+ try {
+ const images = await Promise.all(
+ blobs.map((blob) => {
+ return new Promise((resolve) => {
+ const url = URL.createObjectURL(blob);
+ const img = new Image();
+ img.onload = () => {
+ resolve(img);
+ URL.revokeObjectURL(url);
+ };
+ img.src = url;
+ });
+ })
+ );
+
+ // Hitung total tinggi dari semua gambar (stacked vertically)
+ const width = Math.max(...images.map((img) => img.width));
+ const height = images.reduce((sum, img) => sum + img.height, 0);
+
+ const canvas = document.getElementById("pdf-canvas") as HTMLCanvasElement;
+ const ctx = canvas.getContext("2d")!;
+ canvas.width = width;
+ canvas.height = height;
+
+ let y = 0;
+ for (const img of images) {
+ ctx.drawImage(img, 0, y, img.width, img.height);
+ y += img.height;
+ }
+
+ // Simpan hasil sebagai gambar (PNG) atau bisa print
+ const dataURL = canvas.toDataURL("image/png");
+
+ // Simpan atau cetak (print sebagai PDF)
+ const link = document.createElement("a");
+ link.href = dataURL;
+ link.download = "merged-image.png";
+ link.click();
+
+ // Atau tampilkan dan user bisa "Print to PDF"
+ window.open(dataURL, "_blank");
+ } catch (error) {
+ console.log("Error :::", error);
+ }
+ }
+
+ return Number(roleId) == 2 || Number(roleId) == 11 || Number(roleId) == 12 ? (
+ ""
+ ) : (
+
+
+ Dashboard
+
+ {/* */}
+
+ );
+};
+
+export default PageTitle;
diff --git a/components/partials/auth/copyright.tsx b/components/partials/auth/copyright.tsx
new file mode 100644
index 0000000..826356c
--- /dev/null
+++ b/components/partials/auth/copyright.tsx
@@ -0,0 +1,8 @@
+
+
+const Copyright = () => {
+ const currentYear = new Date().getFullYear();
+ return <>Copyright {currentYear}, Dashcode All Rights Reserved.;
+};
+
+export default Copyright;
diff --git a/components/partials/auth/forgot-pass.tsx b/components/partials/auth/forgot-pass.tsx
new file mode 100644
index 0000000..9e114ea
--- /dev/null
+++ b/components/partials/auth/forgot-pass.tsx
@@ -0,0 +1,74 @@
+"use client";
+import React, { useState } from "react";
+
+import { Label } from "@/components/ui/label";
+import { Input } from "@/components/ui/input";
+import { Button } from "@/components/ui/button";
+type Inputs = {
+ example: string;
+ exampleRequired: string;
+};
+import { useForm, SubmitHandler } from "react-hook-form";
+import { error, loading } from "@/config/swal";
+import withReactContent from "sweetalert2-react-content";
+import Swal from "sweetalert2";
+import { useRouter } from "@/i18n/routing";
+import { forgotPassword } from "@/service/landing/landing";
+
+const ForgotPass = () => {
+ const [username, setUsername] = useState();
+ const MySwal = withReactContent(Swal);
+ const router = useRouter();
+
+ const {
+ register,
+ handleSubmit,
+ watch,
+ formState: { errors },
+ } = useForm();
+ const onSubmit: SubmitHandler = (data) => console.log(data);
+
+ async function handleCheckUsername() {
+ loading();
+ const response = await forgotPassword(username);
+
+ if (response.error) {
+ error(response.message);
+ return false;
+ }
+
+ successSubmit();
+ return false;
+ }
+
+ function successSubmit() {
+ MySwal.fire({
+ title: "Email berhasil dikirim. Silahkan cek email Anda.",
+ icon: "success",
+ confirmButtonColor: "#3085d6",
+ confirmButtonText: "OK",
+ }).then((result: any) => {
+ if (result.isConfirmed) {
+ router.push("/admin");
+ }
+ });
+ }
+
+ return (
+
+ );
+};
+
+export default ForgotPass;
diff --git a/components/partials/auth/lock.tsx b/components/partials/auth/lock.tsx
new file mode 100644
index 0000000..1752db0
--- /dev/null
+++ b/components/partials/auth/lock.tsx
@@ -0,0 +1,40 @@
+"use client";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { useForm, SubmitHandler } from "react-hook-form";
+
+type Inputs = {
+ example: string;
+ exampleRequired: string;
+};
+
+const LockScreen = () => {
+ const {
+ register,
+ handleSubmit,
+ watch,
+ formState: { errors },
+ } = useForm();
+ const onSubmit: SubmitHandler = (data) => console.log(data);
+ console.log(watch("example"));
+
+ return (
+
+ );
+};
+export default LockScreen;
diff --git a/components/partials/auth/login-form.tsx b/components/partials/auth/login-form.tsx
new file mode 100644
index 0000000..ec9e36e
--- /dev/null
+++ b/components/partials/auth/login-form.tsx
@@ -0,0 +1,652 @@
+"use client";
+import React, { useEffect, useState } from "react";
+import { Button } from "@/components/ui/button";
+import { Checkbox } from "@/components/ui/checkbox";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import Cookies from "js-cookie";
+import { Icon } from "@/components/ui/icon";
+import { useForm, SubmitHandler } from "react-hook-form";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { z } from "zod";
+import { cn, getCookiesDecrypt, setCookiesEncrypt } from "@/lib/utils";
+import { Eye, EyeOff, Loader2 } from "lucide-react";
+import {
+ getProfile,
+ login,
+ postEmailValidation,
+ postSetupEmail,
+ requestOTP,
+ verifyOTPByUsername,
+} from "@/service/auth";
+import { toast } from "sonner";
+import { useRouter } from "@/components/navigation";
+import { warning } from "@/lib/swal";
+import { Link } from "@/i18n/routing";
+import { useTranslations } from "next-intl";
+import {
+ InputOTP,
+ InputOTPGroup,
+ InputOTPSeparator,
+ InputOTPSlot,
+} from "@/components/ui/input-otp";
+import { error, loading } from "@/config/swal";
+import { data } from "jquery";
+import {
+ Dialog,
+ DialogContent,
+ DialogFooter,
+ DialogTrigger,
+} from "@/components/ui/dialog";
+import { getUserNotifications, listRole } from "@/service/landing/landing";
+
+// Schema validasi menggunakan zod
+const schema = z.object({
+ username: z.string().min(1, { message: "Judul diperlukan" }),
+ password: z
+ .string()
+ .min(4, { message: "Password must be at least 4 characters." }),
+});
+
+// Tipe untuk form values
+type LoginFormValues = {
+ username: string;
+ password: string;
+};
+
+const LoginForm = () => {
+ const [isPending, startTransition] = React.useTransition();
+ const router = useRouter();
+ const [passwordType, setPasswordType] = React.useState("password");
+ const t = useTranslations("LandingPage");
+
+ const [step, setStep] = useState(1);
+ const [otpValue, setOtpValue] = useState("");
+ const [userIdentity] = useState();
+ const [email, setEmail] = useState();
+ const [category, setCategory] = useState("5");
+ const roleId = getCookiesDecrypt("urie");
+
+ const [username, setUsername] = useState("");
+ const [password, setPassword] = useState("");
+ const [oldEmail, setOldEmail] = useState("");
+ const [oldEmailValidate, setOldEmailValidate] = useState("");
+ const [role, setRole] = useState();
+ const [menuActive, setMenuActive] = useState();
+ const [notifications, setNotifications] = useState([]);
+ const [notificationsUpdate, setNotificationsUpdate] = useState([]);
+ const [newEmail, setNewEmail] = useState("");
+ const [newEmailValidate, setNewEmailValidate] = useState("");
+ const [otpValidate, setOtpValidate] = useState("");
+ const [showPassword, setShowPassword] = useState(false);
+
+ const togglePasswordType = () => {
+ setPasswordType((prevType) =>
+ prevType === "password" ? "text" : "password"
+ );
+ };
+
+ const {
+ register,
+ handleSubmit,
+ getValues,
+ formState: { errors },
+ } = useForm({
+ resolver: zodResolver(schema),
+ mode: "all",
+ });
+
+ const handleTypeOTP = (event: React.KeyboardEvent) => {
+ const { key } = event;
+ const target = event.currentTarget;
+
+ if (key === "Enter") {
+ event.preventDefault();
+
+ const inputs = Array.from(target.form?.querySelectorAll("input") || []);
+ const currentIndex = inputs.indexOf(target);
+ const nextInput = inputs[currentIndex + 1] as HTMLElement | undefined;
+
+ if (nextInput) {
+ nextInput.focus();
+ }
+ }
+ };
+
+ const onSubmit: SubmitHandler = async (data) => {
+ try {
+ const response = await login({
+ ...data,
+ grantType: "password",
+ clientId: "mediahub-app",
+ });
+
+ console.log("LOGIN: ", response);
+
+ if (response?.error) {
+ toast.error("Username / Password Tidak Sesuai");
+ } else {
+ const { access_token } = response?.data;
+ const { refresh_token } = response?.data;
+ const dateTime = new Date();
+ const newTime = dateTime.getTime() + 10 * 60 * 1000;
+
+ Cookies.set("access_token", access_token, {
+ expires: 1,
+ });
+ Cookies.set("refresh_token", refresh_token, {
+ expires: 1,
+ });
+ Cookies.set("time_refresh", new Date(newTime).toISOString(), {
+ expires: 1,
+ });
+
+ Cookies.set("is_first_login", String(true), {
+ secure: true,
+ sameSite: "strict",
+ });
+ const profile = await getProfile(access_token);
+ console.log("PROFILE : ", profile?.data?.data);
+
+ Cookies.set("home_path", profile?.data?.data?.homePath, {
+ expires: 1,
+ });
+ Cookies.set(
+ "profile_picture",
+ profile?.data?.data?.profilePictureUrl,
+ {
+ expires: 1,
+ }
+ );
+ Cookies.set("state", profile?.data?.data?.userLevel?.name, {
+ expires: 1,
+ });
+ Cookies.set(
+ "state-prov",
+ profile.data?.data?.userLevel?.province?.provName,
+ {
+ expires: 1,
+ }
+ );
+ setCookiesEncrypt("uie", profile?.data?.data?.id, {
+ expires: 1,
+ });
+ setCookiesEncrypt("urie", profile?.data?.data?.roleId, {
+ expires: 1,
+ });
+ setCookiesEncrypt("urne", profile?.data?.data?.role?.name, {
+ expires: 1,
+ });
+ setCookiesEncrypt("ulie", profile?.data?.data?.userLevel?.id, {
+ expires: 1,
+ });
+ setCookiesEncrypt(
+ "uplie",
+ profile?.data?.data?.userLevel?.parentLevelId,
+ {
+ expires: 1,
+ }
+ );
+ setCookiesEncrypt(
+ "ulne",
+ profile?.data?.data?.userLevel?.levelNumber,
+ {
+ expires: 1,
+ }
+ );
+ setCookiesEncrypt("ufne", profile?.data?.data?.fullname, {
+ expires: 1,
+ });
+ setCookiesEncrypt("ulnae", profile?.data?.data?.userLevel?.name, {
+ expires: 1,
+ });
+ setCookiesEncrypt("uinse", profile?.data?.data?.instituteId, {
+ expires: 1,
+ });
+ console.log("ssaddd", profile?.data?.data?.roleId);
+ if (
+ Number(profile?.data?.data?.roleId) == 2 ||
+ Number(profile?.data?.data?.roleId) == 3 ||
+ Number(profile?.data?.data?.roleId) == 4 ||
+ Number(profile?.data?.data?.roleId) == 9 ||
+ Number(profile?.data?.data?.roleId) == 10 ||
+ Number(profile?.data?.data?.roleId) == 11 ||
+ Number(profile?.data?.data?.roleId) == 12 ||
+ Number(profile?.data?.data?.roleId) == 18 ||
+ Number(profile?.data?.data?.roleId) == 19
+ ) {
+ if (profile?.data?.data?.roleId === 18) {
+ window.location.href = "/in/dashboard/executive-data";
+ // router.push('/admin/dashboard');
+ Cookies.set("status", "login", {
+ expires: 1,
+ });
+ } else if (profile?.data?.data?.roleId === 2) {
+ window.location.href = "/in/dashboard/executive";
+ Cookies.set("status", "login", {
+ expires: 1,
+ });
+ } else if (
+ profile?.data?.data?.userLevel?.id == 794 ||
+ profile?.data?.data?.userLevel?.parentLevelId == 761
+ ) {
+ window.location.href = "/in/dashboard";
+ Cookies.set("status", "login", {
+ expires: 1,
+ });
+ } else {
+ window.location.href = "/in/dashboard";
+ // router.push('/admin/dashboard');
+ Cookies.set("status", "login", {
+ expires: 1,
+ });
+ }
+ } else {
+ window.location.href = "/";
+ Cookies.set("status", "login", {
+ expires: 1,
+ });
+ }
+ }
+ } catch (err: any) {
+ toast.error(err.message || "An unexpected error occurred.");
+ }
+ // startTransition( () => {
+
+ // });
+ };
+
+ const handleEmailValidation = async () => {
+ const data = getValues();
+
+ // loading();
+ const response = await postEmailValidation(data);
+
+ if (response?.error) {
+ error(response?.message);
+ return false;
+ }
+ const msg = response?.data?.message;
+ if (msg == "Continue to setup email") {
+ setStep(2);
+ } else if (msg == "Email is valid and OTP has been sent") {
+ setStep(3);
+ } else if (msg == "Username & password valid") {
+ onSubmit(data);
+ } else {
+ setStep(1);
+ }
+ };
+
+
+ const handleSetupEmail = async () => {
+ const values = getValues();
+ const data = {
+ username: values.username,
+ password: values.password,
+ oldEmail: oldEmail,
+ newEmail: newEmail,
+ };
+
+ // loading();
+ const response = await postSetupEmail(data);
+ // close();
+ if (response?.error) {
+ error(response.message);
+ return false;
+ }
+ const msg = response?.data?.message;
+ if (msg == "Email is valid and OTP has been sent") {
+ setStep(3);
+ } else if (msg == "The old email is not same") {
+ error("Email is invalid");
+ }
+ };
+
+ const checkEmail = (state: any, e: any) => {
+ const regEmail =
+ /^(([^\s"(),.:;<>@[\\\]]+(\.[^\s"(),.:;<>@[\\\]]+)*)|(".+"))@((\[(?:\d{1,3}\.){3}\d{1,3}])|(([\dA-Za-z\-]+\.)+[A-Za-z]{2,}))$/;
+
+ if (regEmail.test(e)) {
+ if (state == "old") {
+ setOldEmailValidate("");
+ setOldEmail(e);
+ } else {
+ setNewEmailValidate("");
+ setNewEmail(e);
+ }
+ } else {
+ if (state == "old") {
+ setOldEmailValidate("Email tidak valid");
+ setOldEmail("");
+ } else {
+ setNewEmailValidate("Email tidak valid");
+ setNewEmail("");
+ }
+ }
+ };
+
+ const handleLoginOTP = async () => {
+ // const otp = `${otp1}${otp2}${otp3}${otp4}${otp5}${otp6}`;
+ const values = getValues();
+
+ if (otpValue.length === 6) {
+ loading();
+ const response = await verifyOTPByUsername(values.username, otpValue);
+
+ if (response?.error) {
+ error(response.message);
+ return false;
+ }
+
+ close();
+
+ if (response?.message === "success") {
+ onSubmit(values);
+ } else {
+ setOtpValidate("Kode OTP Tidak Valid");
+ }
+ }
+ };
+
+ let menu = "";
+
+ useEffect(() => {
+ async function initState() {
+ setMenuActive(menu);
+ const res = await listRole();
+ setRole(res?.data?.data);
+ }
+
+ async function getNotif() {
+ if (roleId != undefined) {
+ const response = await getUserNotifications(0, 2);
+ setNotifications(response?.data?.data?.content);
+ console.log("respon:", response);
+ }
+ }
+
+ async function getNotifUpdate() {
+ if (roleId != undefined) {
+ const response = await getUserNotifications(0, 3);
+ setNotificationsUpdate(response?.data?.data?.content);
+ console.log("Notiffff:", response);
+ }
+ }
+
+ initState();
+ getNotif();
+ getNotifUpdate();
+ }, []);
+
+ return (
+ <>
+ {step !== 3 && (
+
+ )}
+
+ {step === 3 && (
+
+
+
+ {t("pleaseEnterOtp", { defaultValue: "Please Enter Otp" })}
+
+
+
+
+ setOtpValue(val)}
+ >
+
+
+
+
+
+
+
+
+
+ {otpValidate && (
+
+ {otpValidate}
+
+ )}
+
+
+
+ )}
+
+ );
+};
+
+export default LoginForm;
diff --git a/components/partials/auth/logo.tsx b/components/partials/auth/logo.tsx
new file mode 100644
index 0000000..cace5c3
--- /dev/null
+++ b/components/partials/auth/logo.tsx
@@ -0,0 +1,24 @@
+'use client'
+import Image from 'next/image';
+import { useTheme } from "next-themes";
+
+const Logo = () => {
+ const { theme: mode } = useTheme();
+ return (
+
+ ();
+ const onSubmit: SubmitHandler = (data) => console.log(data);
+ console.log(watch("example"));
+
+ return (
+
+ );
+};
+export default RegForm;
diff --git a/components/partials/auth/social.tsx b/components/partials/auth/social.tsx
new file mode 100644
index 0000000..9401d66
--- /dev/null
+++ b/components/partials/auth/social.tsx
@@ -0,0 +1,75 @@
+import Image from "next/image";
+
+const Social = ({ locale }: { locale: string }) => {
+ return (
+ <>
+
+
+ );
+};
+
+export default Social;
diff --git a/components/partials/customizer/buy-button.tsx b/components/partials/customizer/buy-button.tsx
new file mode 100644
index 0000000..26f0893
--- /dev/null
+++ b/components/partials/customizer/buy-button.tsx
@@ -0,0 +1,28 @@
+'use client'
+import { useTheme } from 'next-themes';
+import React from 'react'
+import { Button } from '@/components/ui/button';
+import Link from 'next/link';
+import { useMediaQuery } from '@/hooks/use-media-query';
+
+const BuyButton = () => {
+ const { theme: mode } = useTheme();
+ const isMobile = useMediaQuery("(min-width: 768px)");
+ return (
+ <>
+
+
+
+ )
+}
+
+export default BuyButton
\ No newline at end of file
diff --git a/components/partials/customizer/color-schema.tsx b/components/partials/customizer/color-schema.tsx
new file mode 100644
index 0000000..954777a
--- /dev/null
+++ b/components/partials/customizer/color-schema.tsx
@@ -0,0 +1,64 @@
+"use client";
+
+import * as React from "react";
+import { useTheme } from "next-themes";
+import { hexToRGB } from "@/lib/utils";
+import { cn } from "@/lib/utils";
+import { Label } from "@/components/ui/label";
+import { Icon } from "@/components/ui/icon"
+
+import { Check } from "lucide-react";
+
+const allThemes = [
+ { key: "light", label: "Light", icon: "heroicons:sun" },
+ { key: "dark", label: "Dark", icon: "heroicons:moon" },
+ { key: "system", label: "System", icon: "heroicons:window" },
+
+];
+
+const ColorSchema = () => {
+ const { theme, setTheme, resolvedTheme: mode } = useTheme();
+
+ return (
+
+
+ Color Scheme
+
+
+
+ {allThemes?.map((themeOption) => (
+
+
+
+
+ ))}
+
+
+ );
+};
+
+export default ColorSchema;
diff --git a/components/partials/customizer/copy-cutomizer.tsx b/components/partials/customizer/copy-cutomizer.tsx
new file mode 100644
index 0000000..eed7e78
--- /dev/null
+++ b/components/partials/customizer/copy-cutomizer.tsx
@@ -0,0 +1,22 @@
+'use client'
+
+import { CopyButton } from "@/components/copy-button"
+import { useConfig } from "@/hooks/use-config"
+
+const CopyCustomizer = () => {
+ const [config] = useConfig()
+ const code = JSON.stringify(config, null, 2)
+ return (
+ {
+ setConfig({ ...config, footer: value as any });
+ }}
+
+ >
+ {["sticky", "hidden", "default"].map((value, index) => {
+ return (
+
+
+
+ );
+};
+
+export default FooterStyle;
diff --git a/components/partials/customizer/full-screen.tsx b/components/partials/customizer/full-screen.tsx
new file mode 100644
index 0000000..cc7492e
--- /dev/null
+++ b/components/partials/customizer/full-screen.tsx
@@ -0,0 +1,52 @@
+'use client'
+import { FC, MouseEventHandler } from "react";
+import { Button } from "@/components/ui/button";
+import { Maximize } from "lucide-react";
+
+
+type CustomDocument = Document & {
+ mozCancelFullScreen?: () => void;
+};
+const FullScreenToggle: FC = () => {
+ const toggleFullScreen: MouseEventHandler = () => {
+ const doc = document;
+ const docEl = doc.documentElement;
+
+ const requestFullScreen =
+ docEl.requestFullscreen ||
+ docEl.requestFullscreen ||
+ docEl.requestFullscreen ||
+ docEl.requestFullscreen;
+ const cancelFullScreen =
+ doc.exitFullscreen ||
+ (doc as CustomDocument).mozCancelFullScreen ||
+ doc.exitFullscreen ||
+ doc.exitFullscreen;
+
+ if (
+ !doc.fullscreenElement &&
+ !doc.fullscreenElement &&
+ !doc.fullscreenElement &&
+ !doc.fullscreenElement
+ ) {
+ requestFullScreen?.call(docEl);
+ } else {
+ cancelFullScreen?.call(doc);
+ }
+ };
+
+ return (
+
+ );
+};
+
+export default FullScreenToggle;
\ No newline at end of file
diff --git a/components/partials/customizer/header-color.tsx b/components/partials/customizer/header-color.tsx
new file mode 100644
index 0000000..dc5aa76
--- /dev/null
+++ b/components/partials/customizer/header-color.tsx
@@ -0,0 +1,186 @@
+'use client'
+import React from 'react'
+import { cn } from "@/lib/utils"
+import { Label } from "@/components/ui/label"
+import { useConfig } from '@/hooks/use-config'
+import { Icon } from "@/components/ui/icon"
+import { Check } from 'lucide-react';
+import {
+ Tooltip,
+ TooltipContent,
+ TooltipProvider,
+ TooltipTrigger,
+} from "@/components/ui/tooltip"
+
+import {
+ lightTopbarColorSvg,
+ colorTopbarColorSvg,
+ borderedSkinSvg,
+} from "./data";
+
+const HeaderColor = () => {
+ const [config, setConfig] = useConfig()
+ const [show, setShow] = React.useState(
+ config.headerTheme !== 'light' && config.headerTheme === 'transparent'
+ )
+
+ return (
+
+ Topbar Color
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {show && (
+
+ {[
+ "dark",
+ "rose",
+ "steel-blue",
+ "purple",
+ "redwood",
+ "green",
+ "ocean-blue",
+ "gray",
+ ].map((color) => (
+
+
+
+
+
+
+
+ {color}
+
+
+
+
+ ))}
+
+ )}
+
+ );
+}
+
+export default HeaderColor
\ No newline at end of file
diff --git a/components/partials/customizer/header-style.tsx b/components/partials/customizer/header-style.tsx
new file mode 100644
index 0000000..3c3b848
--- /dev/null
+++ b/components/partials/customizer/header-style.tsx
@@ -0,0 +1,40 @@
+"use client";
+import { useConfig } from "@/hooks/use-config";
+import { Check } from "lucide-react";
+import { cn } from "@/lib/utils";
+import { Label } from "@/components/ui/label"
+import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group"
+import { navBarType } from "@/lib/type";
+const HeaderStyle = () => {
+
+ const [config, setConfig] = useConfig();
+
+ const { navbar } = config;
+
+
+ return (
+
+ Navbar Type
+ {
+ setConfig({ ...config, navbar: value as navBarType });
+ }}
+ >
+ {["floating", "sticky", "hidden", "default"].map((value, index) => {
+ return (
+
+
+
+ );
+};
+
+export default HeaderStyle;
diff --git a/components/partials/customizer/index.tsx b/components/partials/customizer/index.tsx
new file mode 100644
index 0000000..83bbf61
--- /dev/null
+++ b/components/partials/customizer/index.tsx
@@ -0,0 +1,128 @@
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import {
+ Sheet,
+ SheetClose,
+ SheetContent,
+ SheetDescription,
+ SheetFooter,
+ SheetHeader,
+ SheetTitle,
+ SheetTrigger,
+} from "@/components/ui/sheet";
+import { Link } from '@/i18n/routing';
+import { ScrollArea } from "@/components/ui/scroll-area";
+import { Icon } from "@/components/ui/icon";
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
+import ColorSchema from "./color-schema";
+import SetSkin from "./set-skin";
+import MenuHidden from "./menu-hidden";
+import SearchBarToggle from "./search-bar-toggle";
+import TeamSwitcherToggle from "./team-switcher-toggle";
+import SetContentWidth from "./set-content-width";
+import SetLayout from "./set-layout";
+import SetSidebar from "./set-sidebar";
+import SidebarColor from "./sidebar-color";
+import HeaderColor from "./header-color";
+import SidebarBg from "./sidebar-bg";
+import HeaderStyle from "./header-style";
+import FooterStyle from "./footer-style";
+import ResetConfig from "./reset-config";
+import FullScreenToggle from "./full-screen";
+import CopyCustomizer from "./copy-cutomizer";
+import BuyButton from "./buy-button";
+
+const ThemeCustomize = ({ }) => {
+ return (
+
+
+
+
+
+
+
+
+
+ Template Customizer
+
+
+ Customize and preview in real time
+
+
+
+
+
+
+
+
+
+
+ Theme Style
+
+
+ Theme Color
+
+
+
+
+
+
+
+
+
+
+ {/*
+ */}
+
+
+ );
+};
+
+export default ThemeCustomize;
diff --git a/components/partials/customizer/menu-hidden.tsx b/components/partials/customizer/menu-hidden.tsx
new file mode 100644
index 0000000..7f8b4d8
--- /dev/null
+++ b/components/partials/customizer/menu-hidden.tsx
@@ -0,0 +1,32 @@
+'use client'
+import React from 'react'
+import { Checkbox } from "@/components/ui/checkbox"
+import { useConfig } from '@/hooks/use-config'
+
+const MenuHidden = () => {
+ const [config, setConfig] = useConfig()
+
+ if (config.layout === 'horizontal') return null
+
+ return (
+
+
+ setConfig({ ...config, menuHidden: !config.menuHidden })
+ }
+
+ />
+
+
+ );
+}
+
+export default MenuHidden
\ No newline at end of file
diff --git a/components/partials/customizer/reset-config.tsx b/components/partials/customizer/reset-config.tsx
new file mode 100644
index 0000000..449ea14
--- /dev/null
+++ b/components/partials/customizer/reset-config.tsx
@@ -0,0 +1,26 @@
+'use client'
+import React from 'react'
+import { RefreshCcw } from 'lucide-react';
+import { useConfig, defaultConfig } from '@/hooks/use-config';
+
+
+const ResetConfig = () => {
+ const [config, setConfig] = useConfig()
+ return (
+ <>
+ {
+ setConfig({
+
+
+ ...defaultConfig
+
+ })
+ }}
+
+ className=" h-4 w-4 cursor-pointer text-default-600 hover:rotate-180 duration-150 me-4" />
+
+ )
+}
+
+export default ResetConfig
\ No newline at end of file
diff --git a/components/partials/customizer/search-bar-toggle.tsx b/components/partials/customizer/search-bar-toggle.tsx
new file mode 100644
index 0000000..8edae12
--- /dev/null
+++ b/components/partials/customizer/search-bar-toggle.tsx
@@ -0,0 +1,29 @@
+'use client'
+import React from 'react'
+import { Checkbox } from "@/components/ui/checkbox"
+import { useConfig } from '@/hooks/use-config'
+
+const SearchBarToggle = () => {
+ const [config, setConfig] = useConfig()
+ if (config.menuHidden || config.layout === 'horizontal') return null
+ return (
+
+
+ setConfig({ ...config, showSearchBar: !config.showSearchBar })
+ }
+ />
+
+
+ );
+}
+
+export default SearchBarToggle
\ No newline at end of file
diff --git a/components/partials/customizer/set-content-width.tsx b/components/partials/customizer/set-content-width.tsx
new file mode 100644
index 0000000..df3ba6b
--- /dev/null
+++ b/components/partials/customizer/set-content-width.tsx
@@ -0,0 +1,71 @@
+"use client";
+import React from "react";
+import { cn } from "@/lib/utils";
+import { Label } from "@/components/ui/label";
+import { useConfig } from "@/hooks/use-config";
+import { Icon } from "@/components/ui/icon";
+import { wideContentWidthSvg, boxedContentWidthSvg } from "./data";
+import { contentType } from "@/lib/type";
+
+const allContent: { key: contentType; label: string }[] = [
+ { key: "wide", label: "Wide" },
+ { key: "boxed", label: "Boxed" },
+];
+const SetContentWidth = () => {
+ const [config, setConfig] = useConfig();
+
+ return (
+
+ Content Width
+
+ {allContent?.map(({ key, label }, index) => (
+
+
+
+
+
+ ))}
+
+
+ );
+};
+
+export default SetContentWidth;
diff --git a/components/partials/customizer/set-layout.tsx b/components/partials/customizer/set-layout.tsx
new file mode 100644
index 0000000..fd63e55
--- /dev/null
+++ b/components/partials/customizer/set-layout.tsx
@@ -0,0 +1,91 @@
+'use client'
+import React from 'react'
+import { cn } from "@/lib/utils"
+import { Label } from "@/components/ui/label"
+import { useConfig } from '@/hooks/use-config'
+import { Icon } from "@/components/ui/icon"
+import Image from 'next/image'
+import { layoutType } from '@/lib/type'
+import {
+ verticalLayoutSvg,
+ horizontalLayoutSvg,
+ semiBoxLayoutSvg,
+ compactLayoutSvg,
+} from "./data";
+
+const allLayouts: { key: layoutType, label: string, icon: string }[] = [
+ { key: "vertical", label: "Vertical", icon: "heroicons:chart-bar", },
+ {
+ key: "horizontal",
+ label: "Horizontal",
+ icon: "heroicons:chart-pie",
+
+ },
+ { key: "semi-box", label: "SemiBox", icon: "heroicons:chart-pie" },
+ { key: "compact", label: "Compact", icon: "heroicons:chart-pie" },
+];
+
+
+const SetLayout = () => {
+ const [config, setConfig] = useConfig()
+
+
+
+
+ return (
+
+ Layout
+
+ {allLayouts?.map(({ key, label, icon }, index) => (
+
+
+
+
+
+ ))}
+
+
+ );
+}
+
+export default SetLayout
\ No newline at end of file
diff --git a/components/partials/customizer/set-sidebar.tsx b/components/partials/customizer/set-sidebar.tsx
new file mode 100644
index 0000000..88928d6
--- /dev/null
+++ b/components/partials/customizer/set-sidebar.tsx
@@ -0,0 +1,80 @@
+'use client'
+import React from 'react'
+import { cn } from "@/lib/utils"
+import { Label } from "@/components/ui/label"
+import { useConfig } from '@/hooks/use-config'
+import { Icon } from "@/components/ui/icon"
+import { sidebarType } from '@/lib/type'
+import {
+ classicSidebarSvg,
+ draggableSidebarSvg,
+ twoColumnSidebarSvg,
+ compactSidebarSvg,
+} from "./data";
+
+const allSidebars: { key: sidebarType, label: string, icon: string }[] = [
+ { key: "classic", label: "Classic", icon: "heroicons:chart-bar" },
+ { key: "draggable", label: "Draggable", icon: "heroicons:chart-pie" },
+ { key: "two-column", label: "Two Column", icon: "heroicons:chart-pie" },
+ { key: "compact", label: "Compact", icon: "heroicons:chart-pie" },
+];
+
+
+const SetSidebar = () => {
+ const [config, setConfig] = useConfig()
+
+ return (
+
+ Sidebar
+
+ {allSidebars?.map(({ key, label, icon }, index) => (
+
+
+
+
+
+ ))}
+
+
+ );
+}
+
+export default SetSidebar
\ No newline at end of file
diff --git a/components/partials/customizer/set-skin.tsx b/components/partials/customizer/set-skin.tsx
new file mode 100644
index 0000000..0b1cf33
--- /dev/null
+++ b/components/partials/customizer/set-skin.tsx
@@ -0,0 +1,71 @@
+'use client'
+import React from 'react'
+import { cn } from "@/lib/utils"
+import { Label } from "@/components/ui/label"
+import { useConfig } from '@/hooks/use-config'
+import { Icon } from "@/components/ui/icon"
+import {
+ borderedSkinSvg,
+ defaultSkinSvg,
+} from "./data";
+import { skinType } from '@/lib/type'
+
+const allSkin: { key: skinType; label: string; }[] = [
+ { key: "default", label: "Default" },
+ { key: "bordered", label: "Bordered" },
+];
+
+const SetSkin = () => {
+ const [config, setConfig] = useConfig()
+
+ return (
+
+ Skins
+
+ {allSkin?.map(({ key, label }, index) => (
+
+
+
+
+
+ ))}
+
+
+ );
+}
+
+export default SetSkin
\ No newline at end of file
diff --git a/components/partials/customizer/sidebar-bg.tsx b/components/partials/customizer/sidebar-bg.tsx
new file mode 100644
index 0000000..c1dc6be
--- /dev/null
+++ b/components/partials/customizer/sidebar-bg.tsx
@@ -0,0 +1,73 @@
+'use client'
+import { useConfig } from '@/hooks/use-config';
+import React, { useState } from 'react'
+import { Icon } from "@/components/ui/icon"
+import { cn } from "@/lib/utils";
+const SidebarBg = () => {
+ const [config, setConfig] = useConfig();
+ const { sidebarBgImage } = config;
+ const [selectedFiles, setSelectedFiles] = useState([
+ "/images/all-img/img-2.jpeg",
+ "/images/all-img/img-1.jpeg",
+ ]);
+ const handleFileChange = (e: any) => {
+ const file = e.target.files[0];
+ setSelectedFiles([...selectedFiles, URL.createObjectURL(file)]);
+ };
+
+ const handleClear = () => {
+ setConfig({
+ ...config,
+ sidebarBgImage: undefined,
+ })
+ };
+ return (
+
+
+ Choose a Sidebar Image
+
+
+
+ {selectedFiles.map((file, index) => (
+
+ ))}
+
+
+
+ );
+}
+
+export default SidebarBg
\ No newline at end of file
diff --git a/components/partials/customizer/sidebar-color.tsx b/components/partials/customizer/sidebar-color.tsx
new file mode 100644
index 0000000..9698e8f
--- /dev/null
+++ b/components/partials/customizer/sidebar-color.tsx
@@ -0,0 +1,153 @@
+'use client'
+import React from 'react'
+import { cn } from "@/lib/utils"
+import { Label } from "@/components/ui/label"
+import { useConfig } from '@/hooks/use-config'
+import { Icon } from "@/components/ui/icon"
+import { Check } from 'lucide-react';
+import {
+ defaultSidebarColorSvg,
+ colorSidebarColorSvg,
+ gradientSidebarColorSvg,
+} from "./data";
+import {
+ Tooltip,
+ TooltipContent,
+ TooltipProvider,
+ TooltipTrigger,
+} from "@/components/ui/tooltip"
+const SidebarColor = () => {
+ const [config, setConfig] = useConfig()
+ const [show, setShow] = React.useState(
+ config.sidebarTheme !== 'light'
+ )
+
+ return (
+
+
+ Sidebar Color
+
+
+
+
+
+
+
+
+
+
+
+
+ {show && (
+
+ {[
+ "dark",
+ "rose",
+ "steel-blue",
+ "purple",
+ "redwood",
+ "green",
+ "ocean-blue",
+ "gray",
+
+ ].map((color) => (
+
+
+
+
+
+
+
+ {color}
+
+
+
+
+
+ ))}
+
+ )}
+
+ );
+}
+
+export default SidebarColor
\ No newline at end of file
diff --git a/components/partials/customizer/team-switcher-toggle.tsx b/components/partials/customizer/team-switcher-toggle.tsx
new file mode 100644
index 0000000..f94e606
--- /dev/null
+++ b/components/partials/customizer/team-switcher-toggle.tsx
@@ -0,0 +1,28 @@
+'use client'
+import React from 'react'
+import { Checkbox } from "@/components/ui/checkbox"
+import { useConfig } from '@/hooks/use-config'
+
+const TeamSwitcherToggle = () => {
+ const [config, setConfig] = useConfig()
+ if (config.menuHidden || config.layout === 'horizontal') return null
+ return (
+
+
+ setConfig({ ...config, showSwitcher: !config.showSwitcher })
+ }
+ />
+
+
+ );
+}
+
+export default TeamSwitcherToggle
\ No newline at end of file
diff --git a/components/partials/footer/footer-content.tsx b/components/partials/footer/footer-content.tsx
new file mode 100644
index 0000000..6d0e771
--- /dev/null
+++ b/components/partials/footer/footer-content.tsx
@@ -0,0 +1,49 @@
+'use client'
+
+import React from 'react'
+import { useConfig } from '@/hooks/use-config'
+import { cn } from "@/lib/utils"
+import { useMediaQuery } from '@/hooks/use-media-query'
+
+
+const FooterContent = ({ children }: { children: React.ReactNode }) => {
+ const [config] = useConfig()
+ const isMobile = useMediaQuery("(min-width: 768px)")
+ if (!isMobile) {
+ return
+ }
+
+ if (config.sidebar === 'two-column') {
+ return (
+
+ )
+ }
+
+ return (
+
+ )
+}
+
+export default FooterContent
\ No newline at end of file
diff --git a/components/partials/footer/index.tsx b/components/partials/footer/index.tsx
new file mode 100644
index 0000000..e709130
--- /dev/null
+++ b/components/partials/footer/index.tsx
@@ -0,0 +1,60 @@
+import React from "react";
+import FooterContent from "./footer-content";
+import { Link } from "@/components/navigation";
+import Image from "next/image";
+import { Icon } from "@/components/ui/icon";
+
+const DashCodeFooter = () => {
+ return (
+
+
+
+
+ Hak Cipta © {new Date().getFullYear()} Divisi Humas Polri Hub. All rights Reserved.
+
+
+
+
+
+
+
+ );
+};
+
+export default DashCodeFooter;
diff --git a/components/partials/header/cart.tsx b/components/partials/header/cart.tsx
new file mode 100644
index 0000000..3ca8b94
--- /dev/null
+++ b/components/partials/header/cart.tsx
@@ -0,0 +1,126 @@
+import { Button } from "@/components/ui/button"
+import {
+ Sheet,
+ SheetClose,
+ SheetContent,
+ SheetDescription,
+ SheetFooter,
+ SheetHeader,
+ SheetTitle,
+ SheetTrigger,
+} from "@/components/ui/sheet"
+import { Icon } from "@/components/ui/icon";
+import { Badge } from "@/components/ui/badge";
+import Image from "next/image";
+import { ScrollArea } from "@/components/ui/scroll-area";
+import ProductCounterButton from "@/components/ecommarce/product-counter-button";
+
+export function Cart() {
+ const cartProducts = [
+ {
+ id: 1,
+ productImage: "/images/e-commerce/product-card/classical-black-tshirt.png"
+ },
+ {
+ id: 2,
+ productImage: "/images/e-commerce/product-card/black-t-shirt.png"
+ },
+ {
+ id: 3,
+ productImage: "/images/e-commerce/product-card/check-shirt.png"
+ },
+ {
+ id: 4,
+ productImage: "/images/e-commerce/product-card/gray-jumper.png"
+ },
+ {
+ id: 5,
+ productImage: "/images/e-commerce/product-card/gray-t-shirt.png"
+ },
+ {
+ id: 6,
+ productImage: "/images/e-commerce/product-card/pink-blazer.png"
+ }
+ ]
+ return (
+
+
+
+
+
+
+ Cart
+
+ Total Price $0
+
+
+ {
+ cartProducts.length > 0 ? (
+
+
+ {cartProducts.map((product, i) => (
+
+
+
+
+ )
+ : (
+
+
+
+
+ Subtotal
+ $0
+
+
+
+
+
+
+
+
+ )
+}
diff --git a/components/partials/header/data.ts b/components/partials/header/data.ts
new file mode 100644
index 0000000..9386184
--- /dev/null
+++ b/components/partials/header/data.ts
@@ -0,0 +1,180 @@
+
+
+export const notifications = [
+ {
+ id: 1,
+ title: "Your order is placed",
+ role: "Frontend Developer",
+ desc:
+ "Amet minim mollit non deser unt ullamco est sit aliqua.",
+ avatar: 'ss.png',
+ status: "online",
+ unreadmessage: false,
+ date: "2 days ago",
+ },
+ {
+ id: 2,
+ title: "Congratulations Darlene 🎉",
+ role: "UI/UX Designer",
+ desc:
+ "Won the monthly best seller badge",
+ avatar: 'ss.png',
+ status: "online",
+ unreadmessage: true,
+ date: "11 am",
+ },
+ {
+ id: 3,
+ title: "Joaquina Weisenborn",
+ role: "Town planner",
+ desc:
+ "Soufflé soufflé caramels sweet roll. Jelly lollipop sesame snaps bear claw jelly beans sugar plum sugar plum.",
+ avatar: 'ss.png',
+ status: "busy",
+ unreadmessage: true,
+ date: "12 pm",
+ },
+ {
+ id: 4,
+ title: "Brooklyn Simmons",
+ role: "Data scientist",
+ desc:
+ "Added you to Top Secret Project group...",
+ avatar: 'ss.png',
+ status: "online",
+ unreadmessage: true,
+ date: "1 pm",
+ },
+ {
+ id: 5,
+ title: "Margot Henschke",
+ role: "Dietitian",
+ desc:
+ "Cake pie jelly jelly beans. Marzipan lemon drops halvah cake. Pudding cookie lemon drops icing",
+ avatar: 'ss.png',
+ status: "busy",
+ unreadmessage: false,
+ date: "3 pm",
+ },
+ {
+ id: 6,
+ title: "Sal Piggee",
+ role: "Marketing executive",
+ desc:
+ "Toffee caramels jelly-o tart gummi bears cake I love ice cream lollipop. Sweet liquorice croissant candy danish dessert icing. Cake macaroon gingerbread toffee sweet.",
+ avatar: 'ss.png',
+ status: "online",
+ unreadmessage: false,
+ date: "4 pm",
+ },
+ {
+ id: 7,
+ title: "Miguel Guelff",
+ role: "Special educational needs teacher",
+ desc:
+ "Biscuit powder oat cake donut brownie ice cream I love soufflé. I love tootsie roll I love powder tootsie roll.",
+ avatar: 'ss.png',
+ status: "online",
+ unreadmessage: true,
+ date: "7 pm",
+ },
+ {
+ id: 8,
+ title: "Mauro Elenbaas",
+ role: "Advertising copywriter",
+ desc:
+ "Bear claw ice cream lollipop gingerbread carrot cake. Brownie gummi bears chocolate muffin croissant jelly I love marzipan wafer.",
+ avatar: 'ss.png',
+ status: "away",
+ unreadmessage: true,
+ date: "10 pm",
+ },
+ {
+ id: 9,
+ title: "Bridgett Omohundro",
+ role: "Designer, television/film set",
+ desc:
+ "Gummies gummi bears I love candy icing apple pie I love marzipan bear claw. I love tart biscuit I love candy canes pudding chupa chups liquorice croissant.",
+ avatar: 'ss.png',
+ status: "offline",
+ unreadmessage: false,
+ date: "10 pm",
+ },
+ {
+ id: 10,
+ title: "Zenia Jacobs",
+ role: "Building surveyor",
+ desc:
+ "Cake pie jelly jelly beans. Marzipan lemon drops halvah cake. Pudding cookie lemon drops icing",
+ avatar: 'ss.png',
+ status: "away",
+ unreadmessage: false,
+ date: "10 am",
+ },
+];
+
+export const messages = [
+ {
+ title: "Wade Warren",
+ desc: "Hi! How are you doing?.....",
+ active: true,
+ hasnotifaction: true,
+ notification_count: 1,
+ image: undefined,
+ link: "#",
+ },
+ {
+ title: "Savannah Nguyen",
+ desc: "Hi! How are you doing?.....",
+ active: false,
+ hasnotifaction: false,
+ image: undefined,
+ link: "#",
+ },
+ {
+ title: "Ralph Edwards",
+ desc: "Hi! How are you doing?.....",
+ active: false,
+ hasnotifaction: true,
+ notification_count: 8,
+ image: undefined,
+ link: "#",
+ },
+ {
+ title: "Cody Fisher",
+ desc: "Hi! How are you doing?.....",
+ active: true,
+ hasnotifaction: false,
+ image: undefined,
+ link: "#",
+ },
+ {
+ title: "Savannah Nguyen",
+ desc: "Hi! How are you doing?.....",
+ active: false,
+ hasnotifaction: false,
+ image: undefined,
+ link: "#",
+ },
+ {
+ title: "Ralph Edwards",
+ desc: "Hi! How are you doing?.....",
+ active: false,
+ hasnotifaction: true,
+ notification_count: 8,
+ image: undefined,
+ link: "#",
+ },
+ {
+ title: "Cody Fisher",
+ desc: "Hi! How are you doing?.....",
+ active: true,
+ hasnotifaction: false,
+ image: undefined,
+ link: "#",
+ },
+];
+
+export type Message = ( typeof messages) [number]
+export type Notification = (typeof notifications) [number]
+
diff --git a/components/partials/header/header-content.tsx b/components/partials/header/header-content.tsx
new file mode 100644
index 0000000..42b8c66
--- /dev/null
+++ b/components/partials/header/header-content.tsx
@@ -0,0 +1,59 @@
+'use client';
+import React from 'react'
+import { useConfig } from '@/hooks/use-config'
+import { cn } from '@/lib/utils'
+
+const HeaderContent = ({ children }: { children: React.ReactNode }) => {
+ const [config] = useConfig()
+ const headerTheme = config.headerTheme !== 'light' && config.headerTheme !== 'transparent' ? ` dark theme-${config.headerTheme}` : `theme-${config.headerTheme}`
+ if (config.sidebar === 'two-column') {
+ return (
+
+
+ {children}
+
+
+
+ )
+ }
+
+ return (
+
+
+
+
+ {children}
+
+
+ )
+}
+
+export default HeaderContent
\ No newline at end of file
diff --git a/components/partials/header/header-logo.tsx b/components/partials/header/header-logo.tsx
new file mode 100644
index 0000000..5cb63e2
--- /dev/null
+++ b/components/partials/header/header-logo.tsx
@@ -0,0 +1,36 @@
+"use client";
+import React from "react";
+import { Link } from "@/components/navigation";
+import DashCodeLogo from "@/components/dascode-logo";
+import { useConfig } from "@/hooks/use-config";
+import { useMediaQuery } from "@/hooks/use-media-query";
+
+const HeaderLogo = () => {
+ const [config] = useConfig();
+
+ const isDesktop = useMediaQuery("(min-width: 1280px)");
+
+ return config.layout === "horizontal" ? (
+
+ 
+
+ ) : (
+ !isDesktop && (
+
+
+
+ )
+ );
+};
+
+export default HeaderLogo;
diff --git a/components/partials/header/header-search.tsx b/components/partials/header/header-search.tsx
new file mode 100644
index 0000000..7b32dc3
--- /dev/null
+++ b/components/partials/header/header-search.tsx
@@ -0,0 +1,222 @@
+'use client'
+import React from "react";
+import { Dialog, DialogContent, DialogTrigger } from "@/components/ui/dialog";
+import { X } from "lucide-react";
+import {
+ Command,
+ CommandEmpty,
+ CommandGroup,
+ CommandInput,
+ CommandItem,
+ CommandList,
+} from "@/components/ui/command";
+import { Button } from "@/components/ui/button";
+import { Link } from '@/i18n/routing';
+import { Icon } from "@/components/ui/icon";
+import { useConfig } from "@/hooks/use-config";
+const HeaderSearch = () => {
+ const [config] = useConfig();
+ if (config.layout === 'horizontal') return null
+ return (
+
+ );
+};
+
+export default HeaderSearch;
diff --git a/components/partials/header/horizontal-menu.tsx b/components/partials/header/horizontal-menu.tsx
new file mode 100644
index 0000000..6c09709
--- /dev/null
+++ b/components/partials/header/horizontal-menu.tsx
@@ -0,0 +1,127 @@
+'use client'
+import React from "react";
+import { cn } from "@/lib/utils";
+import { ChevronDown } from "lucide-react";
+import { Link, usePathname } from "@/components/navigation";
+import { useConfig } from '@/hooks/use-config'
+import { useTranslations } from 'next-intl';
+import { getHorizontalMenuList } from "@/lib/menus";
+import { Icon } from "@/components/ui/icon";
+import {
+ Menubar,
+ MenubarCheckboxItem,
+ MenubarContent,
+ MenubarItem,
+ MenubarMenu,
+ MenubarRadioGroup,
+ MenubarRadioItem,
+ MenubarSeparator,
+ MenubarShortcut,
+ MenubarSub,
+ MenubarSubContent,
+ MenubarSubTrigger,
+ MenubarTrigger,
+} from "@/components/ui/menubar"
+import { useMediaQuery } from "@/hooks/use-media-query";
+
+export default function HorizontalMenu() {
+
+ const [config] = useConfig()
+
+ const t = useTranslations("Menu");
+ const pathname = usePathname();
+
+ const menuList = getHorizontalMenuList(pathname, t)
+
+ const [openDropdown, setOpenDropdown] = React.useState(false);
+
+ const isDesktop = useMediaQuery('(min-width: 1280px)')
+
+ if (config.layout !== 'horizontal' || !isDesktop) return null
+ return (
+
+
+ {menuList?.map(({ groupLabel, menus }, index) => (
+
+ {menus.map(({ href, label, icon, active, id, submenus }, index) =>
+ submenus.length === 0 ? (
+
+
+
+
+
+ ) : (
+
+
+
+
+ {submenus.map(
+ ({ href, label, icon, children: subChildren }, index) =>
+ subChildren?.length === 0 ? (
+
+
+
+ ) : (
+
+
+
+
+
+ {icon && (
+
+
+ {subChildren?.map(
+ ({ href, label }, index) => (
+
+
+
+
+ {label}
+
+
+ )
+ )}
+
+
+
+ )
+ )}
+
+
+
+
+ )
+ )}
+
+ ))}
+
+
+ );
+}
+
+
diff --git a/components/partials/header/index.tsx b/components/partials/header/index.tsx
new file mode 100644
index 0000000..f63ec32
--- /dev/null
+++ b/components/partials/header/index.tsx
@@ -0,0 +1,41 @@
+"use client";
+
+import React from "react";
+import HeaderContent from "./header-content";
+import HeaderSearch from "./header-search";
+import ProfileInfo from "./profile-info";
+import Notifications from "./notifications";
+import Messages from "./messages";
+import { Cart } from "./cart";
+import ThemeSwitcher from "./theme-switcher";
+import { SidebarToggle } from "@/components/partials/sidebar/sidebar-toggle";
+import { SheetMenu } from "@/components/partials/sidebar/menu/sheet-menu";
+import HorizontalMenu from "./horizontal-menu";
+import LocalSwitcher from "./locale-switcher";
+import HeaderLogo from "./header-logo";
+
+const DashCodeHeader = () => {
+ return (
+ <>
+
+
+
+ ("in");
+ const searchParams = useSearchParams();
+ const [hasInitialized, setHasInitialized] = useState(false);
+
+ useEffect(() => {
+ const storedLang = getLanguage();
+ let joinParam = "";
+
+ if (searchParams) {
+ joinParam = Array.from(searchParams.entries())
+ .map(([key, value]) => `${key}=${value}`)
+ .join("&");
+ }
+
+ const redirectTo = (lang: string) => {
+ startTransition(() => {
+ router.replace(pathname + (joinParam ? `?${joinParam}` : ""), {
+ locale: lang,
+ });
+ });
+ };
+
+ if (!hasInitialized) {
+ if (!storedLang) {
+ setLanguage("in");
+ setSelectedLang("in");
+ redirectTo("in");
+ } else {
+ setSelectedLang(storedLang);
+ if (locale !== storedLang) {
+ redirectTo(storedLang);
+ }
+ }
+ setHasInitialized(true);
+ }
+ }, []);
+
+ const onSelectChange = (nextLocale: string) => {
+ setLanguage(nextLocale);
+ setSelectedLang(nextLocale);
+ startTransition(() => {
+ router.replace(pathname, { locale: nextLocale });
+ });
+ };
+ return (
+
+ );
+}
diff --git a/components/partials/header/messages.tsx b/components/partials/header/messages.tsx
new file mode 100644
index 0000000..1f037e5
--- /dev/null
+++ b/components/partials/header/messages.tsx
@@ -0,0 +1,93 @@
+
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import {
+ DropdownMenu,
+ DropdownMenuContent,
+ DropdownMenuItem,
+ DropdownMenuLabel,
+ DropdownMenuSeparator,
+ DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
+import { ScrollArea } from "@/components/ui/scroll-area";
+import { Link } from '@/i18n/routing';
+import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
+import { cn } from "@/lib/utils";
+import { messages, type Message } from "./data";
+import shortImage from "@/public/images/all-img/short-image-2.png";
+import { Icon } from "@/components/ui/icon";
+
+const Messages = () => {
+ return (
+
+
+
+
+
+
+
+
+ Messages
+
+
+
+ View all
+
+
+
+
+
+
+ {messages?.map((item: Message, index: number) => (
+
+
+
+
+ {item.title.charAt(0)}
+
+
+
+
+ {item.title}
+
+
+ {item.desc}
+
+
+ 3 min ago
+
+
+ {item.hasnotifaction && (
+
+
+
+
+ )}
+
+
+
+ ))}
+
+
+
+
+
+ );
+};
+
+export default Messages;
diff --git a/components/partials/header/notifications.tsx b/components/partials/header/notifications.tsx
new file mode 100644
index 0000000..6568f45
--- /dev/null
+++ b/components/partials/header/notifications.tsx
@@ -0,0 +1,167 @@
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import {
+ DropdownMenu,
+ DropdownMenuContent,
+ DropdownMenuItem,
+ DropdownMenuLabel,
+ DropdownMenuSeparator,
+ DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
+import { ScrollArea } from "@/components/ui/scroll-area";
+import { Link } from "@/i18n/routing";
+import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
+import { cn } from "@/lib/utils";
+import shortImage from "@/public/images/all-img/short-image-2.png";
+import { Icon } from "@/components/ui/icon";
+import { useEffect, useState } from "react";
+// import { getNotifications } from "@/service/notifications/notifications";
+import { format, formatDate } from "date-fns";
+import {
+ CalendarCheck,
+ CheckCheck,
+ CircleAlert,
+ Clock7,
+ MessageCircle,
+ SquareCheck,
+ UploadIcon,
+} from "lucide-react";
+import { useRouter } from "next/navigation";
+
+export type Notification = {
+ id: number;
+ notificationTypeId: number;
+ message: string;
+ createdAt: string;
+ isActive: boolean;
+ isPublic: boolean;
+ isRead: boolean;
+ redirectUrl: string;
+ userGroupIdDst: string | null;
+ userIdDst: string | null;
+ userLevelIdDst: string;
+ userLevelNumberDst: string | null;
+ userRoleIdDst: string;
+};
+
+const getNotificationIcon = (notificationTypeId: number) => {
+ switch (notificationTypeId) {
+ case 2:
+ return ([]);
+ const [notificationTotal, setNotificationTotal] = useState(0);
+
+ useEffect(() => {
+ async function initState() {
+ // const response = await getNotifications();
+ // setNotifications(response?.data?.data?.content);
+ // setNotificationTotal(response?.data?.data?.totalElements);
+ // console.log("notif", response?.data?.data?.content);
+ }
+ initState();
+ }, []);
+
+ const formatDate = (dateString: string) => {
+ const date = new Date(dateString);
+ return format(date, "dd/MM/yyyy HH:mm");
+ };
+
+ const handleNotificationClick = (redirectUrl: string) => {
+ router.push(redirectUrl);
+ };
+
+ return (
+
+
+
+
+
+
+
+
+ you have {notificationTotal > 99 ? "99+" : notificationTotal}{" "}
+ notifications
+
+
+
+ View all
+
+
+
+
+
+
+ {notifications?.map((item: Notification, index: number) => (
+ handleNotificationClick(item?.redirectUrl)}
+ >
+
+
+ {getNotificationIcon(item.notificationTypeId)}
+
+
+
+ {item?.message}
+
+ {/*
+ {item?.desc}
+ */}
+
+ {" "}
+ {formatDate(item?.createdAt)}
+
+
+
+ {/* {item?.unreadmessage && (
+
+
+
+ )} */}
+
+ ))}
+
+
+
+
+ );
+};
+
+export default Notifications;
diff --git a/components/partials/header/profile-info.tsx b/components/partials/header/profile-info.tsx
new file mode 100644
index 0000000..2f460d3
--- /dev/null
+++ b/components/partials/header/profile-info.tsx
@@ -0,0 +1,159 @@
+"use client";
+import {
+ DropdownMenu,
+ DropdownMenuContent,
+ DropdownMenuGroup,
+ DropdownMenuItem,
+ DropdownMenuLabel,
+ DropdownMenuPortal,
+ DropdownMenuSeparator,
+ DropdownMenuSub,
+ DropdownMenuSubContent,
+ DropdownMenuSubTrigger,
+ DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
+import { Icon } from "@/components/ui/icon";
+import Image from "next/image";
+import { Link } from "@/i18n/routing";
+import { Button } from "@/components/ui/button";
+import Cookies from "js-cookie";
+import { useEffect, useState } from "react";
+import { useRouter } from "@/components/navigation";
+import { getInfoProfile } from "@/service/auth";
+
+type Detail = {
+ id: number;
+ userId: any;
+ firstName: string;
+ username: string;
+ fullname: string;
+ memberIdentity: any;
+ email: string;
+ address: string;
+ phoneNumber: any;
+ message: string;
+};
+
+const ProfileInfo = () => {
+ const username = Cookies.get("access_token");
+ const picture = Cookies.get("profile_picture");
+ const router = useRouter();
+ const [detail, setDetail] = useState();
+
+ const onLogout = () => {
+ Object.keys(Cookies.get()).forEach((cookieName) => {
+ Cookies.remove(cookieName);
+ });
+
+ router.push("/");
+ };
+
+ useEffect(() => {
+ if (!username) {
+ router.push("/auth");
+ }
+ }, [username]);
+
+ useEffect(() => {
+ async function initState() {
+ const response = await getInfoProfile();
+ const details = response?.data?.data;
+
+ setDetail(details);
+ console.log("data", details);
+ }
+
+ initState();
+ }, []);
+
+ return (
+
+
+
+ {detail !== undefined ? (
+
+ ({detail?.username})
+
+
+
+
+ {/*
+ */}
+
+ {[
+ {
+ name: "profile & Settings",
+ icon: "heroicons:user",
+ href: "/profile",
+ },
+ ].map((item, index) => (
+
+
+
+
+ ))}
+
+
+
+
+
+
+
+
+
+
+
+ );
+};
+export default ProfileInfo;
diff --git a/components/partials/header/theme-switcher.tsx b/components/partials/header/theme-switcher.tsx
new file mode 100644
index 0000000..3168ea5
--- /dev/null
+++ b/components/partials/header/theme-switcher.tsx
@@ -0,0 +1,72 @@
+"use client";
+
+import * as React from "react";
+import { useTheme } from "next-themes";
+import { hexToRGB } from "@/lib/utils";
+import { Button } from "@/components/ui/button";
+import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "@/components/ui/dropdown-menu";
+import { Moon, Sun } from "lucide-react";
+import { Check } from "lucide-react";
+import { cn } from "@/lib/utils";
+import { Icon } from "@/components/ui/icon";
+
+const ThemeButton = () => {
+ const { theme, setTheme } = useTheme();
+ return (
+
+
+
+
+
+ setTheme("light")}
+ className={cn("p-2 font-medium text-sm text-default-600 cursor-pointer mb-[2px] ", {
+ "bg-default text-default-foreground": theme === "light",
+ })}
+ >
+
+ setTheme("dark")}
+ className={cn("p-2 font-medium text-sm text-default-600 hover:bg-default hover:text-default-foreground dark:hover:bg-background cursor-pointer mb-[2px]", {
+ "bg-default text-default-foreground": theme === "dark",
+ })}
+ >
+
+ setTheme("system")}
+ className={cn("p-2 font-medium text-sm text-default-600 hover:bg-default hover:text-default-foreground dark:hover:bg-background cursor-pointer mb-[2px]", {
+ "bg-default text-default-foreground": theme === "system",
+ })}
+ >
+
+
+
+ );
+};
+
+export default ThemeButton;
diff --git a/components/partials/sidebar/common/classic-multi-collapse-button.tsx b/components/partials/sidebar/common/classic-multi-collapse-button.tsx
new file mode 100644
index 0000000..2852dbf
--- /dev/null
+++ b/components/partials/sidebar/common/classic-multi-collapse-button.tsx
@@ -0,0 +1,136 @@
+"use client";
+import React, { CSSProperties } from 'react'
+import { Link, usePathname } from "@/components/navigation";
+import { useState } from "react";
+import { ChevronDown, Dot, LucideIcon } from "lucide-react";
+
+import { cn } from "@/lib/utils";
+import { Button } from "@/components/ui/button";
+import { DropdownMenuArrow } from "@radix-ui/react-dropdown-menu";
+import {
+ Collapsible,
+ CollapsibleContent,
+ CollapsibleTrigger
+} from "@/components/ui/collapsible";
+
+import { Icon } from "@/components/ui/icon";
+import { SubChildren } from '@/lib/menus';
+import { useMobileMenuConfig } from '@/hooks/use-mobile-menu';
+
+
+
+
+interface CollapseMenuButtonProps {
+ icon?: string;
+ label: string;
+ active: boolean;
+ submenus: SubChildren[]
+
+
+}
+
+export function MultiCollapseMenuButton({
+ icon,
+ label,
+ active,
+ submenus,
+
+
+
+}: CollapseMenuButtonProps) {
+ const pathname = usePathname();
+ const isSubmenuActive = submenus.some((submenu) => submenu.active || pathname.startsWith(submenu.href));
+ const [isCollapsed, setIsCollapsed] = useState(isSubmenuActive);
+ const [mobileMenuConfig, setMobileMenuConfig] = useMobileMenuConfig();
+ return (
+
+
+
+
+
+
+
+
+
+ {submenus.map(({ href, label, active }, index) => (
+
+
+
+
+ ))}
+
+
+
+ )
+}
diff --git a/components/partials/sidebar/common/collapse-menu-button.tsx b/components/partials/sidebar/common/collapse-menu-button.tsx
new file mode 100644
index 0000000..6f7db4f
--- /dev/null
+++ b/components/partials/sidebar/common/collapse-menu-button.tsx
@@ -0,0 +1,357 @@
+"use client";
+import React, { CSSProperties } from 'react'
+import { Link, usePathname } from "@/components/navigation";
+import { useState } from "react";
+import { ChevronDown, Dot, LucideIcon } from "lucide-react";
+import { GripVertical } from 'lucide-react';
+import { cn } from "@/lib/utils";
+import { Button } from "@/components/ui/button";
+import { DropdownMenuArrow } from "@radix-ui/react-dropdown-menu";
+import { ScrollArea } from "@/components/ui/scroll-area"
+
+import {
+ Collapsible,
+ CollapsibleContent,
+ CollapsibleTrigger
+} from "@/components/ui/collapsible";
+import {
+ Tooltip,
+ TooltipTrigger,
+ TooltipContent,
+ TooltipProvider
+} from "@/components/ui/tooltip";
+import {
+ DropdownMenu,
+ DropdownMenuItem,
+ DropdownMenuLabel,
+ DropdownMenuTrigger,
+ DropdownMenuContent,
+ DropdownMenuSeparator,
+ DropdownMenuGroup,
+ DropdownMenuSub,
+ DropdownMenuSubTrigger,
+ DropdownMenuPortal,
+ DropdownMenuSubContent
+} from "@/components/ui/dropdown-menu";
+import { Icon } from "@/components/ui/icon";
+import { Submenu } from "@/lib/menus"
+
+// for dnd
+
+import {
+ useSortable,
+ arrayMove,
+ SortableContext,
+ verticalListSortingStrategy,
+ horizontalListSortingStrategy,
+} from "@dnd-kit/sortable";
+import { CSS } from "@dnd-kit/utilities";
+import { useConfig } from '@/hooks/use-config';
+import { MultiCollapseMenuButton } from './classic-multi-collapse-button';
+import { useMediaQuery } from '@/hooks/use-media-query';
+import { useMobileMenuConfig } from '@/hooks/use-mobile-menu';
+import { useMenuHoverConfig } from '@/hooks/use-menu-hover';
+
+
+interface CollapseMenuButtonProps {
+ icon: string;
+ label: string;
+ active: boolean;
+ submenus: Submenu[];
+ collapsed: boolean | undefined;
+ id: string
+
+}
+
+export function CollapseMenuButton({
+ icon,
+ label,
+ active,
+ submenus,
+ collapsed,
+ id,
+
+}: CollapseMenuButtonProps) {
+ const pathname = usePathname();
+ const isSubmenuActive = submenus.some((submenu) => submenu.active || pathname.startsWith(submenu.href));
+ const [isCollapsed, setIsCollapsed] = useState(isSubmenuActive);
+ const [mobileMenuConfig, setMobileMenuConfig] = useMobileMenuConfig()
+ const [config] = useConfig();
+ const [hoverConfig] = useMenuHoverConfig();
+ const { hovered } = hoverConfig;
+ const sidebarTheme = config.sidebarTheme !== 'light' ? `dark theme-${config.sidebarTheme}` : `theme-${config.sidebarTheme}`
+ const isDesktop = useMediaQuery("(min-width: 1280px)");
+ const { transform, transition, setNodeRef, isDragging, attributes, listeners } = useSortable({
+ id: id,
+
+ })
+
+ React.useEffect(() => {
+ setIsCollapsed(isSubmenuActive);
+ }, [isSubmenuActive, pathname]);
+
+
+ const style: CSSProperties = {
+ transform: CSS.Transform.toString(transform),
+ transition: transition,
+ opacity: isDragging ? 0.8 : 1,
+ zIndex: isDragging ? 1 : 0,
+ position: "relative",
+ };
+
+ if (config.sidebar === 'compact' && isDesktop) {
+ return (
+
+
+
+
+
+ {submenus.map(({ href, label, active }, index) => (
+
+
+
+
+ ))}
+
+
+ )
+ }
+ return !collapsed || hovered ? (
+
+
+
+
+
+
+
+
+ {submenus.map(({ href, label, active, children: subChildren }, index) => (
+
+ subChildren?.length === 0 ? (
+
+ ) : (
+
+
+ )
+
+
+ ))}
+
+
+ ) : (
+
+
+
+
+
+
+
+
+
+ {label}
+
+
+
+
+
+ {label}
+
+
+
+
+ {submenus.map(({ href, label, icon, active, children }, index) => (
+ children?.length === 0 ? (
+
+
+ {icon && (
+ {label}
+
+
+ ) : (
+
+
+ {label}
+
+
+
+
+
+
+ {children?.map(({ href, label, active }, index) => (
+
+
+
+ {label}
+
+ ))}
+
+
+
+
+ )
+
+
+ ))}
+
+
+
+ );
+}
diff --git a/components/partials/sidebar/common/collapse-menu-button2.tsx b/components/partials/sidebar/common/collapse-menu-button2.tsx
new file mode 100644
index 0000000..cd00121
--- /dev/null
+++ b/components/partials/sidebar/common/collapse-menu-button2.tsx
@@ -0,0 +1,141 @@
+"use client";
+import React, { CSSProperties } from 'react'
+import { Link, usePathname } from "@/components/navigation";
+import { useState } from "react";
+import { ChevronDown, Dot, LucideIcon } from "lucide-react";
+
+import { cn } from "@/lib/utils";
+import { Button } from "@/components/ui/button";
+import { DropdownMenuArrow } from "@radix-ui/react-dropdown-menu";
+import {
+ Collapsible,
+ CollapsibleContent,
+ CollapsibleTrigger
+} from "@/components/ui/collapsible";
+
+import { Icon } from "@/components/ui/icon";
+import { SubChildren } from '@/lib/menus';
+
+
+
+
+interface CollapseMenuButtonProps {
+ icon: string;
+ label: string;
+ active: boolean;
+ submenus: SubChildren[]
+
+
+}
+
+export function CollapseMenuButton2({
+ icon,
+ label,
+ active,
+ submenus,
+
+
+
+}: CollapseMenuButtonProps) {
+ const pathname = usePathname();
+ const isSubmenuActive = submenus.some((submenu) => submenu.active || pathname.startsWith(submenu.href));
+ const [isCollapsed, setIsCollapsed] = useState(isSubmenuActive);
+
+
+
+
+
+
+
+ return (
+
+
+
+
+
+
+
+
+
+ {submenus.map(({ href, label, active }, index) => (
+
+
+
+
+ ))}
+
+
+
+ )
+}
diff --git a/components/partials/sidebar/common/menu-icon.tsx b/components/partials/sidebar/common/menu-icon.tsx
new file mode 100644
index 0000000..1c774ca
--- /dev/null
+++ b/components/partials/sidebar/common/menu-icon.tsx
@@ -0,0 +1,9 @@
+import React from 'react'
+
+const MenuIcon = () => {
+ return (
+ MenuIcon
+ )
+}
+
+export default MenuIcon
\ No newline at end of file
diff --git a/components/partials/sidebar/common/menu-item.tsx b/components/partials/sidebar/common/menu-item.tsx
new file mode 100644
index 0000000..303193c
--- /dev/null
+++ b/components/partials/sidebar/common/menu-item.tsx
@@ -0,0 +1,159 @@
+
+'use client'
+import React, { CSSProperties } from 'react'
+import { Button } from "@/components/ui/button";
+import { Icon } from '@/components/ui/icon'
+import { type Menu } from '@/lib/menus';
+import { Link } from '@/components/navigation';
+import { cn } from "@/lib/utils";
+import { GripVertical } from 'lucide-react';
+
+// for dnd
+
+import {
+ useSortable,
+ arrayMove,
+ SortableContext,
+ verticalListSortingStrategy,
+ horizontalListSortingStrategy,
+} from "@dnd-kit/sortable";
+interface MenuItemProps {
+ id: string
+ href: string
+ label: string
+ icon: string
+ active: boolean
+ collapsed: boolean
+
+}
+import { CSS } from "@dnd-kit/utilities";
+import { useConfig } from '@/hooks/use-config';
+import { useMediaQuery } from '@/hooks/use-media-query';
+import { useMobileMenuConfig } from '@/hooks/use-mobile-menu';
+import { useMenuHoverConfig } from '@/hooks/use-menu-hover';
+const MenuItem = ({ href, label, icon, active, id, collapsed }: MenuItemProps) => {
+ const [config] = useConfig();
+ const [hoverConfig] = useMenuHoverConfig();
+ const { hovered } = hoverConfig;
+ const isDesktop = useMediaQuery("(min-width: 1280px)");
+ const [mobileMenuConfig, setMobileMenuConfig] = useMobileMenuConfig();
+
+ const { transform, transition, setNodeRef, isDragging, attributes, listeners } = useSortable({
+ id: id,
+
+ })
+
+ const style: CSSProperties = {
+ transform: CSS.Transform.toString(transform),
+ transition: transition,
+ opacity: isDragging ? 0.8 : 1,
+ zIndex: isDragging ? 1 : 0,
+ position: "relative",
+ };
+ if (config.sidebar === 'draggable' && isDesktop) {
+ return (
+
+ )
+ }
+
+ if (config.sidebar === 'compact' && isDesktop) {
+ return (
+
+ )
+ }
+ return (
+
+ )
+}
+
+export default MenuItem
\ No newline at end of file
diff --git a/components/partials/sidebar/common/menu-label.tsx b/components/partials/sidebar/common/menu-label.tsx
new file mode 100644
index 0000000..f128766
--- /dev/null
+++ b/components/partials/sidebar/common/menu-label.tsx
@@ -0,0 +1,16 @@
+'use client'
+import { cn } from "@/lib/utils"
+import { useConfig } from '@/hooks/use-config'
+import React from 'react'
+
+const MenuLabel = ({ label, className }: { label: string, className?: string }) => {
+ const [config] = useConfig()
+ if (config.sidebar === 'compact') return null
+ return (
+
+ {label}
+
+ )
+}
+
+export default MenuLabel
\ No newline at end of file
diff --git a/components/partials/sidebar/common/menu-widget.tsx b/components/partials/sidebar/common/menu-widget.tsx
new file mode 100644
index 0000000..216ee16
--- /dev/null
+++ b/components/partials/sidebar/common/menu-widget.tsx
@@ -0,0 +1,31 @@
+'use client'
+import { Button } from '@/components/ui/button'
+import { useConfig } from '@/hooks/use-config'
+import Image from 'next/image'
+import React from 'react'
+
+const MenuWidget = () => {
+ const [config] = useConfig();
+ if (config.sidebar === 'compact') return null
+ return (
+
+
+
+ {/*
+
+ {(config.collapsed && !hovered) ?
+
+
+
+
+ }
+
+
+
+ )
+}
+
+export default SearchBar
+
+
+const CollapsedSearchBar = () => {
+ return (
+
+
+
+
+
+
+
+
+
+
+
+
+ )
+}
diff --git a/components/partials/sidebar/common/team-switcher.tsx b/components/partials/sidebar/common/team-switcher.tsx
new file mode 100644
index 0000000..52d1161
--- /dev/null
+++ b/components/partials/sidebar/common/team-switcher.tsx
@@ -0,0 +1,268 @@
+"use client"
+
+import * as React from "react"
+import { ChevronsUpDown, Check, CirclePlus } from 'lucide-react';
+
+import { cn } from "@/lib/utils"
+import {
+ Avatar,
+ AvatarFallback,
+ AvatarImage,
+} from "@/components/ui/avatar"
+import { Button } from "@/components/ui/button"
+import {
+ Command,
+ CommandEmpty,
+ CommandGroup,
+ CommandInput,
+ CommandItem,
+ CommandList,
+ CommandSeparator,
+} from "@/components/ui/command"
+import {
+ Dialog,
+ DialogContent,
+ DialogDescription,
+ DialogFooter,
+ DialogHeader,
+ DialogTitle,
+ DialogTrigger,
+} from "@/components/ui/dialog"
+import { Input } from "@/components/ui/input"
+import { Label } from "@/components/ui/label"
+import {
+ Popover,
+ PopoverContent,
+ PopoverTrigger,
+} from "@/components/ui/popover"
+import {
+ Select,
+ SelectContent,
+ SelectItem,
+ SelectTrigger,
+ SelectValue,
+} from "@/components/ui/select"
+import { useConfig } from "@/hooks/use-config";
+import { useMediaQuery } from "@/hooks/use-media-query";
+import { motion, AnimatePresence } from "framer-motion";
+import { useMenuHoverConfig } from "@/hooks/use-menu-hover";
+
+const groups = [
+ {
+ label: "Personal Account",
+ teams: [
+ {
+ label: "Designing Workspace",
+ value: "personal",
+ },
+ ],
+ },
+ {
+ label: "Teams",
+ teams: [
+ {
+ label: "Core Workspace",
+ value: "acme-inc",
+ },
+ {
+ label: "Dev.Workspace",
+ value: "monsters",
+ },
+ ],
+ },
+]
+
+type Team = (typeof groups)[number]["teams"][number]
+
+type PopoverTriggerProps = React.ComponentPropsWithoutRef
+
+interface TeamSwitcherProps extends PopoverTriggerProps { }
+
+const scaleVariants = {
+ collapsed: { scale: 0.8 },
+ expanded: { scale: 1 }
+};
+
+export default function TeamSwitcher({ className }: TeamSwitcherProps) {
+ const [config] = useConfig();
+ const [hoverConfig] = useMenuHoverConfig();
+ const { hovered } = hoverConfig;
+ const [data, setData] = React.useState();
+ const [open, setOpen] = React.useState(false)
+ const [showNewTeamDialog, setShowNewTeamDialog] = React.useState(false)
+ const [selectedTeam, setSelectedTeam] = React.useState(
+ groups[0].teams[0]
+ )
+ const isDesktop = useMediaQuery("(min-width: 1280px)")
+ if (config.showSwitcher === false || config.sidebar === 'compact') return null
+
+
+ return (
+
+ )
+}
diff --git a/components/partials/sidebar/common/team-workspace-switcher.tsx b/components/partials/sidebar/common/team-workspace-switcher.tsx
new file mode 100644
index 0000000..c1dff0f
--- /dev/null
+++ b/components/partials/sidebar/common/team-workspace-switcher.tsx
@@ -0,0 +1,285 @@
+"use client"
+
+import * as React from "react"
+import { ChevronsUpDown, Check, CirclePlus } from 'lucide-react';
+
+import { cn, getCookiesDecrypt } from "@/lib/utils"
+import {
+ Avatar,
+ AvatarFallback,
+ AvatarImage,
+} from "@/components/ui/avatar"
+import { Button } from "@/components/ui/button"
+import {
+ Command,
+ CommandEmpty,
+ CommandGroup,
+ CommandInput,
+ CommandItem,
+ CommandList,
+ CommandSeparator,
+} from "@/components/ui/command"
+import {
+ Dialog,
+ DialogContent,
+ DialogDescription,
+ DialogFooter,
+ DialogHeader,
+ DialogTitle,
+ DialogTrigger,
+} from "@/components/ui/dialog"
+import { Input } from "@/components/ui/input"
+import { Label } from "@/components/ui/label"
+import {
+ Popover,
+ PopoverContent,
+ PopoverTrigger,
+} from "@/components/ui/popover"
+import {
+ Select,
+ SelectContent,
+ SelectItem,
+ SelectTrigger,
+ SelectValue,
+} from "@/components/ui/select"
+import { useConfig } from "@/hooks/use-config";
+import { useMediaQuery } from "@/hooks/use-media-query";
+import { motion, AnimatePresence } from "framer-motion";
+import { useMenuHoverConfig } from "@/hooks/use-menu-hover";
+import { getInfoProfile } from "@/service/auth";
+// import { getUserRolePlacements, saveUserRolePlacements } from "@/service/management-user/management-user";
+
+// var groups = [
+// {
+// label: "Wilayah Tugas",
+// teams: [],
+// },
+// ]
+
+// type Team = (typeof groups)[number]["teams"][number]
+
+type PopoverTriggerProps = React.ComponentPropsWithoutRef
+
+interface TeamSwitcherProps extends PopoverTriggerProps { }
+
+const scaleVariants = {
+ collapsed: { scale: 0.8 },
+ expanded: { scale: 1 }
+};
+
+export default function TeamWorkspaceSwitcher({ className }: TeamSwitcherProps) {
+ const [config] = useConfig();
+ const [hoverConfig] = useMenuHoverConfig();
+ const { hovered } = hoverConfig;
+ const [detail, setDetail] = React.useState();
+ const userId = getCookiesDecrypt("uie");
+ const [open, setOpen] = React.useState(false);
+ const [showNewTeamDialog, setShowNewTeamDialog] = React.useState(false);
+ const [groups, setGroups] = React.useState()
+ const [selectedTeam, setSelectedTeam] = React.useState({ label: "", value: "" });
+ const isDesktop = useMediaQuery("(min-width: 1280px)")
+ if (config.showSwitcher === false || config.sidebar === 'compact') return null
+
+ React.useEffect(() => {
+ async function initState() {
+ const response = await getInfoProfile();
+ const details = response?.data?.data;
+
+ setDetail(details);
+ console.log("data", details);
+ }
+
+ async function getPlacement() {
+ // const response = await getUserRolePlacements(Number(userId));
+ // const data = response?.data?.data;
+
+ // var placementArr: any[] = [];
+ // data?.forEach((row: any) => {
+ // placementArr.push({
+ // label: row.roleName + " | " + row.userLevelName,
+ // value: Number(row.id),
+ // });
+ // });
+ // const groupsTemp = [
+ // {
+ // label: "Wilayah Tugas",
+ // teams: placementArr,
+ // }
+ // ];
+ // setGroups(groupsTemp);
+ }
+
+ initState();
+ getPlacement();
+ }, []);
+
+
+ return (
+
+ )
+}
diff --git a/components/partials/sidebar/index.tsx b/components/partials/sidebar/index.tsx
new file mode 100644
index 0000000..888772a
--- /dev/null
+++ b/components/partials/sidebar/index.tsx
@@ -0,0 +1,21 @@
+
+import React from 'react'
+import SidebarContent from './sidebar-content'
+import Logo from '@/components/logo'
+import { Menu } from './menu'
+
+
+const DashCodeSidebar = () => {
+ return (
+
+
+
+
+
+
+
+
+ )
+}
+
+export default DashCodeSidebar
\ No newline at end of file
diff --git a/components/partials/sidebar/menu/icon-nav.tsx b/components/partials/sidebar/menu/icon-nav.tsx
new file mode 100644
index 0000000..1644dd5
--- /dev/null
+++ b/components/partials/sidebar/menu/icon-nav.tsx
@@ -0,0 +1,112 @@
+"use client";
+import React from "react";
+import { ScrollArea } from "@/components/ui/scroll-area";
+import DashCodeLogo from "@/components/dascode-logo";
+import { Group, Submenu } from "@/lib/menus";
+import { Button } from "@/components/ui/button";
+import { Icon } from "@/components/ui/icon";
+import {
+ Tooltip,
+ TooltipContent,
+ TooltipProvider,
+ TooltipTrigger,
+} from "@/components/ui/tooltip";
+import { Link } from "@/i18n/routing";
+import { cn } from "@/lib/utils";
+import { useConfig } from "@/hooks/use-config";
+
+interface IconNavProps {
+ menuList: Group[];
+}
+const IconNav = ({ menuList }: IconNavProps) => {
+ const [config, setConfig] = useConfig();
+
+ return (
+
+
+
+
+
+
+ );
+};
+
+export default IconNav;
diff --git a/components/partials/sidebar/menu/index.tsx b/components/partials/sidebar/menu/index.tsx
new file mode 100644
index 0000000..c55a90e
--- /dev/null
+++ b/components/partials/sidebar/menu/index.tsx
@@ -0,0 +1,30 @@
+"use client";
+
+import React from 'react'
+
+
+import { useConfig } from "@/hooks/use-config";
+import { MenuClassic } from './menu-classic';
+import { MenuTwoColumn } from './menu-two-column';
+import { MenuDragAble } from './menu-dragable';
+import { useMediaQuery } from '@/hooks/use-media-query';
+
+export function Menu() {
+
+ const [config, setConfig] = useConfig()
+ const isDesktop = useMediaQuery('(min-width: 1280px)')
+
+ if (config.sidebar === 'draggable') {
+ return (null);
+ const [scroll, setScroll] = React.useState(false);
+
+ React.useEffect(() => {
+ const handleScroll = () => {
+ if (scrollableNodeRef.current && scrollableNodeRef.current.scrollTop > 0) {
+ setScroll(true);
+ } else {
+ setScroll(false);
+ }
+ };
+ scrollableNodeRef.current?.addEventListener("scroll", handleScroll);
+ }, [scrollableNodeRef]);
+
+ return (
+ <>
+ {isDesktop && (
+
+
+ {isDesktop && Number(userRoleId) == 19 ? (
+
+
+
+ );
+}
diff --git a/components/partials/sidebar/menu/menu-dragable.tsx b/components/partials/sidebar/menu/menu-dragable.tsx
new file mode 100644
index 0000000..5ad72c4
--- /dev/null
+++ b/components/partials/sidebar/menu/menu-dragable.tsx
@@ -0,0 +1,212 @@
+"use client";
+
+import React from 'react'
+import Logo from '@/components/logo';
+import SidebarHoverToggle from '@/components/partials/sidebar/sidebar-hover-toggle';
+import { Ellipsis, LogOut } from "lucide-react";
+import { usePathname } from "@/components/navigation";
+
+import { cn } from "@/lib/utils";
+import { getMenuList } from "@/lib/menus";
+
+import { ScrollArea } from "@/components/ui/scroll-area";
+import {
+ Tooltip,
+ TooltipTrigger,
+ TooltipContent,
+ TooltipProvider
+} from "@/components/ui/tooltip";
+import { useConfig } from "@/hooks/use-config";
+import MenuLabel from "../common/menu-label";
+
+import MenuItem from "../common/menu-item";
+import { CollapseMenuButton } from "../common/collapse-menu-button";
+import MenuWidget from "../common/menu-widget";
+import SearchBar from '@/components/partials/sidebar/common/search-bar'
+import TeamSwitcher from '../common/team-switcher'
+
+// for dnd
+import {
+ DndContext,
+ KeyboardSensor,
+ MouseSensor,
+ TouchSensor,
+ closestCenter,
+ useSensor,
+ type DragEndEvent,
+ type UniqueIdentifier,
+ useSensors,
+} from "@dnd-kit/core";
+import {
+ restrictToVerticalAxis,
+ restrictToHorizontalAxis,
+} from "@dnd-kit/modifiers";
+import {
+ useSortable,
+ arrayMove,
+ SortableContext,
+ verticalListSortingStrategy,
+ horizontalListSortingStrategy,
+} from "@dnd-kit/sortable";
+import { useTranslations } from 'next-intl';
+import { useParams } from 'next/navigation'
+import { getLangDir } from 'rtl-detect';
+import { CSS } from "@dnd-kit/utilities";
+
+export function MenuDragAble() {
+ const t = useTranslations("Menu")
+ const pathname = usePathname();
+ const menuList = getMenuList(pathname, t);
+ const [config, setConfig] = useConfig()
+ const collapsed = config.collapsed
+
+ const params = useParams<{ locale: string; }>();
+ const direction = getLangDir(params?.locale ?? '');
+ // for dnd
+ // reorder rows after drag & drop
+ const [data, setData] = React.useState(menuList);
+
+ const dataIds = React.useMemo(
+ () => data.flatMap(group => group.menus.map(menu => menu.id)), [data]
+
+ );
+ function handleDragEnd(event: DragEndEvent) {
+ const { active, over } = event;
+
+ if (active && over && active.id !== over.id) {
+ setData((data) => {
+
+ const dataIds = data.flatMap(group => group.menus.map(menu => menu.id));
+
+ const oldIndex = dataIds.indexOf(active.id as string);
+ const newIndex = dataIds.indexOf(over.id as string);
+
+ if (oldIndex !== -1 && newIndex !== -1) {
+ // Flatten data
+ const flattenedMenus = data.flatMap(group => group.menus);
+ const updatedMenus = arrayMove(flattenedMenus, oldIndex, newIndex);
+
+ // Reconstruct the data structure
+ let currentIndex = 0;
+ const updatedData = data.map(group => {
+ const groupMenusCount = group.menus.length;
+ const updatedGroupMenus = updatedMenus.slice(currentIndex, currentIndex + groupMenusCount);
+ currentIndex += groupMenusCount;
+ return { ...group, menus: updatedGroupMenus };
+ });
+
+ return updatedData;
+ }
+ return data;
+ });
+ }
+ }
+
+ const sensors = useSensors(
+ useSensor(MouseSensor, {}),
+ useSensor(TouchSensor, {}),
+ useSensor(KeyboardSensor, {})
+ );
+
+ return (
+
+ <>
+
+
+
+
+
+
+
+
+
+
+
+ );
+}
\ No newline at end of file
diff --git a/components/partials/sidebar/menu/menu-two-column.tsx b/components/partials/sidebar/menu/menu-two-column.tsx
new file mode 100644
index 0000000..4739822
--- /dev/null
+++ b/components/partials/sidebar/menu/menu-two-column.tsx
@@ -0,0 +1,45 @@
+"use client";
+
+import React from 'react'
+import { Ellipsis, LogOut } from "lucide-react";
+import { usePathname } from "@/components/navigation";
+
+
+import { cn } from "@/lib/utils";
+import { getMenuList, type Group, type Menu, type Submenu } from "@/lib/menus";
+
+import { ScrollArea } from "@/components/ui/scroll-area";
+import {
+ Tooltip,
+ TooltipTrigger,
+ TooltipContent,
+ TooltipProvider
+} from "@/components/ui/tooltip";
+import { useConfig } from "@/hooks/use-config";
+import MenuLabel from "../common/menu-label";
+
+import MenuItem from "../common/menu-item";
+import { CollapseMenuButton } from "../common/collapse-menu-button";
+import MenuWidget from "../common/menu-widget";
+import SearchBar from '@/components/partials/sidebar/common/search-bar'
+import TeamSwitcher from '../common/team-switcher'
+import IconNav from './icon-nav';
+import SidebarNav from './sidebar-nav';
+import { useTranslations } from 'next-intl';
+
+
+export function MenuTwoColumn() {
+ // translate
+ const t = useTranslations("Menu")
+ const pathname = usePathname();
+ const menuList = getMenuList(pathname, t);
+
+ return (
+ <>
+ setMobileMenuConfig({ isOpen: !isOpen })}
+ >
+
+
+
+
+
+
+
+
+
+
+
+ );
+}
diff --git a/components/partials/sidebar/menu/sidebar-nav.tsx b/components/partials/sidebar/menu/sidebar-nav.tsx
new file mode 100644
index 0000000..270b2bf
--- /dev/null
+++ b/components/partials/sidebar/menu/sidebar-nav.tsx
@@ -0,0 +1,94 @@
+'use client'
+import React, { useEffect, useState } from 'react'
+import { ScrollArea } from "@/components/ui/scroll-area";
+import { Submenu, Group } from '@/lib/menus';
+import { useParams, usePathname } from 'next/navigation';
+import { Link } from "@/components/navigation"
+import { useConfig } from '@/hooks/use-config';
+import { Button } from '@/components/ui/button';
+import MenuLabel from '../common/menu-label';
+import MenuItem from '../common/menu-item';
+import { Icon } from '@/components/ui/icon';
+import { CollapseMenuButton2 } from '../common/collapse-menu-button2';
+import TeamSwitcher from '../common/team-switcher';
+import SearchBar from '../common/search-bar';
+import { getLangDir } from 'rtl-detect';
+const SidebarNav = ({ menuList }: { menuList: Group[] }) => {
+ const [config, setConfig] = useConfig()
+ const pathname = usePathname();
+ const params = useParams<{ locale: string; }>();
+ const direction = getLangDir(params?.locale ?? '');
+ const activeKey = pathname?.split('/')?.[2];
+ const data = menuList.find(item => item.id === activeKey);
+
+ // Render null if config.subMenu is true
+ if (config.subMenu || !config.hasSubMenu) {
+ return null;
+ }
+
+
+
+
+ return (
+
+ {config.sidebarBgImage !== undefined && (
+
+ )}
+
+
+
+
+
+
+
+ )
+}
+
+export default SidebarNav
\ No newline at end of file
diff --git a/components/partials/sidebar/sidebar-content.tsx b/components/partials/sidebar/sidebar-content.tsx
new file mode 100644
index 0000000..4249873
--- /dev/null
+++ b/components/partials/sidebar/sidebar-content.tsx
@@ -0,0 +1,61 @@
+'use client'
+import React from 'react'
+import { cn } from "@/lib/utils"
+import { useConfig } from '@/hooks/use-config'
+import { useMediaQuery } from "@/hooks/use-media-query";
+import { useMenuHoverConfig } from '@/hooks/use-menu-hover';
+
+const SidebarContent = ({ children }: { children: React.ReactNode }) => {
+ const isDesktop = useMediaQuery("(min-width: 1280px)");
+ const [config] = useConfig()
+ const [hoverConfig, setHoverConfig] = useMenuHoverConfig();
+ const sidebarTheme = config.sidebarTheme !== 'light' ? `dark theme-${config.sidebarTheme}` : `theme-${config.sidebarTheme}`
+
+ if (config.menuHidden || config.layout === "horizontal") return null
+
+ if (config.sidebar === 'two-column') {
+ return (
+
+
+ )
+ }
+
+
+ return (
+
+ )
+}
+
+export default SidebarContent
\ No newline at end of file
diff --git a/components/partials/sidebar/sidebar-hover-toggle.tsx b/components/partials/sidebar/sidebar-hover-toggle.tsx
new file mode 100644
index 0000000..c380dcb
--- /dev/null
+++ b/components/partials/sidebar/sidebar-hover-toggle.tsx
@@ -0,0 +1,34 @@
+'use client'
+import React from 'react'
+import { useMenuHoverConfig } from '@/hooks/use-menu-hover'
+import { cn } from "@/lib/utils"
+import { useConfig } from '@/hooks/use-config'
+import { useMediaQuery } from '@/hooks/use-media-query'
+
+
+const SidebarHoverToggle = () => {
+ const [hoverConfig, setHoverConfig] = useMenuHoverConfig();
+ const [config, setConfig] = useConfig();
+
+ const isDesktop = useMediaQuery("(min-width: 1280px)");
+ if (config.sidebar !== 'draggable' || !isDesktop) {
+ return null
+
+ }
+
+ return (
+ !config.collapsed || hoverConfig.hovered ? setConfig({ ...config, collapsed: !config.collapsed })}
+
+ className={cn("h-4 w-4 border-[1.5px] border-default-900 dark:border-default-700 rounded-full transition-all duration-150", {
+ "ring-2 ring-inset ring-offset-4 ring-black-900 dark:ring-default-400 bg-default-900 dark:bg-default-400 dark:ring-offset-default-700": !config.collapsed
+ })}
+
+ >
+ : null
+
+
+ )
+}
+
+export default SidebarHoverToggle
\ No newline at end of file
diff --git a/components/partials/sidebar/sidebar-toggle.tsx b/components/partials/sidebar/sidebar-toggle.tsx
new file mode 100644
index 0000000..33e1c30
--- /dev/null
+++ b/components/partials/sidebar/sidebar-toggle.tsx
@@ -0,0 +1,86 @@
+'use client'
+import { ChevronLeft } from "lucide-react";
+
+import { cn } from "@/lib/utils";
+import { Button } from "@/components/ui/button";
+import { useConfig } from "@/hooks/use-config";
+import { useMediaQuery } from "@/hooks/use-media-query";
+import { Icon } from "@/components/ui/icon";
+import { motion } from 'framer-motion';
+
+
+export function SidebarToggle() {
+ const [config, setConfig] = useConfig()
+ const collapsed = config.collapsed
+ const isDesktop = useMediaQuery('(min-width: 1280px)')
+ if (!isDesktop) return null
+ if (config.sidebar === 'two-column' && !config.hasSubMenu || config.menuHidden || config.layout === "horizontal" || config.sidebar === 'draggable' ) {
+ return null
+ }
+ if (config.sidebar === 'two-column') {
+ return (
+
+
+
+ )
+ }
+ return (
+
+
+
+ );
+}
\ No newline at end of file
diff --git a/components/project/activity.tsx b/components/project/activity.tsx
new file mode 100644
index 0000000..4ed9381
--- /dev/null
+++ b/components/project/activity.tsx
@@ -0,0 +1,28 @@
+import { Check } from "lucide-react";
+
+interface ActivityItemProps {
+ activity: {
+ title: string;
+ date: string;
+ }
+}
+const ActivityItem = ({ activity }: ActivityItemProps) => {
+ const { title, date } = activity;
+ return (
+
+
+
+ {title}
+
+
+ {date}
+
+
+
+ );
+};
+
+export default ActivityItem;
diff --git a/components/project/deals-distribution-chart.tsx b/components/project/deals-distribution-chart.tsx
new file mode 100644
index 0000000..2203543
--- /dev/null
+++ b/components/project/deals-distribution-chart.tsx
@@ -0,0 +1,78 @@
+"use client";
+import dynamic from "next/dynamic";
+const Chart = dynamic(() => import("react-apexcharts"), { ssr: false });
+import { useTheme } from "next-themes";
+import {
+ getGridConfig,
+ getXAxisConfig,
+ getYAxisConfig,
+} from "@/lib/appex-chart-options";
+import { colors } from "@/lib/colors";
+
+interface DealsDistributionChartProps {
+ height?: number;
+ seriesData?: number[];
+}
+const DealsDistributionChart = ({
+ height = 300 ,
+ seriesData =[90, 70, 85, 60, 80, 70, 90, 75, 60, 80]
+
+}: DealsDistributionChartProps) => {
+
+ const { theme: mode } = useTheme();
+ const series = [
+ {
+ data:seriesData
+ },
+ ];
+ const options: any = {
+ chart: {
+ toolbar: {
+ show: false,
+ },
+ },
+ dataLabels: {
+ enabled: false,
+ },
+ stroke: {
+ curve: "smooth",
+ width: 4,
+ },
+ colors: [colors.primary],
+ tooltip: {
+ theme: mode === "dark" ? "dark" : "light",
+ },
+ grid: getGridConfig(),
+ fill: {
+ type: "gradient",
+ colors: [colors.primary],
+ gradient: {
+ shadeIntensity: 1,
+ opacityFrom: 0.4,
+ opacityTo: 0.5,
+ stops: [50, 100, 0],
+ },
+ },
+ yaxis: getYAxisConfig(mode === 'light' ? colors["default-600"] : colors["default-300"]),
+ xaxis: getXAxisConfig(
+ mode === 'light' ? colors["default-600"] : colors["default-300"]
+ ),
+ padding: {
+ top: 0,
+ right: 0,
+ bottom: 0,
+ left: 0,
+ },
+ };
+ return (
+
+
+
+
+
+
+
+
+ {title}
+ {desc}
+ 3 min ago
+
+
+ {hasnotifaction && (
+
+
+ {notification_count}
+
+
+ )}
+
+ );
+};
+
+export default MessageListItem;
\ No newline at end of file
diff --git a/components/project/notes-calendar.tsx b/components/project/notes-calendar.tsx
new file mode 100644
index 0000000..d5620f4
--- /dev/null
+++ b/components/project/notes-calendar.tsx
@@ -0,0 +1,18 @@
+"use client"
+
+import { useState } from "react"
+import { Calendar } from "@/components/ui/calendar"
+
+const NotesCalendar = () => {
+ const [date, setDate] = useState(new Date())
+
+ return (
+
+
+
+ SA
+
+
+
+ {title}
+
+
+
+
+ );
+};
+
+export default TaskItem;
\ No newline at end of file
diff --git a/components/project/team-table.tsx b/components/project/team-table.tsx
new file mode 100644
index 0000000..0e982e6
--- /dev/null
+++ b/components/project/team-table.tsx
@@ -0,0 +1,298 @@
+"use client"
+
+import * as React from "react"
+import Chart from "react-apexcharts";
+import {
+ ColumnDef,
+ ColumnFiltersState,
+ PaginationState,
+ SortingState,
+ VisibilityState,
+ flexRender,
+ getCoreRowModel,
+ getFilteredRowModel,
+ getPaginationRowModel,
+ getSortedRowModel,
+ useReactTable,
+} from "@tanstack/react-table"
+import { Button } from "@/components/ui/button"
+
+import {
+ Table,
+ TableBody,
+ TableCell,
+ TableHead,
+ TableHeader,
+ TableRow,
+} from "@/components/ui/table"
+import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"
+import { Eye, MoreVertical, SquarePen, Trash2 } from "lucide-react"
+
+import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "@/components/ui/dropdown-menu"
+import { colors } from "@/lib/colors"
+
+
+export type TeamTableProps = {
+ customer: {
+ name: string;
+ image: string;
+ deg: string;
+ },
+ status: "progress" | "complete";
+ time: string;
+ chart: null;
+ action:null;
+}
+const series = [
+ {
+ data: [800, 600, 1000, 800, 600, 1000, 800, 900],
+ }
+];
+const options: any = {
+ chart: {
+ toolbar: {
+ autoSelected: "pan",
+ show: false,
+ },
+ offsetX: 0,
+ offsetY: 0,
+ zoom: {
+ enabled: false,
+ },
+ sparkline: {
+ enabled: true,
+ },
+ },
+ dataLabels: {
+ enabled: false,
+ },
+ stroke: {
+ curve: "smooth",
+ width: 2,
+ },
+ colors: [colors.primary],
+ tooltip: {
+ theme: "dark",
+ },
+ grid: {
+ show: false,
+ padding: {
+ left: 0,
+ right: 0,
+ },
+ },
+ yaxis: {
+ show: false,
+ },
+ fill: {
+ type: "solid",
+ opacity: [0.1],
+ },
+ legend: {
+ theme: "dark",
+ show: false,
+ },
+ xaxis: {
+ low: 0,
+ offsetX: 0,
+ offsetY: 0,
+ show: false,
+ labels: {
+ low: 0,
+ offsetX: 0,
+ show: false,
+ },
+ axisBorder: {
+ low: 0,
+ offsetX: 0,
+ show: false,
+ },
+ },
+};
+
+
+export const columns: ColumnDef[] = [
+ {
+ accessorKey: "customer",
+ header: "ASSIGNEE",
+ cell: ({ row }) => (
+
+
+
+
+ SC
+
+
+
+
+ {row.original.customer.name}
+
+
+ ),
+ },
+ {
+ accessorKey: "status",
+ header: "status",
+ enableSorting: false,
+ cell: ({ row }) => {
+ return (
+
+
+ {row.getValue("status") === "progress" && (
+
+
+ In progress
+
+ )}
+ {row.getValue("status") === "complete" && (
+
+
+ Complete
+
+ )}
+
+
+ )
+ }
+ },
+ {
+ accessorKey: "time",
+ header: "Time",
+ cell: ({ row }) => (
+ {row.getValue("time")}
+ )
+ },
+ {
+ accessorKey: "chart",
+ header: "Chart",
+ cell: ({ row }) => (
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ )
+ }
+ }
+]
+
+const TeamTable = ({ data }: any) => {
+ const [sorting, setSorting] = React.useState([])
+ const [columnFilters, setColumnFilters] = React.useState([])
+ const [columnVisibility, setColumnVisibility] = React.useState({})
+ const [rowSelection, setRowSelection] = React.useState({})
+ const [pagination, setPagination] = React.useState({
+ pageIndex: 0,
+ pageSize: 6,
+ })
+
+ const table = useReactTable({
+ data,
+ columns,
+ onSortingChange: setSorting,
+ onColumnFiltersChange: setColumnFilters,
+ getCoreRowModel: getCoreRowModel(),
+ getPaginationRowModel: getPaginationRowModel(),
+ getSortedRowModel: getSortedRowModel(),
+ getFilteredRowModel: getFilteredRowModel(),
+ onColumnVisibilityChange: setColumnVisibility,
+ onRowSelectionChange: setRowSelection,
+ onPaginationChange: setPagination,
+ state: {
+ sorting,
+ columnFilters,
+ columnVisibility,
+ rowSelection,
+ pagination
+ },
+ })
+
+ return (
+
+
+
+ {table.getHeaderGroups().map((headerGroup) => (
+
+ {headerGroup.headers.map((header) => (
+
+ {header.isPlaceholder ? null : flexRender(
+ header.column.columnDef.header,
+ header.getContext()
+ )}
+
+ ))}
+
+ ))}
+
+
+ {table.getRowModel().rows?.length ? (
+ table.getRowModel().rows.map((row) => (
+
+ {row.getVisibleCells().map((cell) => (
+
+ {flexRender(
+ cell.column.columnDef.cell,
+ cell.getContext()
+ )}
+
+ ))}
+
+ ))
+ ) : (
+
+
+ No results.
+
+
+ )}
+
+
+
+
+
+ )
+}
+
+export default TeamTable;
+
diff --git a/components/revenue-bar-chart.tsx b/components/revenue-bar-chart.tsx
new file mode 100644
index 0000000..f1afa9e
--- /dev/null
+++ b/components/revenue-bar-chart.tsx
@@ -0,0 +1,174 @@
+"use client"
+
+import { useConfig } from "@/hooks/use-config";
+import { useTranslations } from "next-intl";
+import { useTheme } from "next-themes";
+import dynamic from "next/dynamic";
+const Chart = dynamic(() => import("react-apexcharts"), { ssr: false });
+
+interface RevenueBarChartProps {
+ height?: number;
+ chartType?: "bar" | "area";
+ series?: any[];
+ chartColors?: string[]
+}
+const defaultSeries = [{
+ name: "Net Profit",
+ data: [44, 55, 57, 56, 61, 58, 63, 60, 66],
+},
+{
+ name: "Revenue",
+ data: [76, 85, 101, 98, 87, 105, 91, 114, 94],
+},
+{
+ name: "Free Cash Flow",
+ data: [35, 41, 36, 26, 45, 48, 52, 53, 41],
+}]
+const RevenueBarChart = ({
+ height = 400,
+ chartType = "bar",
+ series = defaultSeries,
+ chartColors = ["#4669FA", "#0CE7FA", "#FA916B"]
+
+}: RevenueBarChartProps) => {
+ const [config] = useConfig();
+ const { isRtl } = config;
+ const t = useTranslations("AnalyticsDashboard");
+ const { theme: mode } = useTheme();
+ const options: any = {
+ chart: {
+ toolbar: {
+ show: false,
+ },
+ },
+ plotOptions: {
+ bar: {
+ horizontal: false,
+ endingShape: "rounded",
+ columnWidth: "45%",
+ },
+ },
+ legend: {
+ show: true,
+ position: "top",
+ horizontalAlign: "right",
+ fontSize: "12px",
+ fontFamily: "Inter",
+ offsetY: -30,
+ markers: {
+ width: 8,
+ height: 8,
+ offsetY: -1,
+ offsetX: -5,
+ radius: 12,
+ },
+ labels: {
+ colors: mode === "dark" ? "#CBD5E1" : "#475569",
+ },
+ itemMargin: {
+ horizontal: 18,
+ vertical: 0,
+ },
+ },
+ title: {
+ text: `${t("revenue_report", { defaultValue: "Revenue Report" })}`,
+ align: "left",
+ offsetY: 13,
+ offsetX: isRtl ? "0%" : 0,
+ floating: false,
+ style: {
+ fontSize: "20px",
+ fontWeight: "500",
+ fontFamily: "Inter",
+ color: mode === "dark" ? "#fff" : "#0f172a",
+ },
+ },
+ dataLabels: {
+ enabled: false,
+ },
+ stroke: {
+ show: true,
+ width: 2,
+ colors: ["transparent"],
+ },
+ yaxis: {
+ labels: {
+ style: {
+ colors: mode === "dark" ? "#CBD5E1" : "#475569",
+ fontFamily: "Inter",
+ },
+ },
+ },
+ xaxis: {
+ categories: [
+ "Feb",
+ "Mar",
+ "Apr",
+ "May",
+ "Jun",
+ "Jul",
+ "Aug",
+ "Sep",
+ "Oct",
+ ],
+ labels: {
+ style: {
+ colors: mode === "dark" ? "#CBD5E1" : "#475569",
+ fontFamily: "Inter",
+ },
+ },
+ axisBorder: {
+ show: false,
+ },
+ axisTicks: {
+ show: false,
+ },
+ },
+
+ fill: {
+ opacity: 1,
+ },
+ tooltip: {
+ y: {
+ formatter: function (val: number) {
+ return "$ " + val + " thousands";
+ },
+ },
+ },
+ colors: chartColors,
+ grid: {
+ show: false,
+ borderColor: mode === "dark" ? "#334155" : "#E2E8F0",
+ strokeDashArray: 10,
+ position: "back",
+ },
+ responsive: [
+ {
+ breakpoint: 600,
+ options: {
+ legend: {
+ position: "bottom",
+ offsetY: 8,
+ horizontalAlign: "center",
+ },
+ plotOptions: {
+ bar: {
+ columnWidth: "80%",
+ },
+ },
+ },
+ },
+ ],
+ };
+ return (
+ Image Component With Shimmer Data URL
+ ,
+ React.ComponentPropsWithoutRef
+>(({ className, ...props }, ref) => (
+ ,
+ React.ComponentPropsWithoutRef
+>(({ className, children, ...props }, ref) => (
+
+ svg]:rotate-180 rounded-md data-[state=open]:rounded-b-none ",
+ className
+ )}
+ {...props}
+ >
+ {children}
+
+
+));
+AccordionTrigger.displayName = AccordionPrimitive.Trigger.displayName
+
+const AccordionContent = React.forwardRef<
+ React.ElementRef,
+ React.ComponentPropsWithoutRef
+>(({ className, children, ...props }, ref) => (
+
+ {children}
+
+))
+
+AccordionContent.displayName = AccordionPrimitive.Content.displayName
+
+export { Accordion, AccordionItem, AccordionTrigger, AccordionContent }
diff --git a/components/ui/alert-dialog.tsx b/components/ui/alert-dialog.tsx
new file mode 100644
index 0000000..6d1c5d5
--- /dev/null
+++ b/components/ui/alert-dialog.tsx
@@ -0,0 +1,141 @@
+"use client"
+
+import * as React from "react"
+import * as AlertDialogPrimitive from "@radix-ui/react-alert-dialog"
+
+import { cn } from "@/lib/utils"
+import { buttonVariants } from "@/components/ui/button"
+
+const AlertDialog = AlertDialogPrimitive.Root
+
+const AlertDialogTrigger = AlertDialogPrimitive.Trigger
+
+const AlertDialogPortal = AlertDialogPrimitive.Portal
+
+const AlertDialogOverlay = React.forwardRef<
+ React.ElementRef,
+ React.ComponentPropsWithoutRef
+>(({ className, ...props }, ref) => (
+ ,
+ React.ComponentPropsWithoutRef
+>(({ className, ...props }, ref) => (
+
+
+))
+AlertDialogContent.displayName = AlertDialogPrimitive.Content.displayName
+
+const AlertDialogHeader = ({
+ className,
+ ...props
+}: React.HTMLAttributes) => (
+
+)
+AlertDialogHeader.displayName = "AlertDialogHeader"
+
+const AlertDialogFooter = ({
+ className,
+ ...props
+}: React.HTMLAttributes) => (
+
+)
+AlertDialogFooter.displayName = "AlertDialogFooter"
+
+const AlertDialogTitle = React.forwardRef<
+ React.ElementRef,
+ React.ComponentPropsWithoutRef
+>(({ className, ...props }, ref) => (
+ ,
+ React.ComponentPropsWithoutRef
+>(({ className, ...props }, ref) => (
+ ,
+ React.ComponentPropsWithoutRef
+>(({ className, ...props }, ref) => (
+ ,
+ React.ComponentPropsWithoutRef
+>(({ className, ...props }, ref) => (
+ ,
+ VariantProps {
+ dismissible?: boolean;
+ onDismiss?: () => void;
+ color?: color;
+ shadow?: shadow;
+ rounded?: rounded;
+}
+
+const Alert = React.forwardRef(
+ ({ className, color, variant, dismissible, onDismiss, children, ...props }, ref) => {
+ const [dismissed, setDismissed] = React.useState(false);
+
+ const handleDismiss = () => {
+ setDismissed(true);
+ if (onDismiss) {
+ onDismiss();
+ }
+ };
+
+ return !dismissed ? (
+
+ {children}
+ {dismissible && (
+
+ )}
+
+ ) : null;
+ }
+);
+Alert.displayName = "Alert";
+
+const AlertTitle = React.forwardRef>(
+ ({ className, ...props }, ref) => (
+
+ )
+);
+AlertTitle.displayName = "AlertTitle";
+
+const AlertDescription = React.forwardRef<
+ HTMLParagraphElement,
+ React.HTMLAttributes
+>(({ className, ...props }, ref) => (
+
+));
+AlertDescription.displayName = "AlertDescription";
+
+export { Alert, AlertTitle, AlertDescription };
+
diff --git a/components/ui/avatar.tsx b/components/ui/avatar.tsx
new file mode 100644
index 0000000..52d8ffa
--- /dev/null
+++ b/components/ui/avatar.tsx
@@ -0,0 +1,213 @@
+"use client";
+
+import * as React from "react";
+import * as AvatarPrimitive from "@radix-ui/react-avatar";
+
+import { cn } from "@/lib/utils";
+import { cva } from "class-variance-authority";
+import { color, rounded } from "@/lib/type";
+
+export interface AvatarProps extends React.HTMLAttributes {
+ size?: "sm" | "base" | "md" | "lg" | "xl";
+ shape?: "circle" | "square";
+ color?: color;
+ variant?: "default" | "outline" | "soft" | "ghost";
+ rounded?: rounded;
+}
+
+const avatarVariant = cva(
+ "inline-flex items-center justify-center font-normal text-foreground select-none shrink-0 overflow-hidden",
+ {
+ variants: {
+ color: {
+ default: "bg-default text-default-foreground hover:bg-default/90 hover:ring-default",
+ primary: "bg-primary text-primary-foreground hover:bg-primary/90 hover:ring-primary",
+ secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80 hover:ring-secondary",
+ destructive: "bg-destructive text-destructive-foreground hover:bg-destructive/90 hover:ring-destructive",
+ warning: "bg-warning text-warning-foreground hover:bg-warning/90 hover:ring-warning",
+ info: "bg-info text-info-foreground hover:bg-info/90 hover:ring-info",
+ success: "bg-success text-success-foreground hover:bg-success/90 hover:ring-success",
+ },
+ variant: {
+ default: "",
+ outline: "border border-default text-default bg-transparent hover:bg-default hover:text-default-foreground hover:ring-0 hover:ring-transparent",
+ soft: "bg-opacity-10 text-default-foreground hover:bg-opacity-100 hover:text-primary-foreground",
+ ghost: "bg-transparent text-default hover:bg-transparent-10 hover:ring-0 hover:ring-transparent",
+ },
+ size: {
+ sm: "h-10 w-10 text-xs",
+ base: "h-16 w-16 text-2xl",
+ md: "h-24 w-24 text-3xl",
+ lg: "h-28 w-28 text-4xl",
+ xl: "h-32 w-32 text-5xl",
+ },
+ rounded: {
+ sm: "rounded-sm",
+ md: "rounded-md",
+ lg: "rounded-lg",
+ full: "rounded-full"
+ },
+ shape: {
+ circle: "rounded-full",
+ square: "rounded-md",
+ },
+ },
+ compoundVariants: [
+ {
+ variant: "outline",
+ color: "primary",
+ class: "text-primary border-primary hover:text-primary-foreground hover:border-primary hover:bg-primary",
+ },
+ {
+ variant: "outline",
+ color: "secondary",
+ class: "text-secondary border-secondary hover:text-secondary-foreground hover:border-secondary hover:bg-secondary",
+ },
+ {
+ variant: "outline",
+ color: "success",
+ class: "text-success border-success hover:text-success-foreground hover:border-success hover:bg-success",
+ },
+ {
+ variant: "outline",
+ color: "info",
+ class: "text-info border-info hover:text-info-foreground hover:border-info hover:bg-info",
+ },
+ {
+ variant: "outline",
+ color: "warning",
+ class: "text-warning border-warning hover:text-warning-foreground hover:border-warning hover:bg-warning",
+ },
+ {
+ variant: "outline",
+ color: "destructive",
+ class: "text-destructive border-destructive hover:text-destructive-foreground hover:border-destructive hover:bg-destructive",
+ },
+ {
+ variant: "outline",
+ color: "info",
+ class: "text-info hover:text-info-foreground hover:border-info hover:bg-info",
+ },
+ {
+ variant: "soft",
+ color: "primary",
+ class: "text-primary hover:text-primary-foreground",
+ },
+ {
+ variant: "soft",
+ color: "secondary",
+ class: "text-secondary hover:text-secondary-foreground",
+ },
+ {
+ variant: "soft",
+ color: "success",
+ class: "text-success hover:text-success-foreground",
+ },
+ {
+ variant: "soft",
+ color: "info",
+ class: "text-info hover:text-info-foreground",
+ },
+ {
+ variant: "soft",
+ color: "warning",
+ class: "text-warning hover:text-warning-foreground",
+ },
+ {
+ variant: "soft",
+ color: "destructive",
+ class: "bg-destructive/10 text-destructive hover:text-destructive-foreground",
+ },
+ {
+ variant: "ghost",
+ color: "primary",
+ class: "text-primary bg-primary/10",
+ },
+ {
+ variant: "ghost",
+ color: "secondary",
+ class: "text-secondary bg-secondary/10",
+ },
+ {
+ variant: "ghost",
+ color: "success",
+ class: "text-success bg-success/10",
+ },
+ {
+ variant: "ghost",
+ color: "info",
+ class: "text-info bg-info/10",
+ },
+ {
+ variant: "ghost",
+ color: "warning",
+ class: "text-warning bg-warning/10",
+ },
+ {
+ variant: "ghost",
+ color: "destructive",
+ class: "text-destructive bg-destructive/10",
+ },
+ {
+ variant: "ghost",
+ color: "default",
+ class: "text-default bg-default/10",
+ },
+ ],
+ defaultVariants: {
+ color: "default",
+ size: "sm",
+ rounded: "full",
+ variant: "default"
+ },
+ }
+);
+
+const Avatar = React.forwardRef(
+ ({ size, shape, color, variant, rounded, className, ...props }, ref) => {
+ return (
+ { }
+
+const AvatarImage = React.forwardRef(
+ ({ className, ...props }, ref) => {
+ return (
+ { }
+
+const AvatarFallback = React.forwardRef(
+ ({ className, ...props }, ref) => {
+ return (
+ ,
+ VariantProps {
-function Badge({
- className,
- variant,
- asChild = false,
- ...props
-}: React.ComponentProps<"span"> &
- VariantProps & { asChild?: boolean }) {
- const Comp = asChild ? Slot : "span"
-
- return (
-
- )
-}
+const BreadcrumbList = React.forwardRef<
+ HTMLOListElement,
+ React.ComponentPropsWithoutRef<"ol">
+>(({ className, ...props }, ref) => (
+
+))
+BreadcrumbList.displayName = "BreadcrumbList"
-function BreadcrumbItem({ className, ...props }: React.ComponentProps<"li">) {
- return (
-
- )
-}
+const BreadcrumbItem = React.forwardRef<
+ HTMLLIElement,
+ React.ComponentPropsWithoutRef<"li">
+>(({ className, ...props }, ref) => (
+
+))
+BreadcrumbItem.displayName = "BreadcrumbItem"
-function BreadcrumbLink({
- asChild,
- className,
- ...props
-}: React.ComponentProps<"a"> & {
- asChild?: boolean
-}) {
+const BreadcrumbLink = React.forwardRef<
+ HTMLAnchorElement,
+ React.ComponentPropsWithoutRef<"a"> & {
+ asChild?: boolean
+ }
+>(({ asChild, className, ...props }, ref) => {
const Comp = asChild ? Slot : "a"
return (
,
- VariantProps {
- asChild?: boolean;
- color?: color;
- shadow?: shadow;
- rounded?: rounded;
- fullWidth?: boolean;
- size?: "default" | "sm" | "md" | "lg" | "icon";
+ VariantProps {
+ asChild?: boolean
+ color?: color
+ shadow?: shadow
+ rounded?: rounded
+ fullWidth?: boolean
+ size?: "default" | "sm" | "md" | "lg" | "icon"
}
const Button = React.forwardRef(
- (
- {
- className,
- variant,
- size,
- color,
- fullWidth,
- shadow,
- rounded,
- asChild = false,
- ...props
- },
- ref
- ) => {
- const Comp = asChild ? Slot : "button";
+ ({ className, variant, size, color, fullWidth, shadow, rounded, asChild = false, ...props }, ref) => {
+ const Comp = asChild ? Slot : "button"
return (
function Calendar({
className,
classNames,
showOutsideDays = true,
...props
-}: React.ComponentProps) {
+}: CalendarProps) {
return (
.day-range-end)]:rounded-r-md [&:has(>.day-range-start)]:rounded-l-md first:[&:has([aria-selected])]:rounded-l-md last:[&:has([aria-selected])]:rounded-r-md"
- : "[&:has([aria-selected])]:rounded-md"
- ),
- day: cn(
- buttonVariants({ variant: "ghost" }),
- "size-8 p-0 font-normal aria-selected:opacity-100"
- ),
- day_range_start:
- "day-range-start aria-selected:bg-primary aria-selected:text-primary-foreground",
- day_range_end:
- "day-range-end aria-selected:bg-primary aria-selected:text-primary-foreground",
+ "flex-1 text-muted-foreground rounded-md w-9 font-normal text-[0.8rem]",
+ row: "flex w-full gap-1 mt-2",
+ cell: "flex-1 text-center text-sm p-0 relative [&:has([aria-selected])]:bg-default [&:has([aria-selected])]:rounded-md focus-within:relative focus-within:z-20",
+ day: "w-full h-9 rounded p-0 font-normal aria-selected:opacity-100 bg-transparent text-current hover:text-default",
day_selected:
- "bg-primary text-primary-foreground hover:bg-primary hover:text-primary-foreground focus:bg-primary focus:text-primary-foreground",
+ "bg-default text-default-foreground hover:bg-default hover:text-default-foreground focus:bg-default focus:text-default-foreground",
day_today: "bg-accent text-accent-foreground",
- day_outside:
- "day-outside text-muted-foreground aria-selected:text-muted-foreground",
+ day_outside: "text-muted-foreground opacity-50",
day_disabled: "text-muted-foreground opacity-50",
- day_range_middle:
- "aria-selected:bg-accent aria-selected:text-accent-foreground",
+ day_range_middle: "aria-selected:bg-accent aria-selected:text-accent-foreground",
day_hidden: "invisible",
...classNames,
}}
- components={
- {
- // IconLeft: ({ className, ...props }) => (
- // >(({ className, ...props }, ref) => {
+ const [config] = useConfig();
return (
)
}
-function CardHeader({ className, ...props }: React.ComponentProps<"div">) {
- return (
-
- )
-}
+)
+Card.displayName = "Card"
-function CardTitle({ className, ...props }: React.ComponentProps<"div">) {
- return (
-
- )
-}
+const CardHeader = React.forwardRef<
+ HTMLDivElement,
+ React.HTMLAttributes
+>(({ className, ...props }, ref) => (
+
+))
+CardHeader.displayName = "CardHeader"
-function CardDescription({ className, ...props }: React.ComponentProps<"div">) {
- return (
-
- )
-}
+const CardTitle = React.forwardRef<
+ HTMLParagraphElement,
+ React.HTMLAttributes
+>(({ className, ...props }, ref) => (
+
+))
+CardTitle.displayName = "CardTitle"
-function CardAction({ className, ...props }: React.ComponentProps<"div">) {
- return (
-
- )
-}
+const CardDescription = React.forwardRef<
+ HTMLParagraphElement,
+ React.HTMLAttributes
+>(({ className, ...props }, ref) => (
+
+))
+CardDescription.displayName = "CardDescription"
-function CardContent({ className, ...props }: React.ComponentProps<"div">) {
- return (
-
- )
-}
+const CardContent = React.forwardRef<
+ HTMLDivElement,
+ React.HTMLAttributes
+>(({ className, ...props }, ref) => (
+
+))
+CardContent.displayName = "CardContent"
-function CardFooter({ className, ...props }: React.ComponentProps<"div">) {
- return (
-
- )
-}
+const CardFooter = React.forwardRef<
+ HTMLDivElement,
+ React.HTMLAttributes
+>(({ className, ...props }, ref) => (
+
+))
+CardFooter.displayName = "CardFooter"
-export {
- Card,
- CardHeader,
- CardFooter,
- CardTitle,
- CardAction,
- CardDescription,
- CardContent,
-}
+export { Card, CardHeader, CardFooter, CardTitle, CardDescription, CardContent }
diff --git a/components/ui/carousel.tsx b/components/ui/carousel.tsx
index 0e05a77..e97c697 100644
--- a/components/ui/carousel.tsx
+++ b/components/ui/carousel.tsx
@@ -1,108 +1,107 @@
-"use client"
+"use client";
-import * as React from "react"
-import useEmblaCarousel, {
- type UseEmblaCarouselType,
-} from "embla-carousel-react"
-import { ArrowLeft, ArrowRight } from "lucide-react"
+import * as React from "react";
+import useEmblaCarousel, { type UseEmblaCarouselType } from "embla-carousel-react";
+import { ArrowLeft, ArrowRight } from "lucide-react";
-import { cn } from "@/lib/utils"
-import { Button } from "@/components/ui/button"
+import { cn } from "@/lib/utils";
+import { Button } from "@/components/ui/button";
-type CarouselApi = UseEmblaCarouselType[1]
-type UseCarouselParameters = Parameters
-type CarouselOptions = UseCarouselParameters[0]
-type CarouselPlugin = UseCarouselParameters[1]
+type CarouselApi = UseEmblaCarouselType[1];
+type UseCarouselParameters = Parameters;
+type CarouselOptions = UseCarouselParameters[0];
+type CarouselPlugin = UseCarouselParameters[1];
type CarouselProps = {
- opts?: CarouselOptions
- plugins?: CarouselPlugin
- orientation?: "horizontal" | "vertical"
- setApi?: (api: CarouselApi) => void
-}
+ opts?: CarouselOptions;
+ plugins?: CarouselPlugin;
+ orientation?: "horizontal" | "vertical";
+ setApi?: (api: CarouselApi) => void;
+};
type CarouselContextProps = {
- carouselRef: ReturnType[0]
- api: ReturnType[1]
- scrollPrev: () => void
- scrollNext: () => void
- canScrollPrev: boolean
- canScrollNext: boolean
-} & CarouselProps
+ carouselRef: ReturnType[0];
+ api: ReturnType[1];
+ scrollPrev: () => void;
+ scrollNext: () => void;
+ canScrollPrev: boolean;
+ canScrollNext: boolean;
+} & CarouselProps;
-const CarouselContext = React.createContext(null)
+const CarouselContext = React.createContext(null);
function useCarousel() {
- const context = React.useContext(CarouselContext)
+ const context = React.useContext(CarouselContext);
if (!context) {
- throw new Error("useCarousel must be used within a & CarouselProps>(({ orientation = "horizontal", opts, setApi, plugins, className, children, ...props }, ref) => {
const [carouselRef, api] = useEmblaCarousel(
{
...opts,
axis: orientation === "horizontal" ? "x" : "y",
},
plugins
- )
- const [canScrollPrev, setCanScrollPrev] = React.useState(false)
- const [canScrollNext, setCanScrollNext] = React.useState(false)
+ );
+ const [canScrollPrev, setCanScrollPrev] = React.useState(false);
+ const [canScrollNext, setCanScrollNext] = React.useState(false);
const onSelect = React.useCallback((api: CarouselApi) => {
- if (!api) return
- setCanScrollPrev(api.canScrollPrev())
- setCanScrollNext(api.canScrollNext())
- }, [])
+ if (!api) {
+ return;
+ }
+
+ setCanScrollPrev(api.canScrollPrev());
+ setCanScrollNext(api.canScrollNext());
+ }, []);
const scrollPrev = React.useCallback(() => {
- api?.scrollPrev()
- }, [api])
+ api?.scrollPrev();
+ }, [api]);
const scrollNext = React.useCallback(() => {
- api?.scrollNext()
- }, [api])
+ api?.scrollNext();
+ }, [api]);
const handleKeyDown = React.useCallback(
(event: React.KeyboardEvent) => {
if (event.key === "ArrowLeft") {
- event.preventDefault()
- scrollPrev()
+ event.preventDefault();
+ scrollPrev();
} else if (event.key === "ArrowRight") {
- event.preventDefault()
- scrollNext()
+ event.preventDefault();
+ scrollNext();
}
},
[scrollPrev, scrollNext]
- )
+ );
React.useEffect(() => {
- if (!api || !setApi) return
- setApi(api)
- }, [api, setApi])
+ if (!api || !setApi) {
+ return;
+ }
+
+ setApi(api);
+ }, [api, setApi]);
React.useEffect(() => {
- if (!api) return
- onSelect(api)
- api.on("reInit", onSelect)
- api.on("select", onSelect)
+ if (!api) {
+ return;
+ }
+
+ onSelect(api);
+ api.on("reInit", onSelect);
+ api.on("select", onSelect);
return () => {
- api?.off("select", onSelect)
- }
- }, [api, onSelect])
+ api?.off("select", onSelect);
+ };
+ }, [api, onSelect]);
return (
-
+
{children}
- )
-}
+ );
+});
+Carousel.displayName = "Carousel";
-function CarouselContent({ className, ...props }: React.ComponentProps<"div">) {
- const { carouselRef, orientation } = useCarousel()
+const CarouselContent = React.forwardRef>(({ className, ...props }, ref) => {
+ const { carouselRef, orientation } = useCarousel();
return (
-
-
+
+
- )
-}
+ );
+});
+CarouselContent.displayName = "CarouselContent";
-function CarouselItem({ className, ...props }: React.ComponentProps<"div">) {
- const { orientation } = useCarousel()
+const CarouselItem = React.forwardRef>(({ className, ...props }, ref) => {
+ const { orientation } = useCarousel();
- return (
-
- )
-}
+ return ;
+});
+CarouselItem.displayName = "CarouselItem";
-function CarouselPrevious({
- className,
- variant = "outline",
- size = "icon",
- ...props
-}: React.ComponentProps) {
- const { orientation, scrollPrev, canScrollPrev } = useCarousel()
+const CarouselPrevious = React.forwardRef>(({ className, variant = "outline", size = "icon", ...props }, ref) => {
+ const { orientation, scrollPrev, canScrollPrev } = useCarousel();
return (
- )
-}
+ );
+});
+CarouselPrevious.displayName = "CarouselPrevious";
-function CarouselNext({
- className,
- variant = "outline",
- size = "icon",
- ...props
-}: React.ComponentProps) {
- const { orientation, scrollNext, canScrollNext } = useCarousel()
+const CarouselNext = React.forwardRef>(({ className, variant = "outline", size = "icon", ...props }, ref) => {
+ const { orientation, scrollNext, canScrollNext } = useCarousel();
return (
- )
-}
+ );
+});
+CarouselNext.displayName = "CarouselNext";
-export {
- type CarouselApi,
- Carousel,
- CarouselContent,
- CarouselItem,
- CarouselPrevious,
- CarouselNext,
-}
+export { type CarouselApi, Carousel, CarouselContent, CarouselItem, CarouselPrevious, CarouselNext };
diff --git a/components/ui/checkbox.tsx b/components/ui/checkbox.tsx
index fa0e4b5..e034644 100644
--- a/components/ui/checkbox.tsx
+++ b/components/ui/checkbox.tsx
@@ -2,31 +2,65 @@
import * as React from "react"
import * as CheckboxPrimitive from "@radix-ui/react-checkbox"
-import { CheckIcon } from "lucide-react"
-
+import { Check } from "lucide-react"
import { cn } from "@/lib/utils"
+import { cva, type VariantProps } from "class-variance-authority"
+import { color } from "@/lib/type"
-function Checkbox({
- className,
- ...props
-}: React.ComponentProps) {
- return (
- &
+ VariantProps & {
+ color?: color
+ icon?: React.ReactNode;
+ };
+
+
+const Checkbox = React.forwardRef<
+ React.ElementRef,
+ CheckboxProps
+>(({ className, color, ...props }, ref) => (
+
+
-
-
-
- )
-}
+
+));
+
+Checkbox.displayName = CheckboxPrimitive.Root.displayName;
export { Checkbox }
diff --git a/components/ui/cleave.tsx b/components/ui/cleave.tsx
new file mode 100644
index 0000000..6630724
--- /dev/null
+++ b/components/ui/cleave.tsx
@@ -0,0 +1,30 @@
+"use client";
+import * as React from "react";
+import Cleave from "cleave.js/react";
+import "cleave.js/dist/addons/cleave-phone.us";
+import { cn } from "@/lib/utils";
+import { CleaveOptions } from "cleave.js/options";
+interface CleaveInputProps extends React.InputHTMLAttributes {
+ options: CleaveOptions;
+}
+
+const CleaveInput = React.forwardRef(({ className, type, ...props }, ref) => {
+ return (
+
+
+
+
+
+
+
+
+
+ {emptyMessage}
+
+ {options.map((option) => (
+ {
+ onValueChange?.(currentValue === value ? "" : currentValue);
+ setOpen(false);
+ }}
+ >
+
+ ))}
+
+
+
+
+
+ );
+}
+
+// Specialized combobox for Google Places Autocomplete
+interface PlacesComboboxProps {
+ value: string;
+ onValueChange: (value: string) => void;
+ onSelect: (address: string) => void;
+ suggestions: Array<{ place_id: string; description: string }>;
+ status: string;
+ disabled?: boolean;
+ placeholder?: string;
+ className?: string;
+}
+
+export function PlacesCombobox({
+ value,
+ onValueChange,
+ onSelect,
+ suggestions,
+ status,
+ disabled = false,
+ placeholder = "Cari Alamat",
+ className,
+}: PlacesComboboxProps) {
+ const [open, setOpen] = React.useState(false);
+
+ const handleSelect = (address: string) => {
+ onSelect(address);
+ setOpen(false);
+ };
+
+ return (
+
+
+
+
+
+
+
+ {status === "OK" && suggestions.length > 0 ? (
+
+ {suggestions.map(({ place_id, description }) => (
+ handleSelect(description)}
+ >
+ {description}
+
+ ))}
+
+ ) : (
+ No results found.
+ )}
+
+
+
+
+ );
+}
\ No newline at end of file
diff --git a/components/ui/command.tsx b/components/ui/command.tsx
new file mode 100644
index 0000000..1e7dfc5
--- /dev/null
+++ b/components/ui/command.tsx
@@ -0,0 +1,155 @@
+"use client"
+
+import * as React from "react"
+import { type DialogProps } from "@radix-ui/react-dialog"
+import { Command as CommandPrimitive } from "cmdk"
+import { Search } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+import { Dialog, DialogContent } from "@/components/ui/dialog"
+
+const Command = React.forwardRef<
+ React.ElementRef,
+ React.ComponentPropsWithoutRef
+>(({ className, ...props }, ref) => (
+ ,
+ React.ComponentPropsWithoutRef
+>(({ className, ...props }, ref) => (
+
+ ,
+ React.ComponentPropsWithoutRef
+>(({ className, ...props }, ref) => (
+ ,
+ React.ComponentPropsWithoutRef
+>((props, ref) => (
+ ,
+ React.ComponentPropsWithoutRef
+>(({ className, ...props }, ref) => (
+ ,
+ React.ComponentPropsWithoutRef
+>(({ className, ...props }, ref) => (
+ ,
+ React.ComponentPropsWithoutRef
+>(({ className, ...props }, ref) => (
+ ) => {
+ return (
+
+ )
+}
+CommandShortcut.displayName = "CommandShortcut"
+
+export {
+ Command,
+ CommandDialog,
+ CommandInput,
+ CommandList,
+ CommandEmpty,
+ CommandGroup,
+ CommandItem,
+ CommandShortcut,
+ CommandSeparator,
+}
diff --git a/components/ui/context-menu.tsx b/components/ui/context-menu.tsx
new file mode 100644
index 0000000..93ef37b
--- /dev/null
+++ b/components/ui/context-menu.tsx
@@ -0,0 +1,200 @@
+"use client"
+
+import * as React from "react"
+import * as ContextMenuPrimitive from "@radix-ui/react-context-menu"
+import { Check, ChevronRight, Circle } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+
+const ContextMenu = ContextMenuPrimitive.Root
+
+const ContextMenuTrigger = ContextMenuPrimitive.Trigger
+
+const ContextMenuGroup = ContextMenuPrimitive.Group
+
+const ContextMenuPortal = ContextMenuPrimitive.Portal
+
+const ContextMenuSub = ContextMenuPrimitive.Sub
+
+const ContextMenuRadioGroup = ContextMenuPrimitive.RadioGroup
+
+const ContextMenuSubTrigger = React.forwardRef<
+ React.ElementRef,
+ React.ComponentPropsWithoutRef & {
+ inset?: boolean
+ }
+>(({ className, inset, children, ...props }, ref) => (
+
+ {children}
+
+))
+ContextMenuSubTrigger.displayName = ContextMenuPrimitive.SubTrigger.displayName
+
+const ContextMenuSubContent = React.forwardRef<
+ React.ElementRef,
+ React.ComponentPropsWithoutRef
+>(({ className, ...props }, ref) => (
+ ,
+ React.ComponentPropsWithoutRef
+>(({ className, ...props }, ref) => (
+
+
+))
+ContextMenuContent.displayName = ContextMenuPrimitive.Content.displayName
+
+const ContextMenuItem = React.forwardRef<
+ React.ElementRef,
+ React.ComponentPropsWithoutRef & {
+ inset?: boolean
+ }
+>(({ className, inset, ...props }, ref) => (
+ ,
+ React.ComponentPropsWithoutRef
+>(({ className, children, checked, ...props }, ref) => (
+
+
+
+
+
+ {children}
+
+))
+ContextMenuCheckboxItem.displayName =
+ ContextMenuPrimitive.CheckboxItem.displayName
+
+const ContextMenuRadioItem = React.forwardRef<
+ React.ElementRef,
+ React.ComponentPropsWithoutRef
+>(({ className, children, ...props }, ref) => (
+
+
+
+
+
+ {children}
+
+))
+ContextMenuRadioItem.displayName = ContextMenuPrimitive.RadioItem.displayName
+
+const ContextMenuLabel = React.forwardRef<
+ React.ElementRef,
+ React.ComponentPropsWithoutRef & {
+ inset?: boolean
+ }
+>(({ className, inset, ...props }, ref) => (
+ ,
+ React.ComponentPropsWithoutRef
+>(({ className, ...props }, ref) => (
+ ) => {
+ return (
+
+ )
+}
+ContextMenuShortcut.displayName = "ContextMenuShortcut"
+
+export {
+ ContextMenu,
+ ContextMenuTrigger,
+ ContextMenuContent,
+ ContextMenuItem,
+ ContextMenuCheckboxItem,
+ ContextMenuRadioItem,
+ ContextMenuLabel,
+ ContextMenuSeparator,
+ ContextMenuShortcut,
+ ContextMenuGroup,
+ ContextMenuPortal,
+ ContextMenuSub,
+ ContextMenuSubContent,
+ ContextMenuSubTrigger,
+ ContextMenuRadioGroup,
+}
diff --git a/components/ui/dialog.tsx b/components/ui/dialog.tsx
index d9ccec9..b40ca1f 100644
--- a/components/ui/dialog.tsx
+++ b/components/ui/dialog.tsx
@@ -2,142 +2,139 @@
import * as React from "react"
import * as DialogPrimitive from "@radix-ui/react-dialog"
-import { XIcon } from "lucide-react"
+import { X } from "lucide-react"
import { cn } from "@/lib/utils"
+import { cva } from "class-variance-authority"
+import { size } from "@/lib/type"
-function Dialog({
- ...props
-}: React.ComponentProps) {
- return ,
+ React.ComponentPropsWithoutRef
+>(({ className, ...props }, ref) => (
+ {
+ size?: size;
}
-function DialogTrigger({
- ...props
-}: React.ComponentProps) {
- return ,
+ DialogContentProps
+>(({ className, children, size, ...props }, ref) => (
+
+ ) {
- return
+
+
+
+))
+DialogContent.displayName = DialogPrimitive.Content.displayName
-function DialogClose({
- ...props
-}: React.ComponentProps) {
- return ) {
- return (
- ) => (
+
+)
+DialogHeader.displayName = "DialogHeader"
-function DialogContent({
- className,
- children,
- showCloseButton = true,
- ...props
-}: React.ComponentProps & {
- showCloseButton?: boolean
-}) {
- return (
-
-
- {children}
- {showCloseButton && (
-
-
- )}
-
-
- )
-}
-
-function DialogHeader({ className, ...props }: React.ComponentProps<"div">) {
- return (
-
- )
-}
-
-function DialogFooter({ className, ...props }: React.ComponentProps<"div">) {
- return (
-
- )
-}
-
-function DialogTitle({
+const DialogFooter = ({
className,
...props
-}: React.ComponentProps) {
- return (
- ) => (
+
+)
+DialogFooter.displayName = "DialogFooter"
-function DialogDescription({
- className,
- ...props
-}: React.ComponentProps) {
- return (
- ,
+ React.ComponentPropsWithoutRef
+>(({ className, ...props }, ref) => (
+ ,
+ React.ComponentPropsWithoutRef
+>(({ className, ...props }, ref) => (
+ ) => (
+ ,
+ React.ComponentPropsWithoutRef
+>(({ className, ...props }, ref) => (
+ ,
+ React.ComponentPropsWithoutRef
+>(({ className, children, ...props }, ref) => (
+
+
+
+ {children}
+
+
+))
+DrawerContent.displayName = "DrawerContent"
+
+const DrawerHeader = ({
+ className,
+ ...props
+}: React.HTMLAttributes) => (
+
+)
+DrawerHeader.displayName = "DrawerHeader"
+
+const DrawerFooter = ({
+ className,
+ ...props
+}: React.HTMLAttributes) => (
+
+)
+DrawerFooter.displayName = "DrawerFooter"
+
+const DrawerTitle = React.forwardRef<
+ React.ElementRef,
+ React.ComponentPropsWithoutRef
+>(({ className, ...props }, ref) => (
+ ,
+ React.ComponentPropsWithoutRef
+>(({ className, ...props }, ref) => (
+ ) {
- return ) {
- return (
- ) {
- return (
- ) {
- return (
-
-
- )
-}
+const DropdownMenuPortal = DropdownMenuPrimitive.Portal;
-function DropdownMenuGroup({
- ...props
-}: React.ComponentProps) {
- return (
- & {
- inset?: boolean
- variant?: "default" | "destructive"
-}) {
- return (
- ,
+ React.ComponentPropsWithoutRef & {
+ inset?: boolean;
+ }
+>(({ className, inset, children, ...props }, ref) => (
+
+ {children}
+
+));
+DropdownMenuSubTrigger.displayName = DropdownMenuPrimitive.SubTrigger.displayName;
+
+const DropdownMenuSubContent = React.forwardRef, React.ComponentPropsWithoutRef>(({ className, ...props }, ref) => (
+ , React.ComponentPropsWithoutRef>(({ className, sideOffset = 4, ...props }, ref) => (
+
+
+));
+DropdownMenuContent.displayName = DropdownMenuPrimitive.Content.displayName;
-function DropdownMenuCheckboxItem({
- className,
- children,
- checked,
- ...props
-}: React.ComponentProps) {
- return (
-
-
-
-
-
- {children}
-
- )
-}
+const DropdownMenuItem = React.forwardRef<
+ React.ElementRef,
+ React.ComponentPropsWithoutRef & {
+ inset?: boolean;
+ }
+>(({ className, inset, ...props }, ref) => (
+ ) {
- return (
- , React.ComponentPropsWithoutRef>(({ className, children, checked, ...props }, ref) => (
+
+
+
+
+
+ {children}
+
+));
+DropdownMenuCheckboxItem.displayName = DropdownMenuPrimitive.CheckboxItem.displayName;
-function DropdownMenuRadioItem({
- className,
- children,
- ...props
-}: React.ComponentProps) {
- return (
-
-
-
-
-
- {children}
-
- )
-}
+const DropdownMenuRadioItem = React.forwardRef, React.ComponentPropsWithoutRef>(({ className, children, ...props }, ref) => (
+
+
+
+
+
+ {children}
+
+));
+DropdownMenuRadioItem.displayName = DropdownMenuPrimitive.RadioItem.displayName;
-function DropdownMenuLabel({
- className,
- inset,
- ...props
-}: React.ComponentProps & {
- inset?: boolean
-}) {
- return (
- ,
+ React.ComponentPropsWithoutRef & {
+ inset?: boolean;
+ }
+>(({ className, inset, ...props }, ref) => ) {
- return (
- , React.ComponentPropsWithoutRef>(({ className, ...props }, ref) => (
+ ) {
- return & {
- inset?: boolean
-}) {
- return (
-
- {children}
-
- )
-}
-
-function DropdownMenuSubContent({
- className,
- ...props
-}: React.ComponentProps) {
- return (
- ) => {
+ return ;
+};
+DropdownMenuShortcut.displayName = "DropdownMenuShortcut";
export {
DropdownMenu,
- DropdownMenuPortal,
DropdownMenuTrigger,
DropdownMenuContent,
- DropdownMenuGroup,
- DropdownMenuLabel,
DropdownMenuItem,
DropdownMenuCheckboxItem,
- DropdownMenuRadioGroup,
DropdownMenuRadioItem,
+ DropdownMenuLabel,
DropdownMenuSeparator,
DropdownMenuShortcut,
+ DropdownMenuGroup,
+ DropdownMenuPortal,
DropdownMenuSub,
- DropdownMenuSubTrigger,
DropdownMenuSubContent,
-}
+ DropdownMenuSubTrigger,
+ DropdownMenuRadioGroup,
+};
diff --git a/components/ui/hover-card.tsx b/components/ui/hover-card.tsx
new file mode 100644
index 0000000..e54d91c
--- /dev/null
+++ b/components/ui/hover-card.tsx
@@ -0,0 +1,29 @@
+"use client"
+
+import * as React from "react"
+import * as HoverCardPrimitive from "@radix-ui/react-hover-card"
+
+import { cn } from "@/lib/utils"
+
+const HoverCard = HoverCardPrimitive.Root
+
+const HoverCardTrigger = HoverCardPrimitive.Trigger
+
+const HoverCardContent = React.forwardRef<
+ React.ElementRef,
+ React.ComponentPropsWithoutRef
+>(({ className, align = "center", sideOffset = 4, ...props }, ref) => (
+ = ({
+ src,
+ alt,
+ className,
+ key,
+ style,
+ priority = false,
+ placeholder,
+}) => {
+ const [imgSrc, setImgSrc] = useState(src);
+ const [isError, setIsError] = useState(false);
+
+ useEffect(() => {
+ setImgSrc(src);
+ }, [src]);
+
+ const handleImage = () => {
+ const pics = document.querySelectorAll("img");
+ pics.forEach((pic) => {
+ if (pic.complete) {
+ checkImage(pic);
+ } else {
+ pic.addEventListener("load", function () {
+ checkImage(this as HTMLImageElement);
+ });
+ }
+ });
+ };
+
+ const checkImage = (img: HTMLImageElement) => {
+ if (img.naturalHeight > img.naturalWidth) {
+ img.classList.add("portrait");
+ } else if (Math.abs(img.naturalHeight - img.naturalWidth) < 10) {
+ img.classList.add("square");
+ } else {
+ img.classList.add("landscape");
+ }
+ };
+
+ const onLoad = () => {
+ console.log("Image loaded:", src);
+ handleImage();
+ };
+
+ return (
+
+
+
+
+ );
+};
+
+export default ImageBlurry;
diff --git a/components/ui/input-otp.tsx b/components/ui/input-otp.tsx
index 614f70e..27a61a7 100644
--- a/components/ui/input-otp.tsx
+++ b/components/ui/input-otp.tsx
@@ -2,56 +2,47 @@
import * as React from "react"
import { OTPInput, OTPInputContext } from "input-otp"
-import { MinusIcon } from "lucide-react"
+import { Dot } from "lucide-react"
import { cn } from "@/lib/utils"
-function InputOTP({
- className,
- containerClassName,
- ...props
-}: React.ComponentProps & {
- containerClassName?: string
-}) {
- return (
- ,
+ React.ComponentPropsWithoutRef
+>(({ className, containerClassName, ...props }, ref) => (
+
)
-}
+})
+InputOTPSlot.displayName = "InputOTPSlot"
-function InputOTPSeparator({ ...props }: React.ComponentProps<"div">) {
- return (
-
- ,
+ VariantProps {
+ color?: InputColor
+ size?: any
}
-export { Input }
+const Input = React.forwardRef(
+ (
+ {
+ className,
+ type,
+ size,
+ color,
+ ...props
+ },
+ ref
+ ) =>
+
+
+
+);
+Input.displayName = "Input";
+
+export { Input };
diff --git a/components/ui/label.tsx b/components/ui/label.tsx
index fb5fbc3..d9068cd 100644
--- a/components/ui/label.tsx
+++ b/components/ui/label.tsx
@@ -2,23 +2,25 @@
import * as React from "react"
import * as LabelPrimitive from "@radix-ui/react-label"
+import { cva, type VariantProps } from "class-variance-authority"
import { cn } from "@/lib/utils"
-function Label({
- className,
- ...props
-}: React.ComponentProps) {
- return (
- ,
+ React.ComponentPropsWithoutRef &
+ VariantProps
+>(({ className, ...props }, ref) => (
+ = ({
+ children,
+ fallback = (
+
+
+
+ )
+}) => {
+ return (
+
+ {children}
+
+ );
+};
+
+// Lazy load specific heavy components
+export const LazyChart = lazy(() => import("react-apexcharts").then(module => ({ default: module.default || module })));
+export const LazyMap = lazy(() => import("@react-google-maps/api").then(module => ({ default: module.GoogleMap || module })));
+export const LazyPlayer = lazy(() => import("react-player").then(module => ({ default: module.default || module })));
+
+export default LazyLoad;
\ No newline at end of file
diff --git a/components/ui/menubar.tsx b/components/ui/menubar.tsx
new file mode 100644
index 0000000..690f78a
--- /dev/null
+++ b/components/ui/menubar.tsx
@@ -0,0 +1,236 @@
+"use client"
+
+import * as React from "react"
+import * as MenubarPrimitive from "@radix-ui/react-menubar"
+import { Check, ChevronRight, Circle } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+
+const MenubarMenu = MenubarPrimitive.Menu
+
+const MenubarGroup = MenubarPrimitive.Group
+
+const MenubarPortal = MenubarPrimitive.Portal
+
+const MenubarSub = MenubarPrimitive.Sub
+
+const MenubarRadioGroup = MenubarPrimitive.RadioGroup
+
+const Menubar = React.forwardRef<
+ React.ElementRef,
+ React.ComponentPropsWithoutRef
+>(({ className, ...props }, ref) => (
+ ,
+ React.ComponentPropsWithoutRef
+>(({ className, ...props }, ref) => (
+ ,
+ React.ComponentPropsWithoutRef & {
+ inset?: boolean
+ }
+>(({ className, inset, children, ...props }, ref) => (
+
+ {children}
+
+))
+MenubarSubTrigger.displayName = MenubarPrimitive.SubTrigger.displayName
+
+const MenubarSubContent = React.forwardRef<
+ React.ElementRef,
+ React.ComponentPropsWithoutRef
+>(({ className, ...props }, ref) => (
+ ,
+ React.ComponentPropsWithoutRef
+>(
+ (
+ { className, align = "start", alignOffset = -4, sideOffset = 8, ...props },
+ ref
+ ) => (
+
+
+ )
+)
+MenubarContent.displayName = MenubarPrimitive.Content.displayName
+
+const MenubarItem = React.forwardRef<
+ React.ElementRef,
+ React.ComponentPropsWithoutRef & {
+ inset?: boolean
+ }
+>(({ className, inset, ...props }, ref) => (
+ ,
+ React.ComponentPropsWithoutRef
+>(({ className, children, checked, ...props }, ref) => (
+
+
+
+
+
+ {children}
+
+))
+MenubarCheckboxItem.displayName = MenubarPrimitive.CheckboxItem.displayName
+
+const MenubarRadioItem = React.forwardRef<
+ React.ElementRef,
+ React.ComponentPropsWithoutRef
+>(({ className, children, ...props }, ref) => (
+
+
+
+
+
+ {children}
+
+))
+MenubarRadioItem.displayName = MenubarPrimitive.RadioItem.displayName
+
+const MenubarLabel = React.forwardRef<
+ React.ElementRef,
+ React.ComponentPropsWithoutRef & {
+ inset?: boolean
+ }
+>(({ className, inset, ...props }, ref) => (
+ ,
+ React.ComponentPropsWithoutRef
+>(({ className, ...props }, ref) => (
+ ) => {
+ return (
+
+ )
+}
+MenubarShortcut.displayname = "MenubarShortcut"
+
+export {
+ Menubar,
+ MenubarMenu,
+ MenubarTrigger,
+ MenubarContent,
+ MenubarItem,
+ MenubarSeparator,
+ MenubarLabel,
+ MenubarCheckboxItem,
+ MenubarRadioGroup,
+ MenubarRadioItem,
+ MenubarPortal,
+ MenubarSubContent,
+ MenubarSubTrigger,
+ MenubarGroup,
+ MenubarSub,
+ MenubarShortcut,
+}
diff --git a/components/ui/navigation-menu.tsx b/components/ui/navigation-menu.tsx
new file mode 100644
index 0000000..0913c2c
--- /dev/null
+++ b/components/ui/navigation-menu.tsx
@@ -0,0 +1,73 @@
+import * as React from "react";
+import * as NavigationMenuPrimitive from "@radix-ui/react-navigation-menu";
+import { cva } from "class-variance-authority";
+import { ChevronDown } from "lucide-react";
+
+import { cn } from "@/lib/utils";
+
+const NavigationMenu = React.forwardRef, React.ComponentPropsWithoutRef>(({ className, children, ...props }, ref) => (
+
+ {children}
+
+));
+NavigationMenu.displayName = NavigationMenuPrimitive.Root.displayName;
+
+const NavigationMenuList = React.forwardRef, React.ComponentPropsWithoutRef>(({ className, ...props }, ref) => (
+ , React.ComponentPropsWithoutRef>(({ className, children, ...props }, ref) => (
+
+ {children}
+
+));
+NavigationMenuTrigger.displayName = NavigationMenuPrimitive.Trigger.displayName;
+
+const NavigationMenuContent = React.forwardRef, React.ComponentPropsWithoutRef>(({ className, ...props }, ref) => (
+ , React.ComponentPropsWithoutRef>(({ className, ...props }, ref) => (
+
+ , React.ComponentPropsWithoutRef>(({ className, ...props }, ref) => (
+
+
+
+));
+NavigationMenuIndicator.displayName = NavigationMenuPrimitive.Indicator.displayName;
+
+export { navigationMenuTriggerStyle, NavigationMenu, NavigationMenuList, NavigationMenuItem, NavigationMenuContent, NavigationMenuTrigger, NavigationMenuLink, NavigationMenuIndicator, NavigationMenuViewport };
diff --git a/components/ui/optimized-image.tsx b/components/ui/optimized-image.tsx
new file mode 100644
index 0000000..8112228
--- /dev/null
+++ b/components/ui/optimized-image.tsx
@@ -0,0 +1,85 @@
+"use client";
+
+import Image from "next/image";
+import { useState } from "react";
+import { shimmer, toBase64 } from "@/utils/globals";
+
+interface OptimizedImageProps {
+ src: string;
+ alt: string;
+ width?: number;
+ height?: number;
+ className?: string;
+ priority?: boolean;
+ sizes?: string;
+ fill?: boolean;
+ quality?: number;
+ placeholder?: "blur" | "empty";
+ blurDataURL?: string;
+}
+
+const OptimizedImage: React.FC = ({
+ src,
+ alt,
+ width = 800,
+ height = 600,
+ className = "",
+ priority = false,
+ sizes = "(max-width: 768px) 100vw, (max-width: 1200px) 50vw, 33vw",
+ fill = false,
+ quality = 75,
+ placeholder = "blur",
+ blurDataURL,
+}) => {
+ const [isLoading, setIsLoading] = useState(true);
+ const [error, setError] = useState(false);
+
+ const handleLoad = () => {
+ setIsLoading(false);
+ };
+
+ const handleError = () => {
+ setError(true);
+ setIsLoading(false);
+ };
+
+ // Generate blur data URL if not provided
+ const defaultBlurDataURL = blurDataURL || `data:image/svg+xml;base64,${toBase64(shimmer(width, height))}`;
+
+ if (error) {
+ return (
+
+ Image failed to load
+
+ );
+ }
+
+ return (
+
+ {isLoading && (
+
+ )}
+
+
- )
-}
+const PaginationContent = React.forwardRef<
+ HTMLUListElement,
+ React.ComponentProps<"ul">
+>(({ className, ...props }, ref) => (
+
+))
+PaginationContent.displayName = "PaginationContent"
-function PaginationItem({ ...props }: React.ComponentProps<"li">) {
- return
-}
+const PaginationItem = React.forwardRef<
+ HTMLLIElement,
+ React.ComponentProps<"li">
+>(({ className, ...props }, ref) => (
+
+))
+PaginationItem.displayName = "PaginationItem"
type PaginationLinkProps = {
isActive?: boolean
-} & Pick, "size"> &
+} & Pick &
React.ComponentProps<"a">
-function PaginationLink({
+const PaginationLink = ({
className,
isActive,
size = "icon",
...props
-}: PaginationLinkProps) {
- return (
-
- )
-}
+}: PaginationLinkProps) => (
+
+)
+PaginationLink.displayName = "PaginationLink"
-function PaginationPrevious({
+const PaginationPrevious = ({
className,
...props
-}: React.ComponentProps) {
- return (
-
-
- )
-}
+}: React.ComponentProps) => (
+
+
+)
+PaginationPrevious.displayName = "PaginationPrevious"
-function PaginationNext({
+const PaginationNext = ({
className,
...props
-}: React.ComponentProps) {
- return (
-
- Next
-
- )
-}
+}: React.ComponentProps) => (
+
+ Next
+
+)
+PaginationNext.displayName = "PaginationNext"
-function PaginationEllipsis({
+const PaginationEllipsis = ({
className,
...props
-}: React.ComponentProps<"span">) {
- return (
-
- ) {
- return ) {
- return ,
+ React.ComponentPropsWithoutRef
+>(({ className, align = "center", sideOffset = 4, ...props }, ref) => (
+
+
+))
+PopoverContent.displayName = PopoverPrimitive.Content.displayName
-function PopoverContent({
- className,
- align = "center",
- sideOffset = 4,
- ...props
-}: React.ComponentProps) {
- return (
-
-
- )
-}
-
-function PopoverAnchor({
- ...props
-}: React.ComponentProps) {
- return {
+ size?: size,
+ value?: number,
+ showValue?: boolean,
+ color?: color,
+ isStripe?: boolean,
+ isAnimate?: boolean
+}
+
+const Progress = React.forwardRef, ProgressProps>(({ className, value, color, size, showValue, isStripe, isAnimate, ...props }, ref) => {
+ const stripeStyles = isStripe
+ ? {
+ backgroundImage: `linear-gradient(
+ 45deg,
+ hsla(0, 0%, 100%, 0.15) 25%,
+ transparent 0,
+ transparent 50%,
+ hsla(0, 0%, 100%, 0.15) 0,
+ hsla(0, 0%, 100%, 0.15) 75%,
+ transparent 0,
+ transparent
+ )`,
+ backgroundSize: "0.857rem 0.857rem",
+ }
+ : {};
+ return (
+
+
+ {showValue && (
+
+ {value}%
+
+ )}
+
+
+ );
+}
+);
+Progress.displayName = ProgressPrimitive.Root.displayName;
+
+
+export { Progress };
diff --git a/components/ui/radio-group.tsx b/components/ui/radio-group.tsx
index 5e6778c..19a02b2 100644
--- a/components/ui/radio-group.tsx
+++ b/components/ui/radio-group.tsx
@@ -2,44 +2,88 @@
import * as React from "react"
import * as RadioGroupPrimitive from "@radix-ui/react-radio-group"
-import { CircleIcon } from "lucide-react"
+import { Circle } from "lucide-react"
import { cn } from "@/lib/utils"
+import { cva, type VariantProps } from "class-variance-authority"
+import { color, size } from "@/lib/type"
-function RadioGroup({
- className,
- ...props
-}: React.ComponentProps) {
+const radioVariants = cva(
+ "aspect-square h-[18px] w-[18px] rounded-full border border-default-400 data-[state=checked]:text-default-700 ring-offset-background disabled:cursor-not-allowed disabled:bg-default-100 disabled:border-default-400 disabled:opacity-50 [&_svg]:fill-current [&_svg]:text-current transition-all duration-100",
+ {
+ variants: {
+ color: {
+ default:
+ "data-[state=checked]:border-default data-[state=checked]:text-default",
+ primary:
+ "data-[state=checked]:border-primary data-[state=checked]:text-primary",
+ secondary:
+ "data-[state=checked]:border-default-300 data-[state=checked]:text-default-300",
+ info: "data-[state=checked]:border-info data-[state=checked]:text-info",
+ warning:
+ "data-[state=checked]:border-warning data-[state=checked]:text-warning",
+ success:
+ "data-[state=checked]:border-success data-[state=checked]:text-success",
+ destructive:
+ "data-[state=checked]:border-destructive data-[state=checked]:text-destructive",
+ },
+ size: {
+ sm: "h-4 w-4 [&_svg]:h-3 [&_svg]:w-3",
+ default: "h-5 w-5 [&_svg]:h-4 [&_svg]:w-4",
+ md: "h-6 w-6 [&_svg]:h-5 [&_svg]:w-5",
+ lg: "h-7 w-7 [&_svg]:h-6 [&_svg]:w-6",
+ },
+ },
+ compoundVariants: [],
+
+ defaultVariants: {
+ color: "default",
+ }
+ }
+);
+
+const RadioGroup = React.forwardRef<
+ React.ElementRef,
+ React.ComponentPropsWithoutRef
+>(({ className, ...props }, ref) => {
return (
,
+ VariantProps {
+ icon?: React.ReactNode;
+ color?: color;
+ size?: size;
}
-function RadioGroupItem({
- className,
- ...props
-}: React.ComponentProps) {
+const RadioGroupItem = React.forwardRef<
+ React.ElementRef,
+ RadioGroupItemProps
+>(({ className, color,size, icon, ...props }, ref) => {
return (
-
-
+ {icon ||
)
-}
+});
+RadioGroupItem.displayName = RadioGroupPrimitive.Item.displayName
export { RadioGroup, RadioGroupItem }
+
diff --git a/components/ui/resizable.tsx b/components/ui/resizable.tsx
new file mode 100644
index 0000000..f4bc558
--- /dev/null
+++ b/components/ui/resizable.tsx
@@ -0,0 +1,45 @@
+"use client"
+
+import { GripVertical } from "lucide-react"
+import * as ResizablePrimitive from "react-resizable-panels"
+
+import { cn } from "@/lib/utils"
+
+const ResizablePanelGroup = ({
+ className,
+ ...props
+}: React.ComponentProps) => (
+ & {
+ withHandle?: boolean
+}) => (
+ div]:rotate-90",
+ className
+ )}
+ {...props}
+ >
+ {withHandle && (
+
+
+)
+
+export { ResizablePanelGroup, ResizablePanel, ResizableHandle }
diff --git a/components/ui/scroll-area.tsx b/components/ui/scroll-area.tsx
new file mode 100644
index 0000000..0b4a48d
--- /dev/null
+++ b/components/ui/scroll-area.tsx
@@ -0,0 +1,48 @@
+"use client"
+
+import * as React from "react"
+import * as ScrollAreaPrimitive from "@radix-ui/react-scroll-area"
+
+import { cn } from "@/lib/utils"
+
+const ScrollArea = React.forwardRef<
+ React.ElementRef,
+ React.ComponentPropsWithoutRef
+>(({ className, children, ...props }, ref) => (
+
+
+ {children}
+
+
+))
+ScrollArea.displayName = ScrollAreaPrimitive.Root.displayName
+
+const ScrollBar = React.forwardRef<
+ React.ElementRef,
+ React.ComponentPropsWithoutRef
+>(({ className, orientation = "vertical", ...props }, ref) => (
+
+
+))
+ScrollBar.displayName = ScrollAreaPrimitive.ScrollAreaScrollbar.displayName
+
+export { ScrollArea, ScrollBar }
diff --git a/components/ui/select.tsx b/components/ui/select.tsx
index dcbbc0c..d8ca209 100644
--- a/components/ui/select.tsx
+++ b/components/ui/select.tsx
@@ -2,184 +2,211 @@
import * as React from "react"
import * as SelectPrimitive from "@radix-ui/react-select"
-import { CheckIcon, ChevronDownIcon, ChevronUpIcon } from "lucide-react"
+import { Check, ChevronDown, ChevronUp } from "lucide-react"
import { cn } from "@/lib/utils"
+import { cva, type VariantProps } from "class-variance-authority"
+import { InputColor, size } from "@/lib/type"
-function Select({
- ...props
-}: React.ComponentProps) {
- return ,
+ VariantProps {
+ size?: size
+ color?: InputColor
}
-
-function SelectGroup({
- ...props
-}: React.ComponentProps) {
- return ) {
- return & {
- size?: "sm" | "default"
-}) {
- return (
+const SelectTrigger = React.forwardRef<
+ React.ElementRef,
+ SelectTriggerProps
+>(
+ (
+ {
+ className,
+ children,
+ color,
+ size,
+ ...props
+ },
+ ref
+ ) => (
{children}
-
)
-}
+);
+SelectTrigger.displayName = SelectPrimitive.Trigger.displayName;
-function SelectContent({
- className,
- children,
- position = "popper",
- ...props
-}: React.ComponentProps) {
- return (
-
- ,
+ React.ComponentPropsWithoutRef
+>(({ className, ...props }, ref) => (
+
+
+))
+SelectScrollUpButton.displayName = SelectPrimitive.ScrollUpButton.displayName
+
+const SelectScrollDownButton = React.forwardRef<
+ React.ElementRef,
+ React.ComponentPropsWithoutRef
+>(({ className, ...props }, ref) => (
+
+
+))
+SelectScrollDownButton.displayName =
+ SelectPrimitive.ScrollDownButton.displayName
+
+const SelectContent = React.forwardRef<
+ React.ElementRef,
+ React.ComponentPropsWithoutRef
+>(({ className, children, position = "popper", ...props }, ref) => (
+
+
+
-
- {children}
-
-
-
- )
-}
+ {children}
+
+
+
+))
+SelectContent.displayName = SelectPrimitive.Content.displayName
-function SelectLabel({
- className,
- ...props
-}: React.ComponentProps) {
- return (
- ,
+ React.ComponentPropsWithoutRef
+>(({ className, ...props }, ref) => (
+ ) {
- return (
-
-
-
-
-
- {children}
-
- )
-}
+const SelectItem = React.forwardRef<
+ React.ElementRef,
+ React.ComponentPropsWithoutRef
+>(({ className, children, ...props }, ref) => (
+
+
+
+
+
-function SelectSeparator({
- className,
- ...props
-}: React.ComponentProps) {
- return (
- {children}
+
+))
+SelectItem.displayName = SelectPrimitive.Item.displayName
-function SelectScrollUpButton({
- className,
- ...props
-}: React.ComponentProps) {
- return (
-
-
- )
-}
-
-function SelectScrollDownButton({
- className,
- ...props
-}: React.ComponentProps) {
- return (
-
-
- )
-}
+const SelectSeparator = React.forwardRef<
+ React.ElementRef,
+ React.ComponentPropsWithoutRef
+>(({ className, ...props }, ref) => (
+ ,
+ React.ComponentPropsWithoutRef
+>(
+ (
+ { className, orientation = "horizontal", decorative = true, ...props },
+ ref
+ ) => (
+ ,
+ React.ComponentPropsWithoutRef
+>(({ className, ...props }, ref) => (
+ ,
+ VariantProps {
+ overlayClass?: string
+}
+
+const SheetContent = React.forwardRef<
+ React.ElementRef,
+ SheetContentProps
+>(({ side = "right", className, overlayClass, children, ...props }, ref) => (
+
+
+ {children}
+
+
+
+
+))
+SheetContent.displayName = SheetPrimitive.Content.displayName
+
+const SheetHeader = ({
+ className,
+ ...props
+}: React.HTMLAttributes) => (
+
+)
+SheetHeader.displayName = "SheetHeader"
+
+const SheetFooter = ({
+ className,
+ ...props
+}: React.HTMLAttributes) => (
+
+)
+SheetFooter.displayName = "SheetFooter"
+
+const SheetTitle = React.forwardRef<
+ React.ElementRef,
+ React.ComponentPropsWithoutRef
+>(({ className, ...props }, ref) => (
+ ,
+ React.ComponentPropsWithoutRef
+>(({ className, ...props }, ref) => (
+ ) {
return (
)
diff --git a/components/ui/slider.tsx b/components/ui/slider.tsx
new file mode 100644
index 0000000..494dd64
--- /dev/null
+++ b/components/ui/slider.tsx
@@ -0,0 +1,28 @@
+"use client"
+
+import * as React from "react"
+import * as SliderPrimitive from "@radix-ui/react-slider"
+
+import { cn } from "@/lib/utils"
+
+const Slider = React.forwardRef<
+ React.ElementRef,
+ React.ComponentPropsWithoutRef
+>(({ className, ...props }, ref) => (
+
+
+
+
+))
+Slider.displayName = SliderPrimitive.Root.displayName
+
+export { Slider }
diff --git a/components/ui/sonner.tsx b/components/ui/sonner.tsx
new file mode 100644
index 0000000..452f4d9
--- /dev/null
+++ b/components/ui/sonner.tsx
@@ -0,0 +1,31 @@
+"use client"
+
+import { useTheme } from "next-themes"
+import { Toaster as Sonner } from "sonner"
+
+type ToasterProps = React.ComponentProps
+
+const Toaster = ({ ...props }: ToasterProps) => {
+ const { theme = "system" } = useTheme()
+
+ return (
+ ) {
- return (
-
-
- )
+const switchVariants = cva(
+ "peer relative inline-flex items-center [&_.content-box>svg]:h-3 [&_.content-box>svg]:w-3 [&_.content-box]:text-primary-foreground [&_.content-box]:text-[10px] justify-start group flex-shrink-0 cursor-pointer rounded-full transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 data-[state=unchecked]:bg-default-300",
+ {
+ variants: {
+ color: {
+ default: "data-[state=checked]:bg-default ",
+ primary: "data-[state=checked]:bg-primary ",
+ secondary: "data-[state=checked]:bg-secondary ",
+ info: "data-[state=checked]:bg-info ",
+ warning: "data-[state=checked]:bg-warning ",
+ success: "data-[state=checked]:bg-success ",
+ destructive: "data-[state=checked]:bg-destructive ",
+ dark: "data-[state=checked]:bg-foreground ",
+ },
+ size: {
+ sm: "h-4 w-[30px] [&_.content-box]:text-[7px] [&_.content-box>svg]:h-2.5 [&_.content-box>svg]:w-2.5 ",
+ default: "h-5 w-[38px] ",
+ md: "h-6 w-[46px]",
+ lg: "h-7 w-[48px] ",
+ },
+ },
+
+ defaultVariants: {
+ color: "default",
+ size: "default",
+ },
+ }
+);
+
+interface SwitchProps extends React.ComponentPropsWithoutRef, VariantProps {
+ color?: color
+ size?:size
+ startContent?: React.ReactNode | string
+ endContent?: React.ReactNode | string
}
+const Switch = React.forwardRef<
+ React.ElementRef,
+ SwitchProps
+>(({ color, size, startContent, endContent, className, ...props }, ref) => (
+
+ {startContent && (
+
+ {startContent}
+
+ )}
+
+));
+Switch.displayName = SwitchPrimitives.Root.displayName
+
export { Switch }
diff --git a/components/ui/table.tsx b/components/ui/table.tsx
index 51b74dd..d4c65bf 100644
--- a/components/ui/table.tsx
+++ b/components/ui/table.tsx
@@ -1,108 +1,109 @@
-"use client"
-
import * as React from "react"
import { cn } from "@/lib/utils"
-function Table({ className, ...props }: React.ComponentProps<"table">) {
- return (
-
-
-
- )
-}
-
-function TableHeader({ className, ...props }: React.ComponentProps<"thead">) {
- return (
-
+>(({ className, ...props }, ref) => (
+
+
- )
-}
+
+))
+Table.displayName = "Table"
-function TableBody({ className, ...props }: React.ComponentProps<"tbody">) {
- return (
-
- )
-}
+const TableHeader = React.forwardRef<
+ HTMLTableSectionElement,
+ React.HTMLAttributes
+>(({ className, ...props }, ref) => (
+
+))
+TableHeader.displayName = "TableHeader"
-function TableFooter({ className, ...props }: React.ComponentProps<"tfoot">) {
- return (
- tr]:last:border-b-0",
- className
- )}
- {...props}
- />
- )
-}
+const TableBody = React.forwardRef<
+ HTMLTableSectionElement,
+ React.HTMLAttributes
+>(({ className, ...props }, ref) => (
+
+))
+TableBody.displayName = "TableBody"
-function TableRow({ className, ...props }: React.ComponentProps<"tr">) {
- return (
-
+>(({ className, ...props }, ref) => (
+ tr]:last:border-b-0",
+ className
+ )}
+ {...props}
+ />
+))
+TableFooter.displayName = "TableFooter"
-function TableHead({ className, ...props }: React.ComponentProps<"th">) {
- return (
- [role=checkbox]]:translate-y-[2px]",
- className
- )}
- {...props}
- />
- )
-}
+const TableRow = React.forwardRef<
+ HTMLTableRowElement,
+ React.HTMLAttributes
+>(({ className, ...props }, ref) => (
+ [role=checkbox]]:translate-y-[2px]",
- className
- )}
- {...props}
- />
- )
-}
+const TableHead = React.forwardRef<
+ HTMLTableCellElement,
+ React.ThHTMLAttributes
+>(({ className, ...props }, ref) => (
+
+>(({ className, ...props }, ref) => (
+
+>(({ className, ...props }, ref) => (
+ ,
- React.ComponentPropsWithoutRef
->(({ className, ...props }, ref) => (
+ React.ComponentPropsWithoutRef & { onClick?: () => void }
+>(({ className, onClick, ...props }, ref) => (
{
+ if (onClick) {
+ onClick()
+ }
+ }}
{...props}
/>
))
@@ -44,7 +49,7 @@ const TabsContent = React.forwardRef<
) {
- return (
-
- )
+import { cva, type VariantProps } from "class-variance-authority";
+import { InputColor, radius } from "@/lib/type";
+
+export const textareaVariants = cva(
+ "flex flex-1 bg-background w-full min-h-[80px] rounded-md border border-solid px-3 py-[10px] text-sm file:border-0 file:bg-transparent file:text-sm file:font-medium read-only:bg-background read-only:text-default-500 disabled:cursor-not-allowed disabled:opacity-50 transition duration-300 ",
+ {
+ variants: {
+ color: {
+ default:
+ "border-default-200 text-default focus:outline-none focus:border-default disabled:bg-default-200 placeholder:text-accent-foreground/50",
+ primary:
+ "border-primary text-primary focus:outline-none focus:border-primary-700 disabled:bg-primary/30 disabled:placeholder:text-primary placeholder:text-primary/70",
+ secondary:
+ "border-secondary text-secondary focus:outline-none focus:border-secondary-700 disabled:bg-secondary/30 disabled:placeholder:text-secondary placeholder:text-secondary/70",
+ info: "border-info/50 text-info focus:outline-none focus:border-info-700 disabled:bg-info/30 disabled:placeholder:text-info placeholder:text-info/70",
+ warning:
+ "border-warning/50 text-warning focus:outline-none focus:border-warning-700 disabled:bg-warning/30 disabled:placeholder:text-info placeholder:text-warning/70",
+ success:
+ "border-success/50 text-success focus:outline-none focus:border-success-700 disabled:bg-success/30 disabled:placeholder:text-info placeholder:text-success/70",
+ destructive:
+ "border-destructive/50 text-destructive focus:outline-none focus:border-destructive-700 disabled:bg-destructive/30 disabled:placeholder:text-destructive placeholder:text-destructive/70",
+ },
+
+ },
+
+ defaultVariants: {
+ color: "default",
+ },
+ }
+);
+
+export interface TextareaProps
+ extends React.TextareaHTMLAttributes,
+ VariantProps {
+ color?: InputColor
}
-export { Textarea }
+const Textarea = React.forwardRef(
+ ({ className, color, defaultValue, ...props }, ref) => {
+ return (
+
+
+
+ );
+ }
+);
+Textarea.displayName = "Textarea";
+
+export { Textarea };
+
diff --git a/components/ui/toast.tsx b/components/ui/toast.tsx
new file mode 100644
index 0000000..521b94b
--- /dev/null
+++ b/components/ui/toast.tsx
@@ -0,0 +1,129 @@
+"use client"
+
+import * as React from "react"
+import * as ToastPrimitives from "@radix-ui/react-toast"
+import { cva, type VariantProps } from "class-variance-authority"
+import { X } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+
+const ToastProvider = ToastPrimitives.Provider
+
+const ToastViewport = React.forwardRef<
+ React.ElementRef,
+ React.ComponentPropsWithoutRef
+>(({ className, ...props }, ref) => (
+ ,
+ React.ComponentPropsWithoutRef &
+ VariantProps
+>(({ className, variant, ...props }, ref) => {
+ return (
+ ,
+ React.ComponentPropsWithoutRef
+>(({ className, ...props }, ref) => (
+ ,
+ React.ComponentPropsWithoutRef
+>(({ className, ...props }, ref) => (
+
+
+))
+ToastClose.displayName = ToastPrimitives.Close.displayName
+
+const ToastTitle = React.forwardRef<
+ React.ElementRef,
+ React.ComponentPropsWithoutRef
+>(({ className, ...props }, ref) => (
+
-
+
diff --git a/components/maps/Map copy.js b/components/maps/Map copy.js
new file mode 100644
index 0000000..1c0197d
--- /dev/null
+++ b/components/maps/Map copy.js
@@ -0,0 +1,365 @@
+import Cookies from "js-cookie";
+import React, { Component } from "react";
+import Geocode from "react-geocode";
+import Autocomplete from "react-google-autocomplete";
+import {
+ GoogleMap,
+ InfoWindow,
+ Marker,
+ withGoogleMap,
+ withScriptjs,
+} from "react-google-maps";
+import { GoogleMapsAPI } from "./client-config";
+
+Geocode.setApiKey(GoogleMapsAPI);
+Geocode.enableDebug();
+
+class Map extends Component {
+ constructor(props) {
+ super(props);
+ this.state = {
+ address: "",
+ city: "",
+ area: "",
+ state: "",
+ mapPosition: {
+ lat: this.props.center.lat,
+ lng: this.props.center.lng,
+ },
+ markerPosition: {
+ lat: this.props.center.lat,
+ lng: this.props.center.lng,
+ },
+ };
+ }
+
+ /**
+ * Get the current address from the default map position and set those values in the state
+ */
+ componentDidMount() {
+ Geocode.fromLatLng(
+ this.state.mapPosition.lat,
+ this.state.mapPosition.lng,
+ ).then(
+ (response) => {
+ const address = response.results[0].formatted_address;
+ const addressArray = response.results[0].address_components;
+ const city = this.getCity(addressArray);
+ const area = this.getArea(addressArray);
+ const state = this.getState(addressArray);
+
+ console.log("city", city, area, state);
+
+ this.setState({
+ address: address || "",
+ area: area || "",
+ city: city || "",
+ state: state || "",
+ });
+ },
+ (error) => {
+ console.error(error);
+ },
+ );
+ }
+
+ /**
+ * Component should only update ( meaning re-render ), when the user selects the address, or drags the pin
+ *
+ * @param nextProps
+ * @param nextState
+ * @return {boolean}
+ */
+ shouldComponentUpdate(nextProps, nextState) {
+ if (
+ this.state.markerPosition.lat !== this.props.center.lat ||
+ this.state.address !== nextState.address ||
+ this.state.city !== nextState.city ||
+ this.state.area !== nextState.area ||
+ this.state.state !== nextState.state
+ ) {
+ return true;
+ }
+
+ if (this.props.center.lat == nextProps.center.lat) {
+ return false;
+ }
+ }
+
+ /**
+ * Get the city and set the city input value to the one selected
+ *
+ * @param addressArray
+ * @return {string}
+ */
+ getCity = (addressArray) => {
+ let city = "";
+
+ for (const element of addressArray) {
+ if (
+ element.types[0] &&
+ element.types[0] == "administrative_area_level_2"
+ ) {
+ city = element.long_name;
+ return city;
+ }
+ }
+ };
+ /**
+ * Get the area and set the area input value to the one selected
+ *
+ * @param addressArray
+ * @return {string}
+ */
+ getArea = (addressArray) => {
+ let area = "";
+
+ for (const element of addressArray) {
+ if (element.types[0]) {
+ for (let j = 0; j < element.types.length; j++) {
+ if (
+ element.types[j] == "sublocality_level_1" ||
+ element.types[j] == "locality"
+ ) {
+ area = element.long_name;
+ return area;
+ }
+ }
+ }
+ }
+ };
+ /**
+ * Get the address and set the address input value to the one selected
+ *
+ * @param addressArray
+ * @return {string}
+ */
+ getState = (addressArray) => {
+ let state = "";
+
+ for (let i = 0; i < addressArray.length; i++) {
+ for (const element of addressArray) {
+ if (
+ element.types[0] &&
+ element.types[0] == "administrative_area_level_1"
+ ) {
+ state = element.long_name;
+ return state;
+ }
+ }
+ }
+ };
+ /**
+ * And function for city,state and address input
+ * @param event
+ */
+ onChange = (event) => {
+ this.setState({
+ [event.target.name]: event.target.value,
+ });
+ };
+ /**
+ * This Event triggers when the marker window is closed
+ *
+ * @param event
+ */
+ onInfoWindowClose = () => {};
+ /**
+ * When the marker is dragged you get the lat and long using the functions available from event object.
+ * Use geocode to get the address, city, area and state from the lat and lng positions.
+ * And then set those values in the state.
+ *
+ * @param event
+ */
+ onMarkerDragEnd = (event) => {
+ const newLat = event.latLng.lat();
+ const newLng = event.latLng.lng();
+
+ Geocode.fromLatLng(newLat, newLng).then(
+ (response) => {
+ const address = response.results[0].formatted_address;
+ const addressArray = response.results[0].address_components;
+ const city = this.getCity(addressArray);
+ const area = this.getArea(addressArray);
+ const state = this.getState(addressArray);
+
+ this.setState({
+ address: address || "",
+ area: area || "",
+ city: city || "",
+ state: state || "",
+ markerPosition: {
+ lat: newLat,
+ lng: newLng,
+ },
+ mapPosition: {
+ lat: newLat,
+ lng: newLng,
+ },
+ });
+ Cookies.set("map_lat", `${newLat}`, {
+ expires: 1
+ });
+ Cookies.set("map_long", `${newLng}`, {
+ expires: 1
+ });
+ $(".input-location-schedule").val(address);
+ },
+ (error) => {
+ console.error(error);
+ },
+ );
+ };
+ /**
+ * When the user types an address in the search box
+ * @param place
+ */
+ onPlaceSelected = (place) => {
+ console.log("plc", place);
+ const address = place.formatted_address;
+ const addressArray = place.address_components;
+ const city = this.getCity(addressArray);
+ const area = this.getArea(addressArray);
+ const state = this.getState(addressArray);
+ const latValue = place.geometry.location.lat();
+ const lngValue = place.geometry.location.lng();
+
+ // Set these values in the state.
+ this.setState({
+ address: address || "",
+ area: area || "",
+ city: city || "",
+ state: state || "",
+ markerPosition: {
+ lat: latValue,
+ lng: lngValue,
+ },
+ mapPosition: {
+ lat: latValue,
+ lng: lngValue,
+ },
+ });
+ Cookies.set("map_lat", `${latValue}`, {
+ expires: 1
+ });
+ Cookies.set("map_long", `${lngValue}`, {
+ expires: 1
+ });
+ $(".input-location-schedule").val(address);
+ };
+ render() {
+ const AsyncMap = withScriptjs(
+ withGoogleMap(() => (
+
+
{list?.title}
-
+
{convertDateFormat(list?.createdAt)}
+
+ {this.state.address}
+
+
+
+ {/*
+ );
+ }
+
+ return map;
+ }
+}
+
+export default Map;
diff --git a/components/maps/Map.tsx b/components/maps/Map.tsx
new file mode 100644
index 0000000..cac3b81
--- /dev/null
+++ b/components/maps/Map.tsx
@@ -0,0 +1,52 @@
+import React from "react";
+import Geocode from "react-geocode";
+import { GoogleMap, Marker, useLoadScript } from "@react-google-maps/api";
+import { GoogleMapsAPI } from "./client-config";
+
+Geocode.setApiKey(GoogleMapsAPI);
+
+interface MapProps {
+ lat: number;
+ lng: number;
+ draggable?: boolean;
+ onLocationChange?: (location: string) => void; // Tambahkan onLocationChange
+}
+
+function Map({ lat, lng, draggable, onLocationChange }: MapProps) {
+ const containerStyle = { width: "100%", height: "400px" };
+ const [selected, setSelected] = React.useState<{
+ lat: number;
+ lng: number;
+ } | null>(null);
+
+ const onMarkerDragEnd = async (e: google.maps.MapMouseEvent) => {
+ const lat = e.latLng?.lat() ?? 0;
+ const lng = e.latLng?.lng() ?? 0;
+
+ try {
+ const response = await Geocode.fromLatLng(lat.toString(), lng.toString());
+ const address = response.results[0].formatted_address;
+
+ setSelected({ lat, lng });
+ if (onLocationChange) {
+ onLocationChange(address); // Panggil callback jika tersedia
+ }
+ } catch (error) {
+ console.error(error);
+ }
+ };
+
+ return (
+
+
*/}
+
+
+
+
+
+
+
+
+
+
+ );
+ }
+}
+
+export default MapHome;
diff --git a/components/maps/Maps.tsx b/components/maps/Maps.tsx
new file mode 100644
index 0000000..853b74c
--- /dev/null
+++ b/components/maps/Maps.tsx
@@ -0,0 +1,159 @@
+import { GoogleMap, Marker, useLoadScript } from "@react-google-maps/api";
+import Cookies from "js-cookie";
+import { useEffect, useState } from "react";
+import usePlacesAutocomplete, {
+ getGeocode,
+ getLatLng,
+} from "use-places-autocomplete";
+import { GoogleMapsAPI } from "./client-config";
+import Geocode from "react-geocode";
+import { PlacesCombobox } from "@/components/ui/combobox";
+
+Geocode.setApiKey(GoogleMapsAPI);
+
+export default function Places(props: {
+ center: { lat: number; lng: number };
+ draggable?: boolean;
+ onLocationChange?: (location: string) => void;
+}) {
+ const { isLoaded } = useLoadScript({
+ googleMapsApiKey: GoogleMapsAPI,
+ libraries: ["places"],
+ language: "id",
+ });
+
+ const { center, draggable, onLocationChange } = props;
+
+ if (!isLoaded) return Loading...
;
+
+ return (
+
+ );
+}
+
+interface MapProps {
+ lat: number;
+ lng: number;
+ draggable?: boolean;
+ onLocationChange?: (location: string) => void;
+}
+
+function Map(props: MapProps) {
+ const containerStyle = {
+ width: "100%",
+ height: "400px",
+ };
+
+ const center = {
+ lat: -6.1754,
+ lng: 106.8272,
+ };
+
+ const [selected, setSelected] = useState<{ lat: number; lng: number } | null>(
+ null
+ );
+
+ const { lat, lng, draggable, onLocationChange } = props;
+
+ useEffect(() => {
+ if (lat !== undefined && lng !== undefined) {
+ setSelected({ lat, lng });
+ getAddressFromLatLong(lat, lng);
+ }
+ }, [lat, lng]);
+
+ const onMarkerDragEnd = (e: google.maps.MapMouseEvent) => {
+ const lat = e.latLng?.lat() ?? 0;
+ const lng = e.latLng?.lng() ?? 0;
+ console.log(lat, lng);
+ getAddressFromLatLong(lat, lng);
+ if (onLocationChange) {
+ onLocationChange(`Latitude: ${lat}, Longitude: ${lng}`);
+ }
+ };
+
+ async function getAddressFromLatLong(lat: number, lng: number) {
+ try {
+ const response = await Geocode.fromLatLng(lat.toString(), lng.toString());
+ const address = response.results[0].formatted_address;
+ Cookies.set("map_lat", `${lat}`, { expires: 1 });
+ Cookies.set("map_long", `${lng}`, { expires: 1 });
+ console.log("Address:", address);
+ if (onLocationChange) {
+ onLocationChange(address);
+ }
+ } catch (error) {
+ console.error(error);
+ }
+ }
+
+ return (
+ <>
+
+
+
+
+ );
+};
+
+export default PageTitle;
diff --git a/components/partials/auth/copyright.tsx b/components/partials/auth/copyright.tsx
new file mode 100644
index 0000000..826356c
--- /dev/null
+++ b/components/partials/auth/copyright.tsx
@@ -0,0 +1,8 @@
+
+
+const Copyright = () => {
+ const currentYear = new Date().getFullYear();
+ return <>Copyright {currentYear}, Dashcode All Rights Reserved.;
+};
+
+export default Copyright;
diff --git a/components/partials/auth/forgot-pass.tsx b/components/partials/auth/forgot-pass.tsx
new file mode 100644
index 0000000..9e114ea
--- /dev/null
+++ b/components/partials/auth/forgot-pass.tsx
@@ -0,0 +1,74 @@
+"use client";
+import React, { useState } from "react";
+
+import { Label } from "@/components/ui/label";
+import { Input } from "@/components/ui/input";
+import { Button } from "@/components/ui/button";
+type Inputs = {
+ example: string;
+ exampleRequired: string;
+};
+import { useForm, SubmitHandler } from "react-hook-form";
+import { error, loading } from "@/config/swal";
+import withReactContent from "sweetalert2-react-content";
+import Swal from "sweetalert2";
+import { useRouter } from "@/i18n/routing";
+import { forgotPassword } from "@/service/landing/landing";
+
+const ForgotPass = () => {
+ const [username, setUsername] = useState
+ Dashboard
+
+ {/* */}
+
+
+ )}
+
+ );
+};
+
+export default LoginForm;
diff --git a/components/partials/auth/logo.tsx b/components/partials/auth/logo.tsx
new file mode 100644
index 0000000..cace5c3
--- /dev/null
+++ b/components/partials/auth/logo.tsx
@@ -0,0 +1,24 @@
+'use client'
+import Image from 'next/image';
+import { useTheme } from "next-themes";
+
+const Logo = () => {
+ const { theme: mode } = useTheme();
+ return (
+
+
+
+ + {t("pleaseEnterOtp", { defaultValue: "Please Enter Otp" })} +
+
+ setOtpValue(val)}
+ >
+
+
+
+
+
+
+
+
+
+ {otpValidate && (
+ + {otpValidate} +
+ )} + + +
+
+ );
+}
+
+export default Logo;
\ No newline at end of file
diff --git a/components/partials/auth/reg-form.tsx b/components/partials/auth/reg-form.tsx
new file mode 100644
index 0000000..f326018
--- /dev/null
+++ b/components/partials/auth/reg-form.tsx
@@ -0,0 +1,72 @@
+
+"use client";
+import { Button } from "@/components/ui/button";
+import { Checkbox } from "@/components/ui/checkbox";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { useForm, SubmitHandler } from "react-hook-form";
+
+type Inputs = {
+ example: string;
+ exampleRequired: string;
+};
+
+const RegForm = () => {
+ const {
+ register,
+ handleSubmit,
+ watch,
+ formState: { errors },
+ } = useForm
+
+ );
+};
+
+export default ColorSchema;
diff --git a/components/partials/customizer/copy-cutomizer.tsx b/components/partials/customizer/copy-cutomizer.tsx
new file mode 100644
index 0000000..eed7e78
--- /dev/null
+++ b/components/partials/customizer/copy-cutomizer.tsx
@@ -0,0 +1,22 @@
+'use client'
+
+import { CopyButton } from "@/components/copy-button"
+import { useConfig } from "@/hooks/use-config"
+
+const CopyCustomizer = () => {
+ const [config] = useConfig()
+ const code = JSON.stringify(config, null, 2)
+ return (
+
+ Color Scheme
+
+
+
+ {allThemes?.map((themeOption) => (
+
+
+
+
+
+ ))}
+
+ {
+ setConfig({ ...config, footer: value as any });
+ }}
+
+ >
+ {["sticky", "hidden", "default"].map((value, index) => {
+ return (
+
+
+ );
+};
+
+export default FooterStyle;
diff --git a/components/partials/customizer/full-screen.tsx b/components/partials/customizer/full-screen.tsx
new file mode 100644
index 0000000..cc7492e
--- /dev/null
+++ b/components/partials/customizer/full-screen.tsx
@@ -0,0 +1,52 @@
+'use client'
+import { FC, MouseEventHandler } from "react";
+import { Button } from "@/components/ui/button";
+import { Maximize } from "lucide-react";
+
+
+type CustomDocument = Document & {
+ mozCancelFullScreen?: () => void;
+};
+const FullScreenToggle: FC = () => {
+ const toggleFullScreen: MouseEventHandlerFooter Type
+
+
+
+ );
+ })}
+
+
+ );
+}
+
+export default HeaderColor
\ No newline at end of file
diff --git a/components/partials/customizer/header-style.tsx b/components/partials/customizer/header-style.tsx
new file mode 100644
index 0000000..3c3b848
--- /dev/null
+++ b/components/partials/customizer/header-style.tsx
@@ -0,0 +1,40 @@
+"use client";
+import { useConfig } from "@/hooks/use-config";
+import { Check } from "lucide-react";
+import { cn } from "@/lib/utils";
+import { Label } from "@/components/ui/label"
+import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group"
+import { navBarType } from "@/lib/type";
+const HeaderStyle = () => {
+
+ const [config, setConfig] = useConfig();
+
+ const { navbar } = config;
+
+
+ return (
+ Topbar Color
+
+
+
+ {show && (
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {[
+ "dark",
+ "rose",
+ "steel-blue",
+ "purple",
+ "redwood",
+ "green",
+ "ocean-blue",
+ "gray",
+ ].map((color) => (
+
+ )}
+
+
+
+
+
+
+
+
+
+
+
+ ))}
+ {color}
+
+ {
+ setConfig({ ...config, navbar: value as navBarType });
+ }}
+ >
+ {["floating", "sticky", "hidden", "default"].map((value, index) => {
+ return (
+
+
+ );
+};
+
+export default HeaderStyle;
diff --git a/components/partials/customizer/index.tsx b/components/partials/customizer/index.tsx
new file mode 100644
index 0000000..83bbf61
--- /dev/null
+++ b/components/partials/customizer/index.tsx
@@ -0,0 +1,128 @@
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import {
+ Sheet,
+ SheetClose,
+ SheetContent,
+ SheetDescription,
+ SheetFooter,
+ SheetHeader,
+ SheetTitle,
+ SheetTrigger,
+} from "@/components/ui/sheet";
+import { Link } from '@/i18n/routing';
+import { ScrollArea } from "@/components/ui/scroll-area";
+import { Icon } from "@/components/ui/icon";
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
+import ColorSchema from "./color-schema";
+import SetSkin from "./set-skin";
+import MenuHidden from "./menu-hidden";
+import SearchBarToggle from "./search-bar-toggle";
+import TeamSwitcherToggle from "./team-switcher-toggle";
+import SetContentWidth from "./set-content-width";
+import SetLayout from "./set-layout";
+import SetSidebar from "./set-sidebar";
+import SidebarColor from "./sidebar-color";
+import HeaderColor from "./header-color";
+import SidebarBg from "./sidebar-bg";
+import HeaderStyle from "./header-style";
+import FooterStyle from "./footer-style";
+import ResetConfig from "./reset-config";
+import FullScreenToggle from "./full-screen";
+import CopyCustomizer from "./copy-cutomizer";
+import BuyButton from "./buy-button";
+
+const ThemeCustomize = ({ }) => {
+ return (
+ Navbar Type
+
+
+ );
+ })}
+
+
+ + Template Customizer +
++ Customize and preview in real time +
+
+
+
+
+
+
+ Theme Style
+
+
+ Theme Color
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ setConfig({ ...config, menuHidden: !config.menuHidden })
+ }
+
+ />
+
+
+ );
+}
+
+export default MenuHidden
\ No newline at end of file
diff --git a/components/partials/customizer/reset-config.tsx b/components/partials/customizer/reset-config.tsx
new file mode 100644
index 0000000..449ea14
--- /dev/null
+++ b/components/partials/customizer/reset-config.tsx
@@ -0,0 +1,26 @@
+'use client'
+import React from 'react'
+import { RefreshCcw } from 'lucide-react';
+import { useConfig, defaultConfig } from '@/hooks/use-config';
+
+
+const ResetConfig = () => {
+ const [config, setConfig] = useConfig()
+ return (
+ <>
+
+
+ setConfig({ ...config, showSearchBar: !config.showSearchBar })
+ }
+ />
+
+
+ );
+}
+
+export default SearchBarToggle
\ No newline at end of file
diff --git a/components/partials/customizer/set-content-width.tsx b/components/partials/customizer/set-content-width.tsx
new file mode 100644
index 0000000..df3ba6b
--- /dev/null
+++ b/components/partials/customizer/set-content-width.tsx
@@ -0,0 +1,71 @@
+"use client";
+import React from "react";
+import { cn } from "@/lib/utils";
+import { Label } from "@/components/ui/label";
+import { useConfig } from "@/hooks/use-config";
+import { Icon } from "@/components/ui/icon";
+import { wideContentWidthSvg, boxedContentWidthSvg } from "./data";
+import { contentType } from "@/lib/type";
+
+const allContent: { key: contentType; label: string }[] = [
+ { key: "wide", label: "Wide" },
+ { key: "boxed", label: "Boxed" },
+];
+const SetContentWidth = () => {
+ const [config, setConfig] = useConfig();
+
+ return (
+
+
+ );
+};
+
+export default SetContentWidth;
diff --git a/components/partials/customizer/set-layout.tsx b/components/partials/customizer/set-layout.tsx
new file mode 100644
index 0000000..fd63e55
--- /dev/null
+++ b/components/partials/customizer/set-layout.tsx
@@ -0,0 +1,91 @@
+'use client'
+import React from 'react'
+import { cn } from "@/lib/utils"
+import { Label } from "@/components/ui/label"
+import { useConfig } from '@/hooks/use-config'
+import { Icon } from "@/components/ui/icon"
+import Image from 'next/image'
+import { layoutType } from '@/lib/type'
+import {
+ verticalLayoutSvg,
+ horizontalLayoutSvg,
+ semiBoxLayoutSvg,
+ compactLayoutSvg,
+} from "./data";
+
+const allLayouts: { key: layoutType, label: string, icon: string }[] = [
+ { key: "vertical", label: "Vertical", icon: "heroicons:chart-bar", },
+ {
+ key: "horizontal",
+ label: "Horizontal",
+ icon: "heroicons:chart-pie",
+
+ },
+ { key: "semi-box", label: "SemiBox", icon: "heroicons:chart-pie" },
+ { key: "compact", label: "Compact", icon: "heroicons:chart-pie" },
+];
+
+
+const SetLayout = () => {
+ const [config, setConfig] = useConfig()
+
+
+
+
+ return (
+ Content Width
+
+ {allContent?.map(({ key, label }, index) => (
+
+
+
+
+
+
+ ))}
+
+
+ );
+}
+
+export default SetLayout
\ No newline at end of file
diff --git a/components/partials/customizer/set-sidebar.tsx b/components/partials/customizer/set-sidebar.tsx
new file mode 100644
index 0000000..88928d6
--- /dev/null
+++ b/components/partials/customizer/set-sidebar.tsx
@@ -0,0 +1,80 @@
+'use client'
+import React from 'react'
+import { cn } from "@/lib/utils"
+import { Label } from "@/components/ui/label"
+import { useConfig } from '@/hooks/use-config'
+import { Icon } from "@/components/ui/icon"
+import { sidebarType } from '@/lib/type'
+import {
+ classicSidebarSvg,
+ draggableSidebarSvg,
+ twoColumnSidebarSvg,
+ compactSidebarSvg,
+} from "./data";
+
+const allSidebars: { key: sidebarType, label: string, icon: string }[] = [
+ { key: "classic", label: "Classic", icon: "heroicons:chart-bar" },
+ { key: "draggable", label: "Draggable", icon: "heroicons:chart-pie" },
+ { key: "two-column", label: "Two Column", icon: "heroicons:chart-pie" },
+ { key: "compact", label: "Compact", icon: "heroicons:chart-pie" },
+];
+
+
+const SetSidebar = () => {
+ const [config, setConfig] = useConfig()
+
+ return (
+ Layout
+
+ {allLayouts?.map(({ key, label, icon }, index) => (
+
+
+
+
+
+
+ ))}
+
+
+ );
+}
+
+export default SetSidebar
\ No newline at end of file
diff --git a/components/partials/customizer/set-skin.tsx b/components/partials/customizer/set-skin.tsx
new file mode 100644
index 0000000..0b1cf33
--- /dev/null
+++ b/components/partials/customizer/set-skin.tsx
@@ -0,0 +1,71 @@
+'use client'
+import React from 'react'
+import { cn } from "@/lib/utils"
+import { Label } from "@/components/ui/label"
+import { useConfig } from '@/hooks/use-config'
+import { Icon } from "@/components/ui/icon"
+import {
+ borderedSkinSvg,
+ defaultSkinSvg,
+} from "./data";
+import { skinType } from '@/lib/type'
+
+const allSkin: { key: skinType; label: string; }[] = [
+ { key: "default", label: "Default" },
+ { key: "bordered", label: "Bordered" },
+];
+
+const SetSkin = () => {
+ const [config, setConfig] = useConfig()
+
+ return (
+ Sidebar
+
+ {allSidebars?.map(({ key, label, icon }, index) => (
+
+
+
+
+
+
+ ))}
+
+
+ );
+}
+
+export default SetSkin
\ No newline at end of file
diff --git a/components/partials/customizer/sidebar-bg.tsx b/components/partials/customizer/sidebar-bg.tsx
new file mode 100644
index 0000000..c1dc6be
--- /dev/null
+++ b/components/partials/customizer/sidebar-bg.tsx
@@ -0,0 +1,73 @@
+'use client'
+import { useConfig } from '@/hooks/use-config';
+import React, { useState } from 'react'
+import { Icon } from "@/components/ui/icon"
+import { cn } from "@/lib/utils";
+const SidebarBg = () => {
+ const [config, setConfig] = useConfig();
+ const { sidebarBgImage } = config;
+ const [selectedFiles, setSelectedFiles] = useState([
+ "/images/all-img/img-2.jpeg",
+ "/images/all-img/img-1.jpeg",
+ ]);
+ const handleFileChange = (e: any) => {
+ const file = e.target.files[0];
+ setSelectedFiles([...selectedFiles, URL.createObjectURL(file)]);
+ };
+
+ const handleClear = () => {
+ setConfig({
+ ...config,
+ sidebarBgImage: undefined,
+ })
+ };
+ return (
+ Skins
+
+ {allSkin?.map(({ key, label }, index) => (
+
+
+
+
+
+
+ ))}
+
+
+ );
+}
+
+export default SidebarBg
\ No newline at end of file
diff --git a/components/partials/customizer/sidebar-color.tsx b/components/partials/customizer/sidebar-color.tsx
new file mode 100644
index 0000000..9698e8f
--- /dev/null
+++ b/components/partials/customizer/sidebar-color.tsx
@@ -0,0 +1,153 @@
+'use client'
+import React from 'react'
+import { cn } from "@/lib/utils"
+import { Label } from "@/components/ui/label"
+import { useConfig } from '@/hooks/use-config'
+import { Icon } from "@/components/ui/icon"
+import { Check } from 'lucide-react';
+import {
+ defaultSidebarColorSvg,
+ colorSidebarColorSvg,
+ gradientSidebarColorSvg,
+} from "./data";
+import {
+ Tooltip,
+ TooltipContent,
+ TooltipProvider,
+ TooltipTrigger,
+} from "@/components/ui/tooltip"
+const SidebarColor = () => {
+ const [config, setConfig] = useConfig()
+ const [show, setShow] = React.useState
+ Choose a Sidebar Image
+
+
+
+ {selectedFiles.map((file, index) => (
+
+ ))}
+
+
+
+
+ );
+}
+
+export default SidebarColor
\ No newline at end of file
diff --git a/components/partials/customizer/team-switcher-toggle.tsx b/components/partials/customizer/team-switcher-toggle.tsx
new file mode 100644
index 0000000..f94e606
--- /dev/null
+++ b/components/partials/customizer/team-switcher-toggle.tsx
@@ -0,0 +1,28 @@
+'use client'
+import React from 'react'
+import { Checkbox } from "@/components/ui/checkbox"
+import { useConfig } from '@/hooks/use-config'
+
+const TeamSwitcherToggle = () => {
+ const [config, setConfig] = useConfig()
+ if (config.menuHidden || config.layout === 'horizontal') return null
+ return (
+
+ Sidebar Color
+
+
+
+
+ {show && (
+
+
+
+
+
+
+
+
+
+ {[
+ "dark",
+ "rose",
+ "steel-blue",
+ "purple",
+ "redwood",
+ "green",
+ "ocean-blue",
+ "gray",
+
+ ].map((color) => (
+
+ )}
+
+
+
+
+
+
+
+
+
+
+
+
+ ))}
+ {color}
+
+
+ setConfig({ ...config, showSwitcher: !config.showSwitcher })
+ }
+ />
+
+
+ );
+}
+
+export default TeamSwitcherToggle
\ No newline at end of file
diff --git a/components/partials/footer/footer-content.tsx b/components/partials/footer/footer-content.tsx
new file mode 100644
index 0000000..6d0e771
--- /dev/null
+++ b/components/partials/footer/footer-content.tsx
@@ -0,0 +1,49 @@
+'use client'
+
+import React from 'react'
+import { useConfig } from '@/hooks/use-config'
+import { cn } from "@/lib/utils"
+import { useMediaQuery } from '@/hooks/use-media-query'
+
+
+const FooterContent = ({ children }: { children: React.ReactNode }) => {
+ const [config] = useConfig()
+ const isMobile = useMediaQuery("(min-width: 768px)")
+ if (!isMobile) {
+ return
+ }
+
+ if (config.sidebar === 'two-column') {
+ return (
+
+ )
+ }
+
+ return (
+
+ )
+}
+
+export default FooterContent
\ No newline at end of file
diff --git a/components/partials/footer/index.tsx b/components/partials/footer/index.tsx
new file mode 100644
index 0000000..e709130
--- /dev/null
+++ b/components/partials/footer/index.tsx
@@ -0,0 +1,60 @@
+import React from "react";
+import FooterContent from "./footer-content";
+import { Link } from "@/components/navigation";
+import Image from "next/image";
+import { Icon } from "@/components/ui/icon";
+
+const DashCodeFooter = () => {
+ return (
+
+
+
+
+ Hak Cipta © {new Date().getFullYear()} Divisi Humas Polri Hub. All rights Reserved.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {cartProducts.map((product, i) => (
+
+
+
+ ))}
+
+
+
+
+
+
+
+ Classical Black T-Shirt Classical Black T-Shirt
+
+
+ Price: $489
+
+
+
+
+
+ )
+ }
+
+
+
+
+
+
+ Subtotal
+ $0
+
+
+
+
+
+ {children}
+
+
+
+
+
+ {children}
+
+
+
+ ) : (
+ !isDesktop && (
+
+
+
+ )
+ );
+};
+
+export default HeaderLogo;
diff --git a/components/partials/header/header-search.tsx b/components/partials/header/header-search.tsx
new file mode 100644
index 0000000..7b32dc3
--- /dev/null
+++ b/components/partials/header/header-search.tsx
@@ -0,0 +1,222 @@
+'use client'
+import React from "react";
+import { Dialog, DialogContent, DialogTrigger } from "@/components/ui/dialog";
+import { X } from "lucide-react";
+import {
+ Command,
+ CommandEmpty,
+ CommandGroup,
+ CommandInput,
+ CommandItem,
+ CommandList,
+} from "@/components/ui/command";
+import { Button } from "@/components/ui/button";
+import { Link } from '@/i18n/routing';
+import { Icon } from "@/components/ui/icon";
+import { useConfig } from "@/hooks/use-config";
+const HeaderSearch = () => {
+ const [config] = useConfig();
+ if (config.layout === 'horizontal') return null
+ return (
+
+ );
+};
+
+export default HeaderSearch;
diff --git a/components/partials/header/horizontal-menu.tsx b/components/partials/header/horizontal-menu.tsx
new file mode 100644
index 0000000..6c09709
--- /dev/null
+++ b/components/partials/header/horizontal-menu.tsx
@@ -0,0 +1,127 @@
+'use client'
+import React from "react";
+import { cn } from "@/lib/utils";
+import { ChevronDown } from "lucide-react";
+import { Link, usePathname } from "@/components/navigation";
+import { useConfig } from '@/hooks/use-config'
+import { useTranslations } from 'next-intl';
+import { getHorizontalMenuList } from "@/lib/menus";
+import { Icon } from "@/components/ui/icon";
+import {
+ Menubar,
+ MenubarCheckboxItem,
+ MenubarContent,
+ MenubarItem,
+ MenubarMenu,
+ MenubarRadioGroup,
+ MenubarRadioItem,
+ MenubarSeparator,
+ MenubarShortcut,
+ MenubarSub,
+ MenubarSubContent,
+ MenubarSubTrigger,
+ MenubarTrigger,
+} from "@/components/ui/menubar"
+import { useMediaQuery } from "@/hooks/use-media-query";
+
+export default function HorizontalMenu() {
+
+ const [config] = useConfig()
+
+ const t = useTranslations("Menu");
+ const pathname = usePathname();
+
+ const menuList = getHorizontalMenuList(pathname, t)
+
+ const [openDropdown, setOpenDropdown] = React.useState
+
+ {menuList?.map(({ groupLabel, menus }, index) => (
+
+ {menus.map(({ href, label, icon, active, id, submenus }, index) =>
+ submenus.length === 0 ? (
+
+
+
+
+
+ ) : (
+
+
+
+
+ {submenus.map(
+ ({ href, label, icon, children: subChildren }, index) =>
+ subChildren?.length === 0 ? (
+
+
+
+ ) : (
+
+
+
+
+
+ {icon && (
+
+
+ {subChildren?.map(
+ ({ href, label }, index) => (
+
+
+
+
+ {label}
+
+
+ )
+ )}
+
+
+
+ )
+ )}
+
+
+
+
+ )
+ )}
+
+ ))}
+
+
+ );
+}
+
+
diff --git a/components/partials/header/index.tsx b/components/partials/header/index.tsx
new file mode 100644
index 0000000..f63ec32
--- /dev/null
+++ b/components/partials/header/index.tsx
@@ -0,0 +1,41 @@
+"use client";
+
+import React from "react";
+import HeaderContent from "./header-content";
+import HeaderSearch from "./header-search";
+import ProfileInfo from "./profile-info";
+import Notifications from "./notifications";
+import Messages from "./messages";
+import { Cart } from "./cart";
+import ThemeSwitcher from "./theme-switcher";
+import { SidebarToggle } from "@/components/partials/sidebar/sidebar-toggle";
+import { SheetMenu } from "@/components/partials/sidebar/menu/sheet-menu";
+import HorizontalMenu from "./horizontal-menu";
+import LocalSwitcher from "./locale-switcher";
+import HeaderLogo from "./header-logo";
+
+const DashCodeHeader = () => {
+ return (
+ <>
+
+
+
+
+
+
+
+ Messages
+
+
+
+ View all
+
+
+
+
+ {messages?.map((item: Message, index: number) => (
+
+
+
+ ))}
+
+
+
+
+
+ {item.title.charAt(0)}
+
+
+
+
+ {item.hasnotifaction && (
+
+
+ {item.title}
+
+
+ {item.desc}
+
+
+ 3 min ago
+
+
+
+
+ )}
+
+
+
+
+
+ you have {notificationTotal > 99 ? "99+" : notificationTotal}{" "}
+ notifications
+
+
+
+ View all
+
+
+
+
+ {notifications?.map((item: Notification, index: number) => (
+ handleNotificationClick(item?.redirectUrl)}
+ >
+
+ ))}
+
+
+
+
+ {/* {item?.unreadmessage && (
+
+ {getNotificationIcon(item.notificationTypeId)}
+
+
+
+
+ {item?.message}
+
+ {/*
+ {item?.desc}
+
*/}
+
+ {" "}
+ {formatDate(item?.createdAt)}
+
+
+
+
+ )} */}
+
+
+
+ {detail !== undefined ? (
+
+
+ {/*
+ */}
+
+ {[
+ {
+ name: "profile & Settings",
+ icon: "heroicons:user",
+ href: "/profile",
+ },
+ ].map((item, index) => (
+
+
+
+
+ ))}
+
+
+
+
+
+
+ );
+};
+export default ProfileInfo;
diff --git a/components/partials/header/theme-switcher.tsx b/components/partials/header/theme-switcher.tsx
new file mode 100644
index 0000000..3168ea5
--- /dev/null
+++ b/components/partials/header/theme-switcher.tsx
@@ -0,0 +1,72 @@
+"use client";
+
+import * as React from "react";
+import { useTheme } from "next-themes";
+import { hexToRGB } from "@/lib/utils";
+import { Button } from "@/components/ui/button";
+import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "@/components/ui/dropdown-menu";
+import { Moon, Sun } from "lucide-react";
+import { Check } from "lucide-react";
+import { cn } from "@/lib/utils";
+import { Icon } from "@/components/ui/icon";
+
+const ThemeButton = () => {
+ const { theme, setTheme } = useTheme();
+ return (
+
+
+ ) : (
+ ""
+ )}
+
+
+
+
+ {detail?.fullname}
+
+ ({detail?.username})
+
+
+
+ {username}
+
+
+ {username}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {label}
+ +
+
+
+
+ MenuIcon
+ )
+}
+
+export default MenuIcon
\ No newline at end of file
diff --git a/components/partials/sidebar/common/menu-item.tsx b/components/partials/sidebar/common/menu-item.tsx
new file mode 100644
index 0000000..303193c
--- /dev/null
+++ b/components/partials/sidebar/common/menu-item.tsx
@@ -0,0 +1,159 @@
+
+'use client'
+import React, { CSSProperties } from 'react'
+import { Button } from "@/components/ui/button";
+import { Icon } from '@/components/ui/icon'
+import { type Menu } from '@/lib/menus';
+import { Link } from '@/components/navigation';
+import { cn } from "@/lib/utils";
+import { GripVertical } from 'lucide-react';
+
+// for dnd
+
+import {
+ useSortable,
+ arrayMove,
+ SortableContext,
+ verticalListSortingStrategy,
+ horizontalListSortingStrategy,
+} from "@dnd-kit/sortable";
+interface MenuItemProps {
+ id: string
+ href: string
+ label: string
+ icon: string
+ active: boolean
+ collapsed: boolean
+
+}
+import { CSS } from "@dnd-kit/utilities";
+import { useConfig } from '@/hooks/use-config';
+import { useMediaQuery } from '@/hooks/use-media-query';
+import { useMobileMenuConfig } from '@/hooks/use-mobile-menu';
+import { useMenuHoverConfig } from '@/hooks/use-menu-hover';
+const MenuItem = ({ href, label, icon, active, id, collapsed }: MenuItemProps) => {
+ const [config] = useConfig();
+ const [hoverConfig] = useMenuHoverConfig();
+ const { hovered } = hoverConfig;
+ const isDesktop = useMediaQuery("(min-width: 1280px)");
+ const [mobileMenuConfig, setMobileMenuConfig] = useMobileMenuConfig();
+
+ const { transform, transition, setNodeRef, isDragging, attributes, listeners } = useSortable({
+ id: id,
+
+ })
+
+ const style: CSSProperties = {
+ transform: CSS.Transform.toString(transform),
+ transition: transition,
+ opacity: isDragging ? 0.8 : 1,
+ zIndex: isDragging ? 1 : 0,
+ position: "relative",
+ };
+ if (config.sidebar === 'draggable' && isDesktop) {
+ return (
+
+ )
+ }
+
+ if (config.sidebar === 'compact' && isDesktop) {
+ return (
+
+ )
+ }
+ return (
+
+ )
+}
+
+export default MenuItem
\ No newline at end of file
diff --git a/components/partials/sidebar/common/menu-label.tsx b/components/partials/sidebar/common/menu-label.tsx
new file mode 100644
index 0000000..f128766
--- /dev/null
+++ b/components/partials/sidebar/common/menu-label.tsx
@@ -0,0 +1,16 @@
+'use client'
+import { cn } from "@/lib/utils"
+import { useConfig } from '@/hooks/use-config'
+import React from 'react'
+
+const MenuLabel = ({ label, className }: { label: string, className?: string }) => {
+ const [config] = useConfig()
+ if (config.sidebar === 'compact') return null
+ return (
+ + {label} +
+ ) +} + +export default MenuLabel \ No newline at end of file diff --git a/components/partials/sidebar/common/menu-widget.tsx b/components/partials/sidebar/common/menu-widget.tsx new file mode 100644 index 0000000..216ee16 --- /dev/null +++ b/components/partials/sidebar/common/menu-widget.tsx @@ -0,0 +1,31 @@ +'use client' +import { Button } from '@/components/ui/button' +import { useConfig } from '@/hooks/use-config' +import Image from 'next/image' +import React from 'react' + +const MenuWidget = () => { + const [config] = useConfig(); + if (config.sidebar === 'compact') return null + return ( +
+
+ )
+}
+
+export default MenuWidget
\ No newline at end of file
diff --git a/components/partials/sidebar/common/search-bar.tsx b/components/partials/sidebar/common/search-bar.tsx
new file mode 100644
index 0000000..5af5224
--- /dev/null
+++ b/components/partials/sidebar/common/search-bar.tsx
@@ -0,0 +1,78 @@
+'use client'
+import { Input } from '@/components/ui/input'
+import { useConfig } from '@/hooks/use-config'
+import React from 'react'
+import {
+ InputGroup,
+ InputGroupButton,
+ InputGroupText,
+} from "@/components/ui/input-group";
+import { Search } from 'lucide-react';
+import { Button } from "@/components/ui/button";
+import { motion, AnimatePresence } from "framer-motion";
+import {
+ HoverCard,
+ HoverCardContent,
+ HoverCardTrigger,
+} from "@/components/ui/hover-card"
+import { useMenuHoverConfig } from '@/hooks/use-menu-hover';
+const SearchBar = () => {
+ const [config] = useConfig()
+ const [hoverConfig] = useMenuHoverConfig();
+ const { hovered } = hoverConfig;
+
+ if (config.showSearchBar === false || config.sidebar === 'compact') return null
+
+
+ return (
+
+
+ {/*
+
+
+ Unlimited Access
+
+ Upgrade your system to business plan
+
+
+
+
*/}
+
+
+
+
+
+ );
+};
+
+export default IconNav;
diff --git a/components/partials/sidebar/menu/index.tsx b/components/partials/sidebar/menu/index.tsx
new file mode 100644
index 0000000..c55a90e
--- /dev/null
+++ b/components/partials/sidebar/menu/index.tsx
@@ -0,0 +1,30 @@
+"use client";
+
+import React from 'react'
+
+
+import { useConfig } from "@/hooks/use-config";
+import { MenuClassic } from './menu-classic';
+import { MenuTwoColumn } from './menu-two-column';
+import { MenuDragAble } from './menu-dragable';
+import { useMediaQuery } from '@/hooks/use-media-query';
+
+export function Menu() {
+
+ const [config, setConfig] = useConfig()
+ const isDesktop = useMediaQuery('(min-width: 1280px)')
+
+ if (config.sidebar === 'draggable') {
+ return
+
+
+
+ )}
+
+
+
+
+
+
+
+ ) : ""}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {config.sidebarBgImage !== undefined && (
+
+ )}
+
+
+
+
+
+ )
+}
+
+export default SidebarNav
\ No newline at end of file
diff --git a/components/partials/sidebar/sidebar-content.tsx b/components/partials/sidebar/sidebar-content.tsx
new file mode 100644
index 0000000..4249873
--- /dev/null
+++ b/components/partials/sidebar/sidebar-content.tsx
@@ -0,0 +1,61 @@
+'use client'
+import React from 'react'
+import { cn } from "@/lib/utils"
+import { useConfig } from '@/hooks/use-config'
+import { useMediaQuery } from "@/hooks/use-media-query";
+import { useMenuHoverConfig } from '@/hooks/use-menu-hover';
+
+const SidebarContent = ({ children }: { children: React.ReactNode }) => {
+ const isDesktop = useMediaQuery("(min-width: 1280px)");
+ const [config] = useConfig()
+ const [hoverConfig, setHoverConfig] = useMenuHoverConfig();
+ const sidebarTheme = config.sidebarTheme !== 'light' ? `dark theme-${config.sidebarTheme}` : `theme-${config.sidebarTheme}`
+
+ if (config.menuHidden || config.layout === "horizontal") return null
+
+ if (config.sidebar === 'two-column') {
+ return (
+
+
+ )
+ }
+
+
+ return (
+
+ )
+}
+
+export default SidebarContent
\ No newline at end of file
diff --git a/components/partials/sidebar/sidebar-hover-toggle.tsx b/components/partials/sidebar/sidebar-hover-toggle.tsx
new file mode 100644
index 0000000..c380dcb
--- /dev/null
+++ b/components/partials/sidebar/sidebar-hover-toggle.tsx
@@ -0,0 +1,34 @@
+'use client'
+import React from 'react'
+import { useMenuHoverConfig } from '@/hooks/use-menu-hover'
+import { cn } from "@/lib/utils"
+import { useConfig } from '@/hooks/use-config'
+import { useMediaQuery } from '@/hooks/use-media-query'
+
+
+const SidebarHoverToggle = () => {
+ const [hoverConfig, setHoverConfig] = useMenuHoverConfig();
+ const [config, setConfig] = useConfig();
+
+ const isDesktop = useMediaQuery("(min-width: 1280px)");
+ if (config.sidebar !== 'draggable' || !isDesktop) {
+ return null
+
+ }
+
+ return (
+ !config.collapsed || hoverConfig.hovered ?
+
+
+
+ {data?.groupLabel && (
+
+
+
+ setConfig({ ...config, collapsed: !config.collapsed })}
+
+ className={cn("h-4 w-4 border-[1.5px] border-default-900 dark:border-default-700 rounded-full transition-all duration-150", {
+ "ring-2 ring-inset ring-offset-4 ring-black-900 dark:ring-default-400 bg-default-900 dark:bg-default-400 dark:ring-offset-default-700": !config.collapsed
+ })}
+
+ >
+ : null
+
+
+ )
+}
+
+export default SidebarHoverToggle
\ No newline at end of file
diff --git a/components/partials/sidebar/sidebar-toggle.tsx b/components/partials/sidebar/sidebar-toggle.tsx
new file mode 100644
index 0000000..33e1c30
--- /dev/null
+++ b/components/partials/sidebar/sidebar-toggle.tsx
@@ -0,0 +1,86 @@
+'use client'
+import { ChevronLeft } from "lucide-react";
+
+import { cn } from "@/lib/utils";
+import { Button } from "@/components/ui/button";
+import { useConfig } from "@/hooks/use-config";
+import { useMediaQuery } from "@/hooks/use-media-query";
+import { Icon } from "@/components/ui/icon";
+import { motion } from 'framer-motion';
+
+
+export function SidebarToggle() {
+ const [config, setConfig] = useConfig()
+ const collapsed = config.collapsed
+ const isDesktop = useMediaQuery('(min-width: 1280px)')
+ if (!isDesktop) return null
+ if (config.sidebar === 'two-column' && !config.hasSubMenu || config.menuHidden || config.layout === "horizontal" || config.sidebar === 'draggable' ) {
+ return null
+ }
+ if (config.sidebar === 'two-column') {
+ return (
+
+
+
+ )
+ }
+ return (
+
+
+
+ );
+}
\ No newline at end of file
diff --git a/components/project/activity.tsx b/components/project/activity.tsx
new file mode 100644
index 0000000..4ed9381
--- /dev/null
+++ b/components/project/activity.tsx
@@ -0,0 +1,28 @@
+import { Check } from "lucide-react";
+
+interface ActivityItemProps {
+ activity: {
+ title: string;
+ date: string;
+ }
+}
+const ActivityItem = ({ activity }: ActivityItemProps) => {
+ const { title, date } = activity;
+ return (
+
+
+
+
+ + {title} +
++ {date} +
+
+
+ {hasnotifaction && (
+
+
+
+
+
+
+
+ {title}
+ {desc}
+ 3 min ago
+
+
+ {notification_count}
+
+
+ )}
+
+
+
+
+ SA
+
+
+
+
+
+
+ {title}
+
+
+ ),
+ },
+ {
+ accessorKey: "status",
+ header: "status",
+ enableSorting: false,
+ cell: ({ row }) => {
+ return (
+
+
+
+
+ SC
+
+
+
+ {row.original.customer.name}
+
+
+
+ )
+ }
+ },
+ {
+ accessorKey: "time",
+ header: "Time",
+ cell: ({ row }) => (
+ {row.getValue("time")}
+ )
+ },
+ {
+ accessorKey: "chart",
+ header: "Chart",
+ cell: ({ row }) => (
+
+ {row.getValue("status") === "progress" && (
+
+
+ In progress
+
+ )}
+ {row.getValue("status") === "complete" && (
+
+
+ Complete
+
+ )}
+
+
+
+ )
+ },
+
+ {
+ id: "actions",
+ accessorKey: "action",
+ header: "Actions",
+ enableHiding: false,
+ cell: ({ row }) => {
+ return (
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ )
+ }
+ }
+]
+
+const TeamTable = ({ data }: any) => {
+ const [sorting, setSorting] = React.useState
+
+
+
+
+
+ )
+}
+
+export default TeamTable;
+
diff --git a/components/revenue-bar-chart.tsx b/components/revenue-bar-chart.tsx
new file mode 100644
index 0000000..f1afa9e
--- /dev/null
+++ b/components/revenue-bar-chart.tsx
@@ -0,0 +1,174 @@
+"use client"
+
+import { useConfig } from "@/hooks/use-config";
+import { useTranslations } from "next-intl";
+import { useTheme } from "next-themes";
+import dynamic from "next/dynamic";
+const Chart = dynamic(() => import("react-apexcharts"), { ssr: false });
+
+interface RevenueBarChartProps {
+ height?: number;
+ chartType?: "bar" | "area";
+ series?: any[];
+ chartColors?: string[]
+}
+const defaultSeries = [{
+ name: "Net Profit",
+ data: [44, 55, 57, 56, 61, 58, 63, 60, 66],
+},
+{
+ name: "Revenue",
+ data: [76, 85, 101, 98, 87, 105, 91, 114, 94],
+},
+{
+ name: "Free Cash Flow",
+ data: [35, 41, 36, 26, 45, 48, 52, 53, 41],
+}]
+const RevenueBarChart = ({
+ height = 400,
+ chartType = "bar",
+ series = defaultSeries,
+ chartColors = ["#4669FA", "#0CE7FA", "#FA916B"]
+
+}: RevenueBarChartProps) => {
+ const [config] = useConfig();
+ const { isRtl } = config;
+ const t = useTranslations("AnalyticsDashboard");
+ const { theme: mode } = useTheme();
+ const options: any = {
+ chart: {
+ toolbar: {
+ show: false,
+ },
+ },
+ plotOptions: {
+ bar: {
+ horizontal: false,
+ endingShape: "rounded",
+ columnWidth: "45%",
+ },
+ },
+ legend: {
+ show: true,
+ position: "top",
+ horizontalAlign: "right",
+ fontSize: "12px",
+ fontFamily: "Inter",
+ offsetY: -30,
+ markers: {
+ width: 8,
+ height: 8,
+ offsetY: -1,
+ offsetX: -5,
+ radius: 12,
+ },
+ labels: {
+ colors: mode === "dark" ? "#CBD5E1" : "#475569",
+ },
+ itemMargin: {
+ horizontal: 18,
+ vertical: 0,
+ },
+ },
+ title: {
+ text: `${t("revenue_report", { defaultValue: "Revenue Report" })}`,
+ align: "left",
+ offsetY: 13,
+ offsetX: isRtl ? "0%" : 0,
+ floating: false,
+ style: {
+ fontSize: "20px",
+ fontWeight: "500",
+ fontFamily: "Inter",
+ color: mode === "dark" ? "#fff" : "#0f172a",
+ },
+ },
+ dataLabels: {
+ enabled: false,
+ },
+ stroke: {
+ show: true,
+ width: 2,
+ colors: ["transparent"],
+ },
+ yaxis: {
+ labels: {
+ style: {
+ colors: mode === "dark" ? "#CBD5E1" : "#475569",
+ fontFamily: "Inter",
+ },
+ },
+ },
+ xaxis: {
+ categories: [
+ "Feb",
+ "Mar",
+ "Apr",
+ "May",
+ "Jun",
+ "Jul",
+ "Aug",
+ "Sep",
+ "Oct",
+ ],
+ labels: {
+ style: {
+ colors: mode === "dark" ? "#CBD5E1" : "#475569",
+ fontFamily: "Inter",
+ },
+ },
+ axisBorder: {
+ show: false,
+ },
+ axisTicks: {
+ show: false,
+ },
+ },
+
+ fill: {
+ opacity: 1,
+ },
+ tooltip: {
+ y: {
+ formatter: function (val: number) {
+ return "$ " + val + " thousands";
+ },
+ },
+ },
+ colors: chartColors,
+ grid: {
+ show: false,
+ borderColor: mode === "dark" ? "#334155" : "#E2E8F0",
+ strokeDashArray: 10,
+ position: "back",
+ },
+ responsive: [
+ {
+ breakpoint: 600,
+ options: {
+ legend: {
+ position: "bottom",
+ offsetY: 8,
+ horizontalAlign: "center",
+ },
+ plotOptions: {
+ bar: {
+ columnWidth: "80%",
+ },
+ },
+ },
+ },
+ ],
+ };
+ return (
+
+
+);
+
+export default Shimmer;
diff --git a/components/ui/accordion.tsx b/components/ui/accordion.tsx
new file mode 100644
index 0000000..ad5a178
--- /dev/null
+++ b/components/ui/accordion.tsx
@@ -0,0 +1,58 @@
+"use client"
+
+import * as React from "react"
+import * as AccordionPrimitive from "@radix-ui/react-accordion"
+import { ChevronDown } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+
+const Accordion = AccordionPrimitive.Root
+
+const AccordionItem = React.forwardRef<
+ React.ElementRefImage Component With Shimmer Data URL
+{children}
+
+ {children}
+ {dismissible && (
+
+ )}
+
+ ) : null;
+ }
+);
+Alert.displayName = "Alert";
+
+const AlertTitle = React.forwardRef
+ >(({ className, ...props }, ref) => {
+ const { carouselRef, orientation } = useCarousel();
return (
- ,
+ VariantProps {
+ color?: InputColor
+ size?: any
}
-export { Input }
+const Input = React.forwardRef(
+ (
+ {
+ className,
+ type,
+ size,
+ color,
+ ...props
+ },
+ ref
+ ) =>
+ ) {
- return (
- ,
+ React.ComponentPropsWithoutRef &
+ VariantProps
+>(({ className, ...props }, ref) => (
+ = ({
+ children,
+ fallback = (
+
+ {children}
+
+ );
+};
+
+// Lazy load specific heavy components
+export const LazyChart = lazy(() => import("react-apexcharts").then(module => ({ default: module.default || module })));
+export const LazyMap = lazy(() => import("@react-google-maps/api").then(module => ({ default: module.GoogleMap || module })));
+export const LazyPlayer = lazy(() => import("react-player").then(module => ({ default: module.default || module })));
+
+export default LazyLoad;
\ No newline at end of file
diff --git a/components/ui/menubar.tsx b/components/ui/menubar.tsx
new file mode 100644
index 0000000..690f78a
--- /dev/null
+++ b/components/ui/menubar.tsx
@@ -0,0 +1,236 @@
+"use client"
+
+import * as React from "react"
+import * as MenubarPrimitive from "@radix-ui/react-menubar"
+import { Check, ChevronRight, Circle } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+
+const MenubarMenu = MenubarPrimitive.Menu
+
+const MenubarGroup = MenubarPrimitive.Group
+
+const MenubarPortal = MenubarPrimitive.Portal
+
+const MenubarSub = MenubarPrimitive.Sub
+
+const MenubarRadioGroup = MenubarPrimitive.RadioGroup
+
+const Menubar = React.forwardRef<
+ React.ElementRef,
+ React.ComponentPropsWithoutRef
+>(({ className, ...props }, ref) => (
+ ,
+ React.ComponentPropsWithoutRef
+>(({ className, ...props }, ref) => (
+ ,
+ React.ComponentPropsWithoutRef & {
+ inset?: boolean
+ }
+>(({ className, inset, children, ...props }, ref) => (
+
+ {children}
+
+))
+MenubarSubTrigger.displayName = MenubarPrimitive.SubTrigger.displayName
+
+const MenubarSubContent = React.forwardRef<
+ React.ElementRef,
+ React.ComponentPropsWithoutRef
+>(({ className, ...props }, ref) => (
+ ,
+ React.ComponentPropsWithoutRef
+>(
+ (
+ { className, align = "start", alignOffset = -4, sideOffset = 8, ...props },
+ ref
+ ) => (
+
+
+ )
+)
+MenubarContent.displayName = MenubarPrimitive.Content.displayName
+
+const MenubarItem = React.forwardRef<
+ React.ElementRef,
+ React.ComponentPropsWithoutRef & {
+ inset?: boolean
+ }
+>(({ className, inset, ...props }, ref) => (
+ ,
+ React.ComponentPropsWithoutRef
+>(({ className, children, checked, ...props }, ref) => (
+
+
+
+
+
+ {children}
+
+))
+MenubarCheckboxItem.displayName = MenubarPrimitive.CheckboxItem.displayName
+
+const MenubarRadioItem = React.forwardRef<
+ React.ElementRef,
+ React.ComponentPropsWithoutRef
+>(({ className, children, ...props }, ref) => (
+
+
+
+
+
+ {children}
+
+))
+MenubarRadioItem.displayName = MenubarPrimitive.RadioItem.displayName
+
+const MenubarLabel = React.forwardRef<
+ React.ElementRef,
+ React.ComponentPropsWithoutRef & {
+ inset?: boolean
+ }
+>(({ className, inset, ...props }, ref) => (
+ ,
+ React.ComponentPropsWithoutRef
+>(({ className, ...props }, ref) => (
+ ) => {
+ return (
+
+ )
+}
+MenubarShortcut.displayname = "MenubarShortcut"
+
+export {
+ Menubar,
+ MenubarMenu,
+ MenubarTrigger,
+ MenubarContent,
+ MenubarItem,
+ MenubarSeparator,
+ MenubarLabel,
+ MenubarCheckboxItem,
+ MenubarRadioGroup,
+ MenubarRadioItem,
+ MenubarPortal,
+ MenubarSubContent,
+ MenubarSubTrigger,
+ MenubarGroup,
+ MenubarSub,
+ MenubarShortcut,
+}
diff --git a/components/ui/navigation-menu.tsx b/components/ui/navigation-menu.tsx
new file mode 100644
index 0000000..0913c2c
--- /dev/null
+++ b/components/ui/navigation-menu.tsx
@@ -0,0 +1,73 @@
+import * as React from "react";
+import * as NavigationMenuPrimitive from "@radix-ui/react-navigation-menu";
+import { cva } from "class-variance-authority";
+import { ChevronDown } from "lucide-react";
+
+import { cn } from "@/lib/utils";
+
+const NavigationMenu = React.forwardRef, React.ComponentPropsWithoutRef>(({ className, children, ...props }, ref) => (
+
+ {children}
+
+));
+NavigationMenu.displayName = NavigationMenuPrimitive.Root.displayName;
+
+const NavigationMenuList = React.forwardRef, React.ComponentPropsWithoutRef>(({ className, ...props }, ref) => (
+ , React.ComponentPropsWithoutRef>(({ className, children, ...props }, ref) => (
+
+ {children}
+
+));
+NavigationMenuTrigger.displayName = NavigationMenuPrimitive.Trigger.displayName;
+
+const NavigationMenuContent = React.forwardRef, React.ComponentPropsWithoutRef>(({ className, ...props }, ref) => (
+ , React.ComponentPropsWithoutRef>(({ className, ...props }, ref) => (
+ , React.ComponentPropsWithoutRef>(({ className, ...props }, ref) => (
+
+
+
+));
+NavigationMenuIndicator.displayName = NavigationMenuPrimitive.Indicator.displayName;
+
+export { navigationMenuTriggerStyle, NavigationMenu, NavigationMenuList, NavigationMenuItem, NavigationMenuContent, NavigationMenuTrigger, NavigationMenuLink, NavigationMenuIndicator, NavigationMenuViewport };
diff --git a/components/ui/optimized-image.tsx b/components/ui/optimized-image.tsx
new file mode 100644
index 0000000..8112228
--- /dev/null
+++ b/components/ui/optimized-image.tsx
@@ -0,0 +1,85 @@
+"use client";
+
+import Image from "next/image";
+import { useState } from "react";
+import { shimmer, toBase64 } from "@/utils/globals";
+
+interface OptimizedImageProps {
+ src: string;
+ alt: string;
+ width?: number;
+ height?: number;
+ className?: string;
+ priority?: boolean;
+ sizes?: string;
+ fill?: boolean;
+ quality?: number;
+ placeholder?: "blur" | "empty";
+ blurDataURL?: string;
+}
+
+const OptimizedImage: React.FC = ({
+ src,
+ alt,
+ width = 800,
+ height = 600,
+ className = "",
+ priority = false,
+ sizes = "(max-width: 768px) 100vw, (max-width: 1200px) 50vw, 33vw",
+ fill = false,
+ quality = 75,
+ placeholder = "blur",
+ blurDataURL,
+}) => {
+ const [isLoading, setIsLoading] = useState(true);
+ const [error, setError] = useState(false);
+
+ const handleLoad = () => {
+ setIsLoading(false);
+ };
+
+ const handleError = () => {
+ setError(true);
+ setIsLoading(false);
+ };
+
+ // Generate blur data URL if not provided
+ const defaultBlurDataURL = blurDataURL || `data:image/svg+xml;base64,${toBase64(shimmer(width, height))}`;
+
+ if (error) {
+ return (
+ , "size"> &
+} & Pick &
React.ComponentProps<"a">
-function PaginationLink({
+const PaginationLink = ({
className,
isActive,
size = "icon",
...props
-}: PaginationLinkProps) {
- return (
-
- )
-}
+}: PaginationLinkProps) => (
+
+)
+PaginationLink.displayName = "PaginationLink"
-function PaginationPrevious({
+const PaginationPrevious = ({
className,
...props
-}: React.ComponentProps) {
- return (
-
-
- )
-}
+}: React.ComponentProps) => (
+
+
+)
+PaginationPrevious.displayName = "PaginationPrevious"
-function PaginationNext({
+const PaginationNext = ({
className,
...props
-}: React.ComponentProps) {
- return (
-
- Next
-
- )
-}
+}: React.ComponentProps) => (
+
+ Next
+
+)
+PaginationNext.displayName = "PaginationNext"
-function PaginationEllipsis({
+const PaginationEllipsis = ({
className,
...props
-}: React.ComponentProps<"span">) {
- return (
-
- ) {
- return ) {
- return ,
+ React.ComponentPropsWithoutRef
+>(({ className, align = "center", sideOffset = 4, ...props }, ref) => (
+
+
+))
+PopoverContent.displayName = PopoverPrimitive.Content.displayName
-function PopoverContent({
- className,
- align = "center",
- sideOffset = 4,
- ...props
-}: React.ComponentProps) {
- return (
-
-
- )
-}
-
-function PopoverAnchor({
- ...props
-}: React.ComponentProps) {
- return {
+ size?: size,
+ value?: number,
+ showValue?: boolean,
+ color?: color,
+ isStripe?: boolean,
+ isAnimate?: boolean
+}
+
+const Progress = React.forwardRef, ProgressProps>(({ className, value, color, size, showValue, isStripe, isAnimate, ...props }, ref) => {
+ const stripeStyles = isStripe
+ ? {
+ backgroundImage: `linear-gradient(
+ 45deg,
+ hsla(0, 0%, 100%, 0.15) 25%,
+ transparent 0,
+ transparent 50%,
+ hsla(0, 0%, 100%, 0.15) 0,
+ hsla(0, 0%, 100%, 0.15) 75%,
+ transparent 0,
+ transparent
+ )`,
+ backgroundSize: "0.857rem 0.857rem",
+ }
+ : {};
+ return (
+
+
+ {showValue && (
+
+ {value}%
+
+ )}
+
+
+ );
+}
+);
+Progress.displayName = ProgressPrimitive.Root.displayName;
+
+
+export { Progress };
diff --git a/components/ui/radio-group.tsx b/components/ui/radio-group.tsx
index 5e6778c..19a02b2 100644
--- a/components/ui/radio-group.tsx
+++ b/components/ui/radio-group.tsx
@@ -2,44 +2,88 @@
import * as React from "react"
import * as RadioGroupPrimitive from "@radix-ui/react-radio-group"
-import { CircleIcon } from "lucide-react"
+import { Circle } from "lucide-react"
import { cn } from "@/lib/utils"
+import { cva, type VariantProps } from "class-variance-authority"
+import { color, size } from "@/lib/type"
-function RadioGroup({
- className,
- ...props
-}: React.ComponentProps) {
+const radioVariants = cva(
+ "aspect-square h-[18px] w-[18px] rounded-full border border-default-400 data-[state=checked]:text-default-700 ring-offset-background disabled:cursor-not-allowed disabled:bg-default-100 disabled:border-default-400 disabled:opacity-50 [&_svg]:fill-current [&_svg]:text-current transition-all duration-100",
+ {
+ variants: {
+ color: {
+ default:
+ "data-[state=checked]:border-default data-[state=checked]:text-default",
+ primary:
+ "data-[state=checked]:border-primary data-[state=checked]:text-primary",
+ secondary:
+ "data-[state=checked]:border-default-300 data-[state=checked]:text-default-300",
+ info: "data-[state=checked]:border-info data-[state=checked]:text-info",
+ warning:
+ "data-[state=checked]:border-warning data-[state=checked]:text-warning",
+ success:
+ "data-[state=checked]:border-success data-[state=checked]:text-success",
+ destructive:
+ "data-[state=checked]:border-destructive data-[state=checked]:text-destructive",
+ },
+ size: {
+ sm: "h-4 w-4 [&_svg]:h-3 [&_svg]:w-3",
+ default: "h-5 w-5 [&_svg]:h-4 [&_svg]:w-4",
+ md: "h-6 w-6 [&_svg]:h-5 [&_svg]:w-5",
+ lg: "h-7 w-7 [&_svg]:h-6 [&_svg]:w-6",
+ },
+ },
+ compoundVariants: [],
+
+ defaultVariants: {
+ color: "default",
+ }
+ }
+);
+
+const RadioGroup = React.forwardRef<
+ React.ElementRef,
+ React.ComponentPropsWithoutRef
+>(({ className, ...props }, ref) => {
return (
,
+ VariantProps {
+ icon?: React.ReactNode;
+ color?: color;
+ size?: size;
}
-function RadioGroupItem({
- className,
- ...props
-}: React.ComponentProps) {
+const RadioGroupItem = React.forwardRef<
+ React.ElementRef,
+ RadioGroupItemProps
+>(({ className, color,size, icon, ...props }, ref) => {
return (
-
-
+ {icon ||
)
-}
+});
+RadioGroupItem.displayName = RadioGroupPrimitive.Item.displayName
export { RadioGroup, RadioGroupItem }
+
diff --git a/components/ui/resizable.tsx b/components/ui/resizable.tsx
new file mode 100644
index 0000000..f4bc558
--- /dev/null
+++ b/components/ui/resizable.tsx
@@ -0,0 +1,45 @@
+"use client"
+
+import { GripVertical } from "lucide-react"
+import * as ResizablePrimitive from "react-resizable-panels"
+
+import { cn } from "@/lib/utils"
+
+const ResizablePanelGroup = ({
+ className,
+ ...props
+}: React.ComponentProps) => (
+ & {
+ withHandle?: boolean
+}) => (
+ div]:rotate-90",
+ className
+ )}
+ {...props}
+ >
+ {withHandle && (
+
+)
+
+export { ResizablePanelGroup, ResizablePanel, ResizableHandle }
diff --git a/components/ui/scroll-area.tsx b/components/ui/scroll-area.tsx
new file mode 100644
index 0000000..0b4a48d
--- /dev/null
+++ b/components/ui/scroll-area.tsx
@@ -0,0 +1,48 @@
+"use client"
+
+import * as React from "react"
+import * as ScrollAreaPrimitive from "@radix-ui/react-scroll-area"
+
+import { cn } from "@/lib/utils"
+
+const ScrollArea = React.forwardRef<
+ React.ElementRef,
+ React.ComponentPropsWithoutRef
+>(({ className, children, ...props }, ref) => (
+
+
+ {children}
+
+
+))
+ScrollArea.displayName = ScrollAreaPrimitive.Root.displayName
+
+const ScrollBar = React.forwardRef<
+ React.ElementRef,
+ React.ComponentPropsWithoutRef
+>(({ className, orientation = "vertical", ...props }, ref) => (
+
+
+))
+ScrollBar.displayName = ScrollAreaPrimitive.ScrollAreaScrollbar.displayName
+
+export { ScrollArea, ScrollBar }
diff --git a/components/ui/select.tsx b/components/ui/select.tsx
index dcbbc0c..d8ca209 100644
--- a/components/ui/select.tsx
+++ b/components/ui/select.tsx
@@ -2,184 +2,211 @@
import * as React from "react"
import * as SelectPrimitive from "@radix-ui/react-select"
-import { CheckIcon, ChevronDownIcon, ChevronUpIcon } from "lucide-react"
+import { Check, ChevronDown, ChevronUp } from "lucide-react"
import { cn } from "@/lib/utils"
+import { cva, type VariantProps } from "class-variance-authority"
+import { InputColor, size } from "@/lib/type"
-function Select({
- ...props
-}: React.ComponentProps) {
- return ,
+ VariantProps {
+ size?: size
+ color?: InputColor
}
-
-function SelectGroup({
- ...props
-}: React.ComponentProps) {
- return ) {
- return & {
- size?: "sm" | "default"
-}) {
- return (
+const SelectTrigger = React.forwardRef<
+ React.ElementRef,
+ SelectTriggerProps
+>(
+ (
+ {
+ className,
+ children,
+ color,
+ size,
+ ...props
+ },
+ ref
+ ) => (
{children}
-
)
-}
+);
+SelectTrigger.displayName = SelectPrimitive.Trigger.displayName;
-function SelectContent({
- className,
- children,
- position = "popper",
- ...props
-}: React.ComponentProps) {
- return (
-
- ,
+ React.ComponentPropsWithoutRef
+>(({ className, ...props }, ref) => (
+
+
+))
+SelectScrollUpButton.displayName = SelectPrimitive.ScrollUpButton.displayName
+
+const SelectScrollDownButton = React.forwardRef<
+ React.ElementRef,
+ React.ComponentPropsWithoutRef
+>(({ className, ...props }, ref) => (
+
+
+))
+SelectScrollDownButton.displayName =
+ SelectPrimitive.ScrollDownButton.displayName
+
+const SelectContent = React.forwardRef<
+ React.ElementRef,
+ React.ComponentPropsWithoutRef
+>(({ className, children, position = "popper", ...props }, ref) => (
+
+
+
-
- {children}
-
-
-
- )
-}
+ {children}
+
+
+
+))
+SelectContent.displayName = SelectPrimitive.Content.displayName
-function SelectLabel({
- className,
- ...props
-}: React.ComponentProps) {
- return (
- ,
+ React.ComponentPropsWithoutRef
+>(({ className, ...props }, ref) => (
+ ) {
- return (
-
-
-
-
-
- {children}
-
- )
-}
+const SelectItem = React.forwardRef<
+ React.ElementRef,
+ React.ComponentPropsWithoutRef
+>(({ className, children, ...props }, ref) => (
+
+
+
+
+
-function SelectSeparator({
- className,
- ...props
-}: React.ComponentProps) {
- return (
- {children}
+
+))
+SelectItem.displayName = SelectPrimitive.Item.displayName
-function SelectScrollUpButton({
- className,
- ...props
-}: React.ComponentProps) {
- return (
-
-
- )
-}
-
-function SelectScrollDownButton({
- className,
- ...props
-}: React.ComponentProps) {
- return (
-
-
- )
-}
+const SelectSeparator = React.forwardRef<
+ React.ElementRef,
+ React.ComponentPropsWithoutRef
+>(({ className, ...props }, ref) => (
+ ,
+ React.ComponentPropsWithoutRef
+>(
+ (
+ { className, orientation = "horizontal", decorative = true, ...props },
+ ref
+ ) => (
+ ,
+ React.ComponentPropsWithoutRef
+>(({ className, ...props }, ref) => (
+ ,
+ VariantProps {
+ overlayClass?: string
+}
+
+const SheetContent = React.forwardRef<
+ React.ElementRef,
+ SheetContentProps
+>(({ side = "right", className, overlayClass, children, ...props }, ref) => (
+
+
+ {children}
+
+
+
+
+))
+SheetContent.displayName = SheetPrimitive.Content.displayName
+
+const SheetHeader = ({
+ className,
+ ...props
+}: React.HTMLAttributes) => (
+
+)
+SheetHeader.displayName = "SheetHeader"
+
+const SheetFooter = ({
+ className,
+ ...props
+}: React.HTMLAttributes) => (
+
+)
+SheetFooter.displayName = "SheetFooter"
+
+const SheetTitle = React.forwardRef<
+ React.ElementRef,
+ React.ComponentPropsWithoutRef
+>(({ className, ...props }, ref) => (
+ ,
+ React.ComponentPropsWithoutRef
+>(({ className, ...props }, ref) => (
+ ) {
return (
)
diff --git a/components/ui/slider.tsx b/components/ui/slider.tsx
new file mode 100644
index 0000000..494dd64
--- /dev/null
+++ b/components/ui/slider.tsx
@@ -0,0 +1,28 @@
+"use client"
+
+import * as React from "react"
+import * as SliderPrimitive from "@radix-ui/react-slider"
+
+import { cn } from "@/lib/utils"
+
+const Slider = React.forwardRef<
+ React.ElementRef,
+ React.ComponentPropsWithoutRef
+>(({ className, ...props }, ref) => (
+
+
+
+
+))
+Slider.displayName = SliderPrimitive.Root.displayName
+
+export { Slider }
diff --git a/components/ui/sonner.tsx b/components/ui/sonner.tsx
new file mode 100644
index 0000000..452f4d9
--- /dev/null
+++ b/components/ui/sonner.tsx
@@ -0,0 +1,31 @@
+"use client"
+
+import { useTheme } from "next-themes"
+import { Toaster as Sonner } from "sonner"
+
+type ToasterProps = React.ComponentProps
+
+const Toaster = ({ ...props }: ToasterProps) => {
+ const { theme = "system" } = useTheme()
+
+ return (
+ ) {
- return (
-
-
- )
+const switchVariants = cva(
+ "peer relative inline-flex items-center [&_.content-box>svg]:h-3 [&_.content-box>svg]:w-3 [&_.content-box]:text-primary-foreground [&_.content-box]:text-[10px] justify-start group flex-shrink-0 cursor-pointer rounded-full transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 data-[state=unchecked]:bg-default-300",
+ {
+ variants: {
+ color: {
+ default: "data-[state=checked]:bg-default ",
+ primary: "data-[state=checked]:bg-primary ",
+ secondary: "data-[state=checked]:bg-secondary ",
+ info: "data-[state=checked]:bg-info ",
+ warning: "data-[state=checked]:bg-warning ",
+ success: "data-[state=checked]:bg-success ",
+ destructive: "data-[state=checked]:bg-destructive ",
+ dark: "data-[state=checked]:bg-foreground ",
+ },
+ size: {
+ sm: "h-4 w-[30px] [&_.content-box]:text-[7px] [&_.content-box>svg]:h-2.5 [&_.content-box>svg]:w-2.5 ",
+ default: "h-5 w-[38px] ",
+ md: "h-6 w-[46px]",
+ lg: "h-7 w-[48px] ",
+ },
+ },
+
+ defaultVariants: {
+ color: "default",
+ size: "default",
+ },
+ }
+);
+
+interface SwitchProps extends React.ComponentPropsWithoutRef, VariantProps {
+ color?: color
+ size?:size
+ startContent?: React.ReactNode | string
+ endContent?: React.ReactNode | string
}
+const Switch = React.forwardRef<
+ React.ElementRef,
+ SwitchProps
+>(({ color, size, startContent, endContent, className, ...props }, ref) => (
+
+ {startContent && (
+
+ {startContent}
+
+ )}
+
+));
+Switch.displayName = SwitchPrimitives.Root.displayName
+
export { Switch }
diff --git a/components/ui/table.tsx b/components/ui/table.tsx
index 51b74dd..d4c65bf 100644
--- a/components/ui/table.tsx
+++ b/components/ui/table.tsx
@@ -1,108 +1,109 @@
-"use client"
-
import * as React from "react"
import { cn } from "@/lib/utils"
-function Table({ className, ...props }: React.ComponentProps<"table">) {
- return (
-
+>(({ className, ...props }, ref) => (
+
+))
+TableHeader.displayName = "TableHeader"
-function TableFooter({ className, ...props }: React.ComponentProps<"tfoot">) {
- return (
- tr]:last:border-b-0",
- className
- )}
- {...props}
- />
- )
-}
+const TableBody = React.forwardRef<
+ HTMLTableSectionElement,
+ React.HTMLAttributes
+>(({ className, ...props }, ref) => (
+
+))
+TableBody.displayName = "TableBody"
-function TableRow({ className, ...props }: React.ComponentProps<"tr">) {
- return (
-
+>(({ className, ...props }, ref) => (
+ tr]:last:border-b-0",
+ className
+ )}
+ {...props}
+ />
+))
+TableFooter.displayName = "TableFooter"
-function TableHead({ className, ...props }: React.ComponentProps<"th">) {
- return (
- [role=checkbox]]:translate-y-[2px]",
- className
- )}
- {...props}
- />
- )
-}
+const TableRow = React.forwardRef<
+ HTMLTableRowElement,
+ React.HTMLAttributes
+>(({ className, ...props }, ref) => (
+ [role=checkbox]]:translate-y-[2px]",
- className
- )}
- {...props}
- />
- )
-}
+const TableHead = React.forwardRef<
+ HTMLTableCellElement,
+ React.ThHTMLAttributes
+>(({ className, ...props }, ref) => (
+
+>(({ className, ...props }, ref) => (
+
+>(({ className, ...props }, ref) => (
+ ,
- React.ComponentPropsWithoutRef
->(({ className, ...props }, ref) => (
+ React.ComponentPropsWithoutRef & { onClick?: () => void }
+>(({ className, onClick, ...props }, ref) => (
{
+ if (onClick) {
+ onClick()
+ }
+ }}
{...props}
/>
))
@@ -44,7 +49,7 @@ const TabsContent = React.forwardRef<
) {
- return (
-
- )
+import { cva, type VariantProps } from "class-variance-authority";
+import { InputColor, radius } from "@/lib/type";
+
+export const textareaVariants = cva(
+ "flex flex-1 bg-background w-full min-h-[80px] rounded-md border border-solid px-3 py-[10px] text-sm file:border-0 file:bg-transparent file:text-sm file:font-medium read-only:bg-background read-only:text-default-500 disabled:cursor-not-allowed disabled:opacity-50 transition duration-300 ",
+ {
+ variants: {
+ color: {
+ default:
+ "border-default-200 text-default focus:outline-none focus:border-default disabled:bg-default-200 placeholder:text-accent-foreground/50",
+ primary:
+ "border-primary text-primary focus:outline-none focus:border-primary-700 disabled:bg-primary/30 disabled:placeholder:text-primary placeholder:text-primary/70",
+ secondary:
+ "border-secondary text-secondary focus:outline-none focus:border-secondary-700 disabled:bg-secondary/30 disabled:placeholder:text-secondary placeholder:text-secondary/70",
+ info: "border-info/50 text-info focus:outline-none focus:border-info-700 disabled:bg-info/30 disabled:placeholder:text-info placeholder:text-info/70",
+ warning:
+ "border-warning/50 text-warning focus:outline-none focus:border-warning-700 disabled:bg-warning/30 disabled:placeholder:text-info placeholder:text-warning/70",
+ success:
+ "border-success/50 text-success focus:outline-none focus:border-success-700 disabled:bg-success/30 disabled:placeholder:text-info placeholder:text-success/70",
+ destructive:
+ "border-destructive/50 text-destructive focus:outline-none focus:border-destructive-700 disabled:bg-destructive/30 disabled:placeholder:text-destructive placeholder:text-destructive/70",
+ },
+
+ },
+
+ defaultVariants: {
+ color: "default",
+ },
+ }
+);
+
+export interface TextareaProps
+ extends React.TextareaHTMLAttributes,
+ VariantProps {
+ color?: InputColor
}
-export { Textarea }
+const Textarea = React.forwardRef(
+ ({ className, color, defaultValue, ...props }, ref) => {
+ return (
+ ,
+ React.ComponentPropsWithoutRef
+>(({ className, ...props }, ref) => (
+ ,
+ React.ComponentPropsWithoutRef &
+ VariantProps
+>(({ className, variant, ...props }, ref) => {
+ return (
+ ,
+ React.ComponentPropsWithoutRef
+>(({ className, ...props }, ref) => (
+ ,
+ React.ComponentPropsWithoutRef
+>(({ className, ...props }, ref) => (
+
+
+))
+ToastClose.displayName = ToastPrimitives.Close.displayName
+
+const ToastTitle = React.forwardRef<
+ React.ElementRef,
+ React.ComponentPropsWithoutRef
+>(({ className, ...props }, ref) => (
+
{children}
- )
-}
+ );
+});
+Carousel.displayName = "Carousel";
-function CarouselContent({ className, ...props }: React.ComponentProps<"div">) {
- const { carouselRef, orientation } = useCarousel()
+const CarouselContent = React.forwardRef
-
+ >(({ className, ...props }, ref) => {
+ const { orientation } = useCarousel();
- return (
-
- )
-}
+ return ;
+});
+CarouselItem.displayName = "CarouselItem";
-function CarouselPrevious({
- className,
- variant = "outline",
- size = "icon",
- ...props
-}: React.ComponentProps) {
- const { orientation, scrollPrev, canScrollPrev } = useCarousel()
+const CarouselPrevious = React.forwardRef>(({ className, variant = "outline", size = "icon", ...props }, ref) => {
+ const { orientation, scrollPrev, canScrollPrev } = useCarousel();
return (
- )
-}
+ );
+});
+CarouselPrevious.displayName = "CarouselPrevious";
-function CarouselNext({
- className,
- variant = "outline",
- size = "icon",
- ...props
-}: React.ComponentProps) {
- const { orientation, scrollNext, canScrollNext } = useCarousel()
+const CarouselNext = React.forwardRef>(({ className, variant = "outline", size = "icon", ...props }, ref) => {
+ const { orientation, scrollNext, canScrollNext } = useCarousel();
return (
- )
-}
+ );
+});
+CarouselNext.displayName = "CarouselNext";
-export {
- type CarouselApi,
- Carousel,
- CarouselContent,
- CarouselItem,
- CarouselPrevious,
- CarouselNext,
-}
+export { type CarouselApi, Carousel, CarouselContent, CarouselItem, CarouselPrevious, CarouselNext };
diff --git a/components/ui/checkbox.tsx b/components/ui/checkbox.tsx
index fa0e4b5..e034644 100644
--- a/components/ui/checkbox.tsx
+++ b/components/ui/checkbox.tsx
@@ -2,31 +2,65 @@
import * as React from "react"
import * as CheckboxPrimitive from "@radix-ui/react-checkbox"
-import { CheckIcon } from "lucide-react"
-
+import { Check } from "lucide-react"
import { cn } from "@/lib/utils"
+import { cva, type VariantProps } from "class-variance-authority"
+import { color } from "@/lib/type"
-function Checkbox({
- className,
- ...props
-}: React.ComponentProps) {
- return (
- &
+ VariantProps & {
+ color?: color
+ icon?: React.ReactNode;
+ };
+
+
+const Checkbox = React.forwardRef<
+ React.ElementRef,
+ CheckboxProps
+>(({ className, color, ...props }, ref) => (
+
+
-
-
-
- )
-}
+
+));
+
+Checkbox.displayName = CheckboxPrimitive.Root.displayName;
export { Checkbox }
diff --git a/components/ui/cleave.tsx b/components/ui/cleave.tsx
new file mode 100644
index 0000000..6630724
--- /dev/null
+++ b/components/ui/cleave.tsx
@@ -0,0 +1,30 @@
+"use client";
+import * as React from "react";
+import Cleave from "cleave.js/react";
+import "cleave.js/dist/addons/cleave-phone.us";
+import { cn } from "@/lib/utils";
+import { CleaveOptions } from "cleave.js/options";
+interface CleaveInputProps extends React.InputHTMLAttributes {
+ options: CleaveOptions;
+}
+
+const CleaveInput = React.forwardRef(({ className, type, ...props }, ref) => {
+ return (
+
+
+
+
+
+
+
+ {emptyMessage}
+
+ {options.map((option) => (
+ {
+ onValueChange?.(currentValue === value ? "" : currentValue);
+ setOpen(false);
+ }}
+ >
+
+ ))}
+
+
+
+
+
+ );
+}
+
+// Specialized combobox for Google Places Autocomplete
+interface PlacesComboboxProps {
+ value: string;
+ onValueChange: (value: string) => void;
+ onSelect: (address: string) => void;
+ suggestions: Array<{ place_id: string; description: string }>;
+ status: string;
+ disabled?: boolean;
+ placeholder?: string;
+ className?: string;
+}
+
+export function PlacesCombobox({
+ value,
+ onValueChange,
+ onSelect,
+ suggestions,
+ status,
+ disabled = false,
+ placeholder = "Cari Alamat",
+ className,
+}: PlacesComboboxProps) {
+ const [open, setOpen] = React.useState(false);
+
+ const handleSelect = (address: string) => {
+ onSelect(address);
+ setOpen(false);
+ };
+
+ return (
+
+
+
+
+
+
+
+ {status === "OK" && suggestions.length > 0 ? (
+
+ {suggestions.map(({ place_id, description }) => (
+ handleSelect(description)}
+ >
+ {description}
+
+ ))}
+
+ ) : (
+ No results found.
+ )}
+
+
+
+
+ );
+}
\ No newline at end of file
diff --git a/components/ui/command.tsx b/components/ui/command.tsx
new file mode 100644
index 0000000..1e7dfc5
--- /dev/null
+++ b/components/ui/command.tsx
@@ -0,0 +1,155 @@
+"use client"
+
+import * as React from "react"
+import { type DialogProps } from "@radix-ui/react-dialog"
+import { Command as CommandPrimitive } from "cmdk"
+import { Search } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+import { Dialog, DialogContent } from "@/components/ui/dialog"
+
+const Command = React.forwardRef<
+ React.ElementRef,
+ React.ComponentPropsWithoutRef
+>(({ className, ...props }, ref) => (
+ ,
+ React.ComponentPropsWithoutRef
+>(({ className, ...props }, ref) => (
+ ,
+ React.ComponentPropsWithoutRef
+>(({ className, ...props }, ref) => (
+ ,
+ React.ComponentPropsWithoutRef
+>((props, ref) => (
+ ,
+ React.ComponentPropsWithoutRef
+>(({ className, ...props }, ref) => (
+ ,
+ React.ComponentPropsWithoutRef
+>(({ className, ...props }, ref) => (
+ ,
+ React.ComponentPropsWithoutRef
+>(({ className, ...props }, ref) => (
+ ) => {
+ return (
+
+ )
+}
+CommandShortcut.displayName = "CommandShortcut"
+
+export {
+ Command,
+ CommandDialog,
+ CommandInput,
+ CommandList,
+ CommandEmpty,
+ CommandGroup,
+ CommandItem,
+ CommandShortcut,
+ CommandSeparator,
+}
diff --git a/components/ui/context-menu.tsx b/components/ui/context-menu.tsx
new file mode 100644
index 0000000..93ef37b
--- /dev/null
+++ b/components/ui/context-menu.tsx
@@ -0,0 +1,200 @@
+"use client"
+
+import * as React from "react"
+import * as ContextMenuPrimitive from "@radix-ui/react-context-menu"
+import { Check, ChevronRight, Circle } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+
+const ContextMenu = ContextMenuPrimitive.Root
+
+const ContextMenuTrigger = ContextMenuPrimitive.Trigger
+
+const ContextMenuGroup = ContextMenuPrimitive.Group
+
+const ContextMenuPortal = ContextMenuPrimitive.Portal
+
+const ContextMenuSub = ContextMenuPrimitive.Sub
+
+const ContextMenuRadioGroup = ContextMenuPrimitive.RadioGroup
+
+const ContextMenuSubTrigger = React.forwardRef<
+ React.ElementRef,
+ React.ComponentPropsWithoutRef & {
+ inset?: boolean
+ }
+>(({ className, inset, children, ...props }, ref) => (
+
+ {children}
+
+))
+ContextMenuSubTrigger.displayName = ContextMenuPrimitive.SubTrigger.displayName
+
+const ContextMenuSubContent = React.forwardRef<
+ React.ElementRef,
+ React.ComponentPropsWithoutRef
+>(({ className, ...props }, ref) => (
+ ,
+ React.ComponentPropsWithoutRef
+>(({ className, ...props }, ref) => (
+
+
+))
+ContextMenuContent.displayName = ContextMenuPrimitive.Content.displayName
+
+const ContextMenuItem = React.forwardRef<
+ React.ElementRef,
+ React.ComponentPropsWithoutRef & {
+ inset?: boolean
+ }
+>(({ className, inset, ...props }, ref) => (
+ ,
+ React.ComponentPropsWithoutRef
+>(({ className, children, checked, ...props }, ref) => (
+
+
+
+
+
+ {children}
+
+))
+ContextMenuCheckboxItem.displayName =
+ ContextMenuPrimitive.CheckboxItem.displayName
+
+const ContextMenuRadioItem = React.forwardRef<
+ React.ElementRef,
+ React.ComponentPropsWithoutRef
+>(({ className, children, ...props }, ref) => (
+
+
+
+
+
+ {children}
+
+))
+ContextMenuRadioItem.displayName = ContextMenuPrimitive.RadioItem.displayName
+
+const ContextMenuLabel = React.forwardRef<
+ React.ElementRef,
+ React.ComponentPropsWithoutRef & {
+ inset?: boolean
+ }
+>(({ className, inset, ...props }, ref) => (
+ ,
+ React.ComponentPropsWithoutRef
+>(({ className, ...props }, ref) => (
+ ) => {
+ return (
+
+ )
+}
+ContextMenuShortcut.displayName = "ContextMenuShortcut"
+
+export {
+ ContextMenu,
+ ContextMenuTrigger,
+ ContextMenuContent,
+ ContextMenuItem,
+ ContextMenuCheckboxItem,
+ ContextMenuRadioItem,
+ ContextMenuLabel,
+ ContextMenuSeparator,
+ ContextMenuShortcut,
+ ContextMenuGroup,
+ ContextMenuPortal,
+ ContextMenuSub,
+ ContextMenuSubContent,
+ ContextMenuSubTrigger,
+ ContextMenuRadioGroup,
+}
diff --git a/components/ui/dialog.tsx b/components/ui/dialog.tsx
index d9ccec9..b40ca1f 100644
--- a/components/ui/dialog.tsx
+++ b/components/ui/dialog.tsx
@@ -2,142 +2,139 @@
import * as React from "react"
import * as DialogPrimitive from "@radix-ui/react-dialog"
-import { XIcon } from "lucide-react"
+import { X } from "lucide-react"
import { cn } from "@/lib/utils"
+import { cva } from "class-variance-authority"
+import { size } from "@/lib/type"
-function Dialog({
- ...props
-}: React.ComponentProps) {
- return ,
+ React.ComponentPropsWithoutRef
+>(({ className, ...props }, ref) => (
+ {
+ size?: size;
}
-function DialogTrigger({
- ...props
-}: React.ComponentProps) {
- return ,
+ DialogContentProps
+>(({ className, children, size, ...props }, ref) => (
+
+ ) {
- return
+
+
+
+))
+DialogContent.displayName = DialogPrimitive.Content.displayName
-function DialogClose({
- ...props
-}: React.ComponentProps) {
- return ) {
- return (
- ) => (
+
+)
+DialogHeader.displayName = "DialogHeader"
-function DialogContent({
- className,
- children,
- showCloseButton = true,
- ...props
-}: React.ComponentProps & {
- showCloseButton?: boolean
-}) {
- return (
-
-
- {children}
- {showCloseButton && (
-
-
- )}
-
-
- )
-}
-
-function DialogHeader({ className, ...props }: React.ComponentProps<"div">) {
- return (
-
- )
-}
-
-function DialogFooter({ className, ...props }: React.ComponentProps<"div">) {
- return (
-
- )
-}
-
-function DialogTitle({
+const DialogFooter = ({
className,
...props
-}: React.ComponentProps) {
- return (
- ) => (
+
+)
+DialogFooter.displayName = "DialogFooter"
-function DialogDescription({
- className,
- ...props
-}: React.ComponentProps) {
- return (
- ,
+ React.ComponentPropsWithoutRef
+>(({ className, ...props }, ref) => (
+ ,
+ React.ComponentPropsWithoutRef
+>(({ className, ...props }, ref) => (
+ ) => (
+ ,
+ React.ComponentPropsWithoutRef
+>(({ className, ...props }, ref) => (
+ ,
+ React.ComponentPropsWithoutRef
+>(({ className, children, ...props }, ref) => (
+
+
+
+ {children}
+
+
+))
+DrawerContent.displayName = "DrawerContent"
+
+const DrawerHeader = ({
+ className,
+ ...props
+}: React.HTMLAttributes) => (
+
+)
+DrawerHeader.displayName = "DrawerHeader"
+
+const DrawerFooter = ({
+ className,
+ ...props
+}: React.HTMLAttributes) => (
+
+)
+DrawerFooter.displayName = "DrawerFooter"
+
+const DrawerTitle = React.forwardRef<
+ React.ElementRef,
+ React.ComponentPropsWithoutRef
+>(({ className, ...props }, ref) => (
+ ,
+ React.ComponentPropsWithoutRef
+>(({ className, ...props }, ref) => (
+ ) {
- return ) {
- return (
- ) {
- return (
- ) {
- return (
-
-
- )
-}
+const DropdownMenuPortal = DropdownMenuPrimitive.Portal;
-function DropdownMenuGroup({
- ...props
-}: React.ComponentProps) {
- return (
- & {
- inset?: boolean
- variant?: "default" | "destructive"
-}) {
- return (
- ,
+ React.ComponentPropsWithoutRef & {
+ inset?: boolean;
+ }
+>(({ className, inset, children, ...props }, ref) => (
+
+ {children}
+
+));
+DropdownMenuSubTrigger.displayName = DropdownMenuPrimitive.SubTrigger.displayName;
+
+const DropdownMenuSubContent = React.forwardRef, React.ComponentPropsWithoutRef>(({ className, ...props }, ref) => (
+ , React.ComponentPropsWithoutRef>(({ className, sideOffset = 4, ...props }, ref) => (
+
+
+));
+DropdownMenuContent.displayName = DropdownMenuPrimitive.Content.displayName;
-function DropdownMenuCheckboxItem({
- className,
- children,
- checked,
- ...props
-}: React.ComponentProps) {
- return (
-
-
-
-
-
- {children}
-
- )
-}
+const DropdownMenuItem = React.forwardRef<
+ React.ElementRef,
+ React.ComponentPropsWithoutRef & {
+ inset?: boolean;
+ }
+>(({ className, inset, ...props }, ref) => (
+ ) {
- return (
- , React.ComponentPropsWithoutRef>(({ className, children, checked, ...props }, ref) => (
+
+
+
+
+
+ {children}
+
+));
+DropdownMenuCheckboxItem.displayName = DropdownMenuPrimitive.CheckboxItem.displayName;
-function DropdownMenuRadioItem({
- className,
- children,
- ...props
-}: React.ComponentProps) {
- return (
-
-
-
-
-
- {children}
-
- )
-}
+const DropdownMenuRadioItem = React.forwardRef, React.ComponentPropsWithoutRef>(({ className, children, ...props }, ref) => (
+
+
+
+
+
+ {children}
+
+));
+DropdownMenuRadioItem.displayName = DropdownMenuPrimitive.RadioItem.displayName;
-function DropdownMenuLabel({
- className,
- inset,
- ...props
-}: React.ComponentProps & {
- inset?: boolean
-}) {
- return (
- ,
+ React.ComponentPropsWithoutRef & {
+ inset?: boolean;
+ }
+>(({ className, inset, ...props }, ref) => ) {
- return (
- , React.ComponentPropsWithoutRef>(({ className, ...props }, ref) => (
+ ) {
- return & {
- inset?: boolean
-}) {
- return (
-
- {children}
-
- )
-}
-
-function DropdownMenuSubContent({
- className,
- ...props
-}: React.ComponentProps) {
- return (
- ) => {
+ return ;
+};
+DropdownMenuShortcut.displayName = "DropdownMenuShortcut";
export {
DropdownMenu,
- DropdownMenuPortal,
DropdownMenuTrigger,
DropdownMenuContent,
- DropdownMenuGroup,
- DropdownMenuLabel,
DropdownMenuItem,
DropdownMenuCheckboxItem,
- DropdownMenuRadioGroup,
DropdownMenuRadioItem,
+ DropdownMenuLabel,
DropdownMenuSeparator,
DropdownMenuShortcut,
+ DropdownMenuGroup,
+ DropdownMenuPortal,
DropdownMenuSub,
- DropdownMenuSubTrigger,
DropdownMenuSubContent,
-}
+ DropdownMenuSubTrigger,
+ DropdownMenuRadioGroup,
+};
diff --git a/components/ui/hover-card.tsx b/components/ui/hover-card.tsx
new file mode 100644
index 0000000..e54d91c
--- /dev/null
+++ b/components/ui/hover-card.tsx
@@ -0,0 +1,29 @@
+"use client"
+
+import * as React from "react"
+import * as HoverCardPrimitive from "@radix-ui/react-hover-card"
+
+import { cn } from "@/lib/utils"
+
+const HoverCard = HoverCardPrimitive.Root
+
+const HoverCardTrigger = HoverCardPrimitive.Trigger
+
+const HoverCardContent = React.forwardRef<
+ React.ElementRef,
+ React.ComponentPropsWithoutRef
+>(({ className, align = "center", sideOffset = 4, ...props }, ref) => (
+ = ({
+ src,
+ alt,
+ className,
+ key,
+ style,
+ priority = false,
+ placeholder,
+}) => {
+ const [imgSrc, setImgSrc] = useState(src);
+ const [isError, setIsError] = useState(false);
+
+ useEffect(() => {
+ setImgSrc(src);
+ }, [src]);
+
+ const handleImage = () => {
+ const pics = document.querySelectorAll("img");
+ pics.forEach((pic) => {
+ if (pic.complete) {
+ checkImage(pic);
+ } else {
+ pic.addEventListener("load", function () {
+ checkImage(this as HTMLImageElement);
+ });
+ }
+ });
+ };
+
+ const checkImage = (img: HTMLImageElement) => {
+ if (img.naturalHeight > img.naturalWidth) {
+ img.classList.add("portrait");
+ } else if (Math.abs(img.naturalHeight - img.naturalWidth) < 10) {
+ img.classList.add("square");
+ } else {
+ img.classList.add("landscape");
+ }
+ };
+
+ const onLoad = () => {
+ console.log("Image loaded:", src);
+ handleImage();
+ };
+
+ return (
+ & {
- containerClassName?: string
-}) {
- return (
- ,
+ React.ComponentPropsWithoutRef
+>(({ className, containerClassName, ...props }, ref) => (
+
)
-}
+})
+InputOTPSlot.displayName = "InputOTPSlot"
-function InputOTPSeparator({ ...props }: React.ComponentProps<"div">) {
- return (
-
+
- )
-}
+ );
+});
+CarouselContent.displayName = "CarouselContent";
-function CarouselItem({ className, ...props }: React.ComponentProps<"div">) {
- const { orientation } = useCarousel()
+const CarouselItem = React.forwardRef
+
+ );
+});
+CleaveInput.displayName = "CleaveInput";
+
+export { CleaveInput };
diff --git a/components/ui/collapsible.tsx b/components/ui/collapsible.tsx
new file mode 100644
index 0000000..9fa4894
--- /dev/null
+++ b/components/ui/collapsible.tsx
@@ -0,0 +1,11 @@
+"use client"
+
+import * as CollapsiblePrimitive from "@radix-ui/react-collapsible"
+
+const Collapsible = CollapsiblePrimitive.Root
+
+const CollapsibleTrigger = CollapsiblePrimitive.CollapsibleTrigger
+
+const CollapsibleContent = CollapsiblePrimitive.CollapsibleContent
+
+export { Collapsible, CollapsibleTrigger, CollapsibleContent }
diff --git a/components/ui/combobox.tsx b/components/ui/combobox.tsx
new file mode 100644
index 0000000..d77abf6
--- /dev/null
+++ b/components/ui/combobox.tsx
@@ -0,0 +1,181 @@
+"use client";
+
+import * as React from "react";
+import { Check, ChevronsUpDown } from "lucide-react";
+import { cn } from "@/lib/utils";
+import { Button } from "@/components/ui/button";
+import {
+ Command,
+ CommandEmpty,
+ CommandGroup,
+ CommandInput,
+ CommandItem,
+ CommandList,
+} from "@/components/ui/command";
+import {
+ Popover,
+ PopoverContent,
+ PopoverTrigger,
+} from "@/components/ui/popover";
+
+export interface ComboboxOption {
+ value: string;
+ label: string;
+ disabled?: boolean;
+}
+
+interface ComboboxProps {
+ options: ComboboxOption[];
+ value?: string;
+ onValueChange?: (value: string) => void;
+ placeholder?: string;
+ searchPlaceholder?: string;
+ emptyMessage?: string;
+ disabled?: boolean;
+ className?: string;
+ triggerClassName?: string;
+ contentClassName?: string;
+}
+
+export function Combobox({
+ options,
+ value,
+ onValueChange,
+ placeholder = "Select option...",
+ searchPlaceholder = "Search...",
+ emptyMessage = "No results found.",
+ disabled = false,
+ className,
+ triggerClassName,
+ contentClassName,
+}: ComboboxProps) {
+ const [open, setOpen] = React.useState(false);
+
+ const selectedOption = options.find((option) => option.value === value);
+
+ return (
+
+
+
+
+))
+
+CommandInput.displayName = CommandPrimitive.Input.displayName
+
+const CommandList = React.forwardRef<
+ React.ElementRef
+
+
+
+ );
+};
+
+export default ImageBlurry;
diff --git a/components/ui/input-otp.tsx b/components/ui/input-otp.tsx
index 614f70e..27a61a7 100644
--- a/components/ui/input-otp.tsx
+++ b/components/ui/input-otp.tsx
@@ -2,56 +2,47 @@
import * as React from "react"
import { OTPInput, OTPInputContext } from "input-otp"
-import { MinusIcon } from "lucide-react"
+import { Dot } from "lucide-react"
import { cn } from "@/lib/utils"
-function InputOTP({
- className,
- containerClassName,
- ...props
-}: React.ComponentProps
-
+
)}
-
- )
-}
+const InputOTPSeparator = React.forwardRef<
+ React.ElementRef<"div">,
+ React.ComponentPropsWithoutRef<"div">
+>(({ ...props }, ref) => (
+
+
+))
+InputOTPSeparator.displayName = "InputOTPSeparator"
export { InputOTP, InputOTPGroup, InputOTPSlot, InputOTPSeparator }
diff --git a/components/ui/input.tsx b/components/ui/input.tsx
index 03295ca..ec795ed 100644
--- a/components/ui/input.tsx
+++ b/components/ui/input.tsx
@@ -1,21 +1,73 @@
-import * as React from "react"
+import * as React from "react";
+import { cva, type VariantProps } from "class-variance-authority";
+import { cn } from "@/lib/utils";
+import { InputColor } from "@/lib/type";
-import { cn } from "@/lib/utils"
+export const inputVariants = cva(
+ " w-full bg-background rounded py-2 px-3 h-9 border text-sm font-normal border border-solid border-default-200 outline-none focus:outline-none file:border-0 file:bg-transparent file:text-sm file:font-medium read-only:bg-default-200 disabled:cursor-not-allowed disabled:opacity-50 transition-all duration-300 ",
+ {
+ variants: {
+ color: {
+ default:
+ "border-default-200 text-default-500 focus:outline-none focus:border-default dark:focus:border-default-500 disabled:bg-default-200 dark:disabled:bg-default-500 placeholder:text-accent-foreground/50",
+ primary:
+ "border-primary/50 text-primary focus:border-primary disabled:bg-primary/30 disabled:placeholder:text-primary placeholder:text-primary/70",
+ secondary:
+ "border-default-300 text-default-700 focus:border-secondary disabled:bg-secondary/30 disabled:placeholder:text-secondary placeholder:text-default-600",
+ info: "border-info/50 text-info focus:border-info disabled:bg-info/30 disabled:placeholder:text-info placeholder:text-info/70",
+ warning:
+ "border-warning/50 text-warning focus:border-warning disabled:bg-warning/30 disabled:placeholder:text-info placeholder:text-warning/70",
+ success:
+ "border-success/50 text-success focus:border-success disabled:bg-success/30 disabled:placeholder:text-info placeholder:text-success/70",
+ destructive:
+ "border-destructive/50 text-destructive focus:border-destructive disabled:bg-destructive/30 disabled:placeholder:text-destructive placeholder:text-destructive/70",
+ },
-function Input({ className, type, ...props }: React.ComponentProps<"input">) {
- return (
-
- )
+ size: {
+ sm: "h-8 text-xs read-only:leading-8",
+ default: "h-9 text-xs read-only:leading-none",
+ md: "h-10 text-sm read-only:leading-10",
+ lg: "h-12 text-sm read-only:leading-[48px]",
+ },
+ },
+
+ defaultVariants: {
+ color: "default",
+ size: "default",
+ },
+ }
+);
+
+export interface InputProps
+ extends React.InputHTMLAttributes
+
+
+);
+Input.displayName = "Input";
+
+export { Input };
diff --git a/components/ui/label.tsx b/components/ui/label.tsx
index fb5fbc3..d9068cd 100644
--- a/components/ui/label.tsx
+++ b/components/ui/label.tsx
@@ -2,23 +2,25 @@
import * as React from "react"
import * as LabelPrimitive from "@radix-ui/react-label"
+import { cva, type VariantProps } from "class-variance-authority"
import { cn } from "@/lib/utils"
-function Label({
- className,
- ...props
-}: React.ComponentProps
+
+
+ )
+}) => {
+ return (
+
+
+));
+NavigationMenuViewport.displayName = NavigationMenuPrimitive.Viewport.displayName;
+
+const NavigationMenuIndicator = React.forwardRef
+ Image failed to load
+
+ );
+ }
+
+ return (
+
+ {isLoading && (
+
+ )}
+
+
+ );
+};
+
+export default OptimizedImage;
\ No newline at end of file
diff --git a/components/ui/pagination.tsx b/components/ui/pagination.tsx
index 0d18541..d262888 100644
--- a/components/ui/pagination.tsx
+++ b/components/ui/pagination.tsx
@@ -1,127 +1,117 @@
import * as React from "react"
-import {
- ChevronLeftIcon,
- ChevronRightIcon,
- MoreHorizontalIcon,
-} from "lucide-react"
+import { ChevronLeft, ChevronRight, MoreHorizontal } from "lucide-react"
import { cn } from "@/lib/utils"
-import { Button, buttonVariants } from "@/components/ui/button"
+import { ButtonProps, buttonVariants } from "@/components/ui/button"
-function Pagination({ className, ...props }: React.ComponentProps<"nav">) {
- return (
-
- )
-}
+const Pagination = ({ className, ...props }: React.ComponentProps<"nav">) => (
+
+)
+Pagination.displayName = "Pagination"
-function PaginationContent({
- className,
- ...props
-}: React.ComponentProps<"ul">) {
- return (
-
+
+ )}
+
-
-
- )
-}
-
-function TableHeader({ className, ...props }: React.ComponentProps<"thead">) {
- return (
-
+>(({ className, ...props }, ref) => (
+
+
- )
-}
+
+))
+Table.displayName = "Table"
-function TableBody({ className, ...props }: React.ComponentProps<"tbody">) {
- return (
-
- )
-}
+const TableHeader = React.forwardRef<
+ HTMLTableSectionElement,
+ React.HTMLAttributes
+
+
+ );
+ }
+);
+Textarea.displayName = "Textarea";
+
+export { Textarea };
+
diff --git a/components/ui/toast.tsx b/components/ui/toast.tsx
new file mode 100644
index 0000000..521b94b
--- /dev/null
+++ b/components/ui/toast.tsx
@@ -0,0 +1,129 @@
+"use client"
+
+import * as React from "react"
+import * as ToastPrimitives from "@radix-ui/react-toast"
+import { cva, type VariantProps } from "class-variance-authority"
+import { X } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+
+const ToastProvider = ToastPrimitives.Provider
+
+const ToastViewport = React.forwardRef<
+ React.ElementRef