@tulip-systems/core 0.4.0 → 0.4.1

package/src/components/navigation/admin-sidebar-header.client.tsx

@@ -15,22 +15,34 @@ import {
 import { cn } from "@/lib/utils/cn";
 import { authClient } from "@/modules/auth/handler/client.client";
 import { useSession } from "@/modules/auth/hooks/use-session";
-import { ChevronsUpDownIcon, LaptopIcon, LogOutIcon, MoonIcon, SunIcon } from "lucide-react";
+import {
+  ChevronsUpDownIcon,
+  LaptopIcon,
+  LogOutIcon,
+  MoonIcon,
+  SettingsIcon,
+  SunIcon,
+  SunMoonIcon,
+} from "lucide-react";
 import { useTheme } from "next-themes";
+import Link from "next/link";
 import { useRouter } from "next/navigation";
-import { SidebarHeader, useSidebar } from "../entry.client";
+import React from "react";
+import { SidebarHeader, useSidebar } from "../ui/sidebar.client";
 
 export function AdminSidebarHeader() {
   const router = useRouter();
   const { theme, setTheme } = useTheme();
 
+  const [open, setOpen] = React.useState(false);
+
   const { setOpenMobile } = useSidebar();
 
   const sessionQuery = useSession();
 
   return (
     <SidebarHeader>
-      <DropdownMenu>
+      <DropdownMenu open={open} onOpenChange={setOpen}>
         <DropdownMenuTrigger asChild>
           <Button variant="outline" className="items-center justify-between py-3.5">
             <div className="flex items-center gap-4">
@@ -51,8 +63,18 @@ export function AdminSidebarHeader() {
         </DropdownMenuTrigger>
 
         <DropdownMenuContent className="w-44">
+          <DropdownMenuItem asChild>
+            <Link href="/admin/settings" onClick={() => setOpenMobile(false)}>
+              <SettingsIcon className="mr-2 h-4 w-4" />
+              <span>Instellingen</span>
+            </Link>
+          </DropdownMenuItem>
+
+          <DropdownMenuSeparator />
+
           <DropdownMenuSub>
             <DropdownMenuSubTrigger>
+              <SunMoonIcon className="mr-2 h-4 w-4" />
               <span>Thema</span>
             </DropdownMenuSubTrigger>
 
@@ -83,13 +105,35 @@ export function AdminSidebarHeader() {
             </DropdownMenuSubContent>
           </DropdownMenuSub>
 
-          <DropdownMenuSeparator />
+          {/* 
+          <DropdownMenuItem
+            onClick={() => {
+              setOpenMobile(false);
+              setOpen(false);
+              authClient.passkey.addPasskey({
+                fetchOptions: {
+                  onSuccess: () => {
+                    toast.success("Passkey succesvol toegevoegd");
+                  },
+                },
+              });
+            }}
+          >
+            <Icons.add className="mr-2 h-4 w-4" />
+            <span>Passkey</span>
+          </DropdownMenuItem> */}
 
           <DropdownMenuItem
             onClick={() => {
               setOpenMobile(false);
+              setOpen(false);
+
               authClient.signOut({
-                fetchOptions: { onSuccess: () => router.replace("/auth/login") },
+                fetchOptions: {
+                  onSuccess: () => {
+                    router.replace("/auth/login");
+                  },
+                },
               });
             }}
           >

package/src/components/ui/accordion.tsx

@@ -38,8 +38,8 @@ function AccordionTrigger({
         )}
         {...props}
       >
+        {/* <ChevronDownIcon className="text-muted-foreground pointer-events-none size-4 shrink-0 translate-y-0.5 transition-transform duration-200" /> */}
         {children}
-        <ChevronDownIcon className="text-muted-foreground pointer-events-none size-4 shrink-0 translate-y-0.5 transition-transform duration-200" />
       </AccordionPrimitive.Trigger>
     </AccordionPrimitive.Header>
   );

package/src/components/ui/date-picker.client.tsx

@@ -0,0 +1,65 @@
+"use client";
+
+import { Button } from "@/components/ui/button";
+import { Calendar } from "@/components/ui/calendar";
+import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
+import { cn } from "@/lib/utils/cn";
+import { Calendar as CalendarIcon } from "lucide-react";
+import * as React from "react";
+
+export type DatePickerProps = Omit<React.ComponentProps<typeof Button>, "onSelect" | "disabled"> & {
+  initialDate?: Date;
+  onSelect: (date: Date | undefined) => void;
+  disabled?: (date: Date) => boolean;
+};
+
+export function DatePicker({
+  initialDate,
+  onSelect,
+  disabled,
+  className,
+  variant = "outline",
+  ...props
+}: DatePickerProps) {
+  const [date, setDate] = React.useState<Date | undefined>(initialDate);
+
+  return (
+    <Popover>
+      <PopoverTrigger asChild>
+        <Button
+          {...props}
+          type="button"
+          variant={variant}
+          className={cn(
+            "w-full justify-start text-left font-normal",
+            !date && "text-muted-foreground",
+            className,
+          )}
+        >
+          <CalendarIcon className="mr-2 h-4 w-4" />
+          {date ? (
+            date.toLocaleDateString("nl-BE", {
+              day: "numeric",
+              month: "long",
+              year: "numeric",
+            })
+          ) : (
+            <span>Kies een datum</span>
+          )}
+        </Button>
+      </PopoverTrigger>
+      <PopoverContent className="w-auto p-0">
+        <Calendar
+          mode="single"
+          selected={date}
+          onSelect={(date) => {
+            setDate(date);
+            onSelect(date);
+          }}
+          disabled={disabled}
+          initialFocus
+        />
+      </PopoverContent>
+    </Popover>
+  );
+}

package/src/components/ui/form.client.tsx

@@ -31,8 +31,11 @@ const FormField = <
   TFieldValues extends FieldValues = FieldValues,
   TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,
 >({
+  visible = true,
   ...props
-}: ControllerProps<TFieldValues, TName>) => {
+}: ControllerProps<TFieldValues, TName> & { visible?: boolean }) => {
+  if (!visible) return null;
+
   return (
     <FormFieldContext.Provider value={{ name: props.name }}>
       <Controller {...props} />

package/src/components/ui/input-recipient.tsx

@@ -0,0 +1,286 @@
+"use client";
+
+import { cn } from "@/lib/utils/cn";
+import { X } from "lucide-react";
+import * as React from "react";
+import { toast } from "sonner";
+
+import { Button } from "./button";
+import { Popover, PopoverContent, PopoverTrigger } from "./popover";
+
+export type Contact = {
+  id: string;
+  email: string;
+  name: string;
+};
+
+interface RecipientInputProps {
+  contacts: Contact[];
+  value: string[];
+  onChange: (value: string[]) => void;
+  placeholder?: string;
+  disabled?: boolean;
+}
+
+// Simpele email validatie
+const isValidEmail = (email: string): boolean => {
+  const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+  return emailRegex.test(email);
+};
+
+export function RecipientInput({
+  contacts,
+  value,
+  onChange,
+  placeholder = "Kies een ontvanger...",
+  disabled = false,
+}: RecipientInputProps) {
+  const [open, setOpen] = React.useState(false);
+  const [inputValue, setInputValue] = React.useState("");
+  const [highlightedIndex, setHighlightedIndex] = React.useState(0);
+  const inputRef = React.useRef<HTMLInputElement>(null);
+  const containerRef = React.useRef<HTMLDivElement>(null);
+  const itemRefs = React.useRef<(HTMLButtonElement | null)[]>([]);
+
+  const selectedContacts = React.useMemo(() => {
+    return value
+      .map((email) => {
+        const contact = contacts.find((c) => c.email === email);
+        return contact || { id: email, email, name: email };
+      })
+      .filter(Boolean) as Contact[];
+  }, [value, contacts]);
+
+  const availableContacts = React.useMemo(() => {
+    return contacts.filter((contact) => !value.includes(contact.email));
+  }, [contacts, value]);
+
+  const filteredContacts = React.useMemo(() => {
+    if (!inputValue || !inputValue.trim()) return availableContacts;
+    const search = inputValue.toLowerCase().trim();
+    return availableContacts.filter(
+      (contact) =>
+        contact.email.toLowerCase().includes(search) || contact.name.toLowerCase().includes(search),
+    );
+  }, [availableContacts, inputValue]);
+
+  React.useEffect(() => {
+    setHighlightedIndex(0);
+  }, [filteredContacts]);
+
+  React.useEffect(() => {
+    if (open && highlightedIndex >= 0 && itemRefs.current[highlightedIndex]) {
+      itemRefs.current[highlightedIndex]?.scrollIntoView({
+        block: "nearest",
+        behavior: "smooth",
+      });
+    }
+  }, [highlightedIndex, open]);
+
+  React.useEffect(() => {
+    const handleClickOutside = (event: MouseEvent) => {
+      if (containerRef.current && !containerRef.current.contains(event.target as Node)) {
+        setOpen(false);
+      }
+    };
+
+    if (open) {
+      document.addEventListener("mousedown", handleClickOutside);
+      return () => {
+        document.removeEventListener("mousedown", handleClickOutside);
+      };
+    }
+  }, [open]);
+
+  const handleSelect = (contact: Contact) => {
+    onChange([...value, contact.email]);
+    setInputValue("");
+    setOpen(false);
+    setHighlightedIndex(0);
+    inputRef.current?.focus();
+  };
+
+  const handleAddManualEmail = () => {
+    const trimmedEmail = inputValue.trim();
+
+    if (!trimmedEmail) return;
+
+    if (!isValidEmail(trimmedEmail)) {
+      toast.error("Ongeldig email adres");
+      return;
+    }
+
+    if (value.includes(trimmedEmail)) {
+      toast.error("Email is al toegevoegd");
+      setInputValue("");
+      return;
+    }
+
+    onChange([...value, trimmedEmail]);
+    setInputValue("");
+    setOpen(false);
+    setHighlightedIndex(0);
+    inputRef.current?.focus();
+  };
+
+  const handleRemove = (email: string) => {
+    onChange(value.filter((v) => v !== email));
+    inputRef.current?.focus();
+  };
+
+  const handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
+    if (e.key === "ArrowDown") {
+      e.preventDefault();
+      if (!open) {
+        setOpen(true);
+      } else {
+        setHighlightedIndex((prev) => (prev < filteredContacts.length - 1 ? prev + 1 : prev));
+      }
+    } else if (e.key === "ArrowUp") {
+      e.preventDefault();
+      if (open) {
+        setHighlightedIndex((prev) => (prev > 0 ? prev - 1 : prev));
+      }
+    } else if (e.key === "Enter") {
+      e.preventDefault();
+      if (open && filteredContacts[highlightedIndex]) {
+        // Selecteer contact uit lijst
+        handleSelect(filteredContacts[highlightedIndex]);
+      } else if (inputValue.trim()) {
+        // Voeg handmatig ingevoerde email toe
+        handleAddManualEmail();
+      }
+    } else if (e.key === "Escape") {
+      e.preventDefault();
+      setOpen(false);
+    } else if (e.key === "Backspace" && !inputValue && value.length > 0) {
+      e.preventDefault();
+      const lastEmail = value[value.length - 1];
+      if (lastEmail) {
+        handleRemove(lastEmail);
+      }
+    }
+  };
+
+  return (
+    <Popover open={open}>
+      <PopoverTrigger asChild>
+        <div
+          ref={containerRef}
+          className={cn(
+            "border-input bg-background ring-offset-background flex min-h-0 w-full flex-wrap items-center gap-2 rounded-lg border px-3 py-2 text-base transition-colors md:text-sm",
+            "focus-within:border-ring focus-within:ring-ring/50 focus-within:ring-[3px]",
+            disabled && "cursor-not-allowed opacity-50",
+          )}
+          onClick={() => {
+            if (!disabled) {
+              inputRef.current?.focus();
+            }
+          }}
+        >
+          {selectedContacts.map((contact) => (
+            <div
+              key={contact.id}
+              className="border-border bg-accent/50 flex items-center gap-2 rounded-full border px-2 py-0.5"
+            >
+              <span className="text-xs">{contact.email}</span>
+              <Button
+                type="button"
+                variant="ghost"
+                size="icon"
+                className="hover:bg-destructive/20 h-4 w-4 rounded-full p-0"
+                onClick={(e) => {
+                  e.stopPropagation();
+                  handleRemove(contact.email);
+                }}
+                disabled={disabled}
+              >
+                <X className="h-3 w-3" />
+                <span className="sr-only">Verwijder {contact.email}</span>
+              </Button>
+            </div>
+          ))}
+          <input
+            ref={inputRef}
+            type="text"
+            value={inputValue}
+            onChange={(e) => {
+              setInputValue(e.target.value);
+              if (e.target.value) {
+                setOpen(true);
+              }
+            }}
+            onKeyDown={handleKeyDown}
+            placeholder={value.length === 0 ? placeholder : ""}
+            disabled={disabled}
+            className="placeholder:text-muted-foreground min-w-[120px] flex-1 bg-transparent outline-none placeholder:text-sm disabled:cursor-not-allowed"
+          />
+        </div>
+      </PopoverTrigger>
+      <PopoverContent
+        className="w-full p-0"
+        align="start"
+        onOpenAutoFocus={(e) => e.preventDefault()}
+        style={{
+          width: containerRef.current?.offsetWidth || "auto",
+        }}
+      >
+        <div className="max-h-[300px] overflow-y-auto p-1">
+          {filteredContacts.length === 0 && inputValue ? (
+            <div className="text-muted-foreground px-2 py-2">
+              <div className="mb-2 text-xs">Geen contacten gevonden.</div>
+              {isValidEmail(inputValue.trim()) && (
+                <button
+                  type="button"
+                  onClick={handleAddManualEmail}
+                  className="hover:bg-accent w-full rounded-sm px-2 py-1.5 text-left text-xs transition-colors"
+                >
+                  <span className="font-medium">Voeg toe: </span>
+                  <span className="text-muted-foreground">{inputValue.trim()}</span>
+                </button>
+              )}
+            </div>
+          ) : filteredContacts.length === 0 ? (
+            <div className="text-muted-foreground py-6 text-center text-xs">
+              Geen contacten gevonden.
+            </div>
+          ) : (
+            <>
+              {filteredContacts.map((contact, index) => (
+                <button
+                  key={contact.id}
+                  ref={(el) => {
+                    itemRefs.current[index] = el;
+                  }}
+                  type="button"
+                  onClick={() => handleSelect(contact)}
+                  className={cn(
+                    "outline-hidden hover:bg-accent flex w-full items-center gap-2 rounded-sm px-2 py-1.5 text-xs transition-colors",
+                    highlightedIndex === index && "bg-accent",
+                  )}
+                >
+                  <div className="flex flex-col items-start">
+                    <span className="text-xs font-medium">{contact.name}</span>
+                    <span className="text-muted-foreground text-xs">{contact.email}</span>
+                  </div>
+                </button>
+              ))}
+              {inputValue && isValidEmail(inputValue.trim()) && (
+                <div className="mt-1 border-t pt-1">
+                  <button
+                    type="button"
+                    onClick={handleAddManualEmail}
+                    className="hover:bg-accent w-full rounded-sm px-2 py-1.5 text-left text-xs transition-colors"
+                  >
+                    <span className="font-medium">Voeg toe: </span>
+                    <span className="text-muted-foreground">{inputValue.trim()}</span>
+                  </button>
+                </div>
+              )}
+            </>
+          )}
+        </div>
+      </PopoverContent>
+    </Popover>
+  );
+}

package/src/entry.ts

@@ -44,6 +44,12 @@ export const entry = {
   "inline-edit": "./src/modules/inline-edit/entry.ts",
   "inline-edit/client": "./src/modules/inline-edit/entry.client.ts",
   "inline-edit/server": "./src/modules/inline-edit/entry.server.ts",
+  /**
+   * Router Module
+   */
+  router: "./src/modules/router/entry.ts",
+  "router/client": "./src/modules/router/entry.client.ts",
+  "router/server": "./src/modules/router/entry.server.ts",
   /**
    * Uploads Module
    */

package/src/lib/utils/format.ts

@@ -1,3 +1,5 @@
+import { detectBrowser, detectDevice, detectOS } from "./user-agent";
+
 /**
  * Format date to locale string
  * @param date: string | null | undefined
@@ -94,6 +96,11 @@ export function formatPhone(phone: string | null | undefined): string {
   return phone.toString().replace(/(\d{2})(\d{3})(\d{2})(\d{2})(\d{2})/, "$1 $2 $3 $4 $5");
 }
 
+/**
+ * Format asset size
+ * @param size number | null | undefined
+ * @returns Size in format: 1.00 MB
+ */
 export function formatAssetSize(size: number | null | undefined) {
   if (size == null) return "";
 
@@ -102,3 +109,16 @@ export function formatAssetSize(size: number | null | undefined) {
   const newSize = +(size / 1024 ** index).toFixed(2);
   return `${newSize} ${units[index]}`;
 }
+
+/**
+ * Format user agent to locale string
+ * @param ua: string
+ * @returns User agent in format: Chrome · Desktop
+ */
+export function formatUserAgent(ua: string): string {
+  const browser = detectBrowser(ua);
+  const os = detectOS(ua);
+  const device = detectDevice(ua);
+
+  return `${browser.name} ${browser.version ?? ""} · ${device} · ${os.name} ${os.version ?? ""}`;
+}

package/src/lib/utils/manifest.ts

@@ -1,8 +1,7 @@
-import { type TDatabaseSchema } from "@/modules/config/db/types";
-import { type TulipConfig } from "@/modules/config/lib/config.server";
+import { type TulipConfig } from "@/modules/config/lib/config";
 import { MetadataRoute } from "next";
 
-export function generateManifest<TSchema extends TDatabaseSchema>(config: TulipConfig<TSchema>) {
+export function generateManifest(config: TulipConfig) {
   return (): MetadataRoute.Manifest => ({
     name: config.general.name,
     short_name: config.general.shortName,

package/src/lib/utils/user-agent.ts

@@ -0,0 +1,63 @@
+export function detectBrowser(ua: string): { name: string; version?: string } {
+  // Edge
+  let m = ua.match(/Edg\/(\d+)/);
+  if (m) return { name: "Edge", version: m[1] };
+
+  // Chrome (not Edge/Opera)
+  m = ua.match(/Chrome\/(\d+)/);
+  if (m && !/Edg\//.test(ua) && !/OPR\//.test(ua)) {
+    return { name: "Chrome", version: m[1] };
+  }
+
+  // Firefox
+  m = ua.match(/Firefox\/(\d+)/);
+  if (m) return { name: "Firefox", version: m[1] };
+
+  // Safari
+  if (/Safari\/\d+/.test(ua) && /Version\/(\d+)/.test(ua)) {
+    m = ua.match(/Version\/(\d+)/);
+    if (m) return { name: "Safari", version: m[1] };
+  }
+
+  return { name: "Unknown browser" };
+}
+
+export function detectOS(ua: string): { name: string; version?: string } {
+  // macOS
+  let m = ua.match(/Mac OS X ([\d_]+)/);
+  if (m) {
+    return { name: "macOS", version: m[1]?.replace(/_/g, ".") };
+  }
+
+  // Windows
+  m = ua.match(/Windows NT ([\d.]+)/);
+  if (m) return { name: "Windows", version: m[1] };
+
+  // iOS
+  m = ua.match(/iPhone OS ([\d_]+)/) || ua.match(/CPU (?:iPhone )?OS ([\d_]+)/);
+  if (m) {
+    return { name: "iOS", version: m[1]?.replace(/_/g, ".") };
+  }
+
+  // Android
+  m = ua.match(/Android ([\d.]+)/);
+  if (m) return { name: "Android", version: m[1] };
+
+  if (/Linux/.test(ua)) return { name: "Linux" };
+
+  return { name: "Unknown OS" };
+}
+
+export function detectDevice(ua: string): "Desktop" | "Mobile" | "Tablet" {
+  const s = ua.toLowerCase();
+
+  if (s.includes("ipad") || s.includes("tablet")) return "Tablet";
+  if (
+    s.includes("mobi") ||
+    s.includes("iphone") ||
+    (s.includes("android") && !s.includes("tablet"))
+  ) {
+    return "Mobile";
+  }
+  return "Desktop";
+}