feat: make customer-dashboard page

package.json

@@ -16,6 +16,7 @@
     "@radix-ui/react-dropdown-menu": "^2.1.11",
     "@radix-ui/react-label": "^2.1.4",
     "@radix-ui/react-navigation-menu": "^1.2.10",
+    "@radix-ui/react-popover": "^1.1.11",
     "@radix-ui/react-select": "^2.2.2",
     "@radix-ui/react-slot": "^1.2.0",
     "@radix-ui/react-tabs": "^1.1.8",
@@ -24,12 +25,14 @@
     "aos": "^2.3.4",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
+    "date-fns": "^4.1.0",
     "embla-carousel-autoplay": "^8.6.0",
     "embla-carousel-react": "^8.6.0",
     "lucide-react": "^0.501.0",
     "next": "15.3.1",
     "next-themes": "^0.4.6",
     "react": "^19.0.0",
+    "react-day-picker": "8.10.1",
     "react-dom": "^19.0.0",
     "react-hook-form": "^7.56.1",
     "react-redux": "^9.2.0",

pnpm-lock.yaml

@@ -26,6 +26,9 @@ importers:
       '@radix-ui/react-navigation-menu':
         specifier: ^1.2.10
         version: 1.2.10(@types/react-dom@19.1.2(@types/react@19.1.2))(@types/react@19.1.2)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
+      '@radix-ui/react-popover':
+        specifier: ^1.1.11
+        version: 1.1.11(@types/react-dom@19.1.2(@types/react@19.1.2))(@types/react@19.1.2)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
       '@radix-ui/react-select':
         specifier: ^2.2.2
         version: 2.2.2(@types/react-dom@19.1.2(@types/react@19.1.2))(@types/react@19.1.2)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
@@ -50,6 +53,9 @@ importers:
       clsx:
         specifier: ^2.1.1
         version: 2.1.1
+      date-fns:
+        specifier: ^4.1.0
+        version: 4.1.0
       embla-carousel-autoplay:
         specifier: ^8.6.0
         version: 8.6.0(embla-carousel@8.6.0)
@@ -68,6 +74,9 @@ importers:
       react:
         specifier: ^19.0.0
         version: 19.1.0
+      react-day-picker:
+        specifier: 8.10.1
+        version: 8.10.1(date-fns@4.1.0)(react@19.1.0)
       react-dom:
         specifier: ^19.0.0
         version: 19.1.0(react@19.1.0)
@@ -681,6 +690,19 @@ packages:
       '@types/react-dom':
         optional: true
 
+  '@radix-ui/react-popover@1.1.11':
+    resolution: {integrity: sha512-yFMfZkVA5G3GJnBgb2PxrrcLKm1ZLWXrbYVgdyTl//0TYEIHS9LJbnyz7WWcZ0qCq7hIlJZpRtxeSeIG5T5oJw==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
   '@radix-ui/react-popper@1.2.4':
     resolution: {integrity: sha512-3p2Rgm/a1cK0r/UVkx5F/K9v/EplfjAeIFCGOPYPO4lZ0jtg4iSQXt/YGTSLWaf4x7NG6Z4+uKFcylcTZjeqDA==}
     peerDependencies:
@@ -1370,6 +1392,9 @@ packages:
     resolution: {integrity: sha512-BS8PfmtDGnrgYdOonGZQdLZslWIeCGFP9tpan0hi1Co2Zr2NKADsvGYA8XxuG/4UWgJ6Cjtv+YJnB6MM69QGlQ==}
     engines: {node: '>= 0.4'}
 
+  date-fns@4.1.0:
+    resolution: {integrity: sha512-Ukq0owbQXxa/U3EGtsdVBkR1w7KOQ5gIBqdH2hkvknzZPYvBxb/aa6E8L7tmjFtkwZBu3UXBbjIgPo/Ez4xaNg==}
+
   debug@3.2.7:
     resolution: {integrity: sha512-CFjzYYAi4ThfiQvizrFQevTTXHtnCqWfe7x1AhgEscTz6ZbLbfoLRLPugTQyBth6f8ZERVUSyWHFD/7Wu4t1XQ==}
     peerDependencies:
@@ -2261,6 +2286,12 @@ packages:
   queue-microtask@1.2.3:
     resolution: {integrity: sha512-NuaNSa6flKT5JaSYQzJok04JzTL1CA6aGhv5rfLW3PgqA+M2ChpZQnAC8h8i4ZFkBS8X5RqkDBHA7r4hej3K9A==}
 
+  react-day-picker@8.10.1:
+    resolution: {integrity: sha512-TMx7fNbhLk15eqcMt+7Z7S2KF7mfTId/XJDjKE8f+IUcFn0l08/kI4FiYTL/0yuOLmEcbR4Fwe3GJf/NiiMnPA==}
+    peerDependencies:
+      date-fns: ^2.28.0 || ^3.0.0
+      react: ^16.8.0 || ^17.0.0 || ^18.0.0
+
   react-dom@19.1.0:
     resolution: {integrity: sha512-Xs1hdnE+DyKgeHJeJznQmYMIBG3TKIHJJT95Q58nHLSrElKlGQqDTR2HQ9fx5CN/Gk6Vh/kupBTDLU11/nDk/g==}
     peerDependencies:
@@ -3121,6 +3152,29 @@ snapshots:
       '@types/react': 19.1.2
       '@types/react-dom': 19.1.2(@types/react@19.1.2)
 
+  '@radix-ui/react-popover@1.1.11(@types/react-dom@19.1.2(@types/react@19.1.2))(@types/react@19.1.2)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)':
+    dependencies:
+      '@radix-ui/primitive': 1.1.2
+      '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.1.2)(react@19.1.0)
+      '@radix-ui/react-context': 1.1.2(@types/react@19.1.2)(react@19.1.0)
+      '@radix-ui/react-dismissable-layer': 1.1.7(@types/react-dom@19.1.2(@types/react@19.1.2))(@types/react@19.1.2)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
+      '@radix-ui/react-focus-guards': 1.1.2(@types/react@19.1.2)(react@19.1.0)
+      '@radix-ui/react-focus-scope': 1.1.4(@types/react-dom@19.1.2(@types/react@19.1.2))(@types/react@19.1.2)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
+      '@radix-ui/react-id': 1.1.1(@types/react@19.1.2)(react@19.1.0)
+      '@radix-ui/react-popper': 1.2.4(@types/react-dom@19.1.2(@types/react@19.1.2))(@types/react@19.1.2)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
+      '@radix-ui/react-portal': 1.1.6(@types/react-dom@19.1.2(@types/react@19.1.2))(@types/react@19.1.2)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
+      '@radix-ui/react-presence': 1.1.4(@types/react-dom@19.1.2(@types/react@19.1.2))(@types/react@19.1.2)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
+      '@radix-ui/react-primitive': 2.1.0(@types/react-dom@19.1.2(@types/react@19.1.2))(@types/react@19.1.2)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
+      '@radix-ui/react-slot': 1.2.0(@types/react@19.1.2)(react@19.1.0)
+      '@radix-ui/react-use-controllable-state': 1.2.2(@types/react@19.1.2)(react@19.1.0)
+      aria-hidden: 1.2.4
+      react: 19.1.0
+      react-dom: 19.1.0(react@19.1.0)
+      react-remove-scroll: 2.6.3(@types/react@19.1.2)(react@19.1.0)
+    optionalDependencies:
+      '@types/react': 19.1.2
+      '@types/react-dom': 19.1.2(@types/react@19.1.2)
+
   '@radix-ui/react-popper@1.2.4(@types/react-dom@19.1.2(@types/react@19.1.2))(@types/react@19.1.2)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)':
     dependencies:
       '@floating-ui/react-dom': 2.1.2(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
@@ -3814,6 +3868,8 @@ snapshots:
       es-errors: 1.3.0
       is-data-view: 1.0.2
 
+  date-fns@4.1.0: {}
+
   debug@3.2.7:
     dependencies:
       ms: 2.1.3
@@ -4782,6 +4838,11 @@ snapshots:
 
   queue-microtask@1.2.3: {}
 
+  react-day-picker@8.10.1(date-fns@4.1.0)(react@19.1.0):
+    dependencies:
+      date-fns: 4.1.0
+      react: 19.1.0
+
   react-dom@19.1.0(react@19.1.0):
     dependencies:
       react: 19.1.0

src/app/(dashboard)/customer-dashboard/page.tsx

@@ -0,0 +1,110 @@
+import { ArrowUpRight, Clock, CreditCard, LogOut, User } from 'lucide-react';
+
+import { Button } from '@/shared/shadcn-ui/button';
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from '@/shared/shadcn-ui/card';
+
+import { TransactionsTable } from '@/widgets/transactions-table';
+
+// Sample customer data
+const customerData = {
+  firstName: 'Алишер',
+  lastName: 'Рахмонов',
+  passportNumber: 'A12345678',
+  bonusPoints: 1250,
+  cardNumber: '5678-9012-3456-7890',
+  expiryDate: '12/2025',
+  registrationDate: '15.06.2020',
+};
+
+export default function CustomerDashboard() {
+  return (
+    <div className='flex min-h-screen flex-col'>
+      <main className='flex-1 py-10'>
+        <div className='container mx-auto max-w-6xl'>
+          <div className='mb-8 flex items-center justify-between'>
+            <h1 className='text-3xl font-bold'>Личный кабинет</h1>
+            <Button variant='outline' className='gap-2'>
+              <LogOut className='h-4 w-4' />
+              Выйти
+            </Button>
+          </div>
+
+          <div className='mb-10 grid gap-3 md:grid-cols-3 md:gap-6'>
+            {/* Bonus Card */}
+            <Card className='bg-gradient-to-br from-red-600 to-red-800 text-white'>
+              <CardHeader>
+                <CardTitle className='flex items-center gap-2'>
+                  <CreditCard className='h-5 w-5' />
+                  Бонусная карта
+                </CardTitle>
+                <CardDescription className='text-white/80'>
+                  Ваши накопленные бонусы
+                </CardDescription>
+              </CardHeader>
+              <CardContent>
+                <div className='text-center'>
+                  <p className='mb-2 text-4xl font-bold'>
+                    {customerData.bonusPoints}
+                  </p>
+                  <p className='text-white/80'>бонусных баллов</p>
+                </div>
+                <div className='mt-6 flex items-center justify-between'>
+                  <div className='flex items-center gap-1 text-sm text-white/80'>
+                    <Clock className='h-4 w-4' />
+                    <span>Действует до: 31.12.2023</span>
+                  </div>
+                  <ArrowUpRight className='h-5 w-5 text-white/60' />
+                </div>
+              </CardContent>
+            </Card>
+            {/* Customer Card */}
+            <Card className='md:col-span-2'>
+              <CardHeader className='pb-2'>
+                <CardTitle className='flex items-center gap-2'>
+                  <User className='h-5 w-5 text-red-600' />
+                  Информация о клиенте
+                </CardTitle>
+              </CardHeader>
+              <CardContent>
+                <div className='grid gap-6 md:grid-cols-2'>
+                  <div>
+                    <div className='mb-4 space-y-1'>
+                      <p className='text-sm text-gray-500'>ФИО</p>
+                      <p className='font-medium'>
+                        {customerData.firstName} {customerData.lastName}
+                      </p>
+                    </div>
+                    <div className='space-y-1'>
+                      <p className='text-sm text-gray-500'>Дата регистрации</p>
+                      <p className='font-medium'>
+                        {customerData.registrationDate}
+                      </p>
+                    </div>
+                  </div>
+                  <div>
+                    <div className='mb-4 space-y-1'>
+                      <p className='text-sm text-gray-500'>Номер карты</p>
+                      <p className='font-medium'>{customerData.cardNumber}</p>
+                    </div>
+                    <div className='mb-4 space-y-1'>
+                      <p className='text-sm text-gray-500'>Срок действия</p>
+                      <p className='font-medium'>{customerData.expiryDate}</p>
+                    </div>
+                  </div>
+                </div>
+              </CardContent>
+            </Card>
+          </div>
+
+          <TransactionsTable />
+        </div>
+      </main>
+    </div>
+  );
+}

src/shared/shadcn-ui/calendar.tsx

@@ -0,0 +1,70 @@
+'use client';
+
+import { ChevronLeft, ChevronRight } from 'lucide-react';
+import * as React from 'react';
+import { DayPicker } from 'react-day-picker';
+
+import { cn } from '@/shared/lib/utils';
+import { buttonVariants } from '@/shared/shadcn-ui/button';
+
+export type CalendarProps = React.ComponentProps<typeof DayPicker>;
+
+function Calendar({
+  className,
+  classNames,
+  showOutsideDays = true,
+  ...props
+}: CalendarProps) {
+  return (
+    <DayPicker
+      showOutsideDays={showOutsideDays}
+      className={cn('p-3', className)}
+      classNames={{
+        months: 'flex flex-col sm:flex-row space-y-4 sm:space-x-4 sm:space-y-0',
+        month: 'space-y-4',
+        caption: 'flex justify-center pt-1 relative items-center',
+        caption_label: 'text-sm font-medium',
+        nav: 'space-x-1 flex items-center',
+        nav_button: cn(
+          buttonVariants({ variant: 'outline' }),
+          'h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100',
+        ),
+        nav_button_previous: 'absolute left-1',
+        nav_button_next: 'absolute right-1',
+        table: 'w-full border-collapse space-y-1',
+        head_row: 'flex',
+        head_cell:
+          'text-muted-foreground rounded-md w-9 font-normal text-[0.8rem]',
+        row: 'flex w-full mt-2',
+        cell: 'h-9 w-9 text-center text-sm p-0 relative [&:has([aria-selected].day-range-end)]:rounded-r-md [&:has([aria-selected].day-outside)]:bg-accent/50 [&:has([aria-selected])]:bg-accent first:[&:has([aria-selected])]:rounded-l-md last:[&:has([aria-selected])]:rounded-r-md focus-within:relative focus-within:z-20',
+        day: cn(
+          buttonVariants({ variant: 'ghost' }),
+          'h-9 w-9 p-0 font-normal aria-selected:opacity-100',
+        ),
+        day_range_end: 'day-range-end',
+        day_selected:
+          'bg-primary text-primary-foreground hover:bg-primary hover:text-primary-foreground focus:bg-primary focus:text-primary-foreground',
+        day_today: 'bg-accent text-accent-foreground',
+        day_outside:
+          'day-outside text-muted-foreground aria-selected:bg-accent/50 aria-selected:text-muted-foreground',
+        day_disabled: 'text-muted-foreground opacity-50',
+        day_range_middle:
+          'aria-selected:bg-accent aria-selected:text-accent-foreground',
+        day_hidden: 'invisible',
+        ...classNames,
+      }}
+      components={{
+        IconLeft: ({ className, ...props }) => (
+          <ChevronLeft className={cn('h-4 w-4', className)} {...props} />
+        ),
+        IconRight: ({ className, ...props }) => (
+          <ChevronRight className={cn('h-4 w-4', className)} {...props} />
+        ),
+      }}
+      {...props}
+    />
+  );
+}
+Calendar.displayName = 'Calendar';
+
+export { Calendar };

src/shared/shadcn-ui/popover.tsx

@@ -0,0 +1,30 @@
+'use client';
+
+import { cn } from '@/shared/lib/utils';
+import * as PopoverPrimitive from '@radix-ui/react-popover';
+import * as React from 'react';
+
+const Popover = PopoverPrimitive.Root;
+
+const PopoverTrigger = PopoverPrimitive.Trigger;
+
+const PopoverContent = React.forwardRef<
+  React.ComponentRef<typeof PopoverPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof PopoverPrimitive.Content>
+>(({ className, align = 'center', sideOffset = 4, ...props }, ref) => (
+  <PopoverPrimitive.Portal>
+    <PopoverPrimitive.Content
+      ref={ref}
+      align={align}
+      sideOffset={sideOffset}
+      className={cn(
+        'bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-72 origin-[--radix-popover-content-transform-origin] rounded-md border p-4 shadow-md outline-none',
+        className,
+      )}
+      {...props}
+    />
+  </PopoverPrimitive.Portal>
+));
+PopoverContent.displayName = PopoverPrimitive.Content.displayName;
+
+export { Popover, PopoverTrigger, PopoverContent };

src/shared/shadcn-ui/table.tsx

@@ -0,0 +1,117 @@
+import * as React from 'react';
+
+import { cn } from '@/shared/lib/utils';
+
+const Table = React.forwardRef<
+  HTMLTableElement,
+  React.HTMLAttributes<HTMLTableElement>
+>(({ className, ...props }, ref) => (
+  <div className='relative w-full overflow-auto'>
+    <table
+      ref={ref}
+      className={cn('w-full caption-bottom text-sm', className)}
+      {...props}
+    />
+  </div>
+));
+Table.displayName = 'Table';
+
+const TableHeader = React.forwardRef<
+  HTMLTableSectionElement,
+  React.HTMLAttributes<HTMLTableSectionElement>
+>(({ className, ...props }, ref) => (
+  <thead ref={ref} className={cn('[&_tr]:border-b', className)} {...props} />
+));
+TableHeader.displayName = 'TableHeader';
+
+const TableBody = React.forwardRef<
+  HTMLTableSectionElement,
+  React.HTMLAttributes<HTMLTableSectionElement>
+>(({ className, ...props }, ref) => (
+  <tbody
+    ref={ref}
+    className={cn('[&_tr:last-child]:border-0', className)}
+    {...props}
+  />
+));
+TableBody.displayName = 'TableBody';
+
+const TableFooter = React.forwardRef<
+  HTMLTableSectionElement,
+  React.HTMLAttributes<HTMLTableSectionElement>
+>(({ className, ...props }, ref) => (
+  <tfoot
+    ref={ref}
+    className={cn(
+      'bg-muted/50 border-t font-medium [&>tr]:last:border-b-0',
+      className,
+    )}
+    {...props}
+  />
+));
+TableFooter.displayName = 'TableFooter';
+
+const TableRow = React.forwardRef<
+  HTMLTableRowElement,
+  React.HTMLAttributes<HTMLTableRowElement>
+>(({ className, ...props }, ref) => (
+  <tr
+    ref={ref}
+    className={cn(
+      'hover:bg-muted/50 data-[state=selected]:bg-muted border-b transition-colors',
+      className,
+    )}
+    {...props}
+  />
+));
+TableRow.displayName = 'TableRow';
+
+const TableHead = React.forwardRef<
+  HTMLTableCellElement,
+  React.ThHTMLAttributes<HTMLTableCellElement>
+>(({ className, ...props }, ref) => (
+  <th
+    ref={ref}
+    className={cn(
+      'text-muted-foreground h-12 px-4 text-left align-middle font-medium [&:has([role=checkbox])]:pr-0',
+      className,
+    )}
+    {...props}
+  />
+));
+TableHead.displayName = 'TableHead';
+
+const TableCell = React.forwardRef<
+  HTMLTableCellElement,
+  React.TdHTMLAttributes<HTMLTableCellElement>
+>(({ className, ...props }, ref) => (
+  <td
+    ref={ref}
+    className={cn('p-4 align-middle [&:has([role=checkbox])]:pr-0', className)}
+    {...props}
+  />
+));
+TableCell.displayName = 'TableCell';
+
+const TableCaption = React.forwardRef<
+  HTMLTableCaptionElement,
+  React.HTMLAttributes<HTMLTableCaptionElement>
+>(({ className, ...props }, ref) => (
+  <caption
+    ref={ref}
+    className={cn('text-muted-foreground mt-4 text-sm', className)}
+    {...props}
+  />
+));
+TableCaption.displayName = 'TableCaption';
+
+export {
+  Table,
+  TableHeader,
+  TableBody,
+  TableFooter,
+  TableHead,
+  TableRow,
+  TableCell,
+  TableCaption,
+};

src/widgets/transactions-table.tsx

@@ -0,0 +1,216 @@
+'use client';
+
+import { format, subMonths } from 'date-fns';
+import { ru } from 'date-fns/locale';
+import { CalendarIcon } from 'lucide-react';
+import { useState } from 'react';
+
+import { Button } from '@/shared/shadcn-ui/button';
+import { Calendar } from '@/shared/shadcn-ui/calendar';
+import { Label } from '@/shared/shadcn-ui/label';
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from '@/shared/shadcn-ui/popover';
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from '@/shared/shadcn-ui/table';
+
+// Sample customer data
+const customerData = {
+  firstName: 'Алишер',
+  lastName: 'Рахмонов',
+  passportNumber: 'A12345678',
+  bonusPoints: 1250,
+  cardNumber: '5678-9012-3456-7890',
+  expiryDate: '12/2025',
+  registrationDate: '15.06.2020',
+};
+
+// Sample transaction data
+const generateTransactions = () => {
+  const stations = [
+    'АЗС Душанбе-Центр',
+    'АЗС Душанбе-Запад',
+    'АЗС Душанбе-Восток',
+    'АЗС Худжанд',
+    'АЗС Куляб',
+  ];
+
+  const products = [
+    { name: 'ДТ', price: 8.5 },
+    { name: 'АИ-92', price: 9.2 },
+    { name: 'АИ-95', price: 10.5 },
+    { name: 'Z-100 Power', price: 11.8 },
+    { name: 'Пропан', price: 6.3 },
+  ];
+
+  const transactions = [];
+
+  // Generate 50 random transactions over the last 6 months
+  for (let i = 0; i < 50; i++) {
+    const date = subMonths(new Date(), Math.random() * 6);
+    const station = stations[Math.floor(Math.random() * stations.length)];
+    const product = products[Math.floor(Math.random() * products.length)];
+    const quantity = Math.floor(Math.random() * 40) + 10; // 10-50 liters
+    const cost = product.price;
+    const total = quantity * cost;
+
+    transactions.push({
+      id: i + 1,
+      date,
+      station,
+      product: product.name,
+      quantity,
+      cost,
+      total,
+    });
+  }
+
+  // Sort by date (newest first)
+  return transactions.sort((a, b) => b.date.getTime() - a.date.getTime());
+};
+
+const transactions = generateTransactions();
+
+export const TransactionsTable = () => {
+  const [startDate, setStartDate] = useState<Date | undefined>(
+    subMonths(new Date(), 1),
+  );
+  const [endDate, setEndDate] = useState<Date | undefined>(new Date());
+  const [filteredTransactions, setFilteredTransactions] =
+    useState(transactions);
+
+  // Filter transactions by date range
+  const filterTransactions = () => {
+    if (!startDate || !endDate) return;
+
+    const filtered = transactions.filter((transaction) => {
+      const transactionDate = new Date(transaction.date);
+      return transactionDate >= startDate && transactionDate <= endDate;
+    });
+
+    setFilteredTransactions(filtered);
+  };
+
+  return (
+    <div className='space-y-6'>
+      <div className='flex flex-col items-start justify-between gap-4 md:flex-row md:items-center'>
+        <h2 className='text-2xl font-bold'>История операций</h2>
+
+        <div className='flex w-full flex-col gap-4 md:w-auto md:flex-row'>
+          <div className='grid grid-cols-2 gap-2'>
+            <div className='flex items-center gap-2'>
+              <Label htmlFor='start-date'>От</Label>
+              <Popover>
+                <PopoverTrigger asChild>
+                  <Button
+                    variant='outline'
+                    className='w-full justify-start text-left font-normal'
+                  >
+                    <CalendarIcon className='mr-2 h-4 w-4' />
+                    {startDate
+                      ? format(startDate, 'PP', { locale: ru })
+                      : 'Выберите дату'}
+                  </Button>
+                </PopoverTrigger>
+                <PopoverContent className='w-auto p-0'>
+                  <Calendar
+                    mode='single'
+                    selected={startDate}
+                    onSelect={setStartDate}
+                    initialFocus
+                  />
+                </PopoverContent>
+              </Popover>
+            </div>
+
+            <div className='flex items-center gap-2'>
+              <Label htmlFor='end-date'>До</Label>
+              <Popover>
+                <PopoverTrigger asChild>
+                  <Button
+                    variant='outline'
+                    className='w-full justify-start text-left font-normal'
+                  >
+                    <CalendarIcon className='mr-2 h-4 w-4' />
+                    {endDate
+                      ? format(endDate, 'PP', { locale: ru })
+                      : 'Выберите дату'}
+                  </Button>
+                </PopoverTrigger>
+                <PopoverContent className='w-auto p-0'>
+                  <Calendar
+                    mode='single'
+                    selected={endDate}
+                    onSelect={setEndDate}
+                    initialFocus
+                  />
+                </PopoverContent>
+              </Popover>
+            </div>
+          </div>
+
+          <Button
+            className='mt-auto bg-red-600 hover:bg-red-700'
+            onClick={filterTransactions}
+          >
+            Применить
+          </Button>
+        </div>
+      </div>
+
+      <div className='rounded-md border'>
+        <Table>
+          <TableHeader>
+            <TableRow>
+              <TableHead>Дата</TableHead>
+              <TableHead>Станция</TableHead>
+              <TableHead>Продукт</TableHead>
+              <TableHead className='text-right'>Кол-во (л)</TableHead>
+              <TableHead className='text-right'>Стоимость</TableHead>
+              <TableHead className='text-right'>Сумма</TableHead>
+            </TableRow>
+          </TableHeader>
+          <TableBody>
+            {filteredTransactions.length > 0 ? (
+              filteredTransactions.map((transaction) => (
+                <TableRow key={transaction.id}>
+                  <TableCell>
+                    {format(transaction.date, 'dd.MM.yyyy')}
+                  </TableCell>
+                  <TableCell>{transaction.station}</TableCell>
+                  <TableCell>{transaction.product}</TableCell>
+                  <TableCell className='text-right'>
+                    {transaction.quantity}
+                  </TableCell>
+                  <TableCell className='text-right'>
+                    {transaction.cost.toFixed(2)} сомони
+                  </TableCell>
+                  <TableCell className='text-right font-medium'>
+                    {transaction.total.toFixed(2)} сомони
+                  </TableCell>
+                </TableRow>
+              ))
+            ) : (
+              <TableRow>
+                <TableCell
+                  colSpan={6}
+                  className='py-6 text-center text-gray-500'
+                >
+                  Нет операций за выбранный период
+                </TableCell>
+              </TableRow>
+            )}
+          </TableBody>
+        </Table>
+      </div>
+    </div>
+  );
+};