base commit

client/src/pages/home/ui/HomePage.tsx

@@ -22,9 +22,11 @@ import { useQuery } from '@tanstack/react-query'
 import { fetchCategories, fetchPublicProducts } from '@/entities/product/api/product-api'
 import { ProductCard } from '@/entities/product/ui/ProductCard'
 import { ToggleCartIcon } from '@/features/cart/toggle-cart-icon'
+import { ReviewsBlock } from '@/widgets/reviews-block'
 
 export function HomePage() {
   const [categorySlug, setCategorySlug] = useState<string>('')
+  const [availability, setAvailability] = useState<'all' | 'in_stock' | 'made_to_order'>('all')
   const [qInput, setQInput] = useState('')
   const [q, setQ] = useState('')
   const [moreOpen, setMoreOpen] = useState(false)
@@ -54,6 +56,7 @@ export function HomePage() {
       'public',
       {
         categorySlug: categorySlug || 'all',
+        availability,
         q,
         sort,
         page,
@@ -69,6 +72,7 @@ export function HomePage() {
       }
       return fetchPublicProducts({
         categorySlug: categorySlug || undefined,
+        availability: availability === 'all' ? undefined : availability,
         q: q || undefined,
         sort: sort || '',
         page,
@@ -155,6 +159,52 @@ export function HomePage() {
           />
         </Stack>
 
+        <Paper
+          variant="outlined"
+          sx={{
+            p: 1.5,
+            borderRadius: 2,
+            bgcolor: 'background.paper',
+            display: 'flex',
+            flexDirection: { xs: 'column', sm: 'row' },
+            gap: 1.5,
+            alignItems: { sm: 'center' },
+            justifyContent: 'space-between',
+          }}
+        >
+          <Box>
+            <Typography variant="subtitle2">Наличие</Typography>
+            <Typography variant="caption" color="text.secondary">
+              Быстрый фильтр по наличию
+            </Typography>
+          </Box>
+
+          <ToggleButtonGroup
+            exclusive
+            size="small"
+            value={availability}
+            onChange={(_, v) => {
+              if (v === 'all' || v === 'in_stock' || v === 'made_to_order') {
+                setAvailability(v)
+                setPage(1)
+              }
+            }}
+            sx={{
+              alignSelf: { xs: 'flex-start', sm: 'auto' },
+              '& .MuiToggleButton-root': { px: 2, fontWeight: 700, letterSpacing: 0.2, textTransform: 'none' },
+              '& .MuiToggleButton-root.Mui-selected': {
+                bgcolor: 'primary.main',
+                color: 'primary.contrastText',
+                '&:hover': { bgcolor: 'primary.dark' },
+              },
+            }}
+          >
+            <ToggleButton value="all">Все</ToggleButton>
+            <ToggleButton value="in_stock">В наличии</ToggleButton>
+            <ToggleButton value="made_to_order">Под заказ</ToggleButton>
+          </ToggleButtonGroup>
+        </Paper>
+
         <Stack
           direction={{ xs: 'column', sm: 'row' }}
           spacing={1.5}
@@ -167,6 +217,7 @@ export function HomePage() {
             variant="outlined"
             onClick={() => {
               setCategorySlug('')
+              setAvailability('all')
               setQInput('')
               setSort('')
               setPriceMinRub('')
@@ -312,22 +363,37 @@ export function HomePage() {
           <Grid container spacing={2}>
             {products.map((p) => (
               <Grid size={{ xs: 12, sm: 6, md: 4 }} key={p.id}>
-                <ProductCard product={p} mediaHeight={mediaHeight} actions={<ToggleCartIcon productId={p.id} />} />
+                <ProductCard
+                  product={p}
+                  mediaHeight={mediaHeight}
+                  actions={
+                    <ToggleCartIcon
+                      productId={p.id}
+                      disabledReason={p.inStock && p.quantity === 0 ? 'Нет в наличии' : null}
+                    />
+                  }
+                />
               </Grid>
             ))}
           </Grid>
 
-          <Stack direction="row" sx={{ mt: 3, justifyContent: 'center' }}>
-            <Pagination
-              page={page}
-              count={totalPages}
-              onChange={(_, v) => setPage(v)}
-              color="primary"
-              shape="rounded"
-              showFirstButton
-              showLastButton
-            />
-          </Stack>
+          {totalPages > 1 && (
+            <Stack direction="row" sx={{ mt: 3, justifyContent: 'center' }}>
+              <Pagination
+                page={page}
+                count={totalPages}
+                onChange={(_, v) => setPage(v)}
+                color="primary"
+                shape="rounded"
+                showFirstButton
+                showLastButton
+              />
+            </Stack>
+          )}
+
+          <Box sx={{ mt: 4 }}>
+            <ReviewsBlock />
+          </Box>
         </>
       )}
     </Box>