Feature/#30 create edit user scene

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,17 +161,26 @@ 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;
 }
 
 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"

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>;
+};

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>
+  );
+};

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)};
+`;

src/modules/users/edit/index.ts

@@ -0,0 +1 @@
+export * from './user-edit.pod';

src/modules/users/edit/user-edit.pod.tsx

@@ -0,0 +1,17 @@
+import React from 'react';
+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';
+
+export const UserEditPod: React.FC = () => {
+  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 id={id} />
+      <Link to="/users">Navegar a listado de usuarios</Link>
+    </div>
+  );
+};

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;
+`;

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 />

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,
+});