From 9434c99f1f30c12bad254512f48abbe4731cd3c1 Mon Sep 17 00:00:00 2001
From: Antonio Gamez Diaz <antonio.gamez@suse.com>
Date: Thu, 9 Apr 2026 17:24:47 +0200
Subject: [PATCH 1/6] Adapt MultiSelect to be reused

Signed-off-by: Antonio Gamez Diaz <antonio.gamez@suse.com>
---
 assets/js/common/MultiSelect/MultiSelect.jsx | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/assets/js/common/MultiSelect/MultiSelect.jsx b/assets/js/common/MultiSelect/MultiSelect.jsx
index 47b2b1a552..28fa201541 100644
--- a/assets/js/common/MultiSelect/MultiSelect.jsx
+++ b/assets/js/common/MultiSelect/MultiSelect.jsx
@@ -78,6 +78,8 @@ const defaultClassNames = {
 function MultiSelect({
   options,
   values,
+  value,
+  isMulti = true,
   disabled = false,
   components = defaultComponents,
   selectClassNames = defaultClassNames,
@@ -88,7 +90,8 @@ function MultiSelect({
 }) {
   return (
     <Select
-      isMulti
+      isMulti={isMulti}
+      value={value}
       defaultValue={values}
       options={options}
       classNames={selectClassNames}

From 731691ba39ab7c0100edbe886c3d7f63ce99f529 Mon Sep 17 00:00:00 2001
From: Antonio Gamez Diaz <antonio.gamez@suse.com>
Date: Thu, 9 Apr 2026 17:56:35 +0200
Subject: [PATCH 2/6] Add SearchableSelect component

Signed-off-by: Antonio Gamez Diaz <antonio.gamez@suse.com>
---
 .../SearchableSelect/SearchableSelect.jsx     | 44 +++++++++++
 .../SearchableSelect.stories.jsx              | 78 +++++++++++++++++++
 .../SearchableSelect.test.jsx                 | 63 +++++++++++++++
 assets/js/common/SearchableSelect/index.js    |  3 +
 4 files changed, 188 insertions(+)
 create mode 100644 assets/js/common/SearchableSelect/SearchableSelect.jsx
 create mode 100644 assets/js/common/SearchableSelect/SearchableSelect.stories.jsx
 create mode 100644 assets/js/common/SearchableSelect/SearchableSelect.test.jsx
 create mode 100644 assets/js/common/SearchableSelect/index.js

diff --git a/assets/js/common/SearchableSelect/SearchableSelect.jsx b/assets/js/common/SearchableSelect/SearchableSelect.jsx
new file mode 100644
index 0000000000..f314d35b3d
--- /dev/null
+++ b/assets/js/common/SearchableSelect/SearchableSelect.jsx
@@ -0,0 +1,44 @@
+import React from 'react';
+import classNames from 'classnames';
+import MultiSelect from '@common/MultiSelect';
+
+const defaultFilterOption = (option, rawInput) => {
+  if (!rawInput) return true;
+  const input = rawInput.toLowerCase();
+  return (
+    option.data.searchLabel?.toLowerCase().includes(input) ||
+    option.data.label.toLowerCase().includes(input)
+  );
+};
+
+function SearchableSelect({
+  value,
+  options,
+  onChange,
+  disabled = false,
+  className = '',
+  isClearable = false,
+  placeholder,
+  noOptionsMessage,
+  filterOption = defaultFilterOption,
+}) {
+  const selectedOption = options.find((opt) => opt.value === value);
+
+  return (
+    <MultiSelect
+      options={options}
+      value={selectedOption}
+      isMulti={false}
+      onChange={(option) => onChange(option?.value)}
+      disabled={disabled}
+      isClearable={isClearable}
+      isSearchable
+      className={classNames('text-sm', className)}
+      placeholder={placeholder}
+      noOptionsMessage={noOptionsMessage}
+      filterOption={filterOption}
+    />
+  );
+}
+
+export default SearchableSelect;
diff --git a/assets/js/common/SearchableSelect/SearchableSelect.stories.jsx b/assets/js/common/SearchableSelect/SearchableSelect.stories.jsx
new file mode 100644
index 0000000000..3acd17227f
--- /dev/null
+++ b/assets/js/common/SearchableSelect/SearchableSelect.stories.jsx
@@ -0,0 +1,78 @@
+import SearchableSelect from '.';
+
+export default {
+  title: 'Components/SearchableSelect',
+  component: SearchableSelect,
+  argTypes: {
+    options: {
+      type: 'array',
+      description: 'The list of options to render',
+      control: {
+        type: 'array',
+      },
+    },
+    value: {
+      type: 'string',
+      description: 'Selected option value',
+      control: {
+        type: 'text',
+      },
+    },
+    disabled: {
+      type: 'boolean',
+      description: 'Component is disabled or not',
+      control: {
+        type: 'boolean',
+      },
+    },
+    isClearable: {
+      type: 'boolean',
+      description: 'Enable clear action',
+      control: {
+        type: 'boolean',
+      },
+    },
+    onChange: {
+      description: 'A function to be called when selected option changes',
+      table: {
+        type: { summary: '(value) => {}' },
+      },
+    },
+  },
+};
+
+const options = [
+  { value: 'Europe/Berlin', label: 'Europe/Berlin (UTC+1)', searchLabel: 'Europe/Berlin' },
+  { value: 'America/New_York', label: 'America/New_York (UTC-5)', searchLabel: 'America/New_York' },
+  { value: 'Asia/Tokyo', label: 'Asia/Tokyo (UTC+9)', searchLabel: 'Asia/Tokyo' },
+];
+
+export const Default = {
+  args: {
+    options,
+    className: 'w-96',
+    placeholder: 'Select timezone...',
+    noOptionsMessage: () => 'No options found',
+  },
+};
+
+export const WithValue = {
+  args: {
+    ...Default.args,
+    value: 'Europe/Berlin',
+  },
+};
+
+export const Clearable = {
+  args: {
+    ...WithValue.args,
+    isClearable: true,
+  },
+};
+
+export const Disabled = {
+  args: {
+    ...WithValue.args,
+    disabled: true,
+  },
+};
diff --git a/assets/js/common/SearchableSelect/SearchableSelect.test.jsx b/assets/js/common/SearchableSelect/SearchableSelect.test.jsx
new file mode 100644
index 0000000000..7f1bb5b7ed
--- /dev/null
+++ b/assets/js/common/SearchableSelect/SearchableSelect.test.jsx
@@ -0,0 +1,63 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import '@testing-library/jest-dom';
+import userEvent from '@testing-library/user-event';
+
+import SearchableSelect from '.';
+
+const options = [
+  { value: 'Europe/Berlin', label: 'Europe/Berlin (UTC+1)', searchLabel: 'Europe/Berlin' },
+  { value: 'America/New_York', label: 'America/New_York (UTC-5)', searchLabel: 'America/New_York' },
+  { value: 'Asia/Tokyo', label: 'Asia/Tokyo (UTC+9)', searchLabel: 'Asia/Tokyo' },
+];
+
+describe('SearchableSelect Component', () => {
+  it('should render selected value', () => {
+    render(
+      <SearchableSelect
+        options={options}
+        value="Europe/Berlin"
+        onChange={jest.fn()}
+        placeholder="Select timezone..."
+      />
+    );
+
+    expect(screen.getByText('Europe/Berlin (UTC+1)')).toBeVisible();
+  });
+
+  it('should call onChange with option value', async () => {
+    const user = userEvent.setup();
+    const onChange = jest.fn();
+
+    render(
+      <SearchableSelect
+        options={options}
+        onChange={onChange}
+        placeholder="Select timezone..."
+      />
+    );
+
+    await user.click(screen.getByText('Select timezone...'));
+    await user.click(screen.getByText('Asia/Tokyo (UTC+9)'));
+
+    expect(onChange).toHaveBeenCalledWith('Asia/Tokyo');
+  });
+
+  it('should filter options by searchLabel by default', async () => {
+    const user = userEvent.setup();
+
+    render(
+      <SearchableSelect
+        options={options}
+        onChange={jest.fn()}
+        placeholder="Select timezone..."
+      />
+    );
+
+    await user.click(screen.getByText('Select timezone...'));
+    await user.type(screen.getByRole('combobox'), 'new_york');
+
+    expect(screen.getByText('America/New_York (UTC-5)')).toBeVisible();
+    expect(screen.queryByText('Asia/Tokyo (UTC+9)')).not.toBeInTheDocument();
+  });
+});
diff --git a/assets/js/common/SearchableSelect/index.js b/assets/js/common/SearchableSelect/index.js
new file mode 100644
index 0000000000..8501e94017
--- /dev/null
+++ b/assets/js/common/SearchableSelect/index.js
@@ -0,0 +1,3 @@
+import SearchableSelect from './SearchableSelect';
+
+export default SearchableSelect;

From 27e8d0761a4ce08e00f1df3f366250593d6603a0 Mon Sep 17 00:00:00 2001
From: Antonio Gamez Diaz <antonio.gamez@suse.com>
Date: Thu, 9 Apr 2026 20:09:00 +0200
Subject: [PATCH 3/6] Add timezone lib

Signed-off-by: Antonio Gamez Diaz <antonio.gamez@suse.com>
---
 assets/js/lib/timezones/index.js      | 46 +++++++++++++++++++++++++++
 assets/js/lib/timezones/index.test.js | 19 +++++++++++
 assets/package-lock.json              |  7 ++++
 assets/package.json                   |  1 +
 4 files changed, 73 insertions(+)
 create mode 100644 assets/js/lib/timezones/index.js
 create mode 100644 assets/js/lib/timezones/index.test.js

diff --git a/assets/js/lib/timezones/index.js b/assets/js/lib/timezones/index.js
new file mode 100644
index 0000000000..c309be9b67
--- /dev/null
+++ b/assets/js/lib/timezones/index.js
@@ -0,0 +1,46 @@
+import tzdata from 'tzdata';
+
+
+// Default timezone is set to UTC until a user explicitly selects one.
+export const DEFAULT_TIMEZONE = 'Etc/UTC';
+
+/**
+ * Get the UTC offset for a timezone, accounting for DST. If invalid, returns 'UTC'.
+ * See https://www.iana.org/time-zones for valid timezone identifiers.
+ * @param {string} timezone - IANA timezone identifier
+ * @param {Date} [date=new Date()] - Date to calculate offset for (defaults to today)
+ */
+export function getUtcOffset(timezone, date = new Date()) {
+  try {
+    const formatter = new Intl.DateTimeFormat('en-GB', {
+      timeZone: timezone,
+      timeZoneName: 'shortOffset',
+    });
+    const parts = formatter.formatToParts(date);
+    return parts.find((p) => p.type === 'timeZoneName')?.value || 'UTC';
+  } catch {
+    return 'UTC';
+  }
+}
+
+/**
+ * Generate timezone options from the IANA tzdata database.
+ * Each option includes the current UTC offset with DST accounted for.
+ */
+export function generateTimezoneOptions() {
+  const zoneNames = Object.keys(tzdata.zones || {})
+    .filter((zone) => {
+      // Keep UTC/GMT but exclude other deprecated Etc/ zones
+      if (zone.startsWith('Etc/')) {
+        return ['Etc/UTC', 'Etc/GMT'].includes(zone);
+      }
+      return true;
+    })
+    .sort();
+
+  return zoneNames.map((zone) => ({
+    value: zone,
+    label: `${zone} (${getUtcOffset(zone)})`,
+    searchLabel: zone,
+  }));
+}
diff --git a/assets/js/lib/timezones/index.test.js b/assets/js/lib/timezones/index.test.js
new file mode 100644
index 0000000000..68f27463f1
--- /dev/null
+++ b/assets/js/lib/timezones/index.test.js
@@ -0,0 +1,19 @@
+import { DEFAULT_TIMEZONE, getUtcOffset } from './index';
+
+describe('timezones', () => {
+  it('uses UTC as default timezone', () => {
+    expect(DEFAULT_TIMEZONE).toBe('Etc/UTC');
+  });
+
+  it('calculates DST correctly for Europe/Berlin in winter vs summer', () => {
+    const winterOffset = getUtcOffset('Europe/Berlin', new Date('2024-01-01T12:00:00Z'));
+    const summerOffset = getUtcOffset('Europe/Berlin', new Date('2024-07-01T12:00:00Z'));
+
+    expect(winterOffset).toBe("GMT+1");
+    expect(summerOffset).toBe("GMT+2");
+  });
+
+  it('returns UTC for invalid timezone identifiers', () => {
+    expect(getUtcOffset('Not/A_Timezone', new Date('2024-01-01T12:00:00Z'))).toBe('UTC');
+  });
+});
diff --git a/assets/package-lock.json b/assets/package-lock.json
index 064da7fd57..43cdb35ea7 100644
--- a/assets/package-lock.json
+++ b/assets/package-lock.json
@@ -39,6 +39,7 @@
         "redux-saga": "^1.4.2",
         "remark-gfm": "^4.0.1",
         "semver": "^7.7.4",
+        "tzdata": "^1.0.48",
         "uuid": "^11.1.0"
       },
       "devDependencies": {
@@ -16686,6 +16687,12 @@
         "typescript-compare": "^0.0.2"
       }
     },
+    "node_modules/tzdata": {
+      "version": "1.0.48",
+      "resolved": "https://registry.npmjs.org/tzdata/-/tzdata-1.0.48.tgz",
+      "integrity": "sha512-dTveS1xSqCPA+PssFrhBQpWHF0ut8GR2jx3YRcjHV9KQmHCvdzJoo+VUfsXo88X7wLIAprnWDFtoGAQLJDmTZw==",
+      "license": "MIT"
+    },
     "node_modules/unbox-primitive": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/unbox-primitive/-/unbox-primitive-1.1.0.tgz",
diff --git a/assets/package.json b/assets/package.json
index 70a51a47fb..dea53fdeb5 100644
--- a/assets/package.json
+++ b/assets/package.json
@@ -79,6 +79,7 @@
     "redux-saga": "^1.4.2",
     "remark-gfm": "^4.0.1",
     "semver": "^7.7.4",
+    "tzdata": "^1.0.48",
     "uuid": "^11.1.0"
   },
   "overrides": {

From cf01d98cf2d3b3813aed2c009c48bc8c34beac4a Mon Sep 17 00:00:00 2001
From: Antonio Gamez Diaz <antonio.gamez@suse.com>
Date: Thu, 9 Apr 2026 20:09:58 +0200
Subject: [PATCH 4/6] Update copyright year

Signed-off-by: Antonio Gamez Diaz <antonio.gamez@suse.com>
---
 assets/js/pages/Layout/Layout.jsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/assets/js/pages/Layout/Layout.jsx b/assets/js/pages/Layout/Layout.jsx
index e72fa9a2a5..9d0db6372c 100644
--- a/assets/js/pages/Layout/Layout.jsx
+++ b/assets/js/pages/Layout/Layout.jsx
@@ -234,7 +234,7 @@ function Layout() {
         </div>
         <footer className="p-4 z-30 relative bottom-0 w-full bg-white shadow md:flex md:items-center md:justify-between md:p-6 dark:bg-gray-800">
           <span className="text-sm text-gray-500 sm:text-center dark:text-gray-400">
-            © 2020-2025 SUSE LLC
+            © 2020-2026 SUSE LLC
           </span>
           <span className="flex items-center mt-3 text-sm text-gray-500 dark:text-gray-400 sm:mt-0">
             This tool is free software released under the Apache License,

From 496cd1419fd9ab4d62f95b3c0c7b1703a9de85bb Mon Sep 17 00:00:00 2001
From: Antonio Gamez Diaz <antonio.gamez@suse.com>
Date: Thu, 9 Apr 2026 20:15:58 +0200
Subject: [PATCH 5/6] Add timezone dropdown in profile views

Signed-off-by: Antonio Gamez Diaz <antonio.gamez@suse.com>
---
 assets/js/pages/Profile/ProfileForm.jsx | 27 +++++++++++++++++++++++
 assets/js/pages/Profile/ProfilePage.jsx |  2 ++
 assets/js/pages/Users/EditUserPage.jsx  |  2 ++
 assets/js/pages/Users/UserForm.jsx      | 29 ++++++++++++++++++++++++-
 assets/js/state/user.js                 |  3 +++
 5 files changed, 62 insertions(+), 1 deletion(-)

diff --git a/assets/js/pages/Profile/ProfileForm.jsx b/assets/js/pages/Profile/ProfileForm.jsx
index ad294c724e..e83ae23a4a 100644
--- a/assets/js/pages/Profile/ProfileForm.jsx
+++ b/assets/js/pages/Profile/ProfileForm.jsx
@@ -8,8 +8,10 @@ import Label from '@common/Label';
 import Modal from '@common/Modal';
 import Switch from '@common/Switch';
 import AbilitiesMultiSelect from '@common/AbilitiesMultiSelect';
+import SearchableSelect from '@common/SearchableSelect';
 import ProfilePasswordChangeForm from '@pages/Profile/ProfilePasswordChangeForm';
 import TotpEnrollementBox from '@pages/Profile/TotpEnrollmentBox';
+import { DEFAULT_TIMEZONE, generateTimezoneOptions } from '@lib/timezones';
 
 import { REQUIRED_FIELD_TEXT, errorMessage } from '@lib/forms';
 
@@ -38,6 +40,7 @@ function ProfileForm({
   analyticsEnabledConfig = false,
   analyticsEnabled = false,
   analyticsEulaAccepted = false,
+  timezone = DEFAULT_TIMEZONE,
   errors,
   loading,
   disableForm,
@@ -57,6 +60,8 @@ function ProfileForm({
   const [emailAddressErrorState, setEmailAddressError] = useState(null);
   const [totpDisableModalOpen, setTotpDisableModalOpen] = useState(false);
   const [analyticsEnabledState, setAnalyticsState] = useState(analyticsEnabled);
+  const [timezoneState, setTimezone] = useState(timezone);
+  const [timezoneErrorState, setTimezoneError] = useState(null);
 
   const saveButtonVisible = !singleSignOnEnabled || analyticsEnabledConfig;
 
@@ -88,6 +93,7 @@ function ProfileForm({
       analytics_enabled: analyticsEnabledState,
       ...(analyticsEnabledState &&
         !analyticsEulaAccepted && { analytics_eula_accepted: true }),
+      timezone: timezoneState,
     };
 
     onSave(user);
@@ -104,6 +110,7 @@ function ProfileForm({
   useEffect(() => {
     setFullNameError(getError('fullname', errors));
     setEmailAddressError(getError('email', errors));
+    setTimezoneError(getError('timezone', errors));
   }, [errors]);
 
   return (
@@ -206,6 +213,26 @@ function ProfileForm({
               disabled
             />
           </div>
+          <Label
+            className="col-start-1 col-span-2 pt-2"
+            info={"Aligns timestamps according to timezone selection"}
+          >
+            Timezone
+          </Label>
+          <div className="col-start-3 col-span-4">
+            <SearchableSelect
+              value={timezoneState}
+              options={generateTimezoneOptions()}
+              onChange={(value) => {
+                setTimezone(value);
+                setTimezoneError(null);
+              }}
+              disabled={loading || disableForm}
+              placeholder="Select timezone..."
+              noOptionsMessage={() => 'No timezones found'}
+            />
+            {timezoneErrorState && errorMessage(timezoneErrorState)}
+          </div>
           {analyticsEnabledConfig && (
             <>
               <Label
diff --git a/assets/js/pages/Profile/ProfilePage.jsx b/assets/js/pages/Profile/ProfilePage.jsx
index 212c3b50d6..de6ad02e1c 100644
--- a/assets/js/pages/Profile/ProfilePage.jsx
+++ b/assets/js/pages/Profile/ProfilePage.jsx
@@ -178,6 +178,7 @@ function ProfilePage() {
     analytics_enabled: analyticsEnabled,
     analytics_eula_accepted: analyticsEulaAccepted,
     totp_enabled: totpEnabled,
+    timezone,
   } = userState;
   const isDefaultAdmin = isAdmin(userState);
 
@@ -193,6 +194,7 @@ function ProfilePage() {
         analyticsEnabled={analyticsEnabled}
         analyticsEulaAccepted={analyticsEulaAccepted}
         totpEnabled={totpEnabled}
+        timezone={timezone}
         totpSecret={totpEnrollmentSecret}
         totpQrData={totpEnrollmentQrData}
         errors={errorsState}
diff --git a/assets/js/pages/Users/EditUserPage.jsx b/assets/js/pages/Users/EditUserPage.jsx
index aec800a99e..1c272abd6b 100644
--- a/assets/js/pages/Users/EditUserPage.jsx
+++ b/assets/js/pages/Users/EditUserPage.jsx
@@ -112,6 +112,7 @@ function EditUserPage() {
     totp_enabled_at: totpEnabledAt,
     last_login_at: lastLoginAt,
     analytics_enabled: analyticsEnabled,
+    timezone,
   } = userState;
 
   return (
@@ -141,6 +142,7 @@ function EditUserPage() {
         lastLoginAt={lastLoginAt}
         analyticsEnabledConfig={analyticsEnabledConfig}
         analyticsEnabled={analyticsEnabled}
+        timezone={timezone}
         saveEnabled={!isAdmin(userState)}
         saving={savingState}
         errors={errorsState}
diff --git a/assets/js/pages/Users/UserForm.jsx b/assets/js/pages/Users/UserForm.jsx
index a40ce3b251..f926536ca6 100644
--- a/assets/js/pages/Users/UserForm.jsx
+++ b/assets/js/pages/Users/UserForm.jsx
@@ -7,6 +7,7 @@ import Input, { Password } from '@common/Input';
 import Label from '@common/Label';
 import AbilitiesMultiSelect from '@common/AbilitiesMultiSelect';
 import Select from '@common/Select';
+import SearchableSelect from '@common/SearchableSelect';
 import Switch from '@common/Switch';
 import Tooltip from '@common/Tooltip';
 import {
@@ -16,7 +17,7 @@ import {
   errorMessage,
 } from '@lib/forms';
 import { getError } from '@lib/api/validationErrors';
-
+import { DEFAULT_TIMEZONE, generateTimezoneOptions } from '@lib/timezones';
 import { generateValidPassword } from './generatePassword';
 
 const USER_ENABLED = 'Enabled';
@@ -37,6 +38,7 @@ function UserForm({
   lastLoginAt = '',
   analyticsEnabledConfig = false,
   analyticsEnabled,
+  timezone = DEFAULT_TIMEZONE,
   errors = defaultErrors,
   saving = false,
   saveEnabled = true,
@@ -58,6 +60,8 @@ function UserForm({
   const [confirmPasswordErrorState, setConfirmPasswordError] = useState(null);
   const [statusState, setStatus] = useState(status);
   const [totpState, setTotpState] = useState(Boolean(totpEnabledAt));
+  const [timezoneState, setTimezone] = useState(timezone);
+  const [timezoneErrorState, setTimezoneError] = useState(null);
   const [selectedAbilities, setAbilities] = useState(
     userAbilities.map(({ id }) => id)
   );
@@ -68,6 +72,7 @@ function UserForm({
     setUsernameError(getError('username', errors));
     setPasswordError(getError('password', errors));
     setConfirmPasswordError(getError('password_confirmation', errors));
+    setTimezoneError(getError('timezone', errors));
   }, [errors]);
 
   const validateRequired = () => {
@@ -111,11 +116,13 @@ function UserForm({
     }),
     abilities: abilities.filter(({ id }) => selectedAbilities.includes(id)),
     ...(totpEnabledAt && !totpState && { totp_disabled: true }),
+    ...(editing && { timezone: timezoneState }),
   });
 
   const buildSSOUserPayload = () => ({
     enabled: statusState === USER_ENABLED,
     abilities: abilities.filter(({ id }) => selectedAbilities.includes(id)),
+    ...(editing && { timezone: timezoneState }),
   });
 
   const onSaveClicked = () => {
@@ -270,6 +277,26 @@ function UserForm({
           </div>
           {editing && (
             <>
+              <Label
+                className="col-start-1 col-span-2 sm:pt-2"
+                info={"Aligns timestamps according to timezone selection"}
+              >
+                Timezone
+              </Label>
+              <div className="col-start-3 col-span-4">
+                <SearchableSelect
+                  value={timezoneState}
+                  options={generateTimezoneOptions()}
+                  onChange={(value) => {
+                    setTimezone(value);
+                    setTimezoneError(null);
+                  }}
+                  disabled={!saveEnabled || saving}
+                  placeholder="Select timezone..."
+                  noOptionsMessage={() => 'No timezones found'}
+                />
+                {timezoneErrorState && errorMessage(timezoneErrorState)}
+              </div>
               {!singleSignOnEnabled && (
                 <>
                   <Label
diff --git a/assets/js/state/user.js b/assets/js/state/user.js
index 1d56c9343c..cb450cc46b 100644
--- a/assets/js/state/user.js
+++ b/assets/js/state/user.js
@@ -15,6 +15,7 @@ export const initialState = {
   authInProgress: false,
   analytics_enabled: undefined,
   analytics_eula_accepted: undefined,
+  timezone: undefined,
 };
 
 export const userSlice = createSlice({
@@ -48,6 +49,7 @@ export const userSlice = createSlice({
           password_change_requested,
           analytics_enabled,
           analytics_eula_accepted,
+          timezone,
         },
       }
     ) {
@@ -61,6 +63,7 @@ export const userSlice = createSlice({
       state.password_change_requested = password_change_requested;
       state.analytics_enabled = analytics_enabled;
       state.analytics_eula_accepted = analytics_eula_accepted;
+      state.timezone = timezone;
     },
   },
 });

From afbcfa888ad892fccc5bc71eace9e3698aff8b86 Mon Sep 17 00:00:00 2001
From: Antonio Gamez Diaz <antonio.gamez@suse.com>
Date: Thu, 9 Apr 2026 21:25:36 +0200
Subject: [PATCH 6/6] Add test files

Signed-off-by: Antonio Gamez Diaz <antonio.gamez@suse.com>
---
 .../SearchableSelect/SearchableSelect.jsx     |   2 +
 assets/js/lib/test-utils/factories/users.js   |   2 +
 assets/js/pages/Profile/ProfileForm.jsx       |   3 +
 assets/js/pages/Profile/ProfileForm.test.jsx  | 140 +++++++++++++++++
 assets/js/pages/Users/UserForm.jsx            |   3 +
 assets/js/pages/Users/UserForm.test.jsx       | 141 +++++++++++++++++-
 6 files changed, 290 insertions(+), 1 deletion(-)

diff --git a/assets/js/common/SearchableSelect/SearchableSelect.jsx b/assets/js/common/SearchableSelect/SearchableSelect.jsx
index f314d35b3d..0bb8a31496 100644
--- a/assets/js/common/SearchableSelect/SearchableSelect.jsx
+++ b/assets/js/common/SearchableSelect/SearchableSelect.jsx
@@ -21,6 +21,7 @@ function SearchableSelect({
   placeholder,
   noOptionsMessage,
   filterOption = defaultFilterOption,
+  ...props
 }) {
   const selectedOption = options.find((opt) => opt.value === value);
 
@@ -37,6 +38,7 @@ function SearchableSelect({
       placeholder={placeholder}
       noOptionsMessage={noOptionsMessage}
       filterOption={filterOption}
+      {...props}
     />
   );
 }
diff --git a/assets/js/lib/test-utils/factories/users.js b/assets/js/lib/test-utils/factories/users.js
index 1eaf2c6464..8f2381b54a 100644
--- a/assets/js/lib/test-utils/factories/users.js
+++ b/assets/js/lib/test-utils/factories/users.js
@@ -20,6 +20,7 @@ export const userFactory = Factory.define(() => ({
   totp_enabled_at: formatISO(faker.date.past()),
   analytics_enabled: faker.datatype.boolean(),
   analytics_eula_enabled: faker.datatype.boolean(),
+  timezone: faker.location.timeZone(),
   last_login_at: formatISO(faker.date.past()),
   created_at: formatISO(faker.date.past()),
   updated_at: formatISO(faker.date.past()),
@@ -35,6 +36,7 @@ export const profileFactory = Factory.define(() => ({
   totp_enabled: faker.datatype.boolean(),
   analytics_enabled: faker.datatype.boolean(),
   analytics_eula_accepted: faker.datatype.boolean(),
+  timezone: faker.location.timeZone(),
   created_at: formatISO(faker.date.past()),
   updated_at: formatISO(faker.date.past()),
 }));
diff --git a/assets/js/pages/Profile/ProfileForm.jsx b/assets/js/pages/Profile/ProfileForm.jsx
index e83ae23a4a..96fae84287 100644
--- a/assets/js/pages/Profile/ProfileForm.jsx
+++ b/assets/js/pages/Profile/ProfileForm.jsx
@@ -214,6 +214,7 @@ function ProfileForm({
             />
           </div>
           <Label
+            htmlFor="timezone"
             className="col-start-1 col-span-2 pt-2"
             info={"Aligns timestamps according to timezone selection"}
           >
@@ -221,6 +222,8 @@ function ProfileForm({
           </Label>
           <div className="col-start-3 col-span-4">
             <SearchableSelect
+              inputId="timezone"
+              name="timezone"
               value={timezoneState}
               options={generateTimezoneOptions()}
               onChange={(value) => {
diff --git a/assets/js/pages/Profile/ProfileForm.test.jsx b/assets/js/pages/Profile/ProfileForm.test.jsx
index e316bd9c00..73bc354216 100644
--- a/assets/js/pages/Profile/ProfileForm.test.jsx
+++ b/assets/js/pages/Profile/ProfileForm.test.jsx
@@ -7,6 +7,7 @@ import { faker } from '@faker-js/faker';
 import { profileFactory } from '@lib/test-utils/factories/users';
 
 import ProfileForm from '@pages/Profile/ProfileForm';
+import { DEFAULT_TIMEZONE } from '@lib/timezones';
 
 describe('ProfileForm', () => {
   it('should render a pre-filled form', () => {
@@ -57,12 +58,18 @@ describe('ProfileForm', () => {
         source: { pointer: '/email' },
         title: 'Invalid value',
       },
+      {
+        detail: 'Error validating timezone',
+        source: { pointer: '/timezone' },
+        title: 'Invalid value',
+      },
     ];
 
     render(<ProfileForm errors={errors} />);
 
     expect(screen.getByText('Error validating fullname')).toBeVisible();
     expect(screen.getByText('Error validating email')).toBeVisible();
+    expect(screen.getByText('Error validating timezone')).toBeVisible();
   });
 
   it('should send the form values when correctly filled', async () => {
@@ -73,6 +80,7 @@ describe('ProfileForm', () => {
       abilities,
       analytics_enabled,
       analytics_eula_accepted,
+      timezone,
     } = profileFactory.build({ analytics_eula_accepted: true });
     const mockOnSave = jest.fn();
 
@@ -84,6 +92,7 @@ describe('ProfileForm', () => {
         abilities={abilities}
         analyticsEnabled={analytics_enabled}
         analyticsEulaAccepted={analytics_eula_accepted}
+        timezone={timezone}
         onSave={mockOnSave}
       />
     );
@@ -96,6 +105,7 @@ describe('ProfileForm', () => {
       fullname,
       email,
       analytics_enabled,
+      timezone,
     });
   });
 
@@ -204,6 +214,7 @@ describe('ProfileForm', () => {
         email,
         analytics_enabled: analyticsEnabled,
         ...(updateValue && { analytics_eula_accepted: true }),
+        timezone: DEFAULT_TIMEZONE,
       });
     }
   );
@@ -390,6 +401,83 @@ describe('ProfileForm', () => {
     expect(screen.getByText('Error validating totp code')).toBeVisible();
   });
 
+  it('should set timezone selector value when timezone is not provided', () => {
+    const { username, fullname, email, abilities } = profileFactory.build();
+
+    render(
+      <ProfileForm
+        fullName={fullname}
+        emailAddress={email}
+        username={username}
+        abilities={abilities}
+      />
+    );
+
+    expect(screen.getByText('Timezone')).toBeVisible();
+    expect(screen.getByLabelText('Timezone')).toBeVisible();
+    expect(document.querySelector('input[name="timezone"]')).toHaveValue(DEFAULT_TIMEZONE);
+  });
+
+  it('should set timezone selector value when timezone is provided', () => {
+    const { username, fullname, email, abilities, timezone } = profileFactory.build();
+
+    render(
+      <ProfileForm
+        fullName={fullname}
+        emailAddress={email}
+        username={username}
+        abilities={abilities}
+        timezone={timezone}
+      />
+    );
+
+    expect(screen.getByText('Timezone')).toBeVisible();
+    expect(screen.getByLabelText('Timezone')).toBeVisible();
+    expect(document.querySelector('input[name="timezone"]')).toHaveValue(timezone);
+  });
+
+  it('should set timezone in save payload when timezone selector changes', async () => {
+    const { username, fullname, email, abilities, timezone } = profileFactory.build();
+    const mockOnSave = jest.fn();
+    const user = userEvent.setup();
+
+    render(
+      <ProfileForm
+        fullName={fullname}
+        emailAddress={email}
+        username={username}
+        abilities={abilities}
+        timezone={DEFAULT_TIMEZONE}
+        onSave={mockOnSave}
+      />
+    );
+
+    const timezoneSelectorInput = screen.getByLabelText('Timezone');
+
+    await user.click(timezoneSelectorInput);
+    await user.type(timezoneSelectorInput, timezone);
+    await user.click(await screen.findByText(new RegExp(`^${timezone}`)));
+    await user.click(screen.getByRole('button', { name: 'Save' }));
+
+    expect(mockOnSave).toHaveBeenCalledWith(
+      expect.objectContaining({ timezone })
+    );
+  });
+
+  it('should set timezone error when timezone error is provided', async () => {
+    const errors = [
+      {
+        detail: 'is not a valid IANA timezone',
+        source: { pointer: '/timezone' },
+        title: 'Invalid value',
+      },
+    ];
+
+    render(<ProfileForm errors={errors} />);
+
+    expect(await screen.findByText(/is not a valid IANA timezone/i)).toBeVisible();
+  });
+
   describe('Single sign on', () => {
     it('should disable fullname, email and username fields', () => {
       const { username, fullname, email, abilities } = profileFactory.build();
@@ -428,6 +516,25 @@ describe('ProfileForm', () => {
       expect(screen.getByText('Permissions')).toBeVisible();
     });
 
+    it('should keep timezone selector enabled', () => {
+      const { username, fullname, email, abilities } = profileFactory.build();
+
+      render(
+        <ProfileForm
+          fullName={fullname}
+          emailAddress={email}
+          username={username}
+          abilities={abilities}
+          singleSignOnEnabled
+        />
+      );
+
+      expect(screen.getByLabelText('Timezone')).toBeEnabled();
+      expect(document.querySelector('input[name="timezone"]')).toHaveValue(
+        DEFAULT_TIMEZONE
+      );
+    });
+
     it('should show save button if analytics configuration is enabled', async () => {
       const { username, fullname, email, abilities } = profileFactory.build();
 
@@ -453,7 +560,40 @@ describe('ProfileForm', () => {
 
       expect(mockOnSave).toHaveBeenNthCalledWith(1, {
         analytics_enabled: false,
+        timezone: DEFAULT_TIMEZONE,
+      });
+    });
+
+    it('should set timezone in save payload when timezone selector changes', async () => {
+      const { username, fullname, email, abilities, timezone } = profileFactory.build();
+      const mockOnSave = jest.fn();
+      const user = userEvent.setup();
+
+      render(
+        <ProfileForm
+          fullName={fullname}
+          emailAddress={email}
+          username={username}
+          abilities={abilities}
+          timezone={DEFAULT_TIMEZONE}
+          onSave={mockOnSave}
+          singleSignOnEnabled
+          analyticsEnabledConfig
+        />
+      );
+
+      const timezoneSelectorInput = screen.getByLabelText('Timezone');
+
+      await user.click(timezoneSelectorInput);
+      await user.type(timezoneSelectorInput, timezone);
+      await user.click(await screen.findByText(new RegExp(`^${timezone}`)));
+      await user.click(screen.getByRole('button', { name: 'Save' }));
+
+      expect(mockOnSave).toHaveBeenCalledWith({
+        analytics_enabled: false,
+        timezone,
       });
     });
   });
+
 });
diff --git a/assets/js/pages/Users/UserForm.jsx b/assets/js/pages/Users/UserForm.jsx
index f926536ca6..a03e20e62f 100644
--- a/assets/js/pages/Users/UserForm.jsx
+++ b/assets/js/pages/Users/UserForm.jsx
@@ -278,6 +278,7 @@ function UserForm({
           {editing && (
             <>
               <Label
+                htmlFor="timezone"
                 className="col-start-1 col-span-2 sm:pt-2"
                 info={"Aligns timestamps according to timezone selection"}
               >
@@ -285,6 +286,8 @@ function UserForm({
               </Label>
               <div className="col-start-3 col-span-4">
                 <SearchableSelect
+                  inputId="timezone"
+                  name="timezone"
                   value={timezoneState}
                   options={generateTimezoneOptions()}
                   onChange={(value) => {
diff --git a/assets/js/pages/Users/UserForm.test.jsx b/assets/js/pages/Users/UserForm.test.jsx
index 05a58fc0fa..6359a9bf46 100644
--- a/assets/js/pages/Users/UserForm.test.jsx
+++ b/assets/js/pages/Users/UserForm.test.jsx
@@ -7,6 +7,7 @@ import userEvent from '@testing-library/user-event';
 import { faker } from '@faker-js/faker';
 
 import { abilityFactory, userFactory } from '@lib/test-utils/factories/users';
+import { DEFAULT_TIMEZONE } from '@lib/timezones';
 
 import UserForm from './UserForm';
 
@@ -27,6 +28,7 @@ describe('UserForm', () => {
     expect(screen.getByText('Generate Password')).toBeVisible();
     expect(screen.getByText('Permissions')).toBeVisible();
     expect(screen.getByText('Status')).toBeVisible();
+    expect(screen.queryByText('Timezone')).not.toBeInTheDocument();
     expect(screen.queryByText('TOTP')).not.toBeInTheDocument();
     expect(screen.queryByText('Analytics Opt-in')).not.toBeInTheDocument();
     expect(screen.queryByText('Created')).not.toBeInTheDocument();
@@ -47,6 +49,7 @@ describe('UserForm', () => {
       totp_enabled_at: totpEnabledAt,
       analytics_enabled: analyticsEnabled,
       last_login_at: lastLoginAt,
+      timezone,
     } = userFactory.build();
 
     render(
@@ -60,6 +63,7 @@ describe('UserForm', () => {
         analyticsEnabledConfig
         analytics_enabled={analyticsEnabled}
         lastLoginAt={lastLoginAt}
+        timezone={timezone}
         editing
       />
     );
@@ -72,6 +76,7 @@ describe('UserForm', () => {
     expect(screen.getByText('Created')).toBeVisible();
     expect(screen.getByText('Updated')).toBeVisible();
     expect(screen.getByText('Last Login')).toBeVisible();
+    expect(screen.getByText('Timezone')).toBeVisible();
     expect(screen.getByText('TOTP')).toBeVisible();
     expect(screen.getByText('Analytics Opt-in')).toBeVisible();
     expect(screen.getByText('Enabled')).toBeVisible();
@@ -208,6 +213,7 @@ describe('UserForm', () => {
       username,
       created_at: createdAt,
       updated_at: updatedAt,
+      timezone,
     } = userFactory.build();
 
     render(
@@ -219,6 +225,7 @@ describe('UserForm', () => {
         updatedAt={updatedAt}
         editing
         onSave={mockOnSave}
+        timezone={timezone}
       />
     );
 
@@ -232,6 +239,7 @@ describe('UserForm', () => {
       email,
       enabled: result,
       abilities: [],
+      timezone,
     });
   });
 
@@ -272,6 +280,7 @@ describe('UserForm', () => {
       enabled: true,
       abilities: [],
       totp_disabled: true,
+      timezone: DEFAULT_TIMEZONE,
     });
   });
 
@@ -359,6 +368,7 @@ describe('UserForm', () => {
       email,
       enabled: true,
       abilities: abilities.slice(0, 2),
+      timezone: DEFAULT_TIMEZONE,
     });
   });
 
@@ -378,6 +388,132 @@ describe('UserForm', () => {
     expect(screen.getByText('Last Login').nextSibling).toHaveTextContent('-');
   });
 
+  it('should set timezone selector value when timezone is not provided', () => {
+    const {
+      fullname,
+      email,
+      username,
+      created_at: createdAt,
+      updated_at: updatedAt,
+    } = userFactory.build();
+
+    render(
+      <UserForm
+        fullName={fullname}
+        emailAddress={email}
+        username={username}
+        createdAt={createdAt}
+        updatedAt={updatedAt}
+        editing
+      />
+    );
+
+    expect(screen.getByText('Timezone')).toBeVisible();
+    expect(screen.getByLabelText('Timezone')).toBeVisible();
+    expect(document.querySelector('input[name="timezone"]')).toHaveValue(DEFAULT_TIMEZONE);
+  });
+
+  it('should set timezone selector value when timezone is provided', () => {
+    const {
+      fullname,
+      email,
+      username,
+      created_at: createdAt,
+      updated_at: updatedAt,
+      timezone,
+    } = userFactory.build();
+
+    render(
+      <UserForm
+        fullName={fullname}
+        emailAddress={email}
+        username={username}
+        createdAt={createdAt}
+        updatedAt={updatedAt}
+        timezone={timezone}
+        editing
+      />
+    );
+
+    expect(screen.getByText('Timezone')).toBeVisible();
+    expect(screen.getByLabelText('Timezone')).toBeVisible();
+    expect(document.querySelector('input[name="timezone"]')).toHaveValue(timezone);
+  });
+
+  it('should set timezone in save payload when timezone selector changes', async () => {
+    const user = userEvent.setup();
+    const mockOnSave = jest.fn();
+    const {
+      fullname,
+      email,
+      username,
+      created_at: createdAt,
+      updated_at: updatedAt,
+      timezone,
+    } = userFactory.build();
+
+    render(
+      <UserForm
+        fullName={fullname}
+        emailAddress={email}
+        username={username}
+        createdAt={createdAt}
+        updatedAt={updatedAt}
+        timezone={DEFAULT_TIMEZONE}
+        editing
+        onSave={mockOnSave}
+      />
+    );
+
+    const timezoneSelectorInput = screen.getByLabelText('Timezone');
+
+    await user.click(timezoneSelectorInput);
+    await user.type(timezoneSelectorInput, timezone);
+    await user.click(await screen.findByText(new RegExp(`^${timezone}`)));
+    await user.click(screen.getByRole('button', { name: 'Create' }));
+
+    expect(mockOnSave).toHaveBeenNthCalledWith(1, {
+      fullname,
+      email,
+      enabled: true,
+      abilities: [],
+      timezone,
+    });
+  });
+
+  it('should set timezone error when timezone error is provided', async () => {
+    const {
+      created_at: createdAt,
+      updated_at: updatedAt,
+      fullname,
+      email,
+      username,
+    } = userFactory.build();
+    const errors = [
+      {
+        detail: 'is not a valid IANA timezone',
+        source: { pointer: '/timezone' },
+        title: 'Invalid value',
+      },
+    ];
+
+    render(
+      <UserForm
+        fullName={fullname}
+        emailAddress={email}
+        username={username}
+        createdAt={createdAt}
+        updatedAt={updatedAt}
+        errors={errors}
+        editing
+      />
+    );
+
+    expect(
+      await screen.findByText(/is not a valid IANA timezone/i)
+    ).toBeVisible();
+  });
+
   describe('Single sign on', () => {
     it('should disable fullname, email and username fields', () => {
       render(<UserForm saveText="Save" editing singleSignOnEnabled />);
@@ -396,12 +532,13 @@ describe('UserForm', () => {
       expect(screen.queryByText('TOTP')).not.toBeInTheDocument();
       expect(screen.getByText('Permissions')).toBeVisible();
       expect(screen.getByText('Enabled')).toBeVisible();
+      expect(screen.getByText('Timezone')).toBeVisible();
     });
 
     it('should save permissions and status', async () => {
       const user = userEvent.setup();
 
-      const { fullname, email, username } = userFactory.build();
+      const { fullname, email, username, timezone } = userFactory.build();
 
       const abilities = abilityFactory.buildList(3);
       const userAbilities = [abilities[0]];
@@ -418,6 +555,7 @@ describe('UserForm', () => {
           editing
           abilities={abilities}
           userAbilities={userAbilities}
+          timezone={timezone}
           singleSignOnEnabled
         />
       );
@@ -443,6 +581,7 @@ describe('UserForm', () => {
       expect(mockOnSave).toHaveBeenNthCalledWith(1, {
         enabled: true,
         abilities: abilities.slice(0, 2),
+        timezone,
       });
     });
   });