admin/hspguard
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: move api services related pages to own folder

Browse Source
This commit is contained in:
Amir Adal
2025-06-04 19:11:51 +02:00
parent a3b04b6243
commit 320715f5aa
4 changed files with 0 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

205
web/src/pages/Admin/ApiServices/View/index.tsx Normal file
View File

@ -0,0 +1,205 @@
import Breadcrumbs from "@/components/ui/breadcrumbs";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { useApiServices } from "@/store/admin/apiServices";
import { useEffect, type FC } from "react";
import { Link, useParams } from "react-router";
const InfoCard = ({
title,
children,
}: {
title: string;
children: React.ReactNode;
}) => (
<div className="border dark:border-gray-800 border-gray-300 rounded mb-4">
<div className="p-4 border-b dark:border-gray-800 border-gray-300">
<h2 className="text-gray-800 dark:text-gray-200 font-semibold text-lg">
{title}
</h2>
</div>
<div className="p-4">{children}</div>
</div>
);
const ViewApiServicePage: FC = () => {
const { serviceId } = useParams();
const apiService = useApiServices((state) => state.view);
// const loading = useApiServices((state) => state.fetchingApiService);
const loadService = useApiServices((state) => state.fetchSingle);
const toggling = useApiServices((state) => state.toggling);
const toggle = useApiServices((state) => state.toggle);
useEffect(() => {
if (typeof serviceId === "string") loadService(serviceId);
}, [loadService, serviceId]);
if (!apiService) {
return (
<div className="p-4 flex items-center justify-center h-[60vh]">
<div className="text-center">
<div className="animate-spin rounded-full h-8 w-8 border-2 border-blue-500 border-t-transparent mx-auto mb-3" />
<p className="text-gray-600 dark:text-gray-400">
Loading API Service...
</p>
</div>
</div>
);
}
return (
<div className="dark:text-gray-200 text-gray-800 p-4">
<Breadcrumbs
items={[
{ href: "/admin", label: "Admin" },
{ href: "/admin/api-services", label: "API Services" },
{ label: "View API Service" },
]}
/>
<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">
<div>
<span className="font-medium text-gray-900 dark:text-white">
Name:
</span>{" "}
{apiService.name}
</div>
<div>
<span className="font-medium text-gray-900 dark:text-white">
Description:
</span>{" "}
{apiService.description}
</div>
<div>
<span className="font-medium text-gray-900 dark:text-white">
Redirect URIs:
</span>
<ul className="list-disc list-inside ml-4 mt-1">
{apiService.redirect_uris.map((uri) => (
<li key={uri}>{uri}</li>
))}
</ul>
</div>
<div>
<span className="font-medium text-gray-900 dark:text-white">
Scopes:
</span>
<div className="flex flex-wrap gap-2 mt-1">
{apiService.scopes.map((scope) => (
<span
key={scope}
className="bg-blue-100 dark:bg-blue-800/30 text-blue-700 dark:text-blue-300 text-xs font-medium px-2 py-1 rounded"
>
{scope}
</span>
))}
</div>
</div>
<div>
<span className="font-medium text-gray-900 dark:text-white">
Grant Types:
</span>
<div className="flex flex-wrap gap-2 mt-1">
{apiService.grant_types.map((grant) => (
<span
key={grant}
className="bg-green-100 dark:bg-green-800/30 text-green-700 dark:text-green-300 text-xs font-medium px-2 py-1 rounded"
>
{grant}
</span>
))}
</div>
</div>
<div>
<span className="font-medium text-gray-900 dark:text-white">
Created At:
</span>{" "}
{new Date(apiService.created_at).toLocaleString()}
</div>
<div>
<span className="font-medium text-gray-900 dark:text-white">
Updated At:
</span>{" "}
{new Date(apiService.updated_at).toLocaleString()}
</div>
<div>
<span className="font-medium text-gray-900 dark:text-white">
Status:
</span>{" "}
<span
className={`font-semibold px-2 py-1 rounded ${
apiService.is_active
? "bg-green-200 text-green-800 dark:bg-green-700/20 dark:text-green-300"
: "bg-red-200 text-red-800 dark:bg-red-700/20 dark:text-red-300"
}`}
>
{apiService.is_active ? "Active" : "Inactive"}
</span>
</div>
</div>
</InfoCard>
{/* 🔐 Credentials */}
<InfoCard title="Client Credentials">
<div className="flex flex-col gap-4">
<div>
<p className="text-sm text-gray-600 dark:text-gray-400 mb-1">
<span className="font-medium text-gray-900 dark:text-white">
Client ID:
</span>
</p>
<Input value={apiService.client_id} disabled />
</div>
<div>
<p className="text-sm text-gray-600 dark:text-gray-400 mb-1">
<span className="font-medium text-gray-900 dark:text-white">
Client Secret:
</span>
</p>
<Input value="***************" disabled />
</div>
<Button variant="outlined" onClick={() => {}}>
Regenerate Credentials
</Button>
</div>
</InfoCard>
{/* 🚀 Actions */}
<div className="flex flex-wrap gap-4 mt-6 justify-between items-center">
<Link to="/admin/api-services">
<Button variant="outlined">Back</Button>
</Link>
<div className="flex flex-row items-center gap-4">
<Button
variant="text"
className={
apiService.is_active
? "text-red-400 hover:text-red-500"
: "text-green-400 hover:text-green-500"
}
onClick={toggle}
loading={toggling}
>
{apiService.is_active ? "Disable" : "Enable"}
</Button>
<Link
to={`/admin/api-services/edit/${serviceId}`}
className="hover:underline hover:text-gray-600 dark:hover:text-gray-300 transition-colors"
>
<Button variant="contained">Edit</Button>
</Link>
</div>
</div>
</div>
</div>
);
};
export default ViewApiServicePage;