customer_dashboard: add a prop "theme" to Customer entity

* [oko_pg_interface] add edit_customers for adding theme col

* [backend] update customer's api of edit,create to store theme

* [customer_dashboard] add theme button and some guardrail for blocking empty url

* [common] add CustomerTheme type

* [backed] add attached_api

* [backend] add attached_api to server routes

* [ui] add 'system' value in Theme type

* [attached] get theme by using api

* [embed] add useSetThemeInCallback and apply it

* [backend] remove console

* update yarn lock

* [backed] reflect code review

* [attached] remove setTheme

- Since the callback is executed after the attached function is already running on the host,
there is no need to call setTheme here.

---------

Co-authored-by: Elden Park <eldeniyenden@gmail.com>

Author: blacktoast

apps/customer_dashboard/src/components/account_info/account_info.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { FC } from "react";
+import { type FC } from "react";
 import { ExternalLinkOutlinedIcon } from "@oko-wallet/oko-common-ui/icons/external_link_outlined";
 import { Typography } from "@oko-wallet/oko-common-ui/typography";
 import { Spacing } from "@oko-wallet/oko-common-ui/spacing";

apps/customer_dashboard/src/components/api_key_list/api_key_item_row.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { FC, useState } from "react";
+import { type FC, useState } from "react";
 import { Badge } from "@oko-wallet/oko-common-ui/badge";
 import { CopyOutlinedIcon } from "@oko-wallet/oko-common-ui/icons/copy_outlined";
 import { EyeIcon } from "@oko-wallet/oko-common-ui/icons/eye";

apps/customer_dashboard/src/components/authorized/authorized.tsx

@@ -1,12 +1,12 @@
 "use client";
 
-import { PropsWithChildren, useEffect, useState } from "react";
+import { type PropsWithChildren, useEffect, useState, type FC } from "react";
 import { useRouter } from "next/navigation";
 
 import { paths } from "@oko-wallet-ct-dashboard/paths";
 import { useAppState } from "@oko-wallet-ct-dashboard/state";
 
-export const Authorized: React.FC<PropsWithChildren> = ({ children }) => {
+export const Authorized: FC<PropsWithChildren> = ({ children }) => {
   const router = useRouter();
   const user = useAppState((state) => state.user);
   const token = useAppState((state) => state.token);

apps/customer_dashboard/src/components/dashboard_body/dashboard_body.tsx

@@ -1,4 +1,4 @@
-import { PropsWithChildren, FC } from "react";
+import type { PropsWithChildren, FC } from "react";
 import cn from "classnames";
 
 import styles from "./dashboard_body.module.scss";

apps/customer_dashboard/src/components/edit_info_form/edit_info_form.module.scss

@@ -124,3 +124,61 @@
   width: 100%;
   margin-top: 8px;
 }
+
+.themeSection {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  width: 100%;
+}
+
+.themeHeader {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+
+.themeLabel {
+  color: var(--text-secondary);
+  font-size: 14px;
+  font-weight: 600;
+  line-height: 20px;
+}
+
+.themeDescription {
+  color: var(--text-secondary);
+  font-size: 13px;
+  font-weight: 500;
+  line-height: 18px;
+}
+
+.themeOptions {
+  display: flex;
+  gap: 8px;
+  flex-wrap: wrap;
+}
+
+.themeOptionButton {
+  padding: 8px 12px;
+  border-radius: 10px;
+  border: 1px solid var(--border-primary);
+  background: var(--bg-primary);
+  color: var(--text-primary);
+
+  cursor: pointer;
+  transition: all 0.2s ease;
+
+  &:hover {
+    border-color: #d0d5dd;
+  }
+
+  &:disabled {
+    cursor: not-allowed;
+    opacity: 0.6;
+  }
+}
+
+.themeOptionButtonActive {
+  background: var(--bg-brand-solid);
+  color: var(--text-primary-on-brand);
+}

apps/customer_dashboard/src/components/edit_info_form/edit_info_form.tsx

@@ -1,19 +1,29 @@
 "use client";
 
-import React, { useRef, useState } from "react";
+import {
+  type ChangeEvent,
+  useRef,
+  useState,
+  type DragEvent,
+  type FC,
+} from "react";
 import { useRouter } from "next/navigation";
 import { useQueryClient } from "@tanstack/react-query";
 import { Input } from "@oko-wallet/oko-common-ui/input";
 import { Button } from "@oko-wallet/oko-common-ui/button";
 import { PlusIcon } from "@oko-wallet/oko-common-ui/icons/plus";
 import { XCloseIcon } from "@oko-wallet/oko-common-ui/icons/x_close";
+import type { CustomerTheme } from "@oko-wallet/oko-types/customers";
+import { Typography } from "@oko-wallet/oko-common-ui/typography";
 
 import { useCustomerInfo } from "@oko-wallet-ct-dashboard/hooks/use_customer_info";
 import { useAppState } from "@oko-wallet-ct-dashboard/state";
 import { requestUpdateCustomerInfo } from "@oko-wallet-ct-dashboard/fetch/customers";
 import styles from "./edit_info_form.module.scss";
 
-export const EditInfoForm = () => {
+const THEME_OPTIONS: CustomerTheme[] = ["light", "dark", "system"];
+
+export const EditInfoForm: FC = () => {
   const router = useRouter();
   const queryClient = useQueryClient();
   const customer = useCustomerInfo();
@@ -23,6 +33,10 @@ export const EditInfoForm = () => {
 
   const [label, setLabel] = useState(customer.data?.label ?? "");
   const [url, setUrl] = useState(customer.data?.url ?? "");
+  const [theme, setTheme] = useState<CustomerTheme>(
+    customer.data?.theme ?? "system",
+  );
+
   const [logoFile, setLogoFile] = useState<File | null>(null);
   const [previewUrl, setPreviewUrl] = useState<string | null>(
     customer.data?.logo_url ?? null,
@@ -95,7 +109,7 @@ export const EditInfoForm = () => {
     }
   };
 
-  const handleFileSelect = (e: React.ChangeEvent<HTMLInputElement>) => {
+  const handleFileSelect = (e: ChangeEvent<HTMLInputElement>) => {
     const file = e.target.files?.[0];
     if (file) {
       handleLogoUpload(file);
@@ -107,29 +121,29 @@ export const EditInfoForm = () => {
   };
 
   // Drag and drop handlers
-  const handleDragEnter = (e: React.DragEvent) => {
+  const handleDragEnter = (e: DragEvent) => {
     e.preventDefault();
     e.stopPropagation();
     setIsDragging(true);
   };
 
-  const handleDragLeave = (e: React.DragEvent) => {
+  const handleDragLeave = (e: DragEvent) => {
     e.preventDefault();
     e.stopPropagation();
     setIsDragging(false);
   };
 
-  const handleDragOver = (e: React.DragEvent) => {
+  const handleDragOver = (e: DragEvent) => {
     e.preventDefault();
     e.stopPropagation();
   };
 
-  const handleDrop = (e: React.DragEvent) => {
+  const handleDrop = (e: DragEvent) => {
     e.preventDefault();
     e.stopPropagation();
     setIsDragging(false);
 
-    const file = e.dataTransfer.files?.[0];
+    const file = e.dataTransfer?.files?.[0];
     if (file) {
       handleLogoUpload(file);
     }
@@ -147,12 +161,23 @@ export const EditInfoForm = () => {
     const hasLabelChange = label !== customer.data?.label;
     const hasUrlChange = url !== (customer.data?.url ?? "");
     const hasLogoChange = logoFile !== null || shouldDeleteLogo;
+    const hasThemeChange = theme !== customer.data?.theme;
 
-    if (!hasLabelChange && !hasUrlChange && !hasLogoChange) {
+    if (!hasLabelChange && !hasUrlChange && !hasLogoChange && !hasThemeChange) {
       setError("No changes to save.");
       return;
     }
 
+    if (!url || url.trim() === "") {
+      setError("App URL is required.");
+      return;
+    }
+
+    if (hasUrlChange && !validateUrl(url)) {
+      setError("App URL format is invalid.");
+      return;
+    }
+
     setIsLoading(true);
     setError(null);
 
@@ -162,6 +187,7 @@ export const EditInfoForm = () => {
         label: hasLabelChange ? label : undefined,
         url: hasUrlChange ? url : undefined,
         logoFile: logoFile,
+        theme: hasThemeChange ? theme : undefined,
         deleteLogo: shouldDeleteLogo,
       });
 
@@ -189,7 +215,8 @@ export const EditInfoForm = () => {
     label !== customer.data?.label ||
     url !== (customer.data?.url ?? "") ||
     logoFile !== null ||
-    shouldDeleteLogo;
+    shouldDeleteLogo ||
+    theme !== customer.data?.theme;
 
   return (
     <form onSubmit={handleSubmit} className={styles.form}>
@@ -213,6 +240,46 @@ export const EditInfoForm = () => {
         className={styles.input}
       />
 
+      <div className={styles.themeSection}>
+        <div className={styles.themeHeader}>
+          <span className={styles.themeLabel}>Oko Wallet Theme</span>
+          <span className={styles.themeDescription}>
+            Choose the default theme for the Oko wallet.
+          </span>
+        </div>
+
+        <div className={styles.themeOptions}>
+          {THEME_OPTIONS.map((option) => {
+            const label =
+              option === "system"
+                ? "System"
+                : option === "light"
+                  ? "Light"
+                  : "Dark";
+
+            return (
+              <button
+                key={option}
+                type="button"
+                className={`${styles.themeOptionButton} ${
+                  theme === option ? styles.themeOptionButtonActive : ""
+                }`}
+                onClick={() => setTheme(option)}
+                disabled={isLoading}
+              >
+                <Typography
+                  size="sm"
+                  weight="medium"
+                  color={theme === option ? "primary-on-brand" : "primary"}
+                >
+                  {label}
+                </Typography>
+              </button>
+            );
+          })}
+        </div>
+      </div>
+
       {/* Logo Upload with drag & drop */}
       <div className={styles.appLogoUploadWrapper}>
         <label className={styles.appLogoUploadLabel}>
@@ -289,3 +356,12 @@ export const EditInfoForm = () => {
     </form>
   );
 };
+
+function validateUrl(url: string): boolean {
+  try {
+    const urlObj = new URL(url);
+    return urlObj.protocol === "https:" || urlObj.protocol === "http:";
+  } catch {
+    return false;
+  }
+}

apps/customer_dashboard/src/components/expiry_timer/expiry_timer.tsx

@@ -1,6 +1,12 @@
 "use client";
 
-import { useEffect, useState, ReactNode, FC, useCallback } from "react";
+import {
+  useEffect,
+  useState,
+  type ReactNode,
+  type FC,
+  useCallback,
+} from "react";
 
 type ExpiryTimerProps = {
   duration?: number;

apps/customer_dashboard/src/components/external_link_item/external_link_item.tsx

@@ -1,4 +1,4 @@
-import { FC } from "react";
+import { type FC } from "react";
 import Link from "next/link";
 import { ExternalLinkOutlinedIcon } from "@oko-wallet/oko-common-ui/icons/external_link_outlined";
 import { Typography } from "@oko-wallet/oko-common-ui/typography";

apps/customer_dashboard/src/components/home_banner/home_banner.tsx

@@ -1,4 +1,4 @@
-import { FC } from "react";
+import { type FC } from "react";
 import Link from "next/link";
 import { ArrowRightOutlinedIcon } from "@oko-wallet/oko-common-ui/icons/arrow_right_outlined";
 import { Typography } from "@oko-wallet/oko-common-ui/typography";

apps/customer_dashboard/src/components/providers/providers.tsx

@@ -6,7 +6,7 @@ import {
   QueryClient,
   QueryClientProvider,
 } from "@tanstack/react-query";
-import React, { PropsWithChildren } from "react";
+import { type FC, type PropsWithChildren } from "react";
 
 function makeTanStackQueryClient() {
   // Create a client
@@ -16,7 +16,7 @@ function makeTanStackQueryClient() {
 
 const queryClient = makeTanStackQueryClient();
 
-export const Providers: React.FC<PropsWithChildren> = ({ children }) => {
+export const Providers: FC<PropsWithChildren> = ({ children }) => {
   return (
     <QueryClientProvider client={queryClient}>
       <HydrationBoundary state={dehydrate(queryClient)}>