Samandar/gastro-bot
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

history responsive mobile

Browse Source
This commit is contained in:
Samandar Turgunboyev
2026-02-19 15:20:39 +05:00
parent f3e0c3e2be
commit 734087aac5
6 changed files with 90 additions and 109 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
src/features/auth/ui/Login.tsx
View File

@@ -1,7 +1,7 @@
'use client';
import { Link, useRouter } from '@/shared/config/i18n/navigation';
import { setRefToken, setToken, setUser } from '@/shared/lib/token';
import { setRefToken, setToken } from '@/shared/lib/token';
import { Button } from '@/shared/ui/button';
import {
Form,
@@ -41,11 +41,11 @@ const Login = () => {
tg_id?: string;
}) => auth_api.login(body),
onSuccess: (res) => {
router.push('/');
queryClient.refetchQueries({ queryKey: ['all_products'] });
queryClient.refetchQueries({ queryKey: ['list'] });
setToken(res.data.access);
setRefToken(res.data.refresh);
setUser(form.getValues('username'));
router.push('/');
queryClient.refetchQueries();
},
onError: () => {
toast.error(t('Username yoki parol xato kiritildi'), {

10
src/features/cart/ui/OrderPage.tsx
View File

@@ -63,12 +63,10 @@ interface CoordsData {
// Yetkazib berish vaqt oraliqlar
const deliveryTimeSlots = [
{ id: 1, label: '09:00 - 11:00', start: '09:00', end: '11:00' },
{ id: 2, label: '11:00 - 13:00', start: '11:00', end: '13:00' },
{ id: 3, label: '13:00 - 15:00', start: '13:00', end: '15:00' },
{ id: 4, label: '15:00 - 17:00', start: '15:00', end: '17:00' },
{ id: 5, label: '17:00 - 19:00', start: '17:00', end: '19:00' },
{ id: 6, label: '19:00 - 21:00', start: '19:00', end: '21:00' },
{ id: 1, label: '10:00 - 12:00', start: '10:00', end: '12:00' },
{ id: 2, label: '12:00 - 14:00', start: '12:00', end: '14:00' },
{ id: 3, label: '14:00 - 16:00', start: '14:00', end: '16:00' },
{ id: 4, label: '16:00 - 18:00', start: '16:00', end: '18:00' },
];
const OrderPage = () => {

157
src/features/profile/ui/History.tsx
View File

@@ -16,27 +16,18 @@ import {
} from 'lucide-react';
import { useTranslations } from 'next-intl';
import Image from 'next/image';
import { useSearchParams } from 'next/navigation';
import { useEffect, useState } from 'react';
import { order_api, OrderList } from '../lib/api';
const HistoryTabs = () => {
const t = useTranslations();
const searchParams = useSearchParams();
const [page, setPage] = useState(1);
const router = useRouter();
const { data, isLoading } = useQuery({
queryKey: ['order_list', page],
queryKey: ['order_list'],
queryFn: () => order_api.list(),
select: (res) => res.data,
});
useEffect(() => {
const urlPage = Number(searchParams.get('page')) || 1;
setPage(urlPage);
}, [searchParams]);
if (isLoading) {
return (
<div className="flex items-center justify-center py-12">
@@ -47,7 +38,7 @@ const HistoryTabs = () => {
if (!data || data.length === 0) {
return (
<div className="flex flex-col items-center justify-center py-16 text-center">
<div className="flex flex-col items-center justify-center py-16 text-center px-4">
<div className="bg-gray-100 p-6 rounded-full mb-4">
<Package className="w-16 h-16 text-gray-400" />
</div>
@@ -68,9 +59,9 @@ const HistoryTabs = () => {
}
return (
<div className="max-w-5xl mx-auto">
<div className="max-w-5xl mx-auto px-3 md:px-0">
{/* Header */}
<div className="flex items-center justify-between mb-6 pb-4 border-b">
<div className="flex flex-col md:flex-row md:items-center justify-between mb-6 pb-4 border-b gap-2">
<div>
<h2 className="text-2xl md:text-3xl font-bold text-gray-900">
{t('Buyurtmalar tarixi')}
@@ -82,8 +73,8 @@ const HistoryTabs = () => {
</div>
{/* Orders List */}
<div className="space-y-6">
{data?.map((order: OrderList) => {
<div className="space-y-4 md:space-y-6">
{data.map((order: OrderList) => {
const totalPrice = order.items.reduce(
(sum, item) => sum + Number(item.price) * item.quantity,
0,
@@ -96,7 +87,7 @@ const HistoryTabs = () => {
>
<CardContent className="p-0">
{/* Order Header */}
<div className="bg-gradient-to-r from-blue-50 to-indigo-50 p-4 border-b-2 border-gray-200">
<div className="bg-gradient-to-r from-blue-50 to-indigo-50 p-3 md:p-4 border-b-2 border-gray-200">
<div className="flex flex-col md:flex-row md:items-center justify-between gap-3">
<div className="flex items-center gap-3">
<div className="bg-blue-600 text-white px-3 py-1 rounded-full text-sm font-bold">
@@ -143,11 +134,10 @@ const HistoryTabs = () => {
</div>
{/* Products */}
<div className="p-4 space-y-3">
{order?.items?.map((item, index) => {
<div className="p-3 md:p-4 space-y-3">
{order.items.map((item, index) => {
const product = item.product;
// Get product image
const productImage = product.images?.[0]?.images
? product.images[0].images.includes(BASE_URL)
? product.images[0].images
@@ -157,13 +147,12 @@ const HistoryTabs = () => {
return (
<div
key={item.id}
className="border-2 border-gray-100 rounded-xl p-4 bg-gradient-to-br from-white to-gray-50 hover:shadow-md transition-shadow"
className="border-2 border-gray-100 rounded-xl p-3 md:p-4 bg-gradient-to-br from-white to-gray-50 hover:shadow-md transition-shadow"
>
{/* Product Header with Image */}
<div className="flex gap-4 mb-3">
{/* Product Image */}
<div className="flex gap-3 md:gap-4">
{/* Image */}
<div className="flex-shrink-0">
<div className="w-20 h-20 md:w-24 md:h-24 bg-gray-100 rounded-lg overflow-hidden border-2 border-gray-200">
<div className="w-16 h-16 md:w-24 md:h-24 bg-gray-100 rounded-lg overflow-hidden border-2 border-gray-200">
<Image
src={productImage}
alt={product.name}
@@ -175,56 +164,59 @@ const HistoryTabs = () => {
</div>
</div>
{/* Product Info */}
{/* Info */}
<div className="flex-1 min-w-0">
<div className="flex items-start justify-between gap-3 mb-2">
<div className="flex-1 min-w-0">
<div className="flex items-center gap-2 mb-2">
<div className="flex flex-col md:flex-row md:items-start md:justify-between gap-2 mb-2">
<div className="min-w-0">
<div className="flex items-center gap-2 mb-1">
<span className="bg-blue-100 text-blue-800 text-xs font-semibold px-2 py-1 rounded">
{index + 1}
</span>
<h3 className="font-bold text-base md:text-lg text-gray-900 truncate">
<h3 className="font-bold text-sm md:text-lg text-gray-900 truncate">
{product.name}
</h3>
</div>
{product.short_name && (
<p className="text-sm text-gray-600 line-clamp-2">
<p className="text-xs md:text-sm text-gray-600 line-clamp-2">
{product.short_name}
</p>
)}
</div>
<div className="text-right flex-shrink-0">
<p className="text-xs text-gray-500 mb-1">
<div className="text-left md:text-right">
<p className="text-xs text-gray-500">
{t('Mahsulotlar narxi')}
</p>
<p className="text-lg font-bold text-blue-600">
<p className="text-base md:text-lg font-bold text-blue-600">
{formatPrice(Number(item.price), true)}
</p>
</div>
</div>
</div>
</div>
{/* Product Details Grid */}
<div className="grid grid-cols-2 gap-3 p-3 bg-white rounded-lg border border-gray-200">
<div className="flex flex-col">
<span className="text-xs text-gray-500 mb-1">
{t('Miqdor')}
</span>
<span className="text-base font-bold text-gray-900">
{item?.quantity}
</span>
</div>
<div className="flex flex-col items-end">
<span className="text-xs text-gray-500 mb-1">
{t('Jami')}
</span>
<span className="text-base font-bold text-green-600">
{formatPrice(
Number(item.price) * item.quantity,
true,
)}
</span>
{/* Details */}
<div className="grid grid-cols-2 gap-2 md:gap-3 p-2 md:p-3 bg-white rounded-lg border border-gray-200">
<div>
<span className="text-xs text-gray-500">
{t('Miqdor')}
</span>
<p className="text-sm md:text-base font-bold">
{item.quantity}
</p>
</div>
<div className="text-right">
<span className="text-xs text-gray-500">
{t('Jami')}
</span>
<p className="text-sm md:text-base font-bold text-green-600">
{formatPrice(
Number(item.price) * item.quantity,
true,
)}
</p>
</div>
</div>
</div>
</div>
</div>
@@ -232,54 +224,45 @@ const HistoryTabs = () => {
})}
</div>
{/* Order Footer */}
<div className="bg-gradient-to-r from-gray-50 to-blue-50 p-4 border-t-2 border-gray-200">
{/* Price Breakdown */}
<div className="mb-4 space-y-2">
<div className="flex justify-between text-sm text-gray-600">
{/* Footer */}
<div className="bg-gradient-to-r from-gray-50 to-blue-50 p-3 md:p-4 border-t-2 border-gray-200">
<div className="space-y-1 md:space-y-2 text-sm">
<div className="flex justify-between text-gray-600">
<span>{t('Mahsulotlar narxi')}:</span>
<span className="font-semibold">
{formatPrice(totalPrice, true)}
</span>
</div>
<div className="flex justify-between text-sm text-gray-600">
<div className="flex justify-between text-gray-600">
<span>{t('Mahsulotlar soni')}:</span>
<span className="font-semibold">
{order.items.reduce(
(sum, item) => sum + item.quantity,
0,
)}
)}{' '}
{t('dona')}
</span>
</div>
<div className="border-t-2 border-dashed border-gray-300 pt-2 mt-2">
<div className="flex justify-between items-center">
<span className="text-base font-bold text-gray-800">
{t('Umumiy summa')}:
</span>
<span className="text-2xl font-bold text-green-600">
{formatPrice(totalPrice, true)}
</span>
</div>
<div className="border-t border-dashed pt-2 flex justify-between items-center">
<span className="font-bold">{t('Umumiy summa')}:</span>
<span className="text-lg md:text-2xl font-bold text-green-600">
{formatPrice(totalPrice, true)}
</span>
</div>
</div>
<div className="flex flex-col md:flex-row items-center justify-between gap-4">
{/* Actions */}
<div className="flex gap-2 w-full md:w-auto">
<Button
variant="outline"
size="default"
onClick={() =>
router.push(`/profile/refresh-order?id=${order.id}`)
}
className="flex-1 md:flex-none gap-2 font-semibold hover:bg-blue-50 hover:text-blue-600 hover:border-blue-600 transition-colors"
>
<RefreshCw className="w-4 h-4" />
{t('Qayta buyurtma')}
</Button>
</div>
</div>
<Button
variant="outline"
onClick={() =>
router.push(`/profile/refresh-order?id=${order.id}`)
}
className="w-full md:w-auto mt-3 gap-2"
>
<RefreshCw className="w-4 h-4" />
{t('Qayta buyurtma')}
</Button>
</div>
</CardContent>
</Card>

6
src/features/profile/ui/Profile.tsx
View File

@@ -115,11 +115,11 @@ const Profile = () => {
<Button
variant="ghost"
onClick={() => {
queryClient.refetchQueries();
setCartId(null);
router.push('/');
removeToken();
removeRefToken();
router.push('/');
setCartId(null);
queryClient.refetchQueries();
}}
className="w-full justify-start gap-3 text-red-500 hover:text-red-600 hover:bg-red-50 mt-4"
>

16
src/features/profile/ui/RefreshOrder.tsx
View File

@@ -56,14 +56,11 @@ import z from 'zod';
import { order_api } from '../lib/api';
const deliveryTimeSlots = [
{ id: 1, label: '09:00 - 11:00', start: '09:00', end: '11:00' },
{ id: 2, label: '11:00 - 13:00', start: '11:00', end: '13:00' },
{ id: 3, label: '13:00 - 15:00', start: '13:00', end: '15:00' },
{ id: 4, label: '15:00 - 17:00', start: '15:00', end: '17:00' },
{ id: 5, label: '17:00 - 19:00', start: '17:00', end: '19:00' },
{ id: 6, label: '19:00 - 21:00', start: '19:00', end: '21:00' },
{ id: 1, label: '10:00 - 12:00', start: '10:00', end: '12:00' },
{ id: 2, label: '12:00 - 14:00', start: '12:00', end: '14:00' },
{ id: 3, label: '14:00 - 16:00', start: '14:00', end: '16:00' },
{ id: 4, label: '16:00 - 18:00', start: '16:00', end: '18:00' },
];
interface CoordsData {
lat: number;
lon: number;
@@ -250,7 +247,10 @@ const RefreshOrder = () => {
filial_code: 'dodge',
delivery_date: formatDate.format(deliveryDate, 'DD.MM.YYYY'),
room_code: '100',
deal_time: formatDate.format(deliveryDate, 'DD.MM.YYYY'),
deal_time:
formatDate.format(deliveryDate, 'DD.MM.YYYY') +
' ' +
selectedTimeSlot,
robot_code: 'r2',
status: 'B#N',
sales_manager_code: '1',