+
+
+
+
+
+
+
+
+ );
+}
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?: () => PromiseLoading editor...
+});
+
+interface EditorProps {
+ data?: string;
+ onChange?: (data: string) => void;
+ config?: any;
+ disabled?: boolean;
+}
+
+export default function Editor({ data = '', onChange, config = {}, disabled = false }: EditorProps) {
+ return (
+
+ {
+ const data = editor.getData();
+ onChange?.(data);
+ }}
+ config={{
+ toolbar: [
+ 'heading', '|',
+ 'bold', 'italic', 'link', '|',
+ 'bulletedList', 'numberedList', '|',
+ 'outdent', 'indent', '|',
+ 'blockQuote', 'insertTable', '|',
+ 'undo', 'redo'
+ ],
+ ...config
+ }}
+ disabled={disabled}
+ />
+
+ );
+}
diff --git a/components/loader.tsx b/components/loader.tsx
new file mode 100644
index 0000000..aeb8123
--- /dev/null
+++ b/components/loader.tsx
@@ -0,0 +1,34 @@
+
+'use client'
+import React from "react";
+import { Loader2 } from "lucide-react";
+import DashCodeLogo from "./dascode-logo";
+import { useMounted } from "@/hooks/use-mounted";
+import Image from "next/image";
+const Loader = () => {
+ const mounted = useMounted()
+ return (
+ mounted ? null :
+
+ );
+};
+
+export default Loader;
+
diff --git a/components/logo.tsx b/components/logo.tsx
new file mode 100644
index 0000000..2b940df
--- /dev/null
+++ b/components/logo.tsx
@@ -0,0 +1,43 @@
+"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/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}
+
+
+
+ {/*
+ );
+ }
+
+ 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..1e04826
--- /dev/null
+++ b/components/partials/sidebar/common/menu-item.tsx
@@ -0,0 +1,156 @@
+
+'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 '@/i18n/routing';
+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..0ec5918
--- /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..d7e0261
--- /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) => (
+ ,
+ React.ComponentPropsWithoutRef
+>(({ className, ...props }, ref) => (
+
+
+type ToastActionElement = React.ReactElement
+
+export {
+ type ToastProps,
+ type ToastActionElement,
+ ToastProvider,
+ ToastViewport,
+ Toast,
+ ToastTitle,
+ ToastDescription,
+ ToastClose,
+ ToastAction,
+}
diff --git a/components/ui/toaster.tsx b/components/ui/toaster.tsx
new file mode 100644
index 0000000..e223385
--- /dev/null
+++ b/components/ui/toaster.tsx
@@ -0,0 +1,35 @@
+"use client"
+
+import {
+ Toast,
+ ToastClose,
+ ToastDescription,
+ ToastProvider,
+ ToastTitle,
+ ToastViewport,
+} from "@/components/ui/toast"
+import { useToast } from "@/components/ui/use-toast"
+
+export function Toaster() {
+ const { toasts } = useToast()
+
+ return (
+
+ {toasts.map(function ({ id, title, description, action, ...props }) {
+ return (
+
+
+ )
+ })}
+
+ )
+}
diff --git a/components/ui/toggle-group.tsx b/components/ui/toggle-group.tsx
new file mode 100644
index 0000000..6cadb52
--- /dev/null
+++ b/components/ui/toggle-group.tsx
@@ -0,0 +1,61 @@
+"use client"
+
+import * as React from "react"
+import * as ToggleGroupPrimitive from "@radix-ui/react-toggle-group"
+import { VariantProps } from "class-variance-authority"
+
+import { cn } from "@/lib/utils"
+import { toggleVariants } from "@/components/ui/toggle"
+
+const ToggleGroupContext = React.createContext<
+ VariantProps
+>({
+ size: "default",
+ variant: "default",
+})
+
+const ToggleGroup = React.forwardRef<
+ React.ElementRef,
+ React.ComponentPropsWithoutRef &
+ VariantProps
+>(({ className, variant, size, children, ...props }, ref) => (
+
+
+ {children}
+
+
+))
+
+ToggleGroup.displayName = ToggleGroupPrimitive.Root.displayName
+
+const ToggleGroupItem = React.forwardRef<
+ React.ElementRef,
+ React.ComponentPropsWithoutRef &
+ VariantProps
{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
+ {title && {title} }
+ {description && (
+ {description}
+ )}
+
+ {action}
+