@hed-hog/core 0.0.185 → 0.0.190

package/hedhog/frontend/app/preferences/page.tsx.ejs

@@ -0,0 +1,448 @@
+'use client';
+
+import { PageHeader } from '@/components/entity-list';
+import { LanguageSelector } from '@/components/language-selector';
+import { Card, CardContent } from '@/components/ui/card';
+import { Form } from '@/components/ui/form';
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@/components/ui/select';
+import { PaginatedResult } from '@hed-hog/api-pagination';
+import { Setting, SettingList } from '@hed-hog/api-types';
+import { useApp, useQuery } from '@hed-hog/next-app-provider';
+import { zodResolver } from '@hookform/resolvers/zod';
+import { Loader } from 'lucide-react';
+import { useTranslations } from 'next-intl';
+import { useForm } from 'react-hook-form';
+import { z } from 'zod';
+
+export default function PreferencesPage() {
+  const {
+    currentTheme,
+    setCurrentTheme,
+    request,
+    getSettingValue,
+    setSettingValue,
+    showToastHandler,
+    currentLocaleCode,
+  } = useApp();
+  const t = useTranslations('core.PreferencesPage');
+
+  const applyThemeSettings = async (
+    themeMode?: 'light' | 'dark' | 'system'
+  ) => {
+    try {
+      const response: any = await request({
+        url: '/setting/initial',
+        method: 'GET',
+      });
+
+      const newSettings = response.data?.setting || {};
+      localStorage.setItem('settings', JSON.stringify(newSettings));
+
+      const root = document.documentElement;
+      const effectiveTheme = themeMode || currentTheme || 'system';
+      let resolvedTheme: 'light' | 'dark' = 'light';
+
+      if (effectiveTheme === 'system') {
+        const prefersDark = window.matchMedia(
+          '(prefers-color-scheme: dark)'
+        ).matches;
+        resolvedTheme = prefersDark ? 'dark' : 'light';
+      } else {
+        resolvedTheme = effectiveTheme as 'light' | 'dark';
+      }
+
+      root.classList.remove('light', 'dark');
+      root.classList.add(resolvedTheme);
+
+      const existingStyle = document.getElementById('theme-custom-styles');
+      if (existingStyle) {
+        existingStyle.remove();
+      }
+
+      const styleTag = document.createElement('style');
+      styleTag.id = 'theme-custom-styles';
+      let cssRules = '';
+
+      const addRule = (varName: string, settingKey: string) => {
+        const hexColor = newSettings[settingKey];
+        if (
+          hexColor &&
+          typeof hexColor === 'string' &&
+          hexColor.startsWith('#')
+        ) {
+          cssRules += `    ${varName}: ${hexColor} !important;\n`;
+        }
+      };
+
+      if (resolvedTheme === 'light') {
+        cssRules += '@supports (color: lab(0% 0 0)) {\n';
+        cssRules += '  html.light, .light, :root.light {\n';
+        addRule('--primary', 'theme-primary-light');
+        addRule('--bprogress-color', 'theme-primary-light');
+        addRule('--primary-foreground', 'theme-primary-foreground-light');
+        addRule('--secondary', 'theme-secondary-light');
+        addRule('--secondary-foreground', 'theme-secondary-foreground-light');
+        addRule('--accent', 'theme-accent-light');
+        addRule('--accent-foreground', 'theme-accent-foreground-light');
+        addRule('--muted', 'theme-muted-light');
+        addRule('--muted-foreground', 'theme-muted-foreground-light');
+        addRule('--background', 'theme-background-light');
+        addRule('--foreground', 'theme-background-foreground-light');
+        addRule('--card', 'theme-card-light');
+        addRule('--card-foreground', 'theme-card-foreground-light');
+      } else {
+        cssRules += '@supports (color: lab(0% 0 0)) {\n';
+        cssRules += '  html.dark, .dark, :root.dark {\n';
+        addRule('--primary', 'theme-primary-dark');
+        addRule('--bprogress-color', 'theme-primary-dark');
+        addRule('--primary-foreground', 'theme-primary-foreground-dark');
+        addRule('--secondary', 'theme-secondary-dark');
+        addRule('--secondary-foreground', 'theme-secondary-foreground-dark');
+        addRule('--accent', 'theme-accent-dark');
+        addRule('--accent-foreground', 'theme-accent-foreground-dark');
+        addRule('--muted', 'theme-muted-dark');
+        addRule('--muted-foreground', 'theme-muted-foreground-dark');
+        addRule('--background', 'theme-background-dark');
+        addRule('--foreground', 'theme-background-foreground-dark');
+        addRule('--card', 'theme-card-dark');
+        addRule('--card-foreground', 'theme-card-foreground-dark');
+      }
+
+      if (newSettings['theme-radius']) {
+        cssRules += `    --radius: ${newSettings['theme-radius']}rem !important;\n`;
+      }
+      if (newSettings['theme-text-size']) {
+        cssRules += `    font-size: ${newSettings['theme-text-size']}rem !important;\n`;
+      }
+
+      cssRules += '  }\n';
+      cssRules += '}\n';
+
+      if (newSettings['theme-font']) {
+        cssRules += `:root {\n`;
+        cssRules += `  --font-sans: ${newSettings['theme-font']} !important;\n`;
+        cssRules += `}\n`;
+        cssRules += `html {\n`;
+        cssRules += `  font-family: ${newSettings['theme-font']} !important;\n`;
+        cssRules += `}\n`;
+      }
+
+      styleTag.textContent = cssRules;
+      document.head.appendChild(styleTag);
+    } catch (error) {
+      console.error('Error applying theme settings:', error);
+    }
+  };
+
+  // Busca as settings do grupo de localization
+  const { data: localizationSettings, isLoading } = useQuery<
+    PaginatedResult<Setting>
+  >({
+    queryKey: ['setting', 'localization', currentLocaleCode],
+    queryFn: async () => {
+      const response = await request<PaginatedResult<Setting>>({
+        url: '/setting/group/localization',
+      });
+      return response.data;
+    },
+  });
+
+  // Encontra as settings específicas
+  const dateFormatSetting = localizationSettings?.data?.find(
+    (s: Setting) => s.slug === 'date-format'
+  );
+  const timeFormatSetting = localizationSettings?.data?.find(
+    (s: Setting) => s.slug === 'time-format'
+  );
+  const timezoneSetting = localizationSettings?.data?.find(
+    (s: Setting) => s.slug === 'timezone'
+  );
+
+  const dateFormat = getSettingValue('date-format') || 'dd/MM/yyyy';
+  const timeFormat = getSettingValue('time-format') || 'HH:mm:ss';
+  const timezone = getSettingValue('timezone') || 'UTC';
+
+  const schema = z.object({
+    language: z.string().min(1, t('languageRequired')),
+    theme: z.string().min(1, t('themeRequired')),
+  });
+
+  const form = useForm({
+    resolver: zodResolver(schema),
+    defaultValues: {
+      language: '',
+      theme: '',
+    },
+  });
+
+  const handleThemeChange = async (value: 'light' | 'dark' | 'system') => {
+    setCurrentTheme(value);
+    await request({
+      url: '/profile/preferences',
+      method: 'PUT',
+      data: { theme: value },
+    });
+    await applyThemeSettings(value);
+  };
+
+  const handleLanguageChange = (code: string) => {
+    request({
+      url: '/profile/preferences',
+      method: 'PUT',
+      data: { language: code },
+    });
+  };
+
+  const handleDateFormatChange = async (value: string) => {
+    try {
+      await setSettingValue('date-format', value);
+      showToastHandler(
+        'success',
+        t('dateFormatUpdated') || 'Date format updated successfully'
+      );
+    } catch (error) {
+      showToastHandler(
+        'error',
+        t('dateFormatUpdateError') || 'Failed to update date format'
+      );
+    }
+  };
+
+  const handleTimeFormatChange = async (value: string) => {
+    try {
+      await setSettingValue('time-format', value);
+      showToastHandler(
+        'success',
+        t('timeFormatUpdated') || 'Time format updated successfully'
+      );
+    } catch (error) {
+      showToastHandler(
+        'error',
+        t('timeFormatUpdateError') || 'Failed to update time format'
+      );
+    }
+  };
+
+  const handleTimezoneChange = async (value: string) => {
+    try {
+      await setSettingValue('timezone', value);
+      showToastHandler(
+        'success',
+        t('timezoneUpdated') || 'Timezone updated successfully'
+      );
+    } catch (error) {
+      showToastHandler(
+        'error',
+        t('timezoneUpdateError') || 'Failed to update timezone'
+      );
+    }
+  };
+
+  return (
+    <div className="flex flex-col h-screen px-4">
+      <PageHeader
+        breadcrumbs={[
+          { label: 'Home', href: '/dashboard' },
+          { label: t('title') },
+        ]}
+        title={t('title')}
+        description={t('description')}
+      />
+
+      <div className="mt-2">
+        <Form {...form}>
+          <form className="space-y-6">
+            <h2 className="text-1xl font-bold text-primary mb-1">
+              {t('appearance')}
+            </h2>
+            <Card className="border-none bg-accent">
+              <CardContent className="flex-col gap-4">
+                <div className="flex justify-between">
+                  <div className="flex-col">
+                    <label className="font-semibold">{t('theme')}</label>
+                    <p className="text-muted-foreground text-sm">
+                      {t('setPreferredTheme')}
+                    </p>
+                  </div>
+
+                  <div className="h-full flex items-center">
+                    <Select
+                      value={currentTheme}
+                      onValueChange={handleThemeChange}
+                    >
+                      <SelectTrigger className="w-[180px] bg-background">
+                        <SelectValue placeholder={t('selectTheme')} />
+                      </SelectTrigger>
+                      <SelectContent>
+                        <SelectItem value="light">{t('light')}</SelectItem>
+                        <SelectItem value="dark">{t('dark')}</SelectItem>
+                        <SelectItem value="system">{t('system')}</SelectItem>
+                      </SelectContent>
+                    </Select>
+                  </div>
+                </div>
+              </CardContent>
+            </Card>
+
+            <h2 className="text-1xl font-bold text-primary mb-1">
+              {t('localization')}
+            </h2>
+            <Card className="border-none bg-accent">
+              <CardContent className="flex-col gap-4">
+                <div className="flex justify-between">
+                  <div className="flex-col">
+                    <label className="font-semibold">{t('language')}</label>
+                    <p className="text-muted-foreground text-sm">
+                      {t('setPreferredLanguage')}
+                    </p>
+                  </div>
+
+                  <div className="h-full flex items-center">
+                    <LanguageSelector onChange={handleLanguageChange} />
+                  </div>
+                </div>
+              </CardContent>
+            </Card>
+
+            <h2 className="text-1xl font-bold text-primary mb-1">
+              {t('dateAndTimeFormat')}
+            </h2>
+            <Card className="border-none bg-accent">
+              {isLoading && (
+                <CardContent className="flex h-32 w-full items-center justify-center">
+                  <Loader className="animate-spin text-muted-foreground w-4 h-4" />
+                </CardContent>
+              )}
+              {!isLoading && dateFormatSetting && timeFormatSetting && (
+                <CardContent className="flex-col gap-4">
+                  <div className="flex justify-between">
+                    <div className="flex-col">
+                      <label className="font-semibold">{t('dateFormat')}</label>
+                      <p className="text-muted-foreground text-sm">
+                        {t('setPreferredDateFormat')}
+                      </p>
+                    </div>
+
+                    <div className="h-full flex items-center">
+                      <Select
+                        value={dateFormat}
+                        onValueChange={handleDateFormatChange}
+                      >
+                        <SelectTrigger className="w-[180px] bg-background">
+                          <SelectValue
+                            placeholder={
+                              t('selectDateFormat') || 'Select format'
+                            }
+                          />
+                        </SelectTrigger>
+                        <SelectContent>
+                          {(dateFormatSetting.setting_list || []).map(
+                            (option: SettingList) => (
+                              <SelectItem key={option.id} value={option.value}>
+                                {option.value}
+                              </SelectItem>
+                            )
+                          )}
+                        </SelectContent>
+                      </Select>
+                    </div>
+                  </div>
+
+                  <div className="flex justify-between mt-4">
+                    <div className="flex-col">
+                      <label className="font-semibold">{t('timeFormat')}</label>
+                      <p className="text-muted-foreground text-sm">
+                        {t('setPreferredTimeFormat')}
+                      </p>
+                    </div>
+
+                    <div className="h-full flex items-center">
+                      <Select
+                        value={timeFormat}
+                        onValueChange={handleTimeFormatChange}
+                      >
+                        <SelectTrigger className="w-[180px] bg-background">
+                          <SelectValue
+                            placeholder={
+                              t('selectTimeFormat') || 'Select format'
+                            }
+                          />
+                        </SelectTrigger>
+                        <SelectContent>
+                          {(timeFormatSetting.setting_list || []).map(
+                            (option: SettingList) => (
+                              <SelectItem key={option.id} value={option.value}>
+                                {option.value}
+                              </SelectItem>
+                            )
+                          )}
+                        </SelectContent>
+                      </Select>
+                    </div>
+                  </div>
+                </CardContent>
+              )}
+            </Card>
+
+            <h2 className="text-1xl font-bold text-primary mb-1">
+              {t('timezone')}
+            </h2>
+            <Card className="border-none bg-accent">
+              {isLoading && (
+                <CardContent className="flex h-32 w-full items-center justify-center">
+                  <Loader className="animate-spin text-muted-foreground w-4 h-4" />
+                </CardContent>
+              )}
+              {!isLoading && timezoneSetting && (
+                <CardContent className="flex-col gap-4">
+                  <div className="flex justify-between">
+                    <div className="flex-col">
+                      <label className="font-semibold">
+                        {timezoneSetting.name || t('timezone')}
+                      </label>
+                      <p className="text-muted-foreground text-sm">
+                        {timezoneSetting.description ||
+                          t('setPreferredTimezone')}
+                      </p>
+                    </div>
+
+                    <div className="h-full flex items-center">
+                      <Select
+                        key={timezone}
+                        value={timezone}
+                        onValueChange={handleTimezoneChange}
+                      >
+                        <SelectTrigger className="w-60 bg-background">
+                          <SelectValue
+                            placeholder={
+                              t('selectTimezone') || 'Select timezone'
+                            }
+                          />
+                        </SelectTrigger>
+                        <SelectContent>
+                          {(timezoneSetting.setting_list || []).map(
+                            (option: SettingList) => (
+                              <SelectItem key={option.id} value={option.value}>
+                                {option.value}
+                              </SelectItem>
+                            )
+                          )}
+                        </SelectContent>
+                      </Select>
+                    </div>
+                  </div>
+                </CardContent>
+              )}
+            </Card>
+          </form>
+        </Form>
+      </div>
+    </div>
+  );
+}