feat: Add data-table and students admin page

app/employees/EmployeesList.tsx

@@ -56,6 +56,7 @@ export function EmployeesList({
 
         employees = data ?? []
       } else {
+        if (searchQuery.length < 3) return []
         const { data } = await supabase
           .schema("rtu_mirea")
           .rpc("search_employees_by_name", {

app/student/page.tsx

@@ -11,10 +11,10 @@ import TelegramApi from "@/lib/telegram-api"
 import { cn } from "@/lib/utils"
 import { ScrollArea, ScrollBar } from "@/components/ui/scroll-area"
 
+import { RetakesTable } from "../../components/SelfRetakesTable"
 import DebtsCard from "./DebtsCard"
 import { OnlineEduDisciplinesCard } from "./OnlineEduDisciplinesCard"
 import { ResourceCard } from "./ResourceCard"
-import { SelfRetakesTable } from "./SelfRetakesTable"
 import { TelegramConnectionCard } from "./TelegramConnectionCard"
 
 export const dynamic = "force-dynamic"
@@ -61,7 +61,7 @@ export default async function Student() {
           </div>
         </div>
 
-        <SelfRetakesTable retakes={retakes} />
+        <RetakesTable retakes={retakes} />
       </div>
 
       <div className="mt-6 space-y-4">

app/students/[id]/page.tsx

@@ -0,0 +1,147 @@
+import { redirect } from "next/navigation"
+
+import {
+  getSession,
+  getStudentById,
+  getStudentDebtsById,
+  getStudentRetakesById,
+} from "@/lib/supabase/supabase-server"
+import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"
+import { Button } from "@/components/ui/button"
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "@/components/ui/card"
+import { RetakesTable } from "@/components/RetakesTable"
+
+export const dynamic = "force-dynamic"
+
+export default async function StudentById({
+  params,
+}: {
+  params: { id: string }
+}) {
+  const session = await getSession()
+
+  if (!session?.user) redirect("/login")
+
+  const [student, debts, retakes] = await Promise.all([
+    getStudentById(params.id),
+    getStudentDebtsById(params.id),
+    getStudentRetakesById(params.id),
+  ])
+
+  return (
+    <>
+      <div className="flex items-center justify-between space-y-2">
+        <h2 className="text-3xl font-bold tracking-tight">
+          {student?.first_name} {student?.last_name}
+        </h2>
+      </div>
+      <div className="space-y-4">
+        <div className="grid gap-4 md:grid-cols-2">
+          <Card>
+            <CardHeader>
+              <CardTitle>Информация о студенте</CardTitle>
+              <CardDescription>
+                Информация о студенте и его долги.
+              </CardDescription>
+            </CardHeader>
+            <CardContent>
+              <div className="flex flex-col space-y-6">
+                <div className="grid items-center justify-between gap-4 md:grid-cols-2">
+                  <div className="flex items-center space-x-4">
+                    <Avatar className="h-8 w-8">
+                      <AvatarFallback>
+                        {student?.first_name[0]} {student?.last_name[0]}
+                      </AvatarFallback>
+                    </Avatar>
+                    <div className="flex flex-col">
+                      <p className="text-sm font-medium leading-none">
+                        {student?.first_name} {student?.last_name}{" "}
+                        {student?.second_name}
+                        <span className="ml-2 text-sm text-muted-foreground">
+                          {student?.email}
+                        </span>
+                      </p>
+
+                      <p className="text-sm text-muted-foreground">
+                        {student?.academic_group}
+                      </p>
+                    </div>
+                  </div>
+                  <Button variant="outline" className="ml-auto">
+                    Отправить сообщение
+                  </Button>
+                </div>
+
+                <div className="grid gap-4 md:grid-cols-2">
+                  <div className="flex flex-col">
+                    <p className="text-sm font-medium leading-none">Институт</p>
+                    <p className="text-sm text-muted-foreground">
+                      {student?.institute}
+                    </p>
+                  </div>
+                  <div className="flex flex-col">
+                    <p className="text-sm font-medium leading-none">
+                      Направление
+                    </p>
+                    <p className="text-sm text-muted-foreground">
+                      {student?.direction_code}
+                    </p>
+                  </div>
+                  <div className="flex flex-col">
+                    <p className="text-sm font-medium leading-none">Статус</p>
+                    <p className="text-sm text-muted-foreground">
+                      {student?.status}
+                    </p>
+                  </div>
+                  <div className="flex flex-col">
+                    <p className="text-sm font-medium leading-none">
+                      Личный номер
+                    </p>
+                    <p className="text-sm text-muted-foreground">
+                      {student?.personal_number}
+                    </p>
+                  </div>
+                </div>
+              </div>
+            </CardContent>
+          </Card>
+          <Card>
+            <CardHeader>
+              <CardTitle>Долги студента</CardTitle>
+              <CardDescription>
+                Долги студента и пересдачи по этим дисциплинам.
+              </CardDescription>
+            </CardHeader>
+            <CardContent>
+              {debts?.length ? (
+                debts?.map((debt) => (
+                  <div key={debt.id} className="flex items-center space-x-4">
+                    <div>
+                      <p className="text-sm font-medium leading-none">
+                        {debt.name}
+                      </p>
+                      <p className="text-sm text-muted-foreground">
+                        {debt.department}
+                      </p>
+                    </div>
+                  </div>
+                ))
+              ) : (
+                <p className="text-muted-foreground">
+                  Долгов нет или у вас нет прав, чтобы просматривать их.
+                </p>
+              )}
+            </CardContent>
+          </Card>
+        </div>
+        <RetakesTable retakes={retakes ?? []} />
+      </div>
+    </>
+  )
+}

app/students/columns.tsx

@@ -0,0 +1,98 @@
+"use client"
+
+import { ColumnDef } from "@tanstack/react-table"
+
+import { Database } from "@/lib/supabase/db-types"
+import { DataTableColumnHeader } from "@/components/table/DataTableColumnHeader"
+
+export const columns: ColumnDef<
+  Database["rtu_mirea"]["Tables"]["students"]["Row"]
+>[] = [
+  {
+    accessorKey: "id",
+    header: ({ column }) => (
+      <DataTableColumnHeader column={column} title="Id" />
+    ),
+    cell: ({ row }) => <div className="w-[300px]">{row.getValue("id")}</div>,
+    enableSorting: false,
+    enableHiding: false,
+  },
+  {
+    accessorKey: "academic_group",
+    header: ({ column }) => (
+      <DataTableColumnHeader column={column} title="Группа" />
+    ),
+    cell: ({ row }) => {
+      return (
+        <span className="truncate font-medium">
+          {row.getValue("academic_group")}
+        </span>
+      )
+    },
+  },
+  {
+    accessorKey: "first_name",
+    header: ({ column }) => (
+      <DataTableColumnHeader column={column} title="Имя" />
+    ),
+    cell: ({ row }) => {
+      return (
+        <span className="truncate font-medium">
+          {row.getValue("first_name")}
+        </span>
+      )
+    },
+  },
+  {
+    accessorKey: "last_name",
+    header: ({ column }) => (
+      <DataTableColumnHeader column={column} title="Фамилия" />
+    ),
+    cell: ({ row }) => {
+      return (
+        <span className="truncate font-medium">
+          {row.getValue("last_name")}
+        </span>
+      )
+    },
+  },
+  {
+    accessorKey: "second_name",
+    header: ({ column }) => (
+      <DataTableColumnHeader column={column} title="Отчество" />
+    ),
+    cell: ({ row }) => {
+      return (
+        <span className="truncate font-medium">
+          {row.getValue("second_name")}
+        </span>
+      )
+    },
+  },
+  {
+    accessorKey: "personal_number",
+    header: ({ column }) => (
+      <DataTableColumnHeader column={column} title="Студенческий" />
+    ),
+    cell: ({ row }) => {
+      return (
+        <span className="truncate font-medium">
+          {row.getValue("personal_number")}
+        </span>
+      )
+    },
+  },
+  {
+    accessorKey: "institute",
+    header: ({ column }) => (
+      <DataTableColumnHeader column={column} title="Институт" />
+    ),
+    cell: ({ row }) => {
+      return (
+        <span className="truncate font-medium">
+          {row.getValue("institute")}
+        </span>
+      )
+    },
+  },
+]

app/students/page.tsx

@@ -0,0 +1,24 @@
+import { redirect } from "next/navigation"
+
+import { getSession, getUserDepartment } from "@/lib/supabase/supabase-server"
+import { DataTable } from "@/components/table/DataTable"
+import { columns } from "@/app/students/columns"
+
+export const dynamic = "force-dynamic"
+
+export default async function Students() {
+  const session = await getSession()
+
+  if (!session?.user) redirect("/login")
+
+  return (
+    <>
+      <div className="flex items-center justify-between space-y-2">
+        <h2 className="text-3xl font-bold tracking-tight">Студенты</h2>
+      </div>
+      <div className="space-y-4">
+        <DataTable data={[]} columns={columns} onFilter={(value) => {}} />
+      </div>
+    </>
+  )
+}

app/student/SelfRetakesTable.tsx → components/RetakesTable.tsx

@@ -31,17 +31,19 @@ import {
   TooltipTrigger,
 } from "@/components/ui/tooltip"
 
-export function SelfRetakesTable({
+export function RetakesTable({
   retakes,
+  self,
 }: {
   retakes: Database["rtu_mirea"]["Tables"]["retakes"]["Row"][]
+  self?: boolean
 }) {
   return (
     <Card>
       <CardHeader>
-        <CardTitle>Твои пересдачи</CardTitle>
+        <CardTitle>{self ? "Твои пересдачи" : "Пересдачи"}</CardTitle>
         <CardDescription>
-          Список актуальный пересдач для твоих задолженностей.
+          {self ? "Список твоих пересдач." : "Список актуальных пересдач."}
         </CardDescription>
       </CardHeader>