feat: service sessions feature

web/src/App.tsx

@@ -25,7 +25,8 @@ import VerifyEmailPage from "./pages/Verify/Email";
 import VerifyEmailOtpPage from "./pages/Verify/Email/OTP";
 import VerifyAvatarPage from "./pages/Verify/Avatar";
 import VerifyReviewPage from "./pages/Verify/Review";
-import AdminSessionsPage from "./pages/Admin/UserSessions";
+import AdminUserSessionsPage from "./pages/Admin/UserSessions";
+import AdminServiceSessionsPage from "./pages/Admin/ServiceSessions";
 
 const router = createBrowserRouter([
   {
@@ -84,7 +85,13 @@ const router = createBrowserRouter([
               },
               {
                 path: "user-sessions",
-                children: [{ index: true, element: <AdminSessionsPage /> }],
+                children: [{ index: true, element: <AdminUserSessionsPage /> }],
+              },
+              {
+                path: "service-sessions",
+                children: [
+                  { index: true, element: <AdminServiceSessionsPage /> },
+                ],
               },
             ],
           },

web/src/api/admin/sessions.ts

@@ -40,11 +40,15 @@ export const adminRevokeUserSessionApi = async (
 };
 
 export interface FetchServiceSessionsRequest {
-  limit: number;
-  offset: number;
+  page: number;
+  size: number;
 }
 
-export type FetchServiceSessionsResponse = ServiceSession[];
+export interface FetchServiceSessionsResponse {
+  items: ServiceSession[];
+  page: number;
+  total_pages: number;
+}
 
 export const adminGetServiceSessionsApi = async (
   req: FetchServiceSessionsRequest,
@@ -61,3 +65,14 @@ export const adminGetServiceSessionsApi = async (
 
   return response.data;
 };
+
+export const adminRevokeServiceSessionApi = async (
+  sessionId: string,
+): Promise<void> => {
+  const response = await axios.patch<FetchServiceSessionsResponse>(
+    `/api/v1/admin/service-sessions/revoke/${sessionId}`,
+  );
+
+  if (response.status !== 200 && response.status !== 201)
+    throw await handleApiError(response);
+};

web/src/hooks/barItems.tsx

@@ -1,5 +1,5 @@
 import { useAuth } from "@/store/auth";
-import { Blocks, Home, User, UserLock, Users } from "lucide-react";
+import { Blocks, EarthLock, Home, User, UserLock, Users } from "lucide-react";
 import { useCallback, type ReactNode } from "react";
 import { useLocation } from "react-router";
 
@@ -87,6 +87,12 @@ export const useBarItems = (): [Item[], (item: Item) => boolean] => {
               tab: "admin.user-sessions",
               pathname: "/admin/user-sessions",
             },
+            {
+              icon: <EarthLock />,
+              title: "Service Sessions",
+              tab: "admin.service-sessions",
+              pathname: "/admin/service-sessions",
+            },
           ]
         : []),
     ],

web/src/pages/Admin/ServiceSessions/index.tsx

@@ -0,0 +1,196 @@
+import Breadcrumbs from "@/components/ui/breadcrumbs";
+import { Button } from "@/components/ui/button";
+import Avatar from "@/feature/Avatar";
+import { Ban } from "lucide-react";
+import { useCallback, useEffect, type FC } from "react";
+import { Link } from "react-router";
+import moment from "moment";
+import Pagination from "@/components/ui/pagination";
+import { useAuth } from "@/store/auth";
+import { useServiceSessions } from "@/store/admin/serviceSessions";
+
+const AdminServiceSessionsPage: FC = () => {
+  const loading = useServiceSessions((s) => s.loading);
+  const sessions = useServiceSessions((s) => s.items);
+
+  const page = useServiceSessions((s) => s.page);
+  const totalPages = useServiceSessions((s) => s.totalPages);
+
+  const fetchSessions = useServiceSessions((s) => s.fetch);
+  const revokeSession = useServiceSessions((s) => s.revoke);
+
+  const revokingId = useServiceSessions((s) => s.revokingId);
+
+  const profile = useAuth((s) => s.profile);
+
+  const handleRevokeSession = useCallback(
+    (id: string) => {
+      revokeSession(id);
+    },
+    [revokeSession],
+  );
+
+  useEffect(() => {
+    fetchSessions(1);
+  }, [fetchSessions]);
+
+  return (
+    <div className="relative flex flex-col items-stretch w-full">
+      <div className="p-4">
+        <Breadcrumbs
+          className="pb-2"
+          items={[
+            {
+              href: "/admin",
+              label: "Admin",
+            },
+            {
+              label: "Service Sessions",
+            },
+          ]}
+        />
+      </div>
+      <div className="p-4 flex flex-row items-center justify-between">
+        <p className="text-gray-800 dark:text-gray-300">Search...</p>
+        {/* TODO: Filters */}
+      </div>
+
+      <div className="flex-1 overflow-x-auto">
+        <table className="relative min-w-full border-l-0 border border-gray-300 dark:border-gray-700 border-collapse divide-y divide-gray-200 dark:divide-gray-800">
+          {loading && (
+            <div className="absolute inset-0 z-10 flex items-center justify-center bg-white/60 dark:bg-gray-900/60 backdrop-blur-sm">
+              <div className="text-gray-800 dark:text-gray-200 font-medium">
+                Loading...
+              </div>
+            </div>
+          )}
+
+          <thead className="bg-black/5 dark:bg-white/5 text-nowrap">
+            <tr>
+              <th className="px-6 py-3 text-left text-sm font-semibold text-gray-700 dark:text-white/70 border border-l-0 border-gray-300 dark:border-gray-700">
+                Service
+              </th>
+              <th className="px-6 py-3 text-left text-sm font-semibold text-gray-700 dark:text-white/70 border border-l-0 border-gray-300 dark:border-gray-700">
+                Source
+              </th>
+              <th className="px-6 py-3 text-left text-sm font-semibold text-gray-700 dark:text-white/70 border border-l-0 border-gray-300 dark:border-gray-700">
+                Status
+              </th>
+              <th className="px-6 py-3 text-left text-sm font-semibold text-gray-700 dark:text-white/70 border border-l-0 border-gray-300 dark:border-gray-700">
+                Issued At
+              </th>
+              <th className="px-6 py-3 text-left text-sm font-semibold text-gray-700 dark:text-white/70 border border-l-0 border-gray-300 dark:border-gray-700">
+                Expires At
+              </th>
+              <th className="px-6 py-3 text-left text-sm font-semibold text-gray-700 dark:text-white/70 border border-l-0 border-gray-300 dark:border-gray-700">
+                Last Active
+              </th>
+              <th className="px-6 py-3 text-left text-sm font-semibold text-gray-700 dark:text-white/70 border border-l-0 border-gray-300 dark:border-gray-700">
+                Revoked At
+              </th>
+              <th className="px-6 py-3 text-left text-sm font-semibold text-gray-700 dark:text-white/70 border border-l-0 border-gray-300 dark:border-gray-700">
+                Actions
+              </th>
+            </tr>
+          </thead>
+          <tbody className="divide-y divide-gray-200 dark:divide-gray-700">
+            {!loading && sessions.length === 0 ? (
+              <tr>
+                <td
+                  colSpan={5}
+                  className="px-6 py-12 text-center text-gray-500 dark:text-gray-400"
+                >
+                  No sessions found.
+                </td>
+              </tr>
+            ) : (
+              sessions.map((session) => (
+                <tr
+                  key={session.id}
+                  className="hover:bg-gray-50 dark:hover:bg-gray-800"
+                >
+                  <td className="px-6 py-4 text-sm text-gray-700 dark:text-gray-300 border border-gray-300 dark:border-gray-700">
+                    <div className="flex flex-row items-center gap-2 justify-start">
+                      {typeof session.user?.profile_picture === "string" && (
+                        <Avatar
+                          avatarId={session.user.profile_picture}
+                          className="w-7 h-7 min-w-7"
+                        />
+                      )}
+
+                      <Link to={`/admin/users/view/${session.user_id}`}>
+                        <p className="cursor-pointer text-blue-500 text-nowrap">
+                          {session.user?.full_name ?? ""}{" "}
+                          {session.user_id === profile?.id ? "(You)" : ""}
+                        </p>
+                      </Link>
+                    </div>
+                  </td>
+                  <td className="px-6 py-4 text-sm text-gray-700 dark:text-gray-300 border border-gray-300 dark:border-gray-700">
+                    {/* <SessionSource deviceInfo={session.} /> */}
+                    <p>{session.client_id}</p>
+                  </td>
+                  <td className="px-6 py-4 text-sm border border-gray-300 dark:border-gray-700">
+                    <span
+                      className={`inline-block px-2 py-1 text-xs rounded-full font-semibold ${
+                        !session.is_active ||
+                        (session.expires_at &&
+                          moment(session.expires_at).isSameOrBefore(
+                            moment(new Date()),
+                          ))
+                          ? "bg-red-100 text-red-800 dark:bg-red-900 dark:text-red-300"
+                          : "bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-300"
+                      }`}
+                    >
+                      {session.is_active ? "Active" : "Inactive"}
+                      {moment(session.expires_at).isSameOrBefore(
+                        moment(new Date()),
+                      ) && " (Expired)"}
+                    </span>
+                  </td>
+                  <td className="px-6 py-4 text-sm text-gray-500 dark:text-gray-400 border border-gray-300 dark:border-gray-700">
+                    {moment(session.issued_at).format("LLLL")}
+                  </td>
+                  <td className="px-6 py-4 text-sm text-gray-500 dark:text-gray-400 border border-gray-300 dark:border-gray-700">
+                    {session.expires_at
+                      ? moment(session.expires_at).format("LLLL")
+                      : "never"}
+                  </td>
+                  <td className="px-6 py-4 text-sm text-gray-500 dark:text-gray-400 border border-gray-300 dark:border-gray-700">
+                    {session.last_active
+                      ? moment(session.last_active).format("LLLL")
+                      : "never"}
+                  </td>
+                  <td className="px-6 py-4 text-sm text-gray-500 dark:text-gray-400 border border-gray-300 dark:border-gray-700">
+                    {session.revoked_at
+                      ? new Date(session.revoked_at).toLocaleString()
+                      : "never"}
+                  </td>
+                  <td>
+                    <div className="flex flex-row items-center justify-center gap-2">
+                      <Button
+                        variant="contained"
+                        className="bg-red-500 hover:bg-red-600 !px-1.5 !py-1.5"
+                        onClick={() => handleRevokeSession(session.id)}
+                        disabled={revokingId === session.id}
+                      >
+                        <Ban size={18} />
+                      </Button>
+                    </div>
+                  </td>
+                </tr>
+              ))
+            )}
+          </tbody>
+        </table>
+      </div>
+      <Pagination
+        currentPage={page}
+        onPageChange={(newPage) => fetchSessions(newPage)}
+        totalPages={totalPages}
+      />
+    </div>
+  );
+};
+
+export default AdminServiceSessionsPage;

web/src/pages/Admin/UserSessions/index.tsx

@@ -23,7 +23,7 @@ const SessionSource: FC<{ deviceInfo: string }> = ({ deviceInfo }) => {
   );
 };
 
-const AdminSessionsPage: FC = () => {
+const AdminUserSessionsPage: FC = () => {
   const loading = useUserSessions((s) => s.loading);
   const sessions = useUserSessions((s) => s.items);
 
@@ -206,4 +206,4 @@ const AdminSessionsPage: FC = () => {
   );
 };
 
-export default AdminSessionsPage;
+export default AdminUserSessionsPage;

web/src/store/admin/serviceSessions.ts

@@ -0,0 +1,59 @@
+import {
+  adminGetServiceSessionsApi,
+  adminRevokeServiceSessionApi,
+} from "@/api/admin/sessions";
+import type { ServiceSession } from "@/types";
+import { create } from "zustand";
+
+export const ADMIN_SERVICE_SESSIONS_PAGE_SIZE = 10;
+
+export interface IServiceSessionsState {
+  items: ServiceSession[];
+  totalPages: number;
+  page: number;
+
+  loading: boolean;
+
+  revokingId: string | null;
+
+  fetch: (page: number) => Promise<void>;
+  revoke: (id: string) => Promise<void>;
+}
+
+export const useServiceSessions = create<IServiceSessionsState>((set, get) => ({
+  items: [],
+  totalPages: 0,
+  page: 1,
+  loading: false,
+  revokingId: null,
+
+  fetch: async (page) => {
+    set({ loading: true, page });
+
+    try {
+      const response = await adminGetServiceSessionsApi({
+        page,
+        size: ADMIN_SERVICE_SESSIONS_PAGE_SIZE,
+      });
+      set({ items: response.items, totalPages: response.total_pages });
+    } catch (err) {
+      console.log("ERR: Failed to fetch admin service sessions:", err);
+    } finally {
+      set({ loading: false });
+    }
+  },
+
+  revoke: async (id) => {
+    set({ revokingId: id });
+
+    try {
+      await adminRevokeServiceSessionApi(id);
+    } catch (err) {
+      console.log("ERR: Failed to revoke service sessions:", err);
+    } finally {
+      set({ revokingId: null });
+      const { fetch, page } = get();
+      await fetch(page);
+    }
+  },
+}));