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'; 'use client';
import { Link, useRouter } from '@/shared/config/i18n/navigation'; 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 { Button } from '@/shared/ui/button';
import { import {
Form, Form,
@@ -41,11 +41,11 @@ const Login = () => {
tg_id?: string; tg_id?: string;
}) => auth_api.login(body), }) => auth_api.login(body),
onSuccess: (res) => { onSuccess: (res) => {
router.push('/');
queryClient.refetchQueries({ queryKey: ['all_products'] });
queryClient.refetchQueries({ queryKey: ['list'] });
setToken(res.data.access); setToken(res.data.access);
setRefToken(res.data.refresh); setRefToken(res.data.refresh);
setUser(form.getValues('username'));
router.push('/');
queryClient.refetchQueries();
}, },
onError: () => { onError: () => {
toast.error(t('Username yoki parol xato kiritildi'), { 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 // Yetkazib berish vaqt oraliqlar
const deliveryTimeSlots = [ const deliveryTimeSlots = [
{ id: 1, label: '09:00 - 11:00', start: '09:00', end: '11:00' }, { id: 1, label: '10:00 - 12:00', start: '10:00', end: '12:00' },
{ id: 2, label: '11:00 - 13:00', start: '11:00', end: '13:00' }, { id: 2, label: '12:00 - 14:00', start: '12:00', end: '14:00' },
{ id: 3, label: '13:00 - 15:00', start: '13:00', end: '15:00' }, { id: 3, label: '14:00 - 16:00', start: '14:00', end: '16:00' },
{ id: 4, label: '15:00 - 17:00', start: '15:00', end: '17:00' }, { id: 4, label: '16:00 - 18:00', start: '16:00', end: '18: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' },
]; ];
const OrderPage = () => { const OrderPage = () => {

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

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

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

@@ -115,11 +115,11 @@ const Profile = () => {
<Button <Button
variant="ghost" variant="ghost"
onClick={() => { onClick={() => {
queryClient.refetchQueries(); router.push('/');
setCartId(null);
removeToken(); removeToken();
removeRefToken(); 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" 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'; import { order_api } from '../lib/api';
const deliveryTimeSlots = [ const deliveryTimeSlots = [
{ id: 1, label: '09:00 - 11:00', start: '09:00', end: '11:00' }, { id: 1, label: '10:00 - 12:00', start: '10:00', end: '12:00' },
{ id: 2, label: '11:00 - 13:00', start: '11:00', end: '13:00' }, { id: 2, label: '12:00 - 14:00', start: '12:00', end: '14:00' },
{ id: 3, label: '13:00 - 15:00', start: '13:00', end: '15:00' }, { id: 3, label: '14:00 - 16:00', start: '14:00', end: '16:00' },
{ id: 4, label: '15:00 - 17:00', start: '15:00', end: '17:00' }, { id: 4, label: '16:00 - 18:00', start: '16:00', end: '18: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' },
]; ];
interface CoordsData { interface CoordsData {
lat: number; lat: number;
lon: number; lon: number;
@@ -250,7 +247,10 @@ const RefreshOrder = () => {
filial_code: 'dodge', filial_code: 'dodge',
delivery_date: formatDate.format(deliveryDate, 'DD.MM.YYYY'), delivery_date: formatDate.format(deliveryDate, 'DD.MM.YYYY'),
room_code: '100', room_code: '100',
deal_time: formatDate.format(deliveryDate, 'DD.MM.YYYY'), deal_time:
formatDate.format(deliveryDate, 'DD.MM.YYYY') +
' ' +
selectedTimeSlot,
robot_code: 'r2', robot_code: 'r2',
status: 'B#N', status: 'B#N',
sales_manager_code: '1', sales_manager_code: '1',

2
src/widgets/categories/ui/product-card.tsx
View File

@@ -267,7 +267,7 @@ export function ProductCard({
{product.prices.length > 0 && ( {product.prices.length > 0 && (
<p className="text-lg font-bold"> <p className="text-lg font-bold">
{formatPrice( {formatPrice(
Math.min(...product.prices.map((p) => Number(p.price))), Math.max(...product.prices.map((p) => Number(p.price))),
true, true,
)} )}
<span className="text-sm text-slate-500 ml-1"> <span className="text-sm text-slate-500 ml-1">