feat: UserMgmt widget date format (#859)

## Related Issues

Related descope/etc#8330

## Related PRs

| branch       | PR         |
| ------------ | ---------- |
| service a PR | Link to PR |
| service b PR | Link to PR |

## Description

A few sentences describing the overall goals of the pull request's
commits.

## Must

- [ ] Tests
- [ ] Documentation (if applicable)

packages/widgets/user-management-widget/src/lib/helpers.ts

@@ -1,4 +1,8 @@
-import { User } from './widget/api/types';
+import {
+  CustomAttributeType,
+  CustomAttributeTypeMap,
+  User,
+} from './widget/api/types';
 
 export const unflatten = (formData: Partial<User>, keyPrefix: string) =>
   Object.entries(formData).reduce((acc, [key, value]) => {
@@ -27,3 +31,18 @@ export const flatten = (
       val,
     ]),
   );
+
+export const formatDate = (val: string) =>
+  new Date(Number(val)).toLocaleDateString('en-US');
+
+export const formatCustomAttrValue = (
+  type: CustomAttributeTypeMap,
+  val: CustomAttributeType,
+) => {
+  switch (type) {
+    case CustomAttributeTypeMap['date']:
+      return formatDate(`${val}`);
+    default:
+      return val;
+  }
+};

packages/widgets/user-management-widget/src/lib/widget/api/types.ts

@@ -2,10 +2,19 @@ import createWebSdk from '@descope/web-js-sdk';
 
 export type Sdk = ReturnType<typeof createWebSdk>;
 
-type CustomAttributeType = string | boolean | number;
+export type CustomAttributeType = string | boolean | number;
 
 type CustomAttributes = Record<string, CustomAttributeType>;
 
+export enum CustomAttributeTypeMap {
+  text = 1,
+  numeric = 2,
+  bool = 3,
+  singleSelect = 4,
+  array = 5,
+  date = 6,
+}
+
 type UserStatus = 'enabled' | 'disabled' | 'invited';
 
 type Tenant = AssociatedTenant & {

packages/widgets/user-management-widget/src/lib/widget/state/selectors.ts

@@ -1,5 +1,5 @@
 import { createSelector } from 'reselect';
-import { flatten } from '../../helpers';
+import { flatten, formatCustomAttrValue } from '../../helpers';
 import { State } from './types';
 import { userStatusMappings } from './constants';
 
@@ -12,7 +12,30 @@ export const getSearchParams = (state: State) => state.searchParams;
 export const getCustomAttributes = (state: State) =>
   state.customAttributes.data;
 
-export const getUsersList = createSelector(getRawUsersList, (users) =>
+export const getCustomAttrTypes = createSelector(
+  getCustomAttributes,
+  (customAttrs) =>
+    Object.fromEntries(customAttrs.map((attr) => [attr.name, attr.type])),
+);
+
+export const getFormattedUserList = createSelector(
+  getRawUsersList,
+  getCustomAttrTypes,
+  (users, customAttrTypes) =>
+    users.map((user) => ({
+      ...user,
+      ...{
+        customAttributes: Object.fromEntries(
+          Object.entries(user.customAttributes).map(([attr, val]) => [
+            attr,
+            formatCustomAttrValue(customAttrTypes[attr], val),
+          ]),
+        ),
+      },
+    })),
+);
+
+export const getUsersList = createSelector(getFormattedUserList, (users) =>
   users.map((user) => ({
     ...user,
     ...flatten(user?.customAttributes, 'customAttributes'),