Patterns

import { Badge } from '@mihcm/ui/Badge';
import { Button } from '@mihcm/ui/Button';
import { StatCard } from '@mihcm/ui/StatCard';
import { Text } from '@mihcm/ui/Text';

<section className="grid gap-6 rounded-lg border border-border bg-card p-6 lg:grid-cols-2 lg:p-8">
  <div className="max-w-xl">
    <Badge variant="outline">Human capital platform</Badge>
    <Text size="3xl" weight="bold" className="mt-4 block leading-tight">
      Run payroll, HR, and workforce operations from one connected system.
    </Text>
    <Text size="body" tone="muted" className="mt-3 block">
      Explain the outcome, not just the module list.
    </Text>
    <div className="mt-6 flex flex-wrap gap-3">
      <Button>Book a demo</Button>
      <Button variant="outline">View modules</Button>
    </div>
  </div>
  <div className="rounded-lg border border-border bg-muted p-4">
    <div className="grid gap-3 sm:grid-cols-2">
      <StatCard tone="primary" value="98%" label="Payroll accuracy" />
      <StatCard tone="accent" value="12k" label="Employees" />
      <StatCard tone="success" value="42" label="Automations" />
      <StatCard tone="neutral" value="4.8" label="CSAT" />
    </div>
  </div>
</section>

import { Card } from '@mihcm/ui/Card';
import { Text } from '@mihcm/ui/Text';

<Card className="p-5">
  <div className="grid gap-4 md:grid-cols-2 md:items-center">
    <div>
      <Text size="lg" weight="bold" className="block">Proof before persuasion</Text>
      <Text size="body-sm" tone="muted" className="mt-1 block">
        Pair a short credibility line with measurable outcomes.
      </Text>
    </div>
    <div className="grid gap-3 sm:grid-cols-3">
      {metrics.map((metric) => (
        <div key={metric.label} className="rounded-md border border-border bg-muted p-4 text-center">
          <Text size="xl" weight="bold" className="block">{metric.value}</Text>
          <Text size="caption" tone="muted" className="mt-1 block uppercase tracking-wide-sm">
            {metric.label}
          </Text>
        </div>
      ))}
    </div>
  </div>
</Card>

import { Badge } from '@mihcm/ui/Badge';
import { Button } from '@mihcm/ui/Button';
import { Card } from '@mihcm/ui/Card';
import { Text } from '@mihcm/ui/Text';

<div className="grid gap-4 lg:grid-cols-3">
  {plans.map((plan) => (
    <Card key={plan.name} className={plan.highlight ? 'border-primary shadow-mi-card' : undefined}>
      <div className="p-5">
        <div className="flex items-start justify-between gap-3">
          <div>
            <Text size="lg" weight="bold" className="block">{plan.name}</Text>
            <Text size="body-sm" tone="muted" className="mt-1 block">{plan.description}</Text>
          </div>
          <Badge variant={plan.highlight ? 'default' : 'outline'}>{plan.label}</Badge>
        </div>
        <div className="mt-5 space-y-2 text-sm text-muted-foreground">
          {plan.features.map((feature) => <div key={feature}>{feature}</div>)}
        </div>
        <Button className="mt-5 w-full" variant={plan.highlight ? 'default' : 'outline'}>
          Compare plan
        </Button>
      </div>
    </Card>
  ))}
</div>

import { PageShell } from '@mihcm/ui/PageShell';
import { TopBar, TopBarLogo, TopBarHomeButton, TopBarBackLink, TopBarNotification, TopBarProfile, TopBarDivider, TopBarAction } from '@mihcm/ui/TopBar';
import { MainSidebar } from '@mihcm/ui/MainSidebar';
import { TitleBar } from '@mihcm/ui/TitleBar';
import { Avatar, AvatarFallback, AvatarImage } from '@mihcm/ui/Avatar';
import { Card } from '@mihcm/ui/Card';
import { Button } from '@mihcm/ui/Button';
import { SectionHeader } from '@mihcm/ui/SectionHeader';
import { StatCard } from '@mihcm/ui/StatCard';
import { StatusBadge } from '@mihcm/ui/StatusBadge';

<PageShell
  topBar={
    <TopBar
      start={
        <>
          <TopBarLogo />
          <TopBarHomeButton icon={<HomeIcon />} />
          <TopBarBackLink>Back to main</TopBarBackLink>
          <TopBarNotification icon={<BellIcon />} count={5} />
        </>
      }
      end={
        <>
          <TopBarProfile
            name="Good Morning Yashi"
            subtitle="Edit Profile"
            avatar={
              <Avatar size="sm">
                <AvatarImage src="/people/alex-kim.svg" alt="Yashi" />
                <AvatarFallback>YA</AvatarFallback>
              </Avatar>
            }
          />
          <TopBarDivider />
          <TopBarAction icon={<HeadphonesIcon />} />
          <TopBarAction>Logout</TopBarAction>
        </>
      }
    />
  }
  sidebar={
    <MainSidebar
      items={NAV_ITEMS}
      activeKey="security"
      onItemSelect={(key) => setActive(key)}
    />
  }
  titleBar={
    <TitleBar
      icon={<ShieldIcon />}
      supertitle="Security workspace"
      title="Permissions cockpit"
      action={<Button size="sm">Review access</Button>}
    />
  }
>
  <div className="grid gap-4 lg:grid-cols-3">
    <Card className="overflow-hidden lg:col-span-2">
      <div className="border-b border-border p-4">
        <SectionHeader
          title="Access review"
          description="High-risk changes grouped by team, role, and module."
          action={<StatusBadge tone="warning">8 pending</StatusBadge>}
        />
      </div>
      <div className="grid gap-3 p-4 sm:grid-cols-3">
        <StatCard tone="primary" value="6" label="Role changes" />
        <StatCard tone="warning" value="8" label="Exceptions" />
        <StatCard tone="success" value="92%" label="Policy match" />
      </div>
    </Card>
  </div>
</PageShell>

import { StatCard } from '@mihcm/ui/StatCard';

<div className="grid grid-cols-1 gap-3 sm:grid-cols-3">
  <StatCard tone="primary" value="6" label="Active Roles" icon={<ShieldIcon />} />
  <StatCard tone="accent" value="13,283" label="Total Users" icon={<UsersIcon />} />
  <StatCard tone="success" value="16" label="Modules" icon={<GridIcon />} />
</div>

import { SectionHeader } from '@mihcm/ui/SectionHeader';
import { Switch } from '@mihcm/ui/Switch';
import { Label } from '@mihcm/ui/Label';

<SectionHeader title="Notifications" description="Control how you receive alerts" />
<div className="space-y-3">
  <div className="flex items-center justify-between">
    <Label>Email notifications</Label>
    <Switch checked={emailEnabled} onCheckedChange={setEmailEnabled} />
  </div>
  <div className="flex items-center justify-between">
    <Label>Push notifications</Label>
    <Switch checked={pushEnabled} onCheckedChange={setPushEnabled} />
  </div>
</div>

<div className="flex min-h-96 items-center justify-center p-4">
  <div className="max-w-md text-center">
    <div className="relative w-20 h-20 mx-auto mb-6">
      <div className="absolute inset-0 rounded-2xl bg-muted" />
      <div className="absolute inset-0 bg-card border-2 border-secondary rounded-2xl flex items-center justify-center">
        <ShieldIcon className="w-9 h-9 text-primary" />
      </div>
    </div>
    <Text size="xl" weight="bold" className="block mb-2">Configure Roles</Text>
    <Text size="sm" tone="muted" className="block mb-7">
      Select a role from the left to edit its access.
    </Text>
    <div className="flex gap-2.5 justify-center">
      <Button variant="outline" size="sm">Create a new role</Button>
      <Button variant="outline" size="sm">Lookup an employee</Button>
    </div>
  </div>
</div>

import { Card } from '@mihcm/ui/Card';
import { SearchField } from '@mihcm/ui/SearchField';

<Card className="flex flex-col md:flex-row overflow-hidden flex-1 min-h-0">
  {/* Left panel — list */}
  <div className="w-full flex-shrink-0 border-b border-secondary md:basis-72 md:border-b-0 md:border-r">
    <div className="border-b border-secondary p-3">
      <SearchField placeholder="Filter..." />
    </div>
    <div className="p-2 flex-1 overflow-y-auto">
      {items.map(item => <ListItem key={item.id} {...item} />)}
    </div>
  </div>
  {/* Right panel — detail */}
  <div className="flex-1 bg-muted overflow-y-auto p-4">
    {selectedItem ? <Editor item={selectedItem} /> : <EmptyState />}
  </div>
</Card>

import { SearchField } from '@mihcm/ui/SearchField';
import { Text } from '@mihcm/ui/Text';
import { Card } from '@mihcm/ui/Card';

<Card className="p-4 flex flex-col sm:flex-row items-stretch sm:items-center gap-4">
  <div className="flex items-center gap-2 flex-shrink-0">
    <UserIcon className="w-5 h-5 text-secondary-foreground" />
    <Text size="body-sm" weight="semibold">Employee Lookup</Text>
  </div>
  <SearchField
    placeholder="Search by name, email, or employee number..."
    className="flex-1"
  />
</Card>

import { Button } from '@mihcm/ui/Button';
import { Card } from '@mihcm/ui/Card';
import { SearchField } from '@mihcm/ui/SearchField';
import { Text } from '@mihcm/ui/Text';

<Card className="p-4">
  <div className="flex flex-col gap-4 lg:flex-row lg:items-center lg:justify-between">
    <div>
      <Text size="lg" weight="bold">Employee records</Text>
      <Text size="body-sm" tone="muted" className="mt-1 block">
        Operational header for dense application pages.
      </Text>
    </div>
    <div className="flex flex-col gap-2 sm:flex-row">
      <SearchField placeholder="Search employees..." className="sm:w-64" />
      <Button variant="outline">Export</Button>
      <Button>Add employee</Button>
    </div>
  </div>
</Card>

import { Button } from '@mihcm/ui/Button';
import { Card } from '@mihcm/ui/Card';
import { SectionHeader } from '@mihcm/ui/SectionHeader';
import { Text } from '@mihcm/ui/Text';

<div className="grid gap-4 lg:grid-cols-3">
  <Card className="p-4 lg:col-span-1">
    <SectionHeader title="Queue filters" description="Narrow the review list." />
    <div className="mt-4 space-y-2">
      {filters.map((filter) => (
        <Button
          key={filter.name}
          type="button"
          variant={filter.active ? 'default' : 'ghost'}
          size="sm"
          className="w-full justify-between"
        >
          <span>{filter.name}</span>
          <span>{filter.count}</span>
        </Button>
      ))}
    </div>
  </Card>
  <Card className="overflow-hidden lg:col-span-2">
    <div className="border-b border-border p-4">
      <SectionHeader title="Leave approvals" description="Review exceptions before payroll cutoff." />
    </div>
    <div className="divide-y divide-border">
      {items.map((item) => (
        <div key={item.id} className="flex flex-col gap-3 p-4 sm:flex-row sm:items-center sm:justify-between">
          <div>
            <Text size="body-sm" weight="semibold" className="block">{item.name}</Text>
            <Text size="caption" tone="muted" className="mt-1 block">{item.summary}</Text>
          </div>
          <div className="flex gap-2">
            <Button size="sm" variant="outline">Decline</Button>
            <Button size="sm">Approve</Button>
          </div>
        </div>
      ))}
    </div>
  </Card>
</div>