From 388c8bcfd1cba3eb53681d5a14e8cef0f0737ef0 Mon Sep 17 00:00:00 2001
From: Samandar Turgunboyev <turgunboyevsamandar4@gmail.com>
Date: Fri, 26 Dec 2025 17:17:45 +0500
Subject: [PATCH] order page and user page update

---
 src/features/order/lib/type.ts        |   2 +
 src/features/order/ui/OrderDetail.tsx |  21 +++
 src/features/order/ui/OrderTable.tsx  |   4 +
 src/features/users/lib/api.ts         |   5 +
 src/features/users/lib/data.ts        |  23 ++-
 src/features/users/ui/UserCard.tsx    | 196 +++++++++++++++-----------
 src/features/users/ui/UserTable.tsx   |  13 +-
 src/features/users/ui/UsersList.tsx   |  52 +++++--
 src/shared/config/api/URLs.ts         |   1 +
 9 files changed, 209 insertions(+), 108 deletions(-)

diff --git a/src/features/order/lib/type.ts b/src/features/order/lib/type.ts
index cb9c62d..5d10ceb 100644
--- a/src/features/order/lib/type.ts
+++ b/src/features/order/lib/type.ts
@@ -38,6 +38,8 @@ export interface Order {
   items: Item[];
   created_at: string;
   long: number;
+  delivery_date: string;
+  delivery_time: string;
   lat: number;
 }
 
diff --git a/src/features/order/ui/OrderDetail.tsx b/src/features/order/ui/OrderDetail.tsx
index 8ce5fcf..892e2d1 100644
--- a/src/features/order/ui/OrderDetail.tsx
+++ b/src/features/order/ui/OrderDetail.tsx
@@ -4,6 +4,7 @@ import formatPrice from "@/shared/lib/formatPrice";
 import { Map, Placemark, YMaps } from "@pbe/react-yandex-maps";
 import {
   Calendar,
+  Clock3,
   MapIcon,
   MessageSquare,
   Package,
@@ -126,6 +127,26 @@ const OrderDetail = ({ detail, setDetail, order }: Props) => {
             </div>
           )}
 
+          {order.delivery_date && (
+            <div className="border rounded-lg p-4">
+              <h3 className="font-semibold text-lg mb-3 flex items-center">
+                <Calendar className="w-5 h-5 mr-2" />
+                Yetkazish sanasi
+              </h3>
+              <p className="text-lg text-gray-700">{order.delivery_date}</p>
+            </div>
+          )}
+
+          {order.delivery_time && (
+            <div className="border rounded-lg p-4">
+              <h3 className="font-semibold text-lg mb-3 flex items-center">
+                <Clock3 className="w-5 h-5 mr-2" />
+                Yetkazish vaqti
+              </h3>
+              <p className="text-lg text-gray-700">{order.delivery_time}</p>
+            </div>
+          )}
+
           <div className="border rounded-lg p-4">
             <h3 className="font-semibold text-lg mb-4 flex items-center">
               <Package className="w-5 h-5 mr-2" />
diff --git a/src/features/order/ui/OrderTable.tsx b/src/features/order/ui/OrderTable.tsx
index 219b423..20e1fdd 100644
--- a/src/features/order/ui/OrderTable.tsx
+++ b/src/features/order/ui/OrderTable.tsx
@@ -109,6 +109,8 @@ const OrderTable = ({
             <TableHead>Foydalanuvchi</TableHead>
             <TableHead>Umumiy narx</TableHead>
             <TableHead>Izoh</TableHead>
+            <TableHead>Yetkazish sanasi</TableHead>
+            <TableHead>Yetkazish soati</TableHead>
             <TableHead>Holat</TableHead>
             <TableHead className="text-right">Harakatlar</TableHead>
           </TableRow>
@@ -121,6 +123,8 @@ const OrderTable = ({
               <TableCell>{order.user.username}</TableCell>
               <TableCell>{formatPrice(order.total_price, true)}</TableCell>
               <TableCell>{order.comment || "-"}</TableCell>
+              <TableCell>{order?.delivery_date || "-"}</TableCell>
+              <TableCell>{order?.delivery_time || "-"}</TableCell>
               <TableCell>
                 <Select
                   value={order.status}
diff --git a/src/features/users/lib/api.ts b/src/features/users/lib/api.ts
index dc9191d..39fbba6 100644
--- a/src/features/users/lib/api.ts
+++ b/src/features/users/lib/api.ts
@@ -26,4 +26,9 @@ export const user_api = {
     const res = await httpClient.delete(`${API_URLS.UserDelete(id)}`);
     return res;
   },
+
+  async import_user() {
+    const res = await httpClient.post(API_URLS.Import_User);
+    return res;
+  },
 };
diff --git a/src/features/users/lib/data.ts b/src/features/users/lib/data.ts
index eb87b04..a59e055 100644
--- a/src/features/users/lib/data.ts
+++ b/src/features/users/lib/data.ts
@@ -1,10 +1,13 @@
 export interface UserData {
-  id: string;
+  id: 3;
   username: string;
-  last_login: null | string;
-  date_joined: string;
-  is_superuser: boolean;
-  role: "admin" | "user" | "moderator";
+  first_name: string;
+  last_name: string;
+  middle_name: null | string;
+  gender: "M" | "F" | null;
+  region: null | string;
+  address: null | string;
+  created_at: string;
 }
 
 export interface UserListRes {
@@ -18,7 +21,13 @@ export interface UserListRes {
 }
 
 export interface UserCreateReq {
+  id: 3;
   username: string;
-  password: string;
-  is_superuser: boolean;
+  first_name: string;
+  last_name: string;
+  middle_name: null | string;
+  gender: "M" | "F" | null;
+  region: null | string;
+  address: null | string;
+  created_at: string;
 }
diff --git a/src/features/users/ui/UserCard.tsx b/src/features/users/ui/UserCard.tsx
index 10dfde3..e44addb 100644
--- a/src/features/users/ui/UserCard.tsx
+++ b/src/features/users/ui/UserCard.tsx
@@ -3,110 +3,140 @@
 import type { UserData } from "@/features/users/lib/data";
 import { Avatar, AvatarFallback } from "@/shared/ui/avatar";
 import { Badge } from "@/shared/ui/badge";
-import { Button } from "@/shared/ui/button";
 import { Card, CardContent, CardHeader } from "@/shared/ui/card";
-import { Clock, Edit, Trash2 } from "lucide-react";
+import { Calendar, MapPin } from "lucide-react";
 import { type Dispatch, type SetStateAction } from "react";
 
 export function UserCard({
   user,
-  setEditingUser,
-  setDialogOpen,
-  setOpenDelete,
-  setUserDelete,
+  // setEditingUser,
+  // setDialogOpen,
+  // setOpenDelete,
+  // setUserDelete,
 }: {
   user: UserData;
-  setEditingUser: (user: UserData) => void;
-  setDialogOpen: (open: boolean) => void;
-  setOpenDelete: Dispatch<SetStateAction<boolean>>;
-  setUserDelete: Dispatch<SetStateAction<UserData | null>>;
+  setEditingUser?: (user: UserData) => void;
+  setDialogOpen?: (open: boolean) => void;
+  setOpenDelete?: Dispatch<SetStateAction<boolean>>;
+  setUserDelete?: Dispatch<SetStateAction<UserData | null>>;
 }) {
-  const getRoleColor = (role: UserData["role"]) => {
-    switch (role) {
-      case "admin":
-        return "bg-red-100 text-red-800";
-      case "moderator":
+  const getGenderColor = (gender: "M" | "F" | null) => {
+    switch (gender) {
+      case "M":
         return "bg-blue-100 text-blue-800";
-      case "user":
-        return "bg-green-100 text-green-800";
+      case "F":
+        return "bg-pink-100 text-pink-800";
       default:
         return "bg-gray-100 text-gray-800";
     }
   };
 
+  const getGenderLabel = (gender: "M" | "F" | null) => {
+    switch (gender) {
+      case "M":
+        return "Erkak";
+      case "F":
+        return "Ayol";
+      default:
+        return "Ko'rsatilmagan";
+    }
+  };
+
+  const getInitials = () => {
+    if (user.first_name && user.last_name) {
+      return `${user.first_name[0]}${user.last_name[0]}`.toUpperCase();
+    }
+    return user.username.substring(0, 2).toUpperCase();
+  };
+
+  const getFullName = () => {
+    const parts = [user.first_name, user.middle_name, user.last_name].filter(
+      Boolean,
+    );
+    return parts.length > 0 ? parts.join(" ") : user.username;
+  };
+
   return (
-    <>
-      <Card className="group hover:shadow-md transition-shadow">
-        <CardHeader className="pb-3">
-          <div className="flex items-start justify-between">
-            <div className="flex items-center gap-3">
-              <Avatar>
-                <AvatarFallback className="bg-green-100 text-green-700">
-                  {user.username
-                    .split(" ")
-                    .map((n) => n[0])
-                    .join("")
-                    .toUpperCase()}
-                </AvatarFallback>
-              </Avatar>
-              <div>
-                <h3 className="font-semibold">{user.username}</h3>
-              </div>
+    <Card className="group hover:shadow-md transition-shadow">
+      <CardHeader className="pb-3">
+        <div className="flex items-start justify-between">
+          <div className="flex items-center gap-3">
+            <Avatar>
+              <AvatarFallback className="bg-gradient-to-br from-purple-100 to-blue-100 text-purple-700">
+                {getInitials()}
+              </AvatarFallback>
+            </Avatar>
+            <div>
+              <h3 className="font-semibold">{getFullName()}</h3>
+              <p className="text-sm text-muted-foreground">@{user.username}</p>
             </div>
-            <Badge className={getRoleColor(user.role)}>
-              {user.role === "admin"
-                ? "Admin"
-                : user.role === "user"
-                  ? "Foydalanuvchi"
-                  : user.role}
-            </Badge>
           </div>
-        </CardHeader>
+          <Badge className={getGenderColor(user.gender)}>
+            {getGenderLabel(user.gender)}
+          </Badge>
+        </div>
+      </CardHeader>
 
-        <CardContent className="space-y-4">
+      <CardContent className="space-y-3">
+        <div className="flex items-center gap-2 text-sm text-muted-foreground">
+          <Calendar className="h-4 w-4" />
+          <span>
+            Ro'yxatdan o'tgan:{" "}
+            {new Date(user.created_at).toLocaleDateString("uz-UZ", {
+              year: "numeric",
+              month: "long",
+              day: "numeric",
+            })}
+          </span>
+        </div>
+
+        {user.region && (
           <div className="flex items-center gap-2 text-sm text-muted-foreground">
-            <Clock className="h-4 w-4" />
-            <span>
-              {"Kirgan vaqt"} {new Date(user.date_joined).toLocaleDateString()}
-            </span>
+            <MapPin className="h-4 w-4" />
+            <span>Hudud: {user.region}</span>
           </div>
+        )}
 
-          {user.last_login && (
-            <div className="text-sm text-muted-foreground">
-              {"Ohirgi marta kirgan"}:{" "}
-              {new Date(user.last_login).toLocaleDateString()}
-            </div>
-          )}
-
-          <div className="flex items-center gap-2">
-            <Button
-              size="sm"
-              variant="outline"
-              onClick={() => {
-                setEditingUser(user);
-                setDialogOpen(true);
-              }}
-              className="flex-1"
-            >
-              <Edit className="h-4 w-4 mr-2" />
-              Tahrirlash
-            </Button>
-            <Button
-              size="sm"
-              variant="outline"
-              onClick={() => {
-                setOpenDelete(true);
-                if (setUserDelete) {
-                  setUserDelete(user);
-                }
-              }}
-              className="text-red-600 hover:text-red-700"
-            >
-              <Trash2 className="h-4 w-4" />
-            </Button>
+        {user.address && (
+          <div className="flex items-start gap-2 text-sm text-muted-foreground">
+            <MapPin className="h-4 w-4 mt-0.5" />
+            <span>Manzil: {user.address}</span>
           </div>
-        </CardContent>
-      </Card>
-    </>
+        )}
+
+        {/* ID ma'lumoti */}
+        <div className="pt-2 border-t text-xs text-muted-foreground">
+          ID: {user.id}
+        </div>
+
+        {/* Uncommnet qilish uchun tugmalar
+        <div className="flex items-center gap-2 pt-2">
+          <Button
+            size="sm"
+            variant="outline"
+            onClick={() => {
+              setEditingUser(user);
+              setDialogOpen?.(true);
+            }}
+            className="flex-1"
+          >
+            <Edit className="h-4 w-4 mr-2" />
+            Tahrirlash
+          </Button>
+          <Button
+            size="sm"
+            variant="outline"
+            onClick={() => {
+              setOpenDelete(true);
+              setUserDelete(user);
+            }}
+            className="text-red-600 hover:text-red-700"
+          >
+            <Trash2 className="h-4 w-4" />
+          </Button>
+        </div>
+        */}
+      </CardContent>
+    </Card>
   );
 }
diff --git a/src/features/users/ui/UserTable.tsx b/src/features/users/ui/UserTable.tsx
index d52f01a..525e119 100644
--- a/src/features/users/ui/UserTable.tsx
+++ b/src/features/users/ui/UserTable.tsx
@@ -7,17 +7,16 @@ interface Props {
   data: UserData[] | undefined;
   isLoading: boolean;
   isError: boolean;
-  setDialogOpen: Dispatch<SetStateAction<boolean>>;
-  setEditingUser: Dispatch<SetStateAction<UserData | null>>;
-  setOpenDelete: Dispatch<SetStateAction<boolean>>;
-  setUserDelete: Dispatch<SetStateAction<UserData | null>>;
+  setDialogOpen?: Dispatch<SetStateAction<boolean>>;
+  setEditingUser?: Dispatch<SetStateAction<UserData | null>>;
+  setOpenDelete?: Dispatch<SetStateAction<boolean>>;
+  setUserDelete?: Dispatch<SetStateAction<UserData | null>>;
 }
 
 const UserTable = ({
   data,
   isLoading,
   isError,
-  setDialogOpen,
   setEditingUser,
   setOpenDelete,
   setUserDelete,
@@ -46,9 +45,9 @@ const UserTable = ({
                 setOpenDelete={setOpenDelete}
                 setUserDelete={setUserDelete}
                 key={user.id}
-                setDialogOpen={setDialogOpen}
+                // setDialogOpen={setDialogOpen}
                 setEditingUser={setEditingUser}
-                user={{ ...user, role: user.is_superuser ? "admin" : "user" }}
+                user={{ ...user }}
               />
             ))}
           </div>
diff --git a/src/features/users/ui/UsersList.tsx b/src/features/users/ui/UsersList.tsx
index a3981d0..99e7df7 100644
--- a/src/features/users/ui/UsersList.tsx
+++ b/src/features/users/ui/UsersList.tsx
@@ -1,24 +1,27 @@
 import { user_api } from "@/features/users/lib/api";
-import type { UserData, UserListRes } from "@/features/users/lib/data";
+import type { UserData } from "@/features/users/lib/data";
 import DeleteUser from "@/features/users/ui/DeleteUser";
-import Filter from "@/features/users/ui/Filter";
 import UserTable from "@/features/users/ui/UserTable";
+import { Button } from "@/shared/ui/button";
 import Pagination from "@/shared/ui/pagination";
 
-import { useQuery } from "@tanstack/react-query";
+import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
+import { Loader2 } from "lucide-react";
 import { useState } from "react";
+import { toast } from "sonner";
 
 const UsersList = () => {
-  const [editingUser, setEditingUser] = useState<UserData | null>(null);
+  // const [editingUser, setEditingUser] = useState<UserData | null>(null);
+  const queryClient = useQueryClient();
   const [opneDelete, setOpenDelete] = useState(false);
   const [userDelete, setUserDelete] = useState<UserData | null>(null);
 
-  const [regionValue, setRegionValue] = useState<UserListRes | null>(null);
+  // const [regionValue, setRegionValue] = useState<UserListRes | null>(null);
   const limit = 20;
   const [currentPage, setCurrentPage] = useState(1);
 
   const { data, isLoading, isError } = useQuery({
-    queryKey: ["user_list", currentPage, regionValue],
+    queryKey: ["user_list", currentPage],
     queryFn: () => {
       return user_api.list({
         page: currentPage,
@@ -30,28 +33,55 @@ const UsersList = () => {
     },
   });
 
-  const [dialogOpen, setDialogOpen] = useState(false);
+  const { mutate, isPending } = useMutation({
+    mutationFn: () => user_api.import_user(),
+    onSuccess: () => {
+      toast.success("Foydalanuvchilar import qilindi", {
+        richColors: true,
+        position: "top-center",
+      });
+      queryClient.refetchQueries({ queryKey: ["user_list"] });
+    },
+    onError: () => {
+      toast.error("Xatolik yuz berdi", {
+        richColors: true,
+        position: "top-center",
+      });
+    },
+  });
+
+  // const [dialogOpen, setDialogOpen] = useState(false);
 
   return (
     <div className="flex flex-col h-full p-10 w-full">
       <div className="flex flex-col md:flex-row justify-between items-start md:items-center mb-4 gap-4">
         <h1 className="text-2xl font-bold">Foydalanuvchilar ro'yxati</h1>
+        <Button
+          className="bg-blue-500 h-12 text-md hover:bg-blue-500 cursor-pointer"
+          onClick={() => mutate()}
+        >
+          {isPending ? (
+            <Loader2 className="animate-spin" />
+          ) : (
+            "Foydalanuvchini import qilish"
+          )}
+        </Button>
 
-        <Filter
+        {/* <Filter
           dialogOpen={dialogOpen}
           setDialogOpen={setDialogOpen}
           editingUser={editingUser}
           setEditingUser={setEditingUser}
           setRegionValue={setRegionValue}
-        />
+        /> */}
       </div>
 
       <UserTable
         data={data?.results}
         isLoading={isLoading}
-        setEditingUser={setEditingUser}
+        // setEditingUser={setEditingUser}
         isError={isError}
-        setDialogOpen={setDialogOpen}
+        // setDialogOpen={setDialogOpen}
         setOpenDelete={setOpenDelete}
         setUserDelete={setUserDelete}
       />
diff --git a/src/shared/config/api/URLs.ts b/src/shared/config/api/URLs.ts
index 2c870c4..25dbe13 100644
--- a/src/shared/config/api/URLs.ts
+++ b/src/shared/config/api/URLs.ts
@@ -32,4 +32,5 @@ export const API_URLS = {
   UpdateProduct: (id: string) => `${API_V}admin/product/${id}/update/`,
   DeleteProdut: (id: string) => `${API_V}admin/product/${id}/delete/`,
   QuestionnaireList: `${API_V}admin/questionnaire/list/`,
+  Import_User: `${API_V}admin/user/import_users/`,
 };