Commit Review Workspace ?

- diff --git a/package.json b/package.json
- index d24bfbd..45ffee2 100644
- "sass-min": "sass ./src/assets/scss/:./src/assets/css/ --style compressed"
- },
- "dependencies": {
-     "@dorbus/react-animated-modal": "^1.0.0",
- "@emotion/react": "^11.14.0",
- "@emotion/styled": "^11.14.0",
- "@fortawesome/fontawesome-free": "^7.2.0",
- "apexcharts": "^4.5.0",
- "axios": "^1.13.6",
- "bootstrap": "^5.3.5",
-     "d3-geo": "^3.1.1",
- "dayjs": "^1.11.13",
- "dragula": "^3.7.3",
- "echarts": "^5.6.0",
- "react-dropdown-select": "^4.11.4",
- "react-filepond": "^7.1.3",

+ diff --git a/package.json b/package.json
+ index d24bfbd..45ffee2 100644
+ "sass-min": "sass ./src/assets/scss/:./src/assets/css/ --style compressed"
+ },
+ "dependencies": {
+ "@emotion/react": "^11.14.0",
+ "@emotion/styled": "^11.14.0",
+ "@fortawesome/fontawesome-free": "^7.2.0",
+ "apexcharts": "^4.5.0",
+ "axios": "^1.13.6",
+ "bootstrap": "^5.3.5",
+ "dayjs": "^1.11.13",
+ "dragula": "^3.7.3",
+ "echarts": "^5.6.0",
+ "react-dropdown-select": "^4.11.4",
+ "react-filepond": "^7.1.3",
+ "react-helmet": "^6.1.0",
+ "react-leaflet": "^5.0.0",

- diff --git a/src/modules/horse/components/actions/HorseActionButton.tsx b/src/modules/horse/components/actions/HorseActionButton.tsx
- new file mode 100644
- index 0000000..69fb8d2

+ diff --git a/src/modules/horse/components/actions/HorseActionButton.tsx b/src/modules/horse/components/actions/HorseActionButton.tsx
+ new file mode 100644
+ index 0000000..69fb8d2
+ import React from "react";
+ import { Button, Spinner } from "react-bootstrap";
+ 
+ type HorseActionType = "create" | "edit" | "update" | "back" | "reset";
+ 
+ interface HorseActionButtonProps {
+   action: HorseActionType;
+   entityName?: string;
+   onClick?: React.MouseEventHandler<HTMLElement>;
+   type?: "button" | "submit" | "reset";
+   disabled?: boolean;
+   loading?: boolean;
+   iconOnly?: boolean;
+   title?: string;
+   size?: "sm" | "lg";

- 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

+ 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

- diff --git a/src/modules/horse/pages/Country/AllCountry.tsx b/src/modules/horse/pages/Country/AllCountry.tsx
- index 0df9289..e60e7ad 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",

+ diff --git a/src/modules/horse/pages/Country/AllCountry.tsx b/src/modules/horse/pages/Country/AllCountry.tsx
+ index 0df9289..e60e7ad 100644
+ import { useNavigate } from "react-router-dom";
+ import { countryService, type Country } from "../../../../services/api/countryService";
+ import { toast } from "react-toastify";
+ import "../../styles/horsespages.css";
+ import HorseActionButton from "../../components/actions/HorseActionButton";
+ 
+ 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">

- diff --git a/src/modules/horse/pages/Country/CreateCountry.tsx b/src/modules/horse/pages/Country/CreateCountry.tsx
- index 92fa999..98266fc 100644
- import React, { Fragment, useState, useEffect } from "react";
- import { Card, Col, Form, Row, Button, Spinner } from "react-bootstrap";
- import Pageheader from "../../components/pageheader/pageheader";
- 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",

+ diff --git a/src/modules/horse/pages/Country/CreateCountry.tsx b/src/modules/horse/pages/Country/CreateCountry.tsx
+ index 92fa999..98266fc 100644
+ import React, { Fragment, useState, useEffect } from "react";
+ import { Card, Col, Form, Row, Button } from "react-bootstrap";
+ import Pageheader from "../../components/pageheader/pageheader";
+ import { useNavigate, useParams } from "react-router-dom";
+ import { toast } from "react-toastify";
+ import { countryService } from "../../../../services/api/countryService";
+ import "../../styles/horsespages.css";
+ import HorseActionButton from "../../components/actions/HorseActionButton";
+ 
+ interface CreateCountryForm {
+ countryName: string;
+ <img
+ src={imagePreview}
+ alt="Flag preview"
+                             className="horse-flag-preview"
+ />

- diff --git a/src/modules/horse/pages/Event/AllEvents.tsx b/src/modules/horse/pages/Event/AllEvents.tsx
- index c804add..278048b 100644
- import { eventService, type Event } from "../../../../services/api/eventService";
- import { countryService } from "../../../../services/api/countryService";
- import { toast } from "react-toastify";
- 
- interface AllEventsProps {}
- 
- name: "Actions",
- cell: (row: Event) => (
- <div className="btn-list">
-           <button
-             className="btn btn-sm btn-icon btn-primary btn-wave"
- title="Edit"
- onClick={() => handleEdit(row._id)}
-           >
-             <i className="ri-edit-line"></i>
-           </button>

+ diff --git a/src/modules/horse/pages/Event/AllEvents.tsx b/src/modules/horse/pages/Event/AllEvents.tsx
+ index c804add..278048b 100644
+ import { eventService, type Event } from "../../../../services/api/eventService";
+ import { countryService } from "../../../../services/api/countryService";
+ import { toast } from "react-toastify";
+ import "../../styles/horsespages.css";
+ import HorseActionButton from "../../components/actions/HorseActionButton";
+ 
+ interface AllEventsProps {}
+ 
+ name: "Actions",
+ cell: (row: Event) => (
+ <div className="btn-list">
+           <HorseActionButton
+             action="edit"
+             iconOnly
+             size="sm"
+             className="btn-icon btn-wave"

- diff --git a/src/modules/horse/pages/Event/CreateEvents.tsx b/src/modules/horse/pages/Event/CreateEvents.tsx
- index 09218c1..27e7717 100644
- import React, { Fragment, useState, useEffect } from "react";
- import { Card, Col, Form, Row, Button, Spinner } from "react-bootstrap";
- import Pageheader from "../../components/pageheader/pageheader";
- import { useNavigate, useParams } from "react-router-dom";
- 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"

+ diff --git a/src/modules/horse/pages/Event/CreateEvents.tsx b/src/modules/horse/pages/Event/CreateEvents.tsx
+ index 09218c1..27e7717 100644
+ import React, { Fragment, useState, useEffect } from "react";
+ import { Card, Col, Form, Row } from "react-bootstrap";
+ import Pageheader from "../../components/pageheader/pageheader";
+ import { useNavigate, useParams } from "react-router-dom";
+ import { toast } from "react-toastify";
+ import { eventService } from "../../../../services/api/eventService";
+ import { countryService, type Country } from "../../../../services/api/countryService";
+ import "../../styles/horsespages.css";
+ import HorseActionButton from "../../components/actions/HorseActionButton";
+ 
+ interface CreateEventForm {
+ country_id: string;
+ <Col md={6}>
+ <Form.Group>
+ <Form.Label>Status</Form.Label>
+                       <div className="form-check form-switch horse-form-switch">

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

+ 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">

- diff --git a/src/modules/horse/pages/Horses/AllHorses.tsx b/src/modules/horse/pages/Horses/AllHorses.tsx
- index db63fd9..01c338d 100644
- import { horseService, type Horse } from "../../../../services/api/horseService";
- import { raceService } from "../../../../services/api/raceService";
- import { toast } from "react-toastify";
- 
- interface AllHorsesProps {}
- 
- name: "Actions",
- cell: (row: Horse) => (
- <div className="btn-list">
-           <button
-             className="btn btn-sm btn-icon btn-primary btn-wave"
- title="Edit"
- onClick={() => handleEdit(row._id)}
-           >
-             <i className="ri-edit-line"></i>
-           </button>

+ diff --git a/src/modules/horse/pages/Horses/AllHorses.tsx b/src/modules/horse/pages/Horses/AllHorses.tsx
+ index db63fd9..01c338d 100644
+ import { horseService, type Horse } from "../../../../services/api/horseService";
+ import { raceService } from "../../../../services/api/raceService";
+ import { toast } from "react-toastify";
+ import "../../styles/horsespages.css";
+ import HorseActionButton from "../../components/actions/HorseActionButton";
+ 
+ interface AllHorsesProps {}
+ 
+ name: "Actions",
+ cell: (row: Horse) => (
+ <div className="btn-list">
+           <HorseActionButton
+             action="edit"
+             iconOnly
+             size="sm"
+             className="btn-icon btn-wave"

- diff --git a/src/modules/horse/pages/Horses/CreateHorse.tsx b/src/modules/horse/pages/Horses/CreateHorse.tsx
- index 43cadbf..532673d 100644
- import React, { Fragment, useState, useEffect } from "react";
- import { Card, Col, Form, Row, Button, Spinner } from "react-bootstrap";
- import Pageheader from "../../components/pageheader/pageheader";
- import { useNavigate, useParams } from "react-router-dom";
- 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"

+ diff --git a/src/modules/horse/pages/Horses/CreateHorse.tsx b/src/modules/horse/pages/Horses/CreateHorse.tsx
+ index 43cadbf..532673d 100644
+ import React, { Fragment, useState, useEffect } from "react";
+ import { Card, Col, Form, Row } from "react-bootstrap";
+ import Pageheader from "../../components/pageheader/pageheader";
+ import { useNavigate, useParams } from "react-router-dom";
+ import { toast } from "react-toastify";
+ import { horseService } from "../../../../services/api/horseService";
+ import { raceService, type Race } from "../../../../services/api/raceService";
+ import "../../styles/horsespages.css";
+ import HorseActionButton from "../../components/actions/HorseActionButton";
+ 
+ interface CreateHorseForm {
+ race_id: string;
+ <Col md={6}>
+ <Form.Group>
+ <Form.Label>Status</Form.Label>
+                       <div className="form-check form-switch horse-form-switch">

- diff --git a/src/modules/horse/pages/Odds/AllOdds.tsx b/src/modules/horse/pages/Odds/AllOdds.tsx
- index 910de3f..d5f8443 100644
- import { raceService } from "../../../../services/api/raceService";
- import { horseService } from "../../../../services/api/horseService";
- import { toast } from "react-toastify";
- 
- interface AllOddsProps {}
- 
- name: "Actions",
- cell: (row: Odds) => (
- <div className="btn-list">
-           <button
-             className="btn btn-sm btn-icon btn-primary btn-wave"
- title="Edit"
- onClick={() => handleEdit(row._id)}
-           >
-             <i className="ri-edit-line"></i>
-           </button>

+ diff --git a/src/modules/horse/pages/Odds/AllOdds.tsx b/src/modules/horse/pages/Odds/AllOdds.tsx
+ index 910de3f..d5f8443 100644
+ import { raceService } from "../../../../services/api/raceService";
+ import { horseService } from "../../../../services/api/horseService";
+ import { toast } from "react-toastify";
+ import "../../styles/horsespages.css";
+ import HorseActionButton from "../../components/actions/HorseActionButton";
+ 
+ interface AllOddsProps {}
+ 
+ name: "Actions",
+ cell: (row: Odds) => (
+ <div className="btn-list">
+           <HorseActionButton
+             action="edit"
+             iconOnly
+             size="sm"
+             className="btn-icon btn-wave"

- diff --git a/src/modules/horse/pages/Odds/CreateOdd.tsx b/src/modules/horse/pages/Odds/CreateOdd.tsx
- index b9e3fe2..97f7701 100644
- import React, { Fragment, useState, useEffect } from "react";
- import { Card, Col, Form, Row, Button, Spinner } from "react-bootstrap";
- import Pageheader from "../../components/pageheader/pageheader";
- import { useNavigate, useParams } from "react-router-dom";
- import { toast } from "react-toastify";
- 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

+ diff --git a/src/modules/horse/pages/Odds/CreateOdd.tsx b/src/modules/horse/pages/Odds/CreateOdd.tsx
+ index b9e3fe2..97f7701 100644
+ import React, { Fragment, useState, useEffect } from "react";
+ import { Card, Col, Form, Row } from "react-bootstrap";
+ import Pageheader from "../../components/pageheader/pageheader";
+ import { useNavigate, useParams } from "react-router-dom";
+ import { toast } from "react-toastify";
+ 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";
+ import HorseActionButton from "../../components/actions/HorseActionButton";
+ 
+ interface CreateOddForm {
+ race_id: string;
+ <Col md={6}>
+ <Form.Group>
+ <Form.Label>Status</Form.Label>

- diff --git a/src/modules/horse/pages/Platform/UpdateCountry.tsx b/src/modules/horse/pages/Platform/UpdateCountry.tsx
- index 5520c93..a6f47a7 100644
- import React, { Fragment, useState, useEffect, useRef } from "react";
- import { Card, Col, Form, Row, Button, Spinner, Badge } from "react-bootstrap";
- import Pageheader from "../../components/pageheader/pageheader";
- import { useNavigate } from "react-router-dom";
- import { toast } from "react-toastify";
- import { horseService, type HorseRacingPlatform } from "../../../../services/api/horseService";
- import { countryService, type Country } from "../../../../services/api/countryService";
- 
- const UpdateCountry: React.FC = () => {
- const navigate = useNavigate();
- setSelectedCountries([]);
- }
- };
- 
- const handleRemoveCountry = (countryId: string) => {
- setSelectedCountries(selectedCountries.filter(c => c._id !== countryId));

+ diff --git a/src/modules/horse/pages/Platform/UpdateCountry.tsx b/src/modules/horse/pages/Platform/UpdateCountry.tsx
+ index 5520c93..a6f47a7 100644
+ import React, { Fragment, useState, useEffect, useRef } from "react";
+ import { Card, Col, Form, Row, Badge } from "react-bootstrap";
+ import Pageheader from "../../components/pageheader/pageheader";
+ import { useNavigate } from "react-router-dom";
+ import { toast } from "react-toastify";
+ import { horseService, type HorseRacingPlatform } from "../../../../services/api/horseService";
+ import { countryService, type Country } from "../../../../services/api/countryService";
+ import "../../styles/horsespages.css";
+ import HorseActionButton from "../../components/actions/HorseActionButton";
+ 
+ const UpdateCountry: React.FC = () => {
+ const navigate = useNavigate();
+ setSelectedCountries([]);
+ }
+ };
+   

- 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..."

+ 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"

- diff --git a/src/modules/horse/pages/Race/CreateRaces.tsx b/src/modules/horse/pages/Race/CreateRaces.tsx
- index 3af5223..e660540 100644
- import React, { Fragment, useState, useEffect } from "react";
- import { Card, Col, Form, Row, Button, Spinner } from "react-bootstrap";
- import Pageheader from "../../components/pageheader/pageheader";
- import { useNavigate, useParams } from "react-router-dom";
- 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"

+ diff --git a/src/modules/horse/pages/Race/CreateRaces.tsx b/src/modules/horse/pages/Race/CreateRaces.tsx
+ index 3af5223..e660540 100644
+ import React, { Fragment, useState, useEffect } from "react";
+ import { Card, Col, Form, Row } from "react-bootstrap";
+ import Pageheader from "../../components/pageheader/pageheader";
+ import { useNavigate, useParams } from "react-router-dom";
+ import { toast } from "react-toastify";
+ import { raceService } from "../../../../services/api/raceService";
+ import { eventService, type Event } from "../../../../services/api/eventService";
+ import "../../styles/horsespages.css";
+ import HorseActionButton from "../../components/actions/HorseActionButton";
+ 
+ interface CreateRaceForm {
+ event_id: string;
+ <Col md={6}>
+ <Form.Group>
+ <Form.Label>Status</Form.Label>
+                       <div className="form-check form-switch horse-form-switch">

- diff --git a/src/modules/horse/pages/Race/stats.module.css b/src/modules/horse/pages/Race/stats.module.css
- index 982b42d..0aeb2c4 100644
- }
- 
- .marketCard {
-   min-width: 220px;
-   max-width: 280px;
- background: #ffffff;
- border: 1px solid #e5e7eb;
-   border-radius: 14px;
- color: #111827;
- box-shadow: 0 4px 16px rgba(15, 23, 42, 0.05);
-   padding: 12px;
- cursor: pointer;
- transition: all 0.2s;
- }
- .betsTable thead tr {
- background: #f8fafc;

+ diff --git a/src/modules/horse/pages/Race/stats.module.css b/src/modules/horse/pages/Race/stats.module.css
+ index 982b42d..0aeb2c4 100644
+ }
+ 
+ .marketCard {
+   min-width: 180px;
+   max-width: 220px;
+ background: #ffffff;
+ border: 1px solid #e5e7eb;
+   border-radius: 12px;
+ color: #111827;
+ box-shadow: 0 4px 16px rgba(15, 23, 42, 0.05);
+   padding: 10px;
+ cursor: pointer;
+ transition: all 0.2s;
+ }
+ .betsTable thead tr {
+ background: #f8fafc;

- diff --git a/src/modules/horse/pages/Race/stats.tsx b/src/modules/horse/pages/Race/stats.tsx
- index 50a6040..f83e6ce 100644
- return {
- id: bet._id || bet.id,
- username: bet.username || bet.user?.username || '-',
-         phone: bet.phone || bet.user?.phone || '-',
- marketName: bet.marketName || bet.market_name || '-',
- oddsType: oddsType,
- oddsRequest: bet.oddsRequest || bet.odds_request || bet.requestedOdds || '-',
-         oddsMatched: bet.oddsMatched || bet.odds_matched || bet.matchedOdds || '-',
- betAmount: bet.betAmount || bet.bet_amount || bet.stake || '-',
-         returnAmount: bet.returnAmount || bet.return_amount || bet.potentialReturn || '-',
-         ipAddress: bet.ipAddress || bet.ip_address || bet.ip || '-',
-         createdAt: bet.createdAt ? new Date(bet.createdAt).toLocaleString() : '-',
-         marketIdLabel: bet.marketId || bet.market_id || '-',
- };
- });
- }, [betRows]);

+ diff --git a/src/modules/horse/pages/Race/stats.tsx b/src/modules/horse/pages/Race/stats.tsx
+ index 50a6040..f83e6ce 100644
+ return {
+ id: bet._id || bet.id,
+ username: bet.username || bet.user?.username || '-',
+ marketName: bet.marketName || bet.market_name || '-',
+ oddsType: oddsType,
+ oddsRequest: bet.oddsRequest || bet.odds_request || bet.requestedOdds || '-',
+ betAmount: bet.betAmount || bet.bet_amount || bet.stake || '-',
+ };
+ });
+ }, [betRows]);
+ <Card.Body className="p-3 p-md-4">
+ <div className="d-flex flex-column flex-lg-row align-items-lg-center justify-content-between gap-3 pb-3" style={{ borderBottom: "1px solid #e5e7eb" }}>
+ <div>
+               {/* <div className="d-flex align-items-center gap-2 flex-wrap">
+ <h4 className="mb-0 fw-semibold" style={{ color: "#111827" }}>Race Market Stats</h4>
+ {selectedMarket && (

- diff --git a/src/modules/horse/styles/horsespages.css b/src/modules/horse/styles/horsespages.css
- new file mode 100644
- index 0000000..601aaa1

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

- diff --git a/src/pages/commonpages.css b/src/pages/commonpages.css
- new file mode 100644
- index 0000000..ad28c03

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

- 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() {

+ 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() {

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

+ 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 ? (

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

+ 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 ? (

- diff --git a/src/pages/Races/stats.css b/src/pages/Races/stats.css
- index d5d4cf6..3a8cda3 100644
- .stats-page {
- background: #ffffff;
- border: 1px solid #e5e7eb;
-   border-radius: 18px;
-   box-shadow: 0 12px 32px rgba(15, 23, 42, 0.08);
- overflow: hidden;
- }
- 
- .stats-header {
- border-bottom: 1px solid #e5e7eb;
- }
- 
- .stats-heading {
- color: #111827;
- }
- 

+ diff --git a/src/pages/Races/stats.css b/src/pages/Races/stats.css
+ index d5d4cf6..3a8cda3 100644
+ .stats-page {
+ background: #ffffff;
+ border: 1px solid #e5e7eb;
+   border-radius: 16px;
+   box-shadow: 0 10px 24px rgba(15, 23, 42, 0.07);
+ overflow: hidden;
+ }
+ 
+ .stats-header {
+ border-bottom: 1px solid #e5e7eb;
+   padding-bottom: 12px;
+ }
+ 
+ .stats-heading {
+ color: #111827;
+   font-size: 20px;

- diff --git a/src/pages/Races/stats.tsx b/src/pages/Races/stats.tsx
- index 383c09b..6023f03 100644
- type BetRow = {
- id: string;
- username: string;
-   phone: string;
-   betStatus: string;
- oddsType: string;
- oddsRequest: string;
-   oddsMatched: string;
- betAmount: string;
-   returnAmount: string;
-   ipAddress: string;
-   createdAt: string;
-   marketIdLabel: string;
- };
- 
- const toNullableNumber = (value: string | number | null | undefined): number | null => {

+ diff --git a/src/pages/Races/stats.tsx b/src/pages/Races/stats.tsx
+ index 383c09b..6023f03 100644
+ type BetRow = {
+ id: string;
+ username: string;
+   marketName: string;
+ oddsType: string;
+ oddsRequest: string;
+ betAmount: string;
+ };
+ 
+ const toNullableNumber = (value: string | number | null | undefined): number | null => {
+ const mapBetRow = (bet: BetApiRow, index: number): BetRow => ({
+ id: String(bet._id ?? index),
+ username: formatTextValue(bet.username),
+   marketName: formatTextValue(bet.market_name),
+ oddsType: formatTextValue(bet.odds_type),
+ oddsRequest: formatTextValue(bet.odds_request),

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

+ 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 ? (

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

+ 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">

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

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

- 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: {

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