floss-uz · usmonovdev · Nov 5, 2025 · Nov 5, 2025 · Nov 5, 2025 · Nov 6, 2025
diff --git a/index.html b/index.html
@@ -4,7 +4,11 @@
     <meta charset="UTF-8" />
     <link rel="icon" type="image/svg+xml" href="/vite.svg" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>dispatcher-floss</title>
+    <link
+      href="https://fonts.googleapis.com/css2?family=Mona+Sans:ital,wght@0,200..900;1,200..900&display=swap"
+      rel="stylesheet"
+    />
+    <title>Dispatcher FLOSS</title>
   </head>
   <body>
     <div id="root"></div>

diff --git a/package.json b/package.json
@@ -18,11 +18,12 @@
     "@tailwindcss/vite": "^4.1.16",
     "@tanstack/react-query": "^5.90.5",
     "@toolpad/core": "^0.16.0",
-    "axios": "^1.12.2",
+    "axios": "^1.13.2",
     "i18next": "^25.6.0",
     "i18next-browser-languagedetector": "^8.2.0",
     "i18next-http-backend": "^3.0.2",
     "react": "^19.1.1",
+    "react-apexcharts": "^1.8.0",
     "react-dom": "^19.1.1",
     "react-i18next": "^16.1.5",
     "react-icons": "^5.5.0",

diff --git a/src/app/DashboardPage.tsx b/src/app/DashboardPage.tsx
@@ -1,31 +1,9 @@
-import { Button, useColorScheme } from "@mui/material"
-import { useTranslation } from "react-i18next"
+import { DashboardStatsSection } from "@/sections/dashboard/DashboardStatsSection"
 
 export const DashboardPage = () => {
-  // theme
-  const { mode, setMode } = useColorScheme()
-
-  // translate
-  const { t, i18n } = useTranslation()
-  const toggleLang = () => {
-    i18n.changeLanguage(i18n.language === "en" ? "uz" : "en")
-  }
-
   return (
     <div>
-      uy! {JSON.stringify(mode)}
-      <Button onClick={() => setMode(mode === "dark" ? "light" : "dark")}>Hello world</Button>
-      <h1>{t("name")}</h1>
-      <p>til: {i18n.language}</p>
-      <Button variant={"contained"} onClick={toggleLang}>
-        Change
-      </Button>
-      <Button variant={"outlined"} onClick={toggleLang}>
-        change
-      </Button>
-      <Button color={"error"} variant={"text"} onClick={toggleLang}>
-        change
-      </Button>
+      <DashboardStatsSection />
     </div>
   )
 }
diff --git a/src/sections/dashboard/DashboardStatsSection.tsx b/src/sections/dashboard/DashboardStatsSection.tsx
@@ -0,0 +1,47 @@
+import { Grid, useTheme } from "@mui/material"
+import { StatsWidget } from "./DashboardStatsWidget"
+
+export const DashboardStatsSection = () => {
+  const theme = useTheme()
+
+  return (
+    <Grid container spacing={3}>
+      <Grid size={{ xs: 12, md: 4 }}>
+        <StatsWidget
+          title="User count"
+          percent={0.2}
+          total={4876}
+          chart={{
+            colors: [theme.palette.info.main],
+            categories: ["Yanvar", "Fevral", "Mart", "Aprel", "May", "Iyun", "Iyul", "Avgust"],
+            series: [20, 41, 63, 33, 28, 35, 50, 46],
+          }}
+        />
+      </Grid>
+      <Grid size={{ xs: 12, md: 4 }}>
+        <StatsWidget
+          title="Banned count"
+          percent={0}
+          total={221}
+          chart={{
+            colors: [theme.palette.error.main],
+            categories: ["Yanvar", "Fevral", "Mart", "Aprel", "May", "Iyun", "Iyul", "Avgust"],
+            series: [20, 41, 63, 33, 28, 35, 50, 46],
+          }}
+        />
+      </Grid>
+      <Grid size={{ xs: 12, md: 4 }}>
+        <StatsWidget
+          title="Community count"
+          percent={0.1}
+          total={10}
+          chart={{
+            colors: [theme.palette.success.main],
+            categories: ["Yanvar", "Fevral", "Mart", "Aprel", "May", "Iyun", "Iyul", "Avgust"],
+            series: [5, 10, 7, 5, 8, 10, 9, 10],
+          }}
+        />
+      </Grid>
+    </Grid>
+  )
+}
diff --git a/src/sections/dashboard/DashboardStatsWidget.tsx b/src/sections/dashboard/DashboardStatsWidget.tsx
@@ -0,0 +1,88 @@
+import { Chart, ChartOptions } from "@/shared/ui"
+import { Num } from "@/shared/utils/num"
+import { Box, Card, CardProps, useTheme } from "@mui/material"
+
+type Props = CardProps & {
+  title: string
+  total: number
+  percent: number
+  chart: {
+    colors?: string[]
+    categories: string[]
+    series: number[]
+    options?: ChartOptions
+  }
+}
+
+export const StatsWidget = ({ title, percent, total, chart, sx, ...other }: Props) => {
+  const theme = useTheme()
+  const chartColors = chart.colors ?? [theme.palette.primary.main]
+
+  const renderTrending = () => (
+    <Box sx={{ gap: 0.5, display: "flex", alignItems: "center" }}>
+      <Box component="span" sx={{ typography: "subtitle2" }}>
+        {percent > 0 && "+"}
+        {Num.formatPercent(percent)}
+      </Box>
+
+      <Box component="span" sx={{ typography: "body2", color: "text.secondary" }}>
+        last 7 days
+      </Box>
+    </Box>
+  )
+
+  const chartOptions: ChartOptions = {
+    chart: { sparkline: { enabled: true } },
+    colors: chartColors,
+    stroke: { width: 2, curve: "smooth" },
+    tooltip: {
+      y: { formatter: (value) => Num.formatNumber(value) || "-", title: { formatter: () => "" } },
+      x: { formatter: (_, opts) => chart.categories[opts.dataPointIndex] },
+    },
+    xaxis: {
+      categories: chart.categories,
+      labels: { show: false },
+      axisBorder: { show: false },
+      axisTicks: { show: false },
+    },
+    yaxis: {
+      labels: { show: false },
+    },
+    grid: {
+      show: false,
+    },
+    ...chart.options,
+  }
+
+  return (
+    <Card
+      sx={[
+        () => ({
+          p: 3,
+          display: "flex",
+          zIndex: "unset",
+          overflow: "unset",
+          alignItems: "center",
+          borderRadius: 2,
+        }),
+      ]}
+      variant="outlined"
+      {...other}
+    >
+      <Box sx={{ flexGrow: 1 }}>
+        <Box sx={{ typography: "subtitle2" }}>{title}</Box>
+
+        <Box sx={{ mt: 1.5, mb: 1, typography: "h3" }}>{Num.formatNumber(total)}</Box>
+
+        {renderTrending()}
+      </Box>
+
+      <Chart
+        type="bar"
+        options={chartOptions}
+        series={[{ data: chart.series }]}
+        sx={{ width: 80, height: 50 }}
+      />
+    </Card>
+  )
+}
diff --git a/src/shared/config/index.ts b/src/shared/config/index.ts
@@ -1,2 +1,2 @@
-export * from "./muiTheme"
+export * from "./theme/muiTheme"
 export * from "./i18n"
diff --git a/src/shared/config/muiTheme.ts b/src/shared/config/muiTheme.ts
diff --git a/src/shared/config/theme/core/palette.ts b/src/shared/config/theme/core/palette.ts
@@ -0,0 +1,99 @@
+export const grey = {
+  50: "#fafafa",
+  100: "#f5f5f5",
+  200: "#eeeeee",
+  300: "#e0e0e0",
+  400: "#bdbdbd",
+  500: "#9e9e9e",
+  600: "#757575",
+  700: "#616161",
+  800: "#424242",
+  900: "#212121",
+  "500Channel": "#9e9e9e",
+}
+
+export const common = {
+  black: "#000000",
+  white: "#ffffff",
+  blackChannel: "#000000",
+  whiteChannel: "#ffffff",
+}
+
+export const palette = {
+  light: {
+    palette: {
+      primary: {
+        main: "#1976d2",
+        light: "#42a5f5",
+        dark: "#1565c0",
+        contrastText: "#fff",
+      },
+      secondary: {
+        main: "#dc004e",
+        light: "#ff5983",
+        dark: "#9a0036",
+        contrastText: "#fff",
+      },
+      info: {
+        main: "#0288d1",
+        light: "#03a9f4",
+        dark: "#01579b",
+      },
+      success: {
+        main: "#2e7d32",
+        light: "#4caf50",
+        dark: "#1b5e20",
+      },
+      warning: {
+        main: "#ed6c02",
+        light: "#ff9800",
+        dark: "#e65100",
+      },
+      error: {
+        main: "#d32f2f",
+        light: "#ef5350",
+        dark: "#c62828",
+      },
+      grey,
+      common,
+    },
+  },
+  dark: {
+    palette: {
+      primary: {
+        main: "#90caf9",
+        light: "#e3f2fd",
+        dark: "#42a5f5",
+        contrastText: "#000",
+      },
+      secondary: {
+        main: "#f48fb1",
+        light: "#fce4ec",
+        dark: "#ad1457",
+        contrastText: "#000",
+      },
+      info: {
+        main: "#29b6f6",
+        light: "#4fc3f7",
+        dark: "#0288d1",
+      },
+      success: {
+        main: "#66bb6a",
+        light: "#81c784",
+        dark: "#388e3c",
+      },
+      warning: {
+        main: "#ffa726",
+        light: "#ffb74d",
+        dark: "#f57c00",
+      },
+      error: {
+        main: "#ef5350",
+        light: "#e57373",
+        dark: "#c62828",
+      },
+      grey,
+      common,
+    },
+  },
+}
diff --git a/src/shared/config/theme/muiTheme.ts b/src/shared/config/theme/muiTheme.ts
@@ -0,0 +1,21 @@
+import { createTheme } from "@mui/material"
+import { palette } from "./core/palette"
+
+export const muiTheme = createTheme({
+  cssVariables: {
+    colorSchemeSelector: "data-toolpad-color-scheme",
+  },
+  typography: {
+    fontFamily: "Mona Sans, sans-serif",
+  },
+  colorSchemes: palette,
+  breakpoints: {
+    values: {
+      xs: 0,
+      sm: 600,
+      md: 600,
+      lg: 1200,
+      xl: 1536,
+    },
+  },
+})
diff --git a/src/shared/config/theme/types.ts b/src/shared/config/theme/types.ts
@@ -0,0 +1,4 @@
+export type SchemesRecord<T> = {
+  light: T
+  dark: T
+}