feat: update external channels page

app/(dashboard)/external-channels/page.tsx

@@ -35,9 +35,22 @@ import {
   Pencil,
   Trash2,
   Users,
+  ArrowUpDown,
+  ArrowUp,
+  ArrowDown,
+  LayoutGrid,
+  Table2,
 } from "lucide-react";
 import type { ExternalChannel } from "@/lib/types/api";
 import { Alert, AlertDescription } from "@/components/ui/alert";
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "@/components/ui/table";
 import {
   Dialog,
   DialogContent,
@@ -51,6 +64,15 @@ import { Label } from "@/components/ui/label";
 import { Textarea } from "@/components/ui/textarea";
 import { useTargetChannel } from "@/components/providers/target-channel-provider";
 
+type ViewMode = "table" | "grid";
+type SortField =
+  | "title"
+  | "username"
+  | "subscribers_count"
+  | "telegram_id"
+  | null;
+type SortDirection = "asc" | "desc" | null;
+
 export default function ExternalChannelsPage() {
   const { selectedChannel } = useTargetChannel();
   const [channels, setChannels] = useState<ExternalChannel[]>([]);
@@ -59,6 +81,9 @@ export default function ExternalChannelsPage() {
   const [searchQuery, setSearchQuery] = useState("");
   const [isCreateDialogOpen, setIsCreateDialogOpen] = useState(false);
   const [isCreating, setIsCreating] = useState(false);
+  const [viewMode, setViewMode] = useState<ViewMode>("table");
+  const [sortField, setSortField] = useState<SortField>(null);
+  const [sortDirection, setSortDirection] = useState<SortDirection>(null);
 
   // Form state
   const [formData, setFormData] = useState({
@@ -148,11 +173,77 @@ export default function ExternalChannelsPage() {
     }
   };
 
-  const filteredChannels = channels.filter(
+  // Обработка сортировки
+  const handleSort = (field: SortField) => {
+    if (sortField === field) {
+      // Переключение: asc -> desc -> null -> asc
+      if (sortDirection === "asc") {
+        setSortDirection("desc");
+      } else if (sortDirection === "desc") {
+        setSortField(null);
+        setSortDirection(null);
+      }
+    } else {
+      setSortField(field);
+      setSortDirection("asc");
+    }
+  };
+
+  const getSortIcon = (field: SortField) => {
+    if (sortField !== field) {
+      return <ArrowUpDown className="ml-2 h-4 w-4 inline" />;
+    }
+    if (sortDirection === "asc") {
+      return <ArrowUp className="ml-2 h-4 w-4 inline" />;
+    }
+    return <ArrowDown className="ml-2 h-4 w-4 inline" />;
+  };
+
+  const filteredChannels = channels
+    .filter(
       (channel) =>
         channel.title.toLowerCase().includes(searchQuery.toLowerCase()) ||
         channel.username?.toLowerCase().includes(searchQuery.toLowerCase())
-  );
+    )
+    .sort((a, b) => {
+      if (!sortField || !sortDirection) return 0;
+
+      let aValue: string | number | null = "";
+      let bValue: string | number | null = "";
+
+      switch (sortField) {
+        case "title":
+          aValue = a.title;
+          bValue = b.title;
+          break;
+        case "username":
+          aValue = a.username || "";
+          bValue = b.username || "";
+          break;
+        case "subscribers_count":
+          aValue = a.subscribers_count || 0;
+          bValue = b.subscribers_count || 0;
+          break;
+        case "telegram_id":
+          aValue = a.telegram_id;
+          bValue = b.telegram_id;
+          break;
+      }
+
+      // Сравнение строк
+      if (typeof aValue === "string" && typeof bValue === "string") {
+        return sortDirection === "asc"
+          ? aValue.localeCompare(bValue)
+          : bValue.localeCompare(aValue);
+      }
+
+      // Сравнение чисел
+      if (typeof aValue === "number" && typeof bValue === "number") {
+        return sortDirection === "asc" ? aValue - bValue : bValue - aValue;
+      }
+
+      return 0;
+    });
 
   return (
     <>
@@ -292,6 +383,7 @@ export default function ExternalChannelsPage() {
           </Alert>
         )}
 
+        <div className="flex items-center justify-between gap-2">
           <div className="flex items-center gap-2">
             <div className="relative flex-1 max-w-sm">
               <Search className="absolute left-2.5 top-2.5 h-4 w-4 text-muted-foreground" />
@@ -299,13 +391,32 @@ export default function ExternalChannelsPage() {
                 placeholder="Поиск по названию или username..."
                 value={searchQuery}
                 onChange={(e) => setSearchQuery(e.target.value)}
-              className="pl-8"
+                className="pl-8 rounded-lg"
               />
             </div>
             <Badge variant="secondary">
               Всего: {formatNumber(filteredChannels.length)}
             </Badge>
           </div>
+          <div className="flex items-center gap-1 border rounded-md">
+            <Button
+              variant={viewMode === "table" ? "default" : "ghost"}
+              size="sm"
+              onClick={() => setViewMode("table")}
+              className="rounded-r-none"
+            >
+              <Table2 className="h-4 w-4" />
+            </Button>
+            <Button
+              variant={viewMode === "grid" ? "default" : "ghost"}
+              size="sm"
+              onClick={() => setViewMode("grid")}
+              className="rounded-l-none"
+            >
+              <LayoutGrid className="h-4 w-4" />
+            </Button>
+          </div>
+        </div>
 
         {loading ? (
           <div className="flex items-center justify-center p-12">
@@ -325,7 +436,7 @@ export default function ExternalChannelsPage() {
               </p>
             </CardContent>
           </Card>
-        ) : (
+        ) : viewMode === "grid" ? (
           <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-3">
             {filteredChannels.map((channel) => (
               <Card
@@ -379,14 +490,6 @@ export default function ExternalChannelsPage() {
                         Подписчики
                       </div>
                     </div>
-                    <div className="flex-1 rounded-lg border bg-muted/50 p-2 text-center">
-                      <div className="text-sm font-medium">
-                        ID: {channel.telegram_id}
-                      </div>
-                      <div className="text-xs text-muted-foreground">
-                        Telegram ID
-                      </div>
-                    </div>
                   </div>
 
                   <div className="flex gap-2 pt-2">
@@ -404,6 +507,109 @@ export default function ExternalChannelsPage() {
               </Card>
             ))}
           </div>
+        ) : (
+          <Card>
+            <CardHeader>
+              <CardTitle>Список внешних каналов</CardTitle>
+              <CardDescription>
+                Каналы, в которых покупаете рекламу
+              </CardDescription>
+            </CardHeader>
+            <CardContent>
+              <Table>
+                <TableHeader>
+                  <TableRow>
+                    <TableHead
+                      className="cursor-pointer hover:bg-muted/50"
+                      onClick={() => handleSort("title")}
+                    >
+                      Название
+                      {getSortIcon("title")}
+                    </TableHead>
+                    <TableHead className="cursor-pointer hover:bg-muted/50">
+                      Username
+                    </TableHead>
+                    <TableHead>Описание</TableHead>
+                    <TableHead
+                      className="text-right cursor-pointer hover:bg-muted/50"
+                      onClick={() => handleSort("subscribers_count")}
+                    >
+                      Подписчики
+                      {getSortIcon("subscribers_count")}
+                    </TableHead>
+                    <TableHead className="text-right cursor-pointer hover:bg-muted/50">
+                      Telegram ID
+                    </TableHead>
+                    <TableHead></TableHead>
+                  </TableRow>
+                </TableHeader>
+                <TableBody>
+                  {filteredChannels.map((channel) => (
+                    <TableRow key={channel.id}>
+                      <TableCell className="font-medium">
+                        <div className="flex items-center gap-2">
+                          <a
+                            href={`https://t.me/${channel.username}`}
+                            target="_blank"
+                            rel="noopener noreferrer"
+                            className="flex items-center gap-2 hover:underline text-primary whitespace-nowrap"
+                            tabIndex={0}
+                            aria-label={`Открыть канал ${channel.title} в Telegram`}
+                            onClick={(e) => e.stopPropagation()}
+                            onKeyDown={(e) => {
+                              if (e.key === "Enter" || e.key === " ") {
+                                window.open(
+                                  `https://t.me/${channel.username}`,
+                                  "_blank",
+                                  "noopener,noreferrer"
+                                );
+                              }
+                            }}
+                          >
+                            <span className="inline-flex items-center gap-2">
+                              <span>{channel.title}</span>
+                              <ExternalLinkIcon className="h-4 w-4 text-muted-foreground shrink-0" />
+                            </span>
+                          </a>
+                        </div>
+                      </TableCell>
+                      <TableCell>
+                        {channel.username ? (
+                          <div>{formatUsername(channel.username)}</div>
+                        ) : (
+                          "—"
+                        )}
+                      </TableCell>
+                      <TableCell>
+                        <div className="max-w-[300px] truncate text-muted-foreground">
+                          {channel.description || "—"}
+                        </div>
+                      </TableCell>
+                      <TableCell className="text-right">
+                        {channel.subscribers_count
+                          ? formatNumber(channel.subscribers_count)
+                          : "—"}
+                      </TableCell>
+                      <TableCell className="text-right">
+                        {channel.telegram_id}
+                      </TableCell>
+                      <TableCell className="text-right">
+                        <Button
+                          variant="ghost"
+                          size="sm"
+                          onClick={() =>
+                            handleDelete(channel.id, channel.title)
+                          }
+                        >
+                          <Trash2 className="h-4 w-4 text-destructive" />
+                        </Button>
+                      </TableCell>
+                    </TableRow>
+                  ))}
+                </TableBody>
+              </Table>
+            </CardContent>
+          </Card>
         )}
       </div>
     </>