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; }) => (

{title}

{children}
); 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 (

Loading API Service...

); } return (
{/* 📋 Main Details */}
Name: {" "} {apiService.name}
Description: {" "} {apiService.description}
Redirect URIs:
    {apiService.redirect_uris.map((uri) => (
  • {uri}
  • ))}
Scopes:
{apiService.scopes.map((scope) => ( {scope} ))}
Grant Types:
{apiService.grant_types.map((grant) => ( {grant} ))}
Created At: {" "} {new Date(apiService.created_at).toLocaleString()}
Updated At: {" "} {new Date(apiService.updated_at).toLocaleString()}
Status: {" "} {apiService.is_active ? "Active" : "Inactive"}
{/* 🔐 Credentials */}

Client ID:

Client Secret:

{/* 🚀 Actions */}
); }; export default ViewApiServicePage;