feat: Add clickable dashboard cards and theme color selector

- Dashboard cards now link to list page when clicked (except + button)
- Added theme color selector in Settings (orange, teal, red, green, blue)
- Theme persists in localStorage

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

client/public/locales/en/common.json

@@ -348,6 +348,14 @@
             "round_prices": {
                 "label": "Round prices",
                 "tooltip": "Round prices to the nearest whole number."
+            },
+            "theme_color": {
+                "label": "Theme Color",
+                "orange": "Orange",
+                "teal": "Teal",
+                "red": "Red",
+                "green": "Green",
+                "blue": "Blue"
             }
         },
         "backup": {

client/src/contexts/color-mode/index.tsx

@@ -1,24 +1,43 @@
 import { ConfigProvider, theme } from "antd";
 import { createContext, PropsWithChildren, useEffect, useState } from "react";
 
+// Theme color options
+export const THEME_COLORS = {
+  orange: "#f97316",
+  teal: "#0891b2",
+  red: "#dc2626",
+  green: "#16a34a",
+  blue: "#2563eb",
+} as const;
+
+export type ThemeColorKey = keyof typeof THEME_COLORS;
+
 type ColorModeContextType = {
   mode: string;
   setMode: (mode: string) => void;
+  themeColor: ThemeColorKey;
+  setThemeColor: (color: ThemeColorKey) => void;
 };
 
 export const ColorModeContext = createContext<ColorModeContextType>({} as ColorModeContextType);
 
 export const ColorModeContextProvider: React.FC<PropsWithChildren> = ({ children }) => {
   const colorModeFromLocalStorage = localStorage.getItem("colorMode");
+  const themeColorFromLocalStorage = localStorage.getItem("themeColor") as ThemeColorKey | null;
   const isSystemPreferenceDark = window?.matchMedia("(prefers-color-scheme: dark)").matches;
 
   const systemPreference = isSystemPreferenceDark ? "dark" : "light";
   const [mode, setMode] = useState(colorModeFromLocalStorage || systemPreference);
+  const [themeColor, setThemeColorState] = useState<ThemeColorKey>(themeColorFromLocalStorage || "teal");
 
   useEffect(() => {
     window.localStorage.setItem("colorMode", mode);
   }, [mode]);
 
+  useEffect(() => {
+    window.localStorage.setItem("themeColor", themeColor);
+  }, [themeColor]);
+
   const setColorMode = () => {
     if (mode === "light") {
       setMode("dark");
@@ -27,22 +46,28 @@ export const ColorModeContextProvider: React.FC<PropsWithChildren> = ({ children
     }
   };
 
+  const setThemeColor = (color: ThemeColorKey) => {
+    setThemeColorState(color);
+  };
+
   const { darkAlgorithm, defaultAlgorithm } = theme;
+  const primaryColor = THEME_COLORS[themeColor];
 
   return (
     <ColorModeContext.Provider
       value={{
         setMode: setColorMode,
         mode,
+        themeColor,
+        setThemeColor,
       }}
     >
       <ConfigProvider
-        // you can change the theme colors here. example: ...RefineThemes.Magenta,
         theme={{
           algorithm: mode === "light" ? defaultAlgorithm : darkAlgorithm,
           token: {
-            colorPrimary: "#0891b2",
-            colorInfo: "#0891b2",
+            colorPrimary: primaryColor,
+            colorInfo: primaryColor,
           },
         }}
       >

client/src/pages/home/index.tsx

@@ -38,16 +38,21 @@ export const Home: React.FC<IResourceComponentsProps> = () => {
     <Col xs={12} md={6}>
       <Card
         loading={props.loading}
+        hoverable
+        style={{ cursor: "pointer" }}
+        styles={{ body: { padding: 0 } }}
         actions={[
-          <Link to={`/${props.resource}`}>
+          <Link to={`/${props.resource}`} onClick={(e) => e.stopPropagation()}>
             <UnorderedListOutlined />
           </Link>,
-          <Link to={`/${props.resource}/create`}>
+          <Link to={`/${props.resource}/create`} onClick={(e) => e.stopPropagation()}>
             <PlusOutlined />
           </Link>,
         ]}
       >
+        <Link to={`/${props.resource}`} style={{ display: "block", padding: "24px", color: "inherit" }}>
           <Statistic title={t(`${props.resource}.${props.resource}`)} value={props.value} prefix={props.icon} />
+        </Link>
       </Card>
     </Col>
   );

client/src/pages/settings/generalSettings.tsx

@@ -2,9 +2,10 @@ import { DownloadOutlined, UploadOutlined } from "@ant-design/icons";
 import { useTranslate } from "@refinedev/core";
 import { Button, Checkbox, Divider, Form, Input, message, Popconfirm, Space, Upload } from "antd";
 import type { UploadFile } from "antd";
-import { useEffect, useState } from "react";
+import { useContext, useEffect, useState } from "react";
 import { getAPIURL } from "../../utils/url";
 import { useGetSettings, useSetSetting } from "../../utils/querySettings";
+import { ColorModeContext, THEME_COLORS, ThemeColorKey } from "../../contexts/color-mode";
 
 export function GeneralSettings() {
   const settings = useGetSettings();
@@ -14,6 +15,7 @@ export function GeneralSettings() {
   const [form] = Form.useForm();
   const [messageApi, contextHolder] = message.useMessage();
   const t = useTranslate();
+  const { themeColor, setThemeColor } = useContext(ColorModeContext);
 
   // Set initial form values
   useEffect(() => {
@@ -107,6 +109,25 @@ export function GeneralSettings() {
           <Checkbox />
         </Form.Item>
 
+        <Form.Item label={t("settings.general.theme_color.label")}>
+          <Space>
+            {(Object.keys(THEME_COLORS) as ThemeColorKey[]).map((colorKey) => (
+              <Button
+                key={colorKey}
+                type={themeColor === colorKey ? "primary" : "default"}
+                style={{
+                  backgroundColor: themeColor === colorKey ? THEME_COLORS[colorKey] : undefined,
+                  borderColor: THEME_COLORS[colorKey],
+                  minWidth: 80,
+                }}
+                onClick={() => setThemeColor(colorKey)}
+              >
+                {t(`settings.general.theme_color.${colorKey}`)}
+              </Button>
+            ))}
+          </Space>
+        </Form.Item>
+
         <Form.Item wrapperCol={{ offset: 8, span: 16 }}>
           <Button type="primary" htmlType="submit" loading={settings.isFetching || setCurrency.isPending}>
             {t("buttons.save")}