mirror of
https://dev.azure.com/globalhealthx/EMR/_git/helix-engage
synced 2026-04-11 18:28:15 +00:00
Linting and Formatting
This commit is contained in:
Kartik Datrika
@@ -1,6 +1,6 @@
|
||||
import { useState } from "react";
|
||||
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
|
||||
import {
|
||||
faArrowRightFromBracket,
|
||||
faBullhorn,
|
||||
faChartMixed,
|
||||
faChevronLeft,
|
||||
@@ -13,19 +13,19 @@ import {
|
||||
faPhone,
|
||||
faPlug,
|
||||
faUsers,
|
||||
faArrowRightFromBracket,
|
||||
} from "@fortawesome/pro-duotone-svg-icons";
|
||||
import { faIcon } from "@/lib/icon-wrapper";
|
||||
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
|
||||
import { useAtom } from "jotai";
|
||||
import { Link, useNavigate } from "react-router";
|
||||
import { ModalOverlay, Modal, Dialog } from "@/components/application/modals/modal";
|
||||
import { Button } from "@/components/base/buttons/button";
|
||||
import { MobileNavigationHeader } from "@/components/application/app-navigation/base-components/mobile-header";
|
||||
import { NavAccountCard } from "@/components/application/app-navigation/base-components/nav-account-card";
|
||||
import { NavItemBase } from "@/components/application/app-navigation/base-components/nav-item";
|
||||
import type { NavItemType } from "@/components/application/app-navigation/config";
|
||||
import { Dialog, Modal, ModalOverlay } from "@/components/application/modals/modal";
|
||||
import { Avatar } from "@/components/base/avatar/avatar";
|
||||
import { Button } from "@/components/base/buttons/button";
|
||||
import { apiClient } from "@/lib/api-client";
|
||||
import { faIcon } from "@/lib/icon-wrapper";
|
||||
import { notify } from "@/lib/toast";
|
||||
import { useAuth } from "@/providers/auth-provider";
|
||||
import { sidebarCollapsedAtom } from "@/state/sidebar-state";
|
||||
@@ -51,50 +51,63 @@ type NavSection = {
|
||||
};
|
||||
|
||||
const getNavSections = (role: string): NavSection[] => {
|
||||
if (role === 'admin') {
|
||||
if (role === "admin") {
|
||||
return [
|
||||
{ label: 'Overview', items: [{ label: 'Team Dashboard', href: '/', icon: IconGrid2 }] },
|
||||
{ label: 'Management', items: [
|
||||
{ label: 'Campaigns', href: '/campaigns', icon: IconBullhorn },
|
||||
{ label: 'Analytics', href: '/reports', icon: IconChartMixed },
|
||||
]},
|
||||
{ label: 'Admin', items: [
|
||||
{ label: 'Integrations', href: '/integrations', icon: IconPlug },
|
||||
{ label: 'Settings', href: '/settings', icon: IconGear },
|
||||
]},
|
||||
{ label: "Overview", items: [{ label: "Team Dashboard", href: "/", icon: IconGrid2 }] },
|
||||
{
|
||||
label: "Management",
|
||||
items: [
|
||||
{ label: "Campaigns", href: "/campaigns", icon: IconBullhorn },
|
||||
{ label: "Analytics", href: "/reports", icon: IconChartMixed },
|
||||
],
|
||||
},
|
||||
{
|
||||
label: "Admin",
|
||||
items: [
|
||||
{ label: "Integrations", href: "/integrations", icon: IconPlug },
|
||||
{ label: "Settings", href: "/settings", icon: IconGear },
|
||||
],
|
||||
},
|
||||
];
|
||||
}
|
||||
|
||||
if (role === 'cc-agent') {
|
||||
if (role === "cc-agent") {
|
||||
return [
|
||||
{ label: 'Call Center', items: [
|
||||
{ label: 'Call Desk', href: '/', icon: IconPhone },
|
||||
{ label: 'Call History', href: '/call-history', icon: IconClockRewind },
|
||||
{ label: 'Patients', href: '/patients', icon: IconHospitalUser },
|
||||
{ label: 'My Performance', href: '/my-performance', icon: IconChartMixed },
|
||||
]},
|
||||
{
|
||||
label: "Call Center",
|
||||
items: [
|
||||
{ label: "Call Desk", href: "/", icon: IconPhone },
|
||||
{ label: "Call History", href: "/call-history", icon: IconClockRewind },
|
||||
{ label: "Patients", href: "/patients", icon: IconHospitalUser },
|
||||
{ label: "My Performance", href: "/my-performance", icon: IconChartMixed },
|
||||
],
|
||||
},
|
||||
];
|
||||
}
|
||||
|
||||
return [
|
||||
{ label: 'Main', items: [
|
||||
{ label: 'Lead Workspace', href: '/', icon: IconGrid2 },
|
||||
{ label: 'All Leads', href: '/leads', icon: IconUsers },
|
||||
{ label: 'Patients', href: '/patients', icon: IconHospitalUser },
|
||||
{ label: 'Campaigns', href: '/campaigns', icon: IconBullhorn },
|
||||
{ label: 'Outreach', href: '/outreach', icon: IconCommentDots },
|
||||
]},
|
||||
{ label: 'Insights', items: [
|
||||
{ label: 'Analytics', href: '/reports', icon: IconChartMixed },
|
||||
]},
|
||||
{
|
||||
label: "Main",
|
||||
items: [
|
||||
{ label: "Lead Workspace", href: "/", icon: IconGrid2 },
|
||||
{ label: "All Leads", href: "/leads", icon: IconUsers },
|
||||
{ label: "Patients", href: "/patients", icon: IconHospitalUser },
|
||||
{ label: "Campaigns", href: "/campaigns", icon: IconBullhorn },
|
||||
{ label: "Outreach", href: "/outreach", icon: IconCommentDots },
|
||||
],
|
||||
},
|
||||
{ label: "Insights", items: [{ label: "Analytics", href: "/reports", icon: IconChartMixed }] },
|
||||
];
|
||||
};
|
||||
|
||||
const getRoleSubtitle = (role: string): string => {
|
||||
switch (role) {
|
||||
case 'admin': return 'Marketing Admin';
|
||||
case 'cc-agent': return 'Call Center Agent';
|
||||
default: return 'Marketing Executive';
|
||||
case "admin":
|
||||
return "Marketing Admin";
|
||||
case "cc-agent":
|
||||
return "Call Center Agent";
|
||||
default:
|
||||
return "Marketing Executive";
|
||||
}
|
||||
};
|
||||
|
||||
@@ -118,15 +131,15 @@ export const Sidebar = ({ activeUrl = "/" }: SidebarProps) => {
|
||||
const confirmSignOut = () => {
|
||||
setLogoutOpen(false);
|
||||
logout();
|
||||
navigate('/login');
|
||||
navigate("/login");
|
||||
};
|
||||
|
||||
const handleForceReady = async () => {
|
||||
try {
|
||||
await apiClient.post('/api/ozonetel/agent-ready', {});
|
||||
notify.success('Agent Ready', 'Agent state has been reset to Ready');
|
||||
await apiClient.post("/api/ozonetel/agent-ready", {});
|
||||
notify.success("Agent Ready", "Agent state has been reset to Ready");
|
||||
} catch {
|
||||
notify.error('Force Ready Failed', 'Could not reset agent state');
|
||||
notify.error("Force Ready Failed", "Could not reset agent state");
|
||||
}
|
||||
};
|
||||
|
||||
@@ -142,7 +155,7 @@ export const Sidebar = ({ activeUrl = "/" }: SidebarProps) => {
|
||||
{/* Logo + collapse toggle */}
|
||||
<div className={cx("flex items-center gap-2", collapsed ? "justify-center px-2" : "justify-between px-4 lg:px-5")}>
|
||||
{collapsed ? (
|
||||
<img src="/favicon-32.png" alt="Helix Engage" className="size-8 rounded-lg shrink-0" />
|
||||
<img src="/favicon-32.png" alt="Helix Engage" className="size-8 shrink-0 rounded-lg" />
|
||||
) : (
|
||||
<div className="flex flex-col gap-1">
|
||||
<span className="text-md font-bold text-primary">Helix Engage</span>
|
||||
@@ -151,8 +164,8 @@ export const Sidebar = ({ activeUrl = "/" }: SidebarProps) => {
|
||||
)}
|
||||
<button
|
||||
onClick={() => setCollapsed(!collapsed)}
|
||||
className="hidden lg:flex size-6 items-center justify-center rounded-md text-fg-quaternary hover:text-fg-secondary hover:bg-secondary transition duration-100 ease-linear"
|
||||
title={collapsed ? 'Expand sidebar' : 'Collapse sidebar'}
|
||||
className="hidden size-6 items-center justify-center rounded-md text-fg-quaternary transition duration-100 ease-linear hover:bg-secondary hover:text-fg-secondary lg:flex"
|
||||
title={collapsed ? "Expand sidebar" : "Collapse sidebar"}
|
||||
>
|
||||
<FontAwesomeIcon icon={collapsed ? faChevronRight : faChevronLeft} className="size-3" />
|
||||
</button>
|
||||
@@ -172,7 +185,7 @@ export const Sidebar = ({ activeUrl = "/" }: SidebarProps) => {
|
||||
<li key={item.label} className="py-0.5">
|
||||
{collapsed ? (
|
||||
<Link
|
||||
to={item.href ?? '/'}
|
||||
to={item.href ?? "/"}
|
||||
title={item.label}
|
||||
className={cx(
|
||||
"flex size-10 items-center justify-center rounded-lg transition duration-100 ease-linear",
|
||||
@@ -184,13 +197,7 @@ export const Sidebar = ({ activeUrl = "/" }: SidebarProps) => {
|
||||
{item.icon && <item.icon className="size-5" />}
|
||||
</Link>
|
||||
) : (
|
||||
<NavItemBase
|
||||
icon={item.icon}
|
||||
href={item.href}
|
||||
badge={item.badge}
|
||||
type="link"
|
||||
current={item.href === activeUrl}
|
||||
>
|
||||
<NavItemBase icon={item.icon} href={item.href} badge={item.badge} type="link" current={item.href === activeUrl}>
|
||||
{item.label}
|
||||
</NavItemBase>
|
||||
)}
|
||||
@@ -207,19 +214,21 @@ export const Sidebar = ({ activeUrl = "/" }: SidebarProps) => {
|
||||
<button
|
||||
onClick={handleSignOut}
|
||||
title={`${user.name}\nSign out`}
|
||||
className="rounded-lg p-1 hover:bg-primary_hover transition duration-100 ease-linear"
|
||||
className="rounded-lg p-1 transition duration-100 ease-linear hover:bg-primary_hover"
|
||||
>
|
||||
<Avatar size="sm" initials={user.initials} status="online" />
|
||||
</button>
|
||||
) : (
|
||||
<NavAccountCard
|
||||
items={[{
|
||||
id: 'current',
|
||||
name: user.name,
|
||||
email: user.email,
|
||||
avatar: '',
|
||||
status: 'online' as const,
|
||||
}]}
|
||||
items={[
|
||||
{
|
||||
id: "current",
|
||||
name: user.name,
|
||||
email: user.email,
|
||||
avatar: "",
|
||||
status: "online" as const,
|
||||
},
|
||||
]}
|
||||
selectedAccountId="current"
|
||||
onSignOut={handleSignOut}
|
||||
onForceReady={handleForceReady}
|
||||
@@ -235,7 +244,7 @@ export const Sidebar = ({ activeUrl = "/" }: SidebarProps) => {
|
||||
<div className="hidden lg:fixed lg:inset-y-0 lg:left-0 lg:flex lg:py-1 lg:pl-1">{content}</div>
|
||||
<div
|
||||
style={{ paddingLeft: width + 4 }}
|
||||
className="invisible hidden lg:sticky lg:top-0 lg:bottom-0 lg:left-0 lg:block transition-all duration-200 ease-linear"
|
||||
className="invisible hidden transition-all duration-200 ease-linear lg:sticky lg:top-0 lg:bottom-0 lg:left-0 lg:block"
|
||||
/>
|
||||
|
||||
{/* Logout confirmation modal */}
|
||||
@@ -243,7 +252,7 @@ export const Sidebar = ({ activeUrl = "/" }: SidebarProps) => {
|
||||
<Modal className="max-w-md">
|
||||
<Dialog>
|
||||
<div className="rounded-xl bg-primary p-6 shadow-xl">
|
||||
<div className="flex flex-col items-center text-center gap-4">
|
||||
<div className="flex flex-col items-center gap-4 text-center">
|
||||
<div className="flex size-12 items-center justify-center rounded-full bg-warning-secondary">
|
||||
<FontAwesomeIcon icon={faArrowRightFromBracket} className="size-5 text-fg-warning-primary" />
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user