order page and user page update

2025-12-26 17:17:45 +05:00
parent 768ba9585d
commit 388c8bcfd1
9 changed files with 209 additions and 108 deletions
--- 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;
 }

--- 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" />
--- 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}
--- 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;
+  },
 };
--- 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;
 }
--- 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>
  );
 }
--- 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>
--- 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}
      />
--- 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/`,
 };