AI Review Center

Commit Review Workspace ?

Select a commit on the left to inspect quality, security, business value, findings, and suggested code changes.
Showing AI reviews for crm-dashbaord
Project AI Score ?
73%
Quality Avg ?
74%
Security Avg ?
74%
Reviews ?
130

Review Result ?

solutionbowl/crm-dashbaord · 73209d16
This commit adds CSS imports and includes many styling changes for horse module pages, optimizing CSS by standardizing and consolidating styles. It improves UI consistency with new class names and layout styles. The impact on functionality or security is minimal as the changes are mostly presentational. However, there is risk of fake work due to many styling additions without detailed explanations or comments describing their necessity. Bug risk is low but potential issues might arise from CSS conflicts or import order.
Quality ?
75%
Security ?
10%
Business Value ?
60%
Maintainability ?
78%
Issues & Suggested Fixes ?
1AI detects the issue
2Shows file, line, or evidence
3Suggests the fix to apply
Lack Of Detail
Where commit message
Issue / Evidence lack of detail
Suggested Fix provide more specific descriptions of CSS optimization approach and goals to improve business value and review clarity
No File Header Or Comments
Where src/modules/horse/styles/horsespages.css:1
Issue / Evidence no file header or comments
Suggested Fix add comments to describe purpose of major CSS classes for maintainability and quality
Import Order
Where src/modules/horse/layout/HorseLayout.tsx:5
Issue / Evidence import order
Suggested Fix consider grouping CSS imports consistently and documenting the purpose for clarity
Alt Attribute Population
Where src/modules/horse/pages/Country/AllCountry.tsx:100
Issue / Evidence alt attribute population
Suggested Fix verify that alt text is always provided correctly for accessibility, add fallback if needed
Media Query Lacks Comment
Where src/modules/horse/styles/horsespages.css:109
Issue / Evidence media query lacks comment
Suggested Fix add comments explaining purpose of media queries for responsive design
Button Disabled State
Where src/modules/horse/pages/Horses/AddhorseRunners.tsx:158
Issue / Evidence button disabled state
Suggested Fix check that disabling submit button properly reflects state and add loading indicator for better UX
Code Change Preview · src/modules/horse/layout/HorseLayout.tsx ?
Removed / Before Commit
- diff --git a/src/modules/horse/layout/HorseLayout.tsx b/src/modules/horse/layout/HorseLayout.tsx
- index 4eacee1..3cdb1c6 100644
- import { Outlet } from 'react-router-dom';
- import HorseHeader from './HorseHeader';
- import HorseSidebar from './HorseSidebar';
- 
- /**
- * Horse Racing Module Layout
Added / After Commit
+ diff --git a/src/modules/horse/layout/HorseLayout.tsx b/src/modules/horse/layout/HorseLayout.tsx
+ index 4eacee1..3cdb1c6 100644
+ import { Outlet } from 'react-router-dom';
+ import HorseHeader from './HorseHeader';
+ import HorseSidebar from './HorseSidebar';
+ import '../styles/horse-module.scss';
+ import '../styles/horsespages.css';
+ 
+ /**
+ * Horse Racing Module Layout
Removed / Before Commit
- diff --git a/src/modules/horse/pages/Country/AllCountry.tsx b/src/modules/horse/pages/Country/AllCountry.tsx
- index 0df9289..3902b06 100644
- import { useNavigate } from "react-router-dom";
- import { countryService, type Country } from "../../../../services/api/countryService";
- import { toast } from "react-toastify";
- 
- interface AllCountryProps {}
- 
- {
- name: "Flag",
- cell: (row: Country) => (
-         <div className="py-2">
- {row.flag ? (
-             <img
-               src={getImageUrl(row.flag)}
-               alt={row.country_name}
-               style={{
-                 width: "40px",
Added / After Commit
+ diff --git a/src/modules/horse/pages/Country/AllCountry.tsx b/src/modules/horse/pages/Country/AllCountry.tsx
+ index 0df9289..3902b06 100644
+ import { useNavigate } from "react-router-dom";
+ import { countryService, type Country } from "../../../../services/api/countryService";
+ import { toast } from "react-toastify";
+ import "../../styles/horsespages.css";
+ 
+ interface AllCountryProps {}
+ 
+ {
+ name: "Flag",
+ cell: (row: Country) => (
+         <div className="horse-flag-cell">
+ {row.flag ? (
+             <img src={getImageUrl(row.flag)} alt={row.country_name} className="horse-flag-image" />
+ ) : (
+             <div className="horse-flag-placeholder">
+ <i className="ri-flag-line text-muted"></i>
Removed / Before Commit
- diff --git a/src/modules/horse/pages/Country/CreateCountry.tsx b/src/modules/horse/pages/Country/CreateCountry.tsx
- index 92fa999..9e1fe63 100644
- import { useNavigate, useParams } from "react-router-dom";
- import { toast } from "react-toastify";
- import { countryService } from "../../../../services/api/countryService";
- 
- interface CreateCountryForm {
- countryName: string;
- <img
- src={imagePreview}
- alt="Flag preview"
-                             style={{
-                               width: "120px",
-                               height: "80px",
-                               objectFit: "cover",
-                               borderRadius: "8px",
-                               border: "2px solid #dee2e6"
-                             }}
Added / After Commit
+ diff --git a/src/modules/horse/pages/Country/CreateCountry.tsx b/src/modules/horse/pages/Country/CreateCountry.tsx
+ index 92fa999..9e1fe63 100644
+ import { useNavigate, useParams } from "react-router-dom";
+ import { toast } from "react-toastify";
+ import { countryService } from "../../../../services/api/countryService";
+ import "../../styles/horsespages.css";
+ 
+ interface CreateCountryForm {
+ countryName: string;
+ <img
+ src={imagePreview}
+ alt="Flag preview"
+                             className="horse-flag-preview"
+ />
+ <Button
+ variant="danger"
+ size="sm"
+                             className="position-absolute top-0 end-0 m-1 horse-flag-remove"
Removed / Before Commit
- diff --git a/src/modules/horse/pages/Event/AllEvents.tsx b/src/modules/horse/pages/Event/AllEvents.tsx
- index c804add..e773f0a 100644
- import { eventService, type Event } from "../../../../services/api/eventService";
- import { countryService } from "../../../../services/api/countryService";
- import { toast } from "react-toastify";
- 
- interface AllEventsProps {}
- 
- <Row>
- <Col xl={12}>
- <Card className="custom-card">
-             <Card.Header className="d-flex justify-content-between align-items-center">
- <Card.Title>All Events List</Card.Title>
-               <div className="d-flex align-items-center gap-2">
- <input
- type="text"
-                   className="form-control form-control-sm"
- placeholder="Search events..."
Added / After Commit
+ diff --git a/src/modules/horse/pages/Event/AllEvents.tsx b/src/modules/horse/pages/Event/AllEvents.tsx
+ index c804add..e773f0a 100644
+ import { eventService, type Event } from "../../../../services/api/eventService";
+ import { countryService } from "../../../../services/api/countryService";
+ import { toast } from "react-toastify";
+ import "../../styles/horsespages.css";
+ 
+ interface AllEventsProps {}
+ 
+ <Row>
+ <Col xl={12}>
+ <Card className="custom-card">
+             <Card.Header className="horse-page-card-header">
+ <Card.Title>All Events List</Card.Title>
+               <div className="horse-page-toolbar">
+ <input
+ type="text"
+                   className="form-control form-control-sm horse-page-search"
Removed / Before Commit
- diff --git a/src/modules/horse/pages/Event/CreateEvents.tsx b/src/modules/horse/pages/Event/CreateEvents.tsx
- index 09218c1..efbeb92 100644
- import { toast } from "react-toastify";
- import { eventService } from "../../../../services/api/eventService";
- import { countryService, type Country } from "../../../../services/api/countryService";
- 
- interface CreateEventForm {
- country_id: string;
- <Col md={6}>
- <Form.Group>
- <Form.Label>Status</Form.Label>
-                       <div className="form-check form-switch mt-2">
- <Form.Check
- type="switch"
- id="event-status-switch"
- 
- {/* Buttons */}
- <Col md={12}>
Added / After Commit
+ diff --git a/src/modules/horse/pages/Event/CreateEvents.tsx b/src/modules/horse/pages/Event/CreateEvents.tsx
+ index 09218c1..efbeb92 100644
+ import { toast } from "react-toastify";
+ import { eventService } from "../../../../services/api/eventService";
+ import { countryService, type Country } from "../../../../services/api/countryService";
+ import "../../styles/horsespages.css";
+ 
+ interface CreateEventForm {
+ country_id: string;
+ <Col md={6}>
+ <Form.Group>
+ <Form.Label>Status</Form.Label>
+                       <div className="form-check form-switch horse-form-switch">
+ <Form.Check
+ type="switch"
+ id="event-status-switch"
+ 
+ {/* Buttons */}
Removed / Before Commit
- diff --git a/src/modules/horse/pages/Horses/AddhorseRunners.tsx b/src/modules/horse/pages/Horses/AddhorseRunners.tsx
- index 36d3a52..dc2a44f 100644
- import { useNavigate, useParams } from "react-router-dom";
- import { toast } from "react-toastify";
- import { tenantServiceInstance as axiosInstance } from "../../../../services/api/axiosConfig";
- 
- type Runner = {
- horse_number: string;
- <Card.Body>
- 
- {/* Header */}
-               <div className="d-flex justify-content-between align-items-center mb-4">
- <h5 className="fw-semibold mb-0">Add Horse Racing Market Runners</h5>
- <Button variant="primary" size="sm" onClick={() => navigate(`/horse/races/detail/${id}`)}>
- <i className="ri-arrow-left-line me-1"></i>Back
- {/* Race ID */}
- <div className="mb-4">
- <Form.Label className="fw-medium fs-13 mb-1">Race ID</Form.Label>
Added / After Commit
+ diff --git a/src/modules/horse/pages/Horses/AddhorseRunners.tsx b/src/modules/horse/pages/Horses/AddhorseRunners.tsx
+ index 36d3a52..dc2a44f 100644
+ import { useNavigate, useParams } from "react-router-dom";
+ import { toast } from "react-toastify";
+ import { tenantServiceInstance as axiosInstance } from "../../../../services/api/axiosConfig";
+ import "../../styles/horsespages.css";
+ 
+ type Runner = {
+ horse_number: string;
+ <Card.Body>
+ 
+ {/* Header */}
+               <div className="horse-runners-header">
+ <h5 className="fw-semibold mb-0">Add Horse Racing Market Runners</h5>
+ <Button variant="primary" size="sm" onClick={() => navigate(`/horse/races/detail/${id}`)}>
+ <i className="ri-arrow-left-line me-1"></i>Back
+ {/* Race ID */}
+ <div className="mb-4">
Removed / Before Commit
- diff --git a/src/modules/horse/pages/Horses/AllHorses.tsx b/src/modules/horse/pages/Horses/AllHorses.tsx
- index db63fd9..fb2b0ce 100644
- import { horseService, type Horse } from "../../../../services/api/horseService";
- import { raceService } from "../../../../services/api/raceService";
- import { toast } from "react-toastify";
- 
- interface AllHorsesProps {}
- 
- <Row>
- <Col xl={12}>
- <Card className="custom-card">
-             <Card.Header className="d-flex justify-content-between align-items-center">
- <Card.Title>All Horses List</Card.Title>
-               <div className="d-flex align-items-center gap-2">
- <input
- type="text"
-                   className="form-control form-control-sm"
- placeholder="Search horses..."
Added / After Commit
+ diff --git a/src/modules/horse/pages/Horses/AllHorses.tsx b/src/modules/horse/pages/Horses/AllHorses.tsx
+ index db63fd9..fb2b0ce 100644
+ import { horseService, type Horse } from "../../../../services/api/horseService";
+ import { raceService } from "../../../../services/api/raceService";
+ import { toast } from "react-toastify";
+ import "../../styles/horsespages.css";
+ 
+ interface AllHorsesProps {}
+ 
+ <Row>
+ <Col xl={12}>
+ <Card className="custom-card">
+             <Card.Header className="horse-page-card-header">
+ <Card.Title>All Horses List</Card.Title>
+               <div className="horse-page-toolbar">
+ <input
+ type="text"
+                   className="form-control form-control-sm horse-page-search"
Removed / Before Commit
- diff --git a/src/modules/horse/pages/Horses/CreateHorse.tsx b/src/modules/horse/pages/Horses/CreateHorse.tsx
- index 43cadbf..dbacdf0 100644
- import { toast } from "react-toastify";
- import { horseService } from "../../../../services/api/horseService";
- import { raceService, type Race } from "../../../../services/api/raceService";
- 
- interface CreateHorseForm {
- race_id: string;
- <Col md={6}>
- <Form.Group>
- <Form.Label>Status</Form.Label>
-                       <div className="form-check form-switch mt-2">
- <Form.Check
- type="switch"
- id="horse-status"
- 
- {/* Buttons */}
- <Col md={12}>
Added / After Commit
+ diff --git a/src/modules/horse/pages/Horses/CreateHorse.tsx b/src/modules/horse/pages/Horses/CreateHorse.tsx
+ index 43cadbf..dbacdf0 100644
+ import { toast } from "react-toastify";
+ import { horseService } from "../../../../services/api/horseService";
+ import { raceService, type Race } from "../../../../services/api/raceService";
+ import "../../styles/horsespages.css";
+ 
+ interface CreateHorseForm {
+ race_id: string;
+ <Col md={6}>
+ <Form.Group>
+ <Form.Label>Status</Form.Label>
+                       <div className="form-check form-switch horse-form-switch">
+ <Form.Check
+ type="switch"
+ id="horse-status"
+ 
+ {/* Buttons */}
Removed / Before Commit
- diff --git a/src/modules/horse/pages/Odds/CreateOdd.tsx b/src/modules/horse/pages/Odds/CreateOdd.tsx
- index b9e3fe2..6c81c16 100644
- import { oddsService } from "../../../../services/api/oddsService";
- import { raceService, type Race } from "../../../../services/api/raceService";
- import { horseService, type Horse } from "../../../../services/api/horseService";
- 
- interface CreateOddForm {
- race_id: string;
- <Col md={6}>
- <Form.Group>
- <Form.Label>Status</Form.Label>
-                       <div className="form-check form-switch mt-2">
- <Form.Check
- type="switch"
- id="odds-status"
- 
- {/* Buttons */}
- <Col md={12}>
Added / After Commit
+ diff --git a/src/modules/horse/pages/Odds/CreateOdd.tsx b/src/modules/horse/pages/Odds/CreateOdd.tsx
+ index b9e3fe2..6c81c16 100644
+ import { oddsService } from "../../../../services/api/oddsService";
+ import { raceService, type Race } from "../../../../services/api/raceService";
+ import { horseService, type Horse } from "../../../../services/api/horseService";
+ import "../../styles/horsespages.css";
+ 
+ interface CreateOddForm {
+ race_id: string;
+ <Col md={6}>
+ <Form.Group>
+ <Form.Label>Status</Form.Label>
+                       <div className="form-check form-switch horse-form-switch">
+ <Form.Check
+ type="switch"
+ id="odds-status"
+ 
+ {/* Buttons */}
Removed / Before Commit
- diff --git a/src/modules/horse/pages/Race/AllRaces.tsx b/src/modules/horse/pages/Race/AllRaces.tsx
- index 08baf90..43c722e 100644
- import { raceService, type Race } from "../../../../services/api/raceService";
- import { eventService } from "../../../../services/api/eventService";
- import { toast } from "react-toastify";
- 
- interface AllRacesProps {}
- 
- <Row>
- <Col xl={12}>
- <Card className="custom-card">
-             <Card.Header className="d-flex justify-content-between align-items-center">
- <Card.Title>All Races List</Card.Title>
-               <div className="d-flex align-items-center gap-2">
- <input
- type="text"
-                   className="form-control form-control-sm"
- placeholder="Search races..."
Added / After Commit
+ diff --git a/src/modules/horse/pages/Race/AllRaces.tsx b/src/modules/horse/pages/Race/AllRaces.tsx
+ index 08baf90..43c722e 100644
+ import { raceService, type Race } from "../../../../services/api/raceService";
+ import { eventService } from "../../../../services/api/eventService";
+ import { toast } from "react-toastify";
+ import "../../styles/horsespages.css";
+ 
+ interface AllRacesProps {}
+ 
+ <Row>
+ <Col xl={12}>
+ <Card className="custom-card">
+             <Card.Header className="horse-page-card-header">
+ <Card.Title>All Races List</Card.Title>
+               <div className="horse-page-toolbar">
+ <input
+ type="text"
+                   className="form-control form-control-sm horse-page-search"
Removed / Before Commit
- diff --git a/src/modules/horse/pages/Race/CreateRaces.tsx b/src/modules/horse/pages/Race/CreateRaces.tsx
- index 3af5223..1baca58 100644
- import { toast } from "react-toastify";
- import { raceService } from "../../../../services/api/raceService";
- import { eventService, type Event } from "../../../../services/api/eventService";
- 
- interface CreateRaceForm {
- event_id: string;
- <Col md={6}>
- <Form.Group>
- <Form.Label>Status</Form.Label>
-                       <div className="form-check form-switch mt-2">
- <Form.Check
- type="switch"
- id="race-status"
- 
- {/* Buttons */}
- <Col md={12}>
Added / After Commit
+ diff --git a/src/modules/horse/pages/Race/CreateRaces.tsx b/src/modules/horse/pages/Race/CreateRaces.tsx
+ index 3af5223..1baca58 100644
+ import { toast } from "react-toastify";
+ import { raceService } from "../../../../services/api/raceService";
+ import { eventService, type Event } from "../../../../services/api/eventService";
+ import "../../styles/horsespages.css";
+ 
+ interface CreateRaceForm {
+ event_id: string;
+ <Col md={6}>
+ <Form.Group>
+ <Form.Label>Status</Form.Label>
+                       <div className="form-check form-switch horse-form-switch">
+ <Form.Check
+ type="switch"
+ id="race-status"
+ 
+ {/* Buttons */}
Removed / Before Commit
- diff --git a/src/modules/horse/styles/horsespages.css b/src/modules/horse/styles/horsespages.css
- new file mode 100644
- index 0000000..601aaa1
Added / After Commit
+ diff --git a/src/modules/horse/styles/horsespages.css b/src/modules/horse/styles/horsespages.css
+ new file mode 100644
+ index 0000000..601aaa1
+ .horse-page-card-header {
+   display: flex;
+   justify-content: space-between;
+   align-items: center;
+   gap: 1rem;
+   flex-wrap: wrap;
+ }
+ 
+ .horse-page-toolbar {
+   display: flex;
+   align-items: center;
+   gap: 0.5rem;
+   flex-wrap: wrap;
+ }
+
Removed / Before Commit
- diff --git a/src/pages/commonpages.css b/src/pages/commonpages.css
- new file mode 100644
- index 0000000..ad28c03
Added / After Commit
+ diff --git a/src/pages/commonpages.css b/src/pages/commonpages.css
+ new file mode 100644
+ index 0000000..ad28c03
+ .page-toolbar {
+   display: flex;
+   align-items: center;
+   gap: 0.5rem;
+   flex-wrap: wrap;
+ }
+ 
+ .page-search-input {
+   width: 250px;
+ }
+ 
+ .page-state {
+   padding-top: 3rem;
+   padding-bottom: 3rem;
+   text-align: center;
Removed / Before Commit
- diff --git a/src/pages/DashboardLayout.tsx b/src/pages/DashboardLayout.tsx
- index bc2b3f5..d2f47db 100644
- import { Provider } from "react-redux"
- import { store } from "../components/common/ui/redux/store"
- import { Initialload } from "../components/contextapi"
- 
- 
- function DashboardLayout() {
Added / After Commit
+ diff --git a/src/pages/DashboardLayout.tsx b/src/pages/DashboardLayout.tsx
+ index bc2b3f5..d2f47db 100644
+ import { Provider } from "react-redux"
+ import { store } from "../components/common/ui/redux/store"
+ import { Initialload } from "../components/contextapi"
+ import "./commonpages.css"
+ 
+ 
+ function DashboardLayout() {
Removed / Before Commit
- diff --git a/src/pages/Platforms/AllPlatforms.tsx b/src/pages/Platforms/AllPlatforms.tsx
- index 8021e13..7024e2c 100644
- <Card className="custom-card">
- <Card.Header className="d-flex justify-content-between align-items-center">
- <Card.Title>All Platforms List</Card.Title>
-               <div className="d-flex align-items-center gap-2">
- <input
- type="text"
-                   className="form-control form-control-sm"
- placeholder="Search platforms..."
- value={searchTerm}
- onChange={handleSearch}
-                   style={{ width: "250px" }}
- />
- <Button
- variant="primary"
- </Card.Header>
- <Card.Body>
Added / After Commit
+ diff --git a/src/pages/Platforms/AllPlatforms.tsx b/src/pages/Platforms/AllPlatforms.tsx
+ index 8021e13..7024e2c 100644
+ <Card className="custom-card">
+ <Card.Header className="d-flex justify-content-between align-items-center">
+ <Card.Title>All Platforms List</Card.Title>
+               <div className="page-toolbar">
+ <input
+ type="text"
+                   className="form-control form-control-sm page-search-input"
+ placeholder="Search platforms..."
+ value={searchTerm}
+ onChange={handleSearch}
+ />
+ <Button
+ variant="primary"
+ </Card.Header>
+ <Card.Body>
+ {loading && platforms.length === 0 ? (
Removed / Before Commit
- diff --git a/src/pages/Races/AllRaces.tsx b/src/pages/Races/AllRaces.tsx
- index 82018e3..a6375df 100644
- <Card className="custom-card">
- <Card.Header className="d-flex justify-content-between align-items-center">
- <Card.Title>All Races List</Card.Title>
-               <div className="d-flex align-items-center gap-2">
- <input
- type="text"
-                   className="form-control form-control-sm"
- placeholder="Search races..."
- value={searchTerm}
- onChange={(e) => setSearchTerm(e.target.value)}
-                   style={{ width: "250px" }}
- />
- </div>
- </Card.Header>
- This races list is currently available only for owner login.
- </Alert>
Added / After Commit
+ diff --git a/src/pages/Races/AllRaces.tsx b/src/pages/Races/AllRaces.tsx
+ index 82018e3..a6375df 100644
+ <Card className="custom-card">
+ <Card.Header className="d-flex justify-content-between align-items-center">
+ <Card.Title>All Races List</Card.Title>
+               <div className="page-toolbar">
+ <input
+ type="text"
+                   className="form-control form-control-sm page-search-input"
+ placeholder="Search races..."
+ value={searchTerm}
+ onChange={(e) => setSearchTerm(e.target.value)}
+ />
+ </div>
+ </Card.Header>
+ This races list is currently available only for owner login.
+ </Alert>
+ ) : loading ? (
Removed / Before Commit
- diff --git a/src/pages/Users/AllUsers.tsx b/src/pages/Users/AllUsers.tsx
- index 423e50f..fbfcd2a 100644
- ))}
- </div>
- </div>
-               <div className="d-flex flex-wrap align-items-center gap-2">
- <input
- type="text"
-                   className="form-control form-control-sm"
- placeholder="Search users..."
- value={searchTerm}
- onChange={handleSearch}
-                   style={{ width: "250px" }}
- />
- <Button
- variant="primary"
- </Card.Header>
- <Card.Body>
Added / After Commit
+ diff --git a/src/pages/Users/AllUsers.tsx b/src/pages/Users/AllUsers.tsx
+ index 423e50f..fbfcd2a 100644
+ ))}
+ </div>
+ </div>
+               <div className="page-toolbar">
+ <input
+ type="text"
+                   className="form-control form-control-sm page-search-input"
+ placeholder="Search users..."
+ value={searchTerm}
+ onChange={handleSearch}
+ />
+ <Button
+ variant="primary"
+ </Card.Header>
+ <Card.Body>
+ {loading && users.length === 0 ? (
Removed / Before Commit
- diff --git a/src/pages/Users/CreateUser.tsx b/src/pages/Users/CreateUser.tsx
- index 29585bc..fb058f3 100644
- 
- {/* Buttons */}
- <Col md={12}>
-                     <div className="border-top pt-4 mt-3 d-flex justify-content-between">
- <Button
- variant="outline-secondary"
- type="button"
- Back
- </Button>
- 
-                       <div className="d-flex gap-2">
- <Button
- variant="outline-danger"
- type="button"
- <div className="credentials-container">
- <Row className="g-3">
Added / After Commit
+ diff --git a/src/pages/Users/CreateUser.tsx b/src/pages/Users/CreateUser.tsx
+ index 29585bc..fb058f3 100644
+ 
+ {/* Buttons */}
+ <Col md={12}>
+                     <div className="page-form-actions">
+ <Button
+ variant="outline-secondary"
+ type="button"
+ Back
+ </Button>
+ 
+                       <div className="page-form-actions-group">
+ <Button
+ variant="outline-danger"
+ type="button"
+ <div className="credentials-container">
+ <Row className="g-3">
Removed / Before Commit
- diff --git a/src/pages/Users/Userdetail.tsx b/src/pages/Users/Userdetail.tsx
- index 8518cf4..0f11930 100644
- 
- <Row>
- <Col xl={12}>
-           <Card className="custom-card" style={{ minHeight: "calc(100vh - 180px)" }}>
- <Card.Body className="p-0">
- {user ? (
- <Row
-                   className="g-0 align-items-stretch h-100"
-                   style={{ minHeight: "calc(100vh - 250px)" }}
- >
- <Col xl={2} lg={3} md={4}>
- <Usersidebar
- </Col>
- </Row>
- ) : (
-                 <div className="text-center py-5">
Added / After Commit
+ diff --git a/src/pages/Users/Userdetail.tsx b/src/pages/Users/Userdetail.tsx
+ index 8518cf4..0f11930 100644
+ 
+ <Row>
+ <Col xl={12}>
+           <Card className="custom-card page-card-min-height">
+ <Card.Body className="p-0">
+ {user ? (
+ <Row
+                   className="g-0 align-items-stretch h-100 page-content-min-height"
+ >
+ <Col xl={2} lg={3} md={4}>
+ <Usersidebar
+ </Col>
+ </Row>
+ ) : (
+                 <div className="page-state">
+ <h5 className="mb-2">User data not available</h5>
Removed / Before Commit
- diff --git a/src/pages/Users/usersidebar.tsx b/src/pages/Users/usersidebar.tsx
- index 31d63e6..37ac31c 100644
- { icon: "ri-gift-2-line", label: "Bonus", value: "bonus" },
- ];
- 
- const sidebarStyles = {
-   wrapper: {
-     background: "#f7f7fb",
-     minHeight: "100%",
-     padding: "0px 0px",
-   } as React.CSSProperties,
-   shell: {
-     background: "#ffffff",
-     borderRadius: "0px",
-     padding: "12px",
-     minHeight: "100%",
-   } as React.CSSProperties,
-   avatar: {
Added / After Commit
+ diff --git a/src/pages/Users/usersidebar.tsx b/src/pages/Users/usersidebar.tsx
+ index 31d63e6..37ac31c 100644
+ { icon: "ri-gift-2-line", label: "Bonus", value: "bonus" },
+ ];
+ 
+ export const getSidebarViewLabel = (view: UserSidebarView) =>
+ menuItems.find((item) => item.value === view)?.label ?? "Profile";
+ 
+ onViewChange,
+ }) => {
+ return (
+     <div className="page-user-sidebar border-end h-100">
+       <div className="page-user-sidebar-shell h-100">
+ <div className="d-flex justify-content-between align-items-start mb-3">
+ <div className="d-flex align-items-center gap-3">
+             <div className="page-user-avatar d-flex align-items-center justify-content-center flex-shrink-0">
+ {getUserInitials(user)}
+ </div>