Merge branch 'develop' into 'main'

cleaning datatable component and make it more flexible/ debug notification and... See merge request witel3/loan-facilities-expert!75
2023-08-23 07:46:37 +00:00
parent 595471624c 0a7165c646
commit ca6ad96d9e
191 changed files with 12197 additions and 1952 deletions
--- a/.editorconfig
+++ b/.editorconfig
@@ -0,0 +1,485 @@
+root = true
+
+[*]
+charset = utf-8
+end_of_line = crlf
+indent_size = 4
+indent_style = space
+insert_final_newline = false
+max_line_length = 120
+tab_width = 4
+ij_continuation_indent_size = 4
+ij_formatter_off_tag = @formatter:off
+ij_formatter_on_tag = @formatter:on
+ij_formatter_tags_enabled = true
+ij_smart_tabs = false
+ij_visual_guides = none
+ij_wrap_on_typing = false
+
+[*.css]
+ij_css_align_closing_brace_with_properties = false
+ij_css_blank_lines_around_nested_selector = 1
+ij_css_blank_lines_between_blocks = 1
+ij_css_block_comment_add_space = false
+ij_css_brace_placement = end_of_line
+ij_css_enforce_quotes_on_format = false
+ij_css_hex_color_long_format = false
+ij_css_hex_color_lower_case = false
+ij_css_hex_color_short_format = false
+ij_css_hex_color_upper_case = false
+ij_css_keep_blank_lines_in_code = 2
+ij_css_keep_indents_on_empty_lines = false
+ij_css_keep_single_line_blocks = false
+ij_css_properties_order = font, font-family, font-size, font-weight, font-style, font-variant, font-size-adjust, font-stretch, line-height, position, z-index, top, right, bottom, left, display, visibility, float, clear, overflow, overflow-x, overflow-y, clip, zoom, align-content, align-items, align-self, flex, flex-flow, flex-basis, flex-direction, flex-grow, flex-shrink, flex-wrap, justify-content, order, box-sizing, width, min-width, max-width, height, min-height, max-height, margin, margin-top, margin-right, margin-bottom, margin-left, padding, padding-top, padding-right, padding-bottom, padding-left, table-layout, empty-cells, caption-side, border-spacing, border-collapse, list-style, list-style-position, list-style-type, list-style-image, content, quotes, counter-reset, counter-increment, resize, cursor, user-select, nav-index, nav-up, nav-right, nav-down, nav-left, transition, transition-delay, transition-timing-function, transition-duration, transition-property, transform, transform-origin, animation, animation-name, animation-duration, animation-play-state, animation-timing-function, animation-delay, animation-iteration-count, animation-direction, text-align, text-align-last, vertical-align, white-space, text-decoration, text-emphasis, text-emphasis-color, text-emphasis-style, text-emphasis-position, text-indent, text-justify, letter-spacing, word-spacing, text-outline, text-transform, text-wrap, text-overflow, text-overflow-ellipsis, text-overflow-mode, word-wrap, word-break, tab-size, hyphens, pointer-events, opacity, color, border, border-width, border-style, border-color, border-top, border-top-width, border-top-style, border-top-color, border-right, border-right-width, border-right-style, border-right-color, border-bottom, border-bottom-width, border-bottom-style, border-bottom-color, border-left, border-left-width, border-left-style, border-left-color, border-radius, border-top-left-radius, border-top-right-radius, border-bottom-right-radius, border-bottom-left-radius, border-image, border-image-source, border-image-slice, border-image-width, border-image-outset, border-image-repeat, outline, outline-width, outline-style, outline-color, outline-offset, background, background-color, background-image, background-repeat, background-attachment, background-position, background-position-x, background-position-y, background-clip, background-origin, background-size, box-decoration-break, box-shadow, text-shadow
+ij_css_space_after_colon = true
+ij_css_space_before_opening_brace = true
+ij_css_use_double_quotes = true
+ij_css_value_alignment = do_not_align
+
+[*.sass]
+indent_size = 2
+ij_sass_align_closing_brace_with_properties = false
+ij_sass_blank_lines_around_nested_selector = 1
+ij_sass_blank_lines_between_blocks = 1
+ij_sass_brace_placement = 0
+ij_sass_enforce_quotes_on_format = false
+ij_sass_hex_color_long_format = false
+ij_sass_hex_color_lower_case = false
+ij_sass_hex_color_short_format = false
+ij_sass_hex_color_upper_case = false
+ij_sass_keep_blank_lines_in_code = 2
+ij_sass_keep_indents_on_empty_lines = false
+ij_sass_keep_single_line_blocks = false
+ij_sass_line_comment_add_space = false
+ij_sass_line_comment_at_first_column = false
+ij_sass_properties_order = font, font-family, font-size, font-weight, font-style, font-variant, font-size-adjust, font-stretch, line-height, position, z-index, top, right, bottom, left, display, visibility, float, clear, overflow, overflow-x, overflow-y, clip, zoom, align-content, align-items, align-self, flex, flex-flow, flex-basis, flex-direction, flex-grow, flex-shrink, flex-wrap, justify-content, order, box-sizing, width, min-width, max-width, height, min-height, max-height, margin, margin-top, margin-right, margin-bottom, margin-left, padding, padding-top, padding-right, padding-bottom, padding-left, table-layout, empty-cells, caption-side, border-spacing, border-collapse, list-style, list-style-position, list-style-type, list-style-image, content, quotes, counter-reset, counter-increment, resize, cursor, user-select, nav-index, nav-up, nav-right, nav-down, nav-left, transition, transition-delay, transition-timing-function, transition-duration, transition-property, transform, transform-origin, animation, animation-name, animation-duration, animation-play-state, animation-timing-function, animation-delay, animation-iteration-count, animation-direction, text-align, text-align-last, vertical-align, white-space, text-decoration, text-emphasis, text-emphasis-color, text-emphasis-style, text-emphasis-position, text-indent, text-justify, letter-spacing, word-spacing, text-outline, text-transform, text-wrap, text-overflow, text-overflow-ellipsis, text-overflow-mode, word-wrap, word-break, tab-size, hyphens, pointer-events, opacity, color, border, border-width, border-style, border-color, border-top, border-top-width, border-top-style, border-top-color, border-right, border-right-width, border-right-style, border-right-color, border-bottom, border-bottom-width, border-bottom-style, border-bottom-color, border-left, border-left-width, border-left-style, border-left-color, border-radius, border-top-left-radius, border-top-right-radius, border-bottom-right-radius, border-bottom-left-radius, border-image, border-image-source, border-image-slice, border-image-width, border-image-outset, border-image-repeat, outline, outline-width, outline-style, outline-color, outline-offset, background, background-color, background-image, background-repeat, background-attachment, background-position, background-position-x, background-position-y, background-clip, background-origin, background-size, box-decoration-break, box-shadow, text-shadow
+ij_sass_space_after_colon = true
+ij_sass_space_before_opening_brace = true
+ij_sass_use_double_quotes = true
+ij_sass_value_alignment = 0
+
+[*.scss]
+indent_size = 2
+ij_scss_align_closing_brace_with_properties = false
+ij_scss_blank_lines_around_nested_selector = 1
+ij_scss_blank_lines_between_blocks = 1
+ij_scss_block_comment_add_space = false
+ij_scss_brace_placement = 0
+ij_scss_enforce_quotes_on_format = false
+ij_scss_hex_color_long_format = false
+ij_scss_hex_color_lower_case = false
+ij_scss_hex_color_short_format = false
+ij_scss_hex_color_upper_case = false
+ij_scss_keep_blank_lines_in_code = 2
+ij_scss_keep_indents_on_empty_lines = false
+ij_scss_keep_single_line_blocks = false
+ij_scss_line_comment_add_space = false
+ij_scss_line_comment_at_first_column = false
+ij_scss_properties_order = font, font-family, font-size, font-weight, font-style, font-variant, font-size-adjust, font-stretch, line-height, position, z-index, top, right, bottom, left, display, visibility, float, clear, overflow, overflow-x, overflow-y, clip, zoom, align-content, align-items, align-self, flex, flex-flow, flex-basis, flex-direction, flex-grow, flex-shrink, flex-wrap, justify-content, order, box-sizing, width, min-width, max-width, height, min-height, max-height, margin, margin-top, margin-right, margin-bottom, margin-left, padding, padding-top, padding-right, padding-bottom, padding-left, table-layout, empty-cells, caption-side, border-spacing, border-collapse, list-style, list-style-position, list-style-type, list-style-image, content, quotes, counter-reset, counter-increment, resize, cursor, user-select, nav-index, nav-up, nav-right, nav-down, nav-left, transition, transition-delay, transition-timing-function, transition-duration, transition-property, transform, transform-origin, animation, animation-name, animation-duration, animation-play-state, animation-timing-function, animation-delay, animation-iteration-count, animation-direction, text-align, text-align-last, vertical-align, white-space, text-decoration, text-emphasis, text-emphasis-color, text-emphasis-style, text-emphasis-position, text-indent, text-justify, letter-spacing, word-spacing, text-outline, text-transform, text-wrap, text-overflow, text-overflow-ellipsis, text-overflow-mode, word-wrap, word-break, tab-size, hyphens, pointer-events, opacity, color, border, border-width, border-style, border-color, border-top, border-top-width, border-top-style, border-top-color, border-right, border-right-width, border-right-style, border-right-color, border-bottom, border-bottom-width, border-bottom-style, border-bottom-color, border-left, border-left-width, border-left-style, border-left-color, border-radius, border-top-left-radius, border-top-right-radius, border-bottom-right-radius, border-bottom-left-radius, border-image, border-image-source, border-image-slice, border-image-width, border-image-outset, border-image-repeat, outline, outline-width, outline-style, outline-color, outline-offset, background, background-color, background-image, background-repeat, background-attachment, background-position, background-position-x, background-position-y, background-clip, background-origin, background-size, box-decoration-break, box-shadow, text-shadow
+ij_scss_space_after_colon = true
+ij_scss_space_before_opening_brace = true
+ij_scss_use_double_quotes = true
+ij_scss_value_alignment = 0
+
+[{*.ats,*.cts,*.mts,*.ts}]
+ij_continuation_indent_size = 4
+ij_typescript_align_imports = false
+ij_typescript_align_multiline_array_initializer_expression = false
+ij_typescript_align_multiline_binary_operation = false
+ij_typescript_align_multiline_chained_methods = false
+ij_typescript_align_multiline_extends_list = false
+ij_typescript_align_multiline_for = true
+ij_typescript_align_multiline_parameters = true
+ij_typescript_align_multiline_parameters_in_calls = false
+ij_typescript_align_multiline_ternary_operation = false
+ij_typescript_align_object_properties = 0
+ij_typescript_align_union_types = false
+ij_typescript_align_var_statements = 0
+ij_typescript_array_initializer_new_line_after_left_brace = false
+ij_typescript_array_initializer_right_brace_on_new_line = false
+ij_typescript_array_initializer_wrap = off
+ij_typescript_assignment_wrap = off
+ij_typescript_binary_operation_sign_on_next_line = false
+ij_typescript_binary_operation_wrap = off
+ij_typescript_blacklist_imports = rxjs/Rx, node_modules/**, **/node_modules/**, @angular/material, @angular/material/typings/**
+ij_typescript_blank_lines_after_imports = 1
+ij_typescript_blank_lines_around_class = 1
+ij_typescript_blank_lines_around_field = 0
+ij_typescript_blank_lines_around_field_in_interface = 0
+ij_typescript_blank_lines_around_function = 1
+ij_typescript_blank_lines_around_method = 1
+ij_typescript_blank_lines_around_method_in_interface = 1
+ij_typescript_block_brace_style = end_of_line
+ij_typescript_block_comment_add_space = false
+ij_typescript_block_comment_at_first_column = true
+ij_typescript_call_parameters_new_line_after_left_paren = false
+ij_typescript_call_parameters_right_paren_on_new_line = false
+ij_typescript_call_parameters_wrap = off
+ij_typescript_catch_on_new_line = false
+ij_typescript_chained_call_dot_on_new_line = true
+ij_typescript_class_brace_style = end_of_line
+ij_typescript_comma_on_new_line = false
+ij_typescript_do_while_brace_force = never
+ij_typescript_else_on_new_line = false
+ij_typescript_enforce_trailing_comma = keep
+ij_typescript_enum_constants_wrap = on_every_item
+ij_typescript_extends_keyword_wrap = off
+ij_typescript_extends_list_wrap = off
+ij_typescript_field_prefix = _
+ij_typescript_file_name_style = relaxed
+ij_typescript_finally_on_new_line = false
+ij_typescript_for_brace_force = never
+ij_typescript_for_statement_new_line_after_left_paren = false
+ij_typescript_for_statement_right_paren_on_new_line = false
+ij_typescript_for_statement_wrap = off
+ij_typescript_force_quote_style = false
+ij_typescript_force_semicolon_style = false
+ij_typescript_function_expression_brace_style = end_of_line
+ij_typescript_if_brace_force = never
+ij_typescript_import_merge_members = global
+ij_typescript_import_prefer_absolute_path = global
+ij_typescript_import_sort_members = true
+ij_typescript_import_sort_module_name = false
+ij_typescript_import_use_node_resolution = true
+ij_typescript_imports_wrap = on_every_item
+ij_typescript_indent_case_from_switch = true
+ij_typescript_indent_chained_calls = true
+ij_typescript_indent_package_children = 0
+ij_typescript_jsdoc_include_types = false
+ij_typescript_jsx_attribute_value = braces
+ij_typescript_keep_blank_lines_in_code = 2
+ij_typescript_keep_first_column_comment = true
+ij_typescript_keep_indents_on_empty_lines = false
+ij_typescript_keep_line_breaks = true
+ij_typescript_keep_simple_blocks_in_one_line = false
+ij_typescript_keep_simple_methods_in_one_line = false
+ij_typescript_line_comment_add_space = true
+ij_typescript_line_comment_at_first_column = false
+ij_typescript_method_brace_style = end_of_line
+ij_typescript_method_call_chain_wrap = off
+ij_typescript_method_parameters_new_line_after_left_paren = false
+ij_typescript_method_parameters_right_paren_on_new_line = false
+ij_typescript_method_parameters_wrap = off
+ij_typescript_object_literal_wrap = on_every_item
+ij_typescript_object_types_wrap = on_every_item
+ij_typescript_parentheses_expression_new_line_after_left_paren = false
+ij_typescript_parentheses_expression_right_paren_on_new_line = false
+ij_typescript_place_assignment_sign_on_next_line = false
+ij_typescript_prefer_as_type_cast = false
+ij_typescript_prefer_explicit_types_function_expression_returns = false
+ij_typescript_prefer_explicit_types_function_returns = false
+ij_typescript_prefer_explicit_types_vars_fields = false
+ij_typescript_prefer_parameters_wrap = false
+ij_typescript_reformat_c_style_comments = false
+ij_typescript_space_after_colon = true
+ij_typescript_space_after_comma = true
+ij_typescript_space_after_dots_in_rest_parameter = false
+ij_typescript_space_after_generator_mult = true
+ij_typescript_space_after_property_colon = true
+ij_typescript_space_after_quest = true
+ij_typescript_space_after_type_colon = true
+ij_typescript_space_after_unary_not = false
+ij_typescript_space_before_async_arrow_lparen = true
+ij_typescript_space_before_catch_keyword = true
+ij_typescript_space_before_catch_left_brace = true
+ij_typescript_space_before_catch_parentheses = true
+ij_typescript_space_before_class_lbrace = true
+ij_typescript_space_before_class_left_brace = true
+ij_typescript_space_before_colon = true
+ij_typescript_space_before_comma = false
+ij_typescript_space_before_do_left_brace = true
+ij_typescript_space_before_else_keyword = true
+ij_typescript_space_before_else_left_brace = true
+ij_typescript_space_before_finally_keyword = true
+ij_typescript_space_before_finally_left_brace = true
+ij_typescript_space_before_for_left_brace = true
+ij_typescript_space_before_for_parentheses = true
+ij_typescript_space_before_for_semicolon = false
+ij_typescript_space_before_function_left_parenth = true
+ij_typescript_space_before_generator_mult = false
+ij_typescript_space_before_if_left_brace = true
+ij_typescript_space_before_if_parentheses = true
+ij_typescript_space_before_method_call_parentheses = false
+ij_typescript_space_before_method_left_brace = true
+ij_typescript_space_before_method_parentheses = false
+ij_typescript_space_before_property_colon = false
+ij_typescript_space_before_quest = true
+ij_typescript_space_before_switch_left_brace = true
+ij_typescript_space_before_switch_parentheses = true
+ij_typescript_space_before_try_left_brace = true
+ij_typescript_space_before_type_colon = false
+ij_typescript_space_before_unary_not = false
+ij_typescript_space_before_while_keyword = true
+ij_typescript_space_before_while_left_brace = true
+ij_typescript_space_before_while_parentheses = true
+ij_typescript_spaces_around_additive_operators = true
+ij_typescript_spaces_around_arrow_function_operator = true
+ij_typescript_spaces_around_assignment_operators = true
+ij_typescript_spaces_around_bitwise_operators = true
+ij_typescript_spaces_around_equality_operators = true
+ij_typescript_spaces_around_logical_operators = true
+ij_typescript_spaces_around_multiplicative_operators = true
+ij_typescript_spaces_around_relational_operators = true
+ij_typescript_spaces_around_shift_operators = true
+ij_typescript_spaces_around_unary_operator = false
+ij_typescript_spaces_within_array_initializer_brackets = false
+ij_typescript_spaces_within_brackets = false
+ij_typescript_spaces_within_catch_parentheses = false
+ij_typescript_spaces_within_for_parentheses = false
+ij_typescript_spaces_within_if_parentheses = false
+ij_typescript_spaces_within_imports = false
+ij_typescript_spaces_within_interpolation_expressions = false
+ij_typescript_spaces_within_method_call_parentheses = false
+ij_typescript_spaces_within_method_parentheses = false
+ij_typescript_spaces_within_object_literal_braces = false
+ij_typescript_spaces_within_object_type_braces = true
+ij_typescript_spaces_within_parentheses = false
+ij_typescript_spaces_within_switch_parentheses = false
+ij_typescript_spaces_within_type_assertion = false
+ij_typescript_spaces_within_union_types = true
+ij_typescript_spaces_within_while_parentheses = false
+ij_typescript_special_else_if_treatment = true
+ij_typescript_ternary_operation_signs_on_next_line = false
+ij_typescript_ternary_operation_wrap = off
+ij_typescript_union_types_wrap = on_every_item
+ij_typescript_use_chained_calls_group_indents = false
+ij_typescript_use_double_quotes = true
+ij_typescript_use_explicit_js_extension = auto
+ij_typescript_use_path_mapping = always
+ij_typescript_use_public_modifier = false
+ij_typescript_use_semicolon_after_statement = true
+ij_typescript_var_declaration_wrap = normal
+ij_typescript_while_brace_force = never
+ij_typescript_while_on_new_line = false
+ij_typescript_wrap_comments = false
+
+[{*.cjs,*.js}]
+ij_continuation_indent_size = 4
+ij_javascript_align_imports = false
+ij_javascript_align_multiline_array_initializer_expression = false
+ij_javascript_align_multiline_binary_operation = false
+ij_javascript_align_multiline_chained_methods = false
+ij_javascript_align_multiline_extends_list = false
+ij_javascript_align_multiline_for = true
+ij_javascript_align_multiline_parameters = true
+ij_javascript_align_multiline_parameters_in_calls = false
+ij_javascript_align_multiline_ternary_operation = false
+ij_javascript_align_object_properties = 0
+ij_javascript_align_union_types = false
+ij_javascript_align_var_statements = 0
+ij_javascript_array_initializer_new_line_after_left_brace = false
+ij_javascript_array_initializer_right_brace_on_new_line = false
+ij_javascript_array_initializer_wrap = off
+ij_javascript_assignment_wrap = off
+ij_javascript_binary_operation_sign_on_next_line = false
+ij_javascript_binary_operation_wrap = off
+ij_javascript_blacklist_imports = rxjs/Rx, node_modules/**, **/node_modules/**, @angular/material, @angular/material/typings/**
+ij_javascript_blank_lines_after_imports = 1
+ij_javascript_blank_lines_around_class = 1
+ij_javascript_blank_lines_around_field = 0
+ij_javascript_blank_lines_around_function = 1
+ij_javascript_blank_lines_around_method = 1
+ij_javascript_block_brace_style = end_of_line
+ij_javascript_block_comment_add_space = false
+ij_javascript_block_comment_at_first_column = true
+ij_javascript_call_parameters_new_line_after_left_paren = false
+ij_javascript_call_parameters_right_paren_on_new_line = false
+ij_javascript_call_parameters_wrap = off
+ij_javascript_catch_on_new_line = false
+ij_javascript_chained_call_dot_on_new_line = true
+ij_javascript_class_brace_style = end_of_line
+ij_javascript_comma_on_new_line = false
+ij_javascript_do_while_brace_force = never
+ij_javascript_else_on_new_line = false
+ij_javascript_enforce_trailing_comma = keep
+ij_javascript_extends_keyword_wrap = off
+ij_javascript_extends_list_wrap = off
+ij_javascript_field_prefix = _
+ij_javascript_file_name_style = relaxed
+ij_javascript_finally_on_new_line = false
+ij_javascript_for_brace_force = never
+ij_javascript_for_statement_new_line_after_left_paren = false
+ij_javascript_for_statement_right_paren_on_new_line = false
+ij_javascript_for_statement_wrap = off
+ij_javascript_force_quote_style = false
+ij_javascript_force_semicolon_style = false
+ij_javascript_function_expression_brace_style = end_of_line
+ij_javascript_if_brace_force = never
+ij_javascript_import_merge_members = global
+ij_javascript_import_prefer_absolute_path = global
+ij_javascript_import_sort_members = true
+ij_javascript_import_sort_module_name = false
+ij_javascript_import_use_node_resolution = true
+ij_javascript_imports_wrap = on_every_item
+ij_javascript_indent_case_from_switch = true
+ij_javascript_indent_chained_calls = true
+ij_javascript_indent_package_children = 0
+ij_javascript_jsx_attribute_value = braces
+ij_javascript_keep_blank_lines_in_code = 2
+ij_javascript_keep_first_column_comment = true
+ij_javascript_keep_indents_on_empty_lines = false
+ij_javascript_keep_line_breaks = true
+ij_javascript_keep_simple_blocks_in_one_line = false
+ij_javascript_keep_simple_methods_in_one_line = false
+ij_javascript_line_comment_add_space = true
+ij_javascript_line_comment_at_first_column = false
+ij_javascript_method_brace_style = end_of_line
+ij_javascript_method_call_chain_wrap = off
+ij_javascript_method_parameters_new_line_after_left_paren = false
+ij_javascript_method_parameters_right_paren_on_new_line = false
+ij_javascript_method_parameters_wrap = off
+ij_javascript_object_literal_wrap = on_every_item
+ij_javascript_object_types_wrap = on_every_item
+ij_javascript_parentheses_expression_new_line_after_left_paren = false
+ij_javascript_parentheses_expression_right_paren_on_new_line = false
+ij_javascript_place_assignment_sign_on_next_line = false
+ij_javascript_prefer_as_type_cast = false
+ij_javascript_prefer_explicit_types_function_expression_returns = false
+ij_javascript_prefer_explicit_types_function_returns = false
+ij_javascript_prefer_explicit_types_vars_fields = false
+ij_javascript_prefer_parameters_wrap = false
+ij_javascript_reformat_c_style_comments = false
+ij_javascript_space_after_colon = true
+ij_javascript_space_after_comma = true
+ij_javascript_space_after_dots_in_rest_parameter = false
+ij_javascript_space_after_generator_mult = true
+ij_javascript_space_after_property_colon = true
+ij_javascript_space_after_quest = true
+ij_javascript_space_after_type_colon = true
+ij_javascript_space_after_unary_not = false
+ij_javascript_space_before_async_arrow_lparen = true
+ij_javascript_space_before_catch_keyword = true
+ij_javascript_space_before_catch_left_brace = true
+ij_javascript_space_before_catch_parentheses = true
+ij_javascript_space_before_class_lbrace = true
+ij_javascript_space_before_class_left_brace = true
+ij_javascript_space_before_colon = true
+ij_javascript_space_before_comma = false
+ij_javascript_space_before_do_left_brace = true
+ij_javascript_space_before_else_keyword = true
+ij_javascript_space_before_else_left_brace = true
+ij_javascript_space_before_finally_keyword = true
+ij_javascript_space_before_finally_left_brace = true
+ij_javascript_space_before_for_left_brace = true
+ij_javascript_space_before_for_parentheses = true
+ij_javascript_space_before_for_semicolon = false
+ij_javascript_space_before_function_left_parenth = true
+ij_javascript_space_before_generator_mult = false
+ij_javascript_space_before_if_left_brace = true
+ij_javascript_space_before_if_parentheses = true
+ij_javascript_space_before_method_call_parentheses = false
+ij_javascript_space_before_method_left_brace = true
+ij_javascript_space_before_method_parentheses = false
+ij_javascript_space_before_property_colon = false
+ij_javascript_space_before_quest = true
+ij_javascript_space_before_switch_left_brace = true
+ij_javascript_space_before_switch_parentheses = true
+ij_javascript_space_before_try_left_brace = true
+ij_javascript_space_before_type_colon = false
+ij_javascript_space_before_unary_not = false
+ij_javascript_space_before_while_keyword = true
+ij_javascript_space_before_while_left_brace = true
+ij_javascript_space_before_while_parentheses = true
+ij_javascript_spaces_around_additive_operators = true
+ij_javascript_spaces_around_arrow_function_operator = true
+ij_javascript_spaces_around_assignment_operators = true
+ij_javascript_spaces_around_bitwise_operators = true
+ij_javascript_spaces_around_equality_operators = true
+ij_javascript_spaces_around_logical_operators = true
+ij_javascript_spaces_around_multiplicative_operators = true
+ij_javascript_spaces_around_relational_operators = true
+ij_javascript_spaces_around_shift_operators = true
+ij_javascript_spaces_around_unary_operator = false
+ij_javascript_spaces_within_array_initializer_brackets = false
+ij_javascript_spaces_within_brackets = false
+ij_javascript_spaces_within_catch_parentheses = false
+ij_javascript_spaces_within_for_parentheses = false
+ij_javascript_spaces_within_if_parentheses = false
+ij_javascript_spaces_within_imports = false
+ij_javascript_spaces_within_interpolation_expressions = false
+ij_javascript_spaces_within_method_call_parentheses = false
+ij_javascript_spaces_within_method_parentheses = false
+ij_javascript_spaces_within_object_literal_braces = false
+ij_javascript_spaces_within_object_type_braces = true
+ij_javascript_spaces_within_parentheses = false
+ij_javascript_spaces_within_switch_parentheses = false
+ij_javascript_spaces_within_type_assertion = false
+ij_javascript_spaces_within_union_types = true
+ij_javascript_spaces_within_while_parentheses = false
+ij_javascript_special_else_if_treatment = true
+ij_javascript_ternary_operation_signs_on_next_line = false
+ij_javascript_ternary_operation_wrap = off
+ij_javascript_union_types_wrap = on_every_item
+ij_javascript_use_chained_calls_group_indents = false
+ij_javascript_use_double_quotes = true
+ij_javascript_use_explicit_js_extension = auto
+ij_javascript_use_path_mapping = always
+ij_javascript_use_public_modifier = false
+ij_javascript_use_semicolon_after_statement = true
+ij_javascript_var_declaration_wrap = normal
+ij_javascript_while_brace_force = never
+ij_javascript_while_on_new_line = false
+ij_javascript_wrap_comments = false
+
+[{*.har,*.jsb2,*.jsb3,*.json,.babelrc,.eslintrc,.prettierrc,.stylelintrc,bowerrc,jest.config}]
+indent_size = 2
+ij_json_array_wrapping = split_into_lines
+ij_json_keep_blank_lines_in_code = 0
+ij_json_keep_indents_on_empty_lines = false
+ij_json_keep_line_breaks = true
+ij_json_keep_trailing_comma = false
+ij_json_object_wrapping = split_into_lines
+ij_json_property_alignment = do_not_align
+ij_json_space_after_colon = true
+ij_json_space_after_comma = true
+ij_json_space_before_colon = false
+ij_json_space_before_comma = false
+ij_json_spaces_within_braces = false
+ij_json_spaces_within_brackets = false
+ij_json_wrap_long_lines = false
+
+[{*.htm,*.html,*.ng,*.sht,*.shtm,*.shtml}]
+ij_html_add_new_line_before_tags = body, div, p, form, h1, h2, h3
+ij_html_align_attributes = true
+ij_html_align_text = false
+ij_html_attribute_wrap = normal
+ij_html_block_comment_add_space = false
+ij_html_block_comment_at_first_column = true
+ij_html_do_not_align_children_of_min_lines = 0
+ij_html_do_not_break_if_inline_tags = title, h1, h2, h3, h4, h5, h6, p
+ij_html_do_not_indent_children_of_tags = html, body, thead, tbody, tfoot
+ij_html_enforce_quotes = false
+ij_html_inline_tags = a, abbr, acronym, b, basefont, bdo, big, br, cite, cite, code, dfn, em, font, i, img, input, kbd, label, q, s, samp, select, small, span, strike, strong, sub, sup, textarea, tt, u, var
+ij_html_keep_blank_lines = 2
+ij_html_keep_indents_on_empty_lines = false
+ij_html_keep_line_breaks = true
+ij_html_keep_line_breaks_in_text = true
+ij_html_keep_whitespaces = false
+ij_html_keep_whitespaces_inside = span, pre, textarea
+ij_html_line_comment_at_first_column = true
+ij_html_new_line_after_last_attribute = never
+ij_html_new_line_before_first_attribute = never
+ij_html_quote_style = double
+ij_html_remove_new_line_before_tags = br
+ij_html_space_after_tag_name = false
+ij_html_space_around_equality_in_attribute = false
+ij_html_space_inside_empty_tag = false
+ij_html_text_wrap = normal
+
+[{*.markdown,*.md}]
+ij_markdown_force_one_space_after_blockquote_symbol = true
+ij_markdown_force_one_space_after_header_symbol = true
+ij_markdown_force_one_space_after_list_bullet = true
+ij_markdown_force_one_space_between_words = true
+ij_markdown_format_tables = true
+ij_markdown_insert_quote_arrows_on_wrap = true
+ij_markdown_keep_indents_on_empty_lines = false
+ij_markdown_keep_line_breaks_inside_text_blocks = true
+ij_markdown_max_lines_around_block_elements = 1
+ij_markdown_max_lines_around_header = 1
+ij_markdown_max_lines_between_paragraphs = 1
+ij_markdown_min_lines_around_block_elements = 1
+ij_markdown_min_lines_around_header = 1
+ij_markdown_min_lines_between_paragraphs = 1
+ij_markdown_wrap_text_if_long = true
+ij_markdown_wrap_text_inside_blockquotes = true
--- a/.gitignore
+++ b/.gitignore
@@ -1,3 +1,5 @@
 node_modules
 .next
-.env.local
+.env.local
+.idea
+package-lock.json
--- a/example.env.local
+++ b/example.env.local
@@ -1,9 +1,11 @@
 NEXT_PUBLIC_API_NAME = "Loan Facilities Dashboard"
+NEXT_PUBLIC_API_VERSION = "1.0.0"
 NEXT_PUBLIC_DEFAULT_LANGUAGE = "fa"
 NEXT_PUBLIC_DEFAULT_DIRECTION = "rtl"

-NEXT_PUBLIC_API_URL = "http://Your IP:3000"
+NEXT_PUBLIC_PRIMARY_MAIN = "#084070"
+NEXT_PUBLIC_SECONDARY_MAIN = "#FF4E00"

-NEXT_PUBLIC_BASE_URL = "deploy api"
+NEXT_PUBLIC_BASE_URL = "https://loan.witel.ir"

 NODE_ENV = "development"
--- a/jsconfig.json
+++ b/jsconfig.json
@@ -1,8 +1,12 @@
 {
  "compilerOptions": {
    "paths": {
-      "@/*": ["./src/*"],
-      "&/*": ["./public/*"],
+      "@/*": [
+        "./src/*"
+      ],
+      "&/*": [
+        "./public/*"
+      ]
    }
  }
 }
--- a/next.config.js
+++ b/next.config.js
@@ -1,12 +1,12 @@
 /** @type {import('next').NextConfig} */

 const nextConfig = {
-  reactStrictMode: true,
-  i18n: {
-    defaultLocale: 'fa',
-    locales: ['fa'],
-    localeDetection: false,
-  },
+    reactStrictMode: true,
+    i18n: {
+        defaultLocale: 'fa',
+        locales: ['fa'],
+        localeDetection: false,
+    }
 }

 module.exports = nextConfig
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@@ -6,7 +6,11 @@
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
-    "lint": "next lint"
+    "publish-3002": "next start -p 3002",
+    "lint": "next lint",
+    "update": "run-script-os",
+    "update:win32": "echo 'ok'",
+    "update:linux": "rm -rf .next/ && npm i && npm run build && sudo systemctl restart loan_facilities_develop_expert.service"
  },
  "dependencies": {
    "@emotion/react": "^11.10.6",
@@ -14,12 +18,20 @@
    "@emotion/styled": "^11.10.6",
    "@mui/icons-material": "^5.11.16",
    "@mui/material": "^5.12.0",
+    "@mui/x-date-pickers": "^6.9.2",
    "axios": "^1.4.0",
+    "colord": "^2.9.3",
+    "date-fns-jalali": "^2.13.0-0",
+    "dayjs": "^1.11.9",
    "eslint": "8.36.0",
    "formik": "^2.2.9",
    "fs-extra": "^11.1.1",
+    "image-resize": "^1.3.2",
+    "image-to-file-converter": "^1.0.6",
+    "jalali-moment": "^3.3.11",
    "material-react-table": "^1.11.1",
    "moment": "^2.29.4",
+    "moment-jalaali": "^0.10.0",
    "next": "^13.3.0",
    "next-intl": "^2.13.1",
    "next-useragent": "^2.8.0",
@@ -36,6 +48,7 @@
  },
  "devDependencies": {
    "@faker-js/faker": "^7.6.0",
-    "eslint-config-next": "^13.3.0"
+    "eslint-config-next": "^13.3.0",
+    "run-script-os": "^1.1.6"
  }
 }
--- a/public/fontiran.scss
+++ b/public/fontiran.scss
@@ -17,80 +17,153 @@ This set of fonts are used in this project under the license: (.....)
 *	
 **/
@font-face {
-	font-family: IRANSans;
-	font-style: normal;
-	font-weight: 900;
-	src: url('./fonts/eot/IRANSansWeb_Black.eot');
-	src: url('./fonts/eot/IRANSansWeb_Black.eot?#iefix') format('embedded-opentype'),  /* IE6-8 */
-		 url('./fonts/woff2/IRANSansWeb_Black.woff2') format('woff2'),  /* FF39+,Chrome36+, Opera24+*/
-		 url('./fonts/woff/IRANSansWeb_Black.woff') format('woff'),  /* FF3.6+, IE9, Chrome6+, Saf5.1+*/
-		 url('./fonts/ttf/IRANSansWeb_Black.ttf') format('truetype');
+  font-family: IRANSansFaNum;
+  font-style: normal;
+  font-weight: 900;
+  src: url('./fonts/eot/IRANSansWeb(FaNum)_Black.eot');
+  src: url('./fonts/eot/IRANSansWeb(FaNum)_Black.eot?#iefix') format('embedded-opentype'), /* IE6-8 */
+  url('./fonts/woff2/IRANSansWeb(FaNum)_Black.woff2') format('woff2'), /* FF39+,Chrome36+, Opera24+*/
+  url('./fonts/woff/IRANSansWeb(FaNum)_Black.woff') format('woff'), /* FF3.6+, IE9, Chrome6+, Saf5.1+*/
+  url('./fonts/ttf/IRANSansWeb(FaNum)_Black.ttf') format('truetype');
 }
+
@font-face {
-	font-family: IRANSans;
-	font-style: normal;
-	font-weight: bold;
-	src: url('./fonts/eot/IRANSansWeb_Bold.eot');
-	src: url('./fonts/eot/IRANSansWeb_Bold.eot?#iefix') format('embedded-opentype'),  /* IE6-8 */
-		 url('./fonts/woff2/IRANSansWeb_Bold.woff2') format('woff2'),  /* FF39+,Chrome36+, Opera24+*/
-		 url('./fonts/woff/IRANSansWeb_Bold.woff') format('woff'),  /* FF3.6+, IE9, Chrome6+, Saf5.1+*/
-		 url('./fonts/ttf/IRANSansWeb_Bold.ttf') format('truetype');
+  font-family: IRANSansFaNum;
+  font-style: normal;
+  font-weight: bold;
+  src: url('./fonts/eot/IRANSansWeb(FaNum)_Bold.eot');
+  src: url('./fonts/eot/IRANSansWeb(FaNum)_Bold.eot?#iefix') format('embedded-opentype'), /* IE6-8 */
+  url('./fonts/woff2/IRANSansWeb(FaNum)_Bold.woff2') format('woff2'), /* FF39+,Chrome36+, Opera24+*/
+  url('./fonts/woff/IRANSansWeb(FaNum)_Bold.woff') format('woff'), /* FF3.6+, IE9, Chrome6+, Saf5.1+*/
+  url('./fonts/ttf/IRANSansWeb(FaNum)_Bold.ttf') format('truetype');
 }
+
@font-face {
-	font-family: IRANSans;
-	font-style: normal;
-	font-weight: 500;
-	src: url('./fonts/eot/IRANSansWeb_Medium.eot');
-	src: url('./fonts/eot/IRANSansWeb_Medium.eot?#iefix') format('embedded-opentype'),  /* IE6-8 */
-		 url('./fonts/woff2/IRANSansWeb_Medium.woff2') format('woff2'),  /* FF39+,Chrome36+, Opera24+*/
-		 url('./fonts/woff/IRANSansWeb_Medium.woff') format('woff'),  /* FF3.6+, IE9, Chrome6+, Saf5.1+*/
-		 url('./fonts/ttf/IRANSansWeb_Medium.ttf') format('truetype');
+  font-family: IRANSansFaNum;
+  font-style: normal;
+  font-weight: 500;
+  src: url('./fonts/eot/IRANSansWeb(FaNum)_Medium.eot');
+  src: url('./fonts/eot/IRANSansWeb(FaNum)_Medium.eot?#iefix') format('embedded-opentype'), /* IE6-8 */
+  url('./fonts/woff2/IRANSansWeb(FaNum)_Medium.woff2') format('woff2'), /* FF39+,Chrome36+, Opera24+*/
+  url('./fonts/woff/IRANSansWeb(FaNum)_Medium.woff') format('woff'), /* FF3.6+, IE9, Chrome6+, Saf5.1+*/
+  url('./fonts/ttf/IRANSansWeb(FaNum)_Medium.ttf') format('truetype');
 }
+
@font-face {
-	font-family: IRANSans;
-	font-style: normal;
-	font-weight: 300;
-	src: url('./fonts/eot/IRANSansWeb_Light.eot');
-	src: url('./fonts/eot/IRANSansWeb_Light.eot?#iefix') format('embedded-opentype'),  /* IE6-8 */
-		 url('./fonts/woff2/IRANSansWeb_Light.woff2') format('woff2'),  /* FF39+,Chrome36+, Opera24+*/
-		 url('./fonts/woff/IRANSansWeb_Light.woff') format('woff'),  /* FF3.6+, IE9, Chrome6+, Saf5.1+*/
-		 url('./fonts/ttf/IRANSansWeb_Light.ttf') format('truetype');
+  font-family: IRANSansFaNum;
+  font-style: normal;
+  font-weight: 300;
+  src: url('./fonts/eot/IRANSansWeb(FaNum)_Light.eot');
+  src: url('./fonts/eot/IRANSansWeb(FaNum)_Light.eot?#iefix') format('embedded-opentype'), /* IE6-8 */
+  url('./fonts/woff2/IRANSansWeb(FaNum)_Light.woff2') format('woff2'), /* FF39+,Chrome36+, Opera24+*/
+  url('./fonts/woff/IRANSansWeb(FaNum)_Light.woff') format('woff'), /* FF3.6+, IE9, Chrome6+, Saf5.1+*/
+  url('./fonts/ttf/IRANSansWeb(FaNum)_Light.ttf') format('truetype');
 }
+
@font-face {
-	font-family: IRANSans;
-	font-style: normal;
-	font-weight: 200;
-	src: url('./fonts/eot/IRANSansWeb_UltraLight.eot');
-	src: url('./fonts/eot/IRANSansWeb_UltraLight.eot?#iefix') format('embedded-opentype'),  /* IE6-8 */
-		 url('./fonts/woff2/IRANSansWeb_UltraLight.woff2') format('woff2'),  /* FF39+,Chrome36+, Opera24+*/
-		 url('./fonts/woff/IRANSansWeb_UltraLight.woff') format('woff'),  /* FF3.6+, IE9, Chrome6+, Saf5.1+*/
-		 url('./fonts/ttf/IRANSansWeb_UltraLight.ttf') format('truetype');
+  font-family: IRANSansFaNum;
+  font-style: normal;
+  font-weight: 200;
+  src: url('./fonts/eot/IRANSansWeb(FaNum)_UltraLight.eot');
+  src: url('./fonts/eot/IRANSansWeb(FaNum)_UltraLight.eot?#iefix') format('embedded-opentype'), /* IE6-8 */
+  url('./fonts/woff2/IRANSansWeb(FaNum)_UltraLight.woff2') format('woff2'), /* FF39+,Chrome36+, Opera24+*/
+  url('./fonts/woff/IRANSansWeb(FaNum)_UltraLight.woff') format('woff'), /* FF3.6+, IE9, Chrome6+, Saf5.1+*/
+  url('./fonts/ttf/IRANSansWeb(FaNum)_UltraLight.ttf') format('truetype');
 }
+
@font-face {
-	font-family: IRANSans;
-	font-style: normal;
-	font-weight: normal;
-	src: url('./fonts/eot/IRANSansWeb.eot');
-	src: url('./fonts/eot/IRANSansWeb.eot?#iefix') format('embedded-opentype'),  /* IE6-8 */
-		 url('./fonts/woff2/IRANSansWeb.woff2') format('woff2'),  /* FF39+,Chrome36+, Opera24+*/
-		 url('./fonts/woff/IRANSansWeb.woff') format('woff'),  /* FF3.6+, IE9, Chrome6+, Saf5.1+*/
-		 url('./fonts/ttf/IRANSansWeb.ttf') format('truetype');
+  font-family: IRANSansFaNum;
+  font-style: normal;
+  font-weight: normal;
+  src: url('./fonts/eot/IRANSansWeb(FaNum).eot');
+  src: url('./fonts/eot/IRANSansWeb(FaNum).eot?#iefix') format('embedded-opentype'), /* IE6-8 */
+  url('./fonts/woff2/IRANSansWeb(FaNum).woff2') format('woff2'), /* FF39+,Chrome36+, Opera24+*/
+  url('./fonts/woff/IRANSansWeb(FaNum).woff') format('woff'), /* FF3.6+, IE9, Chrome6+, Saf5.1+*/
+  url('./fonts/ttf/IRANSansWeb(FaNum).ttf') format('truetype');
 }
+
@font-face {
-	font-family: Parastoo;
-	font-style: normal;
-	font-weight: normal;
-	src: url('./fonts/eot/Parastoo.eot');
-	src: url('./fonts/eot/Parastoo.eot?#iefix') format('embedded-opentype'),  /* IE6-8 */
-		 url('./fonts/woff/Parastoo.woff') format('woff'),  /* FF3.6+, IE9, Chrome6+, Saf5.1+*/
-		 url('./fonts/ttf/Parastoo.ttf') format('truetype');
+  font-family: IRANSans;
+  font-style: normal;
+  font-weight: 900;
+  src: url('./fonts/eot/IRANSansWeb_Black.eot');
+  src: url('./fonts/eot/IRANSansWeb_Black.eot?#iefix') format('embedded-opentype'), /* IE6-8 */
+  url('./fonts/woff2/IRANSansWeb_Black.woff2') format('woff2'), /* FF39+,Chrome36+, Opera24+*/
+  url('./fonts/woff/IRANSansWeb_Black.woff') format('woff'), /* FF3.6+, IE9, Chrome6+, Saf5.1+*/
+  url('./fonts/ttf/IRANSansWeb_Black.ttf') format('truetype');
 }
+
@font-face {
-	font-family: Parastoo;
-	font-style: normal;
-	font-weight: bold;
-	src: url('./fonts/eot/Parastoo-Bold.eot');
-	src: url('./fonts/eot/Parastoo-Bold.eot?#iefix') format('embedded-opentype'),  /* IE6-8 */
-		 url('./fonts/woff/Parastoo-Bold.woff') format('woff'),  /* FF3.6+, IE9, Chrome6+, Saf5.1+*/
-		 url('./fonts/ttf/Parastoo-Bold.ttf') format('truetype');
+  font-family: IRANSans;
+  font-style: normal;
+  font-weight: bold;
+  src: url('./fonts/eot/IRANSansWeb_Bold.eot');
+  src: url('./fonts/eot/IRANSansWeb_Bold.eot?#iefix') format('embedded-opentype'), /* IE6-8 */
+  url('./fonts/woff2/IRANSansWeb_Bold.woff2') format('woff2'), /* FF39+,Chrome36+, Opera24+*/
+  url('./fonts/woff/IRANSansWeb_Bold.woff') format('woff'), /* FF3.6+, IE9, Chrome6+, Saf5.1+*/
+  url('./fonts/ttf/IRANSansWeb_Bold.ttf') format('truetype');
+}
+
+@font-face {
+  font-family: IRANSans;
+  font-style: normal;
+  font-weight: 500;
+  src: url('./fonts/eot/IRANSansWeb_Medium.eot');
+  src: url('./fonts/eot/IRANSansWeb_Medium.eot?#iefix') format('embedded-opentype'), /* IE6-8 */
+  url('./fonts/woff2/IRANSansWeb_Medium.woff2') format('woff2'), /* FF39+,Chrome36+, Opera24+*/
+  url('./fonts/woff/IRANSansWeb_Medium.woff') format('woff'), /* FF3.6+, IE9, Chrome6+, Saf5.1+*/
+  url('./fonts/ttf/IRANSansWeb_Medium.ttf') format('truetype');
+}
+
+@font-face {
+  font-family: IRANSans;
+  font-style: normal;
+  font-weight: 300;
+  src: url('./fonts/eot/IRANSansWeb_Light.eot');
+  src: url('./fonts/eot/IRANSansWeb_Light.eot?#iefix') format('embedded-opentype'), /* IE6-8 */
+  url('./fonts/woff2/IRANSansWeb_Light.woff2') format('woff2'), /* FF39+,Chrome36+, Opera24+*/
+  url('./fonts/woff/IRANSansWeb_Light.woff') format('woff'), /* FF3.6+, IE9, Chrome6+, Saf5.1+*/
+  url('./fonts/ttf/IRANSansWeb_Light.ttf') format('truetype');
+}
+
+@font-face {
+  font-family: IRANSans;
+  font-style: normal;
+  font-weight: 200;
+  src: url('./fonts/eot/IRANSansWeb_UltraLight.eot');
+  src: url('./fonts/eot/IRANSansWeb_UltraLight.eot?#iefix') format('embedded-opentype'), /* IE6-8 */
+  url('./fonts/woff2/IRANSansWeb_UltraLight.woff2') format('woff2'), /* FF39+,Chrome36+, Opera24+*/
+  url('./fonts/woff/IRANSansWeb_UltraLight.woff') format('woff'), /* FF3.6+, IE9, Chrome6+, Saf5.1+*/
+  url('./fonts/ttf/IRANSansWeb_UltraLight.ttf') format('truetype');
+}
+
+@font-face {
+  font-family: IRANSans;
+  font-style: normal;
+  font-weight: normal;
+  src: url('./fonts/eot/IRANSansWeb.eot');
+  src: url('./fonts/eot/IRANSansWeb.eot?#iefix') format('embedded-opentype'), /* IE6-8 */
+  url('./fonts/woff2/IRANSansWeb.woff2') format('woff2'), /* FF39+,Chrome36+, Opera24+*/
+  url('./fonts/woff/IRANSansWeb.woff') format('woff'), /* FF3.6+, IE9, Chrome6+, Saf5.1+*/
+  url('./fonts/ttf/IRANSansWeb.ttf') format('truetype');
+}
+
+@font-face {
+  font-family: Parastoo;
+  font-style: normal;
+  font-weight: normal;
+  src: url('./fonts/eot/Parastoo.eot');
+  src: url('./fonts/eot/Parastoo.eot?#iefix') format('embedded-opentype'), /* IE6-8 */
+  url('./fonts/woff/Parastoo.woff') format('woff'), /* FF3.6+, IE9, Chrome6+, Saf5.1+*/
+  url('./fonts/ttf/Parastoo.ttf') format('truetype');
+}
+
+@font-face {
+  font-family: Parastoo;
+  font-style: normal;
+  font-weight: bold;
+  src: url('./fonts/eot/Parastoo-Bold.eot');
+  src: url('./fonts/eot/Parastoo-Bold.eot?#iefix') format('embedded-opentype'), /* IE6-8 */
+  url('./fonts/woff/Parastoo-Bold.woff') format('woff'), /* FF3.6+, IE9, Chrome6+, Saf5.1+*/
+  url('./fonts/ttf/Parastoo-Bold.ttf') format('truetype');
 }
--- a/public/fonts/eot/IRANSansWeb(FaNum).eot
+++ b/public/fonts/eot/IRANSansWeb(FaNum).eot
--- a/public/fonts/eot/IRANSansWeb(FaNum)_Black.eot
+++ b/public/fonts/eot/IRANSansWeb(FaNum)_Black.eot
--- a/public/fonts/eot/IRANSansWeb(FaNum)_Bold.eot
+++ b/public/fonts/eot/IRANSansWeb(FaNum)_Bold.eot
--- a/public/fonts/eot/IRANSansWeb(FaNum)_Light.eot
+++ b/public/fonts/eot/IRANSansWeb(FaNum)_Light.eot
--- a/public/fonts/eot/IRANSansWeb(FaNum)_Medium.eot
+++ b/public/fonts/eot/IRANSansWeb(FaNum)_Medium.eot
--- a/public/fonts/eot/IRANSansWeb(FaNum)_UltraLight.eot
+++ b/public/fonts/eot/IRANSansWeb(FaNum)_UltraLight.eot
--- a/public/fonts/ttf/IRANSansWeb(FaNum).ttf
+++ b/public/fonts/ttf/IRANSansWeb(FaNum).ttf
--- a/public/fonts/ttf/IRANSansWeb(FaNum)_Black.ttf
+++ b/public/fonts/ttf/IRANSansWeb(FaNum)_Black.ttf
--- a/public/fonts/ttf/IRANSansWeb(FaNum)_Bold.ttf
+++ b/public/fonts/ttf/IRANSansWeb(FaNum)_Bold.ttf
--- a/public/fonts/ttf/IRANSansWeb(FaNum)_Light.ttf
+++ b/public/fonts/ttf/IRANSansWeb(FaNum)_Light.ttf
--- a/public/fonts/ttf/IRANSansWeb(FaNum)_Medium.ttf
+++ b/public/fonts/ttf/IRANSansWeb(FaNum)_Medium.ttf
--- a/public/fonts/ttf/IRANSansWeb(FaNum)_UltraLight.ttf
+++ b/public/fonts/ttf/IRANSansWeb(FaNum)_UltraLight.ttf
--- a/public/fonts/woff/IRANSansWeb(FaNum).woff
+++ b/public/fonts/woff/IRANSansWeb(FaNum).woff
--- a/public/fonts/woff/IRANSansWeb(FaNum)_Black.woff
+++ b/public/fonts/woff/IRANSansWeb(FaNum)_Black.woff
--- a/public/fonts/woff/IRANSansWeb(FaNum)_Bold.woff
+++ b/public/fonts/woff/IRANSansWeb(FaNum)_Bold.woff
--- a/public/fonts/woff/IRANSansWeb(FaNum)_Light.woff
+++ b/public/fonts/woff/IRANSansWeb(FaNum)_Light.woff
--- a/public/fonts/woff/IRANSansWeb(FaNum)_Medium.woff
+++ b/public/fonts/woff/IRANSansWeb(FaNum)_Medium.woff
--- a/public/fonts/woff/IRANSansWeb(FaNum)_UltraLight.woff
+++ b/public/fonts/woff/IRANSansWeb(FaNum)_UltraLight.woff
--- a/public/fonts/woff2/IRANSansWeb(FaNum).woff2
+++ b/public/fonts/woff2/IRANSansWeb(FaNum).woff2
--- a/public/fonts/woff2/IRANSansWeb(FaNum)_Black.woff2
+++ b/public/fonts/woff2/IRANSansWeb(FaNum)_Black.woff2
--- a/public/fonts/woff2/IRANSansWeb(FaNum)_Bold.woff2
+++ b/public/fonts/woff2/IRANSansWeb(FaNum)_Bold.woff2
--- a/public/fonts/woff2/IRANSansWeb(FaNum)_Light.woff2
+++ b/public/fonts/woff2/IRANSansWeb(FaNum)_Light.woff2
--- a/public/fonts/woff2/IRANSansWeb(FaNum)_Medium.woff2
+++ b/public/fonts/woff2/IRANSansWeb(FaNum)_Medium.woff2
--- a/public/fonts/woff2/IRANSansWeb(FaNum)_UltraLight.woff2
+++ b/public/fonts/woff2/IRANSansWeb(FaNum)_UltraLight.woff2
--- a/public/icons/favicon.png
+++ b/public/icons/favicon.png
--- a/public/images/change-password.svg
+++ b/public/images/change-password.svg
--- a/public/images/dashboard.svg
+++ b/public/images/dashboard.svg
--- a/public/images/login.svg
+++ b/public/images/login.svg
--- a/public/images/logo.svg
+++ b/public/images/logo.svg
@@ -1,10 +1,19 @@
 <svg xmlns="http://www.w3.org/2000/svg" width="611.781" height="634.738" viewBox="0 0 611.781 634.738">
-  <g id="Group_67" data-name="Group 67" transform="translate(17717.998 5548)">
-    <g id="Group_35" data-name="Group 35" transform="translate(-18337.291 -5635.72)">
-      <path id="Path_5" data-name="Path 5" d="M126.892,461.042c-1.676-6.24-3.057-12-4.776-17.668-6.5-21.426-17.146-40.936-27.846-60.456-10.362-18.9-20.22-38.081-30.31-57.132-.389-.734-.9-1.406-1.791-2.8C36.884,364.062,18.983,407.918,1.474,451.962l-1.21-.256a8.878,8.878,0,0,1-.214-2.524c2.581-12.372,4.479-24.951,8.05-37.034a334.761,334.761,0,0,1,13.91-37.364Q35.923,342.5,51.02,310.733c3.525-7.389,1.922-13.976.051-20.991a185.716,185.716,0,0,1-6.18-54.9,183.572,183.572,0,0,1,21.089-78.7A248.249,248.249,0,0,1,132.8,75.26a320,320,0,0,1,59.11-36.67c23.209-11.317,47.033-21.1,72.336-26.513A487.808,487.808,0,0,1,314.282,3.7C333.731,1.624,353.352,1.16,372.9.018a22,22,0,0,1,3.3.145c.4.037.775.291,1.236,1.13L360.926,4.642c-26.4,5.318-52.988,9.831-79.147,16.136a295.335,295.335,0,0,0-105.32,48.21c-24.648,17.9-45.935,39.123-61.823,65.3-11.419,18.813-17.813,39.38-20.064,61.275-1.445,14.062-1.024,28.1.166,42.133a44.216,44.216,0,0,0,1,4.8c1.418-1.165,2.427-1.875,3.3-2.728,10.2-10.038,20.041-20.48,30.661-30.055,14.1-12.713,29.419-23.882,46.9-31.678,21.42-9.55,43.69-13.568,66.553-6.9,10.553,3.079,20.531,8.393,30.44,13.353,20.075,10.051,39.841,20.721,59.892,30.821a182.512,182.512,0,0,0,68.478,19.421c33.07,2.549,64.407-3.894,93.662-19.748,25.04-13.571,46.544-31.674,66.252-52.041,15.44-15.956,28.916-33.487,41.494-51.746,2.217-3.219,4.962-6.073,7.463-9.1l.983.382a15.039,15.039,0,0,1-.828,3.67c-3.9,7.643-7.67,15.361-11.911,22.812-17.8,31.272-39.019,60-64.85,85.13-26.732,26.009-56.556,47.619-90.953,62.526a162.5,162.5,0,0,1-74.241,14.106c-24.876-.775-48.015,5.5-69.742,17.063-14.861,7.91-29.333,16.559-43.879,25.049-13.773,8.039-28.189,13.431-44.484,11.949-2.667-.242-2.49,1.854-2.988,3.479-2.151,7.019-3.92,14.193-6.627,20.993-3.8,9.547-10.327,17.4-17.557,24.572-15.526,15.4-28.738,32.778-42.59,49.608-4.68,5.687-9.284,11.436-14.28,17.6M284.4,266.987c-.334-.819-.375-1.206-.591-1.393a13.8,13.8,0,0,0-1.854-1.356c-22.793-13.885-46.277-26.286-71.807-34.532-20.915-6.755-41.455-6.841-61.848,1.941-15.741,6.779-28.925,17.112-41,29.01-5.591,5.508-5.981,8.93-2.421,15.921q12.355,24.272,24.657,48.572c10.087,19.93,20.125,39.886,30.279,59.783.543,1.062,1.967,1.674,2.98,2.5a12.859,12.859,0,0,0,1.933-3.081,49.022,49.022,0,0,0-2.4-33.292c-6.476-14.911-14.075-29.337-21.275-43.93-4.967-10.065-10.144-20.026-15.07-30.112-1.63-3.338-2.558-6.917.574-10.1,10.226-10.371,22.1-18.1,36.115-22.335,3.993-1.206,5.77-.416,7.975,3.16,3.927,6.365,7.687,12.846,11.888,19.028,9.727,14.31,23.437,21.051,40.7,20.974,16.93-.075,32.491-5.033,47.273-12.854,4.715-2.495,9.282-5.27,13.894-7.9" transform="translate(619.257 87.713)" fill="#231955"/>
-      <path id="Path_6" data-name="Path 6" d="M104.479,767.41c2.322-11.049,4.27-22.193,7.046-33.127,5.72-22.532,15.277-43.572,26.263-63.957,16.423-30.474,34.631-59.844,55.63-87.405,20.939-27.481,43.511-53.464,70.53-75.261,24.13-19.467,50.887-33.842,81.027-41.582,4.676-1.2,9.437-2.118,14.2-2.939a15,15,0,0,0,11.744-9.6c4.286-10.252,11.9-14.085,22.732-13.761a202.3,202.3,0,0,0,89.232-17.644A257.328,257.328,0,0,0,528.458,395.6c1.4-1.009,2.885-1.912,5.222-3.451-.953,3.026-1.265,5.258-2.293,7.089-14.936,26.6-31.633,51.891-54.057,72.956-18.879,17.734-40.265,31.046-65.744,36.862-15.1,3.446-30.348,6.253-45.529,9.349-18.622,3.8-37.406,6.945-55.825,11.553-27.566,6.9-51.782,20.673-73.654,38.685-23.608,19.441-42.473,43.054-59.8,68-24.96,35.939-44.814,74.717-63.24,114.278q-3.9,8.368-7.793,16.738l-1.263-.245" transform="translate(583.845 -45.198)" fill="#231955"/>
-      <path id="Path_7" data-name="Path 7" d="M405.392,690.855l-53.546,54.494-55.389-51.215,55.1-53.062L405.4,690.854" transform="translate(518.777 -129.57)" fill="#ff9100"/>
+    <g id="Group_67" data-name="Group 67" transform="translate(17717.998 5548)">
+        <g id="Group_35" data-name="Group 35" transform="translate(-18337.291 -5635.72)">
+            <path id="Path_5" data-name="Path 5"
+                  d="M126.892,461.042c-1.676-6.24-3.057-12-4.776-17.668-6.5-21.426-17.146-40.936-27.846-60.456-10.362-18.9-20.22-38.081-30.31-57.132-.389-.734-.9-1.406-1.791-2.8C36.884,364.062,18.983,407.918,1.474,451.962l-1.21-.256a8.878,8.878,0,0,1-.214-2.524c2.581-12.372,4.479-24.951,8.05-37.034a334.761,334.761,0,0,1,13.91-37.364Q35.923,342.5,51.02,310.733c3.525-7.389,1.922-13.976.051-20.991a185.716,185.716,0,0,1-6.18-54.9,183.572,183.572,0,0,1,21.089-78.7A248.249,248.249,0,0,1,132.8,75.26a320,320,0,0,1,59.11-36.67c23.209-11.317,47.033-21.1,72.336-26.513A487.808,487.808,0,0,1,314.282,3.7C333.731,1.624,353.352,1.16,372.9.018a22,22,0,0,1,3.3.145c.4.037.775.291,1.236,1.13L360.926,4.642c-26.4,5.318-52.988,9.831-79.147,16.136a295.335,295.335,0,0,0-105.32,48.21c-24.648,17.9-45.935,39.123-61.823,65.3-11.419,18.813-17.813,39.38-20.064,61.275-1.445,14.062-1.024,28.1.166,42.133a44.216,44.216,0,0,0,1,4.8c1.418-1.165,2.427-1.875,3.3-2.728,10.2-10.038,20.041-20.48,30.661-30.055,14.1-12.713,29.419-23.882,46.9-31.678,21.42-9.55,43.69-13.568,66.553-6.9,10.553,3.079,20.531,8.393,30.44,13.353,20.075,10.051,39.841,20.721,59.892,30.821a182.512,182.512,0,0,0,68.478,19.421c33.07,2.549,64.407-3.894,93.662-19.748,25.04-13.571,46.544-31.674,66.252-52.041,15.44-15.956,28.916-33.487,41.494-51.746,2.217-3.219,4.962-6.073,7.463-9.1l.983.382a15.039,15.039,0,0,1-.828,3.67c-3.9,7.643-7.67,15.361-11.911,22.812-17.8,31.272-39.019,60-64.85,85.13-26.732,26.009-56.556,47.619-90.953,62.526a162.5,162.5,0,0,1-74.241,14.106c-24.876-.775-48.015,5.5-69.742,17.063-14.861,7.91-29.333,16.559-43.879,25.049-13.773,8.039-28.189,13.431-44.484,11.949-2.667-.242-2.49,1.854-2.988,3.479-2.151,7.019-3.92,14.193-6.627,20.993-3.8,9.547-10.327,17.4-17.557,24.572-15.526,15.4-28.738,32.778-42.59,49.608-4.68,5.687-9.284,11.436-14.28,17.6M284.4,266.987c-.334-.819-.375-1.206-.591-1.393a13.8,13.8,0,0,0-1.854-1.356c-22.793-13.885-46.277-26.286-71.807-34.532-20.915-6.755-41.455-6.841-61.848,1.941-15.741,6.779-28.925,17.112-41,29.01-5.591,5.508-5.981,8.93-2.421,15.921q12.355,24.272,24.657,48.572c10.087,19.93,20.125,39.886,30.279,59.783.543,1.062,1.967,1.674,2.98,2.5a12.859,12.859,0,0,0,1.933-3.081,49.022,49.022,0,0,0-2.4-33.292c-6.476-14.911-14.075-29.337-21.275-43.93-4.967-10.065-10.144-20.026-15.07-30.112-1.63-3.338-2.558-6.917.574-10.1,10.226-10.371,22.1-18.1,36.115-22.335,3.993-1.206,5.77-.416,7.975,3.16,3.927,6.365,7.687,12.846,11.888,19.028,9.727,14.31,23.437,21.051,40.7,20.974,16.93-.075,32.491-5.033,47.273-12.854,4.715-2.495,9.282-5.27,13.894-7.9"
+                  transform="translate(619.257 87.713)" fill="#231955"/>
+            <path id="Path_6" data-name="Path 6"
+                  d="M104.479,767.41c2.322-11.049,4.27-22.193,7.046-33.127,5.72-22.532,15.277-43.572,26.263-63.957,16.423-30.474,34.631-59.844,55.63-87.405,20.939-27.481,43.511-53.464,70.53-75.261,24.13-19.467,50.887-33.842,81.027-41.582,4.676-1.2,9.437-2.118,14.2-2.939a15,15,0,0,0,11.744-9.6c4.286-10.252,11.9-14.085,22.732-13.761a202.3,202.3,0,0,0,89.232-17.644A257.328,257.328,0,0,0,528.458,395.6c1.4-1.009,2.885-1.912,5.222-3.451-.953,3.026-1.265,5.258-2.293,7.089-14.936,26.6-31.633,51.891-54.057,72.956-18.879,17.734-40.265,31.046-65.744,36.862-15.1,3.446-30.348,6.253-45.529,9.349-18.622,3.8-37.406,6.945-55.825,11.553-27.566,6.9-51.782,20.673-73.654,38.685-23.608,19.441-42.473,43.054-59.8,68-24.96,35.939-44.814,74.717-63.24,114.278q-3.9,8.368-7.793,16.738l-1.263-.245"
+                  transform="translate(583.845 -45.198)" fill="#231955"/>
+            <path id="Path_7" data-name="Path 7"
+                  d="M405.392,690.855l-53.546,54.494-55.389-51.215,55.1-53.062L405.4,690.854"
+                  transform="translate(518.777 -129.57)" fill="#ff9100"/>
+        </g>
+        <text id="MARHABA" transform="translate(-17322 -4931)" fill="#bcbcbc" font-size="50"
+              font-family="Montserrat-ExtraBold, Montserrat" font-weight="800">
+            <tspan x="-281.35" y="0">MARHABA</tspan>
+        </text>
    </g>
-    <text id="MARHABA" transform="translate(-17322 -4931)" fill="#bcbcbc" font-size="50" font-family="Montserrat-ExtraBold, Montserrat" font-weight="800"><tspan x="-281.35" y="0">MARHABA</tspan></text>
-  </g>
 </svg>
--- a/public/locales/fa/app.json
+++ b/public/locales/fa/app.json
@@ -6,26 +6,59 @@
  "login": "ورود",
  "login_expert": "ورود کارشناس",
  "expert": "کارشناس",
+  "last_updated_at": "اخرین بروز رسانی",
+  "filter_mode": "حالت فیلتر",
+  "date_picker_label": "فیلتر بر اساس تاریخ",
+  "lessThan": "کوچکتر از",
+  "greaterThan": "بزرگتر از",
+  "between": "میان",
+  "online_message": "شما به اینترنت وصل هستید",
+  "offline_message": "اتصال شما به اینترنت قطع شده است",
  "header": {
    "open_profile": "پروفایل",
-    "edit_profile": "ویرایش پروفایل",
+    "edit_profile": " پروفایل",
    "change_password": "تغییر رمز عبور",
    "logout": "خروج"
  },
  "Titles": {
    "title_login_page": "صفحه ورود",
-    "title_login_expert_page": "ورود کارشناس"
+    "title_login_expert_page": "ورود کارشناس",
+    "title_custom_404": "صفحه یافت نشد",
+    "title_custom_403": "عدم دسترسی",
+    "title_custom_500": "خطای سرور"
  },
  "sidebar": {
-    "dashboard": "داشبورد"
+    "dashboard": "داشبورد",
+    "passenger-office-chief": "اداره مسافر",
+    "machinery-expert": "ماشین آلات",
+    "passenger-boss": "رئیس مسافر ",
+    "transportation-assistant": "معاونت حمل و نقل",
+    "navgan-province-manager": "مدیر کل استانی",
+    "refahi-province-manager": "مدیر کل استانی",
+    "commercial-chief": "رئیس اداره بازرگانی",
+    "inspector-expert": "بازدید کارشناس",
+    "province-head-expert": "کارشناس ستادی",
+    "change-password": "تغییر رمز عبور",
+    "development-assistant": "معاون توسعه",
+    "edit-profile": "ویرایش پروفایل"
+  },
+  "secondary": {
+    "passenger-office": "توزیع درخواست",
+    "passenger-boss": "کارگروه استانی",
+    "refahi-province-manager": "رفاهی",
+    "navgan-province-manager": "ناوگان"
  },
  "Authorization": {
    "typography_your_login_is_valid_and_you_do_not_need_to_login_again": "شما دسترسی لازم به این صفحه را دارید نیاز به ورود مجدد نیست.",
    "typography_your_access_to_this_page_has_expired_Please_login_again": "دسترسی شما منقضی شده است لطفا دوباره ورود نمایید.",
-    "typography_redirect_to": "رفتن به صفحه",
+    "typography_redirect_to": "درحال رفتن به صفحه",
    "typography_routing_previuos_page": "صفحه قبل...",
    "typography_routing_dashbaord_page": "داشبورد..."
  },
+  "Permission": {
+    "typography_you_dont_have_access": "شما دسترسی لازم برای مشاهده این صفحه را ندارید!",
+    "button_back_dashboard": "بازگشت به صفحه اصلی"
+  },
  "LoginPage": {
    "text_field_user_name": "نام کاربری",
    "text_field_enter_your_username": "نام کاربری خود را وارد کنید",
@@ -35,10 +68,230 @@
    "link_routing_back_to": "بازگشت به",
    "link_routing_previuos_page": "صفحه قبل",
    "link_routing_main_page": "صفحه اصلی",
-    "error_message_required": "اجباری!",
-    "button_make_account": "ایجاد حساب"
+    "error_message_required": "اجباری!"
  },
-  "dashboard": {
-    "dashboard_page": "داشبورد"
+  "ErrorPage": {
+    "custom_404": "صفحه مورد نظر یافت نشد | 404",
+    "custom_500": "دسترسی به سامانه امکانپذیر نمی باشد دقایقی دیگر تلاش نمائید | 500",
+    "custom_403": "شما دسترسی به این بخش را ندارید | 403",
+    "link_routing_back_to": "بازگشت به",
+    "link_routing_previuos_page": "صفحه قبل",
+    "link_routing_main_page": "صفحه اصلی"
+  },
+  "Dashboard": {
+    "dashboard_page": "داشبورد",
+    "passenger_boss_page": "رئیس مسافر",
+    "transportation_assistance": "معاونت حمل و نقل",
+    "change_password": "تغییر رمز عبور",
+    "province_manager_page": "مدیر کل استانی",
+    "province_head_expert": "کارشناس ستادی",
+    "passenger_office_page": "اداره مسافر",
+    "machinary_office_page": "ماشین آلات",
+    "development_assistant_page": "معاون توسعه",
+    "inspector_expert_page": "بازدید کارشناس",
+    "commercial_chief_page": "رئیس اداره بازرگانی",
+    "edit_profile": "ویرایش پروفایل"
+  },
+  "MuiDatePicker": {
+    "date_picker_birthday": "تاریخ"
+  },
+  "ChangePassword": {
+    "typography_change_password": "تغییر رمز عبور",
+    "label_current_password": "رمز عبور فعلی",
+    "label_new_password": "رمز عبور جدید",
+    "label_confirm_password": "تکرار رمز عبور جدید",
+    "error_message_required": "اجباری !",
+    "error_message_password_length": "رمز عبور باید حداقل 8 کاراکتر باشد.",
+    "error_message_password_match": "پسورد ها یکسان هستند",
+    "error_message_password_not_match": "پسورد و تکرار رمز عبور باید یکسان باشد"
+  },
+  "SubmitButton": {
+    "button_while_submit": "در حال ثبت",
+    "button_submit": "ثبت"
+  },
+  "UpdateProfile": {
+    "error_invalid_email": "ایمیل نامعتبر است",
+    "typography_edit_profile": "پروفایل",
+    "text_field_email": "ایمیل",
+    "text_field_enter_your_password": "رمز عبور خود را وارد کنید",
+    "text_field_username": "نام کاربری",
+    "text_field_name": "نام",
+    "text_field_phone_number": "شماره تماس",
+    "text_field_position": "سمت",
+    "text_field_province_name": "نام استان",
+    "error_message_required": "اجباری !"
+  },
+  "notifications": {
+    "code": "کد",
+    "error": "خطا",
+    "warning": "خطا",
+    "success": "موفق",
+    "error_static_text": "عملیات شما با خطا مواجه شد",
+    "warning_static_text": "خطا سرور",
+    "success_static_text": "عملیات شما با موفقیت انجام شد",
+    "pending": "در حال انجام..."
+  },
+  "PassengerOffice": {
+    "name": "نام",
+    "id": "کد یکتا",
+    "national_id": "کد ملی",
+    "phone_number": "موبایل",
+    "created_at": "تاریخ درخواست",
+    "updated_at": "تاریخ بروزرسانی",
+    "navgan_id": "کد ناوگان",
+    "vehicle_type": "نوع ماشین",
+    "state_name": "وضعیت درخواست"
+  },
+  "CommercialChief": {
+    "name": "نام",
+    "id": "کد یکتا",
+    "national_id": "کد ملی",
+    "phone_number": "موبایل",
+    "created_at": "تاریخ درخواست",
+    "updated_at": "تاریخ بروزرسانی",
+    "navgan_id": "کد ناوگان",
+    "vehicle_type": "نوع ماشین",
+    "state_name": "وضعیت درخواست"
+  },
+  "NavganProvinceManager": {
+    "name": "نام",
+    "id": "کد یکتا",
+    "national_id": "کد ملی",
+    "phone_number": "موبایل",
+    "created_at": "تاریخ درخواست",
+    "updated_at": "تاریخ بروزرسانی",
+    "navgan_id": "کد ناوگان",
+    "vehicle_type": "نوع ماشین",
+    "state_name": "وضعیت درخواست"
+  },
+  "PassengerBoss": {
+    "name": "نام",
+    "id": "کد یکتا",
+    "national_id": "کد ملی",
+    "phone_number": "موبایل",
+    "created_at": "تاریخ درخواست",
+    "updated_at": "تاریخ بروزرسانی",
+    "navgan_id": "کد ناوگان",
+    "vehicle_type": "نوع ماشین",
+    "state_name": "وضعیت درخواست"
+  },
+  "RefahiProvinceManager": {
+    "name": "نام",
+    "id": "کد یکتا",
+    "national_id": "کد ملی",
+    "phone_number": "موبایل",
+    "created_at": "تاریخ درخواست",
+    "updated_at": "تاریخ بروزرسانی",
+    "navgan_id": "کد ناوگان",
+    "vehicle_type": "نوع ماشین",
+    "state_name": "وضعیت درخواست"
+  },
+  "DevelopmentAssistant": {
+    "name": "نام",
+    "id": "کد یکتا",
+    "national_id": "کد ملی",
+    "phone_number": "موبایل",
+    "created_at": "تاریخ درخواست",
+    "updated_at": "تاریخ بروزرسانی",
+    "navgan_id": "کد ناوگان",
+    "vehicle_type": "نوع ماشین",
+    "state_name": "وضعیت درخواست"
+  },
+  "DevelopmentAssistant": {
+    "name": "نام",
+    "id": "کد یکتا",
+    "national_id": "کد ملی",
+    "phone_number": "موبایل",
+    "created_at": "تاریخ درخواست",
+    "updated_at": "تاریخ بروزرسانی",
+    "navgan_id": "کد ناوگان",
+    "vehicle_type": "نوع ماشین",
+    "state_name": "وضعیت درخواست"
+  },
+  "ProvinceHeadExpert": {
+    "name": "نام",
+    "id": "کد یکتا",
+    "national_id": "کد ملی",
+    "phone_number": "موبایل",
+    "created_at": "تاریخ درخواست",
+    "updated_at": "تاریخ بروزرسانی",
+    "navgan_id": "کد ناوگان",
+    "vehicle_type": "نوع ماشین",
+    "state_name": "وضعیت درخواست"
+  },
+  "TransportationAssistance": {
+    "name": "نام",
+    "id": "کد یکتا",
+    "national_id": "کد ملی",
+    "phone_number": "موبایل",
+    "created_at": "تاریخ درخواست",
+    "updated_at": "تاریخ بروزرسانی",
+    "navgan_id": "کد ناوگان",
+    "vehicle_type": "نوع ماشین",
+    "state_name": "وضعیت درخواست"
+  },
+  "InspectorExpert": {
+    "name": "نام",
+    "id": "کد یکتا",
+    "national_id": "کد ملی",
+    "phone_number": "موبایل",
+    "created_at": "تاریخ درخواست",
+    "updated_at": "تاریخ بروزرسانی",
+    "navgan_id": "کد ناوگان",
+    "vehicle_type": "نوع ماشین",
+    "state_name": "وضعیت درخواست"
+  },
+  "MachinaryOffice": {
+    "name": "نام",
+    "id": "کد یکتا",
+    "national_id": "کد ملی",
+    "phone_number": "موبایل",
+    "created_at": "تاریخ درخواست",
+    "updated_at": "تاریخ بروزرسانی",
+    "navgan_id": "کد ناوگان",
+    "vehicle_type": "نوع ماشین",
+    "state_name": "وضعیت درخواست"
+  },
+  "ConfirmDialog": {
+    "confirm": "تایید",
+    "context": "آیا از تایید این آیتم اطمینان دارید؟",
+    "button-cancel": "بستن",
+    "button-confirm": "تایید",
+    "description_error": "وارد کردن توضیحات الزامی است!",
+    "optional": " (اختیاری)",
+    "unit": " (ریال)",
+    "description": "توضیحات خود را وارد نمائید",
+    "choose_file": "انتخاب فایل",
+    "approved_amount": "مبلغ تصویب شده",
+    "approved_amount_error": "وارد کردن مبلغ تصویب شده الزامیست",
+    "approved_amount_positive": "مبلغ تصویب شده باید مثبت باشد",
+    "proposed_amount_error": "وارد کردن مقدار پیشنهادی الزامیست",
+    "proposed_amount": "مقدار پیشنهادی",
+    "proposed_amount_positive": "مقدار پیشنهادی باید مثبت باشد"
+  },
+  "ReviseDialog": {
+    "revise": "ویرایش",
+    "description_error": "وارد کردن توضیحات الزامی است!",
+    "optional": " (اختیاری)",
+    "button-cancel": "بستن",
+    "button-revise": "ویرایش",
+    "description": "توضیحات خود را وارد نمائید"
+  },
+  "RejectDialog": {
+    "reject": "عدم تایید",
+    "context": "آیا از عدم تایید این آیتم اطمینان دارید؟",
+    "button-cancel": "بستن",
+    "button-reject": "عدم تایید",
+    "description": "توضیحات خود را وارد نمائید",
+    "optional": " (اختیاری)",
+    "description_error": "وارد کردن توضیحات الزامی است!"
+  },
+  "UploadSystem": {
+    "upload_file": "فایل خود را بارگذاری کنید",
+    "optional": " (اختیاری)",
+    "upload_file_unit": "حداکثر 2Mb",
+    "upload_file_format": "فرمت قابل قبول : png,jpg,pdf",
+    "delete": "پاک کردن",
+    "uploadfile_error": "حجم فایل بیشتر از 2 مگابایت می باشد"
  }
 }
--- a/public/locales/fa/datatable.js
+++ b/public/locales/fa/datatable.js
@@ -1,92 +1,92 @@
 export const FA_DATATABLE_LOCALIZATION = {
-  actions: "Actions",
-  and: "and",
-  cancel: "Cancel",
-  changeFilterMode: "Change filter mode",
-  changeSearchMode: "Change search mode",
-  clearFilter: "Clear filter",
-  clearSearch: "Clear search",
-  clearSort: "Clear sort",
-  clickToCopy: "Click to copy",
-  collapse: "Collapse",
-  collapseAll: "Collapse all",
-  columnActions: "Column Actions",
-  copiedToClipboard: "Copied to clipboard",
-  dropToGroupBy: "Drop to group by {column}",
-  edit: "Edit",
-  expand: "Expand",
-  expandAll: "Expand all",
-  filterArrIncludes: "Includes",
-  filterArrIncludesAll: "Includes all",
-  filterArrIncludesSome: "Includes",
-  filterBetween: "Between",
-  filterBetweenInclusive: "Between Inclusive",
-  filterByColumn: "Filter by {column}",
-  filterContains: "Contains",
-  filterEmpty: "Empty",
-  filterEndsWith: "Ends With",
-  filterEquals: "Equals",
-  filterEqualsString: "Equals",
-  filterFuzzy: "Fuzzy",
-  filterGreaterThan: "Greater Than",
-  filterGreaterThanOrEqualTo: "Greater Than Or Equal To",
-  filterInNumberRange: "Between",
-  filterIncludesString: "Contains",
-  filterIncludesStringSensitive: "Contains",
-  filterLessThan: "Less Than",
-  filterLessThanOrEqualTo: "Less Than Or Equal To",
-  filterMode: "Filter Mode: {filterType}",
-  filterNotEmpty: "Not Empty",
-  filterNotEquals: "Not Equals",
-  filterStartsWith: "Starts With",
-  filterWeakEquals: "Equals",
-  filteringByColumn: "Filtering by {column} - {filterType} {filterValue}",
-  goToFirstPage: "Go to first page",
-  goToLastPage: "Go to last page",
-  goToNextPage: "Go to next page",
-  goToPreviousPage: "Go to previous page",
-  grab: "Grab",
-  groupByColumn: "Group by {column}",
-  groupedBy: "Grouped by ",
-  hideAll: "Hide all",
-  hideColumn: "Hide {column} column",
-  max: "Max",
-  min: "Min",
-  move: "Move",
-  noRecordsToDisplay: "No records to display",
-  noResultsFound: "No results found",
-  of: "of",
-  or: "or",
-  pinToLeft: "Pin to left",
-  pinToRight: "Pin to right",
-  resetColumnSize: "Reset column size",
-  resetOrder: "Reset order",
-  rowActions: "Row Actions",
-  rowNumber: "#",
-  rowNumbers: "Row Numbers",
-  rowsPerPage: "Rows per page",
-  save: "Save",
-  search: "Search",
-  selectedCountOfRowCountRowsSelected:
-    "{selectedCount} of {rowCount} row(s) selected",
-  select: "Select",
-  showAll: "Show all",
-  showAllColumns: "Show all columns",
-  showHideColumns: "Show/Hide columns",
-  showHideFilters: "Show/Hide filters",
-  showHideSearch: "Show/Hide search",
-  sortByColumnAsc: "Sort by {column} ascending",
-  sortByColumnDesc: "Sort by {column} descending",
-  sortedByColumnAsc: "Sorted by {column} ascending",
-  sortedByColumnDesc: "Sorted by {column} descending",
-  thenBy: ", then by ",
-  toggleDensity: "Toggle density",
-  toggleFullScreen: "Toggle full screen",
-  toggleSelectAll: "Toggle select all",
-  toggleSelectRow: "Toggle select row",
-  toggleVisibility: "Toggle visibility",
-  ungroupByColumn: "Ungroup by {column}",
-  unpin: "Unpin",
-  unpinAll: "Unpin all",
-  unsorted: "Unsorted",
+    actions: "عملیات",
+    and: "و",
+    cancel: "لغو",
+    changeFilterMode: "تغییر حالت فیلتر",
+    changeSearchMode: "تغییر حالت جستجو",
+    clearFilter: "پاک کردن فیلتر",
+    clearSearch: "پاک کردن جستجو",
+    clearSort: "پاک کردن مرتب سازی",
+    clickToCopy: "کلیک برای کپی",
+    collapse: "جمع شدن",
+    collapseAll: "جمع شدن همه",
+    columnActions: "عملیات ستون",
+    copiedToClipboard: "کپی شد",
+    dropToGroupBy: "رها کردن برای گروه بندی بر اساس {column}",
+    edit: "ویرایش",
+    expand: "باز شدن",
+    expandAll: "باز شدن همه",
+    filterArrIncludes: "شامل",
+    filterArrIncludesAll: "شامل همه",
+    filterArrIncludesSome: "شامل",
+    filterBetween: "میان",
+    filterBetweenInclusive: "میان با احتساب هر دو",
+    filterByColumn: "فیلتر بر اساس {column}",
+    filterContains: "شامل",
+    filterEmpty: "خالی",
+    filterEndsWith: "به پایان می‌رسد با",
+    filterEquals: "برابر",
+    filterEqualsString: "برابر",
+    filterFuzzy: "نزدیک",
+    filterGreaterThan: "بزرگتر از",
+    filterGreaterThanOrEqualTo: "بزرگتر یا مساوی",
+    filterInNumberRange: "میان",
+    filterIncludesString: "شامل",
+    filterIncludesStringSensitive: "شامل",
+    filterLessThan: "کوچکتر از",
+    filterLessThanOrEqualTo: "کوچکتر یا مساوی",
+    filterMode: "حالت فیلتر: {filterType}",
+    filterNotEmpty: "غیر خالی",
+    filterNotEquals: "نا برابر",
+    filterStartsWith: "شروع می‌شود با",
+    filterWeakEquals: "برابر",
+    filteringByColumn: "فیلتر بر اساس {column} - {filterType} {filterValue}",
+    goToFirstPage: "رفتن به صفحه اول",
+    goToLastPage: "رفتن به صفحه آخر",
+    goToNextPage: "رفتن به صفحه بعدی",
+    goToPreviousPage: "رفتن به صفحه قبلی",
+    grab: "گرفتن",
+    groupByColumn: "گروه بندی بر اساس {column}",
+    groupedBy: "گروه بندی شده بر اساس",
+    hideAll: "پنهان کردن همه",
+    hideColumn: "پنهان کردن ستون {column}",
+    max: "حداکثر",
+    min: "حداقل",
+    move: "انتقال",
+    noRecordsToDisplay: "هیچ رکوردی برای نمایش وجود ندارد",
+    noResultsFound: "نتیجه‌ای یافت نشد",
+    of: "از",
+    or: "یا",
+    pinToLeft: "چسباندن به سمت چپ",
+    pinToRight: "چسباندن به سمت راست",
+    resetColumnSize: "بازنشانی اندازه ستون",
+    resetOrder: "بازنشانی ترتیب",
+    rowActions: "عملیات ردیف",
+    rowNumber: "#",
+    rowNumbers: "شماره ردیف",
+    rowsPerPage: "ردیف در هر صفحه",
+    save: "ذخیره",
+    search: "جستجو",
+    selectedCountOfRowCountRowsSelected:
+        "{selectedCount} از {rowCount} ردیف انتخاب شده",
+    select: "انتخاب",
+    showAll: "نمایش همه",
+    showAllColumns: "نمایش همه ستون‌ها",
+    showHideColumns: "نمایش/مخفی کردن ستون‌ها",
+    showHideFilters: "نمایش/مخفی کردن فیلترها",
+    showHideSearch: "نمایش/مخفی کردن جستجو",
+    sortByColumnAsc: "مرتب سازی بر اساس {column} صعودی",
+    sortByColumnDesc: "مرتب سازی بر اساس {column} نزولی",
+    sortedByColumnAsc: "مرتب شده بر اساس {column} صعودی",
+    sortedByColumnDesc: "مرتب شده بر اساس {column} نزولی",
+    thenBy: "، سپس بر اساس ",
+    toggleDensity: "تغییر تراکم",
+    toggleFullScreen: "تغییر حالت تمام صفحه",
+    toggleSelectAll: "انتخاب/عدم انتخاب همه",
+    toggleSelectRow: "انتخاب/عدم انتخاب ردیف",
+    toggleVisibility: "تغییر پیدا/پنهان",
+    ungroupByColumn: "لغو گروه بندی بر اساس {column}",
+    unpin: "رها کردن",
+    unpinAll: "رها کردن همه",
+    unsorted: "بدون مرتب سازی",
 };
--- a/public/manifest.json
+++ b/public/manifest.json
@@ -0,0 +1,57 @@
+{
+  "short_name": "Loan Facilities Dashboard",
+  "name": "Loan Facilities Expert Dashboard",
+  "description": "Loan Facilities",
+  "version": "1.0.0",
+  "version_name": "1.0.0 beta",
+  "start_url": "/dashboard",
+  "orientation": "portrait",
+  "display": "standalone",
+  "theme_color": "#084070",
+  "background_color": "#084070",
+  "icons": [
+    {
+      "src": "/icons/maskable_icon.png",
+      "sizes": "any",
+      "type": "image/png"
+    },
+    {
+      "src": "/icons/maskable_icon_x48.png",
+      "sizes": "48x48",
+      "type": "image/png"
+    },
+    {
+      "src": "/icons/maskable_icon_x72.png",
+      "sizes": "72x72",
+      "type": "image/png"
+    },
+    {
+      "src": "/icons/maskable_icon_x96.png",
+      "sizes": "96x96",
+      "type": "image/png"
+    },
+    {
+      "src": "/icons/maskable_icon_x128.png",
+      "sizes": "128x128",
+      "type": "image/png"
+    },
+    {
+      "src": "/icons/maskable_icon_x192.png",
+      "sizes": "192x192",
+      "type": "image/png"
+    },
+    {
+      "src": "/icons/maskable_icon_x384.png",
+      "sizes": "384x384",
+      "type": "image/png"
+    },
+    {
+      "src": "/icons/maskable_icon_x512.png",
+      "sizes": "512x512",
+      "type": "image/png"
+    }
+  ],
+  "categories": [
+    "government"
+  ]
+}
--- a/src/components/dashboard/change-password/index.jsx
+++ b/src/components/dashboard/change-password/index.jsx
@@ -0,0 +1,149 @@
+import CenterLayout from "@/layouts/CenterLayout";
+import DashboardLayouts from "@/layouts/dashboardLayouts";
+import {Button, Container, Paper, Stack, Typography,} from "@mui/material";
+import {Formik} from "formik";
+import * as Yup from "yup";
+import {useTranslations} from "next-intl";
+import PasswordField from "@/core/components/PasswordField";
+import StyledForm from "@/core/components/StyledForm";
+import {SET_USER_PASSWORD} from "@/core/data/apiRoutes";
+import SvgChangePassword from "@/core/components/svgs/SvgChangePassword";
+import useRequest from "@/lib/app/hooks/useRequest";
+
+const DashboardChangePasswordComponent = () => {
+    const t = useTranslations();
+    const requestServer = useRequest({auth: true})
+
+    const handleSubmit = (values, {setSubmitting, resetForm}) => {
+        requestServer(SET_USER_PASSWORD, 'post', {
+            data: {
+                current_password: values.current_password,
+                new_password: values.new_password,
+                new_password_confirmation: values.new_password_confirmation,
+            },
+        }).then((response) => {
+            resetForm();
+        }).catch(() => {
+        }).finally(() => {
+            setSubmitting(false);
+        });
+    };
+    const initialValues = {
+        current_password: "",
+        new_password: "",
+        new_password_confirmation: "",
+    };
+    const validationSchema = Yup.object().shape({
+        current_password: Yup.string().required(
+            t("ChangePassword.error_message_required")
+        ),
+        new_password: Yup.string()
+            .min(8, t("ChangePassword.error_message_password_length"))
+            .required(t("ChangePassword.error_message_required")),
+        new_password_confirmation: Yup.string()
+            .required(t("ChangePassword.error_message_required"))
+            .test(
+                t("ChangePassword.error_message_password_match"),
+                t("ChangePassword.error_message_password_not_match"),
+                function (value) {
+                    return this.parent.new_password === value;
+                }
+            ),
+    });
+
+    return (
+        <DashboardLayouts>
+            <CenterLayout>
+                <Container maxWidth="sm">
+                    <Formik
+                        initialValues={initialValues}
+                        onSubmit={handleSubmit}
+                        validationSchema={validationSchema}
+                    >
+                        {(props) => (
+                            <StyledForm
+                                onSubmit={(e) => {
+                                    e.preventDefault();
+                                    props.handleSubmit();
+                                }}
+                            >
+                                <Paper elevation={0}>
+                                    <Stack spacing={3} sx={{p: 5}} component="div">
+                                        <SvgChangePassword width={300} height={200}/>
+                                        <Typography margin={2} variant="h4" textAlign="center">
+                                            {t("ChangePassword.typography_change_password")}
+                                        </Typography>
+                                        <Stack spacing={1} component="div">
+                                            <PasswordField
+                                                name="current_password"
+                                                label={t("ChangePassword.label_current_password")}
+                                                error={
+                                                    props.touched.current_password &&
+                                                    props.errors.current_password
+                                                        ? true
+                                                        : false
+                                                }
+                                                helperText={
+                                                    props.touched.current_password
+                                                        ? props.errors.current_password
+                                                        : null
+                                                }
+                                            />
+                                        </Stack>
+                                        <Stack spacing={1} component="div">
+                                            <PasswordField
+                                                name="new_password"
+                                                label={t("ChangePassword.label_new_password")}
+                                                error={
+                                                    props.touched.new_password &&
+                                                    props.errors.new_password
+                                                        ? true
+                                                        : false
+                                                }
+                                                helperText={
+                                                    props.touched.new_password
+                                                        ? props.errors.new_password
+                                                        : null
+                                                }
+                                            />
+                                        </Stack>
+                                        <Stack spacing={1} component="div">
+                                            <PasswordField
+                                                name="new_password_confirmation"
+                                                label={t("ChangePassword.label_confirm_password")}
+                                                error={
+                                                    props.touched.new_password_confirmation &&
+                                                    props.errors.new_password_confirmation
+                                                        ? true
+                                                        : false
+                                                }
+                                                helperText={
+                                                    props.touched.new_password_confirmation
+                                                        ? props.errors.new_password_confirmation
+                                                        : null
+                                                }
+                                            />
+                                        </Stack>
+                                        <Button
+                                            type="submit"
+                                            fullWidth
+                                            variant="contained"
+                                            color="primary"
+                                            size="large"
+                                            disabled={props.isSubmitting}
+                                        >
+                                            {props.isSubmitting
+                                                ? t("SubmitButton.button_while_submit")
+                                                : t("SubmitButton.button_submit")}
+                                        </Button>
+                                    </Stack>
+                                </Paper>
+                            </StyledForm>
+                        )}
+                    </Formik>
+                </Container>
+            </CenterLayout>
+        </DashboardLayouts>
+    );
+};
+export default DashboardChangePasswordComponent;
--- a/src/components/dashboard/commercial-chief/Form/ConfirmForm.jsx
+++ b/src/components/dashboard/commercial-chief/Form/ConfirmForm.jsx
@@ -0,0 +1,142 @@
+import {useTranslations} from "next-intl";
+import {useState} from "react";
+import {
+    Button,
+    Dialog,
+    DialogActions,
+    DialogContent,
+    DialogTitle,
+    IconButton,
+    Stack,
+    TextField,
+    Tooltip,
+    Typography
+} from "@mui/material";
+import ThumbUpAltIcon from "@mui/icons-material/ThumbUpAlt";
+import UploadSystem from "@/core/components/UploadSystem";
+import {useFormik} from "formik";
+import UploadFileNotification from "@/core/components/notifications/UploadFileNotification";
+import {CONFIRM_COMMERCIAL_CHIEF} from "@/core/data/apiRoutes";
+import useRequest from "@/lib/app/hooks/useRequest";
+import useNotification from "@/lib/app/hooks/useNotification";
+
+
+const Confirm = ({rowId, fetchUrl, mutate}) => {
+    const t = useTranslations();
+    const [selectedImage, setSelectedImage] = useState("");
+    const [fileType, setfileType] = useState(null);
+    const [fileName, setfileName] = useState(null);
+    const [showAddIcon, setShowAddIcon] = useState(true);
+    const [openConfirmDialog, setOpenConfirmDialog] = useState(false);
+    const requestServer = useRequest({auth: true})
+    const {update_notification} = useNotification()
+
+    const formik = useFormik({
+        initialValues: {
+            description: "",
+            confirm_img: null
+        },
+        onSubmit: (values, {setSubmitting}) => {
+            const formData = new FormData();
+            if (values.description != "") formData.append("description", values.description);
+            if (values.confirm_img != null) formData.append("attachment", values.confirm_img);
+
+            requestServer(`${CONFIRM_COMMERCIAL_CHIEF}/${rowId}`, 'post', {
+                data: formData,
+            }).then((response) => {
+                mutate(fetchUrl)
+                update_notification()
+            }).catch(() => {
+            }).finally(() => {
+                setSubmitting(false);
+            });
+        },
+    });
+
+    const handleDescriptionChange = (event) => {
+        formik.setFieldValue("description", event.target.value)
+    };
+
+    const handleUploadChange = (event) => {
+        const uploadedFile = event.target?.files?.[0];
+        if (uploadedFile) {
+            const maxFileSize = 2 * 1024 * 1024;
+            if (uploadedFile.size > maxFileSize) {
+                UploadFileNotification(t);
+                event.target.value = "";
+                return;
+            }
+
+            const fileType = event.target?.files?.[0].type;
+            const fileName = event.target?.files?.[0].name;
+            setSelectedImage(URL.createObjectURL(uploadedFile));
+            setfileType(fileType);
+            setfileName(fileName);
+            formik.setFieldValue("confirm_img", uploadedFile);
+            setShowAddIcon(false);
+        }
+    };
+    return (
+        <>
+            <Tooltip title={t("ConfirmDialog.confirm")}>
+                <IconButton
+                    color="primary"
+                    onClick={() => {
+                        setOpenConfirmDialog(true)
+                    }}
+                >
+                    <ThumbUpAltIcon/>
+                </IconButton>
+            </Tooltip>
+            <Dialog fullWidth open={openConfirmDialog}
+                    PaperProps={{sx: {boxShadow: 'rgba(60, 64, 67, 0.3) 0px 1px 16px 0px, rgba(60, 64, 67, 0.15) 0px 1px 10px 0px'}}}>
+                <DialogTitle>{t("ConfirmDialog.confirm")}</DialogTitle>
+                <DialogContent>
+                    <Stack spacing={2}>
+                        <Stack>
+                            <TextField
+                                name="description"
+                                multiline
+                                rows={8}
+                                label={<>
+                                    <span>{t("ConfirmDialog.description")}</span><small>{t("ConfirmDialog.optional")}</small></>}
+                                value={formik.values.description}
+                                onChange={handleDescriptionChange}
+                                fullWidth
+                                variant="outlined"
+                                sx={{mt: 1}}
+                            />
+                        </Stack>
+                        <Stack>
+                            <Typography>{t("UploadSystem.upload_file")}{t("UploadSystem.optional")}</Typography>
+                            <UploadSystem
+                                selectedImage={selectedImage}
+                                handleUploadChange={handleUploadChange} // Pass the updated function directly
+                                setselectedImage={setSelectedImage}
+                                setFieldValue={formik.setFieldValue} // Remove props.setFieldValue, use formik.setFieldValue
+                                fieldname="confirm_img"
+                                fileType={fileType}
+                                fileName={fileName}
+                                imageAlt={t("app_name")}
+                                imageSize={[250, 150]}
+                                setShowAddIcon={setShowAddIcon}
+                                showAddIcon={showAddIcon}
+                            />
+                        </Stack>
+                    </Stack>
+                </DialogContent>
+                <DialogActions>
+                    <Button onClick={() => setOpenConfirmDialog(false)} variant="outlined" color="secondary"
+                            disabled={formik.isSubmitting} autoFocus>
+                        {t("ConfirmDialog.button-cancel")}
+                    </Button>
+                    <Button onClick={formik.handleSubmit} variant="contained" color="primary"
+                            disabled={formik.isSubmitting}>
+                        {t("ConfirmDialog.button-confirm")}
+                    </Button>
+                </DialogActions>
+            </Dialog>
+        </>
+    );
+};
+export default Confirm;
--- a/src/components/dashboard/commercial-chief/Form/RejectForm.jsx
+++ b/src/components/dashboard/commercial-chief/Form/RejectForm.jsx
@@ -0,0 +1,146 @@
+import {REJECT_COMMERCIAL_CHIEF} from "@/core/data/apiRoutes";
+import {
+    Button,
+    Dialog,
+    DialogActions,
+    DialogContent,
+    DialogTitle,
+    IconButton,
+    Stack,
+    TextField,
+    Tooltip,
+    Typography,
+} from "@mui/material";
+import {useTranslations} from "next-intl";
+import {useFormik} from "formik";
+import * as Yup from "yup";
+import {useState} from "react";
+import UploadSystem from "@/core/components/UploadSystem";
+import UploadFileNotification from "@/core/components/notifications/UploadFileNotification";
+import ThumbDownIcon from "@mui/icons-material/ThumbDown";
+import useRequest from "@/lib/app/hooks/useRequest";
+import useNotification from "@/lib/app/hooks/useNotification";
+
+
+const Reject = ({rowId, fetchUrl, mutate}) => {
+    const [selectedImage, setSelectedImage] = useState("");
+    const [fileType, setfileType] = useState(null);
+    const [fileName, setfileName] = useState(null);
+    const [showAddIcon, setShowAddIcon] = useState(true);
+    const t = useTranslations();
+    const [openRejectDialog, setOpenRejectDialog] = useState(false);
+    const requestServer = useRequest({auth: true})
+    const {update_notification} = useNotification()
+
+    const validationSchema = Yup.object().shape({
+        description: Yup.string().required(t("RejectDialog.description_error")),
+    });
+
+    const formik = useFormik({
+        initialValues: {
+            description: "",
+            reject_img: null
+        },
+        validationSchema,
+        onSubmit: (values, {setSubmitting}) => {
+            const formData = new FormData();
+            formData.append("description", values.description);
+            if (values.reject_img != null) formData.append("attachment", values.reject_img);
+
+            requestServer(`${REJECT_COMMERCIAL_CHIEF}/${rowId}`, 'post', {
+                data: formData,
+            }).then((response) => {
+                mutate(fetchUrl)
+                update_notification()
+            }).catch(() => {
+            }).finally(() => {
+                setSubmitting(false);
+            });
+        },
+    });
+
+    const handleDescriptionChange = (event) => {
+        formik.setFieldValue("description", event.target.value);
+        formik.handleChange(event);
+    };
+    const handleUploadChange = (event) => {
+        const uploadedFile = event.target?.files?.[0];
+        if (uploadedFile) {
+            const maxFileSize = 2 * 1024 * 1024;
+            if (uploadedFile.size > maxFileSize) {
+                UploadFileNotification(t);
+                event.target.value = "";
+                return;
+            }
+            const fileType = event.target?.files?.[0].type;
+            const fileName = event.target?.files?.[0].name;
+            setSelectedImage(URL.createObjectURL(uploadedFile));
+            setfileType(fileType);
+            setfileName(fileName);
+            formik.setFieldValue("reject_img", uploadedFile);
+            setShowAddIcon(false);
+        }
+    };
+    return (
+        <>
+            <Tooltip title={t("RejectDialog.reject")}>
+                <IconButton color="primary" onClick={() => setOpenRejectDialog(true)}>
+                    <ThumbDownIcon/>
+                </IconButton>
+            </Tooltip>
+            <Dialog fullWidth open={openRejectDialog}
+                    PaperProps={{sx: {boxShadow: 'rgba(60, 64, 67, 0.3) 0px 1px 16px 0px, rgba(60, 64, 67, 0.15) 0px 1px 10px 0px'}}}>
+                <DialogTitle>{t("RejectDialog.reject")}</DialogTitle>
+                <DialogContent>
+                    <Stack spacing={2}>
+                        <Stack>
+                            <TextField
+                                name="description"
+                                multiline
+                                rows={8}
+                                label={t("RejectDialog.description")}
+                                value={formik.values.description}
+                                onChange={handleDescriptionChange}
+                                onBlur={formik.handleBlur("description")}
+                                error={
+                                    formik.touched.description && Boolean(formik.errors.description)
+                                }
+                                helperText={formik.touched.description && formik.errors.description}
+                                fullWidth
+                                variant="outlined"
+                                sx={{mt: 1}}
+                            />
+                        </Stack>
+                        <Stack>
+                            <Typography>{t("UploadSystem.upload_file")}{t("UploadSystem.optional")}</Typography>
+                            <UploadSystem
+                                selectedImage={selectedImage}
+                                handleUploadChange={handleUploadChange} // Pass the updated function directly
+                                setselectedImage={setSelectedImage}
+                                setFieldValue={formik.setFieldValue} // Remove props.setFieldValue, use formik.setFieldValue
+                                fieldname="reject_img"
+                                fileType={fileType}
+                                fileName={fileName}
+                                imageAlt={t("app_name")}
+                                imageSize={[250 /*width*/, 150 /*height*/]}
+                                setShowAddIcon={setShowAddIcon}
+                                showAddIcon={showAddIcon}
+                            />
+                        </Stack>
+                    </Stack>
+                </DialogContent>
+                <DialogActions>
+                    <Button onClick={() => setOpenRejectDialog(false)} variant="outlined" color="secondary"
+                            disabled={formik.isSubmitting} autoFocus>
+                        {t("RejectDialog.button-cancel")}
+                    </Button>
+                    <Button onClick={formik.handleSubmit} variant="contained" color="primary"
+                            disabled={formik.isSubmitting}>
+                        {t("RejectDialog.button-reject")}
+                    </Button>
+                </DialogActions>
+            </Dialog>
+        </>
+    );
+};
+export default Reject;
--- a/src/components/dashboard/commercial-chief/TableRowActions.jsx
+++ b/src/components/dashboard/commercial-chief/TableRowActions.jsx
@@ -0,0 +1,23 @@
+import {Box} from "@mui/material";
+import ConfirmForm from "./Form/ConfirmForm"
+import RejectForm from "./Form/RejectForm"
+
+const TableRow = ({row, mutate, fetchUrl}) => {
+
+    return (
+        <Box sx={{display: "flex", flexWrap: "nowrap", gap: "8px"}}>
+            <ConfirmForm
+                rowId={row.getValue("id")}
+                mutate={mutate}
+                fetchUrl={fetchUrl}
+            />
+            <RejectForm
+                rowId={row.getValue("id")}
+                fetchUrl={fetchUrl}
+                mutate={mutate}
+            />
+        </Box>
+    );
+};
+
+export default TableRow;
--- a/src/components/dashboard/commercial-chief/TableTollbar.jsx
+++ b/src/components/dashboard/commercial-chief/TableTollbar.jsx
--- a/src/components/dashboard/commercial-chief/index.jsx
+++ b/src/components/dashboard/commercial-chief/index.jsx
@@ -0,0 +1,201 @@
+import DashboardLayouts from "@/layouts/dashboardLayouts";
+import {Box, IconButton, Typography} from "@mui/material";
+import ClearIcon from "@mui/icons-material/Clear";
+import {useMemo} from "react";
+import {GET_COMMERCIAL_CHIEF} from "@/core/data/apiRoutes";
+import {useTranslations} from "next-intl";
+import TableRowActions from "./TableRowActions";
+import {LocalizationProvider, MobileDateTimePicker,} from "@mui/x-date-pickers";
+import {AdapterDateFnsJalali} from "@mui/x-date-pickers/AdapterDateFnsJalali";
+import moment from "jalali-moment";
+import {faIR} from "@mui/x-date-pickers/locales";
+import DataTable from "@/core/components/DataTable";
+
+function DashboardCommercialChiefComponent() {
+    const t = useTranslations();
+    const columns = useMemo(
+        () => [
+            {
+                accessorFn: (row) => row.id,
+                id: "id",
+                header: t("CommercialChief.id"),
+                enableColumnFilter: true,
+                datatype: "numeric",
+                filterFn: "equals",
+                columnFilterModeOptions: [
+                    "equals",
+                    "notEquals",
+                    "contains",
+                    "lessThan",
+                    "greaterThan",
+                    "between",
+                ],
+                Cell: ({renderedCellValue}) => (
+                    <Typography variant="body2">{renderedCellValue}</Typography>
+                ),
+            },
+            {
+                accessorFn: (row) => row.name,
+                id: "name",
+                header: t("CommercialChief.name"),
+                enableColumnFilter: true,
+                datatype: "text",
+                filterFn: "contains",
+                columnFilterModeOptions: ["contains", "equals", "notEquals"],
+                Cell: ({renderedCellValue}) => (
+                    <Typography variant="body2">{renderedCellValue}</Typography>
+                ),
+            },
+            {
+                accessorFn: (row) => row.national_id,
+                id: "national_id",
+                header: t("CommercialChief.national_id"),
+                enableColumnFilter: true,
+                datatype: "numeric",
+                filterFn: "equals",
+                columnFilterModeOptions: [
+                    "equals",
+                    "notEquals",
+                    "contains",
+                    "lessThan",
+                    "greaterThan",
+                    "between",
+                ],
+                Cell: ({renderedCellValue}) => (
+                    <Typography variant="body2">{renderedCellValue}</Typography>
+                ),
+            },
+            {
+                accessorFn: (row) => row.phone_number,
+                id: "phone_number",
+                header: t("CommercialChief.phone_number"),
+                enableColumnFilter: true,
+                datatype: "numeric",
+                filterFn: "equals",
+                columnFilterModeOptions: [
+                    "equals",
+                    "notEquals",
+                    "contains",
+                    "lessThan",
+                    "greaterThan",
+                    "between",
+                ],
+                Cell: ({renderedCellValue}) => (
+                    <Typography variant="body2">{renderedCellValue}</Typography>
+                ),
+            },
+            {
+                accessorFn: (row) =>
+                    moment(row.created_at).locale("fa").format("HH:mm | yyyy/MM/DD"),
+                id: "created_at",
+                header: t("CommercialChief.created_at"),
+                enableColumnFilter: true,
+                datatype: "date",
+                filterFn: "lessThan",
+                columnFilterModeOptions: ["lessThan", "greaterThan"],
+                Cell: ({renderedCellValue}) => {
+                    return <Typography variant="body2">{renderedCellValue}</Typography>;
+                },
+                Header: ({column}) => <em>{column.columnDef.header}</em>,
+                Filter: ({column}) => {
+                    const filterFnValue = column.columnDef._filterFn;
+                    return (
+                        <Box sx={{display: "flex", alignItems: "start"}}>
+                            <LocalizationProvider
+                                dateAdapter={AdapterDateFnsJalali}
+                                localeText={
+                                    faIR.components.MuiLocalizationProvider.defaultProps
+                                        .localeText
+                                }
+                            >
+                                <MobileDateTimePicker
+                                    ampm={false}
+                                    onChange={(newValue) => {
+                                        const date = new Date(newValue);
+                                        const formattedDate = moment(date)
+                                            .locale("en")
+                                            .format("YYYY-MM-DD HH:mm");
+                                        column.setFilterValue(formattedDate);
+                                    }}
+                                    slotProps={{
+                                        textField: {
+                                            placeholder: "تاریخ خود را وارد کنید",
+                                            helperText: `${t("filter_mode")}: ${t(filterFnValue)}`,
+                                            sx: {minWidth: "120px"},
+                                            variant: "standard",
+                                        },
+                                    }}
+                                    value={
+                                        column.getFilterValue()
+                                            ? new Date(column.getFilterValue())
+                                            : null
+                                    }
+                                />
+                            </LocalizationProvider>
+                            <IconButton
+                                size="small"
+                                onClick={() => {
+                                    column.setFilterValue(null);
+                                }}
+                                sx={{
+                                    color: column.getFilterValue()
+                                        ? "rgba(0, 0, 0, 0.54)"
+                                        : "#bfbfbf",
+                                }}
+                            >
+                                <ClearIcon/>
+                            </IconButton>
+                        </Box>
+                    );
+                },
+            },
+            {
+                accessorFn: (row) =>
+                    moment(row.updated_at).locale("fa").format("HH:mm | yyyy/MM/DD"),
+                id: "updated_at",
+                header: t("CommercialChief.updated_at"),
+                enableColumnFilter: false,
+                datatype: "numeric",
+                Cell: ({renderedCellValue}) => (
+                    <Typography variant="body2">{renderedCellValue}</Typography>
+                ),
+            },
+            {
+                accessorFn: (row) => row.state_name,
+                id: "state_id",
+                header: t("CommercialChief.state_name"),
+                enableColumnFilter: false,
+                datatype: "numeric",
+                Cell: ({renderedCellValue}) => (
+                    <Typography variant="body2">{renderedCellValue}</Typography>
+                ),
+            },
+        ],
+        []
+    );
+    return (
+        <DashboardLayouts>
+            <Box sx={{px: 3}}>
+                <DataTable
+                    tableUrl={GET_COMMERCIAL_CHIEF}
+                    columns={columns}
+                    selectableRow={false}
+                    enableCustomToolbar={true}
+                    enableLastUpdate={true}
+                    enablePinning={true}
+                    enableDensityToggle={false}
+                    initialState={{density: 'compact'}} //compact (small) //comfortable (medium) //spacious (large)
+                    enableColumnFilters={true}
+                    enableHiding={true}
+                    enableFullScreenToggle={false}
+                    enableGlobalFilter={false}
+                    enableColumnResizing={false} // if you want true this you should change renderRowActions props ** see https://www.material-react-table.com/docs/guides/row-actions
+                    enableRowActions={true}
+                    TableRowAction={TableRowActions}
+                />
+            </Box>
+        </DashboardLayouts>
+    );
+}
+
+export default DashboardCommercialChiefComponent;
--- a/src/components/dashboard/development-assistant/Form/ConfirmForm.jsx
+++ b/src/components/dashboard/development-assistant/Form/ConfirmForm.jsx
@@ -0,0 +1,141 @@
+import {useTranslations} from "next-intl";
+import {useState} from "react";
+import {
+    Button,
+    Dialog,
+    DialogActions,
+    DialogContent,
+    DialogTitle,
+    IconButton,
+    Stack,
+    TextField,
+    Tooltip,
+    Typography
+} from "@mui/material";
+import ThumbUpAltIcon from "@mui/icons-material/ThumbUpAlt";
+import UploadSystem from "@/core/components/UploadSystem";
+import {useFormik} from "formik";
+import UploadFileNotification from "@/core/components/notifications/UploadFileNotification";
+import {CONFIRM_DEVELOPMENT_ASSISTANT} from "@/core/data/apiRoutes";
+import useRequest from "@/lib/app/hooks/useRequest";
+import useNotification from "@/lib/app/hooks/useNotification";
+
+
+const Confirm = ({rowId, fetchUrl, mutate}) => {
+    const t = useTranslations();
+    const [selectedImage, setSelectedImage] = useState("");
+    const [fileType, setfileType] = useState(null);
+    const [fileName, setfileName] = useState(null);
+    const [showAddIcon, setShowAddIcon] = useState(true);
+    const [openConfirmDialog, setOpenConfirmDialog] = useState(false);
+    const requestServer = useRequest({auth: true})
+    const {update_notification} = useNotification()
+
+    const formik = useFormik({
+        initialValues: {
+            description: "",
+            confirm_img: null
+        },
+        onSubmit: (values, {setSubmitting}) => {
+            const formData = new FormData();
+            if (values.description != "") formData.append("description", values.description);
+            if (values.confirm_img != null) formData.append("attachment", values.confirm_img);
+
+            requestServer(`${CONFIRM_DEVELOPMENT_ASSISTANT}/${rowId}`, 'post', {
+                data: formData,
+            }).then((response) => {
+                mutate(fetchUrl)
+                update_notification()
+            }).catch(() => {
+            }).finally(() => {
+                setSubmitting(false);
+            });
+        },
+    });
+
+    const handleDescriptionChange = (event) => {
+        formik.setFieldValue("description", event.target.value)
+    };
+    const handleUploadChange = (event) => {
+        const uploadedFile = event.target?.files?.[0];
+        if (uploadedFile) {
+            const maxFileSize = 2 * 1024 * 1024;
+            if (uploadedFile.size > maxFileSize) {
+                UploadFileNotification(t);
+                event.target.value = "";
+                return;
+            }
+
+            const fileType = event.target?.files?.[0].type;
+            const fileName = event.target?.files?.[0].name;
+            setSelectedImage(URL.createObjectURL(uploadedFile));
+            setfileType(fileType);
+            setfileName(fileName);
+            formik.setFieldValue("confirm_img", uploadedFile);
+            setShowAddIcon(false);
+        }
+    };
+    return (
+        <>
+            <Tooltip title={t("ConfirmDialog.confirm")}>
+                <IconButton
+                    color="primary"
+                    onClick={() => {
+                        setOpenConfirmDialog(true)
+                    }}
+                >
+                    <ThumbUpAltIcon/>
+                </IconButton>
+            </Tooltip>
+            <Dialog fullWidth open={openConfirmDialog}
+                    PaperProps={{sx: {boxShadow: 'rgba(60, 64, 67, 0.3) 0px 1px 16px 0px, rgba(60, 64, 67, 0.15) 0px 1px 10px 0px'}}}>
+                <DialogTitle>{t("ConfirmDialog.confirm")}</DialogTitle>
+                <DialogContent>
+                    <Stack spacing={2}>
+                        <Stack>
+                            <TextField
+                                name="description"
+                                multiline
+                                rows={8}
+                                label={<>
+                                    <span>{t("ConfirmDialog.description")}</span><small>{t("ConfirmDialog.optional")}</small></>}
+                                value={formik.values.description}
+                                onChange={handleDescriptionChange}
+                                fullWidth
+                                variant="outlined"
+                                sx={{mt: 1}}
+                            />
+                        </Stack>
+                        <Stack>
+                            <Typography>{t("UploadSystem.upload_file")}{t("UploadSystem.optional")}</Typography>
+                            <UploadSystem
+                                selectedImage={selectedImage}
+                                handleUploadChange={handleUploadChange} // Pass the updated function directly
+                                setselectedImage={setSelectedImage}
+                                setFieldValue={formik.setFieldValue} // Remove props.setFieldValue, use formik.setFieldValue
+                                fieldname="confirm_img"
+                                fileType={fileType}
+                                fileName={fileName}
+                                imageAlt={t("app_name")}
+                                imageSize={[250, 150]}
+                                setShowAddIcon={setShowAddIcon}
+                                showAddIcon={showAddIcon}
+                            />
+                        </Stack>
+                    </Stack>
+                </DialogContent>
+                <DialogActions>
+                    <Button onClick={() => setOpenConfirmDialog(false)} variant="outlined" color="secondary"
+                            disabled={formik.isSubmitting} autoFocus>
+                        {t("ConfirmDialog.button-cancel")}
+                    </Button>
+                    <Button onClick={formik.handleSubmit} variant="contained" color="primary"
+                            disabled={formik.isSubmitting}>
+                        {t("ConfirmDialog.button-confirm")}
+                    </Button>
+                </DialogActions>
+            </Dialog>
+        </>
+    );
+};
+export default Confirm;
--- a/src/components/dashboard/development-assistant/Form/RejectForm.jsx
+++ b/src/components/dashboard/development-assistant/Form/RejectForm.jsx
@@ -0,0 +1,146 @@
+import {REJECT_DEVELOPMENT_ASSISTANT} from "@/core/data/apiRoutes";
+import {
+    Button,
+    Dialog,
+    DialogActions,
+    DialogContent,
+    DialogTitle,
+    IconButton,
+    Stack,
+    TextField,
+    Tooltip,
+    Typography,
+} from "@mui/material";
+import {useTranslations} from "next-intl";
+import {useFormik} from "formik";
+import * as Yup from "yup";
+import {useState} from "react";
+import UploadSystem from "@/core/components/UploadSystem";
+import UploadFileNotification from "@/core/components/notifications/UploadFileNotification";
+import ThumbDownIcon from "@mui/icons-material/ThumbDown";
+import useRequest from "@/lib/app/hooks/useRequest";
+import useNotification from "@/lib/app/hooks/useNotification";
+
+
+const Reject = ({rowId, fetchUrl, mutate}) => {
+    const [selectedImage, setSelectedImage] = useState("");
+    const [fileType, setfileType] = useState(null);
+    const [fileName, setfileName] = useState(null);
+    const [showAddIcon, setShowAddIcon] = useState(true);
+    const t = useTranslations();
+    const [openRejectDialog, setOpenRejectDialog] = useState(false);
+    const requestServer = useRequest({auth: true})
+    const {update_notification} = useNotification()
+
+    const validationSchema = Yup.object().shape({
+        description: Yup.string().required(t("RejectDialog.description_error")),
+    });
+
+    const formik = useFormik({
+        initialValues: {
+            description: "",
+            reject_img: null
+        },
+        validationSchema,
+        onSubmit: (values, {setSubmitting}) => {
+            const formData = new FormData();
+            formData.append("description", values.description);
+            if (values.reject_img != null) formData.append("attachment", values.reject_img);
+
+            requestServer(`${REJECT_DEVELOPMENT_ASSISTANT}/${rowId}`, 'post', {
+                data: formData,
+            }).then((response) => {
+                mutate(fetchUrl)
+                update_notification()
+            }).catch(() => {
+            }).finally(() => {
+                setSubmitting(false);
+            });
+        },
+    });
+
+    const handleDescriptionChange = (event) => {
+        formik.setFieldValue("description", event.target.value);
+        formik.handleChange(event);
+    };
+    const handleUploadChange = (event) => {
+        const uploadedFile = event.target?.files?.[0];
+        if (uploadedFile) {
+            const maxFileSize = 2 * 1024 * 1024;
+            if (uploadedFile.size > maxFileSize) {
+                UploadFileNotification(t);
+                event.target.value = "";
+                return;
+            }
+            const fileType = event.target?.files?.[0].type;
+            const fileName = event.target?.files?.[0].name;
+            setSelectedImage(URL.createObjectURL(uploadedFile));
+            setfileType(fileType);
+            setfileName(fileName);
+            formik.setFieldValue("reject_img", uploadedFile);
+            setShowAddIcon(false);
+        }
+    };
+    return (
+        <>
+            <Tooltip title={t("RejectDialog.reject")}>
+                <IconButton color="primary" onClick={() => setOpenRejectDialog(true)}>
+                    <ThumbDownIcon/>
+                </IconButton>
+            </Tooltip>
+            <Dialog fullWidth open={openRejectDialog}
+                    PaperProps={{sx: {boxShadow: 'rgba(60, 64, 67, 0.3) 0px 1px 16px 0px, rgba(60, 64, 67, 0.15) 0px 1px 10px 0px'}}}>
+                <DialogTitle>{t("RejectDialog.reject")}</DialogTitle>
+                <DialogContent>
+                    <Stack spacing={2}>
+                        <Stack>
+                            <TextField
+                                name="description"
+                                multiline
+                                rows={8}
+                                label={t("RejectDialog.description")}
+                                value={formik.values.description}
+                                onChange={handleDescriptionChange}
+                                onBlur={formik.handleBlur("description")}
+                                error={
+                                    formik.touched.description && Boolean(formik.errors.description)
+                                }
+                                helperText={formik.touched.description && formik.errors.description}
+                                fullWidth
+                                variant="outlined"
+                                sx={{mt: 1}}
+                            />
+                        </Stack>
+                        <Stack>
+                            <Typography>{t("UploadSystem.upload_file")}{t("UploadSystem.optional")}</Typography>
+                            <UploadSystem
+                                selectedImage={selectedImage}
+                                handleUploadChange={handleUploadChange} // Pass the updated function directly
+                                setselectedImage={setSelectedImage}
+                                setFieldValue={formik.setFieldValue} // Remove props.setFieldValue, use formik.setFieldValue
+                                fieldname="reject_img"
+                                fileType={fileType}
+                                fileName={fileName}
+                                imageAlt={t("app_name")}
+                                imageSize={[250 /*width*/, 150 /*height*/]}
+                                setShowAddIcon={setShowAddIcon}
+                                showAddIcon={showAddIcon}
+                            />
+                        </Stack>
+                    </Stack>
+                </DialogContent>
+                <DialogActions>
+                    <Button onClick={() => setOpenRejectDialog(false)} variant="outlined" color="secondary"
+                            disabled={formik.isSubmitting} autoFocus>
+                        {t("RejectDialog.button-cancel")}
+                    </Button>
+                    <Button onClick={formik.handleSubmit} variant="contained" color="primary"
+                            disabled={formik.isSubmitting}>
+                        {t("RejectDialog.button-reject")}
+                    </Button>
+                </DialogActions>
+            </Dialog>
+        </>
+    );
+};
+export default Reject;
--- a/src/components/dashboard/development-assistant/TableRowActions.jsx
+++ b/src/components/dashboard/development-assistant/TableRowActions.jsx
@@ -0,0 +1,23 @@
+import {Box} from "@mui/material";
+import ConfirmForm from "./Form/ConfirmForm"
+import RejectForm from "./Form/RejectForm"
+
+const TableRow = ({row, mutate, fetchUrl}) => {
+
+    return (
+        <Box sx={{display: "flex", flexWrap: "nowrap", gap: "8px"}}>
+            <ConfirmForm
+                rowId={row.getValue("id")}
+                mutate={mutate}
+                fetchUrl={fetchUrl}
+            />
+            <RejectForm
+                rowId={row.getValue("id")}
+                fetchUrl={fetchUrl}
+                mutate={mutate}
+            />
+        </Box>
+    );
+};
+
+export default TableRow;
--- a/src/components/dashboard/development-assistant/TableTollbar.jsx
+++ b/src/components/dashboard/development-assistant/TableTollbar.jsx
--- a/src/components/dashboard/development-assistant/index.jsx
+++ b/src/components/dashboard/development-assistant/index.jsx
@@ -0,0 +1,202 @@
+import DashboardLayouts from "@/layouts/dashboardLayouts";
+import {Box, IconButton, Typography} from "@mui/material";
+import ClearIcon from "@mui/icons-material/Clear";
+import {useMemo} from "react";
+import {GET_DEVELOPMENT_ASSISTANT} from "@/core/data/apiRoutes";
+import {useTranslations} from "next-intl";
+import TableRowActions from "./TableRowActions";
+import {LocalizationProvider, MobileDateTimePicker,} from "@mui/x-date-pickers";
+import {AdapterDateFnsJalali} from "@mui/x-date-pickers/AdapterDateFnsJalali";
+import moment from "jalali-moment";
+import {faIR} from "@mui/x-date-pickers/locales";
+import DataTable from "@/core/components/DataTable";
+
+function DashboardDevelopmentAssistantComponent() {
+    const t = useTranslations();
+
+    const columns = useMemo(
+        () => [
+            {
+                accessorFn: (row) => row.id,
+                id: "id",
+                header: t("DevelopmentAssistant.id"),
+                enableColumnFilter: true,
+                datatype: "numeric",
+                filterFn: "equals",
+                columnFilterModeOptions: [
+                    "equals",
+                    "notEquals",
+                    "contains",
+                    "lessThan",
+                    "greaterThan",
+                    "between",
+                ],
+                Cell: ({renderedCellValue}) => (
+                    <Typography variant="body2">{renderedCellValue}</Typography>
+                ),
+            },
+            {
+                accessorFn: (row) => row.name,
+                id: "name",
+                header: t("DevelopmentAssistant.name"),
+                enableColumnFilter: true,
+                datatype: "text",
+                filterFn: "contains",
+                columnFilterModeOptions: ["contains", "equals", "notEquals"],
+                Cell: ({renderedCellValue}) => (
+                    <Typography variant="body2">{renderedCellValue}</Typography>
+                ),
+            },
+            {
+                accessorFn: (row) => row.national_id,
+                id: "national_id",
+                header: t("DevelopmentAssistant.national_id"),
+                enableColumnFilter: true,
+                datatype: "numeric",
+                filterFn: "equals",
+                columnFilterModeOptions: [
+                    "equals",
+                    "notEquals",
+                    "contains",
+                    "lessThan",
+                    "greaterThan",
+                    "between",
+                ],
+                Cell: ({renderedCellValue}) => (
+                    <Typography variant="body2">{renderedCellValue}</Typography>
+                ),
+            },
+            {
+                accessorFn: (row) => row.phone_number,
+                id: "phone_number",
+                header: t("DevelopmentAssistant.phone_number"),
+                enableColumnFilter: true,
+                datatype: "numeric",
+                filterFn: "equals",
+                columnFilterModeOptions: [
+                    "equals",
+                    "notEquals",
+                    "contains",
+                    "lessThan",
+                    "greaterThan",
+                    "between",
+                ],
+                Cell: ({renderedCellValue}) => (
+                    <Typography variant="body2">{renderedCellValue}</Typography>
+                ),
+            },
+            {
+                accessorFn: (row) =>
+                    moment(row.created_at).locale("fa").format("HH:mm | yyyy/MM/DD"),
+                id: "created_at",
+                header: t("DevelopmentAssistant.created_at"),
+                enableColumnFilter: true,
+                datatype: "date",
+                filterFn: "lessThan",
+                columnFilterModeOptions: ["lessThan", "greaterThan"],
+                Cell: ({renderedCellValue}) => {
+                    return <Typography variant="body2">{renderedCellValue}</Typography>;
+                },
+                Header: ({column}) => <em>{column.columnDef.header}</em>,
+                Filter: ({column}) => {
+                    const filterFnValue = column.columnDef._filterFn;
+                    return (
+                        <Box sx={{display: "flex", alignItems: "start"}}>
+                            <LocalizationProvider
+                                dateAdapter={AdapterDateFnsJalali}
+                                localeText={
+                                    faIR.components.MuiLocalizationProvider.defaultProps
+                                        .localeText
+                                }
+                            >
+                                <MobileDateTimePicker
+                                    ampm={false}
+                                    onChange={(newValue) => {
+                                        const date = new Date(newValue);
+                                        const formattedDate = moment(date)
+                                            .locale("en")
+                                            .format("YYYY-MM-DD HH:mm");
+                                        column.setFilterValue(formattedDate);
+                                    }}
+                                    slotProps={{
+                                        textField: {
+                                            placeholder: "تاریخ خود را وارد کنید",
+                                            helperText: `${t("filter_mode")}: ${t(filterFnValue)}`,
+                                            sx: {minWidth: "120px"},
+                                            variant: "standard",
+                                        },
+                                    }}
+                                    value={
+                                        column.getFilterValue()
+                                            ? new Date(column.getFilterValue())
+                                            : null
+                                    }
+                                />
+                            </LocalizationProvider>
+                            <IconButton
+                                size="small"
+                                onClick={() => {
+                                    column.setFilterValue(null);
+                                }}
+                                sx={{
+                                    color: column.getFilterValue()
+                                        ? "rgba(0, 0, 0, 0.54)"
+                                        : "#bfbfbf",
+                                }}
+                            >
+                                <ClearIcon/>
+                            </IconButton>
+                        </Box>
+                    );
+                },
+            },
+            {
+                accessorFn: (row) =>
+                    moment(row.updated_at).locale("fa").format("HH:mm | yyyy/MM/DD"),
+                id: "updated_at",
+                header: t("DevelopmentAssistant.updated_at"),
+                enableColumnFilter: false,
+                datatype: "numeric",
+                Cell: ({renderedCellValue}) => (
+                    <Typography variant="body2">{renderedCellValue}</Typography>
+                ),
+            },
+            {
+                accessorFn: (row) => row.state_name,
+                id: "state_id",
+                header: t("DevelopmentAssistant.state_name"),
+                enableColumnFilter: false,
+                datatype: "numeric",
+                Cell: ({renderedCellValue}) => (
+                    <Typography variant="body2">{renderedCellValue}</Typography>
+                ),
+            },
+        ],
+        []
+    );
+    return (
+        <DashboardLayouts>
+            <Box sx={{px: 3}}>
+                <DataTable
+                    tableUrl={GET_DEVELOPMENT_ASSISTANT}
+                    columns={columns}
+                    selectableRow={false}
+                    enableCustomToolbar={true}
+                    enableLastUpdate={true}
+                    enablePinning={true}
+                    enableDensityToggle={false}
+                    initialState={{density: 'compact'}} //compact (small) //comfortable (medium) //spacious (large)
+                    enableColumnFilters={true}
+                    enableHiding={true}
+                    enableFullScreenToggle={false}
+                    enableGlobalFilter={false}
+                    enableColumnResizing={false} // if you want true this you should change renderRowActions props ** see https://www.material-react-table.com/docs/guides/row-actions
+                    enableRowActions={true}
+                    TableRowAction={TableRowActions}
+                />
+            </Box>
+        </DashboardLayouts>
+    );
+}
+
+export default DashboardDevelopmentAssistantComponent;
--- a/src/components/dashboard/edit-profile/index.jsx
+++ b/src/components/dashboard/edit-profile/index.jsx
@@ -0,0 +1,223 @@
+import StyledForm from "@/core/components/StyledForm";
+import CenterLayout from "@/layouts/CenterLayout";
+import DashboardLayouts from "@/layouts/dashboardLayouts";
+import useUser from "@/lib/app/hooks/useUser";
+import {Box, Container, Grid, Paper, Stack, TextField, Typography,} from "@mui/material";
+import * as Yup from "yup";
+import {Field, Formik} from "formik";
+import {useTranslations} from "next-intl";
+import AvatarUpload from "@/core/components/AvatarUpload";
+import axios from "axios";
+import {UPDATE_AVATAR} from "@/core/data/apiRoutes";
+import useDirection from "@/lib/app/hooks/useDirection";
+import Notifications from "@/core/components/notifications";
+import ImageResizer from "@/core/components/ImageConvertor";
+
+const DashboardEditProfile = () => {
+    const t = useTranslations();
+    const {user, token, getUser, changeUser} = useUser();
+    const {directionApp} = useDirection();
+
+    const editAvatar = async (avatar) => {
+        Notifications(t);
+        try {
+            const formData = new FormData();
+
+            if (avatar != null) {
+                var resizedAvatar;
+                resizedAvatar = await ImageResizer(avatar);
+                formData.append("avatar", resizedAvatar);
+            }
+
+            await axios.post(UPDATE_AVATAR, formData, {
+                headers: {
+                    authorization: `Bearer ${token}`,
+                    "Content-Type": "multipart/form-data",
+                },
+            });
+        } catch (error) {
+            Notifications(t, error.response);
+            throw error;
+        }
+    };
+    const handleSubmit = (values, {setSubmitting}) => {
+
+    };
+    const initialValues = {
+        expert_avatar: null,
+        username: user.username,
+        name: user.name,
+        email: user.email,
+        province_name: user.province_name,
+        position: user.position,
+    };
+    const validationSchema = Yup.object().shape({});
+
+    return (
+        <DashboardLayouts>
+            <CenterLayout>
+                <Container maxWidth="sm">
+                    <Formik
+                        initialValues={initialValues}
+                        onSubmit={handleSubmit}
+                        validationSchema={validationSchema}
+                    >
+                        {(props) => (
+                            <StyledForm
+                                onSubmit={(e) => {
+                                    e.preventDefault();
+                                    props.handleSubmit();
+                                }}
+                            >
+                                <Paper elevation={0}>
+                                    <Stack spacing={3} sx={{p: 5}} component="div">
+                                        <Typography margin={2} variant="h4" textAlign="center">
+                                            {t("UpdateProfile.typography_edit_profile")}
+                                        </Typography>
+                                        <Box
+                                            sx={{
+                                                display: "flex",
+                                                flexDirection: "column",
+                                                alignItems: "center",
+                                                justifyContent: "center",
+                                            }}
+                                        >
+                                            <AvatarUpload
+                                                user={user}
+                                                setFieldValue={props.setFieldValue}
+                                                valueAvatar="expert_avatar"
+                                                changeFlag="change_avatar"
+                                            />
+                                        </Box>
+                                        <Grid container spacing={2} sx={{pb: 2}}>
+                                            <Grid item xs={12} sm={6}>
+                                                <Field
+                                                    as={TextField}
+                                                    name="username"
+                                                    label={t("UpdateProfile.text_field_username")}
+                                                    variant="outlined"
+                                                    margin="normal"
+                                                    size="small"
+                                                    disabled={true}
+                                                    error={
+                                                        props.touched.username && props.errors.username
+                                                            ? true
+                                                            : false
+                                                    }
+                                                    helperText={
+                                                        props.touched.username
+                                                            ? props.errors.username
+                                                            : null
+                                                    }
+                                                    sx={{
+                                                        width: "100%",
+                                                    }}
+                                                />
+                                            </Grid>
+                                            <Grid item xs={12} sm={6}>
+                                                <Field
+                                                    as={TextField}
+                                                    name="name"
+                                                    label={t("UpdateProfile.text_field_name")}
+                                                    variant="outlined"
+                                                    margin="normal"
+                                                    size="small"
+                                                    disabled={true}
+                                                    error={
+                                                        props.touched.name && props.errors.name
+                                                            ? true
+                                                            : false
+                                                    }
+                                                    helperText={
+                                                        props.touched.name ? props.errors.name : null
+                                                    }
+                                                    sx={{
+                                                        width: "100%",
+                                                    }}
+                                                />
+                                            </Grid>
+                                            <Grid item xs={12} sm={6}>
+                                                <Field
+                                                    as={TextField}
+                                                    name="email"
+                                                    label={t("UpdateProfile.text_field_email")}
+                                                    variant="outlined"
+                                                    margin="normal"
+                                                    size="small"
+                                                    disabled={true}
+                                                    error={
+                                                        props.touched.email && props.errors.email
+                                                            ? true
+                                                            : false
+                                                    }
+                                                    helperText={
+                                                        props.touched.email ? props.errors.email : null
+                                                    }
+                                                    sx={{
+                                                        width: "100%",
+                                                    }}
+                                                />
+                                            </Grid>
+
+                                            <Grid item xs={12} sm={6}>
+                                                <Field
+                                                    as={TextField}
+                                                    name="province_name"
+                                                    label={t("UpdateProfile.text_field_province_name")}
+                                                    variant="outlined"
+                                                    margin="normal"
+                                                    size="small"
+                                                    disabled={true}
+                                                    error={
+                                                        props.touched.province_name &&
+                                                        props.errors.province_name
+                                                            ? true
+                                                            : false
+                                                    }
+                                                    helperText={
+                                                        props.touched.province_name
+                                                            ? props.errors.province_name
+                                                            : null
+                                                    }
+                                                    sx={{
+                                                        width: "100%",
+                                                    }}
+                                                />
+                                            </Grid>
+                                            <Grid item xs={12} sm={6}>
+                                                <Field
+                                                    as={TextField}
+                                                    name="position"
+                                                    label={t("UpdateProfile.text_field_position")}
+                                                    variant="outlined"
+                                                    margin="normal"
+                                                    size="small"
+                                                    disabled={true}
+                                                    error={
+                                                        props.touched.position && props.errors.position
+                                                            ? true
+                                                            : false
+                                                    }
+                                                    helperText={
+                                                        props.touched.position
+                                                            ? props.errors.position
+                                                            : null
+                                                    }
+                                                    sx={{
+                                                        width: "100%",
+                                                    }}
+                                                />
+                                            </Grid>
+                                        </Grid>
+                                    </Stack>
+                                </Paper>
+                            </StyledForm>
+                        )}
+                    </Formik>
+                </Container>
+            </CenterLayout>
+        </DashboardLayouts>
+    );
+};
+
+export default DashboardEditProfile;
--- a/src/components/dashboard/first/index.jsx
+++ b/src/components/dashboard/first/index.jsx
@@ -1,7 +1,7 @@
 import DashboardLayouts from "@/layouts/dashboardLayouts";

 const DashboardFirstComponent = () => {
-  return <DashboardLayouts></DashboardLayouts>;
+    return <DashboardLayouts></DashboardLayouts>;
 };

 export default DashboardFirstComponent;
--- a/src/components/dashboard/inspector-expert/Form/ConfirmForm.jsx
+++ b/src/components/dashboard/inspector-expert/Form/ConfirmForm.jsx
@@ -0,0 +1,141 @@
+import {useTranslations} from "next-intl";
+import {useState} from "react";
+import {
+    Button,
+    Dialog,
+    DialogActions,
+    DialogContent,
+    DialogTitle,
+    IconButton,
+    Stack,
+    TextField,
+    Tooltip,
+    Typography
+} from "@mui/material";
+import ThumbUpAltIcon from "@mui/icons-material/ThumbUpAlt";
+import UploadSystem from "@/core/components/UploadSystem";
+import {useFormik} from "formik";
+import UploadFileNotification from "@/core/components/notifications/UploadFileNotification";
+import {CONFIRM_INSPECTOR_EXPERT} from "@/core/data/apiRoutes";
+import useRequest from "@/lib/app/hooks/useRequest";
+import useNotification from "@/lib/app/hooks/useNotification";
+
+
+const Confirm = ({rowId, fetchUrl, mutate}) => {
+    const t = useTranslations();
+    const [selectedImage, setSelectedImage] = useState("");
+    const [fileType, setfileType] = useState(null);
+    const [fileName, setfileName] = useState(null);
+    const [showAddIcon, setShowAddIcon] = useState(true);
+    const [openConfirmDialog, setOpenConfirmDialog] = useState(false);
+    const requestServer = useRequest({auth: true})
+    const {update_notification} = useNotification()
+
+    const formik = useFormik({
+        initialValues: {
+            description: "",
+            confirm_img: null
+        },
+        onSubmit: (values, {setSubmitting}) => {
+            const formData = new FormData();
+            if (values.description != "") formData.append("description", values.description);
+            if (values.confirm_img != null) formData.append("attachment", values.confirm_img);
+
+            requestServer(`${CONFIRM_INSPECTOR_EXPERT}/${rowId}`, 'post', {
+                data: formData,
+            }).then((response) => {
+                mutate(fetchUrl)
+                update_notification()
+            }).catch(() => {
+            }).finally(() => {
+                setSubmitting(false);
+            });
+        },
+    });
+
+    const handleDescriptionChange = (event) => {
+        formik.setFieldValue("description", event.target.value)
+    };
+    const handleUploadChange = (event) => {
+        const uploadedFile = event.target?.files?.[0];
+        if (uploadedFile) {
+            const maxFileSize = 2 * 1024 * 1024;
+            if (uploadedFile.size > maxFileSize) {
+                UploadFileNotification(t);
+                event.target.value = "";
+                return;
+            }
+
+            const fileType = event.target?.files?.[0].type;
+            const fileName = event.target?.files?.[0].name;
+            setSelectedImage(URL.createObjectURL(uploadedFile));
+            setfileType(fileType);
+            setfileName(fileName);
+            formik.setFieldValue("confirm_img", uploadedFile);
+            setShowAddIcon(false);
+        }
+    };
+    return (
+        <>
+            <Tooltip title={t("ConfirmDialog.confirm")}>
+                <IconButton
+                    color="primary"
+                    onClick={() => {
+                        setOpenConfirmDialog(true)
+                    }}
+                >
+                    <ThumbUpAltIcon/>
+                </IconButton>
+            </Tooltip>
+            <Dialog fullWidth open={openConfirmDialog}
+                    PaperProps={{sx: {boxShadow: 'rgba(60, 64, 67, 0.3) 0px 1px 16px 0px, rgba(60, 64, 67, 0.15) 0px 1px 10px 0px'}}}>
+                <DialogTitle>{t("ConfirmDialog.confirm")}</DialogTitle>
+                <DialogContent>
+                    <Stack spacing={2}>
+                        <Stack>
+                            <TextField
+                                name="description"
+                                multiline
+                                rows={8}
+                                label={<>
+                                    <span>{t("ConfirmDialog.description")}</span><small>{t("ConfirmDialog.optional")}</small></>}
+                                value={formik.values.description}
+                                onChange={handleDescriptionChange}
+                                fullWidth
+                                variant="outlined"
+                                sx={{mt: 1}}
+                            />
+                        </Stack>
+                        <Stack>
+                            <Typography>{t("UploadSystem.upload_file")}{t("UploadSystem.optional")}</Typography>
+                            <UploadSystem
+                                selectedImage={selectedImage}
+                                handleUploadChange={handleUploadChange} // Pass the updated function directly
+                                setselectedImage={setSelectedImage}
+                                setFieldValue={formik.setFieldValue} // Remove props.setFieldValue, use formik.setFieldValue
+                                fieldname="confirm_img"
+                                fileType={fileType}
+                                fileName={fileName}
+                                imageAlt={t("app_name")}
+                                imageSize={[250, 150]}
+                                setShowAddIcon={setShowAddIcon}
+                                showAddIcon={showAddIcon}
+                            />
+                        </Stack>
+                    </Stack>
+                </DialogContent>
+                <DialogActions>
+                    <Button onClick={() => setOpenConfirmDialog(false)} variant="outlined" color="secondary"
+                            disabled={formik.isSubmitting} autoFocus>
+                        {t("ConfirmDialog.button-cancel")}
+                    </Button>
+                    <Button onClick={formik.handleSubmit} variant="contained" color="primary"
+                            disabled={formik.isSubmitting}>
+                        {t("ConfirmDialog.button-confirm")}
+                    </Button>
+                </DialogActions>
+            </Dialog>
+        </>
+    );
+};
+export default Confirm;
--- a/src/components/dashboard/inspector-expert/Form/RejectForm.jsx
+++ b/src/components/dashboard/inspector-expert/Form/RejectForm.jsx
@@ -0,0 +1,148 @@
+import {REJECT_INSPECTOR_EXPERT} from "@/core/data/apiRoutes";
+import {
+    Button,
+    Dialog,
+    DialogActions,
+    DialogContent,
+    DialogTitle,
+    IconButton,
+    Stack,
+    TextField,
+    Tooltip,
+    Typography,
+} from "@mui/material";
+import {useTranslations} from "next-intl";
+import {useFormik} from "formik";
+import * as Yup from "yup";
+import {useState} from "react";
+import UploadSystem from "@/core/components/UploadSystem";
+import UploadFileNotification from "@/core/components/notifications/UploadFileNotification";
+import useDirection from "@/lib/app/hooks/useDirection";
+import ThumbDownIcon from "@mui/icons-material/ThumbDown";
+import useRequest from "@/lib/app/hooks/useRequest";
+import useNotification from "@/lib/app/hooks/useNotification";
+
+
+const Reject = ({rowId, fetchUrl, mutate}) => {
+    const [selectedImage, setSelectedImage] = useState("");
+    const [fileType, setfileType] = useState(null);
+    const [fileName, setfileName] = useState(null);
+    const [showAddIcon, setShowAddIcon] = useState(true);
+    const t = useTranslations();
+    const {directionApp} = useDirection();
+    const [openRejectDialog, setOpenRejectDialog] = useState(false);
+    const requestServer = useRequest({auth: true})
+    const {update_notification} = useNotification()
+
+    const validationSchema = Yup.object().shape({
+        description: Yup.string().required(t("RejectDialog.description_error")),
+    });
+
+    const formik = useFormik({
+        initialValues: {
+            description: "",
+            reject_img: null
+        },
+        validationSchema,
+        onSubmit: (values, {setSubmitting}) => {
+            const formData = new FormData();
+            formData.append("description", values.description);
+            if (values.reject_img != null) formData.append("attachment", values.reject_img);
+
+            requestServer(`${REJECT_INSPECTOR_EXPERT}/${rowId}`, 'post', {
+                data: formData,
+            }).then((response) => {
+                mutate(fetchUrl)
+                update_notification()
+            }).catch(() => {
+            }).finally(() => {
+                setSubmitting(false);
+            });
+        },
+    });
+
+    const handleDescriptionChange = (event) => {
+        formik.setFieldValue("description", event.target.value);
+        formik.handleChange(event);
+    };
+    const handleUploadChange = (event) => {
+        const uploadedFile = event.target?.files?.[0];
+        if (uploadedFile) {
+            const maxFileSize = 2 * 1024 * 1024;
+            if (uploadedFile.size > maxFileSize) {
+                UploadFileNotification(t);
+                event.target.value = "";
+                return;
+            }
+            const fileType = event.target?.files?.[0].type;
+            const fileName = event.target?.files?.[0].name;
+            setSelectedImage(URL.createObjectURL(uploadedFile));
+            setfileType(fileType);
+            setfileName(fileName);
+            formik.setFieldValue("reject_img", uploadedFile);
+            setShowAddIcon(false);
+        }
+    };
+    return (
+        <>
+            <Tooltip title={t("RejectDialog.reject")}>
+                <IconButton color="primary" onClick={() => setOpenRejectDialog(true)}>
+                    <ThumbDownIcon/>
+                </IconButton>
+            </Tooltip>
+            <Dialog fullWidth open={openRejectDialog}
+                    PaperProps={{sx: {boxShadow: 'rgba(60, 64, 67, 0.3) 0px 1px 16px 0px, rgba(60, 64, 67, 0.15) 0px 1px 10px 0px'}}}>
+                <DialogTitle>{t("RejectDialog.reject")}</DialogTitle>
+                <DialogContent>
+                    <Stack spacing={2}>
+                        <Stack>
+                            <TextField
+                                name="description"
+                                multiline
+                                rows={8}
+                                label={t("RejectDialog.description")}
+                                value={formik.values.description}
+                                onChange={handleDescriptionChange}
+                                onBlur={formik.handleBlur("description")}
+                                error={
+                                    formik.touched.description && Boolean(formik.errors.description)
+                                }
+                                helperText={formik.touched.description && formik.errors.description}
+                                fullWidth
+                                variant="outlined"
+                                sx={{mt: 1}}
+                            />
+                        </Stack>
+                        <Stack>
+                            <Typography>{t("UploadSystem.upload_file")}{t("UploadSystem.optional")}</Typography>
+                            <UploadSystem
+                                selectedImage={selectedImage}
+                                handleUploadChange={handleUploadChange} // Pass the updated function directly
+                                setselectedImage={setSelectedImage}
+                                setFieldValue={formik.setFieldValue} // Remove props.setFieldValue, use formik.setFieldValue
+                                fieldname="reject_img"
+                                fileType={fileType}
+                                fileName={fileName}
+                                imageAlt={t("app_name")}
+                                imageSize={[250 /*width*/, 150 /*height*/]}
+                                setShowAddIcon={setShowAddIcon}
+                                showAddIcon={showAddIcon}
+                            />
+                        </Stack>
+                    </Stack>
+                </DialogContent>
+                <DialogActions>
+                    <Button onClick={() => setOpenRejectDialog(false)} variant="outlined" color="secondary"
+                            disabled={formik.isSubmitting} autoFocus>
+                        {t("RejectDialog.button-cancel")}
+                    </Button>
+                    <Button onClick={formik.handleSubmit} variant="contained" color="primary"
+                            disabled={formik.isSubmitting}>
+                        {t("RejectDialog.button-reject")}
+                    </Button>
+                </DialogActions>
+            </Dialog>
+        </>
+    );
+};
+export default Reject;
--- a/src/components/dashboard/inspector-expert/Form/ReviseForm.jsx
+++ b/src/components/dashboard/inspector-expert/Form/ReviseForm.jsx
@@ -0,0 +1,104 @@
+import {REVISE_INSPECTOR_EXPERT} from "@/core/data/apiRoutes";
+import {
+    Button,
+    Dialog,
+    DialogActions,
+    DialogContent,
+    DialogTitle,
+    IconButton,
+    Stack,
+    TextField,
+    Tooltip,
+} from "@mui/material";
+import {useTranslations} from "next-intl";
+import {useFormik} from "formik";
+import * as Yup from "yup";
+import {useState} from "react";
+import useRequest from "@/lib/app/hooks/useRequest";
+import EditIcon from "@mui/icons-material/Edit";
+import useNotification from "@/lib/app/hooks/useNotification";
+
+
+const Revise = ({rowId, fetchUrl, mutate}) => {
+    const t = useTranslations();
+    const [openRejectDialog, setOpenRejectDialog] = useState(false);
+    const requestServer = useRequest({auth: true})
+    const {update_notification} = useNotification()
+
+    const validationSchema = Yup.object().shape({
+        description: Yup.string().required(t("ReviseDialog.description_error")),
+    });
+
+    const formik = useFormik({
+        initialValues: {
+            description: "",
+        },
+        validationSchema,
+        onSubmit: (values, {setSubmitting}) => {
+            const formData = new FormData();
+            formData.append("description", values.description);
+
+            requestServer(`${REVISE_INSPECTOR_EXPERT}/${rowId}`, 'post', {
+                data: formData,
+            }).then((response) => {
+                mutate(fetchUrl)
+                update_notification()
+            }).catch(() => {
+            }).finally(() => {
+                setSubmitting(false);
+            });
+        },
+    });
+
+    const handleDescriptionChange = (event) => {
+        formik.setFieldValue("description", event.target.value);
+        formik.handleChange(event);
+    };
+
+    return (
+        <>
+            <Tooltip title={t("ReviseDialog.revise")}>
+                <IconButton color="primary" onClick={() => setOpenRejectDialog(true)}>
+                    <EditIcon/>
+                </IconButton>
+            </Tooltip>
+            <Dialog fullWidth open={openRejectDialog}
+                    PaperProps={{sx: {boxShadow: 'rgba(60, 64, 67, 0.3) 0px 1px 16px 0px, rgba(60, 64, 67, 0.15) 0px 1px 10px 0px'}}}>
+                <DialogTitle>{t("ReviseDialog.revise")}</DialogTitle>
+                <DialogContent>
+                    <Stack spacing={2}>
+                        <Stack>
+                            <TextField
+                                name="description"
+                                multiline
+                                rows={8}
+                                label={t("ReviseDialog.description")}
+                                value={formik.values.description}
+                                onChange={handleDescriptionChange}
+                                onBlur={formik.handleBlur("description")}
+                                error={
+                                    formik.touched.description && Boolean(formik.errors.description)
+                                }
+                                helperText={formik.touched.description && formik.errors.description}
+                                fullWidth
+                                variant="outlined"
+                                sx={{mt: 1}}
+                            />
+                        </Stack>
+                    </Stack>
+                </DialogContent>
+                <DialogActions>
+                    <Button onClick={() => setOpenRejectDialog(false)} variant="outlined" color="secondary"
+                            disabled={formik.isSubmitting} autoFocus>
+                        {t("ReviseDialog.button-cancel")}
+                    </Button>
+                    <Button onClick={formik.handleSubmit} variant="contained" color="primary"
+                            disabled={formik.isSubmitting}>
+                        {t("ReviseDialog.button-revise")}
+                    </Button>
+                </DialogActions>
+            </Dialog>
+        </>
+    );
+};
+export default Revise;
--- a/src/components/dashboard/inspector-expert/TableRowActions.jsx
+++ b/src/components/dashboard/inspector-expert/TableRowActions.jsx
@@ -0,0 +1,29 @@
+import {Box} from "@mui/material";
+import ConfirmForm from "./Form/ConfirmForm"
+import RejectForm from "./Form/RejectForm"
+import ReviseForm from "./Form/ReviseForm"
+
+const TableRow = ({row, mutate, fetchUrl}) => {
+
+    return (
+        <Box sx={{display: "flex", flexWrap: "nowrap", gap: "8px"}}>
+            <ConfirmForm
+                rowId={row.getValue("id")}
+                mutate={mutate}
+                fetchUrl={fetchUrl}
+            />
+            <RejectForm
+                rowId={row.getValue("id")}
+                fetchUrl={fetchUrl}
+                mutate={mutate}
+            />
+            <ReviseForm
+                rowId={row.getValue("id")}
+                fetchUrl={fetchUrl}
+                mutate={mutate}
+            />
+        </Box>
+    );
+};
+
+export default TableRow;
--- a/src/components/dashboard/inspector-expert/TableTollbar.jsx
+++ b/src/components/dashboard/inspector-expert/TableTollbar.jsx
--- a/src/components/dashboard/inspector-expert/index.jsx
+++ b/src/components/dashboard/inspector-expert/index.jsx
@@ -0,0 +1,201 @@
+import DashboardLayouts from "@/layouts/dashboardLayouts";
+import {Box, IconButton, Typography} from "@mui/material";
+import ClearIcon from "@mui/icons-material/Clear";
+import {useMemo} from "react";
+import {GET_INSPECTOR_EXPERT} from "@/core/data/apiRoutes";
+import {useTranslations} from "next-intl";
+import TableRowActions from "./TableRowActions";
+import {LocalizationProvider, MobileDateTimePicker,} from "@mui/x-date-pickers";
+import {AdapterDateFnsJalali} from "@mui/x-date-pickers/AdapterDateFnsJalali";
+import moment from "jalali-moment";
+import {faIR} from "@mui/x-date-pickers/locales";
+import DataTable from "@/core/components/DataTable";
+
+function DashboardInspectorExpertComponent() {
+    const t = useTranslations();
+    const columns = useMemo(
+        () => [
+            {
+                accessorFn: (row) => row.id,
+                id: "id",
+                header: t("InspectorExpert.id"),
+                enableColumnFilter: true,
+                datatype: "numeric",
+                filterFn: "equals",
+                columnFilterModeOptions: [
+                    "equals",
+                    "notEquals",
+                    "contains",
+                    "lessThan",
+                    "greaterThan",
+                    "between",
+                ],
+                Cell: ({renderedCellValue}) => (
+                    <Typography variant="body2">{renderedCellValue}</Typography>
+                ),
+            },
+            {
+                accessorFn: (row) => row.name,
+                id: "name",
+                header: t("InspectorExpert.name"),
+                enableColumnFilter: true,
+                datatype: "text",
+                filterFn: "contains",
+                columnFilterModeOptions: ["contains", "equals", "notEquals"],
+                Cell: ({renderedCellValue}) => (
+                    <Typography variant="body2">{renderedCellValue}</Typography>
+                ),
+            },
+            {
+                accessorFn: (row) => row.national_id,
+                id: "national_id",
+                header: t("InspectorExpert.national_id"),
+                enableColumnFilter: true,
+                datatype: "numeric",
+                filterFn: "equals",
+                columnFilterModeOptions: [
+                    "equals",
+                    "notEquals",
+                    "contains",
+                    "lessThan",
+                    "greaterThan",
+                    "between",
+                ],
+                Cell: ({renderedCellValue}) => (
+                    <Typography variant="body2">{renderedCellValue}</Typography>
+                ),
+            },
+            {
+                accessorFn: (row) => row.phone_number,
+                id: "phone_number",
+                header: t("InspectorExpert.phone_number"),
+                enableColumnFilter: true,
+                datatype: "numeric",
+                filterFn: "equals",
+                columnFilterModeOptions: [
+                    "equals",
+                    "notEquals",
+                    "contains",
+                    "lessThan",
+                    "greaterThan",
+                    "between",
+                ],
+                Cell: ({renderedCellValue}) => (
+                    <Typography variant="body2">{renderedCellValue}</Typography>
+                ),
+            },
+            {
+                accessorFn: (row) =>
+                    moment(row.created_at).locale("fa").format("HH:mm | yyyy/MM/DD"),
+                id: "created_at",
+                header: t("InspectorExpert.created_at"),
+                enableColumnFilter: true,
+                datatype: "date",
+                filterFn: "lessThan",
+                columnFilterModeOptions: ["lessThan", "greaterThan"],
+                Cell: ({renderedCellValue}) => {
+                    return <Typography variant="body2">{renderedCellValue}</Typography>;
+                },
+                Header: ({column}) => <em>{column.columnDef.header}</em>,
+                Filter: ({column}) => {
+                    const filterFnValue = column.columnDef._filterFn;
+                    return (
+                        <Box sx={{display: "flex", alignItems: "start"}}>
+                            <LocalizationProvider
+                                dateAdapter={AdapterDateFnsJalali}
+                                localeText={
+                                    faIR.components.MuiLocalizationProvider.defaultProps
+                                        .localeText
+                                }
+                            >
+                                <MobileDateTimePicker
+                                    ampm={false}
+                                    onChange={(newValue) => {
+                                        const date = new Date(newValue);
+                                        const formattedDate = moment(date)
+                                            .locale("en")
+                                            .format("YYYY-MM-DD HH:mm");
+                                        column.setFilterValue(formattedDate);
+                                    }}
+                                    slotProps={{
+                                        textField: {
+                                            placeholder: "تاریخ خود را وارد کنید",
+                                            helperText: `${t("filter_mode")}: ${t(filterFnValue)}`,
+                                            sx: {minWidth: "120px"},
+                                            variant: "standard",
+                                        },
+                                    }}
+                                    value={
+                                        column.getFilterValue()
+                                            ? new Date(column.getFilterValue())
+                                            : null
+                                    }
+                                />
+                            </LocalizationProvider>
+                            <IconButton
+                                size="small"
+                                onClick={() => {
+                                    column.setFilterValue(null);
+                                }}
+                                sx={{
+                                    color: column.getFilterValue()
+                                        ? "rgba(0, 0, 0, 0.54)"
+                                        : "#bfbfbf",
+                                }}
+                            >
+                                <ClearIcon/>
+                            </IconButton>
+                        </Box>
+                    );
+                },
+            },
+            {
+                accessorFn: (row) =>
+                    moment(row.updated_at).locale("fa").format("HH:mm | yyyy/MM/DD"),
+                id: "updated_at",
+                header: t("InspectorExpert.updated_at"),
+                enableColumnFilter: false,
+                datatype: "numeric",
+                Cell: ({renderedCellValue}) => (
+                    <Typography variant="body2">{renderedCellValue}</Typography>
+                ),
+            },
+            {
+                accessorFn: (row) => row.state_name,
+                id: "state_id",
+                header: t("InspectorExpert.state_name"),
+                enableColumnFilter: false,
+                datatype: "numeric",
+                Cell: ({renderedCellValue}) => (
+                    <Typography variant="body2">{renderedCellValue}</Typography>
+                ),
+            },
+        ],
+        []
+    );
+    return (
+        <DashboardLayouts>
+            <Box sx={{px: 3}}>
+                <DataTable
+                    tableUrl={GET_INSPECTOR_EXPERT}
+                    columns={columns}
+                    selectableRow={false}
+                    enableCustomToolbar={true}
+                    enableLastUpdate={true}
+                    enablePinning={true}
+                    enableDensityToggle={false}
+                    initialState={{density: 'compact'}} //compact (small) //comfortable (medium) //spacious (large)
+                    enableColumnFilters={true}
+                    enableHiding={true}
+                    enableFullScreenToggle={false}
+                    enableGlobalFilter={false}
+                    enableColumnResizing={false} // if you want true this you shold change renderRowActions props ** see https://www.material-react-table.com/docs/guides/row-actions
+                    enableRowActions={true}
+                    TableRowAction={TableRowActions}
+                />
+            </Box>
+        </DashboardLayouts>
+    );
+}
+
+export default DashboardInspectorExpertComponent;
--- a/src/components/dashboard/loan-follow-up/index.jsx
+++ b/src/components/dashboard/loan-follow-up/index.jsx
@@ -1,19 +0,0 @@
-import CenterLayout from "@/layouts/CenterLayout";
-import DashboardLayouts from "@/layouts/dashboardLayouts";
-import useUser from "@/lib/app/hooks/useUser";
-import { useTranslations } from "next-intl";
-import React from "react";
-
-const DashboardLoanFollowUpComponent = () => {
-  const t = useTranslations();
-  const { token } = useUser();
-  return (
-    <DashboardLayouts>
-      <CenterLayout>
-        <p>چه کشکی چه پشمی</p>
-      </CenterLayout>
-    </DashboardLayouts>
-  );
-};
-
-export default DashboardLoanFollowUpComponent;
--- a/src/components/dashboard/loan-request/index.jsx
+++ b/src/components/dashboard/loan-request/index.jsx
@@ -1,19 +0,0 @@
-import CenterLayout from "@/layouts/CenterLayout";
-import DashboardLayouts from "@/layouts/dashboardLayouts";
-import useUser from "@/lib/app/hooks/useUser";
-import { useTranslations } from "next-intl";
-import React from "react";
-
-const DashboardLoanRequestComponent = () => {
-  const t = useTranslations();
-  const { token } = useUser();
-  return (
-    <DashboardLayouts>
-      <CenterLayout>
-        <p>نکنه وامم میخوای؟؟؟</p>
-      </CenterLayout>
-    </DashboardLayouts>
-  );
-};
-
-export default DashboardLoanRequestComponent;
--- a/src/components/dashboard/machinary-office/Form/ConfirmForm.jsx
+++ b/src/components/dashboard/machinary-office/Form/ConfirmForm.jsx
@@ -0,0 +1,178 @@
+import {useTranslations} from "next-intl";
+import {useState} from "react";
+import {
+    Button,
+    Dialog,
+    DialogActions,
+    DialogContent,
+    DialogTitle,
+    IconButton,
+    Stack,
+    TextField,
+    Tooltip,
+    Typography
+} from "@mui/material";
+import ThumbUpAltIcon from "@mui/icons-material/ThumbUpAlt";
+import UploadSystem from "@/core/components/UploadSystem";
+import useDirection from "@/lib/app/hooks/useDirection";
+import {useFormik} from "formik";
+import UploadFileNotification from "@/core/components/notifications/UploadFileNotification";
+import {CONFIRM_MACHINARY_OFFICE} from "@/core/data/apiRoutes";
+import * as Yup from "yup";
+import useRequest from "@/lib/app/hooks/useRequest";
+import useNotification from "@/lib/app/hooks/useNotification";
+
+
+const Confirm = ({rowId, fetchUrl, mutate}) => {
+    const t = useTranslations();
+    const {directionApp} = useDirection();
+    const [selectedImage, setSelectedImage] = useState("");
+    const [fileType, setfileType] = useState(null);
+    const [fileName, setfileName] = useState(null);
+    const [showAddIcon, setShowAddIcon] = useState(true);
+    const [openConfirmDialog, setOpenConfirmDialog] = useState(false);
+    const requestServer = useRequest({auth: true})
+    const {update_notification} = useNotification()
+
+    const validationSchema = Yup.object().shape({
+        proposed_amount: Yup.number().positive(t("ConfirmDialog.proposed_amount_positive")).required(t("ConfirmDialog.proposed_amount_error")),
+    })
+    const formik = useFormik({
+        initialValues: {
+            description: "",
+            proposed_amount: "",
+            confirm_img: null
+        },
+        validationSchema,
+        onSubmit: (values, {setSubmitting}) => {
+            const formData = new FormData();
+            formData.append("proposed_amount", values.proposed_amount);
+            if (values.description != "") formData.append("expert_description", values.description);
+            if (values.confirm_img != null) formData.append("attachment", values.confirm_img);
+
+            requestServer(`${CONFIRM_MACHINARY_OFFICE}/${rowId}`, 'post', {
+                data: formData,
+            }).then((response) => {
+                mutate(fetchUrl)
+                update_notification()
+            }).catch(() => {
+            }).finally(() => {
+                setSubmitting(false);
+            });
+        },
+    });
+
+    const handleDescriptionChange = (event) => {
+        formik.setFieldValue("description", event.target.value)
+    };
+    const handleAmountChange = (event) => {
+        formik.setFieldValue("proposed_amount", event.target.value);
+    };
+    const handleUploadChange = (event) => {
+        const uploadedFile = event.target?.files?.[0];
+        if (uploadedFile) {
+            const maxFileSize = 2 * 1024 * 1024;
+            if (uploadedFile.size > maxFileSize) {
+                UploadFileNotification(t);
+                event.target.value = "";
+                return;
+            }
+
+            const fileType = event.target?.files?.[0].type;
+            const fileName = event.target?.files?.[0].name;
+            setSelectedImage(URL.createObjectURL(uploadedFile));
+            setfileType(fileType);
+            setfileName(fileName);
+            formik.setFieldValue("confirm_img", uploadedFile);
+            setShowAddIcon(false);
+        }
+    };
+    return (
+        <>
+            <Tooltip title={t("ConfirmDialog.confirm")}>
+                <IconButton
+                    color="primary"
+                    onClick={() => {
+                        setOpenConfirmDialog(true)
+                    }}
+                >
+                    <ThumbUpAltIcon/>
+                </IconButton>
+            </Tooltip>
+            <Dialog fullWidth open={openConfirmDialog}
+                    PaperProps={{sx: {boxShadow: 'rgba(60, 64, 67, 0.3) 0px 1px 16px 0px, rgba(60, 64, 67, 0.15) 0px 1px 10px 0px'}}}>
+                <DialogTitle>{t("ConfirmDialog.confirm")}</DialogTitle>
+                <DialogContent>
+                    <Stack spacing={2}>
+                        <Stack>
+                            <TextField
+                                name="description"
+                                multiline
+                                rows={8}
+                                label={<>
+                                    <span>{t("ConfirmDialog.description")}</span><small>{t("ConfirmDialog.optional")}</small></>}
+                                value={formik.values.description}
+                                onChange={handleDescriptionChange}
+                                fullWidth
+                                variant="outlined"
+                                sx={{mt: 1}}
+                            />
+                        </Stack>
+                        <Stack>
+                            <TextField
+                                name="proposed_amount"
+                                label={<>
+                                    <span>{t("ConfirmDialog.proposed_amount")}</span><small>{t("ConfirmDialog.unit")}</small></>}
+                                type="number"
+                                inputProps={{
+                                    min: 0,
+                                    pattern: "[0-9]*",
+                                }}
+                                variant="outlined"
+                                value={formik.values.proposed_amount}
+                                onChange={handleAmountChange}
+                                onBlur={formik.handleBlur("proposed_amount")}
+                                error={
+                                    formik.touched.proposed_amount &&
+                                    Boolean(formik.errors.proposed_amount)
+                                }
+                                helperText={
+                                    formik.touched.proposed_amount && formik.errors.proposed_amount
+                                }
+                                sx={{mt: 1}}
+                                fullWidth
+                            />
+                        </Stack>
+                        <Stack>
+                            <Typography>{t("UploadSystem.upload_file")}{t("UploadSystem.optional")}</Typography>
+                            <UploadSystem
+                                selectedImage={selectedImage}
+                                handleUploadChange={handleUploadChange} // Pass the updated function directly
+                                setselectedImage={setSelectedImage}
+                                setFieldValue={formik.setFieldValue} // Remove props.setFieldValue, use formik.setFieldValue
+                                fieldname="confirm_img"
+                                fileType={fileType}
+                                fileName={fileName}
+                                imageAlt={t("app_name")}
+                                imageSize={[250, 150]}
+                                setShowAddIcon={setShowAddIcon}
+                                showAddIcon={showAddIcon}
+                            />
+                        </Stack>
+                    </Stack>
+                </DialogContent>
+                <DialogActions>
+                    <Button onClick={() => setOpenConfirmDialog(false)} variant="outlined" color="secondary"
+                            disabled={formik.isSubmitting} autoFocus>
+                        {t("ConfirmDialog.button-cancel")}
+                    </Button>
+                    <Button onClick={formik.handleSubmit} variant="contained" color="primary"
+                            disabled={formik.isSubmitting}>
+                        {t("ConfirmDialog.button-confirm")}
+                    </Button>
+                </DialogActions>
+            </Dialog>
+        </>
+    );
+};
+export default Confirm;
--- a/src/components/dashboard/machinary-office/Form/RejectForm.jsx
+++ b/src/components/dashboard/machinary-office/Form/RejectForm.jsx
@@ -0,0 +1,148 @@
+import {REJECT_MACHINARY_OFFICE} from "@/core/data/apiRoutes";
+import {
+    Button,
+    Dialog,
+    DialogActions,
+    DialogContent,
+    DialogTitle,
+    IconButton,
+    Stack,
+    TextField,
+    Tooltip,
+    Typography,
+} from "@mui/material";
+import {useTranslations} from "next-intl";
+import {useFormik} from "formik";
+import * as Yup from "yup";
+import {useState} from "react";
+import UploadSystem from "@/core/components/UploadSystem";
+import UploadFileNotification from "@/core/components/notifications/UploadFileNotification";
+import useDirection from "@/lib/app/hooks/useDirection";
+import ThumbDownIcon from "@mui/icons-material/ThumbDown";
+import useRequest from "@/lib/app/hooks/useRequest";
+import useNotification from "@/lib/app/hooks/useNotification";
+
+
+const Reject = ({rowId, fetchUrl, mutate}) => {
+    const [selectedImage, setSelectedImage] = useState("");
+    const [fileType, setfileType] = useState(null);
+    const [fileName, setfileName] = useState(null);
+    const [showAddIcon, setShowAddIcon] = useState(true);
+    const t = useTranslations();
+    const {directionApp} = useDirection();
+    const [openRejectDialog, setOpenRejectDialog] = useState(false);
+    const requestServer = useRequest({auth: true})
+    const {update_notification} = useNotification()
+
+    const validationSchema = Yup.object().shape({
+        description: Yup.string().required(t("RejectDialog.description_error")),
+    });
+
+    const formik = useFormik({
+        initialValues: {
+            description: "",
+            reject_img: null
+        },
+        validationSchema,
+        onSubmit: (values, {setSubmitting}) => {
+            const formData = new FormData();
+            formData.append("expert_description", values.description);
+            if (values.reject_img != null) formData.append("attachment", values.reject_img);
+
+            requestServer(`${REJECT_MACHINARY_OFFICE}/${rowId}`, 'post', {
+                data: formData,
+            }).then((response) => {
+                mutate(fetchUrl)
+                update_notification()
+            }).catch(() => {
+            }).finally(() => {
+                setSubmitting(false);
+            });
+        },
+    });
+
+    const handleDescriptionChange = (event) => {
+        formik.setFieldValue("description", event.target.value);
+        formik.handleChange(event);
+    };
+    const handleUploadChange = (event) => {
+        const uploadedFile = event.target?.files?.[0];
+        if (uploadedFile) {
+            const maxFileSize = 2 * 1024 * 1024;
+            if (uploadedFile.size > maxFileSize) {
+                UploadFileNotification(t);
+                event.target.value = "";
+                return;
+            }
+            const fileType = event.target?.files?.[0].type;
+            const fileName = event.target?.files?.[0].name;
+            setSelectedImage(URL.createObjectURL(uploadedFile));
+            setfileType(fileType);
+            setfileName(fileName);
+            formik.setFieldValue("reject_img", uploadedFile);
+            setShowAddIcon(false);
+        }
+    };
+    return (
+        <>
+            <Tooltip title={t("RejectDialog.reject")}>
+                <IconButton color="primary" onClick={() => setOpenRejectDialog(true)}>
+                    <ThumbDownIcon/>
+                </IconButton>
+            </Tooltip>
+            <Dialog fullWidth open={openRejectDialog}
+                    PaperProps={{sx: {boxShadow: 'rgba(60, 64, 67, 0.3) 0px 1px 16px 0px, rgba(60, 64, 67, 0.15) 0px 1px 10px 0px'}}}>
+                <DialogTitle>{t("RejectDialog.reject")}</DialogTitle>
+                <DialogContent>
+                    <Stack spacing={2}>
+                        <Stack>
+                            <TextField
+                                name="description"
+                                multiline
+                                rows={8}
+                                label={t("RejectDialog.description")}
+                                value={formik.values.description}
+                                onChange={handleDescriptionChange}
+                                onBlur={formik.handleBlur("description")}
+                                error={
+                                    formik.touched.description && Boolean(formik.errors.description)
+                                }
+                                helperText={formik.touched.description && formik.errors.description}
+                                fullWidth
+                                variant="outlined"
+                                sx={{mt: 1}}
+                            />
+                        </Stack>
+                        <Stack>
+                            <Typography>{t("UploadSystem.upload_file")}{t("UploadSystem.optional")}</Typography>
+                            <UploadSystem
+                                selectedImage={selectedImage}
+                                handleUploadChange={handleUploadChange} // Pass the updated function directly
+                                setselectedImage={setSelectedImage}
+                                setFieldValue={formik.setFieldValue} // Remove props.setFieldValue, use formik.setFieldValue
+                                fieldname="reject_img"
+                                fileType={fileType}
+                                fileName={fileName}
+                                imageAlt={t("app_name")}
+                                imageSize={[250 /*width*/, 150 /*height*/]}
+                                setShowAddIcon={setShowAddIcon}
+                                showAddIcon={showAddIcon}
+                            />
+                        </Stack>
+                    </Stack>
+                </DialogContent>
+                <DialogActions>
+                    <Button onClick={() => setOpenRejectDialog(false)} variant="outlined" color="secondary"
+                            disabled={formik.isSubmitting} autoFocus>
+                        {t("RejectDialog.button-cancel")}
+                    </Button>
+                    <Button onClick={formik.handleSubmit} variant="contained" color="primary"
+                            disabled={formik.isSubmitting}>
+                        {t("RejectDialog.button-reject")}
+                    </Button>
+                </DialogActions>
+            </Dialog>
+        </>
+    );
+};
+export default Reject;
--- a/src/components/dashboard/machinary-office/TableRowActions.jsx
+++ b/src/components/dashboard/machinary-office/TableRowActions.jsx
@@ -0,0 +1,23 @@
+import {Box} from "@mui/material";
+import ConfirmForm from "./Form/ConfirmForm"
+import RejectForm from "./Form/RejectForm"
+
+const TableRow = ({row, mutate, fetchUrl}) => {
+
+    return (
+        <Box sx={{display: "flex", flexWrap: "nowrap", gap: "8px"}}>
+            <ConfirmForm
+                rowId={row.getValue("id")}
+                mutate={mutate}
+                fetchUrl={fetchUrl}
+            />
+            <RejectForm
+                rowId={row.getValue("id")}
+                fetchUrl={fetchUrl}
+                mutate={mutate}
+            />
+        </Box>
+    );
+};
+
+export default TableRow;
--- a/src/components/dashboard/machinary-office/TableTolbar.jsx
+++ b/src/components/dashboard/machinary-office/TableTolbar.jsx
@@ -0,0 +1,13 @@
+import {Stack, Tooltip} from "@mui/material";
+import {useTranslations} from "next-intl";
+
+function TableToolbar() {
+    const t = useTranslations();
+    return (
+        <Stack direction={"row"} spacing={2}>
+            <Tooltip title={t("add")} arrow placement="right"></Tooltip>
+        </Stack>
+    );
+}
+
+export default TableToolbar;
--- a/src/components/dashboard/machinary-office/index.jsx
+++ b/src/components/dashboard/machinary-office/index.jsx
@@ -0,0 +1,232 @@
+import DashboardLayouts from "@/layouts/dashboardLayouts";
+import {Box, IconButton, Typography} from "@mui/material";
+import ClearIcon from "@mui/icons-material/Clear";
+import {useMemo} from "react";
+import {GET_MACHINARY_OFFICE} from "@/core/data/apiRoutes";
+import {useTranslations} from "next-intl";
+import TableRowActions from "./TableRowActions";
+import {LocalizationProvider, MobileDateTimePicker,} from "@mui/x-date-pickers";
+import {AdapterDateFnsJalali} from "@mui/x-date-pickers/AdapterDateFnsJalali";
+import moment from "jalali-moment";
+import {faIR} from "@mui/x-date-pickers/locales";
+import DataTable from "@/core/components/DataTable";
+
+function DashboardMachinaryOfficeComponent() {
+    const t = useTranslations();
+    const columns = useMemo(
+        () => [
+            {
+                accessorFn: (row) => row.id,
+                id: "id",
+                header: t("PassengerOffice.id"),
+                enableColumnFilter: true,
+                datatype: "numeric",
+                filterFn: "equals",
+                columnFilterModeOptions: [
+                    "equals",
+                    "notEquals",
+                    "contains",
+                    "lessThan",
+                    "greaterThan",
+                    "between",
+                ],
+                Cell: ({renderedCellValue}) => (
+                    <Typography variant="body2">{renderedCellValue}</Typography>
+                ),
+            },
+            {
+                accessorFn: (row) => row.name,
+                id: "name",
+                header: t("MachinaryOffice.name"),
+                enableColumnFilter: true,
+                datatype: "text",
+                filterFn: "contains",
+                columnFilterModeOptions: ["contains", "equals", "notEquals"],
+                Cell: ({renderedCellValue}) => (
+                    <Typography variant="body2">{renderedCellValue}</Typography>
+                ),
+            },
+            {
+                accessorFn: (row) => row.national_id,
+                id: "national_id",
+                header: t("MachinaryOffice.national_id"),
+                enableColumnFilter: true,
+                datatype: "numeric",
+                filterFn: "equals",
+                columnFilterModeOptions: [
+                    "equals",
+                    "notEquals",
+                    "contains",
+                    "lessThan",
+                    "greaterThan",
+                    "between",
+                ],
+                Cell: ({renderedCellValue}) => (
+                    <Typography variant="body2">{renderedCellValue}</Typography>
+                ),
+            },
+            {
+                accessorFn: (row) => row.phone_number,
+                id: "phone_number",
+                header: t("MachinaryOffice.phone_number"),
+                enableColumnFilter: true,
+                datatype: "numeric",
+                filterFn: "equals",
+                columnFilterModeOptions: [
+                    "equals",
+                    "notEquals",
+                    "contains",
+                    "lessThan",
+                    "greaterThan",
+                    "between",
+                ],
+                Cell: ({renderedCellValue}) => (
+                    <Typography variant="body2">{renderedCellValue}</Typography>
+                ),
+            },
+            {
+                accessorFn: (row) =>
+                    moment(row.created_at).locale("fa").format("HH:mm | yyyy/MM/DD"),
+                id: "created_at",
+                header: t("MachinaryOffice.created_at"),
+                enableColumnFilter: true,
+                datatype: "date",
+                filterFn: "lessThan",
+                columnFilterModeOptions: ["lessThan", "greaterThan"],
+                Cell: ({renderedCellValue}) => {
+                    return <Typography variant="body2">{renderedCellValue}</Typography>;
+                },
+                Header: ({column}) => <em>{column.columnDef.header}</em>,
+                Filter: ({column}) => {
+                    const filterFnValue = column.columnDef._filterFn;
+                    return (
+                        <Box sx={{display: "flex", alignItems: "start"}}>
+                            <LocalizationProvider
+                                dateAdapter={AdapterDateFnsJalali}
+                                localeText={
+                                    faIR.components.MuiLocalizationProvider.defaultProps
+                                        .localeText
+                                }
+                            >
+                                <MobileDateTimePicker
+                                    ampm={false}
+                                    onChange={(newValue) => {
+                                        const date = new Date(newValue);
+                                        const formattedDate = moment(date)
+                                            .locale("en")
+                                            .format("YYYY-MM-DD HH:mm");
+                                        column.setFilterValue(formattedDate);
+                                    }}
+                                    slotProps={{
+                                        textField: {
+                                            placeholder: "تاریخ خود را وارد کنید",
+                                            helperText: `${t("filter_mode")}: ${t(filterFnValue)}`,
+                                            sx: {minWidth: "120px"},
+                                            variant: "standard",
+                                        },
+                                    }}
+                                    value={
+                                        column.getFilterValue()
+                                            ? new Date(column.getFilterValue())
+                                            : null
+                                    }
+                                />
+                            </LocalizationProvider>
+                            <IconButton
+                                size="small"
+                                onClick={() => {
+                                    column.setFilterValue(null);
+                                }}
+                                sx={{
+                                    color: column.getFilterValue()
+                                        ? "rgba(0, 0, 0, 0.54)"
+                                        : "#bfbfbf",
+                                }}
+                            >
+                                <ClearIcon/>
+                            </IconButton>
+                        </Box>
+                    );
+                },
+            },
+            {
+                accessorFn: (row) =>
+                    moment(row.updated_at).locale("fa").format("HH:mm | yyyy/MM/DD"),
+                id: "updated_at",
+                header: t("MachinaryOffice.updated_at"),
+                enableColumnFilter: false,
+                datatype: "numeric",
+                Cell: ({renderedCellValue}) => (
+                    <Typography variant="body2">{renderedCellValue}</Typography>
+                ),
+            },
+            {
+                accessorFn: (row) => row.navgan_id,
+                id: "navgan_id",
+                header: t("MachinaryOffice.navgan_id"),
+                enableColumnFilter: true,
+                datatype: "numeric",
+                filterFn: "equals",
+                columnFilterModeOptions: [
+                    "equals",
+                    "notEquals",
+                    "contains",
+                    "lessThan",
+                    "greaterThan",
+                    "between",
+                ],
+                Cell: ({renderedCellValue}) => (
+                    <Typography variant="body2">{renderedCellValue}</Typography>
+                ),
+            },
+            {
+                accessorFn: (row) => row.vehicle_type,
+                id: "vehicle_type",
+                header: t("MachinaryOffice.vehicle_type"),
+                enableColumnFilter: true,
+                datatype: "text",
+                filterFn: "contains",
+                columnFilterModeOptions: ["contains", "equals", "notEquals"],
+                Cell: ({renderedCellValue}) => (
+                    <Typography variant="body2">{renderedCellValue}</Typography>
+                ),
+            },
+            {
+                accessorFn: (row) => row.state_name,
+                id: "state_id",
+                header: t("MachinaryOffice.state_name"),
+                enableColumnFilter: false,
+                datatype: "numeric",
+                Cell: ({renderedCellValue}) => (
+                    <Typography variant="body2">{renderedCellValue}</Typography>
+                ),
+            },
+        ],
+        []
+    );
+    return (
+        <DashboardLayouts>
+            <Box sx={{px: 3}}>
+                <DataTable
+                    tableUrl={GET_MACHINARY_OFFICE}
+                    columns={columns}
+                    selectableRow={false}
+                    enableCustomToolbar={true}
+                    enableLastUpdate={true}
+                    enablePinning={true}
+                    enableDensityToggle={false}
+                    initialState={{density: 'compact'}} //compact (small) //comfortable (medium) //spacious (large)
+                    enableColumnFilters={true}
+                    enableHiding={true}
+                    enableFullScreenToggle={false}
+                    enableGlobalFilter={false}
+                    enableColumnResizing={false} // if you want true this you shold change renderRowActions props ** see https://www.material-react-table.com/docs/guides/row-actions
+                    enableRowActions={true}
+                    TableRowAction={TableRowActions}
+                />
+            </Box>
+        </DashboardLayouts>
+    );
+}
+
+export default DashboardMachinaryOfficeComponent;
--- a/src/components/dashboard/navgan-province-manager/Form/ConfirmForm.jsx
+++ b/src/components/dashboard/navgan-province-manager/Form/ConfirmForm.jsx
@@ -0,0 +1,143 @@
+import {useTranslations} from "next-intl";
+import {useState} from "react";
+import {
+    Button,
+    Dialog,
+    DialogActions,
+    DialogContent,
+    DialogTitle,
+    IconButton,
+    Stack,
+    TextField,
+    Tooltip,
+    Typography
+} from "@mui/material";
+import ThumbUpAltIcon from "@mui/icons-material/ThumbUpAlt";
+import UploadSystem from "@/core/components/UploadSystem";
+import useDirection from "@/lib/app/hooks/useDirection";
+import {useFormik} from "formik";
+import UploadFileNotification from "@/core/components/notifications/UploadFileNotification";
+import {CONFIRM_NAVGAN_PROVINCE_MANAGER} from "@/core/data/apiRoutes";
+import useRequest from "@/lib/app/hooks/useRequest";
+import useNotification from "@/lib/app/hooks/useNotification";
+
+
+const Confirm = ({rowId, fetchUrl, mutate}) => {
+    const t = useTranslations();
+    const {directionApp} = useDirection();
+    const [selectedImage, setSelectedImage] = useState("");
+    const [fileType, setfileType] = useState(null);
+    const [fileName, setfileName] = useState(null);
+    const [showAddIcon, setShowAddIcon] = useState(true);
+    const [openConfirmDialog, setOpenConfirmDialog] = useState(false);
+    const requestServer = useRequest({auth: true})
+    const {update_notification} = useNotification()
+
+    const formik = useFormik({
+        initialValues: {
+            description: "",
+            confirm_img: null
+        },
+        onSubmit: (values, {setSubmitting}) => {
+            const formData = new FormData();
+            if (values.description != "") formData.append("expert_description", values.description);
+            if (values.confirm_img != null) formData.append("attachment", values.confirm_img);
+
+            requestServer(`${CONFIRM_NAVGAN_PROVINCE_MANAGER}/${rowId}`, 'post', {
+                data: formData,
+            }).then((response) => {
+                mutate(fetchUrl)
+                update_notification()
+            }).catch(() => {
+            }).finally(() => {
+                setSubmitting(false);
+            });
+        },
+    });
+
+    const handleDescriptionChange = (event) => {
+        formik.setFieldValue("description", event.target.value)
+    };
+    const handleUploadChange = (event) => {
+        const uploadedFile = event.target?.files?.[0];
+        if (uploadedFile) {
+            const maxFileSize = 2 * 1024 * 1024;
+            if (uploadedFile.size > maxFileSize) {
+                UploadFileNotification(t);
+                event.target.value = "";
+                return;
+            }
+
+            const fileType = event.target?.files?.[0].type;
+            const fileName = event.target?.files?.[0].name;
+            setSelectedImage(URL.createObjectURL(uploadedFile));
+            setfileType(fileType);
+            setfileName(fileName);
+            formik.setFieldValue("confirm_img", uploadedFile);
+            setShowAddIcon(false);
+        }
+    };
+    return (
+        <>
+            <Tooltip title={t("ConfirmDialog.confirm")}>
+                <IconButton
+                    color="primary"
+                    onClick={() => {
+                        setOpenConfirmDialog(true)
+                    }}
+                >
+                    <ThumbUpAltIcon/>
+                </IconButton>
+            </Tooltip>
+            <Dialog fullWidth open={openConfirmDialog}
+                    PaperProps={{sx: {boxShadow: 'rgba(60, 64, 67, 0.3) 0px 1px 16px 0px, rgba(60, 64, 67, 0.15) 0px 1px 10px 0px'}}}>
+                <DialogTitle>{t("ConfirmDialog.confirm")}</DialogTitle>
+                <DialogContent>
+                    <Stack spacing={2}>
+                        <Stack>
+                            <TextField
+                                name="description"
+                                multiline
+                                rows={8}
+                                label={<>
+                                    <span>{t("ConfirmDialog.description")}</span><small>{t("ConfirmDialog.optional")}</small></>}
+                                value={formik.values.description}
+                                onChange={handleDescriptionChange}
+                                fullWidth
+                                variant="outlined"
+                                sx={{mt: 1}}
+                            />
+                        </Stack>
+                        <Stack>
+                            <Typography>{t("UploadSystem.upload_file")}{t("UploadSystem.optional")}</Typography>
+                            <UploadSystem
+                                selectedImage={selectedImage}
+                                handleUploadChange={handleUploadChange} // Pass the updated function directly
+                                setselectedImage={setSelectedImage}
+                                setFieldValue={formik.setFieldValue} // Remove props.setFieldValue, use formik.setFieldValue
+                                fieldname="confirm_img"
+                                fileType={fileType}
+                                fileName={fileName}
+                                imageAlt={t("app_name")}
+                                imageSize={[250, 150]}
+                                setShowAddIcon={setShowAddIcon}
+                                showAddIcon={showAddIcon}
+                            />
+                        </Stack>
+                    </Stack>
+                </DialogContent>
+                <DialogActions>
+                    <Button onClick={() => setOpenConfirmDialog(false)} variant="outlined" color="secondary"
+                            disabled={formik.isSubmitting} autoFocus>
+                        {t("ConfirmDialog.button-cancel")}
+                    </Button>
+                    <Button onClick={formik.handleSubmit} variant="contained" color="primary"
+                            disabled={formik.isSubmitting}>
+                        {t("ConfirmDialog.button-confirm")}
+                    </Button>
+                </DialogActions>
+            </Dialog>
+        </>
+    );
+};
+export default Confirm;
--- a/src/components/dashboard/navgan-province-manager/Form/RejectForm.jsx
+++ b/src/components/dashboard/navgan-province-manager/Form/RejectForm.jsx
@@ -0,0 +1,148 @@
+import {REJECT_NAVGAN_PROVINCE_MANAGER} from "@/core/data/apiRoutes";
+import {
+    Button,
+    Dialog,
+    DialogActions,
+    DialogContent,
+    DialogTitle,
+    IconButton,
+    Stack,
+    TextField,
+    Tooltip,
+    Typography,
+} from "@mui/material";
+import {useTranslations} from "next-intl";
+import {useFormik} from "formik";
+import * as Yup from "yup";
+import {useState} from "react";
+import UploadSystem from "@/core/components/UploadSystem";
+import UploadFileNotification from "@/core/components/notifications/UploadFileNotification";
+import useDirection from "@/lib/app/hooks/useDirection";
+import ThumbDownIcon from "@mui/icons-material/ThumbDown";
+import useRequest from "@/lib/app/hooks/useRequest";
+import useNotification from "@/lib/app/hooks/useNotification";
+
+
+const Reject = ({rowId, fetchUrl, mutate}) => {
+    const [selectedImage, setSelectedImage] = useState("");
+    const [fileType, setfileType] = useState(null);
+    const [fileName, setfileName] = useState(null);
+    const [showAddIcon, setShowAddIcon] = useState(true);
+    const t = useTranslations();
+    const {directionApp} = useDirection();
+    const [openRejectDialog, setOpenRejectDialog] = useState(false);
+    const requestServer = useRequest({auth: true})
+    const {update_notification} = useNotification()
+
+    const validationSchema = Yup.object().shape({
+        description: Yup.string().required(t("RejectDialog.description_error")),
+    });
+
+    const formik = useFormik({
+        initialValues: {
+            description: "",
+            reject_img: null
+        },
+        validationSchema,
+        onSubmit: (values, {setSubmitting}) => {
+            const formData = new FormData();
+            formData.append("expert_description", values.description);
+            if (values.reject_img != null) formData.append("attachment", values.reject_img);
+
+            requestServer(`${REJECT_NAVGAN_PROVINCE_MANAGER}/${rowId}`, 'post', {
+                data: formData,
+            }).then((response) => {
+                mutate(fetchUrl)
+                update_notification()
+            }).catch(() => {
+            }).finally(() => {
+                setSubmitting(false);
+            });
+        },
+    });
+
+    const handleDescriptionChange = (event) => {
+        formik.setFieldValue("description", event.target.value);
+        formik.handleChange(event);
+    };
+    const handleUploadChange = (event) => {
+        const uploadedFile = event.target?.files?.[0];
+        if (uploadedFile) {
+            const maxFileSize = 2 * 1024 * 1024;
+            if (uploadedFile.size > maxFileSize) {
+                UploadFileNotification(t);
+                event.target.value = "";
+                return;
+            }
+            const fileType = event.target?.files?.[0].type;
+            const fileName = event.target?.files?.[0].name;
+            setSelectedImage(URL.createObjectURL(uploadedFile));
+            setfileType(fileType);
+            setfileName(fileName);
+            formik.setFieldValue("reject_img", uploadedFile);
+            setShowAddIcon(false);
+        }
+    };
+    return (
+        <>
+            <Tooltip title={t("RejectDialog.reject")}>
+                <IconButton color="primary" onClick={() => setOpenRejectDialog(true)}>
+                    <ThumbDownIcon/>
+                </IconButton>
+            </Tooltip>
+            <Dialog fullWidth open={openRejectDialog}
+                    PaperProps={{sx: {boxShadow: 'rgba(60, 64, 67, 0.3) 0px 1px 16px 0px, rgba(60, 64, 67, 0.15) 0px 1px 10px 0px'}}}>
+                <DialogTitle>{t("RejectDialog.reject")}</DialogTitle>
+                <DialogContent>
+                    <Stack spacing={2}>
+                        <Stack>
+                            <TextField
+                                name="description"
+                                multiline
+                                rows={8}
+                                label={t("RejectDialog.description")}
+                                value={formik.values.description}
+                                onChange={handleDescriptionChange}
+                                onBlur={formik.handleBlur("description")}
+                                error={
+                                    formik.touched.description && Boolean(formik.errors.description)
+                                }
+                                helperText={formik.touched.description && formik.errors.description}
+                                fullWidth
+                                variant="outlined"
+                                sx={{mt: 1}}
+                            />
+                        </Stack>
+                        <Stack>
+                            <Typography>{t("UploadSystem.upload_file")}{t("UploadSystem.optional")}</Typography>
+                            <UploadSystem
+                                selectedImage={selectedImage}
+                                handleUploadChange={handleUploadChange} // Pass the updated function directly
+                                setselectedImage={setSelectedImage}
+                                setFieldValue={formik.setFieldValue} // Remove props.setFieldValue, use formik.setFieldValue
+                                fieldname="reject_img"
+                                fileType={fileType}
+                                fileName={fileName}
+                                imageAlt={t("app_name")}
+                                imageSize={[250 /*width*/, 150 /*height*/]}
+                                setShowAddIcon={setShowAddIcon}
+                                showAddIcon={showAddIcon}
+                            />
+                        </Stack>
+                    </Stack>
+                </DialogContent>
+                <DialogActions>
+                    <Button onClick={() => setOpenRejectDialog(false)} variant="outlined" color="secondary"
+                            disabled={formik.isSubmitting} autoFocus>
+                        {t("RejectDialog.button-cancel")}
+                    </Button>
+                    <Button onClick={formik.handleSubmit} variant="contained" color="primary"
+                            disabled={formik.isSubmitting}>
+                        {t("RejectDialog.button-reject")}
+                    </Button>
+                </DialogActions>
+            </Dialog>
+        </>
+    );
+};
+export default Reject;
--- a/src/components/dashboard/navgan-province-manager/TableRowActions.jsx
+++ b/src/components/dashboard/navgan-province-manager/TableRowActions.jsx
@@ -0,0 +1,23 @@
+import {Box} from "@mui/material";
+import ConfirmForm from "./Form/ConfirmForm"
+import RejectForm from "./Form/RejectForm"
+
+const TableRow = ({row, mutate, fetchUrl}) => {
+
+    return (
+        <Box sx={{display: "flex", flexWrap: "nowrap", gap: "8px"}}>
+            <ConfirmForm
+                rowId={row.getValue("id")}
+                mutate={mutate}
+                fetchUrl={fetchUrl}
+            />
+            <RejectForm
+                rowId={row.getValue("id")}
+                fetchUrl={fetchUrl}
+                mutate={mutate}
+            />
+        </Box>
+    );
+};
+
+export default TableRow;
--- a/src/components/dashboard/navgan-province-manager/TableTollbar.jsx
+++ b/src/components/dashboard/navgan-province-manager/TableTollbar.jsx
@@ -0,0 +1,13 @@
+import {Stack, Tooltip} from "@mui/material";
+import {useTranslations} from "next-intl";
+
+function TableToolbar() {
+    const t = useTranslations();
+    return (
+        <Stack direction={"row"} spacing={2}>
+            <Tooltip title={t("add")} arrow placement="right"></Tooltip>
+        </Stack>
+    );
+}
+
+export default TableToolbar;
--- a/src/components/dashboard/navgan-province-manager/index.jsx
+++ b/src/components/dashboard/navgan-province-manager/index.jsx
@@ -0,0 +1,233 @@
+import DashboardLayouts from "@/layouts/dashboardLayouts";
+import {Box, IconButton, Typography} from "@mui/material";
+import ClearIcon from "@mui/icons-material/Clear";
+import {useMemo} from "react";
+import {GET_NAVGAN_PROVINCE_MANAGER} from "@/core/data/apiRoutes";
+import {useTranslations} from "next-intl";
+import TableRowActions from "./TableRowActions";
+import {LocalizationProvider, MobileDateTimePicker,} from "@mui/x-date-pickers";
+import {AdapterDateFnsJalali} from "@mui/x-date-pickers/AdapterDateFnsJalali";
+import moment from "jalali-moment";
+import {faIR} from "@mui/x-date-pickers/locales";
+import DataTable from "@/core/components/DataTable";
+
+function DashboardNavganProvinceManagerComponent() {
+    const t = useTranslations();
+
+    const columns = useMemo(
+        () => [
+            {
+                accessorFn: (row) => row.id,
+                id: "id",
+                header: t("NavganProvinceManager.id"),
+                enableColumnFilter: true,
+                datatype: "numeric",
+                filterFn: "equals",
+                columnFilterModeOptions: [
+                    "equals",
+                    "notEquals",
+                    "contains",
+                    "lessThan",
+                    "greaterThan",
+                    "between",
+                ],
+                Cell: ({renderedCellValue}) => (
+                    <Typography variant="body2">{renderedCellValue}</Typography>
+                ),
+            },
+            {
+                accessorFn: (row) => row.name,
+                id: "name",
+                header: t("NavganProvinceManager.name"),
+                enableColumnFilter: true,
+                datatype: "text",
+                filterFn: "contains",
+                columnFilterModeOptions: ["contains", "equals", "notEquals"],
+                Cell: ({renderedCellValue}) => (
+                    <Typography variant="body2">{renderedCellValue}</Typography>
+                ),
+            },
+            {
+                accessorFn: (row) => row.national_id,
+                id: "national_id",
+                header: t("NavganProvinceManager.national_id"),
+                enableColumnFilter: true,
+                datatype: "numeric",
+                filterFn: "equals",
+                columnFilterModeOptions: [
+                    "equals",
+                    "notEquals",
+                    "contains",
+                    "lessThan",
+                    "greaterThan",
+                    "between",
+                ],
+                Cell: ({renderedCellValue}) => (
+                    <Typography variant="body2">{renderedCellValue}</Typography>
+                ),
+            },
+            {
+                accessorFn: (row) => row.phone_number,
+                id: "phone_number",
+                header: t("NavganProvinceManager.phone_number"),
+                enableColumnFilter: true,
+                datatype: "numeric",
+                filterFn: "equals",
+                columnFilterModeOptions: [
+                    "equals",
+                    "notEquals",
+                    "contains",
+                    "lessThan",
+                    "greaterThan",
+                    "between",
+                ],
+                Cell: ({renderedCellValue}) => (
+                    <Typography variant="body2">{renderedCellValue}</Typography>
+                ),
+            },
+            {
+                accessorFn: (row) =>
+                    moment(row.created_at).locale("fa").format("HH:mm | yyyy/MM/DD"),
+                id: "created_at",
+                header: t("NavganProvinceManager.created_at"),
+                enableColumnFilter: true,
+                datatype: "date",
+                filterFn: "lessThan",
+                columnFilterModeOptions: ["lessThan", "greaterThan"],
+                Cell: ({renderedCellValue}) => {
+                    return <Typography variant="body2">{renderedCellValue}</Typography>;
+                },
+                Header: ({column}) => <em>{column.columnDef.header}</em>,
+                Filter: ({column}) => {
+                    const filterFnValue = column.columnDef._filterFn;
+                    return (
+                        <Box sx={{display: "flex", alignItems: "start"}}>
+                            <LocalizationProvider
+                                dateAdapter={AdapterDateFnsJalali}
+                                localeText={
+                                    faIR.components.MuiLocalizationProvider.defaultProps
+                                        .localeText
+                                }
+                            >
+                                <MobileDateTimePicker
+                                    ampm={false}
+                                    onChange={(newValue) => {
+                                        const date = new Date(newValue);
+                                        const formattedDate = moment(date)
+                                            .locale("en")
+                                            .format("YYYY-MM-DD HH:mm");
+                                        column.setFilterValue(formattedDate);
+                                    }}
+                                    slotProps={{
+                                        textField: {
+                                            placeholder: "تاریخ خود را وارد کنید",
+                                            helperText: `${t("filter_mode")}: ${t(filterFnValue)}`,
+                                            sx: {minWidth: "120px"},
+                                            variant: "standard",
+                                        },
+                                    }}
+                                    value={
+                                        column.getFilterValue()
+                                            ? new Date(column.getFilterValue())
+                                            : null
+                                    }
+                                />
+                            </LocalizationProvider>
+                            <IconButton
+                                size="small"
+                                onClick={() => {
+                                    column.setFilterValue(null);
+                                }}
+                                sx={{
+                                    color: column.getFilterValue()
+                                        ? "rgba(0, 0, 0, 0.54)"
+                                        : "#bfbfbf",
+                                }}
+                            >
+                                <ClearIcon/>
+                            </IconButton>
+                        </Box>
+                    );
+                },
+            },
+            {
+                accessorFn: (row) =>
+                    moment(row.updated_at).locale("fa").format("HH:mm | yyyy/MM/DD"),
+                id: "updated_at",
+                header: t("NavganProvinceManager.updated_at"),
+                enableColumnFilter: false,
+                datatype: "numeric",
+                Cell: ({renderedCellValue}) => (
+                    <Typography variant="body2">{renderedCellValue}</Typography>
+                ),
+            },
+            {
+                accessorFn: (row) => row.navgan_id,
+                id: "navgan_id",
+                header: t("NavganProvinceManager.navgan_id"),
+                enableColumnFilter: true,
+                datatype: "numeric",
+                filterFn: "equals",
+                columnFilterModeOptions: [
+                    "equals",
+                    "notEquals",
+                    "contains",
+                    "lessThan",
+                    "greaterThan",
+                    "between",
+                ],
+                Cell: ({renderedCellValue}) => (
+                    <Typography variant="body2">{renderedCellValue}</Typography>
+                ),
+            },
+            {
+                accessorFn: (row) => row.vehicle_type,
+                id: "vehicle_type",
+                header: t("NavganProvinceManager.vehicle_type"),
+                enableColumnFilter: true,
+                datatype: "text",
+                filterFn: "contains",
+                columnFilterModeOptions: ["contains", "equals", "notEquals"],
+                Cell: ({renderedCellValue}) => (
+                    <Typography variant="body2">{renderedCellValue}</Typography>
+                ),
+            },
+            {
+                accessorFn: (row) => row.state_name,
+                id: "state_id",
+                header: t("NavganProvinceManager.state_name"),
+                enableColumnFilter: false,
+                datatype: "numeric",
+                Cell: ({renderedCellValue}) => (
+                    <Typography variant="body2">{renderedCellValue}</Typography>
+                ),
+            },
+        ],
+        []
+    );
+    return (
+        <DashboardLayouts>
+            <Box sx={{px: 3}}>
+                <DataTable
+                    tableUrl={GET_NAVGAN_PROVINCE_MANAGER}
+                    columns={columns}
+                    selectableRow={false}
+                    enableCustomToolbar={true}
+                    enableLastUpdate={true}
+                    enablePinning={true}
+                    enableDensityToggle={false}
+                    initialState={{density: 'compact'}} //compact (small) //comfortable (medium) //spacious (large)
+                    enableColumnFilters={true}
+                    enableHiding={true}
+                    enableFullScreenToggle={false}
+                    enableGlobalFilter={false}
+                    enableColumnResizing={false} // if you want true this you shold change renderRowActions props ** see https://www.material-react-table.com/docs/guides/row-actions
+                    enableRowActions={true}
+                    TableRowAction={TableRowActions}
+                />
+            </Box>
+        </DashboardLayouts>
+    );
+}
+
+export default DashboardNavganProvinceManagerComponent;
--- a/src/components/dashboard/passenger-boss/Form/ConfirmForm.jsx
+++ b/src/components/dashboard/passenger-boss/Form/ConfirmForm.jsx
@@ -0,0 +1,178 @@
+import {useTranslations} from "next-intl";
+import {useState} from "react";
+import {
+    Button,
+    Dialog,
+    DialogActions,
+    DialogContent,
+    DialogTitle,
+    IconButton,
+    Stack,
+    TextField,
+    Tooltip,
+    Typography
+} from "@mui/material";
+import ThumbUpAltIcon from "@mui/icons-material/ThumbUpAlt";
+import UploadSystem from "@/core/components/UploadSystem";
+import useDirection from "@/lib/app/hooks/useDirection";
+import {useFormik} from "formik";
+import UploadFileNotification from "@/core/components/notifications/UploadFileNotification";
+import * as Yup from "yup";
+import useRequest from "@/lib/app/hooks/useRequest";
+import {CONFIRM_PASSENGER_BOSS} from "@/core/data/apiRoutes";
+import useNotification from "@/lib/app/hooks/useNotification";
+
+
+const Confirm = ({rowId, fetchUrl, mutate}) => {
+    const t = useTranslations();
+    const {directionApp} = useDirection();
+    const [selectedImage, setSelectedImage] = useState("");
+    const [fileType, setfileType] = useState(null);
+    const [fileName, setfileName] = useState(null);
+    const [showAddIcon, setShowAddIcon] = useState(true);
+    const [openConfirmDialog, setOpenConfirmDialog] = useState(false);
+    const requestServer = useRequest({auth: true})
+    const {update_notification} = useNotification()
+
+    const validationSchema = Yup.object().shape({
+        approved_amount: Yup.number().positive(t("ConfirmDialog.approved_amount_positive")).required(t("ConfirmDialog.approved_amount_error"))
+    });
+    const formik = useFormik({
+        initialValues: {
+            description: "",
+            approved_amount: "",
+            confirm_img: null
+        },
+        validationSchema,
+        onSubmit: (values, {setSubmitting}) => {
+            const formData = new FormData();
+            formData.append("approved_amount", values.approved_amount);
+            if (values.description != "") formData.append("expert_description", values.description);
+            if (values.confirm_img != null) formData.append("attachment", values.confirm_img);
+
+            requestServer(`${CONFIRM_PASSENGER_BOSS}/${rowId}`, 'post', {
+                data: formData,
+            }).then((response) => {
+                mutate(fetchUrl)
+                update_notification()
+            }).catch(() => {
+            }).finally(() => {
+                setSubmitting(false);
+            });
+        },
+    });
+
+    const handleDescriptionChange = (event) => {
+        formik.setFieldValue("description", event.target.value)
+    };
+    const handleAmountChange = (event) => {
+        formik.setFieldValue("approved_amount", event.target.value);
+    };
+    const handleUploadChange = (event) => {
+        const uploadedFile = event.target?.files?.[0];
+        if (uploadedFile) {
+            const maxFileSize = 2 * 1024 * 1024;
+            if (uploadedFile.size > maxFileSize) {
+                UploadFileNotification(t);
+                event.target.value = "";
+                return;
+            }
+
+            const fileType = event.target?.files?.[0].type;
+            const fileName = event.target?.files?.[0].name;
+            setSelectedImage(URL.createObjectURL(uploadedFile));
+            setfileType(fileType);
+            setfileName(fileName);
+            formik.setFieldValue("confirm_img", uploadedFile);
+            setShowAddIcon(false);
+        }
+    };
+    return (
+        <>
+            <Tooltip title={t("ConfirmDialog.confirm")}>
+                <IconButton
+                    color="primary"
+                    onClick={() => {
+                        setOpenConfirmDialog(true)
+                    }}
+                >
+                    <ThumbUpAltIcon/>
+                </IconButton>
+            </Tooltip>
+            <Dialog fullWidth open={openConfirmDialog}
+                    PaperProps={{sx: {boxShadow: 'rgba(60, 64, 67, 0.3) 0px 1px 16px 0px, rgba(60, 64, 67, 0.15) 0px 1px 10px 0px'}}}>
+                <DialogTitle>{t("ConfirmDialog.confirm")}</DialogTitle>
+                <DialogContent>
+                    <Stack spacing={2}>
+                        <Stack>
+                            <TextField
+                                name="description"
+                                multiline
+                                rows={8}
+                                label={<>
+                                    <span>{t("ConfirmDialog.description")}</span><small>{t("ConfirmDialog.optional")}</small></>}
+                                value={formik.values.description}
+                                onChange={handleDescriptionChange}
+                                fullWidth
+                                variant="outlined"
+                                sx={{mt: 1}}
+                            />
+                        </Stack>
+                        <Stack>
+                            <TextField
+                                name="approved_amount"
+                                label={<>
+                                    <span>{t("ConfirmDialog.approved_amount")}</span><small>{t("ConfirmDialog.unit")}</small></>}
+                                type="number"
+                                inputProps={{
+                                    min: 0,
+                                    pattern: "[0-9]*",
+                                }}
+                                variant="outlined"
+                                value={formik.values.approved_amount}
+                                onChange={handleAmountChange}
+                                onBlur={formik.handleBlur("approved_amount")}
+                                error={
+                                    formik.touched.approved_amount &&
+                                    Boolean(formik.errors.approved_amount)
+                                }
+                                helperText={
+                                    formik.touched.approved_amount && formik.errors.approved_amount
+                                }
+                                sx={{mt: 1}}
+                                fullWidth
+                            />
+                        </Stack>
+                        <Stack>
+                            <Typography>{t("UploadSystem.upload_file")}{t("UploadSystem.optional")}</Typography>
+                            <UploadSystem
+                                selectedImage={selectedImage}
+                                handleUploadChange={handleUploadChange} // Pass the updated function directly
+                                setselectedImage={setSelectedImage}
+                                setFieldValue={formik.setFieldValue} // Remove props.setFieldValue, use formik.setFieldValue
+                                fieldname="confirm_img"
+                                fileType={fileType}
+                                fileName={fileName}
+                                imageAlt={t("app_name")}
+                                imageSize={[250, 150]}
+                                setShowAddIcon={setShowAddIcon}
+                                showAddIcon={showAddIcon}
+                            />
+                        </Stack>
+                    </Stack>
+                </DialogContent>
+                <DialogActions>
+                    <Button onClick={() => setOpenConfirmDialog(false)} variant="outlined" color="secondary"
+                            disabled={formik.isSubmitting} autoFocus>
+                        {t("ConfirmDialog.button-cancel")}
+                    </Button>
+                    <Button onClick={formik.handleSubmit} variant="contained" color="primary"
+                            disabled={formik.isSubmitting}>
+                        {t("ConfirmDialog.button-confirm")}
+                    </Button>
+                </DialogActions>
+            </Dialog>
+        </>
+    );
+};
+export default Confirm;
--- a/src/components/dashboard/passenger-boss/Form/RejectForm.jsx
+++ b/src/components/dashboard/passenger-boss/Form/RejectForm.jsx
@@ -0,0 +1,148 @@
+import {REJECT_PASSENGER_BOSS} from "@/core/data/apiRoutes";
+import {
+    Button,
+    Dialog,
+    DialogActions,
+    DialogContent,
+    DialogTitle,
+    IconButton,
+    Stack,
+    TextField,
+    Tooltip,
+    Typography,
+} from "@mui/material";
+import {useTranslations} from "next-intl";
+import {useFormik} from "formik";
+import * as Yup from "yup";
+import {useState} from "react";
+import UploadSystem from "@/core/components/UploadSystem";
+import UploadFileNotification from "@/core/components/notifications/UploadFileNotification";
+import useDirection from "@/lib/app/hooks/useDirection";
+import ThumbDownIcon from "@mui/icons-material/ThumbDown";
+import useRequest from "@/lib/app/hooks/useRequest";
+import useNotification from "@/lib/app/hooks/useNotification";
+
+
+const Reject = ({rowId, fetchUrl, mutate}) => {
+    const [selectedImage, setSelectedImage] = useState("");
+    const [fileType, setfileType] = useState(null);
+    const [fileName, setfileName] = useState(null);
+    const [showAddIcon, setShowAddIcon] = useState(true);
+    const t = useTranslations();
+    const {directionApp} = useDirection();
+    const [openRejectDialog, setOpenRejectDialog] = useState(false);
+    const requestServer = useRequest({auth: true})
+    const {update_notification} = useNotification()
+
+    const validationSchema = Yup.object().shape({
+        description: Yup.string().required(t("RejectDialog.description_error")),
+    });
+
+    const formik = useFormik({
+        initialValues: {
+            description: "",
+            reject_img: null
+        },
+        validationSchema,
+        onSubmit: (values, {setSubmitting}) => {
+            const formData = new FormData();
+            formData.append("expert_description", values.description);
+            if (values.reject_img != null) formData.append("attachment", values.reject_img);
+
+            requestServer(`${REJECT_PASSENGER_BOSS}/${rowId}`, 'post', {
+                data: formData,
+            }).then((response) => {
+                mutate(fetchUrl)
+                update_notification()
+            }).catch(() => {
+            }).finally(() => {
+                setSubmitting(false);
+            });
+        },
+    });
+
+    const handleDescriptionChange = (event) => {
+        formik.setFieldValue("description", event.target.value);
+        formik.handleChange(event);
+    };
+    const handleUploadChange = (event) => {
+        const uploadedFile = event.target?.files?.[0];
+        if (uploadedFile) {
+            const maxFileSize = 2 * 1024 * 1024;
+            if (uploadedFile.size > maxFileSize) {
+                UploadFileNotification(t);
+                event.target.value = "";
+                return;
+            }
+            const fileType = event.target?.files?.[0].type;
+            const fileName = event.target?.files?.[0].name;
+            setSelectedImage(URL.createObjectURL(uploadedFile));
+            setfileType(fileType);
+            setfileName(fileName);
+            formik.setFieldValue("reject_img", uploadedFile);
+            setShowAddIcon(false);
+        }
+    };
+    return (
+        <>
+            <Tooltip title={t("RejectDialog.reject")}>
+                <IconButton color="primary" onClick={() => setOpenRejectDialog(true)}>
+                    <ThumbDownIcon/>
+                </IconButton>
+            </Tooltip>
+            <Dialog fullWidth open={openRejectDialog}
+                    PaperProps={{sx: {boxShadow: 'rgba(60, 64, 67, 0.3) 0px 1px 16px 0px, rgba(60, 64, 67, 0.15) 0px 1px 10px 0px'}}}>
+                <DialogTitle>{t("RejectDialog.reject")}</DialogTitle>
+                <DialogContent>
+                    <Stack spacing={2}>
+                        <Stack>
+                            <TextField
+                                name="description"
+                                multiline
+                                rows={8}
+                                label={t("RejectDialog.description")}
+                                value={formik.values.description}
+                                onChange={handleDescriptionChange}
+                                onBlur={formik.handleBlur("description")}
+                                error={
+                                    formik.touched.description && Boolean(formik.errors.description)
+                                }
+                                helperText={formik.touched.description && formik.errors.description}
+                                fullWidth
+                                variant="outlined"
+                                sx={{mt: 1}}
+                            />
+                        </Stack>
+                        <Stack>
+                            <Typography>{t("UploadSystem.upload_file")}{t("UploadSystem.optional")}</Typography>
+                            <UploadSystem
+                                selectedImage={selectedImage}
+                                handleUploadChange={handleUploadChange} // Pass the updated function directly
+                                setselectedImage={setSelectedImage}
+                                setFieldValue={formik.setFieldValue} // Remove props.setFieldValue, use formik.setFieldValue
+                                fieldname="reject_img"
+                                fileType={fileType}
+                                fileName={fileName}
+                                imageAlt={t("app_name")}
+                                imageSize={[250 /*width*/, 150 /*height*/]}
+                                setShowAddIcon={setShowAddIcon}
+                                showAddIcon={showAddIcon}
+                            />
+                        </Stack>
+                    </Stack>
+                </DialogContent>
+                <DialogActions>
+                    <Button onClick={() => setOpenRejectDialog(false)} variant="outlined" color="secondary"
+                            disabled={formik.isSubmitting} autoFocus>
+                        {t("RejectDialog.button-cancel")}
+                    </Button>
+                    <Button onClick={formik.handleSubmit} variant="contained" color="primary"
+                            disabled={formik.isSubmitting}>
+                        {t("RejectDialog.button-reject")}
+                    </Button>
+                </DialogActions>
+            </Dialog>
+        </>
+    );
+};
+export default Reject;
--- a/src/components/dashboard/passenger-boss/TableRowActions.jsx
+++ b/src/components/dashboard/passenger-boss/TableRowActions.jsx
@@ -0,0 +1,23 @@
+import {Box} from "@mui/material";
+import ConfirmForm from "./Form/ConfirmForm"
+import RejectForm from "./Form/RejectForm"
+
+const TableRow = ({row, mutate, fetchUrl}) => {
+
+    return (
+        <Box sx={{display: "flex", flexWrap: "nowrap", gap: "8px"}}>
+            <ConfirmForm
+                rowId={row.getValue("id")}
+                mutate={mutate}
+                fetchUrl={fetchUrl}
+            />
+            <RejectForm
+                rowId={row.getValue("id")}
+                fetchUrl={fetchUrl}
+                mutate={mutate}
+            />
+        </Box>
+    );
+};
+
+export default TableRow;
--- a/src/components/dashboard/passenger-boss/TableTollbar.jsx
+++ b/src/components/dashboard/passenger-boss/TableTollbar.jsx
@@ -0,0 +1,13 @@
+import {Stack, Tooltip} from "@mui/material";
+import {useTranslations} from "next-intl";
+
+function TableToolbar() {
+    const t = useTranslations();
+    return (
+        <Stack direction={"row"} spacing={2}>
+            <Tooltip title={t("add")} arrow placement="right"></Tooltip>
+        </Stack>
+    );
+}
+
+export default TableToolbar;
--- a/src/components/dashboard/passenger-boss/index.jsx
+++ b/src/components/dashboard/passenger-boss/index.jsx
@@ -0,0 +1,234 @@
+import DashboardLayouts from "@/layouts/dashboardLayouts";
+import {Box, IconButton, Typography} from "@mui/material";
+import ClearIcon from "@mui/icons-material/Clear";
+import {useMemo} from "react";
+import {GET_PASSENGER_BOSS} from "@/core/data/apiRoutes";
+import {useTranslations} from "next-intl";
+import TableRowActions from "./TableRowActions";
+import {LocalizationProvider, MobileDateTimePicker,} from "@mui/x-date-pickers";
+import {AdapterDateFnsJalali} from "@mui/x-date-pickers/AdapterDateFnsJalali";
+import moment from "jalali-moment";
+import {faIR} from "@mui/x-date-pickers/locales";
+import DataTable from "@/core/components/DataTable";
+
+function DashboardPassengerOfficeComponent() {
+    const t = useTranslations();
+
+    const columns = useMemo(
+        () => [
+            {
+                accessorFn: (row) => row.id,
+                id: "id",
+                header: t("PassengerBoss.id"),
+                enableColumnFilter: true,
+                datatype: "numeric",
+                filterFn: "equals",
+                columnFilterModeOptions: [
+                    "equals",
+                    "notEquals",
+                    "contains",
+                    "lessThan",
+                    "greaterThan",
+                    "between",
+                ],
+                Cell: ({renderedCellValue}) => (
+                    <Typography variant="body2">{renderedCellValue}</Typography>
+                ),
+            },
+            {
+                accessorFn: (row) => row.name,
+                id: "name",
+                header: t("PassengerBoss.name"),
+                enableColumnFilter: true,
+                datatype: "text",
+                filterFn: "contains",
+                columnFilterModeOptions: ["contains", "equals", "notEquals"],
+                Cell: ({renderedCellValue}) => (
+                    <Typography variant="body2">{renderedCellValue}</Typography>
+                ),
+            },
+            {
+                accessorFn: (row) => row.national_id,
+                id: "national_id",
+                header: t("PassengerBoss.national_id"),
+                enableColumnFilter: true,
+                datatype: "numeric",
+                filterFn: "equals",
+                columnFilterModeOptions: [
+                    "equals",
+                    "notEquals",
+                    "contains",
+                    "lessThan",
+                    "greaterThan",
+                    "between",
+                ],
+                Cell: ({renderedCellValue}) => (
+                    <Typography variant="body2">{renderedCellValue}</Typography>
+                ),
+            },
+            {
+                accessorFn: (row) => row.phone_number,
+                id: "phone_number",
+                header: t("PassengerBoss.phone_number"),
+                enableColumnFilter: true,
+                datatype: "numeric",
+                filterFn: "equals",
+                columnFilterModeOptions: [
+                    "equals",
+                    "notEquals",
+                    "contains",
+                    "lessThan",
+                    "greaterThan",
+                    "between",
+                ],
+                Cell: ({renderedCellValue}) => (
+                    <Typography variant="body2">{renderedCellValue}</Typography>
+                ),
+            },
+            {
+                accessorFn: (row) =>
+                    moment(row.created_at).locale("fa").format("HH:mm | yyyy/MM/DD"),
+                id: "created_at",
+                header: t("PassengerBoss.created_at"),
+                enableColumnFilter: true,
+                datatype: "date",
+                filterFn: "lessThan",
+                columnFilterModeOptions: ["lessThan", "greaterThan"],
+                Cell: ({renderedCellValue}) => {
+                    return <Typography variant="body2">{renderedCellValue}</Typography>;
+                },
+                Header: ({column}) => <em>{column.columnDef.header}</em>,
+                Filter: ({column}) => {
+                    const filterFnValue = column.columnDef._filterFn;
+                    return (
+                        <Box sx={{display: "flex", alignItems: "start"}}>
+                            <LocalizationProvider
+                                dateAdapter={AdapterDateFnsJalali}
+                                localeText={
+                                    faIR.components.MuiLocalizationProvider.defaultProps
+                                        .localeText
+                                }
+                            >
+                                <MobileDateTimePicker
+                                    ampm={false}
+                                    onChange={(newValue) => {
+                                        const date = new Date(newValue);
+                                        const formattedDate = moment(date)
+                                            .locale("en")
+                                            .format("YYYY-MM-DD HH:mm");
+                                        column.setFilterValue(formattedDate);
+                                    }}
+                                    slotProps={{
+                                        textField: {
+                                            placeholder: "تاریخ خود را وارد کنید",
+                                            helperText: `${t("filter_mode")}: ${t(filterFnValue)}`,
+                                            sx: {minWidth: "120px"},
+                                            variant: "standard",
+                                        },
+                                    }}
+                                    value={
+                                        column.getFilterValue()
+                                            ? new Date(column.getFilterValue())
+                                            : null
+                                    }
+                                />
+                            </LocalizationProvider>
+                            <IconButton
+                                size="small"
+                                onClick={() => {
+                                    column.setFilterValue(null);
+                                }}
+                                sx={{
+                                    color: column.getFilterValue()
+                                        ? "rgba(0, 0, 0, 0.54)"
+                                        : "#bfbfbf",
+                                }}
+                            >
+                                <ClearIcon/>
+                            </IconButton>
+                        </Box>
+                    );
+                },
+            },
+            {
+                accessorFn: (row) =>
+                    moment(row.updated_at).locale("fa").format("HH:mm | yyyy/MM/DD"),
+                id: "updated_at",
+                header: t("PassengerBoss.updated_at"),
+                enableColumnFilter: false,
+                datatype: "numeric",
+                Cell: ({renderedCellValue}) => (
+                    <Typography variant="body2">{renderedCellValue}</Typography>
+                ),
+            },
+            {
+                accessorFn: (row) => row.navgan_id,
+                id: "navgan_id",
+                header: t("PassengerBoss.navgan_id"),
+                enableColumnFilter: true,
+                datatype: "numeric",
+                filterFn: "equals",
+                columnFilterModeOptions: [
+                    "equals",
+                    "notEquals",
+                    "contains",
+                    "lessThan",
+                    "greaterThan",
+                    "between",
+                ],
+                Cell: ({renderedCellValue}) => (
+                    <Typography variant="body2">{renderedCellValue}</Typography>
+                ),
+            },
+            {
+                accessorFn: (row) => row.vehicle_type,
+                id: "vehicle_type",
+                header: t("PassengerBoss.vehicle_type"),
+                enableColumnFilter: true,
+                datatype: "text",
+                filterFn: "contains",
+                columnFilterModeOptions: ["contains", "equals", "notEquals"],
+                Cell: ({renderedCellValue}) => (
+                    <Typography variant="body2">{renderedCellValue}</Typography>
+                ),
+            },
+            {
+                accessorFn: (row) => row.state_name,
+                id: "state_id",
+                header: t("PassengerBoss.state_name"),
+                enableColumnFilter: false,
+                datatype: "numeric",
+                Cell: ({renderedCellValue}) => (
+                    <Typography variant="body2">{renderedCellValue}</Typography>
+                ),
+            },
+        ],
+        []
+    );
+    return (
+        <DashboardLayouts>
+            <Box sx={{px: 3}}>
+                <DataTable
+                    tableUrl={GET_PASSENGER_BOSS}
+                    columns={columns}
+                    selectableRow={false}
+                    enableCustomToolbar={true}
+                    // CustomToolbar={<TableToolbar />}
+                    enableLastUpdate={true}
+                    enablePinning={true}
+                    enableDensityToggle={false}
+                    initialState={{density: 'compact'}} //compact (small) //comfortable (medium) //spacious (large)
+                    enableColumnFilters={true}
+                    enableHiding={true}
+                    enableFullScreenToggle={false}
+                    enableGlobalFilter={false}
+                    enableColumnResizing={false} // if you want true this you shold change renderRowActions props ** see https://www.material-react-table.com/docs/guides/row-actions
+                    enableRowActions={true}
+                    TableRowAction={TableRowActions}
+                />
+            </Box>
+        </DashboardLayouts>
+    );
+}
+
+export default DashboardPassengerOfficeComponent;
--- a/src/components/dashboard/passenger-office/Form/ConfirmForm.jsx
+++ b/src/components/dashboard/passenger-office/Form/ConfirmForm.jsx
@@ -0,0 +1,142 @@
+import {useTranslations} from "next-intl";
+import {useState} from "react";
+import {
+    Button,
+    Dialog,
+    DialogActions,
+    DialogContent,
+    DialogTitle,
+    IconButton,
+    Stack,
+    TextField,
+    Tooltip,
+    Typography
+} from "@mui/material";
+import ThumbUpAltIcon from "@mui/icons-material/ThumbUpAlt";
+import UploadSystem from "@/core/components/UploadSystem";
+import useDirection from "@/lib/app/hooks/useDirection";
+import {useFormik} from "formik";
+import UploadFileNotification from "@/core/components/notifications/UploadFileNotification";
+import useRequest from "@/lib/app/hooks/useRequest";
+import {CONFIRM_PASSENGER_OFFICE} from "@/core/data/apiRoutes";
+import useNotification from "@/lib/app/hooks/useNotification";
+
+const Confirm = ({rowId, fetchUrl, mutate}) => {
+    const t = useTranslations();
+    const {directionApp} = useDirection();
+    const [selectedImage, setSelectedImage] = useState("");
+    const [fileType, setfileType] = useState(null);
+    const [fileName, setfileName] = useState(null);
+    const [showAddIcon, setShowAddIcon] = useState(true);
+    const [openConfirmDialog, setOpenConfirmDialog] = useState(false);
+    const requestServer = useRequest({auth: true})
+    const {update_notification} = useNotification()
+
+    const formik = useFormik({
+        initialValues: {
+            description: "",
+            confirm_img: null
+        },
+        onSubmit: (values, {setSubmitting}) => {
+            const formData = new FormData();
+            if (values.description != "") formData.append("expert_description", values.description);
+            if (values.confirm_img != null) formData.append("attachment", values.confirm_img);
+
+            requestServer(`${CONFIRM_PASSENGER_OFFICE}/${rowId}`, 'post', {
+                data: formData,
+            }).then((response) => {
+                mutate(fetchUrl)
+                update_notification()
+            }).catch(() => {
+            }).finally(() => {
+                setSubmitting(false);
+            });
+        },
+    });
+
+    const handleDescriptionChange = (event) => {
+        formik.setFieldValue("description", event.target.value)
+    };
+    const handleUploadChange = (event) => {
+        const uploadedFile = event.target?.files?.[0];
+        if (uploadedFile) {
+            const maxFileSize = 2 * 1024 * 1024;
+            if (uploadedFile.size > maxFileSize) {
+                UploadFileNotification(t);
+                event.target.value = "";
+                return;
+            }
+
+            const fileType = event.target?.files?.[0].type;
+            const fileName = event.target?.files?.[0].name;
+            setSelectedImage(URL.createObjectURL(uploadedFile));
+            setfileType(fileType);
+            setfileName(fileName);
+            formik.setFieldValue("confirm_img", uploadedFile);
+            setShowAddIcon(false);
+        }
+    };
+    return (
+        <>
+            <Tooltip title={t("ConfirmDialog.confirm")}>
+                <IconButton
+                    color="primary"
+                    onClick={() => {
+                        setOpenConfirmDialog(true)
+                    }}
+                >
+                    <ThumbUpAltIcon/>
+                </IconButton>
+            </Tooltip>
+            <Dialog fullWidth open={openConfirmDialog}
+                    PaperProps={{sx: {boxShadow: 'rgba(60, 64, 67, 0.3) 0px 1px 16px 0px, rgba(60, 64, 67, 0.15) 0px 1px 10px 0px'}}}>
+                <DialogTitle>{t("ConfirmDialog.confirm")}</DialogTitle>
+                <DialogContent>
+                    <Stack spacing={2}>
+                        <Stack>
+                            <TextField
+                                name="description"
+                                multiline
+                                rows={8}
+                                label={<>
+                                    <span>{t("ConfirmDialog.description")}</span><small>{t("ConfirmDialog.optional")}</small></>}
+                                value={formik.values.description}
+                                onChange={handleDescriptionChange}
+                                fullWidth
+                                variant="outlined"
+                                sx={{mt: 1}}
+                            />
+                        </Stack>
+                        <Stack>
+                            <Typography>{t("UploadSystem.upload_file")}{t("UploadSystem.optional")}</Typography>
+                            <UploadSystem
+                                selectedImage={selectedImage}
+                                handleUploadChange={handleUploadChange} // Pass the updated function directly
+                                setselectedImage={setSelectedImage}
+                                setFieldValue={formik.setFieldValue} // Remove props.setFieldValue, use formik.setFieldValue
+                                fieldname="confirm_img"
+                                fileType={fileType}
+                                fileName={fileName}
+                                imageAlt={t("app_name")}
+                                imageSize={[250, 150]}
+                                setShowAddIcon={setShowAddIcon}
+                                showAddIcon={showAddIcon}
+                            />
+                        </Stack>
+                    </Stack>
+                </DialogContent>
+                <DialogActions>
+                    <Button onClick={() => setOpenConfirmDialog(false)} variant="outlined" color="secondary"
+                            disabled={formik.isSubmitting} autoFocus>
+                        {t("ConfirmDialog.button-cancel")}
+                    </Button>
+                    <Button onClick={formik.handleSubmit} variant="contained" color="primary"
+                            disabled={formik.isSubmitting}>
+                        {t("ConfirmDialog.button-confirm")}
+                    </Button>
+                </DialogActions>
+            </Dialog>
+        </>
+    );
+};
+export default Confirm;
--- a/src/components/dashboard/passenger-office/Form/RejectForm.jsx
+++ b/src/components/dashboard/passenger-office/Form/RejectForm.jsx
@@ -0,0 +1,148 @@
+import {REJECT_PASSENGER_OFFICE} from "@/core/data/apiRoutes";
+import {
+    Button,
+    Dialog,
+    DialogActions,
+    DialogContent,
+    DialogTitle,
+    IconButton,
+    Stack,
+    TextField,
+    Tooltip,
+    Typography,
+} from "@mui/material";
+import {useTranslations} from "next-intl";
+import {useFormik} from "formik";
+import * as Yup from "yup";
+import {useState} from "react";
+import UploadSystem from "@/core/components/UploadSystem";
+import UploadFileNotification from "@/core/components/notifications/UploadFileNotification";
+import useDirection from "@/lib/app/hooks/useDirection";
+import ThumbDownIcon from "@mui/icons-material/ThumbDown";
+import useRequest from "@/lib/app/hooks/useRequest";
+import useNotification from "@/lib/app/hooks/useNotification";
+
+
+const Reject = ({rowId, fetchUrl, mutate}) => {
+    const [selectedImage, setSelectedImage] = useState("");
+    const [fileType, setfileType] = useState(null);
+    const [fileName, setfileName] = useState(null);
+    const [showAddIcon, setShowAddIcon] = useState(true);
+    const t = useTranslations();
+    const {directionApp} = useDirection();
+    const [openRejectDialog, setOpenRejectDialog] = useState(false);
+    const requestServer = useRequest({auth: true})
+    const {update_notification} = useNotification()
+
+    const validationSchema = Yup.object().shape({
+        description: Yup.string().required(t("RejectDialog.description_error")),
+    });
+
+    const formik = useFormik({
+        initialValues: {
+            description: "",
+            reject_img: null
+        },
+        validationSchema,
+        onSubmit: (values, {setSubmitting}) => {
+            const formData = new FormData();
+            formData.append("expert_description", values.description);
+            if (values.reject_img != null) formData.append("attachment", values.reject_img);
+
+            requestServer(`${REJECT_PASSENGER_OFFICE}/${rowId}`, 'post', {
+                data: formData,
+            }).then((response) => {
+                mutate(fetchUrl)
+                update_notification()
+            }).catch(() => {
+            }).finally(() => {
+                setSubmitting(false);
+            });
+        },
+    });
+
+    const handleDescriptionChange = (event) => {
+        formik.setFieldValue("description", event.target.value);
+        formik.handleChange(event);
+    };
+    const handleUploadChange = (event) => {
+        const uploadedFile = event.target?.files?.[0];
+        if (uploadedFile) {
+            const maxFileSize = 2 * 1024 * 1024;
+            if (uploadedFile.size > maxFileSize) {
+                UploadFileNotification(t);
+                event.target.value = "";
+                return;
+            }
+            const fileType = event.target?.files?.[0].type;
+            const fileName = event.target?.files?.[0].name;
+            setSelectedImage(URL.createObjectURL(uploadedFile));
+            setfileType(fileType);
+            setfileName(fileName);
+            formik.setFieldValue("reject_img", uploadedFile);
+            setShowAddIcon(false);
+        }
+    };
+    return (
+        <>
+            <Tooltip title={t("RejectDialog.reject")}>
+                <IconButton color="primary" onClick={() => setOpenRejectDialog(true)}>
+                    <ThumbDownIcon/>
+                </IconButton>
+            </Tooltip>
+            <Dialog fullWidth open={openRejectDialog}
+                    PaperProps={{sx: {boxShadow: 'rgba(60, 64, 67, 0.3) 0px 1px 16px 0px, rgba(60, 64, 67, 0.15) 0px 1px 10px 0px'}}}>
+                <DialogTitle>{t("RejectDialog.reject")}</DialogTitle>
+                <DialogContent>
+                    <Stack spacing={2}>
+                        <Stack>
+                            <TextField
+                                name="description"
+                                multiline
+                                rows={8}
+                                label={t("RejectDialog.description")}
+                                value={formik.values.description}
+                                onChange={handleDescriptionChange}
+                                onBlur={formik.handleBlur("description")}
+                                error={
+                                    formik.touched.description && Boolean(formik.errors.description)
+                                }
+                                helperText={formik.touched.description && formik.errors.description}
+                                fullWidth
+                                variant="outlined"
+                                sx={{mt: 1}}
+                            />
+                        </Stack>
+                        <Stack>
+                            <Typography>{t("UploadSystem.upload_file")}{t("UploadSystem.optional")}</Typography>
+                            <UploadSystem
+                                selectedImage={selectedImage}
+                                handleUploadChange={handleUploadChange} // Pass the updated function directly
+                                setselectedImage={setSelectedImage}
+                                setFieldValue={formik.setFieldValue} // Remove props.setFieldValue, use formik.setFieldValue
+                                fieldname="reject_img"
+                                fileType={fileType}
+                                fileName={fileName}
+                                imageAlt={t("app_name")}
+                                imageSize={[250 /*width*/, 150 /*height*/]}
+                                setShowAddIcon={setShowAddIcon}
+                                showAddIcon={showAddIcon}
+                            />
+                        </Stack>
+                    </Stack>
+                </DialogContent>
+                <DialogActions>
+                    <Button onClick={() => setOpenRejectDialog(false)} variant="outlined" color="secondary"
+                            disabled={formik.isSubmitting} autoFocus>
+                        {t("RejectDialog.button-cancel")}
+                    </Button>
+                    <Button onClick={formik.handleSubmit} variant="contained" color="primary"
+                            disabled={formik.isSubmitting}>
+                        {t("RejectDialog.button-reject")}
+                    </Button>
+                </DialogActions>
+            </Dialog>
+        </>
+    );
+};
+export default Reject;
--- a/src/components/dashboard/passenger-office/TableRowActions.jsx
+++ b/src/components/dashboard/passenger-office/TableRowActions.jsx
@@ -0,0 +1,23 @@
+import {Box} from "@mui/material";
+import ConfirmForm from "./Form/ConfirmForm"
+import RejectForm from "./Form/RejectForm"
+
+const TableRow = ({row, mutate, fetchUrl}) => {
+
+    return (
+        <Box sx={{display: "flex", flexWrap: "nowrap", gap: "8px"}}>
+            <ConfirmForm
+                rowId={row.getValue("id")}
+                mutate={mutate}
+                fetchUrl={fetchUrl}
+            />
+            <RejectForm
+                rowId={row.getValue("id")}
+                fetchUrl={fetchUrl}
+                mutate={mutate}
+            />
+        </Box>
+    );
+};
+
+export default TableRow;
--- a/src/components/dashboard/passenger-office/TableTollbar.jsx
+++ b/src/components/dashboard/passenger-office/TableTollbar.jsx
@@ -0,0 +1,13 @@
+import {Stack, Tooltip} from "@mui/material";
+import {useTranslations} from "next-intl";
+
+function TableToolbar() {
+    const t = useTranslations();
+    return (
+        <Stack direction={"row"} spacing={2}>
+            <Tooltip title={t("add")} arrow placement="right"></Tooltip>
+        </Stack>
+    );
+}
+
+export default TableToolbar;
--- a/src/components/dashboard/passenger-office/index.jsx
+++ b/src/components/dashboard/passenger-office/index.jsx
@@ -0,0 +1,235 @@
+import DashboardLayouts from "@/layouts/dashboardLayouts";
+import {Box, IconButton, Typography} from "@mui/material";
+import ClearIcon from "@mui/icons-material/Clear";
+import {useMemo} from "react";
+import {faIR} from "@mui/x-date-pickers/locales";
+import {GET_PASSENGER_OFFICE} from "@/core/data/apiRoutes";
+import {useTranslations} from "next-intl";
+import TableRowActions from "./TableRowActions";
+import {LocalizationProvider, MobileDateTimePicker,} from "@mui/x-date-pickers";
+import {AdapterDateFnsJalali} from "@mui/x-date-pickers/AdapterDateFnsJalali";
+import moment from "jalali-moment";
+import DataTable from "@/core/components/DataTable";
+
+function DashboardPassengerOfficeComponent() {
+    const t = useTranslations();
+
+    const columns = useMemo(
+        () => [
+            {
+                accessorFn: (row) => row.id,
+                id: "id",
+                header: t("PassengerOffice.id"),
+                enableColumnFilter: true,
+                datatype: "numeric",
+                filterFn: "equals",
+                columnFilterModeOptions: [
+                    "equals",
+                    "notEquals",
+                    "contains",
+                    "lessThan",
+                    "greaterThan",
+                    "between",
+                ],
+                Cell: ({renderedCellValue}) => (
+                    <Typography variant="body2">{renderedCellValue}</Typography>
+                ),
+            },
+            {
+                accessorFn: (row) => row.name,
+                id: "name",
+                header: t("PassengerOffice.name"),
+                enableColumnFilter: true,
+                datatype: "text",
+                filterFn: "contains",
+                columnFilterModeOptions: ["contains", "equals", "notEquals"],
+                Cell: ({renderedCellValue}) => (
+                    <Typography variant="body2">{renderedCellValue}</Typography>
+                ),
+            },
+            {
+                accessorFn: (row) => row.national_id,
+                id: "national_id",
+                header: t("PassengerOffice.national_id"),
+                enableColumnFilter: true,
+                datatype: "numeric",
+                filterFn: "equals",
+                columnFilterModeOptions: [
+                    "equals",
+                    "notEquals",
+                    "contains",
+                    "lessThan",
+                    "greaterThan",
+                    "between",
+                ],
+                Cell: ({renderedCellValue}) => (
+                    <Typography variant="body2">{renderedCellValue}</Typography>
+                ),
+            },
+            {
+                accessorFn: (row) => row.phone_number,
+                id: "phone_number",
+                header: t("PassengerOffice.phone_number"),
+                enableColumnFilter: true,
+                datatype: "numeric",
+                filterFn: "equals",
+                columnFilterModeOptions: [
+                    "equals",
+                    "notEquals",
+                    "contains",
+                    "lessThan",
+                    "greaterThan",
+                    "between",
+                ],
+                Cell: ({renderedCellValue}) => (
+                    <Typography variant="body2">{renderedCellValue}</Typography>
+                ),
+            },
+            {
+                accessorFn: (row) =>
+                    moment(row.created_at).locale("fa").format("HH:mm | yyyy/MM/DD"),
+                id: "created_at",
+                header: t("PassengerOffice.created_at"),
+                enableColumnFilter: true,
+                datatype: "date",
+                filterFn: "lessThan",
+                columnFilterModeOptions: ["lessThan", "greaterThan"],
+                Cell: ({renderedCellValue}) => {
+                    return <Typography variant="body2">{renderedCellValue}</Typography>;
+                },
+                Header: ({column}) => <em>{column.columnDef.header}</em>,
+                Filter: ({column}) => {
+                    const filterFnValue = column.columnDef._filterFn;
+                    return (
+                        <Box sx={{display: "flex", alignItems: "start"}}>
+                            <LocalizationProvider
+                                dateAdapter={AdapterDateFnsJalali}
+                                localeText={
+                                    faIR.components.MuiLocalizationProvider.defaultProps
+                                        .localeText
+                                }
+                            >
+                                <MobileDateTimePicker
+                                    ampm={false}
+                                    onChange={(newValue) => {
+                                        const date = new Date(newValue);
+                                        const formattedDate = moment(date)
+                                            .locale("en")
+                                            .format("YYYY-MM-DD HH:mm");
+                                        column.setFilterValue(formattedDate);
+                                    }}
+                                    slotProps={{
+                                        textField: {
+                                            placeholder: "تاریخ خود را وارد کنید",
+                                            helperText: `${t("filter_mode")}: ${t(filterFnValue)}`,
+                                            sx: {minWidth: "120px"},
+                                            variant: "standard",
+                                            actionbar: {actions: ["accept", "today"]},
+                                        },
+                                    }}
+                                    value={
+                                        column.getFilterValue()
+                                            ? new Date(column.getFilterValue())
+                                            : null
+                                    }
+                                />
+                            </LocalizationProvider>
+                            <IconButton
+                                size="small"
+                                onClick={() => {
+                                    column.setFilterValue(null);
+                                }}
+                                sx={{
+                                    color: column.getFilterValue()
+                                        ? "rgba(0, 0, 0, 0.54)"
+                                        : "#bfbfbf",
+                                }}
+                            >
+                                <ClearIcon/>
+                            </IconButton>
+                        </Box>
+                    );
+                },
+            },
+            {
+                accessorFn: (row) =>
+                    moment(row.updated_at).locale("fa").format("HH:mm | YYYY/MM/DD"),
+                id: "updated_at",
+                header: t("PassengerOffice.updated_at"),
+                enableColumnFilter: false,
+                datatype: "numeric",
+                Cell: ({renderedCellValue}) => (
+                    <Typography variant="body2">{renderedCellValue}</Typography>
+                ),
+            },
+            {
+                accessorFn: (row) => row.navgan_id,
+                id: "navgan_id",
+                header: t("PassengerOffice.navgan_id"),
+                enableColumnFilter: true,
+                datatype: "numeric",
+                filterFn: "equals",
+                columnFilterModeOptions: [
+                    "equals",
+                    "notEquals",
+                    "contains",
+                    "lessThan",
+                    "greaterThan",
+                    "between",
+                ],
+                Cell: ({renderedCellValue}) => (
+                    <Typography variant="body2">{renderedCellValue}</Typography>
+                ),
+            },
+            {
+                accessorFn: (row) => row.vehicle_type,
+                id: "vehicle_type",
+                header: t("PassengerOffice.vehicle_type"),
+                enableColumnFilter: true,
+                datatype: "text",
+                filterFn: "contains",
+                columnFilterModeOptions: ["contains", "equals", "notEquals"],
+                Cell: ({renderedCellValue}) => (
+                    <Typography variant="body2">{renderedCellValue}</Typography>
+                ),
+            },
+            {
+                accessorFn: (row) => row.state_name,
+                id: "state_id",
+                header: t("PassengerOffice.state_name"),
+                enableColumnFilter: false,
+                datatype: "numeric",
+                Cell: ({renderedCellValue}) => (
+                    <Typography variant="body2">{renderedCellValue}</Typography>
+                ),
+            },
+        ],
+        []
+    );
+    return (
+        <DashboardLayouts>
+            <Box sx={{px: 3}}>
+                <DataTable
+                    tableUrl={GET_PASSENGER_OFFICE}
+                    columns={columns}
+                    selectableRow={false}
+                    enableCustomToolbar={true}
+                    // CustomToolbar={<TableToolbar />}
+                    enableLastUpdate={true}
+                    enablePinning={true}
+                    enableDensityToggle={false}
+                    initialState={{density: 'compact'}} //compact (small) //comfortable (medium) //spacious (large)
+                    enableColumnFilters={true}
+                    enableHiding={true}
+                    enableFullScreenToggle={false}
+                    enableGlobalFilter={false}
+                    enableColumnResizing={false} // if you want true this you shold change renderRowActions props ** see https://www.material-react-table.com/docs/guides/row-actions
+                    enableRowActions={true}
+                    TableRowAction={TableRowActions}
+                />
+            </Box>
+        </DashboardLayouts>
+    );
+}
+
+export default DashboardPassengerOfficeComponent;
--- a/src/components/dashboard/province-head-expert/Form/ConfirmForm.jsx
+++ b/src/components/dashboard/province-head-expert/Form/ConfirmForm.jsx
@@ -0,0 +1,141 @@
+import {useTranslations} from "next-intl";
+import {useState} from "react";
+import {
+    Button,
+    Dialog,
+    DialogActions,
+    DialogContent,
+    DialogTitle,
+    IconButton,
+    Stack,
+    TextField,
+    Tooltip,
+    Typography
+} from "@mui/material";
+import ThumbUpAltIcon from "@mui/icons-material/ThumbUpAlt";
+import UploadSystem from "@/core/components/UploadSystem";
+import {useFormik} from "formik";
+import UploadFileNotification from "@/core/components/notifications/UploadFileNotification";
+import {CONFIRM_PROVINCE_HEAD_EXPERT} from "@/core/data/apiRoutes";
+import useRequest from "@/lib/app/hooks/useRequest";
+import useNotification from "@/lib/app/hooks/useNotification";
+
+
+const Confirm = ({rowId, fetchUrl, mutate}) => {
+    const t = useTranslations();
+    const [selectedImage, setSelectedImage] = useState("");
+    const [fileType, setfileType] = useState(null);
+    const [fileName, setfileName] = useState(null);
+    const [showAddIcon, setShowAddIcon] = useState(true);
+    const [openConfirmDialog, setOpenConfirmDialog] = useState(false);
+    const requestServer = useRequest({auth: true})
+    const {update_notification} = useNotification()
+
+    const formik = useFormik({
+        initialValues: {
+            description: "",
+            confirm_img: null
+        },
+        onSubmit: (values, {setSubmitting}) => {
+            const formData = new FormData();
+            if (values.description != "") formData.append("description", values.description);
+            if (values.confirm_img != null) formData.append("attachment", values.confirm_img);
+
+            requestServer(`${CONFIRM_PROVINCE_HEAD_EXPERT}/${rowId}`, 'post', {
+                data: formData,
+            }).then((response) => {
+                mutate(fetchUrl)
+                update_notification()
+            }).catch(() => {
+            }).finally(() => {
+                setSubmitting(false);
+            });
+        },
+    });
+
+    const handleDescriptionChange = (event) => {
+        formik.setFieldValue("description", event.target.value)
+    };
+    const handleUploadChange = (event) => {
+        const uploadedFile = event.target?.files?.[0];
+        if (uploadedFile) {
+            const maxFileSize = 2 * 1024 * 1024;
+            if (uploadedFile.size > maxFileSize) {
+                UploadFileNotification(t);
+                event.target.value = "";
+                return;
+            }
+
+            const fileType = event.target?.files?.[0].type;
+            const fileName = event.target?.files?.[0].name;
+            setSelectedImage(URL.createObjectURL(uploadedFile));
+            setfileType(fileType);
+            setfileName(fileName);
+            formik.setFieldValue("confirm_img", uploadedFile);
+            setShowAddIcon(false);
+        }
+    };
+    return (
+        <>
+            <Tooltip title={t("ConfirmDialog.confirm")}>
+                <IconButton
+                    color="primary"
+                    onClick={() => {
+                        setOpenConfirmDialog(true)
+                    }}
+                >
+                    <ThumbUpAltIcon/>
+                </IconButton>
+            </Tooltip>
+            <Dialog fullWidth open={openConfirmDialog}
+                    PaperProps={{sx: {boxShadow: 'rgba(60, 64, 67, 0.3) 0px 1px 16px 0px, rgba(60, 64, 67, 0.15) 0px 1px 10px 0px'}}}>
+                <DialogTitle>{t("ConfirmDialog.confirm")}</DialogTitle>
+                <DialogContent>
+                    <Stack spacing={2}>
+                        <Stack>
+                            <TextField
+                                name="description"
+                                multiline
+                                rows={8}
+                                label={<>
+                                    <span>{t("ConfirmDialog.description")}</span><small>{t("ConfirmDialog.optional")}</small></>}
+                                value={formik.values.description}
+                                onChange={handleDescriptionChange}
+                                fullWidth
+                                variant="outlined"
+                                sx={{mt: 1}}
+                            />
+                        </Stack>
+                        <Stack>
+                            <Typography>{t("UploadSystem.upload_file")}{t("UploadSystem.optional")}</Typography>
+                            <UploadSystem
+                                selectedImage={selectedImage}
+                                handleUploadChange={handleUploadChange} // Pass the updated function directly
+                                setselectedImage={setSelectedImage}
+                                setFieldValue={formik.setFieldValue} // Remove props.setFieldValue, use formik.setFieldValue
+                                fieldname="confirm_img"
+                                fileType={fileType}
+                                fileName={fileName}
+                                imageAlt={t("app_name")}
+                                imageSize={[250, 150]}
+                                setShowAddIcon={setShowAddIcon}
+                                showAddIcon={showAddIcon}
+                            />
+                        </Stack>
+                    </Stack>
+                </DialogContent>
+                <DialogActions>
+                    <Button onClick={() => setOpenConfirmDialog(false)} variant="outlined" color="secondary"
+                            disabled={formik.isSubmitting} autoFocus>
+                        {t("ConfirmDialog.button-cancel")}
+                    </Button>
+                    <Button onClick={formik.handleSubmit} variant="contained" color="primary"
+                            disabled={formik.isSubmitting}>
+                        {t("ConfirmDialog.button-confirm")}
+                    </Button>
+                </DialogActions>
+            </Dialog>
+        </>
+    );
+};
+export default Confirm;
--- a/src/components/dashboard/province-head-expert/Form/RejectForm.jsx
+++ b/src/components/dashboard/province-head-expert/Form/RejectForm.jsx
@@ -0,0 +1,148 @@
+import {REJECT_PROVINCE_HEAD_EXPERT} from "@/core/data/apiRoutes";
+import {
+    Button,
+    Dialog,
+    DialogActions,
+    DialogContent,
+    DialogTitle,
+    IconButton,
+    Stack,
+    TextField,
+    Tooltip,
+    Typography,
+} from "@mui/material";
+import {useTranslations} from "next-intl";
+import {useFormik} from "formik";
+import * as Yup from "yup";
+import {useState} from "react";
+import UploadSystem from "@/core/components/UploadSystem";
+import UploadFileNotification from "@/core/components/notifications/UploadFileNotification";
+import useDirection from "@/lib/app/hooks/useDirection";
+import ThumbDownIcon from "@mui/icons-material/ThumbDown";
+import useRequest from "@/lib/app/hooks/useRequest";
+import useNotification from "@/lib/app/hooks/useNotification";
+
+
+const Reject = ({rowId, fetchUrl, mutate}) => {
+    const [selectedImage, setSelectedImage] = useState("");
+    const [fileType, setfileType] = useState(null);
+    const [fileName, setfileName] = useState(null);
+    const [showAddIcon, setShowAddIcon] = useState(true);
+    const t = useTranslations();
+    const {directionApp} = useDirection();
+    const [openRejectDialog, setOpenRejectDialog] = useState(false);
+    const requestServer = useRequest({auth: true})
+    const {update_notification} = useNotification()
+
+    const validationSchema = Yup.object().shape({
+        description: Yup.string().required(t("RejectDialog.description_error")),
+    });
+
+    const formik = useFormik({
+        initialValues: {
+            description: "",
+            reject_img: null
+        },
+        validationSchema,
+        onSubmit: (values, {setSubmitting}) => {
+            const formData = new FormData();
+            formData.append("description", values.description);
+            if (values.reject_img != null) formData.append("attachment", values.reject_img);
+
+            requestServer(`${REJECT_PROVINCE_HEAD_EXPERT}/${rowId}`, 'post', {
+                data: formData,
+            }).then((response) => {
+                mutate(fetchUrl)
+                update_notification()
+            }).catch(() => {
+            }).finally(() => {
+                setSubmitting(false);
+            });
+        },
+    });
+
+    const handleDescriptionChange = (event) => {
+        formik.setFieldValue("description", event.target.value);
+        formik.handleChange(event);
+    };
+    const handleUploadChange = (event) => {
+        const uploadedFile = event.target?.files?.[0];
+        if (uploadedFile) {
+            const maxFileSize = 2 * 1024 * 1024;
+            if (uploadedFile.size > maxFileSize) {
+                UploadFileNotification(t);
+                event.target.value = "";
+                return;
+            }
+            const fileType = event.target?.files?.[0].type;
+            const fileName = event.target?.files?.[0].name;
+            setSelectedImage(URL.createObjectURL(uploadedFile));
+            setfileType(fileType);
+            setfileName(fileName);
+            formik.setFieldValue("reject_img", uploadedFile);
+            setShowAddIcon(false);
+        }
+    };
+    return (
+        <>
+            <Tooltip title={t("RejectDialog.reject")}>
+                <IconButton color="primary" onClick={() => setOpenRejectDialog(true)}>
+                    <ThumbDownIcon/>
+                </IconButton>
+            </Tooltip>
+            <Dialog fullWidth open={openRejectDialog}
+                    PaperProps={{sx: {boxShadow: 'rgba(60, 64, 67, 0.3) 0px 1px 16px 0px, rgba(60, 64, 67, 0.15) 0px 1px 10px 0px'}}}>
+                <DialogTitle>{t("RejectDialog.reject")}</DialogTitle>
+                <DialogContent>
+                    <Stack spacing={2}>
+                        <Stack>
+                            <TextField
+                                name="description"
+                                multiline
+                                rows={8}
+                                label={t("RejectDialog.description")}
+                                value={formik.values.description}
+                                onChange={handleDescriptionChange}
+                                onBlur={formik.handleBlur("description")}
+                                error={
+                                    formik.touched.description && Boolean(formik.errors.description)
+                                }
+                                helperText={formik.touched.description && formik.errors.description}
+                                fullWidth
+                                variant="outlined"
+                                sx={{mt: 1}}
+                            />
+                        </Stack>
+                        <Stack>
+                            <Typography>{t("UploadSystem.upload_file")}{t("UploadSystem.optional")}</Typography>
+                            <UploadSystem
+                                selectedImage={selectedImage}
+                                handleUploadChange={handleUploadChange} // Pass the updated function directly
+                                setselectedImage={setSelectedImage}
+                                setFieldValue={formik.setFieldValue} // Remove props.setFieldValue, use formik.setFieldValue
+                                fieldname="reject_img"
+                                fileType={fileType}
+                                fileName={fileName}
+                                imageAlt={t("app_name")}
+                                imageSize={[250 /*width*/, 150 /*height*/]}
+                                setShowAddIcon={setShowAddIcon}
+                                showAddIcon={showAddIcon}
+                            />
+                        </Stack>
+                    </Stack>
+                </DialogContent>
+                <DialogActions>
+                    <Button onClick={() => setOpenRejectDialog(false)} variant="outlined" color="secondary"
+                            disabled={formik.isSubmitting} autoFocus>
+                        {t("RejectDialog.button-cancel")}
+                    </Button>
+                    <Button onClick={formik.handleSubmit} variant="contained" color="primary"
+                            disabled={formik.isSubmitting}>
+                        {t("RejectDialog.button-reject")}
+                    </Button>
+                </DialogActions>
+            </Dialog>
+        </>
+    );
+};
+export default Reject;
--- a/src/components/dashboard/province-head-expert/Form/ReviceForm.jsx
+++ b/src/components/dashboard/province-head-expert/Form/ReviceForm.jsx
@@ -0,0 +1,108 @@
+import {useTranslations} from "next-intl";
+import {useState} from "react";
+import {
+    Button,
+    Dialog,
+    DialogActions,
+    DialogContent,
+    DialogTitle,
+    IconButton,
+    Stack,
+    TextField,
+    Tooltip,
+} from "@mui/material";
+import EditIcon from '@mui/icons-material/Edit';
+import {useFormik} from "formik";
+import {REVISE_PROVINCE_HEAD_EXPERT} from "@/core/data/apiRoutes";
+import useRequest from "@/lib/app/hooks/useRequest";
+import * as Yup from "yup";
+import useNotification from "@/lib/app/hooks/useNotification";
+
+
+const Revise = ({rowId, fetchUrl, mutate}) => {
+    const t = useTranslations();
+    const [openConfirmDialog, setOpenConfirmDialog] = useState(false);
+    const requestServer = useRequest({auth: true})
+    const {update_notification} = useNotification()
+
+    const validationSchema = Yup.object().shape({
+        description: Yup.string().required(t("RejectDialog.description_error")),
+    });
+
+    const formik = useFormik({
+        initialValues: {
+            description: "",
+        },
+        validationSchema,
+        onSubmit: (values, {setSubmitting}) => {
+            const formData = new FormData();
+            if (values.description != "") formData.append("description", values.description);
+
+            requestServer(`${REVISE_PROVINCE_HEAD_EXPERT}/${rowId}`, 'post', {
+                data: formData,
+            }).then((response) => {
+                mutate(fetchUrl)
+                update_notification()
+            }).catch(() => {
+            }).finally(() => {
+                setSubmitting(false);
+            });
+        },
+    });
+
+    const handleDescriptionChange = (event) => {
+        formik.setFieldValue("description", event.target.value)
+    };
+
+    return (
+        <>
+            <Tooltip title={t("ReviseDialog.revise")}>
+                <IconButton
+                    color="primary"
+                    onClick={() => {
+                        setOpenConfirmDialog(true)
+                    }}
+                >
+                    <EditIcon/>
+                </IconButton>
+            </Tooltip>
+            <Dialog fullWidth open={openConfirmDialog}
+                    PaperProps={{sx: {boxShadow: 'rgba(60, 64, 67, 0.3) 0px 1px 16px 0px, rgba(60, 64, 67, 0.15) 0px 1px 10px 0px'}}}>
+                <DialogTitle>{t("ReviseDialog.revise")}</DialogTitle>
+                <DialogContent>
+                    <Stack spacing={2}>
+                        <Stack>
+                            <TextField
+                                name="description"
+                                multiline
+                                rows={8}
+                                label={t("ReviseDialog.description")}
+                                value={formik.values.description}
+                                onChange={handleDescriptionChange}
+                                onBlur={formik.handleBlur("description")}
+                                error={
+                                    formik.touched.description && Boolean(formik.errors.description)
+                                }
+                                helperText={formik.touched.description && formik.errors.description}
+                                fullWidth
+                                variant="outlined"
+                                sx={{mt: 1}}
+                            />
+                        </Stack>
+                    </Stack>
+                </DialogContent>
+                <DialogActions>
+                    <Button onClick={() => setOpenConfirmDialog(false)} variant="outlined" color="secondary"
+                            disabled={formik.isSubmitting} autoFocus>
+                        {t("ReviseDialog.button-cancel")}
+                    </Button>
+                    <Button onClick={formik.handleSubmit} variant="contained" color="primary"
+                            disabled={formik.isSubmitting}>
+                        {t("ReviseDialog.button-revise")}
+                    </Button>
+                </DialogActions>
+            </Dialog>
+        </>
+    );
+};
+export default Revise;
--- a/src/components/dashboard/province-head-expert/TableRowActions.jsx
+++ b/src/components/dashboard/province-head-expert/TableRowActions.jsx
@@ -0,0 +1,29 @@
+import {Box} from "@mui/material";
+import ConfirmForm from "./Form/ConfirmForm"
+import RejectForm from "./Form/RejectForm"
+import ReviseForm from "@/components/dashboard/province-head-expert/Form/ReviceForm";
+
+const TableRowActions = ({row, mutate, fetchUrl}) => {
+
+    return (
+        <Box sx={{display: "flex", flexWrap: "nowrap", gap: "8px"}}>
+            <ConfirmForm
+                rowId={row.getValue("id")}
+                mutate={mutate}
+                fetchUrl={fetchUrl}
+            />
+            <RejectForm
+                rowId={row.getValue("id")}
+                fetchUrl={fetchUrl}
+                mutate={mutate}
+            />
+            <ReviseForm
+                rowId={row.getValue("id")}
+                fetchUrl={fetchUrl}
+                mutate={mutate}
+            />
+        </Box>
+    );
+};
+
+export default TableRowActions;
--- a/src/components/dashboard/province-head-expert/TableTollbar.jsx
+++ b/src/components/dashboard/province-head-expert/TableTollbar.jsx
--- a/src/components/dashboard/province-head-expert/index.jsx
+++ b/src/components/dashboard/province-head-expert/index.jsx
@@ -0,0 +1,202 @@
+import DashboardLayouts from "@/layouts/dashboardLayouts";
+import {Box, IconButton, Typography} from "@mui/material";
+import ClearIcon from "@mui/icons-material/Clear";
+import {useMemo} from "react";
+import {GET_PROVINCE_HEAD_EXPERT} from "@/core/data/apiRoutes";
+import {useTranslations} from "next-intl";
+import {LocalizationProvider, MobileDateTimePicker,} from "@mui/x-date-pickers";
+import {AdapterDateFnsJalali} from "@mui/x-date-pickers/AdapterDateFnsJalali";
+import moment from "jalali-moment";
+import {faIR} from "@mui/x-date-pickers/locales";
+import DataTable from "@/core/components/DataTable";
+import TableRowActions from "./TableRowActions"
+
+function DashboardProvinceHeadExpertComponent() {
+    const t = useTranslations();
+
+    const columns = useMemo(
+        () => [
+            {
+                accessorFn: (row) => row.id,
+                id: "id",
+                header: t("ProvinceHeadExpert.id"),
+                enableColumnFilter: true,
+                datatype: "numeric",
+                filterFn: "equals",
+                columnFilterModeOptions: [
+                    "equals",
+                    "notEquals",
+                    "contains",
+                    "lessThan",
+                    "greaterThan",
+                    "between",
+                ],
+                Cell: ({renderedCellValue}) => (
+                    <Typography variant="body2">{renderedCellValue}</Typography>
+                ),
+            },
+            {
+                accessorFn: (row) => row.name,
+                id: "name",
+                header: t("ProvinceHeadExpert.name"),
+                enableColumnFilter: true,
+                datatype: "text",
+                filterFn: "contains",
+                columnFilterModeOptions: ["contains", "equals", "notEquals"],
+                Cell: ({renderedCellValue}) => (
+                    <Typography variant="body2">{renderedCellValue}</Typography>
+                ),
+            },
+            {
+                accessorFn: (row) => row.national_id,
+                id: "national_id",
+                header: t("ProvinceHeadExpert.national_id"),
+                enableColumnFilter: true,
+                datatype: "numeric",
+                filterFn: "equals",
+                columnFilterModeOptions: [
+                    "equals",
+                    "notEquals",
+                    "contains",
+                    "lessThan",
+                    "greaterThan",
+                    "between",
+                ],
+                Cell: ({renderedCellValue}) => (
+                    <Typography variant="body2">{renderedCellValue}</Typography>
+                ),
+            },
+            {
+                accessorFn: (row) => row.phone_number,
+                id: "phone_number",
+                header: t("ProvinceHeadExpert.phone_number"),
+                enableColumnFilter: true,
+                datatype: "numeric",
+                filterFn: "equals",
+                columnFilterModeOptions: [
+                    "equals",
+                    "notEquals",
+                    "contains",
+                    "lessThan",
+                    "greaterThan",
+                    "between",
+                ],
+                Cell: ({renderedCellValue}) => (
+                    <Typography variant="body2">{renderedCellValue}</Typography>
+                ),
+            },
+            {
+                accessorFn: (row) =>
+                    moment(row.created_at).locale("fa").format("HH:mm | yyyy/MM/DD"),
+                id: "created_at",
+                header: t("ProvinceHeadExpert.created_at"),
+                enableColumnFilter: true,
+                datatype: "date",
+                filterFn: "lessThan",
+                columnFilterModeOptions: ["lessThan", "greaterThan"],
+                Cell: ({renderedCellValue}) => {
+                    return <Typography variant="body2">{renderedCellValue}</Typography>;
+                },
+                Header: ({column}) => <em>{column.columnDef.header}</em>,
+                Filter: ({column}) => {
+                    const filterFnValue = column.columnDef._filterFn;
+                    return (
+                        <Box sx={{display: "flex", alignItems: "start"}}>
+                            <LocalizationProvider
+                                dateAdapter={AdapterDateFnsJalali}
+                                localeText={
+                                    faIR.components.MuiLocalizationProvider.defaultProps
+                                        .localeText
+                                }
+                            >
+                                <MobileDateTimePicker
+                                    ampm={false}
+                                    onChange={(newValue) => {
+                                        const date = new Date(newValue);
+                                        const formattedDate = moment(date)
+                                            .locale("en")
+                                            .format("YYYY-MM-DD HH:mm");
+                                        column.setFilterValue(formattedDate);
+                                    }}
+                                    slotProps={{
+                                        textField: {
+                                            placeholder: "تاریخ خود را وارد کنید",
+                                            helperText: `${t("filter_mode")}: ${t(filterFnValue)}`,
+                                            sx: {minWidth: "120px"},
+                                            variant: "standard",
+                                        },
+                                    }}
+                                    value={
+                                        column.getFilterValue()
+                                            ? new Date(column.getFilterValue())
+                                            : null
+                                    }
+                                />
+                            </LocalizationProvider>
+                            <IconButton
+                                size="small"
+                                onClick={() => {
+                                    column.setFilterValue(null);
+                                }}
+                                sx={{
+                                    color: column.getFilterValue()
+                                        ? "rgba(0, 0, 0, 0.54)"
+                                        : "#bfbfbf",
+                                }}
+                            >
+                                <ClearIcon/>
+                            </IconButton>
+                        </Box>
+                    );
+                },
+            },
+            {
+                accessorFn: (row) =>
+                    moment(row.updated_at).locale("fa").format("HH:mm | yyyy/MM/DD"),
+                id: "updated_at",
+                header: t("ProvinceHeadExpert.updated_at"),
+                enableColumnFilter: false,
+                datatype: "numeric",
+                Cell: ({renderedCellValue}) => (
+                    <Typography variant="body2">{renderedCellValue}</Typography>
+                ),
+            },
+            {
+                accessorFn: (row) => row.state_name,
+                id: "state_id",
+                header: t("ProvinceHeadExpert.state_name"),
+                enableColumnFilter: false,
+                datatype: "numeric",
+                Cell: ({renderedCellValue}) => (
+                    <Typography variant="body2">{renderedCellValue}</Typography>
+                ),
+            },
+        ],
+        []
+    );
+    return (
+        <DashboardLayouts>
+            <Box sx={{px: 3}}>
+                <DataTable
+                    tableUrl={GET_PROVINCE_HEAD_EXPERT}
+                    columns={columns}
+                    selectableRow={false}
+                    enableCustomToolbar={true}
+                    enableLastUpdate={true}
+                    enablePinning={true}
+                    enableDensityToggle={false}
+                    initialState={{density: 'compact'}} //compact (small) //comfortable (medium) //spacious (large)
+                    enableColumnFilters={true}
+                    enableHiding={true}
+                    enableFullScreenToggle={false}
+                    enableGlobalFilter={false}
+                    enableColumnResizing={false} // if you want true this you should change renderRowActions props ** see https://www.material-react-table.com/docs/guides/row-actions
+                    enableRowActions={true}
+                    TableRowAction={TableRowActions}
+                />
+            </Box>
+        </DashboardLayouts>
+    );
+}
+
+export default DashboardProvinceHeadExpertComponent;
--- a/src/components/dashboard/refahi-province-manager/Form/ConfirmForm.jsx
+++ b/src/components/dashboard/refahi-province-manager/Form/ConfirmForm.jsx
@@ -0,0 +1,143 @@
+import {useTranslations} from "next-intl";
+import {useState} from "react";
+import {
+    Button,
+    Dialog,
+    DialogActions,
+    DialogContent,
+    DialogTitle,
+    IconButton,
+    Stack,
+    TextField,
+    Tooltip,
+    Typography
+} from "@mui/material";
+import ThumbUpAltIcon from "@mui/icons-material/ThumbUpAlt";
+import UploadSystem from "@/core/components/UploadSystem";
+import useDirection from "@/lib/app/hooks/useDirection";
+import {useFormik} from "formik";
+import UploadFileNotification from "@/core/components/notifications/UploadFileNotification";
+import useRequest from "@/lib/app/hooks/useRequest";
+import {CONFIRM_REFAHI_PROVINCE_MANAGER} from "@/core/data/apiRoutes";
+import useNotification from "@/lib/app/hooks/useNotification";
+
+
+const Confirm = ({rowId, fetchUrl, mutate}) => {
+    const t = useTranslations();
+    const {directionApp} = useDirection();
+    const [selectedImage, setSelectedImage] = useState("");
+    const [fileType, setfileType] = useState(null);
+    const [fileName, setfileName] = useState(null);
+    const [showAddIcon, setShowAddIcon] = useState(true);
+    const [openConfirmDialog, setOpenConfirmDialog] = useState(false);
+    const requestServer = useRequest({auth: true})
+    const {update_notification} = useNotification()
+
+    const formik = useFormik({
+        initialValues: {
+            description: "",
+            confirm_img: null
+        },
+        onSubmit: (values, {setSubmitting}) => {
+            const formData = new FormData();
+            if (values.description != "") formData.append("description", values.description);
+            if (values.confirm_img != null) formData.append("attachment", values.confirm_img);
+
+            requestServer(`${CONFIRM_REFAHI_PROVINCE_MANAGER}/${rowId}`, 'post', {
+                data: formData,
+            }).then((response) => {
+                mutate(fetchUrl)
+                update_notification()
+            }).catch(() => {
+            }).finally(() => {
+                setSubmitting(false);
+            });
+        },
+    });
+
+    const handleDescriptionChange = (event) => {
+        formik.setFieldValue("description", event.target.value)
+    };
+    const handleUploadChange = (event) => {
+        const uploadedFile = event.target?.files?.[0];
+        if (uploadedFile) {
+            const maxFileSize = 2 * 1024 * 1024;
+            if (uploadedFile.size > maxFileSize) {
+                UploadFileNotification(t);
+                event.target.value = "";
+                return;
+            }
+
+            const fileType = event.target?.files?.[0].type;
+            const fileName = event.target?.files?.[0].name;
+            setSelectedImage(URL.createObjectURL(uploadedFile));
+            setfileType(fileType);
+            setfileName(fileName);
+            formik.setFieldValue("confirm_img", uploadedFile);
+            setShowAddIcon(false);
+        }
+    };
+    return (
+        <>
+            <Tooltip title={t("ConfirmDialog.confirm")}>
+                <IconButton
+                    color="primary"
+                    onClick={() => {
+                        setOpenConfirmDialog(true)
+                    }}
+                >
+                    <ThumbUpAltIcon/>
+                </IconButton>
+            </Tooltip>
+            <Dialog fullWidth open={openConfirmDialog}
+                    PaperProps={{sx: {boxShadow: 'rgba(60, 64, 67, 0.3) 0px 1px 16px 0px, rgba(60, 64, 67, 0.15) 0px 1px 10px 0px'}}}>
+                <DialogTitle>{t("ConfirmDialog.confirm")}</DialogTitle>
+                <DialogContent>
+                    <Stack spacing={2}>
+                        <Stack>
+                            <TextField
+                                name="description"
+                                multiline
+                                rows={8}
+                                label={<>
+                                    <span>{t("ConfirmDialog.description")}</span><small>{t("ConfirmDialog.optional")}</small></>}
+                                value={formik.values.description}
+                                onChange={handleDescriptionChange}
+                                fullWidth
+                                variant="outlined"
+                                sx={{mt: 1}}
+                            />
+                        </Stack>
+                        <Stack>
+                            <Typography>{t("UploadSystem.upload_file")}{t("UploadSystem.optional")}</Typography>
+                            <UploadSystem
+                                selectedImage={selectedImage}
+                                handleUploadChange={handleUploadChange} // Pass the updated function directly
+                                setselectedImage={setSelectedImage}
+                                setFieldValue={formik.setFieldValue} // Remove props.setFieldValue, use formik.setFieldValue
+                                fieldname="confirm_img"
+                                fileType={fileType}
+                                fileName={fileName}
+                                imageAlt={t("app_name")}
+                                imageSize={[250, 150]}
+                                setShowAddIcon={setShowAddIcon}
+                                showAddIcon={showAddIcon}
+                            />
+                        </Stack>
+                    </Stack>
+                </DialogContent>
+                <DialogActions>
+                    <Button onClick={() => setOpenConfirmDialog(false)} variant="outlined" color="secondary"
+                            disabled={formik.isSubmitting} autoFocus>
+                        {t("ConfirmDialog.button-cancel")}
+                    </Button>
+                    <Button onClick={formik.handleSubmit} variant="contained" color="primary"
+                            disabled={formik.isSubmitting}>
+                        {t("ConfirmDialog.button-confirm")}
+                    </Button>
+                </DialogActions>
+            </Dialog>
+        </>
+    );
+};
+export default Confirm;
--- a/src/components/dashboard/refahi-province-manager/Form/RejectForm.jsx
+++ b/src/components/dashboard/refahi-province-manager/Form/RejectForm.jsx
@@ -0,0 +1,148 @@
+import {REJECT_REFAHI_PROVINCE_MANAGER} from "@/core/data/apiRoutes";
+import {
+    Button,
+    Dialog,
+    DialogActions,
+    DialogContent,
+    DialogTitle,
+    IconButton,
+    Stack,
+    TextField,
+    Tooltip,
+    Typography,
+} from "@mui/material";
+import {useTranslations} from "next-intl";
+import {useFormik} from "formik";
+import * as Yup from "yup";
+import {useState} from "react";
+import UploadSystem from "@/core/components/UploadSystem";
+import UploadFileNotification from "@/core/components/notifications/UploadFileNotification";
+import useDirection from "@/lib/app/hooks/useDirection";
+import ThumbDownIcon from "@mui/icons-material/ThumbDown";
+import useRequest from "@/lib/app/hooks/useRequest";
+import useNotification from "@/lib/app/hooks/useNotification";
+
+
+const Reject = ({rowId, fetchUrl, mutate}) => {
+    const [selectedImage, setSelectedImage] = useState("");
+    const [fileType, setfileType] = useState(null);
+    const [fileName, setfileName] = useState(null);
+    const [showAddIcon, setShowAddIcon] = useState(true);
+    const t = useTranslations();
+    const {directionApp} = useDirection();
+    const [openRejectDialog, setOpenRejectDialog] = useState(false);
+    const requestServer = useRequest({auth: true})
+    const {update_notification} = useNotification()
+
+    const validationSchema = Yup.object().shape({
+        description: Yup.string().required(t("RejectDialog.description_error")),
+    });
+
+    const formik = useFormik({
+        initialValues: {
+            description: "",
+            reject_img: null
+        },
+        validationSchema,
+        onSubmit: (values, {setSubmitting}) => {
+            const formData = new FormData();
+            formData.append("description", values.description);
+            if (values.reject_img != null) formData.append("attachment", values.reject_img);
+
+            requestServer(`${REJECT_REFAHI_PROVINCE_MANAGER}/${rowId}`, 'post', {
+                data: formData,
+            }).then((response) => {
+                mutate(fetchUrl)
+                update_notification()
+            }).catch(() => {
+            }).finally(() => {
+                setSubmitting(false);
+            });
+        },
+    });
+
+    const handleDescriptionChange = (event) => {
+        formik.setFieldValue("description", event.target.value);
+        formik.handleChange(event);
+    };
+    const handleUploadChange = (event) => {
+        const uploadedFile = event.target?.files?.[0];
+        if (uploadedFile) {
+            const maxFileSize = 2 * 1024 * 1024;
+            if (uploadedFile.size > maxFileSize) {
+                UploadFileNotification(t);
+                event.target.value = "";
+                return;
+            }
+            const fileType = event.target?.files?.[0].type;
+            const fileName = event.target?.files?.[0].name;
+            setSelectedImage(URL.createObjectURL(uploadedFile));
+            setfileType(fileType);
+            setfileName(fileName);
+            formik.setFieldValue("reject_img", uploadedFile);
+            setShowAddIcon(false);
+        }
+    };
+    return (
+        <>
+            <Tooltip title={t("RejectDialog.reject")}>
+                <IconButton color="primary" onClick={() => setOpenRejectDialog(true)}>
+                    <ThumbDownIcon/>
+                </IconButton>
+            </Tooltip>
+            <Dialog fullWidth open={openRejectDialog}
+                    PaperProps={{sx: {boxShadow: 'rgba(60, 64, 67, 0.3) 0px 1px 16px 0px, rgba(60, 64, 67, 0.15) 0px 1px 10px 0px'}}}>
+                <DialogTitle>{t("RejectDialog.reject")}</DialogTitle>
+                <DialogContent>
+                    <Stack spacing={2}>
+                        <Stack>
+                            <TextField
+                                name="description"
+                                multiline
+                                rows={8}
+                                label={t("RejectDialog.description")}
+                                value={formik.values.description}
+                                onChange={handleDescriptionChange}
+                                onBlur={formik.handleBlur("description")}
+                                error={
+                                    formik.touched.description && Boolean(formik.errors.description)
+                                }
+                                helperText={formik.touched.description && formik.errors.description}
+                                fullWidth
+                                variant="outlined"
+                                sx={{mt: 1}}
+                            />
+                        </Stack>
+                        <Stack>
+                            <Typography>{t("UploadSystem.upload_file")}{t("UploadSystem.optional")}</Typography>
+                            <UploadSystem
+                                selectedImage={selectedImage}
+                                handleUploadChange={handleUploadChange} // Pass the updated function directly
+                                setselectedImage={setSelectedImage}
+                                setFieldValue={formik.setFieldValue} // Remove props.setFieldValue, use formik.setFieldValue
+                                fieldname="reject_img"
+                                fileType={fileType}
+                                fileName={fileName}
+                                imageAlt={t("app_name")}
+                                imageSize={[250 /*width*/, 150 /*height*/]}
+                                setShowAddIcon={setShowAddIcon}
+                                showAddIcon={showAddIcon}
+                            />
+                        </Stack>
+                    </Stack>
+                </DialogContent>
+                <DialogActions>
+                    <Button onClick={() => setOpenRejectDialog(false)} variant="outlined" color="secondary"
+                            disabled={formik.isSubmitting} autoFocus>
+                        {t("RejectDialog.button-cancel")}
+                    </Button>
+                    <Button onClick={formik.handleSubmit} variant="contained" color="primary"
+                            disabled={formik.isSubmitting}>
+                        {t("RejectDialog.button-reject")}
+                    </Button>
+                </DialogActions>
+            </Dialog>
+        </>
+    );
+};
+export default Reject;
--- a/src/components/dashboard/refahi-province-manager/TableRowActions.jsx
+++ b/src/components/dashboard/refahi-province-manager/TableRowActions.jsx
@@ -0,0 +1,23 @@
+import {Box} from "@mui/material";
+import ConfirmForm from "./Form/ConfirmForm"
+import RejectForm from "./Form/RejectForm"
+
+const TableRow = ({row, mutate, fetchUrl}) => {
+
+    return (
+        <Box sx={{display: "flex", flexWrap: "nowrap", gap: "8px"}}>
+            <ConfirmForm
+                rowId={row.getValue("id")}
+                mutate={mutate}
+                fetchUrl={fetchUrl}
+            />
+            <RejectForm
+                rowId={row.getValue("id")}
+                fetchUrl={fetchUrl}
+                mutate={mutate}
+            />
+        </Box>
+    );
+};
+
+export default TableRow;
--- a/src/components/dashboard/refahi-province-manager/TableTollbar.jsx
+++ b/src/components/dashboard/refahi-province-manager/TableTollbar.jsx
--- a/src/components/dashboard/refahi-province-manager/index.jsx
+++ b/src/components/dashboard/refahi-province-manager/index.jsx
@@ -0,0 +1,204 @@
+import DashboardLayouts from "@/layouts/dashboardLayouts";
+import {Box, IconButton, Typography} from "@mui/material";
+import ClearIcon from "@mui/icons-material/Clear";
+import {useMemo} from "react";
+import {faIR} from "@mui/x-date-pickers/locales";
+import {GET_REFAHI_PROVINCE_MANAGER} from "@/core/data/apiRoutes";
+import {useTranslations} from "next-intl";
+import TableRowActions from "./TableRowActions";
+import {LocalizationProvider, MobileDateTimePicker,} from "@mui/x-date-pickers";
+import {AdapterDateFnsJalali} from "@mui/x-date-pickers/AdapterDateFnsJalali";
+import moment from "jalali-moment";
+import DataTable from "@/core/components/DataTable";
+
+function DashboardRefahiProvinceManagerComponent() {
+    const t = useTranslations();
+
+    const columns = useMemo(
+        () => [
+            {
+                accessorFn: (row) => row.id,
+                id: "id",
+                header: t("RefahiProvinceManager.id"),
+                enableColumnFilter: true,
+                datatype: "numeric",
+                filterFn: "equals",
+                columnFilterModeOptions: [
+                    "equals",
+                    "notEquals",
+                    "contains",
+                    "lessThan",
+                    "greaterThan",
+                    "between",
+                ],
+                Cell: ({renderedCellValue}) => (
+                    <Typography variant="body2">{renderedCellValue}</Typography>
+                ),
+            },
+            {
+                accessorFn: (row) => row.name,
+                id: "name",
+                header: t("RefahiProvinceManager.name"),
+                enableColumnFilter: true,
+                datatype: "text",
+                filterFn: "contains",
+                columnFilterModeOptions: ["contains", "equals", "notEquals"],
+                Cell: ({renderedCellValue}) => (
+                    <Typography variant="body2">{renderedCellValue}</Typography>
+                ),
+            },
+            {
+                accessorFn: (row) => row.national_id,
+                id: "national_id",
+                header: t("RefahiProvinceManager.national_id"),
+                enableColumnFilter: true,
+                datatype: "numeric",
+                filterFn: "equals",
+                columnFilterModeOptions: [
+                    "equals",
+                    "notEquals",
+                    "contains",
+                    "lessThan",
+                    "greaterThan",
+                    "between",
+                ],
+                Cell: ({renderedCellValue}) => (
+                    <Typography variant="body2">{renderedCellValue}</Typography>
+                ),
+            },
+            {
+                accessorFn: (row) => row.phone_number,
+                id: "phone_number",
+                header: t("RefahiProvinceManager.phone_number"),
+                enableColumnFilter: true,
+                datatype: "numeric",
+                filterFn: "equals",
+                columnFilterModeOptions: [
+                    "equals",
+                    "notEquals",
+                    "contains",
+                    "lessThan",
+                    "greaterThan",
+                    "between",
+                ],
+                Cell: ({renderedCellValue}) => (
+                    <Typography variant="body2">{renderedCellValue}</Typography>
+                ),
+            },
+            {
+                accessorFn: (row) =>
+                    moment(row.created_at).locale("fa").format("HH:mm | yyyy/MM/DD"),
+                id: "created_at",
+                header: t("RefahiProvinceManager.created_at"),
+                enableColumnFilter: true,
+                datatype: "date",
+                filterFn: "lessThan",
+                columnFilterModeOptions: ["lessThan", "greaterThan"],
+                Cell: ({renderedCellValue}) => {
+                    return <Typography variant="body2">{renderedCellValue}</Typography>;
+                },
+                Header: ({column}) => <em>{column.columnDef.header}</em>,
+                Filter: ({column}) => {
+                    const filterFnValue = column.columnDef._filterFn;
+                    return (
+                        <Box sx={{display: "flex", alignItems: "start"}}>
+                            <LocalizationProvider
+                                dateAdapter={AdapterDateFnsJalali}
+                                localeText={
+                                    faIR.components.MuiLocalizationProvider.defaultProps
+                                        .localeText
+                                }
+                            >
+                                <MobileDateTimePicker
+                                    ampm={false}
+                                    onChange={(newValue) => {
+                                        const date = new Date(newValue);
+                                        const formattedDate = moment(date)
+                                            .locale("en")
+                                            .format("YYYY-MM-DD HH:mm");
+                                        column.setFilterValue(formattedDate);
+                                    }}
+                                    slotProps={{
+                                        textField: {
+                                            placeholder: "تاریخ خود را وارد کنید",
+                                            helperText: `${t("filter_mode")}: ${t(filterFnValue)}`,
+                                            sx: {minWidth: "120px"},
+                                            variant: "standard",
+                                            actionbar: {actions: ["accept", "today"]},
+                                        },
+                                    }}
+                                    value={
+                                        column.getFilterValue()
+                                            ? new Date(column.getFilterValue())
+                                            : null
+                                    }
+                                />
+                            </LocalizationProvider>
+                            <IconButton
+                                size="small"
+                                onClick={() => {
+                                    column.setFilterValue(null);
+                                }}
+                                sx={{
+                                    color: column.getFilterValue()
+                                        ? "rgba(0, 0, 0, 0.54)"
+                                        : "#bfbfbf",
+                                }}
+                            >
+                                <ClearIcon/>
+                            </IconButton>
+                        </Box>
+                    );
+                },
+            },
+            {
+                accessorFn: (row) =>
+                    moment(row.updated_at).locale("fa").format("HH:mm | YYYY/MM/DD"),
+                id: "updated_at",
+                header: t("RefahiProvinceManager.updated_at"),
+                enableColumnFilter: false,
+                datatype: "numeric",
+                Cell: ({renderedCellValue}) => (
+                    <Typography variant="body2">{renderedCellValue}</Typography>
+                ),
+            },
+            {
+                accessorFn: (row) => row.state_name,
+                id: "state_id",
+                header: t("RefahiProvinceManager.state_name"),
+                enableColumnFilter: false,
+                datatype: "numeric",
+                Cell: ({renderedCellValue}) => (
+                    <Typography variant="body2">{renderedCellValue}</Typography>
+                ),
+            },
+        ],
+        []
+    );
+    return (
+        <DashboardLayouts>
+            <Box sx={{px: 3}}>
+                <DataTable
+                    tableUrl={GET_REFAHI_PROVINCE_MANAGER}
+                    columns={columns}
+                    selectableRow={false}
+                    enableCustomToolbar={true}
+                    // CustomToolbar={<TableToolbar />}
+                    enableLastUpdate={true}
+                    enablePinning={true}
+                    enableDensityToggle={false}
+                    initialState={{density: 'compact'}} //compact (small) //comfortable (medium) //spacious (large)
+                    enableColumnFilters={true}
+                    enableHiding={true}
+                    enableFullScreenToggle={false}
+                    enableGlobalFilter={false}
+                    enableColumnResizing={false} // if you want true this you should change renderRowActions props ** see https://www.material-react-table.com/docs/guides/row-actions
+                    enableRowActions={true}
+                    TableRowAction={TableRowActions}
+                />
+            </Box>
+        </DashboardLayouts>
+    );
+}
+
+export default DashboardRefahiProvinceManagerComponent;
--- a/src/components/dashboard/transportation-assistance/Form/ConfirmForm.jsx
+++ b/src/components/dashboard/transportation-assistance/Form/ConfirmForm.jsx
@@ -0,0 +1,143 @@
+import {useTranslations} from "next-intl";
+import {useState} from "react";
+import {
+    Button,
+    Dialog,
+    DialogActions,
+    DialogContent,
+    DialogTitle,
+    IconButton,
+    Stack,
+    TextField,
+    Tooltip,
+    Typography
+} from "@mui/material";
+import ThumbUpAltIcon from "@mui/icons-material/ThumbUpAlt";
+import UploadSystem from "@/core/components/UploadSystem";
+import useDirection from "@/lib/app/hooks/useDirection";
+import {useFormik} from "formik";
+import UploadFileNotification from "@/core/components/notifications/UploadFileNotification";
+import {CONFIRM_TRANSPORTATION_ASSISTANCE} from "@/core/data/apiRoutes";
+import useRequest from "@/lib/app/hooks/useRequest";
+import useNotification from "@/lib/app/hooks/useNotification";
+
+
+const Confirm = ({rowId, fetchUrl, mutate}) => {
+    const t = useTranslations();
+    const {directionApp} = useDirection();
+    const [selectedImage, setSelectedImage] = useState("");
+    const [fileType, setfileType] = useState(null);
+    const [fileName, setfileName] = useState(null);
+    const [showAddIcon, setShowAddIcon] = useState(true);
+    const [openConfirmDialog, setOpenConfirmDialog] = useState(false);
+    const requestServer = useRequest({auth: true})
+    const {update_notification} = useNotification()
+
+    const formik = useFormik({
+        initialValues: {
+            description: "",
+            confirm_img: null
+        },
+        onSubmit: (values, {setSubmitting}) => {
+            const formData = new FormData();
+            if (values.description != "") formData.append("expert_description", values.description);
+            if (values.confirm_img != null) formData.append("attachment", values.confirm_img);
+
+            requestServer(`${CONFIRM_TRANSPORTATION_ASSISTANCE}/${rowId}`, 'post', {
+                data: formData,
+            }).then((response) => {
+                mutate(fetchUrl)
+                update_notification()
+            }).catch(() => {
+            }).finally(() => {
+                setSubmitting(false);
+            });
+        },
+    });
+
+    const handleDescriptionChange = (event) => {
+        formik.setFieldValue("description", event.target.value)
+    };
+    const handleUploadChange = (event) => {
+        const uploadedFile = event.target?.files?.[0];
+        if (uploadedFile) {
+            const maxFileSize = 2 * 1024 * 1024;
+            if (uploadedFile.size > maxFileSize) {
+                UploadFileNotification(t);
+                event.target.value = "";
+                return;
+            }
+
+            const fileType = event.target?.files?.[0].type;
+            const fileName = event.target?.files?.[0].name;
+            setSelectedImage(URL.createObjectURL(uploadedFile));
+            setfileType(fileType);
+            setfileName(fileName);
+            formik.setFieldValue("confirm_img", uploadedFile);
+            setShowAddIcon(false);
+        }
+    };
+    return (
+        <>
+            <Tooltip title={t("ConfirmDialog.confirm")}>
+                <IconButton
+                    color="primary"
+                    onClick={() => {
+                        setOpenConfirmDialog(true)
+                    }}
+                >
+                    <ThumbUpAltIcon/>
+                </IconButton>
+            </Tooltip>
+            <Dialog fullWidth open={openConfirmDialog}
+                    PaperProps={{sx: {boxShadow: 'rgba(60, 64, 67, 0.3) 0px 1px 16px 0px, rgba(60, 64, 67, 0.15) 0px 1px 10px 0px'}}}>
+                <DialogTitle>{t("ConfirmDialog.confirm")}</DialogTitle>
+                <DialogContent>
+                    <Stack spacing={2}>
+                        <Stack>
+                            <TextField
+                                name="description"
+                                multiline
+                                rows={8}
+                                label={<>
+                                    <span>{t("ConfirmDialog.description")}</span><small>{t("ConfirmDialog.optional")}</small></>}
+                                value={formik.values.description}
+                                onChange={handleDescriptionChange}
+                                fullWidth
+                                variant="outlined"
+                                sx={{mt: 1}}
+                            />
+                        </Stack>
+                        <Stack>
+                            <Typography>{t("UploadSystem.upload_file")}{t("UploadSystem.optional")}</Typography>
+                            <UploadSystem
+                                selectedImage={selectedImage}
+                                handleUploadChange={handleUploadChange} // Pass the updated function directly
+                                setselectedImage={setSelectedImage}
+                                setFieldValue={formik.setFieldValue} // Remove props.setFieldValue, use formik.setFieldValue
+                                fieldname="confirm_img"
+                                fileType={fileType}
+                                fileName={fileName}
+                                imageAlt={t("app_name")}
+                                imageSize={[250, 150]}
+                                setShowAddIcon={setShowAddIcon}
+                                showAddIcon={showAddIcon}
+                            />
+                        </Stack>
+                    </Stack>
+                </DialogContent>
+                <DialogActions>
+                    <Button onClick={() => setOpenConfirmDialog(false)} variant="outlined" color="secondary"
+                            disabled={formik.isSubmitting} autoFocus>
+                        {t("ConfirmDialog.button-cancel")}
+                    </Button>
+                    <Button onClick={formik.handleSubmit} variant="contained" color="primary"
+                            disabled={formik.isSubmitting}>
+                        {t("ConfirmDialog.button-confirm")}
+                    </Button>
+                </DialogActions>
+            </Dialog>
+        </>
+    );
+};
+export default Confirm;
--- a/src/components/dashboard/transportation-assistance/Form/RejectForm.jsx
+++ b/src/components/dashboard/transportation-assistance/Form/RejectForm.jsx
@@ -0,0 +1,148 @@
+import {REJECT_TRANSPORTATION_ASSISTANCE} from "@/core/data/apiRoutes";
+import {
+    Button,
+    Dialog,
+    DialogActions,
+    DialogContent,
+    DialogTitle,
+    IconButton,
+    Stack,
+    TextField,
+    Tooltip,
+    Typography,
+} from "@mui/material";
+import {useTranslations} from "next-intl";
+import {useFormik} from "formik";
+import * as Yup from "yup";
+import {useState} from "react";
+import UploadSystem from "@/core/components/UploadSystem";
+import UploadFileNotification from "@/core/components/notifications/UploadFileNotification";
+import useDirection from "@/lib/app/hooks/useDirection";
+import ThumbDownIcon from "@mui/icons-material/ThumbDown";
+import useRequest from "@/lib/app/hooks/useRequest";
+import useNotification from "@/lib/app/hooks/useNotification";
+
+
+const Reject = ({rowId, fetchUrl, mutate}) => {
+    const [selectedImage, setSelectedImage] = useState("");
+    const [fileType, setfileType] = useState(null);
+    const [fileName, setfileName] = useState(null);
+    const [showAddIcon, setShowAddIcon] = useState(true);
+    const t = useTranslations();
+    const {directionApp} = useDirection();
+    const [openRejectDialog, setOpenRejectDialog] = useState(false);
+    const requestServer = useRequest({auth: true})
+    const {update_notification} = useNotification()
+
+    const validationSchema = Yup.object().shape({
+        description: Yup.string().required(t("RejectDialog.description_error")),
+    });
+
+    const formik = useFormik({
+        initialValues: {
+            description: "",
+            reject_img: null
+        },
+        validationSchema,
+        onSubmit: (values, {setSubmitting}) => {
+            const formData = new FormData();
+            formData.append("expert_description", values.description);
+            if (values.reject_img != null) formData.append("attachment", values.reject_img);
+
+            requestServer(`${REJECT_TRANSPORTATION_ASSISTANCE}/${rowId}`, 'post', {
+                data: formData,
+            }).then((response) => {
+                mutate(fetchUrl)
+                update_notification()
+            }).catch(() => {
+            }).finally(() => {
+                setSubmitting(false);
+            });
+        },
+    });
+
+    const handleDescriptionChange = (event) => {
+        formik.setFieldValue("description", event.target.value);
+        formik.handleChange(event);
+    };
+    const handleUploadChange = (event) => {
+        const uploadedFile = event.target?.files?.[0];
+        if (uploadedFile) {
+            const maxFileSize = 2 * 1024 * 1024;
+            if (uploadedFile.size > maxFileSize) {
+                UploadFileNotification(t);
+                event.target.value = "";
+                return;
+            }
+            const fileType = event.target?.files?.[0].type;
+            const fileName = event.target?.files?.[0].name;
+            setSelectedImage(URL.createObjectURL(uploadedFile));
+            setfileType(fileType);
+            setfileName(fileName);
+            formik.setFieldValue("reject_img", uploadedFile);
+            setShowAddIcon(false);
+        }
+    };
+    return (
+        <>
+            <Tooltip title={t("RejectDialog.reject")}>
+                <IconButton color="primary" onClick={() => setOpenRejectDialog(true)}>
+                    <ThumbDownIcon/>
+                </IconButton>
+            </Tooltip>
+            <Dialog fullWidth open={openRejectDialog}
+                    PaperProps={{sx: {boxShadow: 'rgba(60, 64, 67, 0.3) 0px 1px 16px 0px, rgba(60, 64, 67, 0.15) 0px 1px 10px 0px'}}}>
+                <DialogTitle>{t("RejectDialog.reject")}</DialogTitle>
+                <DialogContent>
+                    <Stack spacing={2}>
+                        <Stack>
+                            <TextField
+                                name="description"
+                                multiline
+                                rows={8}
+                                label={t("RejectDialog.description")}
+                                value={formik.values.description}
+                                onChange={handleDescriptionChange}
+                                onBlur={formik.handleBlur("description")}
+                                error={
+                                    formik.touched.description && Boolean(formik.errors.description)
+                                }
+                                helperText={formik.touched.description && formik.errors.description}
+                                fullWidth
+                                variant="outlined"
+                                sx={{mt: 1}}
+                            />
+                        </Stack>
+                        <Stack>
+                            <Typography>{t("UploadSystem.upload_file")}{t("UploadSystem.optional")}</Typography>
+                            <UploadSystem
+                                selectedImage={selectedImage}
+                                handleUploadChange={handleUploadChange} // Pass the updated function directly
+                                setselectedImage={setSelectedImage}
+                                setFieldValue={formik.setFieldValue} // Remove props.setFieldValue, use formik.setFieldValue
+                                fieldname="reject_img"
+                                fileType={fileType}
+                                fileName={fileName}
+                                imageAlt={t("app_name")}
+                                imageSize={[250 /*width*/, 150 /*height*/]}
+                                setShowAddIcon={setShowAddIcon}
+                                showAddIcon={showAddIcon}
+                            />
+                        </Stack>
+                    </Stack>
+                </DialogContent>
+                <DialogActions>
+                    <Button onClick={() => setOpenRejectDialog(false)} variant="outlined" color="secondary"
+                            disabled={formik.isSubmitting} autoFocus>
+                        {t("RejectDialog.button-cancel")}
+                    </Button>
+                    <Button onClick={formik.handleSubmit} variant="contained" color="primary"
+                            disabled={formik.isSubmitting}>
+                        {t("RejectDialog.button-reject")}
+                    </Button>
+                </DialogActions>
+            </Dialog>
+        </>
+    );
+};
+export default Reject;
--- a/src/components/dashboard/transportation-assistance/TableRowActions.jsx
+++ b/src/components/dashboard/transportation-assistance/TableRowActions.jsx
@@ -0,0 +1,23 @@
+import {Box} from "@mui/material";
+import ConfirmForm from "./Form/ConfirmForm"
+import RejectForm from "./Form/RejectForm"
+
+const TableRow = ({row, mutate, fetchUrl}) => {
+
+    return (
+        <Box sx={{display: "flex", flexWrap: "nowrap", gap: "8px"}}>
+            <ConfirmForm
+                rowId={row.getValue("id")}
+                mutate={mutate}
+                fetchUrl={fetchUrl}
+            />
+            <RejectForm
+                rowId={row.getValue("id")}
+                fetchUrl={fetchUrl}
+                mutate={mutate}
+            />
+        </Box>
+    );
+};
+
+export default TableRow;
--- a/src/components/dashboard/transportation-assistance/TableTollbar.jsx
+++ b/src/components/dashboard/transportation-assistance/TableTollbar.jsx
@@ -0,0 +1,13 @@
+import {Stack, Tooltip} from "@mui/material";
+import {useTranslations} from "next-intl";
+
+function TableToolbar() {
+    const t = useTranslations();
+    return (
+        <Stack direction={"row"} spacing={2}>
+            <Tooltip title={t("add")} arrow placement="right"></Tooltip>
+        </Stack>
+    );
+}
+
+export default TableToolbar;
--- a/src/components/dashboard/transportation-assistance/index.jsx
+++ b/src/components/dashboard/transportation-assistance/index.jsx
@@ -0,0 +1,233 @@
+import DashboardLayouts from "@/layouts/dashboardLayouts";
+import {Box, IconButton, Typography} from "@mui/material";
+import ClearIcon from "@mui/icons-material/Clear";
+import {useMemo} from "react";
+import {GET_TRANSPORTATION_ASSISTANCE} from "@/core/data/apiRoutes";
+import {useTranslations} from "next-intl";
+import TableRowActions from "./TableRowActions";
+import {LocalizationProvider, MobileDateTimePicker,} from "@mui/x-date-pickers";
+import {AdapterDateFnsJalali} from "@mui/x-date-pickers/AdapterDateFnsJalali";
+import {faIR} from "@mui/x-date-pickers/locales";
+import moment from "jalali-moment";
+import DataTable from "@/core/components/DataTable";
+
+function DashboardTransportationAssistanceComponent() {
+    const t = useTranslations();
+    const columns = useMemo(
+        () => [
+            {
+                accessorFn: (row) => row.id,
+                id: "id",
+                header: t("TransportationAssistance.id"),
+                enableColumnFilter: true,
+                datatype: "numeric",
+                filterFn: "equals",
+                columnFilterModeOptions: [
+                    "equals",
+                    "notEquals",
+                    "contains",
+                    "lessThan",
+                    "greaterThan",
+                    "between",
+                ],
+                Cell: ({renderedCellValue}) => (
+                    <Typography variant="body2">{renderedCellValue}</Typography>
+                ),
+            },
+            {
+                accessorFn: (row) => row.name,
+                id: "name",
+                header: t("TransportationAssistance.name"),
+                enableColumnFilter: true,
+                datatype: "text",
+                filterFn: "contains",
+                columnFilterModeOptions: ["contains", "equals", "notEquals"],
+                Cell: ({renderedCellValue}) => (
+                    <Typography variant="body2">{renderedCellValue}</Typography>
+                ),
+            },
+
+            {
+                accessorFn: (row) => row.national_id,
+                id: "national_id",
+                header: t("TransportationAssistance.national_id"),
+                enableColumnFilter: true,
+                datatype: "numeric",
+                filterFn: "equals",
+                columnFilterModeOptions: [
+                    "equals",
+                    "notEquals",
+                    "contains",
+                    "lessThan",
+                    "greaterThan",
+                    "between",
+                ],
+                Cell: ({renderedCellValue}) => (
+                    <Typography variant="body2">{renderedCellValue}</Typography>
+                ),
+            },
+            {
+                accessorFn: (row) => row.phone_number,
+                id: "phone_number",
+                header: t("TransportationAssistance.phone_number"),
+                enableColumnFilter: true,
+                datatype: "numeric",
+                filterFn: "equals",
+                columnFilterModeOptions: [
+                    "equals",
+                    "notEquals",
+                    "contains",
+                    "lessThan",
+                    "greaterThan",
+                    "between",
+                ],
+                Cell: ({renderedCellValue}) => (
+                    <Typography variant="body2">{renderedCellValue}</Typography>
+                ),
+            },
+            {
+                accessorFn: (row) =>
+                    moment(row.created_at).locale("fa").format("HH:mm | yyyy/MM/DD"),
+                id: "created_at",
+                header: t("TransportationAssistance.created_at"),
+                enableColumnFilter: true,
+                datatype: "date",
+                filterFn: "lessThan",
+                columnFilterModeOptions: ["lessThan", "greaterThan"],
+                Cell: ({renderedCellValue}) => (
+                    <Typography variant="body2">{renderedCellValue}</Typography>
+                ),
+                Header: ({column}) => <em>{column.columnDef.header}</em>,
+                Filter: ({column}) => {
+                    const filterFnValue = column.columnDef._filterFn;
+                    return (
+                        <Box sx={{display: "flex", alignItems: "start"}}>
+                            <LocalizationProvider
+                                dateAdapter={AdapterDateFnsJalali}
+                                localeText={
+                                    faIR.components.MuiLocalizationProvider.defaultProps
+                                        .localeText
+                                }
+                            >
+                                <MobileDateTimePicker
+                                    ampm={false}
+                                    onChange={(newValue) => {
+                                        const date = new Date(newValue);
+                                        const formattedDate = moment(date)
+                                            .locale("en")
+                                            .format("YYYY-MM-DD HH:mm");
+                                        column.setFilterValue(formattedDate);
+                                    }}
+                                    slotProps={{
+                                        textField: {
+                                            placeholder: "تاریخ خود را وارد کنید",
+                                            helperText: `${t("filter_mode")}: ${t(filterFnValue)}`,
+                                            sx: {minWidth: "120px"},
+                                            variant: "standard",
+                                        },
+                                    }}
+                                    value={
+                                        column.getFilterValue()
+                                            ? new Date(column.getFilterValue())
+                                            : null
+                                    }
+                                />
+                            </LocalizationProvider>
+                            <IconButton
+                                size="small"
+                                onClick={() => {
+                                    column.setFilterValue(null);
+                                }}
+                                sx={{
+                                    color: column.getFilterValue()
+                                        ? "rgba(0, 0, 0, 0.54)"
+                                        : "#bfbfbf",
+                                }}
+                            >
+                                <ClearIcon/>
+                            </IconButton>
+                        </Box>
+                    );
+                },
+            },
+            {
+                accessorFn: (row) =>
+                    moment(row.updated_at).locale("fa").format("HH:mm | yyyy/MM/DD"),
+                id: "updated_at",
+                header: t("TransportationAssistance.updated_at"),
+                enableColumnFilter: false,
+                datatype: "numeric",
+                Cell: ({renderedCellValue}) => (
+                    <Typography variant="body2">{renderedCellValue}</Typography>
+                ),
+            },
+            {
+                accessorFn: (row) => row.navgan_id,
+                id: "navgan_id",
+                header: t("TransportationAssistance.navgan_id"),
+                enableColumnFilter: true,
+                datatype: "numeric",
+                filterFn: "equals",
+                columnFilterModeOptions: [
+                    "equals",
+                    "notEquals",
+                    "contains",
+                    "lessThan",
+                    "greaterThan",
+                    "between",
+                ],
+                Cell: ({renderedCellValue}) => (
+                    <Typography variant="body2">{renderedCellValue}</Typography>
+                ),
+            },
+            {
+                accessorFn: (row) => row.vehicle_type,
+                id: "vehicle_type",
+                header: t("TransportationAssistance.vehicle_type"),
+                enableColumnFilter: true,
+                datatype: "text",
+                filterFn: "contains",
+                columnFilterModeOptions: ["contains", "equals", "notEquals"],
+                Cell: ({renderedCellValue}) => (
+                    <Typography variant="body2">{renderedCellValue}</Typography>
+                ),
+            },
+            {
+                accessorFn: (row) => row.state_name,
+                id: "state_id",
+                header: t("TransportationAssistance.state_name"),
+                enableColumnFilter: false,
+                datatype: "numeric",
+                Cell: ({renderedCellValue}) => (
+                    <Typography variant="body2">{renderedCellValue}</Typography>
+                ),
+            },
+        ],
+        []
+    );
+    return (
+        <DashboardLayouts>
+            <Box sx={{px: 3}}>
+                <DataTable
+                    tableUrl={GET_TRANSPORTATION_ASSISTANCE}
+                    columns={columns}
+                    selectableRow={false}
+                    enableCustomToolbar={true}
+                    enableLastUpdate={true}
+                    enablePinning={true}
+                    enableDensityToggle={false}
+                    initialState={{density: 'compact'}} //compact (small) //comfortable (medium) //spacious (large)
+                    enableColumnFilters={true}
+                    enableHiding={true}
+                    enableFullScreenToggle={false}
+                    enableGlobalFilter={false}
+                    enableColumnResizing={false} // if you want true this you should change renderRowActions props ** see https://www.material-react-table.com/docs/guides/row-actions
+                    enableRowActions={true}
+                    TableRowAction={TableRowActions}
+                />
+            </Box>
+        </DashboardLayouts>
+    );
+}
+
+export default DashboardTransportationAssistanceComponent;
--- a/src/components/errors/403.jsx
+++ b/src/components/errors/403.jsx
@@ -0,0 +1,37 @@
+import CenterLayout from "@/layouts/CenterLayout";
+import FullPageLayout from "@/layouts/FullPageLayout";
+import {Button, Typography} from "@mui/material";
+import {NextLinkComposed} from "@/core/components/LinkRouting";
+import {useTranslations} from "next-intl";
+import TitlePage from "@/core/components/TitlePage";
+import Svg403 from "@/core/components/svgs/Svg403";
+
+const UnAuthorizedComponent = () => {
+    const t = useTranslations();
+
+    return (
+        <>
+            <TitlePage text="Titles.title_custom_403"/>
+            <FullPageLayout sx={{p: 1}}>
+                <CenterLayout spacing={3}>
+                    <Svg403 width={300} height={200}/>
+                    <Typography margin={2} variant="h6" textAlign="center">
+                        {t("ErrorPage.custom_403")}
+                    </Typography>
+                    <Button
+                        variant="contained"
+                        component={NextLinkComposed}
+                        to={{
+                            pathname: "/",
+                        }}
+                    >
+                        {t("ErrorPage.link_routing_back_to")}{" "}
+                        {t("ErrorPage.link_routing_main_page")}
+                    </Button>
+                </CenterLayout>
+            </FullPageLayout>
+        </>
+    );
+};
+
+export default UnAuthorizedComponent;
--- a/src/components/errors/404.jsx
+++ b/src/components/errors/404.jsx
@@ -0,0 +1,37 @@
+import CenterLayout from "@/layouts/CenterLayout";
+import FullPageLayout from "@/layouts/FullPageLayout";
+import {Button, Typography} from "@mui/material";
+import {NextLinkComposed} from "@/core/components/LinkRouting";
+import {useTranslations} from "next-intl";
+import TitlePage from "@/core/components/TitlePage";
+import Svg404 from "@/core/components/svgs/Svg404";
+
+const NotFoundComponent = () => {
+    const t = useTranslations();
+
+    return (
+        <>
+            <TitlePage text="Titles.title_custom_404"/>
+            <FullPageLayout sx={{p: 1}}>
+                <CenterLayout spacing={3}>
+                    <Svg404 width={300} height={200}/>
+                    <Typography margin={2} variant="h6" textAlign="center">
+                        {t("ErrorPage.custom_404")}
+                    </Typography>
+                    <Button
+                        variant="contained"
+                        component={NextLinkComposed}
+                        to={{
+                            pathname: "/",
+                        }}
+                    >
+                        {t("ErrorPage.link_routing_back_to")}{" "}
+                        {t("ErrorPage.link_routing_main_page")}
+                    </Button>
+                </CenterLayout>
+            </FullPageLayout>
+        </>
+    );
+};
+
+export default NotFoundComponent;
--- a/src/components/errors/500.jsx
+++ b/src/components/errors/500.jsx
@@ -0,0 +1,48 @@
+import CenterLayout from "@/layouts/CenterLayout";
+import FullPageLayout from "@/layouts/FullPageLayout";
+import {Box, Button, Container, Stack, Typography} from "@mui/material";
+import {NextLinkComposed} from "@/core/components/LinkRouting";
+import {useTranslations} from "next-intl";
+import Image from "next/image";
+import TitlePage from "@/core/components/TitlePage";
+
+const ServerErrorComponent = () => {
+    const t = useTranslations();
+
+    return (
+        <>
+            <TitlePage text="Titles.title_custom_500"/>
+            <FullPageLayout sx={{p: 1}}>
+                <CenterLayout>
+                    <Container maxWidth="sm">
+                        <Stack spacing={4} sx={{p: 4}}>
+                            <Box sx={{position: "relative", width: "100%", height: 200}}>
+                                <Image
+                                    fill
+                                    src="/images/500.svg"
+                                    alt={t("app_name")}
+                                    priority
+                                />
+                            </Box>
+                            <Typography margin={2} variant="h6" textAlign="center">
+                                {t("ErrorPage.custom_500")}
+                            </Typography>
+                            <Button
+                                variant="contained"
+                                component={NextLinkComposed}
+                                to={{
+                                    pathname: "/",
+                                }}
+                            >
+                                {t("ErrorPage.link_routing_back_to")}{" "}
+                                {t("ErrorPage.link_routing_main_page")}
+                            </Button>
+                        </Stack>
+                    </Container>
+                </CenterLayout>
+            </FullPageLayout>
+        </>
+    );
+};
+
+export default ServerErrorComponent;
--- a/Show More
+++ b/Show More