feature: a minimal implementation of staff management is done.

frontend/src/components/patients/CreatePatientModal.tsx

@@ -1,69 +0,0 @@
-'use client';
-
-import { Button } from '@/components/ui/Button';
-import { Input } from '@/components/ui/Input';
-import { CreatePatientInput } from '@/types/patient';
-
-interface CreatePatientModalProps {
-  isOpen: boolean;
-  formData: CreatePatientInput;
-  onChange: (patch: Partial<CreatePatientInput>) => void;
-  onSubmit: () => void;
-  onClose: () => void;
-  loading?: boolean;
-}
-
-export function CreatePatientModal({
-  isOpen,
-  formData,
-  onChange,
-  onSubmit,
-  onClose,
-  loading = false,
-}: CreatePatientModalProps) {
-  if (!isOpen) {
-    return null;
-  }
-
-  return (
-    <div className="surface-card p-4 space-y-3">
-      <div className="grid grid-cols-1 md:grid-cols-2 gap-3">
-        <Input
-          label="First name"
-          value={formData.firstName || ''}
-          onChange={(e) => onChange({ firstName: e.target.value })}
-        />
-        <Input
-          label="Last name"
-          value={formData.lastName || ''}
-          onChange={(e) => onChange({ lastName: e.target.value })}
-        />
-        <Input
-          label="Phone"
-          value={formData.phone || ''}
-          onChange={(e) => onChange({ phone: e.target.value })}
-        />
-        <Input
-          label="Email"
-          type="email"
-          value={formData.email || ''}
-          onChange={(e) => onChange({ email: e.target.value })}
-        />
-      </div>
-
-      <div className="flex gap-2">
-        <Button
-          variant="primary"
-          onClick={onSubmit}
-          isLoading={loading}
-          disabled={!formData.firstName || !formData.lastName}
-        >
-          Save Patient
-        </Button>
-        <Button variant="ghost" onClick={onClose}>
-          Cancel
-        </Button>
-      </div>
-    </div>
-  );
-}

frontend/src/components/patients/PatientSearchSelect.tsx

@@ -1,63 +0,0 @@
-'use client';
-
-import { Search } from 'lucide-react';
-import { Input } from '@/components/ui/Input';
-import { Patient } from '@/types/patient';
-
-interface PatientSearchSelectProps {
-  search: string;
-  onSearchChange: (value: string) => void;
-  patients: Patient[];
-  selectedPatientId?: string;
-  onSelectPatient: (patient: Patient) => void;
-  loading?: boolean;
-}
-
-export function PatientSearchSelect({
-  search,
-  onSearchChange,
-  patients,
-  selectedPatientId,
-  onSelectPatient,
-  loading = false,
-}: PatientSearchSelectProps) {
-  return (
-    <div className="surface-card p-4 space-y-4">
-      <Input
-        placeholder="Search patients by name, phone, email"
-        value={search}
-        onChange={(e) => onSearchChange(e.target.value)}
-        icon={<Search className="h-4 w-4 icon-flat" />}
-      />
-
-      <div className="space-y-2 max-h-80 overflow-y-auto">
-        {loading && <p className="text-sm text-text-muted">Loading patients...</p>}
-
-        {!loading && patients.length === 0 && (
-          <p className="text-sm text-text-muted">No patients found for this search.</p>
-        )}
-
-        {patients.map((patient) => {
-          const isSelected = selectedPatientId === patient.id;
-          return (
-            <button
-              key={patient.id}
-              type="button"
-              onClick={() => onSelectPatient(patient)}
-              className={`w-full text-left rounded-[var(--radius-sm)] border px-3 py-2 transition-colors ${
-                isSelected
-                  ? 'bg-primary-soft border-primary/60'
-                  : 'border-border/60 hover:bg-background-card/70'
-              }`}
-            >
-              <p className="text-sm font-medium text-text-primary">
-                {patient.firstName} {patient.lastName}
-              </p>
-              <p className="text-xs text-text-muted">{patient.phone || patient.email || 'No contact'}</p>
-            </button>
-          );
-        })}
-      </div>
-    </div>
-  );
-}

frontend/src/components/patients/PatientSummaryCard.tsx

@@ -1,28 +0,0 @@
-import { Patient } from '@/types/patient';
-
-interface PatientSummaryCardProps {
-  patient?: Patient;
-}
-
-export function PatientSummaryCard({ patient }: PatientSummaryCardProps) {
-  if (!patient) {
-    return (
-      <div className="surface-card p-4">
-        <p className="text-sm text-text-muted">Select a patient to view details.</p>
-      </div>
-    );
-  }
-
-  return (
-    <div className="surface-card p-4 space-y-2">
-      <h2 className="text-lg font-semibold text-text-primary">
-        {patient.firstName} {patient.lastName}
-      </h2>
-      <p className="text-sm text-text-secondary">Phone: {patient.phone || '-'}</p>
-      <p className="text-sm text-text-secondary">Email: {patient.email || '-'}</p>
-      <p className="text-sm text-text-secondary">
-        Status: {patient.isActive ? 'Active' : 'Inactive'}
-      </p>
-    </div>
-  );
-}

frontend/src/components/patients/TreatmentHistoryPreview.tsx

@@ -1,37 +0,0 @@
-import { TreatmentHistoryItem } from '@/types/patient';
-
-interface TreatmentHistoryPreviewProps {
-  items: TreatmentHistoryItem[];
-  loading?: boolean;
-}
-
-export function TreatmentHistoryPreview({ items, loading = false }: TreatmentHistoryPreviewProps) {
-  return (
-    <div className="surface-card p-4 space-y-3">
-      <h3 className="text-base font-semibold text-text-primary">Treatment History</h3>
-
-      {loading && <p className="text-sm text-text-muted">Loading treatment history...</p>}
-
-      {!loading && items.length === 0 && (
-        <p className="text-sm text-text-muted">No treatment history yet.</p>
-      )}
-
-      <div className="space-y-2">
-        {items.map((item) => (
-          <div key={item.id} className="border border-border/60 rounded-[var(--radius-sm)] p-3">
-            <div className="flex items-center justify-between">
-              <p className="text-sm font-medium text-text-primary">{item.title}</p>
-              <p className="text-xs text-text-muted">
-                {new Date(item.treatmentAt).toLocaleDateString()}
-              </p>
-            </div>
-            <p className="text-xs text-text-secondary mt-1">
-              Status: {item.status}
-              {item.tooth ? ` | Tooth: ${item.tooth}` : ''}
-            </p>
-          </div>
-        ))}
-      </div>
-    </div>
-  );
-}

frontend/src/components/ui/Checkbox.tsx

@@ -0,0 +1,70 @@
+'use client';
+
+import { useId } from 'react';
+import { Check } from 'lucide-react';
+
+type CheckboxProps = {
+  checked: boolean;
+  onChange: (checked: boolean) => void;
+  disabled?: boolean;
+  label: string;
+  id?: string;
+  className?: string;
+};
+
+/**
+ * App design-system checkbox: primary fill when checked, rounded, focus-visible ring.
+ */
+export function Checkbox({
+  checked,
+  onChange,
+  disabled = false,
+  label,
+  id,
+  className = '',
+}: CheckboxProps) {
+  const genId = useId();
+  const inputId = id ?? genId;
+
+  return (
+    <label
+      htmlFor={inputId}
+      className={`
+        inline-flex items-center gap-2.5 cursor-pointer select-none rounded-[var(--radius-sm)] -m-0.5 p-0.5
+        has-[:focus-visible]:ring-2 has-[:focus-visible]:ring-primary/45 has-[:focus-visible]:ring-offset-2
+        has-[:focus-visible]:ring-offset-background-secondary
+        ${disabled ? 'opacity-50 cursor-not-allowed' : ''}
+        ${className}
+      `}
+    >
+      <input
+        id={inputId}
+        type="checkbox"
+        className="sr-only"
+        checked={checked}
+        disabled={disabled}
+        onChange={(e) => onChange(e.target.checked)}
+      />
+      <span
+        className={`
+          flex h-5 w-5 shrink-0 items-center justify-center rounded-[var(--radius-sm)] border-2 transition-all duration-200
+          shadow-[inset_0_1px_0_rgba(255,255,255,0.05)]
+          ${
+            checked
+              ? 'border-primary bg-primary shadow-[0_0_0_1px_rgba(9,169,188,0.25)]'
+              : 'border-border-strong bg-background-card/90 hover:border-border'
+          }
+        `}
+        aria-hidden
+      >
+        <Check
+          strokeWidth={3}
+          className={`h-3.5 w-3.5 text-primary-contrast transition-all duration-200 ${
+            checked ? 'scale-100 opacity-100' : 'scale-75 opacity-0'
+          }`}
+        />
+      </span>
+      <span className="text-sm text-text-secondary">{label}</span>
+    </label>
+  );
+}

frontend/src/components/ui/Sidebar.tsx

@@ -1,7 +1,7 @@
 'use client';
 
 import Link from 'next/link';
-import { memo } from 'react';
+import { memo, useMemo } from 'react';
 import { usePathname } from 'next/navigation';
 import {
   LayoutDashboard,
@@ -12,19 +12,27 @@ import {
   FileText,
   CreditCard,
 } from 'lucide-react';
+import { useAuth } from '@/lib/hooks/useAuth';
+import { canViewTab } from '@/access';
 
 const menu = [
-  { name: 'Today', path: '/today', icon: LayoutDashboard },
-  { name: 'Patients', path: '/patients', icon: Users },
-  { name: 'Appointments', path: '/appointments', icon: Calendar },
-  { name: 'Staff Management', path: '/staff', icon: UserCog },
-  { name: 'Lab Management', path: '/lab', icon: FlaskConical },
-  { name: 'Billing', path: '/billing', icon: CreditCard },
-  { name: 'Reports', path: '/reports', icon: FileText },
+  { name: 'Today', path: '/today', icon: LayoutDashboard, read: 'TAB_TODAY_READ' as const },
+  { name: 'Patients', path: '/patients', icon: Users, read: 'TAB_PATIENTS_READ' as const },
+  { name: 'Appointments', path: '/appointments', icon: Calendar, read: 'TAB_APPOINTMENTS_READ' as const },
+  { name: 'Staff Management', path: '/staff', icon: UserCog, read: 'TAB_STAFF_READ' as const },
+  { name: 'Lab Management', path: '/lab', icon: FlaskConical, read: 'TAB_LAB_READ' as const },
+  { name: 'Billing', path: '/billing', icon: CreditCard, read: 'TAB_BILLING_READ' as const },
+  { name: 'Reports', path: '/reports', icon: FileText, read: 'TAB_REPORTS_READ' as const },
 ];
 
 function Sidebar() {
   const pathname = usePathname();
+  const { currentOrganization } = useAuth();
+
+  const visibleMenu = useMemo(
+    () => menu.filter((item) => canViewTab(currentOrganization, item.read)),
+    [currentOrganization],
+  );
 
   return (
     <aside className="w-64 bg-background-secondary/90 border-r border-border text-text-primary flex flex-col">
@@ -34,7 +42,7 @@ function Sidebar() {
       <div className="mx-4 border-b border-border/70" />
 
       <nav className="flex flex-col gap-2 p-4">
-        {menu.map((item) => {
+        {visibleMenu.map((item) => {
           const Icon = item.icon;
           const isActive = pathname === item.path;