ClientPortal

Code

import { ClientPortal } from "@fadymondy/nasaq/web";export const Portal = (p: { data: PortalData }) => (  <ClientPortal    project={{ name: "New booking platform", client: "Tamkeen Co." }}    tasks={p.data.tasks}    requests={p.data.requests}    weeks={p.data.weeks}    budgetHours={240}    invoices={p.data.invoices}    currency="SAR"    activity={p.data.activity}    openIssues={4}    onRequest={(r) => api.createRequest(r)}  />);

CRM · beta

Live examples and controls: ClientPortal in the lab.

InstallCopy Anchor Link

npx shadcn@latest add https://docs.nasaqui.com/r/client-portal.json

The page you share with a customer. It shows aggregates and sent documents only: how many tasks are done, hours used against the budget, hours per week, how many issues are open and how many requests wait. It never lists internal issues, single time entries, internal notes, or an invoice that is still a draft.

Six tabs: Overview (progress ring, hour tiles, weekly bars), Board (four read-only columns), Requests (a form and the list), Time (totals and a table by week), Invoices (the InvoiceList with pay and download) and Activity (a Timeline).

When to useCopy Anchor Link

• A customer, client or stakeholder needs to follow a project without an account in your tool.

When not to useCopy Anchor Link

• Your own team's view of a project: use ProjectView.
• Anything with internal comments or cost rates: keep it out of the props.

ImportCopy Anchor Link

import { ClientPortal } from "@fadymondy/nasaq/web";
// inside this monorepo: "@nasaq/web"

Quick startCopy Anchor Link

import { ClientPortal } from "@fadymondy/nasaq/web";

export const Portal = (p: { data: PortalData }) => (
  <ClientPortal
    project={{ name: "New booking platform", client: "Tamkeen Co." }}
    tasks={p.data.tasks}
    requests={p.data.requests}
    weeks={p.data.weeks}
    budgetHours={240}
    invoices={p.data.invoices}
    currency="SAR"
    activity={p.data.activity}
    openIssues={4}
    onRequest={(r) => api.createRequest(r)}
  />
);

AnatomyCopy Anchor Link

ClientPortal                 data-slot="client-portal"
├─ header                    project, client, summary, due date (replaceable with `header`)
└─ Tabs
   ├─ Overview               Ring (data-slot="portal-ring"), StatGrid, budget Progress, weekly bars
   ├─ Board                  four sections of read-only cards  data-slot="portal-task"
   ├─ Requests               form (data-slot="portal-request-form") and list  data-slot="portal-request"
   ├─ Time                   StatGrid, budget Progress, DataTable by week
   ├─ Invoices               InvoiceList (drafts removed)
   └─ Activity               Timeline

APICopy Anchor Link

Logic (exported, pure)Copy Anchor Link

portalProgress(tasks), portalBudget(budget, used) (warns from 80 percent, danger when over), portalTotalHours(weeks), portalWeeksNewestFirst(weeks), portalPendingRequests(requests), portalVisibleInvoices(invoices), portalRing(percent, radius). Use portalVisibleInvoices on your server too, so drafts are never sent to the browser.

ExamplesCopy Anchor Link

Menus on a cardCopy Anchor Link

<ClientPortal
  {...data}
  taskActions={(task) => [{ id: "ask", label: "Ask a question", onSelect: () => ask(task.id) }]}
/>

Control the tab from the URLCopy Anchor Link

<ClientPortal {...data} tab={params.tab as ClientPortalTab} onTabChange={(tab) => router.replace(`?tab=${tab}`)} />

AccessibilityCopy Anchor Link

• The ring is an image with the percent in its name; the weekly bars are one image named "Hours in the last 8 weeks" and every number is also in the Time table.
• Board columns are named sections and lists; cards with a menu take focus so the keyboard opens it.
• Status is always a word with an icon, never colour alone. Errors on the form are text under the field.

RTL & i18nCopy Anchor Link

• All text has Arabic and English defaults, and dates and numbers follow the locale.
• Layout uses logical spacing; the tab bar scrolls sideways on narrow screens.

Styling & tokensCopy Anchor Link

Cards, tabs, status and progress use the standard tokens; the ring uses the primary token on a muted track. The board is one column on phones, two from sm, four from xl.

Do / Don'tCopy Anchor Link

• Do build the props on the server from aggregates, and filter drafts there.
• Do keep replies to requests short and specific.
• Don't pass single time entries, internal comments or rates.

RelatedCopy Anchor Link

• InvoiceList · Timeline · StatCard · KanbanBoard

LabCopy Anchor Link

https://docs.nasaqui.com/?path=/docs/components-crm-client-portal--docs