company flows
This commit is contained in:
parent
6541284a4c
commit
cc3f3f3de5
17 changed files with 1960 additions and 66 deletions
|
|
@ -29,6 +29,9 @@ import { getCurrentAccount, getMyCompanyDomain } from "../api";
|
|||
import Brand from "./Brand";
|
||||
import CompanyDnsSetup from "./CompanyDnsSetup";
|
||||
import CompanyDomains from "./CompanyDomains";
|
||||
import CompanyAliases from "./CompanyAliases";
|
||||
import CompanyGroups from "./CompanyGroups";
|
||||
import CompanyPeople from "./CompanyPeople";
|
||||
import CompanyOverviewSetup, { isOrgSetupComplete } from "./CompanyOverviewSetup";
|
||||
import ComposeModal from "./ComposeModal";
|
||||
import MailboxView from "./MailboxView";
|
||||
|
|
@ -277,82 +280,84 @@ export default function DashboardPage() {
|
|||
</button>
|
||||
</div>
|
||||
|
||||
{isDomainOwner && (
|
||||
<SidebarSection title="Company" className="dashboard-sidebar-company dashboard-sidebar-first">
|
||||
<nav aria-label="Company">
|
||||
{companyItems.map(([ItemIcon, label]) => (
|
||||
<div className="dashboard-sidebar-scroll">
|
||||
{isDomainOwner && (
|
||||
<SidebarSection title="Company" className="dashboard-sidebar-company dashboard-sidebar-first">
|
||||
<nav aria-label="Company">
|
||||
{companyItems.map(([ItemIcon, label]) => (
|
||||
<button
|
||||
className={`dashboard-nav-item dashboard-company-item${companyActive === label ? " active" : ""}`}
|
||||
key={label}
|
||||
type="button"
|
||||
onClick={() => selectCompanyItem(label)}
|
||||
>
|
||||
<ItemIcon size={16} strokeWidth={1.75} />
|
||||
<span>{label}</span>
|
||||
</button>
|
||||
))}
|
||||
</nav>
|
||||
</SidebarSection>
|
||||
)}
|
||||
|
||||
<SidebarSection title="Mail" className="dashboard-sidebar-mail">
|
||||
<nav aria-label="Mail">
|
||||
{mailItems.map(([ItemIcon, label, countKey]) => (
|
||||
<button
|
||||
className={`dashboard-nav-item dashboard-company-item${companyActive === label ? " active" : ""}`}
|
||||
className={`dashboard-nav-item${!companyActive && mailActive === label ? " active" : ""}`}
|
||||
key={label}
|
||||
type="button"
|
||||
onClick={() => selectCompanyItem(label)}
|
||||
onClick={() => selectMailItem(label)}
|
||||
>
|
||||
<ItemIcon size={16} strokeWidth={1.75} />
|
||||
<span>{label}</span>
|
||||
<NavBadge value={countKey ? mailStats[countKey] : 0} />
|
||||
</button>
|
||||
))}
|
||||
</nav>
|
||||
</SidebarSection>
|
||||
)}
|
||||
|
||||
<SidebarSection title="Mail" className="dashboard-sidebar-mail">
|
||||
<nav aria-label="Mail">
|
||||
{mailItems.map(([ItemIcon, label, countKey]) => (
|
||||
<SidebarSection title="Labels" className="dashboard-sidebar-labels">
|
||||
<nav aria-label="Labels">
|
||||
{labels.map(([name, tone, countKey]) => (
|
||||
<button
|
||||
className={`dashboard-nav-item dashboard-label-item${!companyActive && lens === name ? " active" : ""}`}
|
||||
key={name}
|
||||
type="button"
|
||||
onClick={() => selectLabel(name)}
|
||||
>
|
||||
<i className={`label-dot label-dot-${tone}`} />
|
||||
<span>{name}</span>
|
||||
<NavBadge variant="neutral" value={mailStats.labels?.[countKey]} />
|
||||
</button>
|
||||
))}
|
||||
<button
|
||||
className={`dashboard-nav-item${mailActive === label ? " active" : ""}`}
|
||||
key={label}
|
||||
type="button"
|
||||
onClick={() => selectMailItem(label)}
|
||||
className="dashboard-nav-item dashboard-label-more"
|
||||
onClick={() => setLabelsExpanded((open) => !open)}
|
||||
>
|
||||
<ItemIcon size={16} strokeWidth={1.75} />
|
||||
<span>{label}</span>
|
||||
<NavBadge value={countKey ? mailStats[countKey] : 0} />
|
||||
<ChevronDown size={14} strokeWidth={1.75} className={labelsExpanded ? "open" : ""} />
|
||||
<span>{labelsExpanded ? "Less" : "More"}</span>
|
||||
</button>
|
||||
))}
|
||||
</nav>
|
||||
</SidebarSection>
|
||||
</nav>
|
||||
</SidebarSection>
|
||||
|
||||
<SidebarSection title="Labels" className="dashboard-sidebar-labels">
|
||||
<nav aria-label="Labels">
|
||||
{labels.map(([name, tone, countKey]) => (
|
||||
<button
|
||||
className={`dashboard-nav-item dashboard-label-item${lens === name ? " active" : ""}`}
|
||||
key={name}
|
||||
type="button"
|
||||
onClick={() => selectLabel(name)}
|
||||
>
|
||||
<i className={`label-dot label-dot-${tone}`} />
|
||||
<span>{name}</span>
|
||||
<NavBadge variant="neutral" value={mailStats.labels?.[countKey]} />
|
||||
</button>
|
||||
))}
|
||||
<button
|
||||
type="button"
|
||||
className="dashboard-nav-item dashboard-label-more"
|
||||
onClick={() => setLabelsExpanded((open) => !open)}
|
||||
>
|
||||
<ChevronDown size={14} strokeWidth={1.75} className={labelsExpanded ? "open" : ""} />
|
||||
<span>{labelsExpanded ? "Less" : "More"}</span>
|
||||
</button>
|
||||
</nav>
|
||||
</SidebarSection>
|
||||
|
||||
<SidebarSection title="Agent" className="dashboard-sidebar-agent">
|
||||
<nav aria-label="Agent">
|
||||
{agentItems.map(([ItemIcon, label, actionKey]) => (
|
||||
<button
|
||||
className={`dashboard-nav-item dashboard-agent-item${agentNav === actionKey ? " active" : ""}`}
|
||||
key={label}
|
||||
type="button"
|
||||
onClick={() => selectAgentItem(label, actionKey)}
|
||||
>
|
||||
<ItemIcon size={16} strokeWidth={1.75} />
|
||||
<span>{label}</span>
|
||||
<NavBadge value={actionKey === "actions" ? mailStats.actionItems : 0} />
|
||||
</button>
|
||||
))}
|
||||
</nav>
|
||||
</SidebarSection>
|
||||
<SidebarSection title="Agent" className="dashboard-sidebar-agent">
|
||||
<nav aria-label="Agent">
|
||||
{agentItems.map(([ItemIcon, label, actionKey]) => (
|
||||
<button
|
||||
className={`dashboard-nav-item dashboard-agent-item${!companyActive && agentNav === actionKey ? " active" : ""}`}
|
||||
key={label}
|
||||
type="button"
|
||||
onClick={() => selectAgentItem(label, actionKey)}
|
||||
>
|
||||
<ItemIcon size={16} strokeWidth={1.75} />
|
||||
<span>{label}</span>
|
||||
<NavBadge value={actionKey === "actions" ? mailStats.actionItems : 0} />
|
||||
</button>
|
||||
))}
|
||||
</nav>
|
||||
</SidebarSection>
|
||||
</div>
|
||||
|
||||
<div className="dashboard-profile">
|
||||
<span>{account.first_name[0]}{account.last_name[0]}</span>
|
||||
|
|
@ -362,7 +367,7 @@ export default function DashboardPage() {
|
|||
</aside>
|
||||
|
||||
<main className="dashboard-content">
|
||||
{companyActive && !["Overview", "Domains"].includes(companyActive) && (
|
||||
{companyActive && !["Overview", "Domains", "People", "Groups", "Aliases"].includes(companyActive) && (
|
||||
<div className="dashboard-content-heading">
|
||||
<div><p>{workspaceTitle}</p><h1>{companyActive}</h1></div>
|
||||
<span className="dashboard-account-pill">{workspaceLabel}</span>
|
||||
|
|
@ -423,7 +428,16 @@ export default function DashboardPage() {
|
|||
primaryDomainName={account.company_domain}
|
||||
/>
|
||||
)}
|
||||
{companyActive && !["Overview", "Domains"].includes(companyActive) && (
|
||||
{companyActive === "People" && isDomainOwner && (
|
||||
<CompanyPeople account={account} />
|
||||
)}
|
||||
{companyActive === "Groups" && isDomainOwner && (
|
||||
<CompanyGroups account={account} />
|
||||
)}
|
||||
{companyActive === "Aliases" && isDomainOwner && (
|
||||
<CompanyAliases account={account} />
|
||||
)}
|
||||
{companyActive && !["Overview", "Domains", "People", "Groups", "Aliases"].includes(companyActive) && (
|
||||
<section className="dashboard-empty dashboard-company-view">
|
||||
<span><Sparkles size={24} /></span>
|
||||
<h2>{companyActive}</h2>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue