jelaletdin/smart-electronics-frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

changed some color and fix some styles

Browse Source
This commit is contained in:
@jcarymuhammedow
2026-02-07 16:06:33 +05:00
parent 022c7290b4
commit b27b8436d1
34 changed files with 999 additions and 368 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
features/orders/components/EmptyOrders.tsx
View File

@@ -8,21 +8,21 @@ export default function EmptyOrders() {
const router=useRouter();
return (
<div className="flex min-h-[60vh] items-center justify-center px-4">
<div className="w-full max-w-md rounded-2xl bg-linear-to-br from-blue-50 to-white p-8 text-center shadow-lg">
<div className="w-full max-w-md rounded-3xl bg-gradient-to-br from-gray-50 to-white p-12 text-center shadow-xl border border-gray-100">
<div className="mx-auto mb-6 flex h-20 w-20 items-center justify-center rounded-full bg-blue-100">
<ShoppingCart className="h-10 w-10 text-blue-600" />
<ShoppingCart className="h-12 w-12 text-gray-700" />
</div>
<h2 className="mb-2 text-2xl font-semibold text-gray-900">
{t("orders_empty")}
</h2>
<p className="mb-6 text-sm text-gray-500">
<p className="mb-8 text-base text-gray-600 leading-relaxed">
{t("orders_empty_message")}
</p>
<Button onClick={()=>router.push("/")} className="w-full rounded-lg cursor-pointer bg-blue-600 px-6 py-3 text-sm font-medium text-white transition hover:bg-blue-700 active:scale-95">
{t("start_shopping")}
<Button onClick={()=>router.push("/")} className="w-full cursor-pointer rounded-2xl bg-gradient-to-r from-gray-900 to-gray-800 hover:from-gray-800 hover:to-gray-700 px-8 py-6 text-base font-bold text-white shadow-lg hover:shadow-xl transition-all duration-300 active:scale-95"
> {t("start_shopping")}
</Button>
</div>
</div>

179
features/orders/components/OrderPage.tsx
View File

@@ -88,7 +88,7 @@ export default function OrdersPageClient({ locale }: OrdersPageClientProps) {
return (
<Badge
variant="outline"
className="bg-yellow-50 text-yellow-700 border-yellow-300"
className="bg-amber-50 text-amber-700 border-amber-300 font-semibold"
>
{status}
</Badge>
@@ -100,7 +100,10 @@ export default function OrdersPageClient({ locale }: OrdersPageClientProps) {
lowerStatus.includes("işlenýär")
) {
return (
<Badge variant="secondary" className="bg-blue-50 text-blue-700">
<Badge
variant="secondary"
className="bg-gray-100 text-gray-900 font-semibold"
>
{status}
</Badge>
);
@@ -110,24 +113,36 @@ export default function OrdersPageClient({ locale }: OrdersPageClientProps) {
lowerStatus.includes("shipped") ||
lowerStatus.includes("iberildi")
) {
return <Badge className="bg-purple-500">{status}</Badge>;
return (
<Badge className="bg-indigo-500 hover:bg-indigo-500 font-semibold">
{status}
</Badge>
);
}
if (
lowerStatus.includes("доставлен") ||
lowerStatus.includes("delivered") ||
lowerStatus.includes("eltildi")
) {
return <Badge className="bg-green-600">{status}</Badge>;
return (
<Badge className="bg-emerald-600 hover:bg-emerald-600 font-semibold">
{status}
</Badge>
);
}
if (
lowerStatus.includes("отменен") ||
lowerStatus.includes("cancelled") ||
lowerStatus.includes("ýatyryldy")
) {
return <Badge variant="destructive">{status}</Badge>;
return (
<Badge className="bg-red-600 hover:bg-red-600 font-semibold">
{status}
</Badge>
);
}
return <Badge>{status}</Badge>;
return <Badge className="font-semibold">{status}</Badge>;
}, []);
const isActiveOrder = useCallback((status: string) => {
@@ -147,11 +162,11 @@ export default function OrdersPageClient({ locale }: OrdersPageClientProps) {
const activeOrders = useMemo(
() => orders?.filter((o) => isActiveOrder(o.status)) || [],
[orders, isActiveOrder]
[orders, isActiveOrder],
);
const completedOrders = useMemo(
() => orders?.filter((o) => !isActiveOrder(o.status)) || [],
[orders, isActiveOrder]
[orders, isActiveOrder],
);
const calculateTotal = useCallback((order: Order) => {
@@ -163,38 +178,39 @@ export default function OrdersPageClient({ locale }: OrdersPageClientProps) {
if (isLoading) {
return (
<div className="mx-auto p-2 lg:p-6 md:p-4 mb-16 min-h-screen">
<h1 className="text-xl md:text-2xl lg:text-3xl font-bold mb-6">
<h1 className="text-xl md:text-2xl lg:text-3xl font-bold mb-6 text-gray-900">
{t("my_orders")}
</h1>
{/* Tabs Skeleton */}
<div className="mb-4 md:mb-6">
<div className="flex gap-2 mb-4">
<Skeleton className="h-10 w-32 rounded-md" />
<Skeleton className="h-10 w-32 rounded-md" />
<Skeleton className="h-10 w-32 rounded-xl" />
<Skeleton className="h-10 w-32 rounded-xl" />
</div>
</div>
{/* Order Cards Skeleton */}
<div className="space-y-4">
{Array.from({ length: 3 }).map((_, i) => (
<Card key={i} className="overflow-hidden py-2 md:py-4 lg:py-6">
<Card
key={i}
className="overflow-hidden py-2 md:py-4 lg:py-6 rounded-2xl border border-gray-200"
>
<div className="p-2 md:p-4 mx-2 md:mx-4 rounded-lg">
<div className="flex items-center justify-between">
{/* Left side - Order info */}
<div className="flex items-center gap-4 flex-1">
<Skeleton className="h-5 w-5 rounded" />
<div className="space-y-2">
<Skeleton className="h-5 w-32" />
<Skeleton className="h-4 w-24" />
<Skeleton className="h-5 w-32 rounded-lg" />
<Skeleton className="h-4 w-24 rounded-lg" />
</div>
</div>
{/* Right side - Status and price */}
<div className="flex items-center gap-4">
<div className="flex flex-col md:flex-row gap-2 items-end">
<Skeleton className="h-6 w-20 rounded-full" />
<Skeleton className="h-6 w-24" />
<Skeleton className="h-6 w-24 rounded-lg" />
</div>
<Skeleton className="h-5 w-5 rounded" />
</div>
@@ -215,17 +231,23 @@ export default function OrdersPageClient({ locale }: OrdersPageClientProps) {
}
return (
<div className=" mx-auto p-2 lg:p-6 md:p-4 mb-16 min-h-screen">
<h1 className="text-xl md:text-2xl lg:text-3xl font-bold mb-6">
<div className="mx-auto p-2 lg:p-6 md:p-4 mb-16 min-h-screen">
<h1 className="text-xl md:text-2xl lg:text-3xl font-bold mb-6 text-gray-900">
{t("my_orders")}
</h1>
<Tabs defaultValue="active" className="w-full">
<TabsList className="mb-4 md:mb-6 w-full md:w-fit gap-2 p-0">
<TabsTrigger value="active">
<TabsList className="mb-4 md:mb-6 w-full md:w-fit gap-2 p-1 bg-gray-100 rounded-xl">
<TabsTrigger
value="active"
className="rounded-lg font-semibold data-[state=active]:bg-white data-[state=active]:text-gray-900 data-[state=active]:shadow-sm"
>
{t("active_orders")} ({activeOrders.length})
</TabsTrigger>
<TabsTrigger value="completed">
<TabsTrigger
value="completed"
className="rounded-lg font-semibold data-[state=active]:bg-white data-[state=active]:text-gray-900 data-[state=active]:shadow-sm"
>
{t("completed_orders")} ({completedOrders.length})
</TabsTrigger>
</TabsList>
@@ -233,7 +255,9 @@ export default function OrdersPageClient({ locale }: OrdersPageClientProps) {
<TabsContent value="active">
{activeOrders.length === 0 ? (
<div className="flex items-center justify-center min-h-[40vh]">
<p className="text-xl text-gray-400">{t("no_active_orders")}</p>
<p className="text-xl text-gray-400 font-medium">
{t("no_active_orders")}
</p>
</div>
) : (
<div className="space-y-4">
@@ -258,7 +282,7 @@ export default function OrdersPageClient({ locale }: OrdersPageClientProps) {
<TabsContent value="completed">
{completedOrders.length === 0 ? (
<div className="flex items-center justify-center min-h-[40vh]">
<p className="text-xl text-gray-400">
<p className="text-xl text-gray-400 font-medium">
{t("no_completed_orders")}
</p>
</div>
@@ -284,27 +308,28 @@ export default function OrdersPageClient({ locale }: OrdersPageClientProps) {
</Tabs>
<Dialog open={isCancelDialogOpen} onOpenChange={setIsCancelDialogOpen}>
<DialogContent>
<DialogContent className="rounded-3xl border border-gray-200">
<DialogHeader>
<DialogTitle>
<DialogTitle className="text-xl font-bold text-gray-900">
{t("cancel_order")} #{orderToCancel?.id}
</DialogTitle>
<DialogDescription>{t("cancel_confirmation")}</DialogDescription>
<DialogDescription className="text-gray-600">
{t("cancel_confirmation")}
</DialogDescription>
</DialogHeader>
<DialogFooter>
<DialogFooter className="gap-2">
<Button
variant="outline"
onClick={() => setIsCancelDialogOpen(false)}
disabled={isCancellingOrder}
className="cursor-pointer"
className="cursor-pointer rounded-xl border-2 border-gray-200 hover:border-gray-900 font-semibold"
>
{t("keep_order")}
</Button>
<Button
variant="destructive"
onClick={confirmCancelOrder}
disabled={isCancellingOrder}
className="cursor-pointer"
className="cursor-pointer rounded-xl bg-red-600 hover:bg-red-700 font-semibold"
>
{isCancellingOrder ? t("cancelling") : t("cancel_order")}
</Button>
@@ -342,21 +367,23 @@ function CompactOrderCard({
const itemCount = order.orderItems.length;
return (
<Card className="overflow-hidden transition-all py-2 md:py-4 lg:py-6 hover:shadow-md">
<Card className="overflow-hidden transition-all py-2 md:py-4 lg:py-6 hover:shadow-lg rounded-2xl border border-gray-200">
{/* Compact Header - Always Visible */}
<div
className="p-2 md:p-4 mx-2 md:mx-4 rounded-lg cursor-pointer bg-linear-to-r from-white to-gray-50 hover:from-gray-50 hover:to-gray-100 transition-colors"
className="p-2 md:p-4 mx-2 md:mx-4 rounded-xl cursor-pointer bg-gradient-to-r from-white to-gray-50 hover:from-gray-50 hover:to-gray-100 transition-all duration-200"
onClick={onToggle}
>
<div className="flex items-center justify-between">
<div className="flex items-center gap-4 flex-1">
<div className="flex items-center gap-2">
<Package className="h-5 w-5 text-gray-500" />
<div className="h-10 w-10 rounded-xl bg-gray-100 flex items-center justify-center">
<Package className="h-5 w-5 text-gray-700" />
</div>
<div>
<h3 className="font-semibold text-base lg:text-lg">
<h3 className="font-bold text-base lg:text-lg text-gray-900">
{t("order_number")} {order.id}
</h3>
<p className="text-sm text-gray-500">
<p className="text-sm text-gray-500 font-medium">
{itemCount} {itemCount === 1 ? t("product") : t("products")}
</p>
</div>
@@ -367,83 +394,80 @@ function CompactOrderCard({
<div className="flex flex-col md:flex-row gap-2 items-end">
{getStatusBadge(order.status)}
<div className="text-right">
<p className="font-bold text-lg text-green-600">
<p className="font-bold text-lg text-emerald-600">
{total.toFixed(2)} TMT
</p>
</div>
</div>
{isExpanded ? (
<ChevronUp className="h-5 w-5 text-gray-400" />
) : (
<ChevronDown className="h-5 w-5 text-gray-400" />
)}
<div className="h-8 w-8 rounded-lg bg-gray-100 flex items-center justify-center">
{isExpanded ? (
<ChevronUp className="h-5 w-5 text-gray-600" />
) : (
<ChevronDown className="h-5 w-5 text-gray-600" />
)}
</div>
</div>
</div>
</div>
{/* Expandable Details */}
{isExpanded && (
<div className="border-t bg-white">
<div className="border-t border-gray-200 bg-white">
{/* Order Info Grid */}
<div className="p-4 grid grid-cols-1 md:grid-cols-2 gap-4 bg-gray-50">
{/* <div className="flex items-start gap-3">
<Calendar className="h-5 w-5 text-blue-500 mt-0.5" />
<div>
<p className="text-sm font-medium text-gray-700">
{t("delivery_date")}
</p>
<p className="text-sm text-gray-900">
{new Date(order.delivery_at).toLocaleDateString()} •{" "}
{order.delivery_time}
</p>
</div>
</div> */}
<div className="flex items-start gap-3">
<MapPin className="h-5 w-5 text-red-500 mt-0.5" />
<div className="h-9 w-9 rounded-xl bg-red-100 flex items-center justify-center shrink-0">
<MapPin className="h-5 w-5 text-red-600" />
</div>
<div>
<p className="text-sm font-medium text-gray-700">
<p className="text-sm font-bold text-gray-900">
{t("address")}
</p>
<p className="text-sm text-gray-900">
<p className="text-sm text-gray-600 mt-0.5">
{order.customer_address}
</p>
</div>
</div>
<div className="flex items-start gap-3">
<CreditCard className="h-5 w-5 text-green-500 mt-0.5" />
<div className="h-9 w-9 rounded-xl bg-emerald-100 flex items-center justify-center shrink-0">
<CreditCard className="h-5 w-5 text-emerald-600" />
</div>
<div>
<p className="text-sm font-medium text-gray-700">
<p className="text-sm font-bold text-gray-900">
{t("payment_method")}
</p>
<p className="text-sm text-gray-900">{order.payment_type}</p>
<p className="text-sm text-gray-600 mt-0.5">
{order.payment_type}
</p>
</div>
</div>
<div className="flex items-start gap-3">
<ShoppingBag className="h-5 w-5 text-purple-500 mt-0.5" />
<div className="h-9 w-9 rounded-xl bg-indigo-100 flex items-center justify-center shrink-0">
<ShoppingBag className="h-5 w-5 text-indigo-600" />
</div>
<div>
<p className="text-sm font-medium text-gray-700">
<p className="text-sm font-bold text-gray-900">
{t("shipping_method")}
</p>
<p className="text-sm text-gray-900">{order.shipping_method}</p>
<p className="text-sm text-gray-600 mt-0.5">
{order.shipping_method}
</p>
</div>
</div>
</div>
{/* Products List */}
<div className="p-4">
<h4 className="font-semibold mb-3 text-gray-700">
{t("products")}:
</h4>
<h4 className="font-bold mb-3 text-gray-900">{t("products")}:</h4>
<div className="space-y-3 max-h-96 overflow-y-auto">
{order.orderItems.map((item, index) => (
<div
key={index}
className="flex items-center gap-4 p-3 bg-gray-50 rounded-lg hover:bg-gray-100 transition-colors"
className="flex items-center gap-4 p-3 bg-gray-50 rounded-xl hover:bg-gray-100 transition-colors border border-gray-100"
>
<div className="relative w-16 h-16 shrink-0 rounded-md overflow-hidden bg-white border">
<div className="relative w-16 h-16 shrink-0 rounded-xl overflow-hidden bg-white border border-gray-200">
<Image
src={
item.product.images_400x400 || item.product.thumbnail
@@ -454,15 +478,15 @@ function CompactOrderCard({
/>
</div>
<div className="flex-1 min-w-0">
<p className="font-medium text-sm line-clamp-2">
<p className="font-semibold text-sm line-clamp-2 text-gray-900">
{item.product.name}
</p>
<p className="text-xs text-gray-500 mt-1">
<p className="text-xs text-gray-500 mt-1 font-medium">
{item.quantity} × {item.unit_price_amount} TMT
</p>
</div>
<div className="text-right">
<p className="font-semibold text-sm">
<p className="font-bold text-sm text-gray-900">
{(
parseFloat(item.unit_price_amount) * item.quantity
).toFixed(2)}{" "}
@@ -475,25 +499,24 @@ function CompactOrderCard({
</div>
{/* Footer with Total and Actions */}
<div className="border-t p-4 bg-gray-50">
<div className="border-t border-gray-200 p-4 bg-gray-50">
<div className="flex items-center justify-between mb-3">
<span className="text-base font-semibold text-gray-700">
<span className="text-base font-bold text-gray-900">
{t("total_price")}:
</span>
<span className="text-xl font-bold text-green-600">
<span className="text-xl font-bold text-emerald-600">
{total.toFixed(2)} TMT
</span>
</div>
{showCancelButton && (
<Button
variant="destructive"
onClick={(e) => {
e.stopPropagation();
onCancel(order);
}}
disabled={isCancelling}
className="w-full cursor-pointer"
className="w-full cursor-pointer rounded-xl bg-red-600 hover:bg-red-700 font-semibold h-11"
>
{t("cancel_order")}
</Button>