feat: accept description and is active fields on api service creation

.gitignore

@@ -31,4 +31,6 @@ go.work.sum
 # key files
 *.pem
 
+NUL
+
 dist/

internal/admin/routes.go

@@ -67,9 +67,11 @@ func (h *AdminHandler) GetApiServices(w http.ResponseWriter, r *http.Request) {
 
 type AddServiceRequest struct {
 	Name         string   `json:"name"`
+	Description  string   `json:"description"`
 	RedirectUris []string `json:"redirect_uris"`
 	Scopes       []string `json:"scopes"`
 	GrantTypes   []string `json:"grant_types"`
+	IsActive     bool     `json:"is_active"`
 }
 
 func (h *AdminHandler) AddApiService(w http.ResponseWriter, r *http.Request) {

migrations/00005_add_description_to_api_service.sql

@@ -0,0 +1,11 @@
+-- +goose Up
+-- +goose StatementBegin
+ALTER TABLE api_services ADD description TEXT DEFAULT '';
+-- +goose StatementEnd
+
+-- +goose Down
+-- +goose StatementBegin
+ALTER TABLE api_services
+DROP COLUMN description;
+
+-- +goose StatementEnd

queries/api_services.sql

@@ -1,8 +1,8 @@
 -- name: CreateApiService :one
 INSERT INTO api_services (
-    client_id, client_secret, name, redirect_uris, scopes, grant_types
+    client_id, client_secret, name, description, redirect_uris, scopes, grant_types, is_active
 ) VALUES (
-    $1, $2, $3, $4, $5, $6
+    $1, $2, $3, $4, $5, $6, $7, $8
 ) RETURNING *;
 
 -- name: GetApiServiceCID :one

web/src/App.tsx

@@ -11,6 +11,7 @@ import DashboardLayout from "./layout/DashboardLayout";
 import PersonalInfoPage from "./pages/PersonalInfo";
 import ApiServicesPage from "./pages/ApiServices";
 import AdminLayout from "./layout/AdminLayout";
+import ApiServiceCreatePage from "./pages/ApiServices/Create";
 
 const router = createBrowserRouter([
   {
@@ -32,7 +33,15 @@ const router = createBrowserRouter([
           {
             path: "admin",
             element: <AdminLayout />,
-            children: [{ path: "api-services", element: <ApiServicesPage /> }],
+            children: [
+              {
+                path: "api-services",
+                children: [
+                  { index: true, element: <ApiServicesPage /> },
+                  { path: "create", element: <ApiServiceCreatePage /> },
+                ],
+              },
+            ],
           },
         ],
       },

web/src/components/Home/Sidebar/index.tsx

@@ -6,7 +6,7 @@ const Sidebar: FC = () => {
   const [barItems, isActive] = useBarItems();
 
   return (
-    <div className="hidden sm:flex flex-col gap-2 items-stretch border-r border-gray-700 dark:border-gray-800 min-w-80 w-80 p-5 pt-18 min-h-screen select-none">
+    <div className="hidden sm:flex flex-col gap-2 items-stretch border-r border-gray-300 dark:border-gray-700 min-w-80 w-80 p-5 pt-18 min-h-screen select-none">
       {barItems.map((item) => (
         <Link to={item.pathname} key={item.tab}>
           <div

web/src/components/ui/breadcrumbs.tsx

@@ -0,0 +1,35 @@
+import type { FC } from "react";
+import { Link } from "react-router";
+
+interface BreadItem {
+  href?: string;
+  label: string;
+}
+
+interface IBreadcrumbsProps {
+  items: BreadItem[];
+  className?: string;
+}
+
+const Breadcrumbs: FC<IBreadcrumbsProps> = ({ items, className }) => {
+  return (
+    <div
+      className={`${className ? `${className} ` : ""} flex flex-row p-3 gap-3 items-center text-gray-800 dark:text-gray-200`}
+    >
+      {items.map((item, index) => (
+        <>
+          {item.href ? (
+            <Link to={item.href}>
+              <p className="text-blue-500">{item.label}</p>
+            </Link>
+          ) : (
+            <p>{item.label}</p>
+          )}
+          {index + 1 < items.length && <p>/</p>}
+        </>
+      ))}
+    </div>
+  );
+};
+
+export default Breadcrumbs;

web/src/components/ui/input.tsx

@@ -6,7 +6,7 @@ export const Input: FC<InputProps> = ({ className, ...props }) => {
   return (
     <input
       {...props}
-      className={`w-full border border-gray-300 dark:border-gray-600 dark:placeholder-gray-600 dark:text-gray-100 rounded-md px-3 py-3 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500 ${
+      className={`w-full border border-gray-300 dark:border-gray-700 dark:placeholder-gray-600 dark:text-gray-100 rounded-md px-3 py-3 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500 ${
         className || ""
       }`}
     />

web/src/hooks/barItems.tsx

@@ -1,5 +1,5 @@
 import { useAuth } from "@/store/auth";
-import { Blocks, Home, Settings2, User } from "lucide-react";
+import { Blocks, Home, Settings2, User, Users } from "lucide-react";
 import { useCallback, type ReactNode } from "react";
 import { useLocation } from "react-router";
 
@@ -16,7 +16,8 @@ export const useBarItems = (): [BarItem[], (item: BarItem) => boolean] => {
 
   const isActive = useCallback(
     (item: BarItem) => {
-      return location.pathname === item.pathname;
+      if (item.pathname === "/") return location.pathname === item.pathname;
+      return location.pathname.startsWith(item.pathname);
     },
     [location.pathname],
   );
@@ -50,9 +51,15 @@ export const useBarItems = (): [BarItem[], (item: BarItem) => boolean] => {
             {
               icon: <Blocks />,
               title: "API Services",
-              tab: "api-services",
+              tab: "admin.api-services",
               pathname: "/admin/api-services",
             },
+            {
+              icon: <Users />,
+              title: "Users",
+              tab: "admin.users",
+              pathname: "/admin/users",
+            },
           ]
         : []),
     ],

web/src/layout/DashboardLayout.tsx

@@ -8,7 +8,7 @@ const DashboardLayout: FC = () => {
   return (
     <div className="relative z-10 flex items-center justify-center min-h-screen">
       <Card className="overflow-y-auto min-h-screen w-full min-w-full shadow-lg bg-white/85 dark:bg-black/85 backdrop-blur-md sm:rounded-none">
-        <div className="flex flex-col items-center sm:pt-0 relative">
+        <div className="flex flex-col w-full h-full flex-1 items-center sm:pt-0 relative">
           <div className="flex flex-row items-center absolute left-4 top-4">
             <img src="/icon.png" alt="icon" className="w-6 h-6" />
 
@@ -20,12 +20,12 @@ const DashboardLayout: FC = () => {
           </div>
 
           <CardContent
-            className="w-full space-y-4 flex-1 bg-black/5 dark:bg-white/5"
+            className="w-full h-full max-h-full space-y-4 flex-1 bg-black/5 dark:bg-white/5"
             spacing={false}
           >
             <div className="flex flex-row">
               <Sidebar />
-              <div className="max-w-full flex-1">
+              <div className="max-w-full flex-1 sm:max-h-screen overflow-y-auto">
                 <div className="flex flex-col w-full items-center gap-2">
                   <TopBar />
                 </div>

web/src/pages/ApiServices/Create/index.tsx

@@ -0,0 +1,172 @@
+import Breadcrumbs from "@/components/ui/breadcrumbs";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import type { FC } from "react";
+import { useForm } from "react-hook-form";
+import { Link } from "react-router";
+
+interface FormData {
+  name: string;
+  description: string;
+  redirectUris: string;
+  scopes: string;
+  grantTypes: string;
+  enabled: boolean;
+}
+
+const ApiServiceCreatePage: FC = () => {
+  const {
+    register,
+    handleSubmit,
+    formState: { errors },
+  } = useForm<FormData>({
+    defaultValues: {
+      enabled: true,
+      scopes: "openid",
+    },
+  });
+
+  const onSubmit = (data: FormData) => {
+    console.log("Form submitted:", data);
+    // handle create logic here (e.g. API call)
+  };
+
+  return (
+    <div className="p-4">
+      <Breadcrumbs
+        items={[
+          { href: "/admin", label: "Admin" },
+          { href: "/admin/api-services", label: "API Services" },
+          { label: "Create new API Service" },
+        ]}
+      />
+      <form onSubmit={handleSubmit(onSubmit)}>
+        {/* Service Information */}
+        <div className="border dark:border-gray-800 border-gray-300 rounded mt-4 flex flex-col">
+          <div className="p-4 border-b dark:border-gray-800 border-gray-300">
+            <h2 className="text-gray-800 dark:text-gray-200">
+              Service Information
+            </h2>
+          </div>
+          <div className="p-4">
+            <div className="flex flex-col gap-2 mb-4">
+              <p className="text-gray-600 dark:text-gray-400 text-sm">Name</p>
+              <Input
+                placeholder="Display Name"
+                {...register("name", { required: "Name is required" })}
+              />
+              {errors.name && (
+                <span className="text-red-500 text-sm">
+                  {errors.name.message}
+                </span>
+              )}
+            </div>
+
+            <div className="flex flex-col gap-2 mb-4">
+              <p className="text-gray-600 dark:text-gray-400 text-sm">
+                Description
+              </p>
+              <textarea
+                {...register("description", {
+                  required: "Description is required",
+                })}
+                className="dark:text-gray-100 border border-gray-600 dark:border-gray-700 rounded placeholder:text-gray-600 text-sm p-2 focus:outline-none focus:ring-2 focus:ring-blue-500"
+                placeholder="Some description goes here..."
+              ></textarea>
+              {errors.description && (
+                <span className="text-red-500 text-sm">
+                  {errors.description.message}
+                </span>
+              )}
+            </div>
+          </div>
+        </div>
+
+        {/* OpenID Connect */}
+        <div className="border dark:border-gray-800 border-gray-300 rounded mt-4 flex flex-col">
+          <div className="p-4 border-b dark:border-gray-800 border-gray-300">
+            <h2 className="text-gray-800 dark:text-gray-200">OpenID Connect</h2>
+          </div>
+          <div className="p-4">
+            <div className="flex flex-col gap-2 mb-4">
+              <p className="text-gray-600 dark:text-gray-400 text-sm">
+                Redirect URIs
+              </p>
+              <textarea
+                {...register("redirectUris", {
+                  required: "At least one URI is required",
+                })}
+                className="dark:text-gray-100 border border-gray-600 dark:border-gray-700 rounded placeholder:text-gray-600 text-sm p-2 focus:outline-none focus:ring-2 focus:ring-blue-500"
+                placeholder="Enter multiple URIs separated with new line"
+              ></textarea>
+              {errors.redirectUris && (
+                <span className="text-red-500 text-sm">
+                  {errors.redirectUris.message}
+                </span>
+              )}
+            </div>
+
+            <div className="flex flex-col gap-2 mb-4">
+              <p className="text-gray-600 dark:text-gray-400 text-sm">Scopes</p>
+              <Input
+                placeholder="Scopes separated with space"
+                {...register("scopes", { required: "Scopes are required" })}
+              />
+              {errors.scopes && (
+                <span className="text-red-500 text-sm">
+                  {errors.scopes.message}
+                </span>
+              )}
+            </div>
+
+            <div className="flex flex-col gap-2 mb-4">
+              <p className="text-gray-600 dark:text-gray-400 text-sm">
+                Grant Types
+              </p>
+              <Input
+                placeholder="Leave empty for 'authorization_code'"
+                {...register("grantTypes")}
+              />
+            </div>
+          </div>
+        </div>
+
+        {/* Final Section */}
+        <div className="border dark:border-gray-800 border-gray-300 rounded mt-4 flex flex-col">
+          <div className="p-4 border-b dark:border-gray-800 border-gray-300">
+            <h2 className="text-gray-800 dark:text-gray-200">
+              Final Customization & Submit
+            </h2>
+          </div>
+          <div className="p-4">
+            <label className="inline-flex items-center cursor-pointer">
+              <input
+                type="checkbox"
+                className="sr-only peer"
+                {...register("enabled")}
+              />
+              <div className="relative w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-blue-300 dark:peer-focus:ring-blue-800 rounded-full peer dark:bg-gray-700 peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:start-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all dark:border-gray-600 peer-checked:bg-blue-600 dark:peer-checked:bg-blue-600"></div>
+              <span className="ms-3 text-sm font-medium text-gray-900 dark:text-gray-300">
+                Enabled by default
+              </span>
+            </label>
+
+            <div className="flex flex-row items-center justify-between gap-2 mt-4">
+              <Button type="submit">Create</Button>
+              <Link to="/admin/api-services">
+                <Button
+                  variant="text"
+                  className="text-red-400 hover:text-red-500"
+                >
+                  Cancel
+                </Button>
+              </Link>
+            </div>
+          </div>
+        </div>
+      </form>
+    </div>
+  );
+};
+
+export default ApiServiceCreatePage;

web/src/pages/ApiServices/index.tsx

@@ -1,42 +1,10 @@
+import Breadcrumbs from "@/components/ui/breadcrumbs";
+import { Button } from "@/components/ui/button";
 import { useAdmin } from "@/store/admin";
+import { Plus } from "lucide-react";
 import { useEffect, type FC } from "react";
 import { Link } from "react-router";
 
-// const services = [
-//   {
-//     id: "1",
-//     name: "User Service",
-//     clientId: "user-svc-001",
-//     isActive: true,
-//     createdAt: "2024-09-15T10:20:30Z",
-//     updatedAt: "2025-01-10T12:00:00Z",
-//   },
-//   {
-//     id: "2",
-//     name: "Billing Service",
-//     clientId: "billing-svc-009",
-//     isActive: false,
-//     createdAt: "2024-10-01T08:45:10Z",
-//     updatedAt: "2025-03-22T14:30:00Z",
-//   },
-//   {
-//     id: "3",
-//     name: "Analytics Service",
-//     clientId: "analytics-svc-777",
-//     isActive: true,
-//     createdAt: "2024-11-25T16:00:00Z",
-//     updatedAt: "2025-02-05T10:15:45Z",
-//   },
-//   {
-//     id: "4",
-//     name: "Email Service",
-//     clientId: "email-svc-333",
-//     isActive: false,
-//     createdAt: "2023-07-10T13:00:00Z",
-//     updatedAt: "2024-12-31T09:25:00Z",
-//   },
-// ];
-
 const ApiServicesPage: FC = () => {
   const apiServices = useAdmin((state) => state.apiServices);
   const loading = useAdmin((state) => state.loadingApiServices);
@@ -47,88 +15,107 @@ const ApiServicesPage: FC = () => {
   }, [fetchApiServices]);
 
   return (
-    <div className="relative overflow-x-auto flex flex-col w-full h-full">
-      <div className="p-4">
+    <div className="relative flex flex-col items-stretch w-full h-full">
+      <Breadcrumbs
+        className="p-7 pb-2"
+        items={[
+          {
+            href: "/admin",
+            label: "Admin",
+          },
+          {
+            label: "API Services",
+          },
+        ]}
+      />
+      <div className="p-4 flex flex-row items-center justify-between">
         <p className="text-gray-800 dark:text-gray-300">Search...</p>
+        <Link to="/admin/api-services/create">
+          <Button className="flex flex-row items-center gap-2">
+            <Plus /> Add API Service
+          </Button>
+        </Link>
       </div>
 
-      {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>
-      )}
+      <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>
+          )}
 
-      <table className="min-w-full flex-1 border-l-0 border border-gray-700 dark:border-gray-800 border-collapse divide-y divide-gray-200 dark:divide-gray-800">
-        <thead className="bg-black/5 dark:bg-white/5">
-          <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-700 dark:border-gray-800">
-              Name
-            </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-700 dark:border-gray-800">
-              Client ID
-            </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-700 dark:border-gray-800">
-              Is 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-700 dark:border-gray-800">
-              Created 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-700 dark:border-gray-800">
-              Updated At
-            </th>
-          </tr>
-        </thead>
-        <tbody className="divide-y divide-gray-200 dark:divide-gray-700">
-          {!loading && apiServices.length === 0 ? (
+          <thead className="bg-black/5 dark:bg-white/5">
             <tr>
-              <td
-                colSpan={5}
-                className="px-6 py-12 text-center text-gray-500 dark:text-gray-400"
-              >
-                No services found.
-              </td>
+              <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">
+                Name
+              </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">
+                Client ID
+              </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">
+                Is 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">
+                Created 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">
+                Updated At
+              </th>
             </tr>
-          ) : (
-            apiServices.map((service) => (
-              <tr
-                key={service.id}
-                className="hover:bg-gray-50 dark:hover:bg-gray-800"
-              >
-                <td className="px-6 py-4 text-sm font-medium text-blue-600 border border-gray-700">
-                  <Link
-                    to={`/services/${service.id}`}
-                    className="hover:underline hover:text-gray-600 dark:hover:text-gray-300 transition-colors"
-                  >
-                    {service.name}
-                  </Link>
-                </td>
-                <td className="px-6 py-4 text-sm text-gray-700 dark:text-gray-300 border border-gray-700">
-                  {service.client_id}
-                </td>
-                <td className="px-6 py-4 text-sm border border-gray-700">
-                  <span
-                    className={`inline-block px-2 py-1 text-xs rounded-full font-semibold ${
-                      service.is_active
-                        ? "bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-300"
-                        : "bg-red-100 text-red-800 dark:bg-red-900 dark:text-red-300"
-                    }`}
-                  >
-                    {service.is_active ? "Yes" : "No"}
-                  </span>
-                </td>
-                <td className="px-6 py-4 text-sm text-gray-500 dark:text-gray-400 border border-gray-700">
-                  {new Date(service.created_at).toLocaleString()}
-                </td>
-                <td className="px-6 py-4 text-sm text-gray-500 dark:text-gray-400 border border-gray-700">
-                  {new Date(service.updated_at).toLocaleString()}
+          </thead>
+          <tbody className="divide-y divide-gray-200 dark:divide-gray-700">
+            {!loading && apiServices.length === 0 ? (
+              <tr>
+                <td
+                  colSpan={5}
+                  className="px-6 py-12 text-center text-gray-500 dark:text-gray-400"
+                >
+                  No services found.
                 </td>
               </tr>
-            ))
-          )}
-        </tbody>
-      </table>
+            ) : (
+              apiServices.map((service) => (
+                <tr
+                  key={service.id}
+                  className="hover:bg-gray-50 dark:hover:bg-gray-800"
+                >
+                  <td className="px-6 py-4 text-sm font-medium text-blue-600 border border-gray-700">
+                    <Link
+                      to={`/services/${service.id}`}
+                      className="hover:underline hover:text-gray-600 dark:hover:text-gray-300 transition-colors"
+                    >
+                      {service.name}
+                    </Link>
+                  </td>
+                  <td className="px-6 py-4 text-sm text-gray-700 dark:text-gray-300 border border-gray-700">
+                    {service.client_id}
+                  </td>
+                  <td className="px-6 py-4 text-sm border border-gray-700">
+                    <span
+                      className={`inline-block px-2 py-1 text-xs rounded-full font-semibold ${
+                        service.is_active
+                          ? "bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-300"
+                          : "bg-red-100 text-red-800 dark:bg-red-900 dark:text-red-300"
+                      }`}
+                    >
+                      {service.is_active ? "Yes" : "No"}
+                    </span>
+                  </td>
+                  <td className="px-6 py-4 text-sm text-gray-500 dark:text-gray-400 border border-gray-700">
+                    {new Date(service.created_at).toLocaleString()}
+                  </td>
+                  <td className="px-6 py-4 text-sm text-gray-500 dark:text-gray-400 border border-gray-700">
+                    {new Date(service.updated_at).toLocaleString()}
+                  </td>
+                </tr>
+              ))
+            )}
+          </tbody>
+        </table>
+      </div>
     </div>
   );
 };