update: update ru.json
This commit is contained in:
khadiatullo
parent
bd08e69065
commit
0f5be58093
@ -1,308 +1,5 @@
|
|||||||
'use client';
|
import { CorporateDashboard } from "@/pages-templates/(dashboard)/corporate-dashboard";
|
||||||
|
|
||||||
import { format, subMonths } from 'date-fns';
|
export default function Corporate() {
|
||||||
import { ru } from 'date-fns/locale';
|
return <CorporateDashboard/>
|
||||||
import { Building2, CalendarIcon, LogOut, Wallet } from 'lucide-react';
|
|
||||||
import { useState } from 'react';
|
|
||||||
|
|
||||||
import { Button } from '@/shared/shadcn-ui/button';
|
|
||||||
import { Calendar } from '@/shared/shadcn-ui/calendar';
|
|
||||||
import {
|
|
||||||
Card,
|
|
||||||
CardContent,
|
|
||||||
CardDescription,
|
|
||||||
CardHeader,
|
|
||||||
CardTitle,
|
|
||||||
} from '@/shared/shadcn-ui/card';
|
|
||||||
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';
|
|
||||||
|
|
||||||
// import { CardsList } from '@/widgets/cards-list';
|
|
||||||
|
|
||||||
// Sample company data
|
|
||||||
const companyData = {
|
|
||||||
companyName: 'ООО «ТаджикТранс»',
|
|
||||||
numberOfCards: 12,
|
|
||||||
fund: 25000,
|
|
||||||
overdraft: 5000,
|
|
||||||
totalFund: 30000,
|
|
||||||
registrationDate: '10.03.2019',
|
|
||||||
};
|
|
||||||
|
|
||||||
// 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 default function CorporateDashboard() {
|
|
||||||
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='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'>
|
|
||||||
{/* Company Card */}
|
|
||||||
<Card className='md:col-span-2'>
|
|
||||||
<CardHeader className='pb-2'>
|
|
||||||
<CardTitle className='flex items-center gap-2'>
|
|
||||||
<Building2 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'>{companyData.companyName}</p>
|
|
||||||
</div>
|
|
||||||
<div className='mb-4 space-y-1'>
|
|
||||||
<p className='text-sm text-gray-500'>Количество карт</p>
|
|
||||||
<p className='font-medium'>{companyData.numberOfCards}</p>
|
|
||||||
</div>
|
|
||||||
<div className='space-y-1'>
|
|
||||||
<p className='text-sm text-gray-500'>Дата регистрации</p>
|
|
||||||
<p className='font-medium'>
|
|
||||||
{companyData.registrationDate}
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<div className='mb-4 space-y-1'>
|
|
||||||
<p className='text-sm text-gray-500'>Фонд</p>
|
|
||||||
<p className='font-medium'>
|
|
||||||
{companyData.fund.toLocaleString()} сомони
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
<div className='mb-4 space-y-1'>
|
|
||||||
<p className='text-sm text-gray-500'>Овердрафт</p>
|
|
||||||
<p className='font-medium'>
|
|
||||||
{companyData.overdraft.toLocaleString()} сомони
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</CardContent>
|
|
||||||
</Card>
|
|
||||||
|
|
||||||
{/* Fund Card */}
|
|
||||||
<Card className='bg-gradient-to-br from-red-600 to-red-800 text-white'>
|
|
||||||
<CardHeader>
|
|
||||||
<CardTitle className='flex items-center gap-2'>
|
|
||||||
<Wallet 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'>
|
|
||||||
{companyData.totalFund.toLocaleString()}
|
|
||||||
</p>
|
|
||||||
<p className='text-white/80'>сомони</p>
|
|
||||||
</div>
|
|
||||||
</CardContent>
|
|
||||||
</Card>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* <CardsList totalCards={companyData.numberOfCards} /> */}
|
|
||||||
|
|
||||||
{/* Transactions */}
|
|
||||||
<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>
|
|
||||||
</div>
|
|
||||||
</main>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
}
|
||||||
|
|||||||
@ -1,110 +1,5 @@
|
|||||||
import { ArrowUpRight, Clock, CreditCard, LogOut, User } from 'lucide-react';
|
import { CustomerDashboard } from "@/pages-templates/(dashboard)/customer-dashboard";
|
||||||
|
|
||||||
import { Button } from '@/shared/shadcn-ui/button';
|
export default function Customer() {
|
||||||
import {
|
return <CustomerDashboard/>
|
||||||
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>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
@ -1,304 +1,5 @@
|
|||||||
import {
|
import { CharityPage } from "@/pages-templates/charity"
|
||||||
Calendar,
|
|
||||||
CheckCircle,
|
|
||||||
Heart,
|
|
||||||
Landmark,
|
|
||||||
MapPin,
|
|
||||||
Users,
|
|
||||||
} from 'lucide-react';
|
|
||||||
import Image from 'next/image';
|
|
||||||
|
|
||||||
import { Button } from '@/shared/shadcn-ui/button';
|
export default function Charity() {
|
||||||
import {
|
return <CharityPage />
|
||||||
Card,
|
}
|
||||||
CardContent,
|
|
||||||
CardFooter,
|
|
||||||
CardHeader,
|
|
||||||
CardTitle,
|
|
||||||
} from '@/shared/shadcn-ui/card';
|
|
||||||
|
|
||||||
import { CtaSection } from '@/widgets/cta-section';
|
|
||||||
|
|
||||||
export const metadata = {
|
|
||||||
title: 'Благотворительность | GasNetwork - Сеть заправок в Таджикистане',
|
|
||||||
description:
|
|
||||||
'Благотворительные проекты и инициативы GasNetwork. Мы помогаем обществу и заботимся о будущем.',
|
|
||||||
};
|
|
||||||
|
|
||||||
export default function CharityPage() {
|
|
||||||
return (
|
|
||||||
<div className='flex min-h-screen flex-col'>
|
|
||||||
<main className='flex-1'>
|
|
||||||
{/* Hero Section */}
|
|
||||||
<section className='relative'>
|
|
||||||
<div className='relative h-[400px] w-full overflow-hidden'>
|
|
||||||
<Image
|
|
||||||
src='/placeholder.svg?height=500&width=1920&text=Благотворительный+фонд+GasNetwork'
|
|
||||||
alt='Благотворительный фонд GasNetwork'
|
|
||||||
width={1920}
|
|
||||||
height={500}
|
|
||||||
className='object-cover'
|
|
||||||
priority
|
|
||||||
/>
|
|
||||||
<div className='absolute inset-0 flex items-center bg-gradient-to-r from-black/70 to-black/30'>
|
|
||||||
<div className='container mx-auto'>
|
|
||||||
<div className='max-w-2xl space-y-6 text-white'>
|
|
||||||
<div className='inline-flex items-center justify-center rounded-full bg-red-600/20 p-2'>
|
|
||||||
<Heart className='size-6 text-red-500' />
|
|
||||||
</div>
|
|
||||||
<h1 className='text-4xl font-bold tracking-tight sm:text-5xl md:text-6xl'>
|
|
||||||
Благотворительный фонд GasNetwork
|
|
||||||
</h1>
|
|
||||||
<p className='text-xl text-gray-200'>
|
|
||||||
Мы верим, что бизнес должен быть социально ответственным.
|
|
||||||
Наш фонд поддерживает образование, здравоохранение и
|
|
||||||
экологические инициативы в Таджикистане.
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
{/* Mission Section */}
|
|
||||||
<section className='py-16'>
|
|
||||||
<div className='container mx-auto'>
|
|
||||||
<div className='grid items-center gap-12 md:grid-cols-2'>
|
|
||||||
<div>
|
|
||||||
<div className='mb-4 inline-flex items-center justify-center rounded-full bg-red-100 p-2'>
|
|
||||||
<Heart className='h-6 w-6 text-red-600' />
|
|
||||||
</div>
|
|
||||||
<h2 className='mb-6 text-3xl font-bold tracking-tight sm:text-4xl'>
|
|
||||||
Наша миссия
|
|
||||||
</h2>
|
|
||||||
<p className='mb-6 text-gray-600'>
|
|
||||||
Благотворительный фонд GasNetwork был создан в 2020 году с
|
|
||||||
целью поддержки социально значимых проектов в Таджикистане. Мы
|
|
||||||
стремимся внести свой вклад в развитие общества и помочь тем,
|
|
||||||
кто в этом нуждается.
|
|
||||||
</p>
|
|
||||||
<p className='mb-6 text-gray-600'>
|
|
||||||
Наша миссия — создавать возможности для улучшения жизни людей
|
|
||||||
через образование, здравоохранение, экологические инициативы и
|
|
||||||
поддержку уязвимых групп населения.
|
|
||||||
</p>
|
|
||||||
|
|
||||||
<div className='space-y-4'>
|
|
||||||
<div className='flex items-start'>
|
|
||||||
<CheckCircle className='mr-3 h-6 w-6 flex-shrink-0 text-red-600' />
|
|
||||||
<div>
|
|
||||||
<h3 className='text-lg font-medium'>Прозрачность</h3>
|
|
||||||
<p className='text-gray-600'>
|
|
||||||
Мы публикуем ежегодные отчеты о всех наших проектах и
|
|
||||||
расходах, обеспечивая полную прозрачность нашей
|
|
||||||
деятельности.
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div className='flex items-start'>
|
|
||||||
<CheckCircle className='mr-3 h-6 w-6 flex-shrink-0 text-red-600' />
|
|
||||||
<div>
|
|
||||||
<h3 className='text-lg font-medium'>Эффективность</h3>
|
|
||||||
<p className='text-gray-600'>
|
|
||||||
Мы тщательно выбираем проекты, которые могут принести
|
|
||||||
максимальную пользу обществу и имеют долгосрочное
|
|
||||||
влияние.
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div className='flex items-start'>
|
|
||||||
<CheckCircle className='mr-3 h-6 w-6 flex-shrink-0 text-red-600' />
|
|
||||||
<div>
|
|
||||||
<h3 className='text-lg font-medium'>Сотрудничество</h3>
|
|
||||||
<p className='text-gray-600'>
|
|
||||||
Мы сотрудничаем с местными и международными
|
|
||||||
организациями для достижения наибольшего эффекта от
|
|
||||||
наших инициатив.
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div className='relative h-[500px] overflow-hidden rounded-xl shadow-xl'>
|
|
||||||
<Image
|
|
||||||
src='/placeholder.svg?height=500&width=600&text=Наша+миссия'
|
|
||||||
alt='Наша миссия'
|
|
||||||
fill
|
|
||||||
className='object-cover'
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
{/* Key Figures */}
|
|
||||||
<section className='bg-red-600 py-16 text-white'>
|
|
||||||
<div className='container mx-auto'>
|
|
||||||
<div className='mb-12 text-center'>
|
|
||||||
<h2 className='mb-4 text-3xl font-bold tracking-tight sm:text-4xl'>
|
|
||||||
Наш вклад в цифрах
|
|
||||||
</h2>
|
|
||||||
<p className='mx-auto max-w-2xl text-white/80'>
|
|
||||||
За время существования нашего фонда мы достигли значительных
|
|
||||||
результатов
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
<div className='grid grid-cols-1 gap-8 text-center md:grid-cols-3'>
|
|
||||||
<div className='space-y-2'>
|
|
||||||
<h3 className='text-4xl font-bold'>15+</h3>
|
|
||||||
<p className='text-white/80'>Реализованных проектов</p>
|
|
||||||
</div>
|
|
||||||
<div className='space-y-2'>
|
|
||||||
<h3 className='text-4xl font-bold'>1.2M</h3>
|
|
||||||
<p className='text-white/80'>Сомони пожертвований</p>
|
|
||||||
</div>
|
|
||||||
<div className='space-y-2'>
|
|
||||||
<h3 className='text-4xl font-bold'>5000+</h3>
|
|
||||||
<p className='text-white/80'>Людей получили помощь</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
{/* Upcoming Events */}
|
|
||||||
<section className='bg-gray-50 py-16'>
|
|
||||||
<div className='container mx-auto'>
|
|
||||||
<div className='mb-12 text-center'>
|
|
||||||
<div className='mb-4 inline-flex items-center justify-center rounded-full bg-red-100 p-2'>
|
|
||||||
<Calendar className='h-6 w-6 text-red-600' />
|
|
||||||
</div>
|
|
||||||
<h2 className='mb-4 text-3xl font-bold tracking-tight sm:text-4xl'>
|
|
||||||
Предстоящие мероприятия
|
|
||||||
</h2>
|
|
||||||
<p className='mx-auto max-w-2xl text-gray-600'>
|
|
||||||
Присоединяйтесь к нашим благотворительным мероприятиям и внесите
|
|
||||||
свой вклад в общее дело
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className='grid gap-6 md:grid-cols-3'>
|
|
||||||
{[
|
|
||||||
{
|
|
||||||
title: 'Благотворительный марафон',
|
|
||||||
description:
|
|
||||||
'Ежегодный благотворительный марафон в поддержку детей с особыми потребностями.',
|
|
||||||
date: '15 июня 2023',
|
|
||||||
location: 'Парк Рудаки, Душанбе',
|
|
||||||
image: '/placeholder.svg?height=200&width=300&text=Марафон',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: 'Экологическая акция',
|
|
||||||
description:
|
|
||||||
'Очистка берегов реки Варзоб от мусора и посадка деревьев.',
|
|
||||||
date: '22 июля 2023',
|
|
||||||
location: 'Река Варзоб, Душанбе',
|
|
||||||
image:
|
|
||||||
'/placeholder.svg?height=200&width=300&text=Экологическая+акция',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: 'Сбор школьных принадлежностей',
|
|
||||||
description:
|
|
||||||
'Сбор школьных принадлежностей для детей из малообеспеченных семей к новому учебному году.',
|
|
||||||
date: '1-20 августа 2023',
|
|
||||||
location: 'Все заправки GasNetwork',
|
|
||||||
image:
|
|
||||||
'/placeholder.svg?height=200&width=300&text=Школьные+принадлежности',
|
|
||||||
},
|
|
||||||
].map((event, index) => (
|
|
||||||
<Card key={index} className='overflow-hidden'>
|
|
||||||
<div className='relative h-48 w-full'>
|
|
||||||
<Image
|
|
||||||
src={event.image || '/placeholder.svg'}
|
|
||||||
alt={event.title}
|
|
||||||
fill
|
|
||||||
className='object-cover'
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<CardHeader>
|
|
||||||
<CardTitle>{event.title}</CardTitle>
|
|
||||||
</CardHeader>
|
|
||||||
<CardContent className='space-y-4'>
|
|
||||||
<p className='text-gray-600'>{event.description}</p>
|
|
||||||
<div className='flex items-center text-sm text-gray-500'>
|
|
||||||
<Calendar className='mr-2 h-4 w-4' />
|
|
||||||
{event.date}
|
|
||||||
</div>
|
|
||||||
<div className='flex items-center text-sm text-gray-500'>
|
|
||||||
<MapPin className='mr-2 h-4 w-4' />
|
|
||||||
{event.location}
|
|
||||||
</div>
|
|
||||||
</CardContent>
|
|
||||||
<CardFooter>
|
|
||||||
<Button className='w-full bg-red-600 hover:bg-red-700'>
|
|
||||||
Принять участие
|
|
||||||
</Button>
|
|
||||||
</CardFooter>
|
|
||||||
</Card>
|
|
||||||
))}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
{/* How to Help */}
|
|
||||||
<section className='py-16'>
|
|
||||||
<div className='container mx-auto'>
|
|
||||||
<div className='mb-12 text-center'>
|
|
||||||
<div className='mb-4 inline-flex items-center justify-center rounded-full bg-red-100 p-2'>
|
|
||||||
<Users className='h-6 w-6 text-red-600' />
|
|
||||||
</div>
|
|
||||||
<h2 className='mb-4 text-3xl font-bold tracking-tight sm:text-4xl'>
|
|
||||||
Как вы можете помочь
|
|
||||||
</h2>
|
|
||||||
<p className='mx-auto max-w-2xl text-gray-600'>
|
|
||||||
Есть много способов внести свой вклад в наши благотворительные
|
|
||||||
инициативы
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className='grid gap-3 md:grid-cols-2 md:gap-6 lg:grid-cols-4'>
|
|
||||||
{[
|
|
||||||
{
|
|
||||||
title: 'Сделать пожертвование',
|
|
||||||
description:
|
|
||||||
'Ваше пожертвование поможет нам реализовать больше проектов и помочь большему количеству людей.',
|
|
||||||
icon: <Landmark className='h-10 w-10 text-red-600' />,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: 'Стать волонтером',
|
|
||||||
description:
|
|
||||||
'Присоединяйтесь к нашей команде волонтеров и помогайте нам в реализации благотворительных проектов.',
|
|
||||||
icon: <Users className='h-10 w-10 text-red-600' />,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: 'Участвовать в мероприятиях',
|
|
||||||
description:
|
|
||||||
'Принимайте участие в наших благотворительных мероприятиях и акциях.',
|
|
||||||
icon: <Calendar className='h-10 w-10 text-red-600' />,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: 'Распространять информацию',
|
|
||||||
description:
|
|
||||||
'Расскажите о нашем фонде и его деятельности своим друзьям и знакомым.',
|
|
||||||
icon: <Heart className='h-10 w-10 text-red-600' />,
|
|
||||||
},
|
|
||||||
].map((item, index) => (
|
|
||||||
<Card key={index} className='text-center'>
|
|
||||||
<CardHeader>
|
|
||||||
<div className='mb-4 flex justify-center'>{item.icon}</div>
|
|
||||||
<CardTitle className='break-words hyphens-auto'>
|
|
||||||
{item.title}
|
|
||||||
</CardTitle>
|
|
||||||
</CardHeader>
|
|
||||||
<CardContent>
|
|
||||||
<p className='text-gray-600'>{item.description}</p>
|
|
||||||
</CardContent>
|
|
||||||
</Card>
|
|
||||||
))}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
<CtaSection />
|
|
||||||
</main>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
186
src/pages-templates/(dashboard)/corporate-dashboard/index.tsx
Normal file
186
src/pages-templates/(dashboard)/corporate-dashboard/index.tsx
Normal file
@ -0,0 +1,186 @@
|
|||||||
|
"use client"
|
||||||
|
|
||||||
|
import { subMonths } from 'date-fns';
|
||||||
|
import { Building2, LogOut, Wallet } from 'lucide-react';
|
||||||
|
import { useState } from 'react';
|
||||||
|
|
||||||
|
import { Button } from '@/shared/shadcn-ui/button';
|
||||||
|
import {
|
||||||
|
Card,
|
||||||
|
CardContent,
|
||||||
|
CardDescription,
|
||||||
|
CardHeader,
|
||||||
|
CardTitle,
|
||||||
|
} from '@/shared/shadcn-ui/card';
|
||||||
|
import { useLanguage } from '@/shared/language';
|
||||||
|
import { TransactionsTable } from '@/widgets/transactions-table';
|
||||||
|
|
||||||
|
// import { CardsList } from '@/widgets/cards-list';
|
||||||
|
|
||||||
|
// Sample company data
|
||||||
|
const companyData = {
|
||||||
|
companyName: 'ООО «ТаджикТранс»',
|
||||||
|
numberOfCards: 12,
|
||||||
|
fund: 25000,
|
||||||
|
overdraft: 5000,
|
||||||
|
totalFund: 30000,
|
||||||
|
registrationDate: '10.03.2019',
|
||||||
|
};
|
||||||
|
|
||||||
|
// 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 function CorporateDashboard() {
|
||||||
|
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);
|
||||||
|
};
|
||||||
|
|
||||||
|
const {t} = useLanguage()
|
||||||
|
|
||||||
|
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'>{t('corporate.pageTitle')}</h1>
|
||||||
|
<Button variant='outline' className='gap-2'>
|
||||||
|
<LogOut className='h-4 w-4' />
|
||||||
|
{t('corporate.logoutButton')}
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className='mb-10 grid gap-3 md:grid-cols-3 md:gap-6'>
|
||||||
|
{/* Company Card */}
|
||||||
|
<Card className='md:col-span-2'>
|
||||||
|
<CardHeader className='pb-2'>
|
||||||
|
<CardTitle className='flex items-center gap-2'>
|
||||||
|
<Building2 className='h-5 w-5 text-red-600' />
|
||||||
|
{t('corporate.companyCard.title')}
|
||||||
|
</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'>{t('corporate.companyCard.companyNameLabel')}</p>
|
||||||
|
<p className='font-medium'>{companyData.companyName}</p>
|
||||||
|
</div>
|
||||||
|
<div className='mb-4 space-y-1'>
|
||||||
|
<p className='text-sm text-gray-500'>{t('corporate.companyCard.cardsCountLabel')}</p>
|
||||||
|
<p className='font-medium'>{companyData.numberOfCards}</p>
|
||||||
|
</div>
|
||||||
|
<div className='space-y-1'>
|
||||||
|
<p className='text-sm text-gray-500'>{t('corporate.companyCard.registrationDateLabel')}</p>
|
||||||
|
<p className='font-medium'>
|
||||||
|
{companyData.registrationDate}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<div className='mb-4 space-y-1'>
|
||||||
|
<p className='text-sm text-gray-500'>{t('corporate.companyCard.fundLabel')}</p>
|
||||||
|
<p className='font-medium'>
|
||||||
|
{companyData.fund.toLocaleString()} {t('corporate.currency')}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<div className='mb-4 space-y-1'>
|
||||||
|
<p className='text-sm text-gray-500'>{t('corporate.companyCard.overdraftLabel')}</p>
|
||||||
|
<p className='font-medium'>
|
||||||
|
{companyData.overdraft.toLocaleString()} {t('corporate.currency')}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
|
||||||
|
{/* Fund Card */}
|
||||||
|
<Card className='bg-gradient-to-br from-red-600 to-red-800 text-white'>
|
||||||
|
<CardHeader>
|
||||||
|
<CardTitle className='flex items-center gap-2'>
|
||||||
|
<Wallet className='h-5 w-5' />
|
||||||
|
{t('corporate.fundCard.title')}
|
||||||
|
</CardTitle>
|
||||||
|
<CardDescription className='text-white/80'>
|
||||||
|
{t('corporate.fundCard.description')}
|
||||||
|
</CardDescription>
|
||||||
|
</CardHeader>
|
||||||
|
<CardContent>
|
||||||
|
<div className='text-center'>
|
||||||
|
<p className='mb-2 text-4xl font-bold'>
|
||||||
|
{companyData.totalFund.toLocaleString()}
|
||||||
|
</p>
|
||||||
|
<p className='text-white/80'>{t('corporate.fundCard.currency')}</p>
|
||||||
|
</div>
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* <CardsList totalCards={companyData.numberOfCards} /> */}
|
||||||
|
|
||||||
|
{/* Transactions */}
|
||||||
|
|
||||||
|
<TransactionsTable />
|
||||||
|
</div>
|
||||||
|
</main>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
116
src/pages-templates/(dashboard)/customer-dashboard/index.tsx
Normal file
116
src/pages-templates/(dashboard)/customer-dashboard/index.tsx
Normal file
@ -0,0 +1,116 @@
|
|||||||
|
"use client"
|
||||||
|
|
||||||
|
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';
|
||||||
|
import { useLanguage } from '@/shared/language';
|
||||||
|
|
||||||
|
// Sample customer data
|
||||||
|
const customerData = {
|
||||||
|
firstName: 'Алишер',
|
||||||
|
lastName: 'Рахмонов',
|
||||||
|
passportNumber: 'A12345678',
|
||||||
|
bonusPoints: 1250,
|
||||||
|
cardNumber: '5678-9012-3456-7890',
|
||||||
|
expiryDate: '12/2025',
|
||||||
|
registrationDate: '15.06.2020',
|
||||||
|
};
|
||||||
|
|
||||||
|
export function CustomerDashboard() {
|
||||||
|
|
||||||
|
const {t} = useLanguage()
|
||||||
|
|
||||||
|
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'>{t('customer.pageTitle')}</h1>
|
||||||
|
<Button variant='outline' className='gap-2'>
|
||||||
|
<LogOut className='h-4 w-4' />
|
||||||
|
{t('customer.logoutButton')}
|
||||||
|
</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' />
|
||||||
|
{t('customer.bonusCard.title')}
|
||||||
|
</CardTitle>
|
||||||
|
<CardDescription className='text-white/80'>
|
||||||
|
{t('customer.bonusCard.description')}
|
||||||
|
</CardDescription>
|
||||||
|
</CardHeader>
|
||||||
|
<CardContent>
|
||||||
|
<div className='text-center'>
|
||||||
|
<p className='mb-2 text-4xl font-bold'>
|
||||||
|
{customerData.bonusPoints}
|
||||||
|
</p>
|
||||||
|
<p className='text-white/80'>{t('customer.bonusCard.points')}</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>{t('customer.bonusCard.validUntil')}</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' />
|
||||||
|
{t('customer.infoCard.title')}
|
||||||
|
</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'>{t('customer.infoCard.regDateLabel')}</p>
|
||||||
|
<p className='font-medium'>
|
||||||
|
{customerData.firstName} {customerData.lastName}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<div className='space-y-1'>
|
||||||
|
<p className='text-sm text-gray-500'>{t('customer.infoCard.regDateLabel')}</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'>{t('customer.infoCard.cardNumberLabel')}</p>
|
||||||
|
<p className='font-medium'>{customerData.cardNumber}</p>
|
||||||
|
</div>
|
||||||
|
<div className='mb-4 space-y-1'>
|
||||||
|
<p className='text-sm text-gray-500'>{t('customer.infoCard.expiryDateLabel')}</p>
|
||||||
|
<p className='font-medium'>{customerData.expiryDate}</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<TransactionsTable />
|
||||||
|
</div>
|
||||||
|
</main>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
278
src/pages-templates/charity/index.tsx
Normal file
278
src/pages-templates/charity/index.tsx
Normal file
@ -0,0 +1,278 @@
|
|||||||
|
"use client"
|
||||||
|
|
||||||
|
import {
|
||||||
|
Calendar,
|
||||||
|
CheckCircle,
|
||||||
|
Heart,
|
||||||
|
Landmark,
|
||||||
|
MapPin,
|
||||||
|
Users,
|
||||||
|
} from 'lucide-react';
|
||||||
|
import Image from 'next/image';
|
||||||
|
|
||||||
|
import { Button } from '@/shared/shadcn-ui/button';
|
||||||
|
import {
|
||||||
|
Card,
|
||||||
|
CardContent,
|
||||||
|
CardFooter,
|
||||||
|
CardHeader,
|
||||||
|
CardTitle,
|
||||||
|
} from '@/shared/shadcn-ui/card';
|
||||||
|
|
||||||
|
import { CtaSection } from '@/widgets/cta-section';
|
||||||
|
import { useLanguage } from '@/shared/language';
|
||||||
|
|
||||||
|
export const metadata = {
|
||||||
|
title: 'Благотворительность | GasNetwork - Сеть заправок в Таджикистане',
|
||||||
|
description:
|
||||||
|
'Благотворительные проекты и инициативы GasNetwork. Мы помогаем обществу и заботимся о будущем.',
|
||||||
|
};
|
||||||
|
|
||||||
|
export function CharityPage() {
|
||||||
|
|
||||||
|
const {t} = useLanguage();
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className='flex min-h-screen flex-col'>
|
||||||
|
<main className='flex-1'>
|
||||||
|
{/* Hero Section */}
|
||||||
|
<section className='relative'>
|
||||||
|
<div className='relative h-[400px] w-full overflow-hidden'>
|
||||||
|
<Image
|
||||||
|
src='/placeholder.svg?height=500&width=1920&text=Благотворительный+фонд+GasNetwork'
|
||||||
|
alt={t('charity.hero.imageAlt')}
|
||||||
|
width={1920}
|
||||||
|
height={500}
|
||||||
|
className='object-cover'
|
||||||
|
priority
|
||||||
|
/>
|
||||||
|
<div className='absolute inset-0 flex items-center bg-gradient-to-r from-black/70 to-black/30'>
|
||||||
|
<div className='container mx-auto'>
|
||||||
|
<div className='max-w-2xl space-y-6 text-white'>
|
||||||
|
<div className='inline-flex items-center justify-center rounded-full bg-red-600/20 p-2'>
|
||||||
|
<Heart className='size-6 text-red-500' />
|
||||||
|
</div>
|
||||||
|
<h1 className='text-4xl font-bold tracking-tight sm:text-5xl md:text-6xl'>
|
||||||
|
{t('charity.hero.title')}
|
||||||
|
</h1>
|
||||||
|
<p className='text-xl text-gray-200'>
|
||||||
|
{t('charity.hero.subtitle')}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
{/* Mission Section */}
|
||||||
|
<section className='py-16'>
|
||||||
|
<div className='container mx-auto'>
|
||||||
|
<div className='grid items-center gap-12 md:grid-cols-2'>
|
||||||
|
<div>
|
||||||
|
<div className='mb-4 inline-flex items-center justify-center rounded-full bg-red-100 p-2'>
|
||||||
|
<Heart className='h-6 w-6 text-red-600' />
|
||||||
|
</div>
|
||||||
|
<h2 className='mb-6 text-3xl font-bold tracking-tight sm:text-4xl'>
|
||||||
|
{t('charity.mission.title')}
|
||||||
|
</h2>
|
||||||
|
<p className='mb-6 text-gray-600'>
|
||||||
|
{t('charity.mission.description1')}
|
||||||
|
</p>
|
||||||
|
<p className='mb-6 text-gray-600'>
|
||||||
|
{t('charity.mission.description2')}
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<div className='space-y-4'>
|
||||||
|
{[0, 1, 2].map((index) => (
|
||||||
|
<div key={index} className='flex items-start'>
|
||||||
|
<CheckCircle className='mr-3 h-6 w-6 flex-shrink-0 text-red-600' />
|
||||||
|
<div>
|
||||||
|
<h3 className='text-lg font-medium'>
|
||||||
|
{t(`charity.mission.principles.${index}.title`)}
|
||||||
|
</h3>
|
||||||
|
<p className='text-gray-600'>
|
||||||
|
{t(`charity.mission.principles.${index}.description`)}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className='relative h-[500px] overflow-hidden rounded-xl shadow-xl'>
|
||||||
|
<Image
|
||||||
|
src='/placeholder.svg?height=500&width=600&text=Наша+миссия'
|
||||||
|
alt={t('charity.mission.imageAlt')}
|
||||||
|
fill
|
||||||
|
className='object-cover'
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
{/* Key Figures */}
|
||||||
|
<section className='bg-red-600 py-16 text-white'>
|
||||||
|
<div className='container mx-auto'>
|
||||||
|
<div className='mb-12 text-center'>
|
||||||
|
<h2 className='mb-4 text-3xl font-bold tracking-tight sm:text-4xl'>
|
||||||
|
{t('charity.stats.title')}
|
||||||
|
</h2>
|
||||||
|
<p className='mx-auto max-w-2xl text-white/80'>
|
||||||
|
{t('charity.stats.subtitle')}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<div className='grid grid-cols-1 gap-8 text-center md:grid-cols-3'>
|
||||||
|
{[0, 1, 2].map((index) => (
|
||||||
|
<div key={index} className='space-y-2'>
|
||||||
|
<h3 className='text-4xl font-bold'>
|
||||||
|
{t(`charity.stats.items.${index}.value`)}
|
||||||
|
</h3>
|
||||||
|
<p className='text-white/80'>
|
||||||
|
{t(`charity.stats.items.${index}.label`)}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
{/* Upcoming Events */}
|
||||||
|
<section className='bg-gray-50 py-16'>
|
||||||
|
<div className='container mx-auto'>
|
||||||
|
<div className='mb-12 text-center'>
|
||||||
|
<div className='mb-4 inline-flex items-center justify-center rounded-full bg-red-100 p-2'>
|
||||||
|
<Calendar className='h-6 w-6 text-red-600' />
|
||||||
|
</div>
|
||||||
|
<h2 className='mb-4 text-3xl font-bold tracking-tight sm:text-4xl'>
|
||||||
|
{t('charity.events.title')}
|
||||||
|
</h2>
|
||||||
|
<p className='mx-auto max-w-2xl text-gray-600'>
|
||||||
|
{t('charity.events.subtitle')}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className='grid gap-6 md:grid-cols-3'>
|
||||||
|
{[
|
||||||
|
{
|
||||||
|
title: 'Благотворительный марафон',
|
||||||
|
description:
|
||||||
|
'Ежегодный благотворительный марафон в поддержку детей с особыми потребностями.',
|
||||||
|
date: '15 июня 2023',
|
||||||
|
location: 'Парк Рудаки, Душанбе',
|
||||||
|
image: '/placeholder.svg?height=200&width=300&text=Марафон',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: 'Экологическая акция',
|
||||||
|
description:
|
||||||
|
'Очистка берегов реки Варзоб от мусора и посадка деревьев.',
|
||||||
|
date: '22 июля 2023',
|
||||||
|
location: 'Река Варзоб, Душанбе',
|
||||||
|
image:
|
||||||
|
'/placeholder.svg?height=200&width=300&text=Экологическая+акция',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: 'Сбор школьных принадлежностей',
|
||||||
|
description:
|
||||||
|
'Сбор школьных принадлежностей для детей из малообеспеченных семей к новому учебному году.',
|
||||||
|
date: '1-20 августа 2023',
|
||||||
|
location: 'Все заправки GasNetwork',
|
||||||
|
image:
|
||||||
|
'/placeholder.svg?height=200&width=300&text=Школьные+принадлежности',
|
||||||
|
},
|
||||||
|
].map((event, index) => (
|
||||||
|
<Card key={index} className='overflow-hidden'>
|
||||||
|
<div className='relative h-48 w-full'>
|
||||||
|
<Image
|
||||||
|
src={event.image || '/placeholder.svg'}
|
||||||
|
alt={event.title}
|
||||||
|
fill
|
||||||
|
className='object-cover'
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<CardHeader>
|
||||||
|
<CardTitle>{event.title}</CardTitle>
|
||||||
|
</CardHeader>
|
||||||
|
<CardContent className='space-y-4'>
|
||||||
|
<p className='text-gray-600'>{event.description}</p>
|
||||||
|
<div className='flex items-center text-sm text-gray-500'>
|
||||||
|
<Calendar className='mr-2 h-4 w-4' />
|
||||||
|
{event.date}
|
||||||
|
</div>
|
||||||
|
<div className='flex items-center text-sm text-gray-500'>
|
||||||
|
<MapPin className='mr-2 h-4 w-4' />
|
||||||
|
{event.location}
|
||||||
|
</div>
|
||||||
|
</CardContent>
|
||||||
|
<CardFooter>
|
||||||
|
<Button className='w-full bg-red-600 hover:bg-red-700'>
|
||||||
|
{t(`charity.events.button`)}
|
||||||
|
</Button>
|
||||||
|
</CardFooter>
|
||||||
|
</Card>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
{/* How to Help */}
|
||||||
|
<section className='py-16'>
|
||||||
|
<div className='container mx-auto'>
|
||||||
|
<div className='mb-12 text-center'>
|
||||||
|
<div className='mb-4 inline-flex items-center justify-center rounded-full bg-red-100 p-2'>
|
||||||
|
<Users className='h-6 w-6 text-red-600' />
|
||||||
|
</div>
|
||||||
|
<h2 className='mb-4 text-3xl font-bold tracking-tight sm:text-4xl'>
|
||||||
|
{t('charity.help.title')}
|
||||||
|
</h2>
|
||||||
|
<p className='mx-auto max-w-2xl text-gray-600'>
|
||||||
|
{t('charity.help.subtitle')}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className='grid gap-3 md:grid-cols-2 md:gap-6 lg:grid-cols-4'>
|
||||||
|
{[
|
||||||
|
{
|
||||||
|
title: 'Сделать пожертвование',
|
||||||
|
description:
|
||||||
|
'Ваше пожертвование поможет нам реализовать больше проектов и помочь большему количеству людей.',
|
||||||
|
icon: <Landmark className='h-10 w-10 text-red-600' />,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: 'Стать волонтером',
|
||||||
|
description:
|
||||||
|
'Присоединяйтесь к нашей команде волонтеров и помогайте нам в реализации благотворительных проектов.',
|
||||||
|
icon: <Users className='h-10 w-10 text-red-600' />,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: 'Участвовать в мероприятиях',
|
||||||
|
description:
|
||||||
|
'Принимайте участие в наших благотворительных мероприятиях и акциях.',
|
||||||
|
icon: <Calendar className='h-10 w-10 text-red-600' />,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: 'Распространять информацию',
|
||||||
|
description:
|
||||||
|
'Расскажите о нашем фонде и его деятельности своим друзьям и знакомым.',
|
||||||
|
icon: <Heart className='h-10 w-10 text-red-600' />,
|
||||||
|
},
|
||||||
|
].map((item, index) => (
|
||||||
|
<Card key={index} className='text-center'>
|
||||||
|
<CardHeader>
|
||||||
|
<div className='mb-4 flex justify-center'>{item.icon}</div>
|
||||||
|
<CardTitle className='break-words hyphens-auto'>
|
||||||
|
{item.title}
|
||||||
|
</CardTitle>
|
||||||
|
</CardHeader>
|
||||||
|
<CardContent>
|
||||||
|
<p className='text-gray-600'>{item.description}</p>
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
<CtaSection />
|
||||||
|
</main>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
@ -2,6 +2,7 @@
|
|||||||
"common.contacts.address": "ул. Рудаки 137, Душанбе, Таджикистан",
|
"common.contacts.address": "ул. Рудаки 137, Душанбе, Таджикистан",
|
||||||
"common.contacts.tel": "+992 (37) 223-45-67",
|
"common.contacts.tel": "+992 (37) 223-45-67",
|
||||||
"common.contacts.email": "info@gasnetwork.tj",
|
"common.contacts.email": "info@gasnetwork.tj",
|
||||||
|
"common.name": "Ориё",
|
||||||
|
|
||||||
"common.buttons.readMore": "Подробнее",
|
"common.buttons.readMore": "Подробнее",
|
||||||
"common.buttons.findStation": "Найти заправку",
|
"common.buttons.findStation": "Найти заправку",
|
||||||
@ -29,6 +30,8 @@
|
|||||||
"common.navigation.promotions": "Акции",
|
"common.navigation.promotions": "Акции",
|
||||||
"common.navigation.charity": "Благотворительность",
|
"common.navigation.charity": "Благотворительность",
|
||||||
"common.navigation.certificates": "Сертификаты",
|
"common.navigation.certificates": "Сертификаты",
|
||||||
|
"common.navigation.loyatly": "Программа лояльности",
|
||||||
|
"common.navigation.partners": "Партнеры",
|
||||||
"common.navigation.contacts": "Контакты",
|
"common.navigation.contacts": "Контакты",
|
||||||
|
|
||||||
"common.footer.contacts": "Контакты",
|
"common.footer.contacts": "Контакты",
|
||||||
@ -54,6 +57,10 @@
|
|||||||
"home.about.features.staff.title": "Профессиональный персонал",
|
"home.about.features.staff.title": "Профессиональный персонал",
|
||||||
"home.about.features.staff.description": "Наши сотрудники - профессионалы своего дела",
|
"home.about.features.staff.description": "Наши сотрудники - профессионалы своего дела",
|
||||||
|
|
||||||
|
"about.companyTimeline.rollUp.button": "Свернуть",
|
||||||
|
"about.companyTimeline.show.button": "Показать больше",
|
||||||
|
"about.gallery.previous": "Предыдущая",
|
||||||
|
"about.gallery.next": "Следующая",
|
||||||
"about.hero.imageAlt": "О нашей компании",
|
"about.hero.imageAlt": "О нашей компании",
|
||||||
"about.hero.title": "О нашей компании",
|
"about.hero.title": "О нашей компании",
|
||||||
"about.hero.subtitle": "Узнайте больше о нашей истории, ценностях и миссии. Мы стремимся предоставлять лучший сервис и качественное топливо для наших клиентов.",
|
"about.hero.subtitle": "Узнайте больше о нашей истории, ценностях и миссии. Мы стремимся предоставлять лучший сервис и качественное топливо для наших клиентов.",
|
||||||
@ -163,13 +170,47 @@
|
|||||||
"home.cta.title": "Присоединяйтесь к нам",
|
"home.cta.title": "Присоединяйтесь к нам",
|
||||||
"home.cta.description": "Станьте частью нашей сети. Получайте специальные предложения, бонусы и скидки.",
|
"home.cta.description": "Станьте частью нашей сети. Получайте специальные предложения, бонусы и скидки.",
|
||||||
|
|
||||||
|
"charity.events.button": "Принять участие",
|
||||||
|
"charity.hero.imageAlt": "Благотворительный фонд GasNetwork",
|
||||||
|
"charity.hero.title": "Благотворительный фонд GasNetwork",
|
||||||
|
"charity.hero.subtitle": "Мы верим, что бизнес должен быть социально ответственным. Наш фонд поддерживает образование, здравоохранение и экологические инициативы в Таджикистане.",
|
||||||
|
|
||||||
|
"charity.mission.title": "Наша миссия",
|
||||||
|
"charity.mission.description1": "Благотворительный фонд GasNetwork был создан в 2020 году с целью поддержки социально значимых проектов в Таджикистане. Мы стремимся внести свой вклад в развитие общества и помочь тем, кто в этом нуждается.",
|
||||||
|
"charity.mission.description2": "Наша миссия — создавать возможности для улучшения жизни людей через образование, здравоохранение, экологические инициативы и поддержку уязвимых групп населения.",
|
||||||
|
"charity.mission.imageAlt": "Наша миссия",
|
||||||
|
|
||||||
|
"charity.mission.principles.0.title": "Прозрачность",
|
||||||
|
"charity.mission.principles.0.description": "Мы публикуем ежегодные отчеты о всех наших проектах и расходах, обеспечивая полную прозрачность нашей деятельности.",
|
||||||
|
"charity.mission.principles.1.title": "Эффективность",
|
||||||
|
"charity.mission.principles.1.description": "Мы тщательно выбираем проекты, которые могут принести максимальную пользу обществу и имеют долгосрочное влияние.",
|
||||||
|
"charity.mission.principles.2.title": "Сотрудничество",
|
||||||
|
"charity.mission.principles.2.description": "Мы сотрудничаем с местными и международными организациями для достижения наибольшего эффекта от наших инициатив.",
|
||||||
|
|
||||||
|
"charity.stats.title": "Наш вклад в цифрах",
|
||||||
|
"charity.stats.subtitle": "За время существования нашего фонда мы достигли значительных результатов",
|
||||||
|
"charity.stats.items.0.value": "15+",
|
||||||
|
"charity.stats.items.0.label": "Реализованных проектов",
|
||||||
|
"charity.stats.items.1.value": "1.2M",
|
||||||
|
"charity.stats.items.1.label": "Сомони пожертвований",
|
||||||
|
"charity.stats.items.2.value": "5000+",
|
||||||
|
"charity.stats.items.2.label": "Людей получили помощь",
|
||||||
|
|
||||||
|
"charity.events.title": "Предстоящие мероприятия",
|
||||||
|
"charity.events.subtitle": "Присоединяйтесь к нашим благотворительным мероприятиям и внесите свой вклад в общее дело",
|
||||||
|
|
||||||
|
"charity.help.title": "Как вы можете помочь",
|
||||||
|
"charity.help.subtitle": "Есть много способов внести свой вклад в наши благотворительные инициативы",
|
||||||
|
|
||||||
"clients.title": "Для наших клиентов",
|
"clients.title": "Для наших клиентов",
|
||||||
"clients.description": "Информация для клиентов: программа лояльности, топливные карты, сертификаты и способы оплаты.",
|
"clients.description": "Информация для клиентов: программа лояльности, топливные карты, сертификаты и способы оплаты.",
|
||||||
"clients.services.title": "Наши услуги для клиентов",
|
"clients.services.title": "Наши услуги для клиентов",
|
||||||
"clients.services.subtitle": "Мы стремимся сделать обслуживание на наших заправках максимально удобным и выгодным для вас",
|
"clients.services.subtitle": "Мы стремимся сделать обслуживание на наших заправках максимально удобным и выгодным для вас",
|
||||||
"clients.benefits.title": "Преимущества для клиентов",
|
"clients.benefits.title": "Преимущества для клиентов",
|
||||||
"clients.benefits.subtitle": "Став клиентом GasNetwork, вы получаете множество преимуществ, которые делают заправку вашего автомобиля более выгодной и удобной.",
|
"clients.benefits.subtitle": "Став клиентом GasNetwork, вы получаете множество преимуществ, которые делают заправку вашего автомобиля более выгодной и удобной.",
|
||||||
|
"clients.header.loyalty.description": "Накапливайте баллы и получайте скидки на топливо и услуги",
|
||||||
|
"clients.header.certificates.description": "Подарочные сертификаты на топливо и услуги нашей сети",
|
||||||
|
|
||||||
"clients.loyalty.title": "Программа лояльности",
|
"clients.loyalty.title": "Программа лояльности",
|
||||||
"clients.loyalty.description": "Накапливайте баллы и получайте скидки на топливо и услуги нашей сети",
|
"clients.loyalty.description": "Накапливайте баллы и получайте скидки на топливо и услуги нашей сети",
|
||||||
|
|
||||||
@ -246,5 +287,58 @@
|
|||||||
"map.totalStations": "Всего станций",
|
"map.totalStations": "Всего станций",
|
||||||
"map.services": "Услуги",
|
"map.services": "Услуги",
|
||||||
"map.cities": "Города",
|
"map.cities": "Города",
|
||||||
"map.allCities": "Все города"
|
"map.allCities": "Все города",
|
||||||
}
|
|
||||||
|
"corporate.pageTitle": "Корпоративный кабинет",
|
||||||
|
"corporate.logoutButton": "Выйти",
|
||||||
|
|
||||||
|
"corporate.companyCard.title": "Информация о компании",
|
||||||
|
"corporate.companyCard.companyNameLabel": "Название компании",
|
||||||
|
"corporate.companyCard.cardsCountLabel": "Количество карт",
|
||||||
|
"corporate.companyCard.registrationDateLabel": "Дата регистрации",
|
||||||
|
"corporate.companyCard.fundLabel": "Фонд",
|
||||||
|
"corporate.companyCard.overdraftLabel": "Овердрафт",
|
||||||
|
"corporate.currency": "сомони",
|
||||||
|
|
||||||
|
"corporate.fundCard.title": "Общий фонд",
|
||||||
|
"corporate.fundCard.description": "Доступные средства",
|
||||||
|
"corporate.fundCard.currency": "сомони",
|
||||||
|
|
||||||
|
"corporate.transactions.title": "История операций",
|
||||||
|
"corporate.transactions.dateFrom": "От",
|
||||||
|
"corporate.transactions.dateTo": "До",
|
||||||
|
"corporate.transactions.selectDate": "Выберите дату",
|
||||||
|
"corporate.transactions.applyButton": "Применить",
|
||||||
|
|
||||||
|
"corporate.transactions.tableHeaders.date": "Дата",
|
||||||
|
"corporate.transactions.tableHeaders.station": "Станция",
|
||||||
|
"corporate.transactions.tableHeaders.product": "Продукт",
|
||||||
|
"corporate.transactions.tableHeaders.quantity": "Кол-во (л)",
|
||||||
|
"corporate.transactions.tableHeaders.price": "Стоимость",
|
||||||
|
"corporate.transactions.tableHeaders.total": "Сумма",
|
||||||
|
|
||||||
|
"corporate.transactions.noTransactions": "Нет операций за выбранный период",
|
||||||
|
|
||||||
|
"customer.pageTitle": "Личный кабинет",
|
||||||
|
"customer.logoutButton": "Выйти",
|
||||||
|
|
||||||
|
"customer.bonusCard.title": "Бонусная карта",
|
||||||
|
"customer.bonusCard.description": "Ваши накопленные бонусы",
|
||||||
|
"customer.bonusCard.points": "бонусных баллов",
|
||||||
|
"customer.bonusCard.validUntil": "Действует до: 31.12.2023",
|
||||||
|
|
||||||
|
"customer.infoCard.title": "Информация о клиенте",
|
||||||
|
"customer.infoCard.fullNameLabel": "ФИО",
|
||||||
|
"customer.infoCard.regDateLabel": "Дата регистрации",
|
||||||
|
"customer.infoCard.cardNumberLabel": "Номер карты",
|
||||||
|
"customer.infoCard.expiryDateLabel": "Срок действия",
|
||||||
|
|
||||||
|
"customer.transactions.title": "История операций",
|
||||||
|
"customer.transactions.dateColumn": "Дата",
|
||||||
|
"customer.transactions.stationColumn": "АЗС",
|
||||||
|
"customer.transactions.productColumn": "Топливо",
|
||||||
|
"customer.transactions.quantityColumn": "Литры",
|
||||||
|
"customer.transactions.priceColumn": "Цена",
|
||||||
|
"customer.transactions.totalColumn": "Сумма",
|
||||||
|
"customer.transactions.noData": "Нет данных о транзакциях"
|
||||||
|
}
|
||||||
@ -5,6 +5,7 @@ import { useState } from 'react';
|
|||||||
|
|
||||||
import { Button } from '@/shared/shadcn-ui/button';
|
import { Button } from '@/shared/shadcn-ui/button';
|
||||||
import { Card, CardContent } from '@/shared/shadcn-ui/card';
|
import { Card, CardContent } from '@/shared/shadcn-ui/card';
|
||||||
|
import { useLanguage } from '@/shared/language';
|
||||||
|
|
||||||
const timelineEvents = [
|
const timelineEvents = [
|
||||||
{
|
{
|
||||||
@ -61,6 +62,8 @@ export function CompanyTimeline() {
|
|||||||
const [expanded, setExpanded] = useState(false);
|
const [expanded, setExpanded] = useState(false);
|
||||||
const displayEvents = expanded ? timelineEvents : timelineEvents.slice(0, 4);
|
const displayEvents = expanded ? timelineEvents : timelineEvents.slice(0, 4);
|
||||||
|
|
||||||
|
const {t} = useLanguage()
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className='relative'>
|
<div className='relative'>
|
||||||
<div className='absolute left-1/2 -z-10 -ml-0.5 hidden h-full w-0.5 bg-gradient-to-b from-red-200 via-red-200 to-transparent md:block' />
|
<div className='absolute left-1/2 -z-10 -ml-0.5 hidden h-full w-0.5 bg-gradient-to-b from-red-200 via-red-200 to-transparent md:block' />
|
||||||
@ -116,11 +119,11 @@ export function CompanyTimeline() {
|
|||||||
>
|
>
|
||||||
{expanded ? (
|
{expanded ? (
|
||||||
<>
|
<>
|
||||||
Свернуть <ChevronUp className='ml-2 size-4' />
|
{t("about.companyTimeline.rollUp.button")} <ChevronUp className='ml-2 size-4' />
|
||||||
</>
|
</>
|
||||||
) : (
|
) : (
|
||||||
<>
|
<>
|
||||||
Показать больше <ChevronDown className='ml-2 size-4' />
|
{t("about.companyTimeline.show.button")} <ChevronDown className='ml-2 size-4' />
|
||||||
</>
|
</>
|
||||||
)}
|
)}
|
||||||
</Button>
|
</Button>
|
||||||
|
|||||||
@ -13,6 +13,7 @@ import {
|
|||||||
DialogTitle,
|
DialogTitle,
|
||||||
DialogTrigger,
|
DialogTrigger,
|
||||||
} from '@/shared/shadcn-ui/dialog';
|
} from '@/shared/shadcn-ui/dialog';
|
||||||
|
import { useLanguage } from '@/shared/language';
|
||||||
|
|
||||||
interface Station {
|
interface Station {
|
||||||
id: number;
|
id: number;
|
||||||
@ -72,6 +73,8 @@ export function StationGallery() {
|
|||||||
setCurrentImage((prev) => (prev === 0 ? stations.length - 1 : prev - 1));
|
setCurrentImage((prev) => (prev === 0 ? stations.length - 1 : prev - 1));
|
||||||
};
|
};
|
||||||
|
|
||||||
|
const {t} = useLanguage()
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className='space-y-8'>
|
<div className='space-y-8'>
|
||||||
<div className='relative h-[400px] overflow-hidden rounded-xl shadow-xl md:h-[500px]'>
|
<div className='relative h-[400px] overflow-hidden rounded-xl shadow-xl md:h-[500px]'>
|
||||||
@ -93,7 +96,7 @@ export function StationGallery() {
|
|||||||
onClick={prevImage}
|
onClick={prevImage}
|
||||||
>
|
>
|
||||||
<ChevronLeft className='h-6 w-6' />
|
<ChevronLeft className='h-6 w-6' />
|
||||||
<span className='sr-only'>Предыдущая</span>
|
<span className='sr-only'>{t('about.gallery.previous')}</span>
|
||||||
</Button>
|
</Button>
|
||||||
|
|
||||||
<Button
|
<Button
|
||||||
@ -103,7 +106,7 @@ export function StationGallery() {
|
|||||||
onClick={nextImage}
|
onClick={nextImage}
|
||||||
>
|
>
|
||||||
<ChevronRight className='h-6 w-6' />
|
<ChevronRight className='h-6 w-6' />
|
||||||
<span className='sr-only'>Следующая</span>
|
<span className='sr-only'>{t('about.gallery.next')}</span>
|
||||||
</Button>
|
</Button>
|
||||||
|
|
||||||
<Dialog>
|
<Dialog>
|
||||||
|
|||||||
@ -15,7 +15,7 @@ export const Footer = () => {
|
|||||||
<div>
|
<div>
|
||||||
<div className='mb-4 flex items-center gap-2'>
|
<div className='mb-4 flex items-center gap-2'>
|
||||||
<Fuel className='h-6 w-6 text-red-500' />
|
<Fuel className='h-6 w-6 text-red-500' />
|
||||||
<span className='text-xl font-bold'>GasNetwork</span>
|
<span className='text-xl font-bold'>{t('common.name')}</span>
|
||||||
</div>
|
</div>
|
||||||
<p className='mb-4 text-gray-400'>{t('home.hero.description')}</p>
|
<p className='mb-4 text-gray-400'>{t('home.hero.description')}</p>
|
||||||
<div className='flex space-x-4'>
|
<div className='flex space-x-4'>
|
||||||
@ -122,7 +122,7 @@ export const Footer = () => {
|
|||||||
</div>
|
</div>
|
||||||
<div className='mt-8 border-t border-gray-800 pt-8 text-center text-gray-400'>
|
<div className='mt-8 border-t border-gray-800 pt-8 text-center text-gray-400'>
|
||||||
<p>
|
<p>
|
||||||
© {new Date().getFullYear()} GasNetwork.{' '}
|
© {new Date().getFullYear()} {t("common.name")}.{' '}
|
||||||
{t('common.footer.rights')}
|
{t('common.footer.rights')}
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@ -60,10 +60,10 @@ export function DesktopNav() {
|
|||||||
</NavigationMenuLink>
|
</NavigationMenuLink>
|
||||||
</li>
|
</li>
|
||||||
<ListItem href='/clients/loyalty' title='Программа лояльности'>
|
<ListItem href='/clients/loyalty' title='Программа лояльности'>
|
||||||
Накапливайте баллы и получайте скидки на топливо и услуги
|
{t('clients.header.loyalty.description')}
|
||||||
</ListItem>
|
</ListItem>
|
||||||
<ListItem href='/clients/certificates' title='Сертификаты'>
|
<ListItem href='/clients/certificates' title='Сертификаты'>
|
||||||
Подарочные сертификаты на топливо и услуги нашей сети
|
{t('clients.header.certificates.description')}
|
||||||
</ListItem>
|
</ListItem>
|
||||||
</ul>
|
</ul>
|
||||||
</NavigationMenuContent>
|
</NavigationMenuContent>
|
||||||
|
|||||||
@ -11,11 +11,14 @@ import {
|
|||||||
CollapsibleTrigger,
|
CollapsibleTrigger,
|
||||||
} from '@/shared/shadcn-ui/collapsible';
|
} from '@/shared/shadcn-ui/collapsible';
|
||||||
import { Sheet, SheetContent, SheetTrigger } from '@/shared/shadcn-ui/sheet';
|
import { Sheet, SheetContent, SheetTrigger } from '@/shared/shadcn-ui/sheet';
|
||||||
|
import { useLanguage } from '@/shared/language';
|
||||||
|
|
||||||
export function MobileNav() {
|
export function MobileNav() {
|
||||||
const [open, setOpen] = useState(false);
|
const [open, setOpen] = useState(false);
|
||||||
const [clientsOpen, setClientsOpen] = useState(false);
|
const [clientsOpen, setClientsOpen] = useState(false);
|
||||||
|
|
||||||
|
const {t} = useLanguage();
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<Sheet open={open} onOpenChange={setOpen}>
|
<Sheet open={open} onOpenChange={setOpen}>
|
||||||
<SheetTrigger asChild>
|
<SheetTrigger asChild>
|
||||||
@ -31,19 +34,19 @@ export function MobileNav() {
|
|||||||
onClick={() => setOpen(false)}
|
onClick={() => setOpen(false)}
|
||||||
className='text-lg font-medium transition-colors hover:text-red-600'
|
className='text-lg font-medium transition-colors hover:text-red-600'
|
||||||
>
|
>
|
||||||
Главная
|
{t("common.navigation.home")}
|
||||||
</Link>
|
</Link>
|
||||||
<Link
|
<Link
|
||||||
href='/about'
|
href='/about'
|
||||||
onClick={() => setOpen(false)}
|
onClick={() => setOpen(false)}
|
||||||
className='text-lg font-medium transition-colors hover:text-red-600'
|
className='text-lg font-medium transition-colors hover:text-red-600'
|
||||||
>
|
>
|
||||||
О нас
|
{t("common.navigation.about")}
|
||||||
</Link>
|
</Link>
|
||||||
|
|
||||||
<Collapsible open={clientsOpen} onOpenChange={setClientsOpen}>
|
<Collapsible open={clientsOpen} onOpenChange={setClientsOpen}>
|
||||||
<CollapsibleTrigger className='data-[state=open]:animate-collapsible-down data-[state=closed]:animate-collapsible-up flex w-full items-center justify-between text-lg font-medium transition-all hover:text-red-600'>
|
<CollapsibleTrigger className='data-[state=open]:animate-collapsible-down data-[state=closed]:animate-collapsible-up flex w-full items-center justify-between text-lg font-medium transition-all hover:text-red-600'>
|
||||||
<span>Клиентам</span>
|
<span>{t("common.navigation.clients")}</span>
|
||||||
{clientsOpen ? (
|
{clientsOpen ? (
|
||||||
<ChevronDown className='h-5 w-5' />
|
<ChevronDown className='h-5 w-5' />
|
||||||
) : (
|
) : (
|
||||||
@ -56,28 +59,14 @@ export function MobileNav() {
|
|||||||
onClick={() => setOpen(false)}
|
onClick={() => setOpen(false)}
|
||||||
className='block py-1 text-base transition-colors hover:text-red-600'
|
className='block py-1 text-base transition-colors hover:text-red-600'
|
||||||
>
|
>
|
||||||
Программа лояльности
|
{t("common.navigation.loyatly")}
|
||||||
</Link>
|
|
||||||
<Link
|
|
||||||
href='/clients/fuel-card'
|
|
||||||
onClick={() => setOpen(false)}
|
|
||||||
className='block py-1 text-base transition-colors hover:text-red-600'
|
|
||||||
>
|
|
||||||
Топливная карта
|
|
||||||
</Link>
|
</Link>
|
||||||
<Link
|
<Link
|
||||||
href='/clients/certificates'
|
href='/clients/certificates'
|
||||||
onClick={() => setOpen(false)}
|
onClick={() => setOpen(false)}
|
||||||
className='block py-1 text-base transition-colors hover:text-red-600'
|
className='block py-1 text-base transition-colors hover:text-red-600'
|
||||||
>
|
>
|
||||||
Сертификаты
|
{t("common.navigation.certificates")}
|
||||||
</Link>
|
|
||||||
<Link
|
|
||||||
href='/clients/payment'
|
|
||||||
onClick={() => setOpen(false)}
|
|
||||||
className='block py-1 text-base transition-colors hover:text-red-600'
|
|
||||||
>
|
|
||||||
Способы оплаты
|
|
||||||
</Link>
|
</Link>
|
||||||
</CollapsibleContent>
|
</CollapsibleContent>
|
||||||
</Collapsible>
|
</Collapsible>
|
||||||
@ -87,35 +76,35 @@ export function MobileNav() {
|
|||||||
onClick={() => setOpen(false)}
|
onClick={() => setOpen(false)}
|
||||||
className='text-lg font-medium transition-colors hover:text-red-600'
|
className='text-lg font-medium transition-colors hover:text-red-600'
|
||||||
>
|
>
|
||||||
Наши заправки
|
{t("common.navigation.stations")}
|
||||||
</Link>
|
</Link>
|
||||||
<Link
|
<Link
|
||||||
href='/#vacancies'
|
href='/#vacancies'
|
||||||
onClick={() => setOpen(false)}
|
onClick={() => setOpen(false)}
|
||||||
className='text-lg font-medium transition-colors hover:text-red-600'
|
className='text-lg font-medium transition-colors hover:text-red-600'
|
||||||
>
|
>
|
||||||
Вакансии
|
{t("common.navigation.vacancies")}
|
||||||
</Link>
|
</Link>
|
||||||
<Link
|
<Link
|
||||||
href='/#promotions'
|
href='/#promotions'
|
||||||
onClick={() => setOpen(false)}
|
onClick={() => setOpen(false)}
|
||||||
className='text-lg font-medium transition-colors hover:text-red-600'
|
className='text-lg font-medium transition-colors hover:text-red-600'
|
||||||
>
|
>
|
||||||
Акции
|
{t("common.navigation.promotions")}
|
||||||
</Link>
|
</Link>
|
||||||
<Link
|
<Link
|
||||||
href='/#partners'
|
href='/#partners'
|
||||||
onClick={() => setOpen(false)}
|
onClick={() => setOpen(false)}
|
||||||
className='text-lg font-medium transition-colors hover:text-red-600'
|
className='text-lg font-medium transition-colors hover:text-red-600'
|
||||||
>
|
>
|
||||||
Партнеры
|
{t("common.navigation.partners")}
|
||||||
</Link>
|
</Link>
|
||||||
<Link
|
<Link
|
||||||
href='/#charity'
|
href='/#charity'
|
||||||
onClick={() => setOpen(false)}
|
onClick={() => setOpen(false)}
|
||||||
className='text-lg font-medium transition-colors hover:text-red-600'
|
className='text-lg font-medium transition-colors hover:text-red-600'
|
||||||
>
|
>
|
||||||
Благотворительность
|
{t("common.navigation.charity")}
|
||||||
</Link>
|
</Link>
|
||||||
</nav>
|
</nav>
|
||||||
</SheetContent>
|
</SheetContent>
|
||||||
|
|||||||
@ -1,4 +1,4 @@
|
|||||||
'use client';
|
"use client";
|
||||||
|
|
||||||
import { format, subMonths } from 'date-fns';
|
import { format, subMonths } from 'date-fns';
|
||||||
import { ru } from 'date-fns/locale';
|
import { ru } from 'date-fns/locale';
|
||||||
@ -21,6 +21,7 @@ import {
|
|||||||
TableHeader,
|
TableHeader,
|
||||||
TableRow,
|
TableRow,
|
||||||
} from '@/shared/shadcn-ui/table';
|
} from '@/shared/shadcn-ui/table';
|
||||||
|
import { useLanguage } from '@/shared/language';
|
||||||
|
|
||||||
// Sample customer data
|
// Sample customer data
|
||||||
const customerData = {
|
const customerData = {
|
||||||
@ -99,15 +100,17 @@ export const TransactionsTable = () => {
|
|||||||
setFilteredTransactions(filtered);
|
setFilteredTransactions(filtered);
|
||||||
};
|
};
|
||||||
|
|
||||||
|
const {t} = useLanguage();
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className='space-y-6'>
|
<div className='space-y-6'>
|
||||||
<div className='flex flex-col items-start justify-between gap-4 md:flex-row md:items-center'>
|
<div className='flex flex-col items-start justify-between gap-4 md:flex-row md:items-center'>
|
||||||
<h2 className='text-2xl font-bold'>История операций</h2>
|
<h2 className='text-2xl font-bold'>{t('corporate.transactions.title')}</h2>
|
||||||
|
|
||||||
<div className='flex w-full flex-col gap-4 md:w-auto md:flex-row'>
|
<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='grid grid-cols-2 gap-2'>
|
||||||
<div className='flex items-center gap-2'>
|
<div className='flex items-center gap-2'>
|
||||||
<Label htmlFor='start-date'>От</Label>
|
<Label htmlFor='start-date'>{t('corporate.transactions.dateFrom')}</Label>
|
||||||
<Popover>
|
<Popover>
|
||||||
<PopoverTrigger asChild>
|
<PopoverTrigger asChild>
|
||||||
<Button
|
<Button
|
||||||
@ -132,7 +135,7 @@ export const TransactionsTable = () => {
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div className='flex items-center gap-2'>
|
<div className='flex items-center gap-2'>
|
||||||
<Label htmlFor='end-date'>До</Label>
|
<Label htmlFor='end-date'>{t('corporate.transactions.dateTo')}</Label>
|
||||||
<Popover>
|
<Popover>
|
||||||
<PopoverTrigger asChild>
|
<PopoverTrigger asChild>
|
||||||
<Button
|
<Button
|
||||||
@ -142,7 +145,7 @@ export const TransactionsTable = () => {
|
|||||||
<CalendarIcon className='mr-2 h-4 w-4' />
|
<CalendarIcon className='mr-2 h-4 w-4' />
|
||||||
{endDate
|
{endDate
|
||||||
? format(endDate, 'PP', { locale: ru })
|
? format(endDate, 'PP', { locale: ru })
|
||||||
: 'Выберите дату'}
|
: t('corporate.transactions.selectDate')}
|
||||||
</Button>
|
</Button>
|
||||||
</PopoverTrigger>
|
</PopoverTrigger>
|
||||||
<PopoverContent className='w-auto p-0'>
|
<PopoverContent className='w-auto p-0'>
|
||||||
@ -161,7 +164,7 @@ export const TransactionsTable = () => {
|
|||||||
className='mt-auto bg-red-600 hover:bg-red-700'
|
className='mt-auto bg-red-600 hover:bg-red-700'
|
||||||
onClick={filterTransactions}
|
onClick={filterTransactions}
|
||||||
>
|
>
|
||||||
Применить
|
{t('corporate.transactions.applyButton')}
|
||||||
</Button>
|
</Button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@ -170,12 +173,12 @@ export const TransactionsTable = () => {
|
|||||||
<Table>
|
<Table>
|
||||||
<TableHeader>
|
<TableHeader>
|
||||||
<TableRow>
|
<TableRow>
|
||||||
<TableHead>Дата</TableHead>
|
<TableHead>{t('corporate.transactions.tableHeaders.date')}</TableHead>
|
||||||
<TableHead>Станция</TableHead>
|
<TableHead>{t('corporate.transactions.tableHeaders.station')}</TableHead>
|
||||||
<TableHead>Продукт</TableHead>
|
<TableHead>{t('corporate.transactions.tableHeaders.product')}</TableHead>
|
||||||
<TableHead className='text-right'>Кол-во (л)</TableHead>
|
<TableHead className='text-right'>{t('corporate.transactions.tableHeaders.quantity')}</TableHead>
|
||||||
<TableHead className='text-right'>Стоимость</TableHead>
|
<TableHead className='text-right'>{t('corporate.transactions.tableHeaders.price')}</TableHead>
|
||||||
<TableHead className='text-right'>Сумма</TableHead>
|
<TableHead className='text-right'>{t('corporate.transactions.tableHeaders.total')}</TableHead>
|
||||||
</TableRow>
|
</TableRow>
|
||||||
</TableHeader>
|
</TableHeader>
|
||||||
<TableBody>
|
<TableBody>
|
||||||
@ -191,10 +194,10 @@ export const TransactionsTable = () => {
|
|||||||
{transaction.quantity}
|
{transaction.quantity}
|
||||||
</TableCell>
|
</TableCell>
|
||||||
<TableCell className='text-right'>
|
<TableCell className='text-right'>
|
||||||
{transaction.cost.toFixed(2)} сомони
|
{transaction.cost.toFixed(2)} {t('corporate.currency')}
|
||||||
</TableCell>
|
</TableCell>
|
||||||
<TableCell className='text-right font-medium'>
|
<TableCell className='text-right font-medium'>
|
||||||
{transaction.total.toFixed(2)} сомони
|
{transaction.total.toFixed(2)} {t('corporate.currency')}
|
||||||
</TableCell>
|
</TableCell>
|
||||||
</TableRow>
|
</TableRow>
|
||||||
))
|
))
|
||||||
@ -204,13 +207,13 @@ export const TransactionsTable = () => {
|
|||||||
colSpan={6}
|
colSpan={6}
|
||||||
className='py-6 text-center text-gray-500'
|
className='py-6 text-center text-gray-500'
|
||||||
>
|
>
|
||||||
Нет операций за выбранный период
|
{t('corporate.transactions.noTransactions')}
|
||||||
</TableCell>
|
</TableCell>
|
||||||
</TableRow>
|
</TableRow>
|
||||||
)}
|
)}
|
||||||
</TableBody>
|
</TableBody>
|
||||||
</Table>
|
</Table>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user