Re-Quest/frontend
5
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: Implement agent availability status with a toggle for agents and display on user profiles.

Browse Source
This commit is contained in:
pradeepkumar
2026-02-02 00:34:31 +05:30
parent b88e47f911
commit edfbf4a51c
4 changed files with 102 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files

81
src/components/profile/StatusButtons.tsx
View File

@@ -5,15 +5,23 @@ import { useRouter, usePathname } from 'next/navigation';
interface StatusButtonsProps {
isAvailable?: boolean;
onToggleAvailability?: () => void;
showToggle?: boolean; // If true, show as toggle (for agent's own dashboard)
}
export function StatusButtons({ isAvailable = true }: StatusButtonsProps) {
export function StatusButtons({
isAvailable = true,
onToggleAvailability,
showToggle = false
}: StatusButtonsProps) {
const { data: session } = useSession();
const router = useRouter();
const pathname = usePathname();
// Handle connect click - require login if not authenticated
const handleConnectClick = () => {
if (!isAvailable) return; // Don't do anything if unavailable
if (!session) {
// Store the current page to redirect back after login
const returnUrl = encodeURIComponent(pathname);
@@ -23,28 +31,73 @@ export function StatusButtons({ isAvailable = true }: StatusButtonsProps) {
// TODO: Handle connect action when logged in
};
return (
<div className="w-full max-w-[354px] lg:max-w-none space-y-2">
<div className="flex items-center border border-[#00293d]/10 rounded-[15px] h-[50px] px-4">
<div className="flex items-center gap-2 flex-1">
<span className="w-3 h-3 bg-green-500 rounded-full" />
<span className="text-sm font-bold text-[#00293d] font-fractul">Available.</span>
</div>
// If showToggle is true, render both options as a toggle selector (for agent dashboard)
if (showToggle) {
return (
<div className="w-full max-w-[354px] lg:max-w-none space-y-2">
{/* Available Option */}
<button
onClick={handleConnectClick}
className="px-5 py-1.5 bg-[#e58625] text-white text-sm rounded-[15px] hover:bg-[#d47720] transition-colors font-fractul"
onClick={() => !isAvailable && onToggleAvailability?.()}
className={`w-full flex items-center border rounded-[15px] h-[50px] px-4 transition-colors ${
isAvailable
? 'border-green-500 bg-green-50'
: 'border-[#00293d]/10 hover:border-[#00293d]/20'
}`}
>
Connect
<div className="flex items-center gap-2 flex-1">
<span className={`w-3 h-3 rounded-full ${
isAvailable ? 'bg-green-500' : 'bg-white border border-gray-400'
}`} />
<span className="text-sm font-bold text-[#00293d] font-fractul">Available.</span>
</div>
{isAvailable && (
<span className="text-xs text-green-600 font-medium">Active</span>
)}
</button>
{/* Unavailable Option */}
<button
onClick={() => isAvailable && onToggleAvailability?.()}
className={`w-full flex items-center border rounded-[15px] h-[50px] px-4 transition-colors ${
!isAvailable
? 'border-[#00293d] bg-[#00293d]/5'
: 'border-[#00293d]/10 hover:border-[#00293d]/20'
}`}
>
<div className="flex items-center gap-2 flex-1">
<span className={`w-3 h-3 rounded-full ${
!isAvailable ? 'bg-[#00293d]' : 'bg-white border border-gray-400'
}`} />
<span className="text-sm font-bold text-[#00293d] font-fractul">Unavailable.</span>
</div>
{!isAvailable && (
<span className="text-xs text-[#00293d]/70 font-medium">Active</span>
)}
</button>
</div>
);
}
// Public view - show single status with Connect button
return (
<div className="w-full max-w-[354px] lg:max-w-none">
<div className="flex items-center border border-[#00293d]/10 rounded-[15px] h-[50px] px-4">
<div className="flex items-center gap-2 flex-1">
<span className="w-3 h-3 bg-white border border-gray-400 rounded-full" />
<span className="text-sm font-bold text-[#00293d] font-fractul">Unavailable.</span>
<span className={`w-3 h-3 rounded-full ${
isAvailable ? 'bg-green-500' : 'bg-white border border-gray-400'
}`} />
<span className="text-sm font-bold text-[#00293d] font-fractul">
{isAvailable ? 'Available.' : 'Unavailable.'}
</span>
</div>
<button
onClick={handleConnectClick}
className="px-5 py-1.5 bg-[#00293d] text-white text-sm rounded-[15px] hover:bg-[#001d2b] transition-colors font-fractul"
disabled={!isAvailable}
className={`px-5 py-1.5 text-white text-sm rounded-[15px] transition-colors font-fractul ${
isAvailable
? 'bg-[#e58625] hover:bg-[#d47720] cursor-pointer'
: 'bg-[#00293d] cursor-not-allowed opacity-70'
}`}
>
Connect
</button>