🎉 feat: initialization

apps/admin/src/components/display.tsx

@@ -0,0 +1,49 @@
+import { formatBytes } from "@workspace/ui/utils/formatting";
+import { unitConversion } from "@workspace/ui/utils/unit-conversions";
+import { useTranslation } from "react-i18next";
+import { useGlobalStore } from "@/stores/global";
+
+type DisplayType = "currency" | "traffic" | "number" | "trafficSpeed";
+
+interface DisplayProps<T> {
+  value?: T;
+  unlimited?: boolean;
+  type?: DisplayType;
+}
+
+export function Display<T extends number | undefined | null>({
+  value = 0,
+  unlimited = false,
+  type = "number",
+}: DisplayProps<T>): string {
+  const { t } = useTranslation("components");
+  const { common } = useGlobalStore();
+  const { currency } = common;
+
+  if (type === "currency") {
+    const formattedValue = `${currency?.currency_symbol ?? ""}${unitConversion("centsToDollars", value as number)?.toFixed(2) ?? "0.00"}`;
+    return formattedValue;
+  }
+
+  if (
+    ["traffic", "trafficSpeed", "number"].includes(type) &&
+    unlimited &&
+    !value
+  ) {
+    return t("unlimited");
+  }
+
+  if (type === "traffic") {
+    return value ? formatBytes(value) : "0";
+  }
+
+  if (type === "trafficSpeed") {
+    return value ? `${formatBytes(value).replace("B", "b")}ps` : "0";
+  }
+
+  if (type === "number") {
+    return value ? value.toString() : "0";
+  }
+
+  return "0";
+}

apps/admin/src/components/ip-link.tsx

@@ -0,0 +1,32 @@
+"use client";
+
+import { ExternalLink } from "lucide-react";
+import type React from "react";
+
+interface IpLinkProps {
+  ip: string;
+  children?: React.ReactNode;
+  className?: string;
+  target?: "_blank" | "_self";
+}
+
+export function IpLink({
+  ip,
+  children,
+  className = "",
+  target = "_blank",
+}: IpLinkProps) {
+  const url = `https://ipinfo.io/${ip}`;
+
+  return (
+    <a
+      className={`inline-flex items-center gap-1 font-mono text-primary transition-colors hover:text-primary/80 hover:underline ${className}`}
+      href={url}
+      rel={target === "_blank" ? "noopener noreferrer" : undefined}
+      target={target}
+    >
+      {children || ip}
+      <ExternalLink className="h-3 w-3" />
+    </a>
+  );
+}

apps/admin/src/components/order-link.tsx

@@ -0,0 +1,19 @@
+import { Link } from "@tanstack/react-router";
+import { Button } from "@workspace/ui/components/button";
+
+interface OrderLinkProps {
+  orderId?: string | number;
+  className?: string;
+}
+
+export function OrderLink({ orderId, className }: OrderLinkProps) {
+  if (!orderId) return <span>--</span>;
+
+  return (
+    <Button asChild className={`p-0 ${className || ""}`} variant="link">
+      <Link search={{ search: orderId }} to="/dashboard/order">
+        {orderId}
+      </Link>
+    </Button>
+  );
+}