feat: responsiveness

web/src/App.tsx

@@ -13,6 +13,8 @@ import ApiServicesPage from "./pages/ApiServices";
 import AdminLayout from "./layout/AdminLayout";
 import ApiServiceCreatePage from "./pages/ApiServices/Create";
 import ViewApiServicePage from "./pages/ApiServices/View";
+import NotAllowedPage from "./pages/NotAllowed";
+import NotFoundPage from "./pages/NotFound";
 
 const router = createBrowserRouter([
   {
@@ -62,6 +64,14 @@ const router = createBrowserRouter([
       { path: "authenticate", element: <AuthenticatePage /> },
     ],
   },
+  {
+    path: "/not-allowed",
+    element: <NotAllowedPage />,
+  },
+  {
+    path: "*",
+    element: <NotFoundPage />,
+  },
 ]);
 
 const App: FC = () => {

web/src/components/ui/breadcrumbs.tsx

@@ -25,7 +25,7 @@ const Breadcrumbs: FC<IBreadcrumbsProps> = ({ items, className }) => {
           ) : (
             <p>{item.label}</p>
           )}
-          {index + 1 < items.length && <p>/</p>}
+          {index + 1 < items.length && <p className="text-gray-500">/</p>}
         </>
       ))}
     </div>

web/src/layout/AdminLayout.tsx

@@ -33,7 +33,7 @@ const AdminLayout: FC = () => {
   }
 
   if (!profile?.isAdmin) {
-    return <Navigate to="/" />;
+    return <Navigate to="/not-allowed" />;
   }
 
   return <Outlet />;

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

@@ -90,7 +90,7 @@ const ApiServiceCreatePage: FC = () => {
                 {...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"
+                className="dark:text-gray-100 border border-gray-300 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 && (
@@ -116,7 +116,7 @@ const ApiServiceCreatePage: FC = () => {
                 {...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"
+                className="dark:text-gray-100 border border-gray-300 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 && (

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

@@ -56,7 +56,7 @@ const ViewApiServicePage: FC = () => {
         ]}
       />
 
-      <div className="p-4">
+      <div className="sm:p-4 pt-4">
         {/* 📋 Main Details */}
         <InfoCard title="API Service Details">
           <div className="flex flex-col gap-4 text-sm text-gray-700 dark:text-gray-300">

web/src/pages/ApiServices/index.tsx

@@ -84,7 +84,7 @@ const ApiServicesPage: FC = () => {
                   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">
+                  <td className="px-6 py-4 text-sm font-medium text-blue-600 border border-gray-300 dark:border-gray-700">
                     <Link
                       to={`/admin/api-services/view/${service.id}`}
                       className="hover:underline hover:text-gray-600 dark:hover:text-gray-300 transition-colors"
@@ -92,10 +92,10 @@ const ApiServicesPage: FC = () => {
                       {service.name}
                     </Link>
                   </td>
-                  <td className="px-6 py-4 text-sm text-gray-700 dark:text-gray-300 border border-gray-700">
+                  <td className="px-6 py-4 text-sm text-gray-700 dark:text-gray-300 border border-gray-300 dark:border-gray-700">
                     {service.client_id}
                   </td>
-                  <td className="px-6 py-4 text-sm border border-gray-700">
+                  <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 ${
                         service.is_active
@@ -106,10 +106,10 @@ const ApiServicesPage: FC = () => {
                       {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">
+                  <td className="px-6 py-4 text-sm text-gray-500 dark:text-gray-400 border border-gray-300 dark: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">
+                  <td className="px-6 py-4 text-sm text-gray-500 dark:text-gray-400 border border-gray-300 dark:border-gray-700">
                     {new Date(service.updated_at).toLocaleString()}
                   </td>
                 </tr>

web/src/pages/NotAllowed/index.tsx

@@ -0,0 +1,7 @@
+import type { FC } from "react";
+
+const NotAllowedPage: FC = () => {
+  return <div>this resource is not allowed</div>;
+};
+
+export default NotAllowedPage;

web/src/pages/NotFound/index.tsx

@@ -0,0 +1,7 @@
+import type { FC } from "react";
+
+const NotFoundPage: FC = () => {
+  return <div>404 - Not Found</div>;
+};
+
+export default NotFoundPage;