From 5caba50345141001376470b9e5e872f5590b69ee Mon Sep 17 00:00:00 2001
From: Sergio del Campo Puerta <sergio@sergioelmoreno.com>
Date: Mon, 20 Jan 2025 08:09:34 +0100
Subject: [PATCH 1/7] Create Tabs component and type model

---
 src/common/components/index.ts                |  1 +
 src/common/components/tabs/index.ts           |  1 +
 src/common/components/tabs/tabs.component.tsx | 61 +++++++++++++++++++
 src/common/components/tabs/tabs.styles.ts     |  5 ++
 src/common/models/index.ts                    |  1 +
 src/common/models/tabs.model.ts               | 16 +++++
 6 files changed, 85 insertions(+)
 create mode 100644 src/common/components/tabs/index.ts
 create mode 100644 src/common/components/tabs/tabs.component.tsx
 create mode 100644 src/common/components/tabs/tabs.styles.ts
 create mode 100644 src/common/models/tabs.model.ts

diff --git a/src/common/components/index.ts b/src/common/components/index.ts
index 829e726..2cba9d0 100644
--- a/src/common/components/index.ts
+++ b/src/common/components/index.ts
@@ -4,3 +4,4 @@ export * from './sidebar-menu';
 export * from './navigation-button';
 export * from './spinner';
 export * from './form';
+export * from './tabs';
diff --git a/src/common/components/tabs/index.ts b/src/common/components/tabs/index.ts
new file mode 100644
index 0000000..69e62d8
--- /dev/null
+++ b/src/common/components/tabs/index.ts
@@ -0,0 +1 @@
+export * from './tabs.component';
diff --git a/src/common/components/tabs/tabs.component.tsx b/src/common/components/tabs/tabs.component.tsx
new file mode 100644
index 0000000..aaed682
--- /dev/null
+++ b/src/common/components/tabs/tabs.component.tsx
@@ -0,0 +1,61 @@
+import * as React from 'react';
+import { TabsProps, TabPanelProps } from '#common/models';
+import { Tabs as MUITabs, Tab, Box } from '@mui/material/';
+
+import * as classes from './tabs.styles';
+
+const TabPanel = (props: TabPanelProps) => {
+  const { children, value, index, ...other } = props;
+
+  return (
+    <div
+      role="tabpanel"
+      hidden={value !== index}
+      id={`simple-tabpanel-${index}`}
+      aria-labelledby={`simple-tab-${index}`}
+      {...other}
+    >
+      {value === index && <Box sx={{ p: 3 }}>{children}</Box>}
+    </div>
+  );
+};
+
+const a11yProps = (index: number) => {
+  return {
+    id: `simple-tab-${index}`,
+    'aria-controls': `simple-tabpanel-${index}`,
+  };
+};
+
+export const Tabs: React.FC<TabsProps> = (props: TabsProps) => {
+  const { contents } = props;
+  const [value, setValue] = React.useState<number>(0);
+
+  const handleChange = (_event: React.SyntheticEvent, newValue: number) => {
+    setValue(newValue);
+  };
+
+  return (
+    <Box sx={{ width: '100%' }}>
+      <Box sx={{ borderBottom: 1, borderColor: 'divider' }}>
+        <MUITabs
+          className={classes.tabsContainer}
+          value={value}
+          onChange={handleChange}
+          aria-label="basic tabs example"
+        >
+          {contents.map((prop, idx) => {
+            return <Tab label={prop.label} key={prop.label} {...a11yProps(idx)} />;
+          })}
+        </MUITabs>
+      </Box>
+      {contents.map((prop, idx) => {
+        return (
+          <TabPanel key={idx} value={value} index={idx}>
+            {prop.panel}
+          </TabPanel>
+        );
+      })}
+    </Box>
+  );
+};
diff --git a/src/common/components/tabs/tabs.styles.ts b/src/common/components/tabs/tabs.styles.ts
new file mode 100644
index 0000000..10f4fe3
--- /dev/null
+++ b/src/common/components/tabs/tabs.styles.ts
@@ -0,0 +1,5 @@
+import { css } from '@emotion/css';
+
+export const tabsContainer = css`
+  width: 100%;
+`;
diff --git a/src/common/models/index.ts b/src/common/models/index.ts
index 8625887..93f46af 100644
--- a/src/common/models/index.ts
+++ b/src/common/models/index.ts
@@ -1,3 +1,4 @@
 export * from './pagination.model';
 export * from './lookup.model';
 export * from './collection.model';
+export * from './tabs.model';
diff --git a/src/common/models/tabs.model.ts b/src/common/models/tabs.model.ts
new file mode 100644
index 0000000..755c4e0
--- /dev/null
+++ b/src/common/models/tabs.model.ts
@@ -0,0 +1,16 @@
+import * as React from 'react';
+
+export interface TabsProps {
+  contents: TabsObjectProps[];
+}
+
+export interface TabsObjectProps {
+  label: string;
+  panel: any;
+}
+
+export interface TabPanelProps {
+  children?: React.ReactNode;
+  index: number;
+  value: number;
+}

From 3ef85a6d423f6acdc505d11c54a5b4765a9d6b56 Mon Sep 17 00:00:00 2001
From: Sergio del Campo Puerta <sergio@sergioelmoreno.com>
Date: Mon, 20 Jan 2025 08:10:18 +0100
Subject: [PATCH 2/7] Add user-edit pod

---
 src/modules/users/edit/user-edit.pod.tsx   | 29 ++++++++++++++++++++++
 src/modules/users/edit/user-edit.styles.ts |  8 ++++++
 2 files changed, 37 insertions(+)
 create mode 100644 src/modules/users/edit/user-edit.pod.tsx
 create mode 100644 src/modules/users/edit/user-edit.styles.ts

diff --git a/src/modules/users/edit/user-edit.pod.tsx b/src/modules/users/edit/user-edit.pod.tsx
new file mode 100644
index 0000000..e7d7b1f
--- /dev/null
+++ b/src/modules/users/edit/user-edit.pod.tsx
@@ -0,0 +1,29 @@
+import React from 'react';
+import { TabsObjectProps } from '#common/models';
+import { Link } from '@tanstack/react-router';
+import { useParams } from '@tanstack/react-router';
+import * as classes from './user-edit.styles';
+import { Tabs } from '#common/components/';
+
+export const UserEditPod: React.FC = () => {
+  const { id } = useParams({ strict: false });
+
+  const tabsContents: TabsObjectProps[] = [
+    {
+      label: 'item 1',
+      panel: `item 1 panel content. User ID: ${id}`,
+    },
+    {
+      label: 'item 2',
+      panel: 'item 2 panel content',
+    },
+  ];
+
+  return (
+    <div className={classes.root}>
+      <h1>Soy la página de Edición de usuario</h1>
+      <Tabs contents={tabsContents} />
+      <Link to="/users">Navegar a listado de usuarios</Link>
+    </div>
+  );
+};
diff --git a/src/modules/users/edit/user-edit.styles.ts b/src/modules/users/edit/user-edit.styles.ts
new file mode 100644
index 0000000..6bc32c9
--- /dev/null
+++ b/src/modules/users/edit/user-edit.styles.ts
@@ -0,0 +1,8 @@
+import { css } from '@emotion/css';
+
+export const root = css`
+  display: flex;
+  flex-direction: column;
+  gap: 30px;
+  align-items: center;
+`;

From 84df64903842d7215bbdde41c8e46997a634abd6 Mon Sep 17 00:00:00 2001
From: Sergio del Campo Puerta <sergio@sergioelmoreno.com>
Date: Mon, 20 Jan 2025 08:10:44 +0100
Subject: [PATCH 3/7] Add routes and scene

---
 src/core/router/route-tree.ts      | 38 +++++++++++++++++++++++++++---
 src/modules/users/edit/index.ts    |  1 +
 src/scenes/_auth/edit-user/$id.tsx |  6 +++++
 3 files changed, 42 insertions(+), 3 deletions(-)
 create mode 100644 src/modules/users/edit/index.ts
 create mode 100644 src/scenes/_auth/edit-user/$id.tsx

diff --git a/src/core/router/route-tree.ts b/src/core/router/route-tree.ts
index 26ea30e..c2b2a65 100644
--- a/src/core/router/route-tree.ts
+++ b/src/core/router/route-tree.ts
@@ -17,6 +17,7 @@ import { Route as IndexImport } from './../../scenes/index';
 import { Route as AuthUsersIndexImport } from './../../scenes/_auth/users/index';
 import { Route as AuthCreateUserIndexImport } from './../../scenes/_auth/create-user/index';
 import { Route as AuthUsersIdImport } from './../../scenes/_auth/users/$id';
+import { Route as AuthEditUserIdImport } from './../../scenes/_auth/edit-user/$id';
 
 // Create/Update Routes
 
@@ -55,6 +56,12 @@ const AuthUsersIdRoute = AuthUsersIdImport.update({
   getParentRoute: () => AuthRoute,
 } as any);
 
+const AuthEditUserIdRoute = AuthEditUserIdImport.update({
+  id: '/edit-user/$id',
+  path: '/edit-user/$id',
+  getParentRoute: () => AuthRoute,
+} as any);
+
 // Populate the FileRoutesByPath interface
 
 declare module '@tanstack/react-router' {
@@ -80,6 +87,13 @@ declare module '@tanstack/react-router' {
       preLoaderRoute: typeof LoginImport;
       parentRoute: typeof rootRoute;
     };
+    '/_auth/edit-user/$id': {
+      id: '/_auth/edit-user/$id';
+      path: '/edit-user/$id';
+      fullPath: '/edit-user/$id';
+      preLoaderRoute: typeof AuthEditUserIdImport;
+      parentRoute: typeof AuthImport;
+    };
     '/_auth/users/$id': {
       id: '/_auth/users/$id';
       path: '/users/$id';
@@ -107,12 +121,14 @@ declare module '@tanstack/react-router' {
 // Create and export the route tree
 
 interface AuthRouteChildren {
+  AuthEditUserIdRoute: typeof AuthEditUserIdRoute;
   AuthUsersIdRoute: typeof AuthUsersIdRoute;
   AuthCreateUserIndexRoute: typeof AuthCreateUserIndexRoute;
   AuthUsersIndexRoute: typeof AuthUsersIndexRoute;
 }
 
 const AuthRouteChildren: AuthRouteChildren = {
+  AuthEditUserIdRoute: AuthEditUserIdRoute,
   AuthUsersIdRoute: AuthUsersIdRoute,
   AuthCreateUserIndexRoute: AuthCreateUserIndexRoute,
   AuthUsersIndexRoute: AuthUsersIndexRoute,
@@ -124,6 +140,7 @@ export interface FileRoutesByFullPath {
   '/': typeof IndexRoute;
   '': typeof AuthRouteWithChildren;
   '/login': typeof LoginRoute;
+  '/edit-user/$id': typeof AuthEditUserIdRoute;
   '/users/$id': typeof AuthUsersIdRoute;
   '/create-user': typeof AuthCreateUserIndexRoute;
   '/users': typeof AuthUsersIndexRoute;
@@ -133,6 +150,7 @@ export interface FileRoutesByTo {
   '/': typeof IndexRoute;
   '': typeof AuthRouteWithChildren;
   '/login': typeof LoginRoute;
+  '/edit-user/$id': typeof AuthEditUserIdRoute;
   '/users/$id': typeof AuthUsersIdRoute;
   '/create-user': typeof AuthCreateUserIndexRoute;
   '/users': typeof AuthUsersIndexRoute;
@@ -143,6 +161,7 @@ export interface FileRoutesById {
   '/': typeof IndexRoute;
   '/_auth': typeof AuthRouteWithChildren;
   '/login': typeof LoginRoute;
+  '/_auth/edit-user/$id': typeof AuthEditUserIdRoute;
   '/_auth/users/$id': typeof AuthUsersIdRoute;
   '/_auth/create-user/': typeof AuthCreateUserIndexRoute;
   '/_auth/users/': typeof AuthUsersIndexRoute;
@@ -150,10 +169,18 @@ export interface FileRoutesById {
 
 export interface FileRouteTypes {
   fileRoutesByFullPath: FileRoutesByFullPath;
-  fullPaths: '/' | '' | '/login' | '/users/$id' | '/create-user' | '/users';
+  fullPaths: '/' | '' | '/login' | '/edit-user/$id' | '/users/$id' | '/create-user' | '/users';
   fileRoutesByTo: FileRoutesByTo;
-  to: '/' | '' | '/login' | '/users/$id' | '/create-user' | '/users';
-  id: '__root__' | '/' | '/_auth' | '/login' | '/_auth/users/$id' | '/_auth/create-user/' | '/_auth/users/';
+  to: '/' | '' | '/login' | '/edit-user/$id' | '/users/$id' | '/create-user' | '/users';
+  id:
+    | '__root__'
+    | '/'
+    | '/_auth'
+    | '/login'
+    | '/_auth/edit-user/$id'
+    | '/_auth/users/$id'
+    | '/_auth/create-user/'
+    | '/_auth/users/';
   fileRoutesById: FileRoutesById;
 }
 
@@ -188,6 +215,7 @@ export const routeTree = rootRoute._addFileChildren(rootRouteChildren)._addFileT
     "/_auth": {
       "filePath": "_auth.tsx",
       "children": [
+        "/_auth/edit-user/$id",
         "/_auth/users/$id",
         "/_auth/create-user/",
         "/_auth/users/"
@@ -196,6 +224,10 @@ export const routeTree = rootRoute._addFileChildren(rootRouteChildren)._addFileT
     "/login": {
       "filePath": "login.tsx"
     },
+    "/_auth/edit-user/$id": {
+      "filePath": "_auth/edit-user/$id.tsx",
+      "parent": "/_auth"
+    },
     "/_auth/users/$id": {
       "filePath": "_auth/users/$id.tsx",
       "parent": "/_auth"
diff --git a/src/modules/users/edit/index.ts b/src/modules/users/edit/index.ts
new file mode 100644
index 0000000..b2ed9d5
--- /dev/null
+++ b/src/modules/users/edit/index.ts
@@ -0,0 +1 @@
+export * from './user-edit.pod';
diff --git a/src/scenes/_auth/edit-user/$id.tsx b/src/scenes/_auth/edit-user/$id.tsx
new file mode 100644
index 0000000..7fe0703
--- /dev/null
+++ b/src/scenes/_auth/edit-user/$id.tsx
@@ -0,0 +1,6 @@
+import { createFileRoute } from '@tanstack/react-router';
+import { UserEditPod } from '#modules/users/edit';
+
+export const Route = createFileRoute('/_auth/edit-user/$id')({
+  component: UserEditPod,
+});

From b717ef31a7ba9a077983eb5794f3c97eb2380b3c Mon Sep 17 00:00:00 2001
From: Sergio del Campo Puerta <sergio@sergioelmoreno.com>
Date: Mon, 20 Jan 2025 08:18:13 +0100
Subject: [PATCH 4/7] Add correct copies to the tabs contents

---
 src/modules/users/edit/user-edit.pod.tsx | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/modules/users/edit/user-edit.pod.tsx b/src/modules/users/edit/user-edit.pod.tsx
index e7d7b1f..3c3705c 100644
--- a/src/modules/users/edit/user-edit.pod.tsx
+++ b/src/modules/users/edit/user-edit.pod.tsx
@@ -10,12 +10,12 @@ export const UserEditPod: React.FC = () => {
 
   const tabsContents: TabsObjectProps[] = [
     {
-      label: 'item 1',
-      panel: `item 1 panel content. User ID: ${id}`,
+      label: 'Ficha usuario',
+      panel: `User ID: ${id}`,
     },
     {
-      label: 'item 2',
-      panel: 'item 2 panel content',
+      label: 'Resetear clave',
+      panel: 'Resetear clave',
     },
   ];
 

From c9169d08473ec0c9160b8536fb3013d8db3c84c5 Mon Sep 17 00:00:00 2001
From: Sergio del Campo Puerta <sergio@sergioelmoreno.com>
Date: Wed, 22 Jan 2025 09:36:02 +0100
Subject: [PATCH 5/7] Fixed map keys

---
 src/common/components/tabs/tabs.component.tsx | 14 ++++++++++++--
 1 file changed, 12 insertions(+), 2 deletions(-)

diff --git a/src/common/components/tabs/tabs.component.tsx b/src/common/components/tabs/tabs.component.tsx
index aaed682..7af900d 100644
--- a/src/common/components/tabs/tabs.component.tsx
+++ b/src/common/components/tabs/tabs.component.tsx
@@ -45,13 +45,23 @@ export const Tabs: React.FC<TabsProps> = (props: TabsProps) => {
           aria-label="basic tabs example"
         >
           {contents.map((prop, idx) => {
-            return <Tab label={prop.label} key={prop.label} {...a11yProps(idx)} />;
+            return (
+              <Tab
+                label={prop.label}
+                key={`label-${prop.label.toLocaleLowerCase().split(' ').join('-')}-${idx}`}
+                {...a11yProps(idx)}
+              />
+            );
           })}
         </MUITabs>
       </Box>
       {contents.map((prop, idx) => {
         return (
-          <TabPanel key={idx} value={value} index={idx}>
+          <TabPanel
+            key={`panel-${prop.label.toLocaleLowerCase().split(' ').join('-')}-${idx}`}
+            value={value}
+            index={idx}
+          >
             {prop.panel}
           </TabPanel>
         );

From 19354c9be42314fe97484daec153352732803d8b Mon Sep 17 00:00:00 2001
From: Sergio del Campo Puerta <sergio@sergioelmoreno.com>
Date: Wed, 29 Jan 2025 18:44:03 +0100
Subject: [PATCH 6/7] Tabs pod and component refactor

---
 src/common/components/index.ts                |  1 -
 src/common/components/tabs/index.ts           |  1 -
 src/common/components/tabs/tabs.component.tsx | 71 -------------------
 src/common/components/tabs/tabs.styles.ts     |  5 --
 src/common/models/index.ts                    |  1 -
 src/common/models/tabs.model.ts               | 16 -----
 .../edit/components/tab-panel.component.tsx   | 16 +++++
 .../users/edit/components/tabs.component.tsx  | 39 ++++++++++
 .../users/edit/components/tabs.styles.ts      | 18 +++++
 src/modules/users/edit/user-edit.pod.tsx      | 18 +----
 10 files changed, 76 insertions(+), 110 deletions(-)
 delete mode 100644 src/common/components/tabs/index.ts
 delete mode 100644 src/common/components/tabs/tabs.component.tsx
 delete mode 100644 src/common/components/tabs/tabs.styles.ts
 delete mode 100644 src/common/models/tabs.model.ts
 create mode 100644 src/modules/users/edit/components/tab-panel.component.tsx
 create mode 100644 src/modules/users/edit/components/tabs.component.tsx
 create mode 100644 src/modules/users/edit/components/tabs.styles.ts

diff --git a/src/common/components/index.ts b/src/common/components/index.ts
index 2cba9d0..829e726 100644
--- a/src/common/components/index.ts
+++ b/src/common/components/index.ts
@@ -4,4 +4,3 @@ export * from './sidebar-menu';
 export * from './navigation-button';
 export * from './spinner';
 export * from './form';
-export * from './tabs';
diff --git a/src/common/components/tabs/index.ts b/src/common/components/tabs/index.ts
deleted file mode 100644
index 69e62d8..0000000
--- a/src/common/components/tabs/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from './tabs.component';
diff --git a/src/common/components/tabs/tabs.component.tsx b/src/common/components/tabs/tabs.component.tsx
deleted file mode 100644
index 7af900d..0000000
--- a/src/common/components/tabs/tabs.component.tsx
+++ /dev/null
@@ -1,71 +0,0 @@
-import * as React from 'react';
-import { TabsProps, TabPanelProps } from '#common/models';
-import { Tabs as MUITabs, Tab, Box } from '@mui/material/';
-
-import * as classes from './tabs.styles';
-
-const TabPanel = (props: TabPanelProps) => {
-  const { children, value, index, ...other } = props;
-
-  return (
-    <div
-      role="tabpanel"
-      hidden={value !== index}
-      id={`simple-tabpanel-${index}`}
-      aria-labelledby={`simple-tab-${index}`}
-      {...other}
-    >
-      {value === index && <Box sx={{ p: 3 }}>{children}</Box>}
-    </div>
-  );
-};
-
-const a11yProps = (index: number) => {
-  return {
-    id: `simple-tab-${index}`,
-    'aria-controls': `simple-tabpanel-${index}`,
-  };
-};
-
-export const Tabs: React.FC<TabsProps> = (props: TabsProps) => {
-  const { contents } = props;
-  const [value, setValue] = React.useState<number>(0);
-
-  const handleChange = (_event: React.SyntheticEvent, newValue: number) => {
-    setValue(newValue);
-  };
-
-  return (
-    <Box sx={{ width: '100%' }}>
-      <Box sx={{ borderBottom: 1, borderColor: 'divider' }}>
-        <MUITabs
-          className={classes.tabsContainer}
-          value={value}
-          onChange={handleChange}
-          aria-label="basic tabs example"
-        >
-          {contents.map((prop, idx) => {
-            return (
-              <Tab
-                label={prop.label}
-                key={`label-${prop.label.toLocaleLowerCase().split(' ').join('-')}-${idx}`}
-                {...a11yProps(idx)}
-              />
-            );
-          })}
-        </MUITabs>
-      </Box>
-      {contents.map((prop, idx) => {
-        return (
-          <TabPanel
-            key={`panel-${prop.label.toLocaleLowerCase().split(' ').join('-')}-${idx}`}
-            value={value}
-            index={idx}
-          >
-            {prop.panel}
-          </TabPanel>
-        );
-      })}
-    </Box>
-  );
-};
diff --git a/src/common/components/tabs/tabs.styles.ts b/src/common/components/tabs/tabs.styles.ts
deleted file mode 100644
index 10f4fe3..0000000
--- a/src/common/components/tabs/tabs.styles.ts
+++ /dev/null
@@ -1,5 +0,0 @@
-import { css } from '@emotion/css';
-
-export const tabsContainer = css`
-  width: 100%;
-`;
diff --git a/src/common/models/index.ts b/src/common/models/index.ts
index 93f46af..8625887 100644
--- a/src/common/models/index.ts
+++ b/src/common/models/index.ts
@@ -1,4 +1,3 @@
 export * from './pagination.model';
 export * from './lookup.model';
 export * from './collection.model';
-export * from './tabs.model';
diff --git a/src/common/models/tabs.model.ts b/src/common/models/tabs.model.ts
deleted file mode 100644
index 755c4e0..0000000
--- a/src/common/models/tabs.model.ts
+++ /dev/null
@@ -1,16 +0,0 @@
-import * as React from 'react';
-
-export interface TabsProps {
-  contents: TabsObjectProps[];
-}
-
-export interface TabsObjectProps {
-  label: string;
-  panel: any;
-}
-
-export interface TabPanelProps {
-  children?: React.ReactNode;
-  index: number;
-  value: number;
-}
diff --git a/src/modules/users/edit/components/tab-panel.component.tsx b/src/modules/users/edit/components/tab-panel.component.tsx
new file mode 100644
index 0000000..ded4465
--- /dev/null
+++ b/src/modules/users/edit/components/tab-panel.component.tsx
@@ -0,0 +1,16 @@
+import * as React from 'react';
+import { useWithTheme } from '#core/theme/theme.hooks.ts';
+import * as innerClasses from './tabs.styles';
+
+interface TabPanelProps {
+  index: number;
+  value: number;
+  children: React.ReactNode;
+}
+
+export const TabPanel = (props: TabPanelProps) => {
+  const { children, value, index } = props;
+  const classes = useWithTheme(innerClasses);
+
+  return value === index && <div className={classes.tabPanel}>{children}</div>;
+};
diff --git a/src/modules/users/edit/components/tabs.component.tsx b/src/modules/users/edit/components/tabs.component.tsx
new file mode 100644
index 0000000..c0a9091
--- /dev/null
+++ b/src/modules/users/edit/components/tabs.component.tsx
@@ -0,0 +1,39 @@
+import * as React from 'react';
+import { TabPanel } from './tab-panel.component';
+import { Tabs as MUITabs, Tab, Paper } from '@mui/material/';
+
+import * as innerClasses from './tabs.styles';
+
+enum TabIndex {
+  USER_SHEET,
+  RESET_PASSWORD,
+}
+
+interface Props {
+  id: string;
+}
+
+export const Tabs: React.FC<Props> = ({ id }) => {
+  const [activeTab, setActiveTab] = React.useState<number>(0);
+
+  const handleChange = (_event: React.SyntheticEvent, newValue: number) => setActiveTab(newValue);
+
+  return (
+    <div className={innerClasses.tabsComponent}>
+      <Paper elevation={0}>
+        <div className={innerClasses.tabsContainer}>
+          <MUITabs value={activeTab} onChange={handleChange}>
+            <Tab label="Ficha de usuario" />
+            <Tab label="Resetear Password" />
+          </MUITabs>
+        </div>
+        <TabPanel value={activeTab} index={TabIndex.USER_SHEET}>
+          <h3>User id: {id}</h3>
+        </TabPanel>
+        <TabPanel value={activeTab} index={TabIndex.RESET_PASSWORD}>
+          <h3>Reset Password</h3>
+        </TabPanel>
+      </Paper>
+    </div>
+  );
+};
diff --git a/src/modules/users/edit/components/tabs.styles.ts b/src/modules/users/edit/components/tabs.styles.ts
new file mode 100644
index 0000000..c8f4e5e
--- /dev/null
+++ b/src/modules/users/edit/components/tabs.styles.ts
@@ -0,0 +1,18 @@
+import { css } from '@emotion/css';
+import { Theme } from '@mui/material';
+
+export const tabsComponent = css`
+  display: 'flex';
+  flexdirection: 'column';
+  alignitems: 'center';
+  width: 100%;
+`;
+
+export const tabsContainer = css`
+  border-bottom: 1;
+  border-color: 'divider';
+`;
+
+export const tabPanel = (theme: Theme) => css`
+  padding-block: ${theme.spacing(2)};
+`;
diff --git a/src/modules/users/edit/user-edit.pod.tsx b/src/modules/users/edit/user-edit.pod.tsx
index 3c3705c..af388e8 100644
--- a/src/modules/users/edit/user-edit.pod.tsx
+++ b/src/modules/users/edit/user-edit.pod.tsx
@@ -1,28 +1,16 @@
 import React from 'react';
-import { TabsObjectProps } from '#common/models';
 import { Link } from '@tanstack/react-router';
 import { useParams } from '@tanstack/react-router';
+import { Tabs } from './components/tabs.component';
 import * as classes from './user-edit.styles';
-import { Tabs } from '#common/components/';
 
 export const UserEditPod: React.FC = () => {
-  const { id } = useParams({ strict: false });
-
-  const tabsContents: TabsObjectProps[] = [
-    {
-      label: 'Ficha usuario',
-      panel: `User ID: ${id}`,
-    },
-    {
-      label: 'Resetear clave',
-      panel: 'Resetear clave',
-    },
-  ];
+  const { id } = useParams({ from: '/_auth/edit-user/$id' });
 
   return (
     <div className={classes.root}>
       <h1>Soy la página de Edición de usuario</h1>
-      <Tabs contents={tabsContents} />
+      <Tabs id={id} />
       <Link to="/users">Navegar a listado de usuarios</Link>
     </div>
   );

From 652d161e4b7179b863ffa91bff2cbf515bb6f75c Mon Sep 17 00:00:00 2001
From: Sergio del Campo Puerta <sergio@sergioelmoreno.com>
Date: Thu, 30 Jan 2025 11:00:20 +0100
Subject: [PATCH 7/7] Fixed links in users.columns

---
 src/modules/users/list/users.columns.tsx | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/src/modules/users/list/users.columns.tsx b/src/modules/users/list/users.columns.tsx
index 0f4f5fc..e989a0d 100644
--- a/src/modules/users/list/users.columns.tsx
+++ b/src/modules/users/list/users.columns.tsx
@@ -23,8 +23,10 @@ export const useColumns = (): ColumnDef<Usuario>[] => {
       header: 'Comandos',
       cell: ({ row }) => (
         <Box display="flex" alignItems="center" gap={2}>
-          <VisibilityIcon />
           <Link to={`/users/${row.original.id}`} className={classes.link}>
+            <VisibilityIcon />
+          </Link>
+          <Link to={`/edit-user/${row.original.id}`} className={classes.link}>
             <EditIcon />
           </Link>
           <DeleteIcon />