send message

2025-12-10 18:49:57 +05:00
parent e656ad2e61
commit 8b156ab330
7 changed files with 281 additions and 60 deletions
--- a/src/features/send-message/ui/Send.tsx
+++ b/src/features/send-message/ui/Send.tsx
@@ -0,0 +1,11 @@
+const Send = () => {
+  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">Xabar jo'natish</h1>
+      </div>
+    </div>
+  );
+};
+
+export default Send;
--- a/src/features/users/lib/api.ts
+++ b/src/features/users/lib/api.ts
@@ -47,3 +47,10 @@ export const user_api = {
    return res;
  },
 };
+
+export const send_message = {
+  async send(body: { user_ids: number[]; message: string }) {
+    const res = await httpClient.post(API_URLS.SEND_MESSAGE, body);
+    return res;
+  },
+};
--- a/src/features/users/ui/Filter.tsx
+++ b/src/features/users/ui/Filter.tsx
@@ -1,5 +1,6 @@
 import { region_api } from "@/features/region/lib/api";
 import type { RegionListResData } from "@/features/region/lib/data";
+import { send_message } from "@/features/users/lib/api";
 import type { UserListData } from "@/features/users/lib/data";
 import AddUsers from "@/features/users/ui/AddUsers";
 import { cn } from "@/shared/lib/utils";
@@ -14,12 +15,21 @@ import {
 } from "@/shared/ui/command";
 import {
  Dialog,
+  DialogClose,
  DialogContent,
  DialogHeader,
  DialogTitle,
  DialogTrigger,
 } from "@/shared/ui/dialog";
+import {
+  Form,
+  FormControl,
+  FormField,
+  FormItem,
+  FormMessage,
+} from "@/shared/ui/form";
 import { Input } from "@/shared/ui/input";
+import { Label } from "@/shared/ui/label";
 import { Popover, PopoverContent, PopoverTrigger } from "@/shared/ui/popover";
 import {
  Select,
@@ -28,9 +38,28 @@ import {
  SelectTrigger,
  SelectValue,
 } from "@/shared/ui/select";
-import { useQuery } from "@tanstack/react-query";
-import { Check, ChevronsUpDown, Loader2, Plus } from "lucide-react";
+import { Textarea } from "@/shared/ui/textarea";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { useMutation, useQuery } from "@tanstack/react-query";
+import type { AxiosError } from "axios";
+import {
+  Check,
+  ChevronsUpDown,
+  Loader2,
+  MessageCircle,
+  Plus,
+  XIcon,
+} from "lucide-react";
 import { useState, type Dispatch, type SetStateAction } from "react";
+import { useForm } from "react-hook-form";
+import { toast } from "sonner";
+import z from "zod";
+
+const FormSchema = z.object({
+  text: z.string().min(10, {
+    message: "Xabar uzunligi kamida 10ta belgidan katta bolishi kerak",
+  }),
+});

 interface Props {
  searchTerm: string;
@@ -43,6 +72,10 @@ interface Props {
  setDialogOpen: Dispatch<SetStateAction<boolean>>;
  editingUser: UserListData | null;
  setEditingUser: Dispatch<SetStateAction<UserListData | null>>;
+  setSendMessage: Dispatch<SetStateAction<boolean>>;
+  setUserList: Dispatch<SetStateAction<number[] | []>>;
+  sendMessage: boolean;
+  userList: number[] | null;
 }

 const Filter = ({
@@ -51,14 +84,19 @@ const Filter = ({
  statusFilter,
  setStatusFilter,
  regionValue,
+  sendMessage,
  setRegionValue,
+  userList,
  dialogOpen,
+  setUserList,
  setDialogOpen,
  editingUser,
  setEditingUser,
+  setSendMessage,
 }: Props) => {
  const [openRegion, setOpenRegion] = useState(false);
  const [regionSearch, setRegionSearch] = useState("");
+  const [message, setMessage] = useState<boolean>(false);

  const { data: regions, isLoading } = useQuery({
    queryKey: ["region_list", regionSearch],
@@ -66,6 +104,43 @@ const Filter = ({
    select: (res) => res.data.data,
  });

+  const form = useForm<z.infer<typeof FormSchema>>({
+    resolver: zodResolver(FormSchema),
+    defaultValues: {
+      text: "",
+    },
+  });
+
+  const { mutate, isPending } = useMutation({
+    mutationFn: (body: { user_ids: number[]; message: string }) =>
+      send_message.send(body),
+    onSuccess: () => {
+      toast.success("Xabar jo'natildi", {
+        richColors: true,
+        position: "top-center",
+      });
+      setMessage(false);
+      setSendMessage(false);
+    },
+    onError: (err: AxiosError) => {
+      const errMessage = err.response?.data as { message: string };
+      const messageText = errMessage.message;
+      toast.error(messageText || "Xatolik yuz berdi", {
+        richColors: true,
+        position: "top-center",
+      });
+    },
+  });
+
+  function onSubmit(data: z.infer<typeof FormSchema>) {
+    if (userList) {
+      mutate({
+        message: data.text,
+        user_ids: userList,
+      });
+    }
+  }
+
  return (
    <div className="flex flex-wrap gap-2 items-center">
      {/* Search input */}
@@ -179,6 +254,7 @@ const Filter = ({
            variant="default"
            className="bg-blue-500 cursor-pointer hover:bg-blue-500"
            onClick={() => setEditingUser(null)}
+            disabled={sendMessage}
          >
            <Plus className="!h-5 !w-5" /> Qo'shish
          </Button>
@@ -195,6 +271,102 @@ const Filter = ({
          <AddUsers initialData={editingUser} setDialogOpen={setDialogOpen} />
        </DialogContent>
      </Dialog>
+      <Button
+        variant="default"
+        className="bg-blue-500 cursor-pointer hover:bg-blue-500"
+        onClick={() => {
+          setSendMessage((prev) => !prev);
+          setUserList([]);
+        }}
+      >
+        {sendMessage ? (
+          <>
+            <XIcon className="!h-5 !w-5" />
+            Bekor qilish
+          </>
+        ) : (
+          <>
+            <MessageCircle className="!h-5 !w-5" />
+            Xabar jo'natish
+          </>
+        )}
+      </Button>
+      {sendMessage && (
+        <Button
+          variant="default"
+          className="bg-blue-500 cursor-pointer hover:bg-blue-500"
+          onClick={() => {
+            if (userList === null) {
+              toast.error("Kamida 1ta foydalanuvchi tanlash kerak.", {
+                richColors: true,
+                position: "top-center",
+              });
+            } else {
+              setMessage(true);
+              form.reset({
+                text: "",
+              });
+            }
+          }}
+        >
+          Xabarni jo'natish
+        </Button>
+      )}
+
+      <Dialog open={message} onOpenChange={setMessage}>
+        <DialogContent className="sm:max-w-[425px]">
+          <DialogHeader>
+            <DialogTitle>Xabar jo'natish</DialogTitle>
+          </DialogHeader>
+
+          <Form {...form}>
+            <form
+              onSubmit={form.handleSubmit(onSubmit)}
+              className="space-y-4 flex flex-col"
+            >
+              <FormField
+                name="text"
+                control={form.control}
+                render={({ field }) => (
+                  <FormItem>
+                    <Label>Xabarni yozing</Label>
+                    <FormControl>
+                      <Textarea
+                        className="min-h-44 max-h-64"
+                        placeholder="Xabar"
+                        {...field}
+                      />
+                    </FormControl>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+
+              <div className="flex justify-end gap-2 mt-2">
+                <DialogClose asChild>
+                  <Button
+                    variant="outline"
+                    type="button"
+                    onClick={() => {
+                      setMessage(false);
+                      setSendMessage(false);
+                    }}
+                  >
+                    Bekor qilish
+                  </Button>
+                </DialogClose>
+                <Button type="submit">
+                  {isPending ? (
+                    <Loader2 className="animate-spin" />
+                  ) : (
+                    "Jo'natish"
+                  )}
+                </Button>
+              </div>
+            </form>
+          </Form>
+        </DialogContent>
+      </Dialog>
    </div>
  );
 };
--- a/src/features/users/ui/UserTable.tsx
+++ b/src/features/users/ui/UserTable.tsx
@@ -1,6 +1,7 @@
 import { user_api } from "@/features/users/lib/api";
 import type { UserListData, UserListRes } from "@/features/users/lib/data";
 import { Button } from "@/shared/ui/button";
+import { Checkbox } from "@/shared/ui/checkbox";
 import {
  Table,
  TableBody,
@@ -22,8 +23,11 @@ interface Props {
  isError: boolean;
  setDialogOpen: Dispatch<SetStateAction<boolean>>;
  setEditingUser: Dispatch<SetStateAction<UserListData | null>>;
+  setUserList: Dispatch<SetStateAction<number[] | []>>;
  handleDelete: (user: UserListData) => void;
  currentPage: number;
+  userList: number[] | null;
+  sendMessage: boolean;
 }

 const UserTable = ({
@@ -32,18 +36,23 @@ const UserTable = ({
  isError,
  setDialogOpen,
  handleDelete,
+  userList,
  setEditingUser,
+  setUserList,
+  sendMessage,
  currentPage,
 }: Props) => {
  const queryClient = useQueryClient();
-
  const [pendingUserId, setPendingUserId] = useState<number | null>(null);

+  // TableHeader checkbox holati
+  const allSelected = data?.data.data.results.length
+    ? userList?.length === data.data.data.results.length
+    : false;
+
  const { mutate: active } = useMutation({
    mutationFn: (id: number) => user_api.active(id),
-    onMutate: (id) => {
-      setPendingUserId(id);
-    },
+    onMutate: (id) => setPendingUserId(id),
    onSuccess: () => {
      queryClient.refetchQueries({ queryKey: ["user_list"] });
      toast.success(`Foydalanuvchi aktivlashdi`);
@@ -51,29 +60,50 @@ const UserTable = ({
    },
    onError: (err: AxiosError) => {
      const errMessage = err.response?.data as { message: string };
-      const messageText = errMessage.message;
      setPendingUserId(null);
-      toast.error(messageText || "Xatolik yuz berdi", {
+      toast.error(errMessage?.message || "Xatolik yuz berdi", {
        richColors: true,
        position: "top-center",
      });
    },
  });

-  const handleActivate = (userId: number) => {
-    active(userId);
+  const handleActivate = (userId: number) => active(userId);
+
+  // TableHeader checkbox toggle
+  const handleSelectAll = () => {
+    if (!data) return;
+    if (allSelected) {
+      setUserList([]);
+      setUserList([]);
+    } else {
+      const allIds = data.data.data.results.map((u) => u.id);
+      setUserList(allIds);
+      setUserList(allIds);
+    }
+  };
+
+  // Individual checkbox toggle
+  const handleSelect = (id: number) => {
+    let updated: number[] = [];
+    if (userList) {
+      if (userList?.includes(id)) {
+        updated = userList.filter((i) => i !== id);
+      } else {
+        updated = [...userList, id];
+      }
+      setUserList(updated);
+      setUserList(updated.length ? updated : []);
+    }
  };

  return (
    <div className="flex-1 overflow-auto">
      {isLoading && (
        <div className="h-full flex items-center justify-center bg-white/70 z-10">
-          <span className="text-lg font-medium">
          <Loader2 className="animate-spin" />
-          </span>
        </div>
      )}
-
      {isError && (
        <div className="h-full flex items-center justify-center z-10">
          <span className="text-lg font-medium text-red-600">
@@ -81,10 +111,20 @@ const UserTable = ({
          </span>
        </div>
      )}
+
      {!isLoading && !isError && (
        <Table>
          <TableHeader>
            <TableRow className="text-[16px] text-center">
+              {sendMessage && (
+                <TableHead className="text-start">
+                  <Checkbox
+                    id="user_id_all"
+                    checked={allSelected}
+                    onCheckedChange={handleSelectAll}
+                  />
+                </TableHead>
+              )}
              <TableHead className="text-start">ID</TableHead>
              <TableHead className="text-start">Ismi</TableHead>
              <TableHead className="text-start">Familiyasi</TableHead>
@@ -93,58 +133,25 @@ const UserTable = ({
              <TableHead className="text-right">Harakatlar</TableHead>
            </TableRow>
          </TableHeader>
+
          <TableBody>
            {data && data.data.data.results.length > 0 ? (
              data.data.data.results.map((user, index) => (
                <TableRow key={user.id} className="text-[14px] text-start">
+                  {sendMessage && (
+                    <TableCell className="text-start">
+                      <Checkbox
+                        id={`user_id_${user.id}`}
+                        checked={userList?.includes(user.id)}
+                        onCheckedChange={() => handleSelect(user.id)}
+                      />
+                    </TableCell>
+                  )}
                  <TableCell>{index + 1 + (currentPage - 1) * 20}</TableCell>
                  <TableCell>{user.first_name}</TableCell>
                  <TableCell>{user.last_name}</TableCell>
                  <TableCell>{user.region.name}</TableCell>
                  <TableCell className="text-center">
-                    {/* <Select
-                      value={user.is_active ? "true" : "false"}
-                      onValueChange={() => handleActivate(user.id)}
-                    >
-                      <SelectTrigger
-                        className={clsx(
-                          "w-[180px] mx-auto",
-                          user.is_active
-                            ? "bg-green-100 text-green-800"
-                            : "bg-red-100 text-red-800",
-                        )}
-                      >
-                        {pendingUserId === user.id ? (
-                          <Loader2 className="animate-spin h-4 w-4 mx-auto" />
-                        ) : (
-                          <SelectValue placeholder="Holati" />
-                        )}
-                      </SelectTrigger>
-                      <SelectContent>
-                        <SelectItem
-                          disabled={pendingUserId === user.id}
-                          value="true"
-                          className="text-green-500 hover:!text-green-500"
-                        >
-                          {pendingUserId === user.id ? (
-                            <Loader2 className="animate-spin h-4 w-4 mx-auto" />
-                          ) : (
-                            "Faol"
-                          )}
-                        </SelectItem>
-                        <SelectItem
-                          disabled={pendingUserId === user.id}
-                          value="false"
-                          className="text-red-500 hover:!text-red-500"
-                        >
-                          {pendingUserId === user.id ? (
-                            <Loader2 className="animate-spin h-4 w-4 mx-auto" />
-                          ) : (
-                            "Faol emas"
-                          )}
-                        </SelectItem>
-                      </SelectContent>
-                    </Select> */}
                    <Button
                      className={clsx(
                        "mx-auto cursor-pointer",
@@ -152,7 +159,7 @@ const UserTable = ({
                          ? "bg-green-500 hover:bg-green-500"
                          : "bg-blue-500 hover:bg-blue-500",
                      )}
-                      disabled={user.is_active}
+                      disabled={user.is_active || sendMessage}
                      onClick={() => handleActivate(user.id)}
                    >
                      {pendingUserId === user.id ? (
@@ -170,6 +177,7 @@ const UserTable = ({
                        setEditingUser(user);
                        setDialogOpen(true);
                      }}
+                      disabled={sendMessage}
                      className="bg-blue-500 text-white hover:bg-blue-500 hover:text-white cursor-pointer"
                    >
                      <Edit className="h-4 w-4" />
@@ -177,6 +185,7 @@ const UserTable = ({
                    <Button
                      variant="destructive"
                      size="sm"
+                      disabled={sendMessage}
                      onClick={() => handleDelete(user)}
                      className="cursor-pointer"
                    >
@@ -187,7 +196,7 @@ const UserTable = ({
              ))
            ) : (
              <TableRow>
-                <TableCell colSpan={6} className="text-center py-4 text-lg">
+                <TableCell colSpan={7} className="text-center py-4 text-lg">
                  Foydalanuvchilar topilmadi.
                </TableCell>
              </TableRow>
--- a/src/features/users/ui/UsersList.tsx
+++ b/src/features/users/ui/UsersList.tsx
@@ -21,6 +21,8 @@ const UsersList = () => {
  const [statusFilter, setStatusFilter] = useState<"all" | "true" | "false">(
    "all",
  );
+  const [sendMessage, setSendMessage] = useState<boolean>(false);
+  const [userList, setUserList] = useState<number[] | []>([]);

  const [userDelete, setUserDelete] = useState<UserListData | null>(null);
  const [opneDelete, setOpenDelete] = useState<boolean>(false);
@@ -72,12 +74,16 @@ const UsersList = () => {
            setSearchTerm={setSearchTerm}
            setStatusFilter={setStatusFilter}
            statusFilter={statusFilter}
+            sendMessage={sendMessage}
+            setUserList={setUserList}
            regionValue={regionValue}
+            setSendMessage={setSendMessage}
            setRegionValue={setRegionValue}
            dialogOpen={dialogOpen}
            setDialogOpen={setDialogOpen}
            editingUser={editingUser}
            setEditingUser={setEditingUser}
+            userList={userList}
          />
        </div>

@@ -89,6 +95,9 @@ const UsersList = () => {
          setDialogOpen={setDialogOpen}
          handleDelete={handleDelete}
          currentPage={currentPage}
+          setUserList={setUserList}
+          userList={userList}
+          sendMessage={sendMessage}
        />
        <Pagination
          currentPage={currentPage}
--- a/src/pages/SendMessage.tsx
+++ b/src/pages/SendMessage.tsx
@@ -0,0 +1,12 @@
+import Send from "@/features/send-message/ui/Send";
+import SidebarLayout from "@/SidebarLayout";
+
+const SendMessage = () => {
+  return (
+    <SidebarLayout>
+      <Send />
+    </SidebarLayout>
+  );
+};
+
+export default SendMessage;
--- a/src/shared/config/api/URLs.ts
+++ b/src/shared/config/api/URLs.ts
@@ -20,4 +20,5 @@ export const API_URLS = {
  TOUR_PLAN: `${API_V}admin/tour_plan/`,
  SUPPORT: `${API_V}admin/support/list/`,
  DISTRIBUTED: `${API_V}admin/distributed_product/list/`,
+  SEND_MESSAGE: `${API_V}admin/send_message/`,
 };