send message

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;

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;
+  },
+};

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 { Textarea } from "@/shared/ui/textarea";
-import { Check, ChevronsUpDown, Loader2, Plus } from "lucide-react";
+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>
   );
 };

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) => {
+    onMutate: (id) => setPendingUserId(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) => {
+  const handleActivate = (userId: number) => active(userId);
-    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>

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}

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;

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