@m5kdev/frontend 0.1.0

package/package.json

@@ -0,0 +1,85 @@
+{
+  "name": "@m5kdev/frontend",
+  "version": "0.1.0",
+  "license": "GPL-3.0-only",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/michalkow/m5kdev.git"
+  },
+  "homepage": "https://github.com/michalkow/m5kdev#readme",
+  "bugs": "https://github.com/michalkow/m5kdev/issues",
+  "dependencies": {
+    "@aws-sdk/s3-request-presigner": "3.891.0",
+    "@internationalized/date": "3.8.2",
+    "@tanstack/react-query": "5.83.0",
+    "@trpc/client": "11.4.3",
+    "@trpc/tanstack-react-query": "11.4.3",
+    "better-auth": "1.4.18",
+    "luxon": "3.7.1",
+    "nuqs": "2.4.3",
+    "posthog-js": "1.258.2",
+    "react": "19.2.1",
+    "react-dom": "19.2.1",
+    "zod": "4.2.1",
+    "@m5kdev/commons": "0.1.0"
+  },
+  "devDependencies": {
+    "@heroui/react": "2.8.8",
+    "@tanstack/react-table": "8.21.2",
+    "@types/react": "19.2.7",
+    "@types/react-dom": "19.2.3",
+    "@types/luxon": "3.7.1",
+    "globals": "16.3.0",
+    "typescript": "5.9.2",
+    "vite": "7.0.4",
+    "@m5kdev/config": "0.0.0",
+    "@m5kdev/backend": "0.1.0"
+  },
+  "imports": {
+    "#types": "./src/types.ts"
+  },
+  "exports": {
+    "./modules/auth/components/*": {
+      "types": "./dist/src/modules/auth/components/*.d.ts",
+      "default": "./dist/src/modules/auth/components/*.js"
+    },
+    "./modules/auth/hooks/*": {
+      "types": "./dist/src/modules/auth/hooks/*.d.ts",
+      "default": "./dist/src/modules/auth/hooks/*.js"
+    },
+    "./modules/billing/components/*": {
+      "types": "./dist/src/modules/billing/components/*.d.ts",
+      "default": "./dist/src/modules/billing/components/*.js"
+    },
+    "./modules/billing/hooks/*": {
+      "types": "./dist/src/modules/billing/hooks/*.d.ts",
+      "default": "./dist/src/modules/billing/hooks/*.js"
+    },
+    "./modules/auth/*": {
+      "types": "./dist/src/modules/auth/*.d.ts",
+      "default": "./dist/src/modules/auth/*.js"
+    },
+    "./modules/charts/hooks/*": {
+      "types": "./dist/src/modules/charts/hooks/*.d.ts",
+      "default": "./dist/src/modules/charts/hooks/*.js"
+    },
+    "./modules/file/hooks/*": {
+      "types": "./dist/src/modules/file/hooks/*.d.ts",
+      "default": "./dist/src/modules/file/hooks/*.js"
+    },
+    "./modules/table/hooks/*": {
+      "types": "./dist/src/modules/table/hooks/*.d.ts",
+      "default": "./dist/src/modules/table/hooks/*.js"
+    },
+    "./utils/*": {
+      "types": "./dist/src/utils/*.d.ts",
+      "default": "./dist/src/utils/*.js"
+    }
+  },
+  "scripts": {
+    "lint": "biome check .",
+    "lint:fix": "biome check . --write",
+    "check-types": "tsc --noEmit",
+    "build": "tsc --build"
+  }
+}

package/src/modules/auth/auth.lib.ts

@@ -0,0 +1,49 @@
+import type { ClientOptions } from "better-auth";
+import {
+  adminClient,
+  inferAdditionalFields,
+  lastLoginMethodClient,
+  organizationClient,
+} from "better-auth/client/plugins";
+import { createAuthClient } from "better-auth/react";
+
+const options = {
+  baseURL: import.meta.env.VITE_SERVER_URL,
+  plugins: [
+    lastLoginMethodClient(),
+    organizationClient({
+      teams: {
+        enabled: true,
+      },
+    }),
+    adminClient(),
+    inferAdditionalFields({
+      user: {
+        onboarding: {
+          type: "number",
+          required: false,
+        },
+        preferences: {
+          type: "string",
+          required: false,
+        },
+        flags: {
+          type: "string",
+          required: false,
+        },
+        stripeCustomerId: {
+          type: "string",
+          required: false,
+        },
+      },
+      teamMembers: {
+        role: {
+          type: "string",
+          required: true,
+        },
+      },
+    }),
+  ],
+} satisfies ClientOptions;
+
+export const authClient = createAuthClient(options);

package/src/modules/auth/components/AuthProvider.tsx

@@ -0,0 +1,105 @@
+import { usePostHog } from "posthog-js/react";
+import { createContext, useCallback, useEffect, useState } from "react";
+import { authClient } from "../auth.lib";
+
+type Session = ReturnType<typeof authClient.useSession>["data"];
+
+function isImpersonatedSession(session: Session | null): boolean {
+  const sessionData = session?.session as { impersonatedBy?: string | null } | undefined;
+  return Boolean(sessionData?.impersonatedBy);
+}
+
+export const authProviderContext = createContext<{
+  isLoading: boolean;
+  data: Session | null;
+  signOut: () => void;
+  registerSession: (onSuccess: () => void) => void;
+}>({
+  isLoading: true,
+  data: null,
+  signOut: () => {},
+  registerSession: () => {},
+});
+
+export function AuthProvider({
+  children,
+  loader,
+  onSession,
+}: {
+  children: React.ReactNode;
+  loader?: React.ReactNode;
+  onSession?: (session: Session | null) => void;
+}) {
+  const posthog = usePostHog();
+  const [isLoading, setIsLoading] = useState(true);
+  const [session, setSession] = useState<Session | null>(null);
+
+  const registerSession = useCallback(
+    (onSuccess?: () => void) => {
+      authClient
+        .getSession()
+        .then(({ data: nextSession }) => {
+          setIsLoading(false);
+          setSession(nextSession);
+          onSession?.(nextSession);
+
+          if (isImpersonatedSession(nextSession)) {
+            posthog.opt_out_capturing();
+            posthog.reset();
+            onSuccess?.();
+            return;
+          }
+
+          posthog.opt_in_capturing();
+
+          if (nextSession?.user) {
+            posthog.identify(nextSession.user.id, {
+              email: nextSession.user.email,
+              name: nextSession.user.name,
+              createdAt: nextSession.user.createdAt,
+              updatedAt: nextSession.user.updatedAt,
+              role: nextSession.user.role,
+              image: nextSession.user.image,
+              preferences: nextSession.user.preferences,
+              onboarding: nextSession.user.onboarding,
+              flags: nextSession.user.flags,
+            });
+          } else {
+            posthog.reset();
+          }
+
+          onSuccess?.();
+        })
+        .catch((error) => {
+          console.error("Failed to get session:", error);
+          setIsLoading(false);
+          setSession(null);
+        });
+    },
+    [onSession, posthog]
+  );
+
+  // biome-ignore lint/correctness/useExhaustiveDependencies(registerSession): registerSession is a callback
+  useEffect(() => {
+    registerSession();
+  }, []);
+
+  const signOut = useCallback(() => {
+    authClient.signOut().then(() => {
+      posthog.reset();
+      posthog.opt_in_capturing();
+      setSession(null);
+    });
+  }, [posthog]);
+
+  // Show loading screen while checking authentication status
+  if (isLoading) {
+    return loader ? loader : "Loading...";
+  }
+
+  return (
+    <authProviderContext.Provider value={{ isLoading, data: session, signOut, registerSession }}>
+      {children}
+    </authProviderContext.Provider>
+  );
+}

package/src/modules/auth/hooks/useAuth.ts

@@ -0,0 +1,20 @@
+import { type AnyUseMutationOptions, useMutation } from "@tanstack/react-query";
+import { authClient } from "../auth.lib";
+
+export function useUpdateUser(options: AnyUseMutationOptions) {
+  return useMutation({
+    mutationFn: (...args: Parameters<typeof authClient.updateUser>) =>
+      authClient.updateUser(...args),
+    ...options,
+  });
+}
+
+export function useUpdateUserPreferences<T extends Record<string, any>>(
+  options: AnyUseMutationOptions
+) {
+  return useMutation({
+    mutationFn: (preferences: T) =>
+      authClient.updateUser({ preferences: JSON.stringify(preferences) as string }),
+    ...options,
+  });
+}

package/src/modules/auth/hooks/useAuthAdmin.ts

@@ -0,0 +1,188 @@
+import {
+  type AnyUseMutationOptions,
+  useMutation,
+  useQuery,
+  useQueryClient,
+} from "@tanstack/react-query";
+import { authClient } from "../auth.lib";
+
+// import type { QueryFilter, QueryInput } from "@m5kdev/commons/modules/schemas/query.schema";
+// import type {
+//   FilterMethod,
+//   FilterMethodName,
+//   FilterMethods,
+// } from "@m5kdev/commons/modules/table/filter.types";
+
+type ListUsersArgs = Parameters<typeof authClient.admin.listUsers>;
+
+/*
+type ListUsersParams = Parameters<typeof authClient.admin.listUsers>;
+type ListUsersArgs = Record<string, unknown>;
+
+type FilterOperator = "eq" | "ne" | "lt" | "lte" | "gt" | "gte";
+
+type BetterAuthFilterParams = {
+  filterField: string;
+  filterValue: string | number | boolean;
+  filterOperator: FilterOperator;
+};
+
+export const authFilterMethods: FilterMethods = {
+  string: [{ value: "equals", label: "Equals", component: "text" }],
+  number: [
+    { value: "equals", label: "Equals", component: "number" },
+    { value: "greater_than", label: "Greater Than", component: "number" },
+    { value: "less_than", label: "Less Than", component: "number" },
+  ],
+  date: [
+    { value: "on", label: "On", component: "date" },
+    { value: "before", label: "Before", component: "date" },
+    { value: "after", label: "After", component: "date" },
+  ],
+  boolean: [{ value: "equals", label: "Equals", component: "radio" }],
+  enum: [{ value: "equals", label: "Equals", component: "select" }],
+};
+
+const baseMethodOperatorMap: Partial<Record<FilterMethodName, FilterOperator>> = {
+  equals: "eq",
+  greater_than: "gt",
+  less_than: "lt",
+  before: "lte",
+  after: "gte",
+  on: "eq",
+};
+
+const getAllowedMethods = (): Record<FilterMethodName, FilterOperator> => {
+  const operatorMap: Partial<Record<FilterMethodName, FilterOperator>> = {};
+  Object.values(authFilterMethods).forEach((methodsForType) => {
+    methodsForType.forEach((method: FilterMethod) => {
+      const operator = baseMethodOperatorMap[method.value];
+      if (operator) {
+        operatorMap[method.value] = operator;
+      }
+    });
+  });
+  return operatorMap as Record<FilterMethodName, FilterOperator>;
+};
+
+const filterMethodToOperatorMap = getAllowedMethods();
+
+const mapFilterToBetterAuth = (filter?: QueryFilter): Partial<BetterAuthFilterParams> => {
+  if (!filter) return {};
+  if (!filter.type) return {};
+  const allowedMethodsForType = authFilterMethods[filter.type]?.map((method) => method.value) ?? [];
+  if (!allowedMethodsForType.includes(filter.method)) return {};
+  const operator = filterMethodToOperatorMap[filter.method];
+  if (!operator) return {};
+  const { columnId, value, type } = filter;
+  if (value === undefined || value === null) return {};
+  if (type === "boolean" && typeof value === "boolean" && operator === "eq") {
+    return { filterField: columnId, filterValue: value, filterOperator: operator };
+  }
+  if (type === "number" && typeof value === "number") {
+    return { filterField: columnId, filterValue: value, filterOperator: operator };
+  }
+  if ((type === "string" || type === "enum" || type === "date") && typeof value === "string") {
+    return { filterField: columnId, filterValue: value, filterOperator: operator };
+  }
+  return {};
+};
+*/
+
+export function useInvalidateListUsers(...args: ListUsersArgs) {
+  const queryClient = useQueryClient();
+  return () => queryClient.invalidateQueries({ queryKey: ["auth-admin-list-users", ...args] });
+}
+
+/*
+export function getListUsers(input: ListUsersArgs): any {
+  const {
+    filters,
+    page,
+    limit,
+    sort,
+    order,
+    ...listUsersParams
+  } = input as ListUsersArgs & QueryInput;
+  const filterParams = mapFilterToBetterAuth(filters?.[0]);
+  const sortDirection: "asc" | "desc" = order === "asc" ? "asc" : "desc";
+  const queryPayload = {
+    ...listUsersParams,
+    limit,
+    sortBy: sort,
+    sortDirection,
+    offset: (page - 1) * limit,
+    ...filterParams,
+  };
+
+  return {
+    queryKey: ["auth-admin-list-users", input],
+    queryFn: async () => {
+      const { data, error } = await authClient.admin.listUsers({
+        query: queryPayload,
+      });
+      if (error) return Promise.reject(error);
+      return data;
+    },
+  };
+}
+*/
+
+export function useListUsers(...args: ListUsersArgs) {
+  return useQuery({
+    queryKey: ["auth-admin-list-users", ...args],
+    queryFn: async ({ queryKey }) => {
+      const listUserArgs = queryKey.slice(1) as ListUsersArgs;
+      const { data, error } = await authClient.admin.listUsers(...listUserArgs);
+      if (error) return Promise.reject(error);
+      return data;
+    },
+  });
+}
+
+export function useRemoveUser(options: AnyUseMutationOptions) {
+  return useMutation({
+    mutationFn: (...args: Parameters<typeof authClient.admin.removeUser>) =>
+      authClient.admin.removeUser(...args),
+    ...options,
+  });
+}
+
+export function useUpdateUser(options: AnyUseMutationOptions) {
+  return useMutation({
+    mutationFn: (...args: Parameters<typeof authClient.admin.updateUser>) =>
+      authClient.admin.updateUser(...args),
+    ...options,
+  });
+}
+
+export function useBanUser(options: AnyUseMutationOptions) {
+  return useMutation({
+    mutationFn: (...args: Parameters<typeof authClient.admin.banUser>) =>
+      authClient.admin.banUser(...args),
+    ...options,
+  });
+}
+
+export function useUnbanUser(options: AnyUseMutationOptions) {
+  return useMutation({
+    mutationFn: (...args: Parameters<typeof authClient.admin.unbanUser>) =>
+      authClient.admin.unbanUser(...args),
+    ...options,
+  });
+}
+
+export function useImpersonateUser(options: AnyUseMutationOptions) {
+  return useMutation({
+    mutationFn: (...args: Parameters<typeof authClient.admin.impersonateUser>) =>
+      authClient.admin.impersonateUser(...args),
+    ...options,
+  });
+}
+
+export function useStopImpersonating(options: AnyUseMutationOptions) {
+  return useMutation({
+    mutationFn: () => authClient.admin.stopImpersonating(),
+    ...options,
+  });
+}

package/src/modules/auth/hooks/useSession.ts

@@ -0,0 +1,6 @@
+import { useContext } from "react";
+import { authProviderContext } from "../components/AuthProvider";
+
+export function useSession() {
+  return useContext(authProviderContext);
+}

package/src/modules/billing/components/BillingProvider.tsx

@@ -0,0 +1,58 @@
+import type { BillingSchema } from "@m5kdev/commons/modules/billing/billing.schema";
+import { useQuery } from "@tanstack/react-query";
+import { createContext } from "react";
+import type { UseBackendTRPC } from "#types";
+
+export const billingProviderContext = createContext<{
+  isLoading: boolean;
+  data: BillingSchema | null;
+}>({
+  isLoading: true,
+  data: null,
+});
+
+export function BillingProvider({
+  useTRPC,
+  children,
+  loader,
+  planPage,
+  skipPlanCheck = false,
+}: {
+  useTRPC: UseBackendTRPC;
+  children: React.ReactNode;
+  loader?: React.ReactNode;
+  planPage: React.ReactNode;
+  skipPlanCheck?: boolean;
+}) {
+  const trpc = useTRPC();
+
+  const { data: activeSubscription, isLoading } = useQuery(
+    trpc.billing.getActiveSubscription.queryOptions(undefined, {
+      staleTime: 1000 * 60 * 60 * 4, // 4 hours
+      enabled: !skipPlanCheck,
+    })
+  );
+
+  if (skipPlanCheck) {
+    return (
+      <billingProviderContext.Provider value={{ isLoading: false, data: null }}>
+        {children}
+      </billingProviderContext.Provider>
+    );
+  }
+
+  // Show loading screen while checking subscription status
+  if (isLoading) {
+    return loader ? loader : "Loading...";
+  }
+
+  if (!activeSubscription) {
+    return planPage;
+  }
+
+  return (
+    <billingProviderContext.Provider value={{ isLoading, data: activeSubscription ?? null }}>
+      {children}
+    </billingProviderContext.Provider>
+  );
+}

package/src/modules/billing/hooks/useSubscription.ts

@@ -0,0 +1,6 @@
+import { useContext } from "react";
+import { billingProviderContext } from "../components/BillingProvider";
+
+export function useSubscription() {
+  return useContext(billingProviderContext);
+}

package/src/modules/file/hooks/useS3DownloadUrl.ts

@@ -0,0 +1,18 @@
+import { useQuery } from "@tanstack/react-query";
+
+export async function fetchS3DownloadUrl(
+  filePath: string,
+  serverUrl = import.meta.env.VITE_SERVER_URL
+) {
+  const res = await fetch(`${serverUrl}/upload/files/${filePath}`);
+  if (!res.ok) throw new Error("Failed to get download URL");
+  return (await res.json()).url as string;
+}
+
+export function useS3DownloadUrl(filePath: string, serverUrl = import.meta.env.VITE_SERVER_URL) {
+  return useQuery<string, Error>({
+    queryKey: ["s3DownloadUrl", filePath],
+    queryFn: () => fetchS3DownloadUrl(filePath, serverUrl),
+    enabled: Boolean(filePath),
+  });
+}

package/src/modules/file/hooks/useS3Upload.ts

@@ -0,0 +1,89 @@
+import { useCallback, useState } from "react";
+
+export type S3UploadStatus = "idle" | "uploading" | "success" | "error";
+
+async function getPresignedUrl(
+  filename: string,
+  filetype: string,
+  serverUrl = ""
+): Promise<string> {
+  const res = await fetch(`${serverUrl}/upload/s3-presigned-url`, {
+    method: "POST",
+    headers: { "Content-Type": "application/json" },
+    body: JSON.stringify({ filename, filetype }),
+  });
+  if (!res.ok) throw new Error("Failed to get presigned URL");
+  const data = (await res.json()) as { url: string };
+  return data.url;
+}
+
+export function useS3Upload(serverUrl = "") {
+  const [progress, setProgress] = useState<number>(0);
+  const [status, setStatus] = useState<S3UploadStatus>("idle");
+  const [error, setError] = useState<string | null>(null);
+  const [uploadedUrl, setUploadedUrl] = useState<string | null>(null);
+
+  const upload = useCallback(async (file: File | Blob, prefix?: string) => {
+    setProgress(0);
+    setStatus("uploading");
+    setError(null);
+    setUploadedUrl(null);
+    try {
+      const originalFilename = file instanceof File ? file.name : `upload-${Date.now()}`;
+      const extension = originalFilename.split(".").pop() || "";
+      const uuid = crypto.randomUUID();
+      const filename = prefix
+        ? `${prefix}/${uuid}.${extension}`
+        : `${uuid}.${extension}`;
+      const filetype = file instanceof File ? file.type : "application/octet-stream";
+      const presignedUrl = await getPresignedUrl(filename, filetype, serverUrl);
+
+      return await new Promise<string>((resolve, reject) => {
+        const xhr = new XMLHttpRequest();
+        xhr.open("PUT", presignedUrl);
+        xhr.setRequestHeader("Content-Type", filetype);
+
+        xhr.upload.onprogress = (event) => {
+          if (event.lengthComputable) {
+            setProgress(Math.round((event.loaded * 100) / event.total));
+          }
+        };
+
+        xhr.onload = () => {
+          if (xhr.status >= 200 && xhr.status < 300) {
+            setProgress(100);
+            setStatus("success");
+            // Remove query params to get the public URL
+            setUploadedUrl(presignedUrl.split("?")[0]);
+            resolve(filename);
+          } else {
+            setStatus("error");
+            setError(`Upload failed with status ${xhr.status}`);
+            reject(new Error(`Upload failed with status ${xhr.status}`));
+          }
+        };
+
+        xhr.onerror = () => {
+          setStatus("error");
+          setError("Network error during upload");
+          reject(new Error("Network error during upload"));
+        };
+
+        xhr.send(file);
+      });
+    } catch (err: any) {
+      setStatus("error");
+      setError(err?.message || "Unknown error");
+      return Promise.reject(err);
+    }
+  }, [serverUrl]);
+
+  const reset = useCallback(() => {
+    setProgress(0);
+    setStatus("idle");
+    setError(null);
+    setUploadedUrl(null);
+  }, []);
+
+  return { upload, progress, status, error, uploadedUrl, reset };
+}