add table page1

client/src/components/admin.rs

@@ -1,4 +1,8 @@
 // src/components/admin.rs
 pub mod admin_panel;
+pub mod admin_panel_admin;
+pub mod add_table;
 
 pub use admin_panel::*;
+pub use admin_panel_admin::*;
+pub use add_table::*;

client/src/components/admin/add_table.rs

@@ -0,0 +1,209 @@
+// src/components/admin/add_table.rs
+use crate::config::colors::themes::Theme;
+use crate::state::{
+    app::state::AppState,
+    pages::add_table::{AddTableFocus, AddTableState},
+};
+use ratatui::{
+    layout::{Alignment, Constraint, Direction, Layout, Rect},
+    style::{Modifier, Style, Stylize},
+    text::{Line, Span},
+    widgets::{
+        Block, BorderType, Borders, Cell, Paragraph, Row, Table, TableState,
+    },
+    Frame,
+};
+
+/// Renders the detailed page for adding a new table.
+pub fn render_add_table(
+    f: &mut Frame,
+    area: Rect,
+    theme: &Theme,
+    app_state: &AppState,
+    add_table_state: &mut AddTableState,
+) {
+    let focused_style = Style::default().fg(theme.highlight);
+    let unfocused_style = Style::default().fg(theme.border);
+    let base_style = Style::default().fg(theme.fg);
+    let header_style = Style::default().fg(theme.secondary);
+    let selected_row_style = Style::default().bg(theme.highlight).fg(theme.bg);
+
+    // --- Main Block ---
+    let main_block = Block::default()
+        .title(" Create New Table ")
+        .borders(Borders::ALL)
+        .border_type(BorderType::Rounded)
+        .border_style(Style::default().fg(theme.accent))
+        .style(Style::default().bg(theme.bg));
+    let inner_area = main_block.inner(area);
+    f.render_widget(main_block, area);
+
+    // --- Layout ---
+    let constraints = [
+        Constraint::Length(1), // Profile line
+        Constraint::Length(1), // Table Name line
+        Constraint::Length(1), // Spacer
+        Constraint::Length(1), // Columns Header
+        Constraint::Min(3),    // Columns Table (at least 3 rows visible)
+        Constraint::Length(1), // Spacer
+        Constraint::Length(1), // Indexes Header
+        Constraint::Min(2),    // Indexes Table
+        Constraint::Length(1), // Spacer
+        Constraint::Length(1), // Links Header
+        Constraint::Min(3),    // Links Table
+        Constraint::Length(1), // Spacer
+        Constraint::Length(1), // Action Buttons
+    ];
+    let chunks = Layout::default()
+        .direction(Direction::Vertical)
+        .constraints(constraints)
+        .margin(1) // Add margin inside the main block
+        .split(inner_area);
+
+    // --- Helper: Get Border Style based on Focus ---
+    let get_border_style = |focus: AddTableFocus| {
+        if add_table_state.current_focus == focus {
+            focused_style
+        } else {
+            unfocused_style
+        }
+    };
+
+    // --- 1. Profile Line ---
+    // TODO: Fetch actual selected profile if needed, using app_state.selected_profile or admin_state
+    let profile_text = format!("Profile: {}", add_table_state.profile_name);
+    f.render_widget(Paragraph::new(profile_text).style(base_style), chunks[0]);
+
+    // --- 2. Table Name Line ---
+    let table_name_block = Block::default()
+        .borders(Borders::BOTTOM)
+        .border_style(get_border_style(AddTableFocus::TableName));
+    // Basic rendering for now, cursor needs event handling logic
+    let table_name_text = format!("Table Name: [ {} ]", add_table_state.table_name);
+    let table_name_paragraph = Paragraph::new(table_name_text)
+        .style(base_style)
+        .block(table_name_block);
+    f.render_widget(table_name_paragraph, chunks[1]);
+
+    // --- 4. Columns Header ---
+    let columns_header = Paragraph::new(Line::from(vec![
+        Span::styled(" Name         ", header_style),
+        Span::raw("| "),
+        Span::styled("Type        ", header_style),
+        Span::raw("| "),
+        Span::styled(" <- Add Column (Ctrl+A)", header_style.add_modifier(Modifier::ITALIC)),
+    ]));
+    f.render_widget(columns_header, chunks[3]);
+
+    // --- 5. Columns Table ---
+    let columns_block = Block::default()
+        .borders(Borders::TOP | Borders::BOTTOM) // Only top/bottom for visual separation
+        .border_style(get_border_style(AddTableFocus::Columns));
+    let columns_table_area = columns_block.inner(chunks[4]);
+    f.render_widget(columns_block, chunks[4]);
+
+    let column_rows = add_table_state.columns.iter().map(|col| {
+        Row::new(vec![
+            Cell::from(col.name.as_str()),
+            Cell::from(col.data_type.as_str()),
+        ])
+        .style(base_style)
+    });
+    let column_widths = [Constraint::Percentage(50), Constraint::Percentage(50)];
+    let columns_table = Table::new(column_rows, column_widths)
+        .highlight_style(selected_row_style)
+        .highlight_symbol("* "); // Indicate selection
+    f.render_stateful_widget(
+        columns_table,
+        columns_table_area,
+        &mut add_table_state.column_table_state,
+    );
+
+    // --- 7. Indexes Header ---
+    let indexes_header = Paragraph::new(Line::from(vec![
+        Span::styled(" Column Name  ", header_style),
+        Span::raw("| "),
+        Span::styled(" <- Add Index (Ctrl+I), Remove (Ctrl+X)", header_style.add_modifier(Modifier::ITALIC)),
+    ]));
+    f.render_widget(indexes_header, chunks[6]);
+
+    // --- 8. Indexes Table ---
+    let indexes_block = Block::default()
+        .borders(Borders::TOP | Borders::BOTTOM)
+        .border_style(get_border_style(AddTableFocus::Indexes));
+    let indexes_table_area = indexes_block.inner(chunks[7]);
+    f.render_widget(indexes_block, chunks[7]);
+
+    let index_rows = add_table_state.indexes.iter().map(|idx_col_name| {
+        Row::new(vec![Cell::from(idx_col_name.as_str())]).style(base_style)
+    });
+    let index_widths = [Constraint::Percentage(100)];
+    let indexes_table = Table::new(index_rows, index_widths)
+        .highlight_style(selected_row_style)
+        .highlight_symbol("* ");
+    f.render_stateful_widget(
+        indexes_table,
+        indexes_table_area,
+        &mut add_table_state.index_table_state,
+    );
+
+    // --- 10. Links Header ---
+    let links_header = Paragraph::new(Line::from(vec![
+        Span::styled(" Linked Table           ", header_style),
+        Span::raw("| "),
+        Span::styled("Required? ", header_style),
+        Span::raw("| "),
+        Span::styled(" <- Toggle Required (Space)", header_style.add_modifier(Modifier::ITALIC)),
+    ]));
+    f.render_widget(links_header, chunks[9]);
+
+    // --- 11. Links Table ---
+    let links_block = Block::default()
+        .borders(Borders::TOP | Borders::BOTTOM)
+        .border_style(get_border_style(AddTableFocus::Links));
+    let links_table_area = links_block.inner(chunks[10]);
+    f.render_widget(links_block, chunks[10]);
+
+    let link_rows = add_table_state.links.iter().map(|link| {
+        let required_text = if link.is_required { "[X] Yes" } else { "[ ] No " }; // Pad No for alignment
+        Row::new(vec![
+            Cell::from(link.linked_table_name.as_str()),
+            Cell::from(required_text),
+        ])
+        .style(base_style)
+    });
+    let link_widths = [Constraint::Percentage(70), Constraint::Percentage(30)];
+    let links_table = Table::new(link_rows, link_widths)
+        .highlight_style(selected_row_style)
+        .highlight_symbol("* ");
+    f.render_stateful_widget(
+        links_table,
+        links_table_area,
+        &mut add_table_state.link_table_state,
+    );
+
+    // --- 13. Action Buttons ---
+    let button_layout = Layout::default()
+        .direction(Direction::Horizontal)
+        .constraints([Constraint::Percentage(50), Constraint::Percentage(50)])
+        .split(chunks[12]);
+
+    let save_button = Paragraph::new("[ Save Table ]")
+        .alignment(Alignment::Center)
+        .style(if add_table_state.current_focus == AddTableFocus::SaveButton {
+            selected_row_style // Use selected style for focused button
+        } else {
+            base_style
+        });
+    let cancel_button = Paragraph::new("[ Cancel ]")
+        .alignment(Alignment::Center)
+        .style(if add_table_state.current_focus == AddTableFocus::CancelButton {
+            selected_row_style
+        } else {
+            base_style
+        });
+
+    f.render_widget(save_button, button_layout[0]);
+    f.render_widget(cancel_button, button_layout[1]);
+}
+

client/src/components/admin/admin_panel.rs

@@ -2,6 +2,7 @@
 
 use crate::config::colors::themes::Theme;
 use crate::state::pages::auth::AuthState;
+use crate::state::app::state::AppState;
 use crate::state::pages::admin::AdminState;
 use common::proto::multieko2::table_definition::ProfileTreeResponse;
 use ratatui::{
@@ -11,21 +12,13 @@ use ratatui::{
     widgets::{Block, BorderType, Borders, List, ListItem, Paragraph, Wrap},
     Frame,
 };
-
+use super::admin_panel_admin::render_admin_panel_admin;
-/// Renders the view specific to admin users.
-fn render_admin_panel_admin(f: &mut Frame, content_chunks: &[Rect], theme: &Theme) {
-    // Admin-specific view placeholder
-    let admin_message = Paragraph::new("Admin-specific view. Profile selection not applicable.")
-        .style(Style::default().fg(theme.fg))
-        .alignment(Alignment::Center);
-    // Render only in the right pane for now, leaving left empty
-    f.render_widget(admin_message, content_chunks[1]);
-}
 
 pub fn render_admin_panel(
     f: &mut Frame,
+    app_state: &AppState,
     auth_state: &AuthState,
-    admin_state: &AdminState,
+    admin_state: &mut AdminState,
     area: Rect,
     theme: &Theme,
     profile_tree: &ProfileTreeResponse,
@@ -45,11 +38,6 @@ pub fn render_admin_panel(
         .constraints([Constraint::Length(3), Constraint::Min(1)])
         .split(inner_area);
 
-    // Title
-    let title = Line::from(Span::styled("Admin Panel", Style::default().fg(theme.highlight)));
-    let title_widget = Paragraph::new(title).alignment(Alignment::Center);
-    f.render_widget(title_widget, chunks[0]);
-
     // Content
     let content_chunks = Layout::default()
         .direction(Direction::Horizontal)
@@ -66,7 +54,13 @@ pub fn render_admin_panel(
             selected_profile,
         );
     } else {
-        render_admin_panel_admin(f, &content_chunks, theme);
+        render_admin_panel_admin(
+            f,
+            chunks[1],
+            app_state,
+            admin_state,
+            theme,
+        );
     }
 }
 
@@ -98,8 +92,8 @@ fn render_admin_panel_non_admin(
         .block(Block::default().title("Profiles"))
         .highlight_style(Style::default().bg(theme.highlight).fg(theme.bg));
 
-    let mut list_state_clone = admin_state.list_state.clone();
+    let mut profile_list_state_clone = admin_state.profile_list_state.clone();
-    f.render_stateful_widget(list, content_chunks[0], &mut list_state_clone);
+    f.render_stateful_widget(list, content_chunks[0], &mut profile_list_state_clone);
 
     // Profile details - Use selection info from admin_state
     if let Some(profile) = admin_state

client/src/components/admin/admin_panel_admin.rs

@@ -0,0 +1,243 @@
+// src/components/admin/admin_panel_admin.rs
+
+use crate::config::colors::themes::Theme;
+use crate::state::pages::admin::{AdminFocus, AdminState};
+use crate::state::app::state::AppState;
+use ratatui::{
+    layout::{Alignment, Constraint, Direction, Layout, Rect},
+    style::Style,
+    text::{Line, Span, Text}, // Added Text
+    widgets::{Block, BorderType, Borders, List, ListItem, ListState, Paragraph},
+    Frame,
+};
+
+/// Renders the view specific to admin users with a three-pane layout.
+pub fn render_admin_panel_admin(
+    f: &mut Frame,
+    area: Rect,
+    app_state: &AppState,
+    admin_state: &mut AdminState,
+    theme: &Theme,
+) {
+    // Split vertically: Top for panes, Bottom for buttons
+    let main_chunks = Layout::default()
+        .direction(Direction::Vertical)
+        .constraints([Constraint::Min(0), Constraint::Length(1)].as_ref()) // 1 line for buttons
+        .split(area);
+    let panes_area = main_chunks[0];
+    let buttons_area = main_chunks[1];
+
+    // Split the top area into three panes: Profiles | Tables | Dependencies
+    let pane_chunks = Layout::default()
+        .direction(Direction::Horizontal)
+        .constraints([
+            Constraint::Percentage(25), // Profiles
+            Constraint::Percentage(40), // Tables
+            Constraint::Percentage(35), // Dependencies
+        ].as_ref())
+        .split(panes_area); // Use the whole area directly
+
+    let profiles_pane = pane_chunks[0];
+    let tables_pane = pane_chunks[1];
+    let deps_pane = pane_chunks[2];
+
+    // --- Profiles Pane (Left) ---
+    let profile_focus = admin_state.current_focus == AdminFocus::Profiles;
+    let profile_border_style = if profile_focus {
+        Style::default().fg(theme.highlight)
+    } else {
+        Style::default().fg(theme.border)
+    };
+
+    // Block for the profiles pane
+    let profiles_block = Block::default()
+        .title(" Profiles ")
+        .borders(Borders::ALL)
+        .border_type(BorderType::Rounded)
+        .border_style(profile_border_style);
+    let profiles_inner_area = profiles_block.inner(profiles_pane); // Get inner area for list
+    f.render_widget(profiles_block, profiles_pane); // Render the block itself
+
+    // Create profile list items
+    let profile_list_items: Vec<ListItem> = app_state
+        .profile_tree
+        .profiles
+        .iter()
+        .enumerate()
+        .map(|(idx, profile)| {
+            // Check persistent selection for prefix, navigation state for style/highlight
+            let is_selected = admin_state.selected_profile_index == Some(idx); // Use persistent state for [*]
+            let is_navigated = admin_state.profile_list_state.selected() == Some(idx); // Use nav state for highlight/>
+            let prefix = if is_selected { "[*] " } else { "[ ] " };
+            let style = if is_selected { // Style based on selection too
+                Style::default().fg(theme.highlight).add_modifier(ratatui::style::Modifier::BOLD)
+            } else {
+                Style::default().fg(theme.fg)
+            };
+            ListItem::new(Line::from(vec![
+                    Span::styled(prefix, style),
+                    Span::styled(&profile.name, style)
+            ]))
+        })
+    .collect();
+
+    // Build and render profile list inside the block's inner area
+    let profile_list = List::new(profile_list_items)
+        // Highlight style depends on focus AND navigation state
+        .highlight_style(if profile_focus { // Use focus state
+            Style::default().add_modifier(ratatui::style::Modifier::REVERSED)
+        } else {
+            Style::default()
+        })
+    .highlight_symbol(if profile_focus { "> " } else { "  " });
+
+    f.render_stateful_widget(profile_list, profiles_inner_area, &mut admin_state.profile_list_state);
+
+    // --- Tables Pane (Middle) ---
+    let table_focus = admin_state.current_focus == AdminFocus::Tables;
+    let table_border_style = if table_focus {
+        Style::default().fg(theme.highlight)
+    } else {
+        Style::default().fg(theme.border)
+    };
+
+    // Get selected profile information
+    let navigated_profile_idx = admin_state.profile_list_state.selected(); // Use nav state for display
+    let selected_profile_name = app_state
+        .profile_tree
+        .profiles
+        .get(navigated_profile_idx.unwrap_or(usize::MAX)) // Use nav state for title
+        .map_or("None", |p| &p.name);
+
+    // Block for the tables pane
+    let tables_block = Block::default()
+        .title(format!(" Tables (Profile: {}) ", selected_profile_name))
+        .borders(Borders::ALL)
+        .border_type(BorderType::Rounded)
+        .border_style(table_border_style);
+    let tables_inner_area = tables_block.inner(tables_pane); // Get inner area for list
+    f.render_widget(tables_block, tables_pane); // Render the block itself
+
+    // Create table list items and get dependencies for the selected table
+    let (table_list_items, selected_table_deps): (Vec<ListItem>, Vec<String>) = if let Some(
+        profile, // Get profile based on NAVIGATED profile index
+    ) = navigated_profile_idx.and_then(|idx| app_state.profile_tree.profiles.get(idx)) {
+        let items: Vec<ListItem> = profile
+            .tables
+            .iter()
+            .enumerate()
+            .map(|(idx, table)| { // Renamed i to idx for clarity
+                                  // Check persistent selection for prefix, navigation state for style/highlight
+                let is_selected = admin_state.selected_table_index == Some(idx); // Use persistent state for [*]
+                let is_navigated = admin_state.table_list_state.selected() == Some(idx); // Use nav state for highlight/>
+                let prefix = if is_selected { "[*] " } else { "[ ] " };
+                let style = if is_navigated { // Style based on navigation highlight
+                    Style::default().fg(theme.highlight).add_modifier(ratatui::style::Modifier::BOLD)
+                } else {
+                    Style::default().fg(theme.fg)
+                };
+                ListItem::new(Line::from(vec![
+                        Span::styled(prefix, style),
+                        Span::styled(&table.name, style),
+                ]))
+            })
+        .collect();
+
+        // Get dependencies only for the PERSISTENTLY selected table in the PERSISTENTLY selected profile
+        let chosen_profile_idx = admin_state.selected_profile_index; // Use persistent profile selection
+        let deps = chosen_profile_idx // Start with the chosen profile index
+            .and_then(|p_idx| app_state.profile_tree.profiles.get(p_idx)) // Get the chosen profile
+            .and_then(|p| admin_state.selected_table_index.and_then(|t_idx| p.tables.get(t_idx))) // Get the chosen table using its index
+            .map_or(Vec::new(), |t| t.depends_on.clone()); // If found, clone its depends_on, otherwise return empty Vec
+
+        (items, deps)
+    } else {
+        // Default when no profile is selected
+        (vec![ListItem::new("Select a profile to see tables")], vec![])
+    };
+
+    // Build and render table list inside the block's inner area
+    let table_list = List::new(table_list_items)
+        // Highlight style depends on focus AND navigation state
+        .highlight_style(if table_focus { // Use focus state
+            Style::default().add_modifier(ratatui::style::Modifier::REVERSED)
+        } else {
+            Style::default()
+        })
+    .highlight_symbol(if table_focus { "> " } else { "  " }); // Focus indicator
+
+    f.render_stateful_widget(table_list, tables_inner_area, &mut admin_state.table_list_state);
+
+    // --- Dependencies Pane (Right) ---
+    // Get name based on PERSISTENT selections
+    let chosen_profile_idx = admin_state.selected_profile_index; // Use persistent profile selection
+    let selected_table_name = chosen_profile_idx
+        .and_then(|p_idx| app_state.profile_tree.profiles.get(p_idx))
+        .and_then(|p| admin_state.selected_table_index.and_then(|t_idx| p.tables.get(t_idx))) // Use persistent table selection
+        .map_or("N/A", |t| &t.name); // Get name of the selected table
+
+    // Block for the dependencies pane
+    let deps_block = Block::default()
+        .title(format!(" Dependencies (Table: {}) ", selected_table_name))
+        .borders(Borders::ALL)
+        .border_type(BorderType::Rounded)
+        .border_style(Style::default().fg(theme.border)); // No focus highlight for deps pane
+    let deps_inner_area = deps_block.inner(deps_pane); // Get inner area for content
+    f.render_widget(deps_block, deps_pane); // Render the block itself
+
+    // Prepare content for the dependencies paragraph
+    let mut deps_content = Text::default();
+    deps_content.lines.push(Line::from(Span::styled(
+                "Depends On:",
+                Style::default().fg(theme.accent), // Use accent color for the label
+    )));
+
+    if !selected_table_deps.is_empty() {
+        for dep in selected_table_deps {
+            // List each dependency
+            deps_content.lines.push(Line::from(Span::styled(format!("- {}", dep), theme.fg)));
+        }
+    } else {
+        // Indicate if there are no dependencies
+        deps_content.lines.push(Line::from(Span::styled("  None", theme.secondary)));
+    }
+
+    // Build and render dependencies paragraph inside the block's inner area
+    let deps_paragraph = Paragraph::new(deps_content);
+    f.render_widget(deps_paragraph, deps_inner_area);
+
+    // --- Buttons Row ---
+    let button_chunks = Layout::default()
+        .direction(Direction::Horizontal)
+        .constraints([
+            Constraint::Percentage(33),
+            Constraint::Percentage(34),
+            Constraint::Percentage(33),
+        ].as_ref())
+        .split(buttons_area);
+
+    let btn_base_style = Style::default().fg(theme.secondary);
+
+    // Define the helper closure to get style based on focus
+    let get_btn_style = |button_focus: AdminFocus| {
+        if admin_state.current_focus == button_focus {
+            // Apply highlight style if this button is focused
+            btn_base_style.add_modifier(ratatui::style::Modifier::REVERSED)
+        } else {
+            btn_base_style // Use base style otherwise
+        }
+    };
+    let btn1 = Paragraph::new("Add Logic")
+        .style(get_btn_style(AdminFocus::Button1))
+        .alignment(Alignment::Center);
+    let btn2 = Paragraph::new("Add Table")
+        .style(get_btn_style(AdminFocus::Button2))
+        .alignment(Alignment::Center);
+    let btn3 = Paragraph::new("Change Table")
+        .style(get_btn_style(AdminFocus::Button3))
+        .alignment(Alignment::Center);
+
+    f.render_widget(btn1, button_chunks[0]);
+    f.render_widget(btn2, button_chunks[1]);
+    f.render_widget(btn3, button_chunks[2]);
+}

client/src/components/common/autocomplete.rs

@@ -81,10 +81,10 @@ pub fn render_autocomplete_dropdown(
     let list = List::new(items);
 
     // State for managing selection highlight (still needed for logic)
-    let mut list_state = ListState::default();
+    let mut profile_list_state = ListState::default();
-    list_state.select(selected_index);
+    profile_list_state.select(selected_index);
 
     // Render the list statefully *over* the background block
-    f.render_stateful_widget(list, dropdown_area, &mut list_state);
+    f.render_stateful_widget(list, dropdown_area, &mut profile_list_state);
 }
 

client/src/config/colors/themes.rs

@@ -11,6 +11,7 @@ pub struct Theme {
     pub warning: Color,
     pub border: Color,
     pub highlight_bg: Color,
+    pub inactive_highlight_bg: Color,// admin panel no idea what it really is
 }
 
 impl Theme {
@@ -33,6 +34,7 @@ impl Theme {
             warning: Color::Rgb(255, 182, 193), // Pastel pink
             border: Color::Rgb(220, 220, 220), // Light gray border
             highlight_bg: Color::Rgb(70, 70, 70), // Darker grey for highlight background
+            inactive_highlight_bg: Color::Rgb(50, 50, 50),
         }
     }
 
@@ -47,6 +49,7 @@ impl Theme {
             warning: Color::Rgb(255, 99, 71), // Bright red
             border: Color::Rgb(100, 100, 100), // Medium gray border
             highlight_bg: Color::Rgb(180, 180, 180), // Lighter grey for highlight background
+            inactive_highlight_bg: Color::Rgb(50, 50, 50),
         }
     }
 
@@ -61,6 +64,7 @@ impl Theme {
             warning: Color::Rgb(255, 0, 0), // Red
             border: Color::Rgb(0, 0, 0),   // Black border
             highlight_bg: Color::Rgb(180, 180, 180), // Lighter grey for highlight background
+            inactive_highlight_bg: Color::Rgb(50, 50, 50),
         }
     }
 }

client/src/functions/common/buffer.rs

@@ -6,7 +6,7 @@ use crate::state::app::buffer::AppView;
 pub fn get_view_layer(view: &AppView) -> u8 {
     match view {
         AppView::Intro => 1,
-        AppView::Login | AppView::Register | AppView::Admin => 2,
+        AppView::Login | AppView::Register | AppView::Admin | AppView::AddTable => 2,
         AppView::Form(_) | AppView::Scratch => 3,
     }
 }

client/src/functions/modes.rs

@@ -6,3 +6,4 @@ pub mod navigation;
 
 pub use read_only::*;
 pub use edit::*;
+pub use navigation::*;

client/src/functions/modes/navigation.rs

@@ -1,3 +1,3 @@
 // src/functions/modes/navigation.rs
 
-// pub mod admin_nav;
+pub mod admin_nav;

client/src/functions/modes/navigation/admin_nav.rs

@@ -1 +1,183 @@
 // src/functions/modes/navigation/admin_nav.rs
+
+use crate::config::binds::config::Config;
+use crate::state::{
+    app::state::AppState,
+    pages::admin::{AdminFocus, AdminState},
+};
+use crossterm::event::{KeyCode, KeyEvent, KeyModifiers};
+use crate::state::app::buffer::AppView;
+use crate::state::app::buffer::BufferState;
+
+/// Handles navigation events specifically for the Admin Panel view.
+/// Returns true if the event was handled, false otherwise.
+pub fn handle_admin_navigation(
+    key: KeyEvent,
+    config: &Config,
+    app_state: &AppState,
+    admin_state: &mut AdminState,
+    buffer_state: &mut BufferState,
+    command_message: &mut String,
+) -> bool {
+    let action = config.get_general_action(key.code, key.modifiers);
+    let current_focus = admin_state.current_focus;
+    let profile_count = app_state.profile_tree.profiles.len();
+
+    match action {
+        // --- Vertical Navigation (Up/Down) ---
+        Some("move_up") => {
+            match current_focus {
+                AdminFocus::Profiles => {
+                    if profile_count > 0 {
+                        // Updates navigation state, resets table state
+                        admin_state.previous_profile(profile_count);
+                        *command_message = "Navigated profiles".to_string();
+                    }
+                }
+                AdminFocus::Tables => {
+                    // Updates table navigation state
+                    if let Some(nav_profile_idx) = admin_state.profile_list_state.selected() {
+                        if let Some(profile) = app_state.profile_tree.profiles.get(nav_profile_idx) {
+                            let table_count = profile.tables.len();
+                            if table_count > 0 {
+                                admin_state.previous_table(table_count);
+                                *command_message = "Navigated tables".to_string();
+                            }
+                        }
+                    }
+                }
+                AdminFocus::Button1 | AdminFocus::Button2 | AdminFocus::Button3 => {}
+            }
+            true // Event handled
+        }
+        Some("move_down") => {
+            match current_focus {
+                AdminFocus::Profiles => {
+                    if profile_count > 0 {
+                        // Updates navigation state, resets table state
+                        admin_state.next_profile(profile_count);
+                        *command_message = "Navigated profiles".to_string();
+                    }
+                }
+                AdminFocus::Tables => {
+                    if let Some(nav_profile_idx) = admin_state.profile_list_state.selected() {
+                        if let Some(profile) = app_state.profile_tree.profiles.get(nav_profile_idx) {
+                            let table_count = profile.tables.len();
+                            if table_count > 0 {
+                                admin_state.next_table(table_count);
+                                *command_message = "Navigated tables".to_string();
+                            }
+                        }
+                    }
+                }
+                AdminFocus::Button1 | AdminFocus::Button2 | AdminFocus::Button3 => {}
+            }
+            true // Event handled
+        }
+
+        // --- Horizontal Navigation (Focus Change) ---
+        Some("next_option") | Some("previous_option") => {
+            let old_focus = admin_state.current_focus;
+            let is_next = action == Some("next_option"); // Check if 'l' or 'h'
+
+            admin_state.current_focus = match old_focus {
+                AdminFocus::Profiles => if is_next { AdminFocus::Tables } else { AdminFocus::Button3 }, // P -> T (l) or P -> B3 (h)
+                AdminFocus::Tables => if is_next { AdminFocus::Button1 } else { AdminFocus::Profiles }, // T -> B1 (l) or T -> P (h)
+                AdminFocus::Button1 => if is_next { AdminFocus::Button2 } else { AdminFocus::Tables },   // B1 -> B2 (l) or B1 -> T (h)
+                AdminFocus::Button2 => if is_next { AdminFocus::Button3 } else { AdminFocus::Button1 },   // B2 -> B3 (l) or B2 -> B1 (h)
+                AdminFocus::Button3 => if is_next { AdminFocus::Profiles } else { AdminFocus::Button2 }, // B3 -> P (l) or B3 -> B2 (h)
+            };
+
+            let new_focus = admin_state.current_focus;
+            *command_message = format!("Focus set to {:?}", new_focus);
+            // Auto-select first item only when moving from Profiles to Tables via 'l'
+            if old_focus == AdminFocus::Profiles && new_focus == AdminFocus::Tables && is_next {
+                 if let Some(profile_idx) = admin_state.profile_list_state.selected() {
+                     if let Some(profile) = app_state.profile_tree.profiles.get(profile_idx) {
+                         if !profile.tables.is_empty() {
+                             admin_state.table_list_state.select(Some(0));
+                         } else {
+                             admin_state.table_list_state.select(None);
+                         }
+                     } else {
+                          admin_state.table_list_state.select(None);
+                     }
+                 } else {
+                      admin_state.table_list_state.select(None);
+                 }
+            }
+            // Clear table nav selection if moving away from Tables
+            if old_focus == AdminFocus::Tables && new_focus != AdminFocus::Tables {
+                 admin_state.table_list_state.select(None);
+            }
+            // Clear profile nav selection if moving away from Profiles
+            if old_focus == AdminFocus::Profiles && new_focus != AdminFocus::Profiles {
+                 // Maybe keep profile nav highlight? Let's try clearing it.
+                 // admin_state.profile_list_state.select(None); // Optional: clear profile nav highlight
+            }
+
+            true // Event handled
+        }
+
+        // --- Selection ---
+        Some("select") => {
+            match current_focus {
+                AdminFocus::Profiles => {
+                    // Set the persistent selection to the currently navigated item
+                    if let Some(nav_idx) = admin_state.profile_list_state.selected() {
+                        admin_state.selected_profile_index = Some(nav_idx); // Set persistent selection
+
+                        // Move focus to Tables (like pressing 'l')
+                        admin_state.current_focus = AdminFocus::Tables;
+
+                        // Select the first table for navigation highlight
+                        admin_state.table_list_state.select(None); // Clear table nav first
+                        admin_state.selected_table_index = None;   // Clear persistent table selection
+                        if let Some(profile) = app_state.profile_tree.profiles.get(nav_idx) {
+                                  if !profile.tables.is_empty() {
+                                      // Set table nav highlight
+                                      admin_state.table_list_state.select(Some(0));
+                                  }
+                              }
+
+                        *command_message = format!("Selected profile idx {}, focus on Tables", nav_idx);
+                    } else {
+                        *command_message = "No profile selected".to_string();
+                    }
+                }
+                AdminFocus::Tables => {
+                    // Set the persistent selection to the currently navigated item
+                    if let Some(nav_idx) = admin_state.table_list_state.selected() {
+                         admin_state.selected_table_index = Some(nav_idx); // Set persistent selection
+                         *command_message = format!("Selected table index {}", nav_idx);
+                     } else {
+                         *command_message = "No table highlighted".to_string();
+                     }
+                    // We don't change focus here for now.
+                }
+                AdminFocus::Button1 => {
+                    *command_message = "Action: Add Logic (Not Implemented)".to_string();
+                    // TODO: Trigger action for Button 1
+                }
+                AdminFocus::Button2 => {
+                   buffer_state.update_history(AppView::AddTable);
+                   *command_message = "Navigating to Add Table page...".to_string();
+                }
+                AdminFocus::Button3 => {
+                    *command_message = "Action: Change Table (Not Implemented)".to_string();
+                    // TODO: Trigger action for Button 3
+                }
+            }
+            true // Event handled
+        }
+
+        // --- Other General Keys (Ignore for admin nav) ---
+        Some("toggle_sidebar") | Some("toggle_buffer_list") | Some("next_field") | Some("prev_field") => {
+            // These are handled globally or not applicable here.
+            false
+        }
+
+        // --- No matching action ---
+        _ => false, // Event not handled by admin navigation
+    }
+}

client/src/modes/handlers/event.rs

@@ -39,6 +39,7 @@ use crate::modes::{
     highlight::highlight,
     general::{navigation, dialog},
 };
+use crate::functions::modes::navigation::admin_nav;
 use crate::config::binds::key_sequences::KeySequenceTracker;
 
 #[derive(Debug, Clone, PartialEq, Eq)]
@@ -103,6 +104,7 @@ impl EventHandler {
             else if ui.show_login { AppView::Login }
             else if ui.show_register { AppView::Register }
             else if ui.show_admin { AppView::Admin }
+            else if ui.show_add_table { AppView::AddTable }
             else if ui.show_form {
                 let form_name = app_state.selected_profile.clone().unwrap_or_else(|| "Data Form".to_string());
                 AppView::Form(form_name)
@@ -159,6 +161,21 @@ impl EventHandler {
 
             match current_mode {
                 AppMode::General => {
+                    // Prioritize Admin Panel navigation if it's visible
+                    if app_state.ui.show_admin
+                        && auth_state.role.as_deref() == Some("admin") {
+                        if admin_nav::handle_admin_navigation(
+                            key,
+                            config,
+                            app_state,
+                            admin_state,
+                            buffer_state,
+                            &mut self.command_message,
+                        ) {
+                            return Ok(EventOutcome::Ok(self.command_message.clone()));
+                        }
+                    }
+
                     let nav_outcome = navigation::handle_navigation_event(
                         key,
                         config,
@@ -179,10 +196,9 @@ impl EventHandler {
                                 UiContext::Intro => {
                                     intro::handle_intro_selection(app_state, buffer_state, index);
                                     if app_state.ui.show_admin {
-                                        let profile_names = app_state.profile_tree.profiles.iter()
+                                        if !app_state.profile_tree.profiles.is_empty() {
-                                            .map(|p| p.name.clone())
+                                            admin_state.profile_list_state.select(Some(0));
-                                            .collect();
+                                        }
-                                        admin_state.set_profiles(profile_names);
                                     }
                                     message = format!("Intro Option {} selected", index);
                                 }

client/src/state/app/buffer.rs

@@ -7,6 +7,7 @@ pub enum AppView {
     Login,
     Register,
     Admin,
+    AddTable,
     Form(String),
     Scratch,
 }
@@ -18,7 +19,8 @@ impl AppView {
             AppView::Intro => "Intro",
             AppView::Login => "Login",
             AppView::Register => "Register",
-            AppView::Admin => "Admin Panel",
+            AppView::Admin => "Admin_Panel",
+            AppView::AddTable => "Add_Table",
             AppView::Form(name) => name.as_str(),
             AppView::Scratch => "*scratch*",
         }

client/src/state/app/state.rs

@@ -19,6 +19,7 @@ pub struct UiState {
     pub show_buffer_list: bool,
     pub show_intro: bool,
     pub show_admin: bool,
+    pub show_add_table: bool,
     pub show_form: bool,
     pub show_login: bool,
     pub show_register: bool,
@@ -134,6 +135,7 @@ impl Default for UiState {
             show_sidebar: false,
             show_intro: true,
             show_admin: false,
+            show_add_table: false,
             show_form: false,
             show_login: false,
             show_register: false,

client/src/state/pages.rs

@@ -4,4 +4,5 @@ pub mod form;
 pub mod auth;
 pub mod admin;
 pub mod intro;
+pub mod add_table;
 pub mod canvas_state;

client/src/state/pages/add_table.rs

@@ -0,0 +1,68 @@
+// src/state/pages/add_table.rs
+use ratatui::widgets::TableState;
+
+#[derive(Debug, Clone, PartialEq, Eq)]
+pub struct ColumnDefinition {
+    pub name: String,
+    pub data_type: String,
+}
+
+#[derive(Debug, Clone, PartialEq, Eq)]
+pub struct LinkDefinition {
+    pub linked_table_name: String,
+    pub is_required: bool,
+}
+
+#[derive(Debug, Clone, Copy, PartialEq, Eq, Default)]
+pub enum AddTableFocus {
+    #[default]
+    TableName,
+    Columns,
+    Indexes,
+    Links,
+    SaveButton,
+    CancelButton,
+}
+
+#[derive(Debug, Clone)]
+pub struct AddTableState {
+    pub profile_name: String,
+    pub table_name: String,
+    pub columns: Vec<ColumnDefinition>,
+    pub indexes: Vec<String>,
+    pub links: Vec<LinkDefinition>,
+    pub current_focus: AddTableFocus,
+    pub column_table_state: TableState,
+    pub index_table_state: TableState,
+    pub link_table_state: TableState,
+    pub table_name_cursor_pos: usize,
+}
+
+impl Default for AddTableState {
+    fn default() -> Self {
+        // Initialize with some dummy data for demonstration
+        AddTableState {
+            profile_name: "default".to_string(), // Should be set dynamically
+            table_name: "new_table".to_string(),
+            columns: vec![
+                ColumnDefinition { name: "id".to_string(), data_type: "INTEGER".to_string() },
+                ColumnDefinition { name: "name".to_string(), data_type: "TEXT".to_string() },
+            ],
+            indexes: vec!["id".to_string()],
+            links: vec![
+                LinkDefinition { linked_table_name: "related_table".to_string(), is_required: true },
+                LinkDefinition { linked_table_name: "another_table".to_string(), is_required: false },
+            ],
+            current_focus: AddTableFocus::TableName,
+            column_table_state: TableState::default().with_selected(0),
+            index_table_state: TableState::default().with_selected(0),
+            link_table_state: TableState::default().with_selected(0),
+            table_name_cursor_pos: 0,
+        }
+    }
+}
+
+impl AddTableState {
+}
+
+

client/src/state/pages/admin.rs

@@ -1,65 +1,178 @@
 // src/state/pages/admin.rs
 
 use ratatui::widgets::ListState;
+use crate::state::pages::add_table::AddTableState;
+
+// Define the focus states for the admin panel panes
+#[derive(Debug, Clone, Copy, PartialEq, Eq, Default)]
+pub enum AdminFocus {
+    #[default] // Default focus is on the profiles list
+    Profiles,
+    Tables,
+    Button1,
+    Button2,
+    Button3,
+}
 
 #[derive(Default, Clone, Debug)]
 pub struct AdminState {
-    pub profiles: Vec<String>,
+    pub profiles: Vec<String>, // Holds profile names (used by non-admin view)
-    pub list_state: ListState,
+    pub profile_list_state: ListState, // Tracks navigation highlight (>) in profiles
+    pub table_list_state: ListState,   // Tracks navigation highlight (>) in tables
+    pub selected_profile_index: Option<usize>, // Index with [*] in profiles (persistent)
+    pub selected_table_index: Option<usize>,   // Index with [*] in tables (persistent)
+    pub current_focus: AdminFocus,     // Tracks which pane is focused
+    pub add_table_state: AddTableState,
 }
 
 impl AdminState {
     /// Gets the index of the currently selected item.
     pub fn get_selected_index(&self) -> Option<usize> {
-        self.list_state.selected()
+        self.profile_list_state.selected()
     }
 
     /// Gets the name of the currently selected profile.
     pub fn get_selected_profile_name(&self) -> Option<&String> {
-        self.list_state.selected().and_then(|i| self.profiles.get(i))
+        self.profile_list_state.selected().and_then(|i| self.profiles.get(i))
     }
 
     /// Populates the profile list and updates/resets the selection.
     pub fn set_profiles(&mut self, new_profiles: Vec<String>) {
-        let current_selection_index = self.list_state.selected();
+        let current_selection_index = self.profile_list_state.selected();
         self.profiles = new_profiles;
 
         if self.profiles.is_empty() {
-            self.list_state.select(None);
+            self.profile_list_state.select(None);
         } else {
             let new_selection = match current_selection_index {
                 Some(index) => Some(index.min(self.profiles.len() - 1)),
                 None => Some(0),
             };
-            self.list_state.select(new_selection);
+            self.profile_list_state.select(new_selection);
         }
     }
 
     /// Selects the next profile in the list, wrapping around.
     pub fn next(&mut self) {
         if self.profiles.is_empty() {
-            self.list_state.select(None);
+            self.profile_list_state.select(None);
             return;
         }
-        let i = match self.list_state.selected() {
+        let i = match self.profile_list_state.selected() {
             Some(i) => if i >= self.profiles.len() - 1 { 0 } else { i + 1 },
             None => 0,
         };
-        self.list_state.select(Some(i));
+        self.profile_list_state.select(Some(i));
     }
 
     /// Selects the previous profile in the list, wrapping around.
     pub fn previous(&mut self) {
         if self.profiles.is_empty() {
-            self.list_state.select(None);
+            self.profile_list_state.select(None);
             return;
         }
-        let i = match self.list_state.selected() {
+        let i = match self.profile_list_state.selected() {
             Some(i) => if i == 0 { self.profiles.len() - 1 } else { i - 1 },
             None => self.profiles.len() - 1,
         };
-        self.list_state.select(Some(i));
+        self.profile_list_state.select(Some(i));
     }
 
+    /// Gets the index of the currently selected profile.
+    pub fn get_selected_profile_index(&self) -> Option<usize> {
+        self.profile_list_state.selected()
+    }
+
+    /// Gets the index of the currently selected table.
+    pub fn get_selected_table_index(&self) -> Option<usize> {
+        self.table_list_state.selected()
+    }
+
+    /// Selects a profile by index and resets table selection.
+    pub fn select_profile(&mut self, index: Option<usize>) {
+        self.profile_list_state.select(index);
+        self.table_list_state.select(None);
+    }
+
+    /// Selects a table by index.
+    pub fn select_table(&mut self, index: Option<usize>) {
+        self.table_list_state.select(index);
+    }
+
+    /// Selects the next profile, wrapping around.
+    /// `profile_count` should be the total number of profiles available.
+    pub fn next_profile(&mut self, profile_count: usize) {
+        if profile_count == 0 {
+            return;
+        }
+        let i = match self.get_selected_profile_index() {
+            Some(i) => {
+                if i >= profile_count - 1 {
+                    0
+                } else {
+                    i + 1
+                }
+            }
+            None => 0,
+        };
+        self.select_profile(Some(i)); // Use the helper method
+    }
+
+    /// Selects the previous profile, wrapping around.
+    /// `profile_count` should be the total number of profiles available.
+    pub fn previous_profile(&mut self, profile_count: usize) {
+        if profile_count == 0 {
+            return;
+        }
+        let i = match self.get_selected_profile_index() {
+            Some(i) => {
+                if i == 0 {
+                    profile_count - 1
+                } else {
+                    i - 1
+                }
+            }
+            None => 0, // Or profile_count - 1 if you prefer wrapping from None
+        };
+        self.select_profile(Some(i)); // Use the helper method
+    }
+
+    /// Selects the next table, wrapping around.
+    /// `table_count` should be the number of tables in the *currently selected* profile.
+    pub fn next_table(&mut self, table_count: usize) {
+        if table_count == 0 {
+            return;
+        }
+        let i = match self.get_selected_table_index() {
+            Some(i) => {
+                if i >= table_count - 1 {
+                    0
+                } else {
+                    i + 1
+                }
+            }
+            None => 0,
+        };
+        self.select_table(Some(i));
+    }
+
+    /// Selects the previous table, wrapping around.
+    /// `table_count` should be the number of tables in the *currently selected* profile.
+    pub fn previous_table(&mut self, table_count: usize) {
+        if table_count == 0 {
+            return;
+        }
+        let i = match self.get_selected_table_index() {
+            Some(i) => {
+                if i == 0 {
+                    table_count - 1
+                } else {
+                    i - 1
+                }
+            }
+            None => 0, // Or table_count - 1
+        };
+        self.select_table(Some(i));
+    }
 }
 

client/src/ui/handlers/render.rs

@@ -8,6 +8,7 @@ use crate::components::{
     intro::intro::render_intro,
     handlers::sidebar::{self, calculate_sidebar_layout},
     form::form::render_form,
+    admin::render_add_table,
     auth::{login::render_login, register::render_register},
 };
 use crate::config::colors::themes::Theme;
@@ -96,6 +97,14 @@ pub fn render_ui(
             register_state.current_field < 4,
             highlight_state,
         );
+    } else if app_state.ui.show_add_table {
+        render_add_table(
+            f,
+            main_content_area,
+            theme,
+            app_state,
+            &mut admin_state.add_table_state,
+        );
     } else if app_state.ui.show_login {
         render_login(
             f,
@@ -109,6 +118,7 @@ pub fn render_ui(
     } else if app_state.ui.show_admin {
         crate::components::admin::admin_panel::render_admin_panel(
             f,
+            app_state,
             auth_state,
             admin_state,
             main_content_area,

client/src/ui/handlers/ui.rs

@@ -67,12 +67,20 @@ pub async fn run_ui() -> Result<(), Box<dyn std::error::Error>> {
             app_state.ui.show_login = false;
             app_state.ui.show_register = false;
             app_state.ui.show_admin = false;
+            app_state.ui.show_add_table = false;
             app_state.ui.show_form = false;
             match active_view {
                 AppView::Intro => app_state.ui.show_intro = true,
                 AppView::Login => app_state.ui.show_login = true,
                 AppView::Register => app_state.ui.show_register = true,
-                AppView::Admin => app_state.ui.show_admin = true,
+                AppView::Admin => {
+                    app_state.ui.show_admin = true;
+                    let profile_names = app_state.profile_tree.profiles.iter()
+                        .map(|p| p.name.clone())
+                        .collect();
+                    admin_state.set_profiles(profile_names);
+                }
+                AppView::AddTable => app_state.ui.show_add_table = true,
                 AppView::Form(_) => app_state.ui.show_form = true,
                 AppView::Scratch => {} // Or show a scratchpad component
             }