diff --git a/src/app/about/page.tsx b/src/app/about/page.tsx new file mode 100644 index 0000000..14722f1 --- /dev/null +++ b/src/app/about/page.tsx @@ -0,0 +1,82 @@ +"use client"; + +import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider"; +import NavbarStyleApple from "@/components/navbar/NavbarStyleApple/NavbarStyleApple"; +import TextAbout from "@/components/sections/about/TextAbout"; +import FooterBaseCard from "@/components/sections/footer/FooterBaseCard"; + +export default function AboutPage() { + return ( + + + +
+ +
+ + +
+ ); +} diff --git a/src/app/admin/page.tsx b/src/app/admin/page.tsx new file mode 100644 index 0000000..35306a0 --- /dev/null +++ b/src/app/admin/page.tsx @@ -0,0 +1,633 @@ +"use client"; + +import { useState } from "react"; +import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider"; +import NavbarStyleApple from "@/components/navbar/NavbarStyleApple/NavbarStyleApple"; +import FooterBaseCard from "@/components/sections/footer/FooterBaseCard"; +import Input from "@/components/form/Input"; +import { + LogOut, + Package, + FolderOpen, + ShoppingCart, + Users, + TrendingUp, + Upload, + Edit, + Trash2, + Plus, + X, +} from "lucide-react"; + +type AdminTab = "login" | "products" | "categories" | "orders" | "customers" | "analytics"; + +interface Product { + id: string; + name: string; + price: number; + category: string; + image?: string; + description?: string; +} + +interface Category { + id: string; + name: string; +} + +interface Order { + id: string; + customerName: string; + status: "pending" | "processing" | "delivered" | "cancelled"; + total: number; + date: string; +} + +interface Customer { + id: string; + name: string; + email: string; + phone: string; + orders: number; +} + +export default function AdminPanel() { + const [isAuthenticated, setIsAuthenticated] = useState(false); + const [currentTab, setCurrentTab] = useState("login"); + const [email, setEmail] = useState(""); + const [password, setPassword] = useState(""); + + // Products state + const [products, setProducts] = useState([ + { + id: "1", name: "Qizil Roza Buket", price: 250000, + category: "Rozalar", description: "Premium qizil rozalar"}, + { + id: "2", name: "Tula Aralash", price: 180000, + category: "Tulalar", description: "Aralash rangli tulalar"}, + ]); + const [newProduct, setNewProduct] = useState>({ + name: "", price: 0, + category: "", description: ""}); + const [editingProductId, setEditingProductId] = useState(null); + + // Categories state + const [categories, setCategories] = useState([ + { id: "1", name: "Rozalar" }, + { id: "2", name: "Tulalar" }, + { id: "3", name: "Siyavushlar" }, + ]); + const [newCategory, setNewCategory] = useState(""); + + // Orders state + const [orders, setOrders] = useState([ + { + id: "1", customerName: "Ayubjon Raximov", status: "delivered", total: 250000, + date: "2025-01-15"}, + { + id: "2", customerName: "Dilorom Ibragimova", status: "processing", total: 180000, + date: "2025-01-16"}, + ]); + + // Customers state + const [customers] = useState([ + { + id: "1", name: "Ayubjon Raximov", email: "ayubjon@example.com", phone: "+998901234567", orders: 5, + }, + { + id: "2", name: "Dilorom Ibragimova", email: "dilorom@example.com", phone: "+998912345678", orders: 3, + }, + ]); + + // Analytics data + const topSellingProducts = [ + { name: "Qizil Roza Buket", sales: 45 }, + { name: "Tula Aralash", sales: 32 }, + { name: "Oyoq Buket", sales: 28 }, + { name: "Oq Lililar", sales: 19 }, + ]; + + const handleLogin = () => { + if (email === "admin@fatinur.com" && password === "admin123") { + setIsAuthenticated(true); + setCurrentTab("products"); + setEmail(""); + setPassword(""); + } else { + alert("Login yoki parol noto'g'ri"); + } + }; + + const handleLogout = () => { + setIsAuthenticated(false); + setCurrentTab("login"); + }; + + const handleAddProduct = () => { + if (newProduct.name && newProduct.price && newProduct.category) { + if (editingProductId) { + setProducts( + products.map((p) => + p.id === editingProductId + ? { ...p, ...newProduct } + : p + ) as Product[] + ); + setEditingProductId(null); + } else { + setProducts([ + ...products, + { + id: Date.now().toString(), + name: newProduct.name, + price: newProduct.price, + category: newProduct.category, + description: newProduct.description || ""}, + ]); + } + setNewProduct({ name: "", price: 0, category: "", description: "" }); + } + }; + + const handleDeleteProduct = (id: string) => { + setProducts(products.filter((p) => p.id !== id)); + }; + + const handleAddCategory = () => { + if (newCategory.trim()) { + setCategories([ + ...categories, + { id: Date.now().toString(), name: newCategory }, + ]); + setNewCategory(""); + } + }; + + const handleDeleteCategory = (id: string) => { + setCategories(categories.filter((c) => c.id !== id)); + }; + + const handleUpdateOrderStatus = (orderId: string, newStatus: Order["status"]) => { + setOrders( + orders.map((o) => (o.id === orderId ? { ...o, status: newStatus } : o)) + ); + }; + + if (!isAuthenticated) { + return ( + + + +
+
+

+ Admin Panel +

+
+
+ + +
+
+ + +
+ +

+ Demo credentials: admin@fatinur.com / admin123 +

+
+
+
+ + +
+ ); + } + + return ( + + + +
+
+ {/* Header */} +
+

Admin Panel

+ +
+ + {/* Navigation Tabs */} +
+ {[ + { id: "products", label: "Товарлар", icon: Package }, + { id: "categories", label: "Категорияlar", icon: FolderOpen }, + { id: "orders", label: "Buyurtmalar", icon: ShoppingCart }, + { id: "customers", label: "Мижозлар", icon: Users }, + { id: "analytics", label: "Статистика", icon: TrendingUp }, + ].map((tab) => { + const Icon = tab.icon; + return ( + + ); + })} +
+ + {/* Content */} +
+ {/* Products Tab */} + {currentTab === "products" && ( +
+

Махсулотларни Бошқариш

+ + {/* Add Product Form */} +
+

+ {editingProductId ? "Махсулотни Редактировать" : "Янги Махсулот Қўшиш"} +

+
+ + setNewProduct({ ...newProduct, name: val }) + } + placeholder="Махсулот номи" + /> + + setNewProduct({ ...newProduct, price: Number(val) }) + } + type="number" + placeholder="Нарх" + /> + + setNewProduct({ ...newProduct, category: val }) + } + placeholder="Категория" + /> + + setNewProduct({ ...newProduct, description: val }) + } + placeholder="Тавсифи" + /> +
+
+ + {editingProductId && ( + + )} +
+
+ + {/* Products List */} +
+ {products.map((product) => ( +
+
+

{product.name}

+

+ Категория: {product.category} | Нарх: {product.price.toLocaleString()} so'm +

+
+
+ + +
+
+ ))} +
+
+ )} + + {/* Categories Tab */} + {currentTab === "categories" && ( +
+

Категорияларни Бошқариш

+ + {/* Add Category Form */} +
+
+ + +
+
+ + {/* Categories List */} +
+ {categories.map((category) => ( +
+ {category.name} + +
+ ))} +
+
+ )} + + {/* Orders Tab */} + {currentTab === "orders" && ( +
+

Buyurtmаларни Бошқариш

+ + {/* Orders List */} +
+ {orders.map((order) => ( +
+
+
+

ID: {order.id}

+

{order.customerName}

+
+
+

+ {order.total.toLocaleString()} so'm +

+

{order.date}

+
+
+
+ {[ + "pending", "processing", "delivered", "cancelled"].map((status) => ( + + ))} +
+
+ ))} +
+
+ )} + + {/* Customers Tab */} + {currentTab === "customers" && ( +
+

Мижозларни Кўриш

+ + {/* Customers List */} +
+ {customers.map((customer) => ( +
+
+
+

{customer.name}

+

{customer.email}

+

{customer.phone}

+
+
+

Buyurtmalar: {customer.orders}

+
+
+
+ ))} +
+
+ )} + + {/* Analytics Tab */} + {currentTab === "analytics" && ( +
+

+ Энг Йўқори Сотувчи Гуллар +

+ + {/* Top Selling Products */} +
+ {topSellingProducts.map((product, index) => ( +
+
+

+ {index + 1}. {product.name} +

+ + {product.sales} сотув + +
+
+
+
+
+ ))} +
+ + {/* Summary Stats */} +
+
+

Умумий Махсулотлар

+

{products.length}

+
+
+

Умумий Buyurtmalar

+

{orders.length}

+
+
+

Умумий Мижозлар

+

{customers.length}

+
+
+

Кўп Сотувчи Категория

+

Розалар

+
+
+
+ )} +
+
+
+ + + + ); +} diff --git a/src/app/api/orders/route.ts b/src/app/api/orders/route.ts new file mode 100644 index 0000000..09cc28d --- /dev/null +++ b/src/app/api/orders/route.ts @@ -0,0 +1,136 @@ +import { NextRequest, NextResponse } from "next/server"; + +interface OrderData { + fullName: string; + email: string; + phone: string; + address: string; + city: string; + postalCode: string; + message: string; +} + +// Mock in-memory database for demonstration +const orders: OrderData[] = []; + +// Telegram Bot configuration +const TELEGRAM_BOT_TOKEN = process.env.TELEGRAM_BOT_TOKEN || ""; +const TELEGRAM_CHAT_ID = process.env.TELEGRAM_CHAT_ID || ""; + +async function sendTelegramNotification(order: OrderData) { + if (!TELEGRAM_BOT_TOKEN || !TELEGRAM_CHAT_ID) { + console.warn( + "Telegram credentials not configured. Skipping notification." + ); + return; + } + + const message = ` +🌸 *YANGI BUYURTMA* 🌸 + +👤 *Ism:* ${order.fullName} +📧 *Email:* ${order.email} +📞 *Telefon:* ${order.phone} + +📍 *Manzil:* ${order.address}, ${order.city} +📮 *Postal kod:* ${order.postalCode || "Berilmagan"} + +💬 *Xabar:* ${order.message || "Xabar berilmagan"} + +⏰ *Vaqti:* ${new Date().toLocaleString("uz-UZ")} + `; + + try { + const response = await fetch( + `https://api.telegram.org/bot${TELEGRAM_BOT_TOKEN}/sendMessage`, + { + method: "POST", headers: { + "Content-Type": "application/json"}, + body: JSON.stringify({ + chat_id: TELEGRAM_CHAT_ID, + text: message, + parse_mode: "Markdown"}), + } + ); + + if (!response.ok) { + throw new Error(`Telegram API error: ${response.statusText}`); + } + + console.log("Telegram notification sent successfully"); + } catch (error) { + console.error("Failed to send Telegram notification:", error); + throw error; + } +} + +export async function POST(request: NextRequest) { + try { + const body: OrderData = await request.json(); + + // Validate required fields + if ( + !body.fullName || + !body.email || + !body.phone || + !body.address || + !body.city + ) { + return NextResponse.json( + { error: "Missing required fields" }, + { status: 400 } + ); + } + + // Add timestamp and ID + const orderWithMetadata = { + ...body, + id: Date.now().toString(), + createdAt: new Date().toISOString(), + }; + + // Save to mock database + orders.push(body); + console.log("Order saved to database:", orderWithMetadata); + + // Send Telegram notification + await sendTelegramNotification(body); + + // Return success response + return NextResponse.json( + { + success: true, + message: "Buyurtma muvaffaqiyatli qabul qilindi", orderId: orderWithMetadata.id, + }, + { status: 201 } + ); + } catch (error) { + console.error("Error processing order:", error); + + return NextResponse.json( + { + success: false, + error: "Buyurtmani qayta ishlashda xatolik yuz berdi"}, + { status: 500 } + ); + } +} + +export async function GET() { + try { + return NextResponse.json( + { + orders, + total: orders.length, + }, + { status: 200 } + ); + } catch (error) { + console.error("Error fetching orders:", error); + + return NextResponse.json( + { error: "Buyurtmalarni olishda xatolik yuz berdi" }, + { status: 500 } + ); + } +} diff --git a/src/app/catalog/[id]/page.tsx b/src/app/catalog/[id]/page.tsx new file mode 100644 index 0000000..7b91b59 --- /dev/null +++ b/src/app/catalog/[id]/page.tsx @@ -0,0 +1,325 @@ +"use client"; + +import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider"; +import NavbarStyleApple from "@/components/navbar/NavbarStyleApple/NavbarStyleApple"; +import FooterBaseCard from "@/components/sections/footer/FooterBaseCard"; +import { Heart, Share2, Truck, Shield, RotateCcw } from "lucide-react"; +import { useState } from "react"; + +const products: { [key: string]: any } = { + "1": { + id: "1", name: "Qizil Roza Buket", price: "250,000 so'm", description: "Eng sifatli qizil rozalardan tayyorlangan, sevgi va ishtiyoqni ifodalovchi luxurious buket.", images: [ + "http://img.b2bpic.net/free-photo/beautifully-wrapped-gift-bouquet-roses_169016-8520.jpg?_wi=2", "http://img.b2bpic.net/free-photo/side-view-yellow-red-tulip-flower-grey_140725-12248.jpg?_wi=2"], + category: "Rozalar", rating: 4.8, + reviews: 45, + details: [ + "20+ qizil roza", "Yangi gullar", "Professional dizayn", "Zita oramiga o'ralgan"], + }, + "2": { + id: "2", name: "Tula Aralash", price: "180,000 so'm", description: "Turli rangdagi tulalardan tayyorlangan, ko'pikka va optimizmni ifodalovchi buket.", images: [ + "http://img.b2bpic.net/free-photo/side-view-yellow-red-tulip-flower-grey_140725-12248.jpg?_wi=2", "http://img.b2bpic.net/free-photo/beautifully-wrapped-gift-bouquet-roses_169016-8520.jpg?_wi=2"], + category: "Tulalar", rating: 4.6, + reviews: 32, + details: [ + "15+ turli rang tula", "Bahor hissiyoti", "Chiroyli dizayn", "Sifatli oramiga"], + }, + "3": { + id: "3", name: "Oyoq Buket", price: "220,000 so'm", description: "Jonli sariq oyoqlardan tayyorlangan, xursandlik va farovonlikni ifodalovchi buket.", images: [ + "http://img.b2bpic.net/free-photo/top-view-sunflowers-frame-with-copy-space_23-2150250788.jpg?_wi=2", "http://img.b2bpic.net/free-photo/side-view-bouquet-peach-cream-color-roses-with-asparagus-grey-wooden-background_141793-7974.jpg?_wi=2"], + category: "Oyoqlar", rating: 4.9, + reviews: 58, + details: [ + "12+ sariq oyoq", "Yangi yetkazildi", "Jonli rang", "Premium dizayn"], + }, + "4": { + id: "4", name: "Oq Lililar", price: "280,000 so'm", description: "Nozik oq lililardan tayyorlangan, murassa va qilburchi hissiyotini ifodalovchi buket.", images: [ + "http://img.b2bpic.net/free-photo/side-view-bouquet-peach-cream-color-roses-with-asparagus-grey-wooden-background_141793-7974.jpg?_wi=2", "http://img.b2bpic.net/free-photo/beautifully-wrapped-gift-bouquet-roses_169016-8520.jpg?_wi=2"], + category: "Lililar", rating: 4.7, + reviews: 41, + details: [ + "8+ oq lilia", "Aromatic xush hid", "Nozik shakllanish", "Luxury oramiga"], + }, + "5": { + id: "5", name: "Orchid Elegance", price: "300,000 so'm", description: "Ekzotik orkideyalardan tayyorlangan, murassa va yuqori dadning belgisi buket.", images: [ + "http://img.b2bpic.net/free-photo/beautifully-wrapped-gift-bouquet-roses_169016-8520.jpg?_wi=2", "http://img.b2bpic.net/free-photo/side-view-yellow-red-tulip-flower-grey_140725-12248.jpg?_wi=2"], + category: "Orkideya", rating: 5.0, + reviews: 23, + details: [ + "10+ orkideya", "Ekzotik rang", "Premium qadri", "Davom etuvchi xush hid"], + }, + "6": { + id: "6", name: "Dahlia Dream", price: "200,000 so'm", description: "Gʻamrasin dalialari, ranglariga va shakllanishiga ega, go'zal buket.", images: [ + "http://img.b2bpic.net/free-photo/side-view-yellow-red-tulip-flower-grey_140725-12248.jpg?_wi=2", "http://img.b2bpic.net/free-photo/top-view-sunflowers-frame-with-copy-space_23-2150250788.jpg?_wi=2"], + category: "Dalialar", rating: 4.5, + reviews: 28, + details: [ + "15+ dahlia", "Turli rang", "Rang tutgan", "Chiroyli qadri"], + }, + "7": { + id: "7", name: "Mixed Spring", price: "240,000 so'm", description: "Bahor gullarining aralashmasi, tabiatning go'zalligini o'zida ifodalovchi buket.", images: [ + "http://img.b2bpic.net/free-photo/top-view-sunflowers-frame-with-copy-space_23-2150250788.jpg?_wi=2", "http://img.b2bpic.net/free-photo/side-view-bouquet-peach-cream-color-roses-with-asparagus-grey-wooden-background_141793-7974.jpg?_wi=2"], + category: "Aralash", rating: 4.6, + reviews: 37, + details: [ + "30+ turli gullar", "Rang harmoniyasi", "Bahor hissiyoti", "Professional surattirish"], + }, + "8": { + id: "8", name: "Premium Exotic", price: "320,000 so'm", description: "Ekzotik gullarning premium jamiyati, eng yuqori sifat va dizayn standartlari.", images: [ + "http://img.b2bpic.net/free-photo/side-view-bouquet-peach-cream-color-roses-with-asparagus-grey-wooden-background_141793-7974.jpg?_wi=2", "http://img.b2bpic.net/free-photo/beautifully-wrapped-gift-bouquet-roses_169016-8520.jpg?_wi=2"], + category: "Ekzotik", rating: 4.9, + reviews: 19, + details: [ + "20+ ekzotik gullar", "Premium qadri", "Master florist dizayn", "Saqlanish davomi 7+ kun"], + }, +}; + +export default function ProductDetailPage({ + params, +}: { + params: { id: string }; +}) { + const product = products[params.id]; + const [isFavorited, setIsFavorited] = useState(false); + const [mainImage, setMainImage] = useState(0); + const [quantity, setQuantity] = useState(1); + + if (!product) { + return ( + + +
Mahsulot topilmadi
+
+ ); + } + + return ( + + + +
+
+
+ {/* Product Images */} +
+
+ {product.name} +
+
+ {product.images.map((img: string, idx: number) => ( + + ))} +
+
+ + {/* Product Details */} +
+
+ + {product.category} + +
+

{product.name}

+
+
+ {[...Array(5)].map((_, i) => ( + + {i < Math.floor(product.rating) ? "★" : "☆"} + + ))} +
+ + {product.rating} ({product.reviews} sharhlar) + +
+

+ {product.price} +

+

+ {product.description} +

+ + {/* Details List */} +
+

Mahsulot xususiyatlari:

+
    + {product.details.map((detail: string, idx: number) => ( +
  • + + {detail} +
  • + ))} +
+
+ + {/* Quantity and Actions */} +
+ +
+ + + {quantity} + + +
+
+ + {/* Action Buttons */} +
+ +
+ + +
+
+ + {/* Shipping Info */} +
+
+ +
+

Tez Yetkazib Berish

+

+ Toshkent bo'ylab 2 soatda yetkazib berishni taklif etamiz +

+
+
+
+ +
+

Sifat Kafolati

+

+ Eng sifatli gullar yoki pul qaytarish +

+
+
+
+ +
+

Oson Qaytarish

+

+ 7 kunlik qaytarish siyosati +

+
+
+
+
+
+
+
+ + +
+ ); +} diff --git a/src/app/catalog/page.tsx b/src/app/catalog/page.tsx new file mode 100644 index 0000000..2d9783d --- /dev/null +++ b/src/app/catalog/page.tsx @@ -0,0 +1,147 @@ +"use client"; + +import { useState } from "react"; +import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider"; +import NavbarStyleApple from "@/components/navbar/NavbarStyleApple/NavbarStyleApple"; +import ProductCardOne from "@/components/sections/product/ProductCardOne"; +import FooterBaseCard from "@/components/sections/footer/FooterBaseCard"; + +const allProducts = [ + { + id: "1", name: "Qizil Roza Buket", price: "250,000 so'm", imageSrc: "http://img.b2bpic.net/free-photo/beautifully-wrapped-gift-bouquet-roses_169016-8520.jpg?_wi=2", imageAlt: "Premium red rose bouquet", category: "roses", onProductClick: () => (window.location.href = "/catalog/1"), + }, + { + id: "2", name: "Tula Aralash", price: "180,000 so'm", imageSrc: "http://img.b2bpic.net/free-photo/side-view-yellow-red-tulip-flower-grey_140725-12248.jpg?_wi=2", imageAlt: "Colorful mixed tulip arrangement", category: "tulips", onProductClick: () => (window.location.href = "/catalog/2"), + }, + { + id: "3", name: "Oyoq Buket", price: "220,000 so'm", imageSrc: "http://img.b2bpic.net/free-photo/top-view-sunflowers-frame-with-copy-space_23-2150250788.jpg?_wi=2", imageAlt: "Bright sunflower bouquet", category: "sunflowers", onProductClick: () => (window.location.href = "/catalog/3"), + }, + { + id: "4", name: "Oq Lililar", price: "280,000 so'm", imageSrc: "http://img.b2bpic.net/free-photo/side-view-bouquet-peach-cream-color-roses-with-asparagus-grey-wooden-background_141793-7974.jpg?_wi=2", imageAlt: "Elegant white lily arrangement", category: "lilies", onProductClick: () => (window.location.href = "/catalog/4"), + }, + { + id: "5", name: "Orchid Elegance", price: "300,000 so'm", imageSrc: "http://img.b2bpic.net/free-photo/beautifully-wrapped-gift-bouquet-roses_169016-8520.jpg?_wi=2", imageAlt: "Elegant orchid bouquet", category: "orchids", onProductClick: () => (window.location.href = "/catalog/5"), + }, + { + id: "6", name: "Dahlia Dream", price: "200,000 so'm", imageSrc: "http://img.b2bpic.net/free-photo/side-view-yellow-red-tulip-flower-grey_140725-12248.jpg?_wi=2", imageAlt: "Beautiful dahlia arrangement", category: "dahlias", onProductClick: () => (window.location.href = "/catalog/6"), + }, + { + id: "7", name: "Mixed Spring", price: "240,000 so'm", imageSrc: "http://img.b2bpic.net/free-photo/top-view-sunflowers-frame-with-copy-space_23-2150250788.jpg?_wi=2", imageAlt: "Mixed spring flowers", category: "mixed", onProductClick: () => (window.location.href = "/catalog/7"), + }, + { + id: "8", name: "Premium Exotic", price: "320,000 so'm", imageSrc: "http://img.b2bpic.net/free-photo/side-view-bouquet-peach-cream-color-roses-with-asparagus-grey-wooden-background_141793-7974.jpg?_wi=2", imageAlt: "Premium exotic bouquet", category: "exotic", onProductClick: () => (window.location.href = "/catalog/8"), + }, +]; + +const categories = [ + { id: "all", name: "Barchasi" }, + { id: "roses", name: "Rozalar" }, + { id: "tulips", name: "Tulalar" }, + { id: "sunflowers", name: "Oyoqlar" }, + { id: "lilies", name: "Lililar" }, + { id: "orchids", name: "Orkideya" }, + { id: "dahlias", name: "Dalialar" }, + { id: "mixed", name: "Aralash" }, + { id: "exotic", name: "Ekzotik" }, +]; + +export default function CatalogPage() { + const [selectedCategory, setSelectedCategory] = useState("all"); + + const filteredProducts = + selectedCategory === "all" + ? allProducts + : allProducts.filter((product) => product.category === selectedCategory); + + return ( + + + +
+
+

Gullar Katalogi

+

+ Bizning eng chiroyli buketlarni kategoriya bo'yicha tanlang +

+ +
+ {categories.map((category) => ( + + ))} +
+
+
+ +
+ c.id === selectedCategory)?.name} + description="Har bir buket sifat va sevgi bilan tayyorlanadi" + products={filteredProducts} + gridVariant="four-items-2x2-equal-grid" + animationType="slide-up" + textboxLayout="default" + useInvertedBackground={false} + /> +
+ + +
+ ); +} diff --git a/src/app/checkout/page.tsx b/src/app/checkout/page.tsx new file mode 100644 index 0000000..98f84fd --- /dev/null +++ b/src/app/checkout/page.tsx @@ -0,0 +1,251 @@ +"use client"; + +import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider"; +import NavbarStyleApple from "@/components/navbar/NavbarStyleApple/NavbarStyleApple"; +import FooterBaseCard from "@/components/sections/footer/FooterBaseCard"; +import { useState } from "react"; +import Input from "@/components/form/Input"; + +interface OrderFormData { + fullName: string; + email: string; + phone: string; + address: string; + city: string; + postalCode: string; + message: string; +} + +export default function CheckoutPage() { + const [formData, setFormData] = useState({ + fullName: "", email: "", phone: "", address: "", city: "", postalCode: "", message: ""}); + + const [isSubmitting, setIsSubmitting] = useState(false); + const [submitStatus, setSubmitStatus] = useState<"idle" | "success" | "error">("idle"); + + const handleInputChange = (field: keyof OrderFormData, value: string) => { + setFormData((prev) => ({ + ...prev, + [field]: value, + })); + }; + + const handleSubmit = async (e: React.FormEvent) => { + e.preventDefault(); + setIsSubmitting(true); + setSubmitStatus("idle"); + + try { + // Save order to database via API + const response = await fetch("/api/orders", { + method: "POST", headers: { + "Content-Type": "application/json"}, + body: JSON.stringify(formData), + }); + + if (!response.ok) { + throw new Error("Failed to submit order"); + } + + setSubmitStatus("success"); + setFormData({ + fullName: "", email: "", phone: "", address: "", city: "", postalCode: "", message: ""}); + + setTimeout(() => { + setSubmitStatus("idle"); + }, 3000); + } catch (error) { + console.error("Error submitting order:", error); + setSubmitStatus("error"); + + setTimeout(() => { + setSubmitStatus("idle"); + }, 3000); + } finally { + setIsSubmitting(false); + } + }; + + return ( + + + +
+
+
+

+ Buyurtmani Rasmiylash +

+

+ Quyidagi shaklni to'ldiring va buyurtmangizni tasdiqlang. Biz tez orada siz bilan bog'lanamiz. +

+
+ +
+ {/* Customer Information */} +
+

Shaxsiy Ma'lumot

+ + handleInputChange("fullName", value)} + type="text" + placeholder="To'liq Ismingiz" + required + /> + + handleInputChange("email", value)} + type="email" + placeholder="Email Manzili" + required + /> + + handleInputChange("phone", value)} + type="tel" + placeholder="Telefon Raqami (+998...)" + required + /> +
+ + {/* Delivery Information */} +
+

Yetkazib Berish Manzili

+ + handleInputChange("address", value)} + type="text" + placeholder="Manzil (Ko'cha, uy raqami)" + required + /> + +
+ handleInputChange("city", value)} + type="text" + placeholder="Shahar" + required + /> + + handleInputChange("postalCode", value)} + type="text" + placeholder="Pochtali Kod" + /> +
+
+ + {/* Additional Message */} +
+

Qo'shimcha Xabar

+