Function bodies 152 total

function getHomePath(user) {
  if (!user) return '/login';
  // Admins and managers always land on the dashboard
  if (user.role === 'admin' || user.role === 'manager') return '/admin';
  switch (user.onboarding_status) {
    case 'applied':
    case 'interviewing':
      return '/application-status';
    // Completed onboarding → staff portal
    case 'submitted':
    case 'reviewed':
    case 'approved':
      return '/portal';
    // Actively going through onboarding
    case 'hired':
      return '/welcome';
    case 'in_progress':
    default:
      return user.has_application ? '/application-status' : '/apply';
  }
}

function ProtectedRoute({ children, adminOnly = false }) {
  const { user, loading } = useAuth();
  if (loading) return <div className="loading"><div className="spinner" />Loading...</div>;
  if (!user) return <Navigate to="/login" replace />;
  if (adminOnly && user.role !== 'admin' && user.role !== 'manager') {
    return <Navigate to={getHomePath(user)} replace />;
  }
  return children;
}

function RedirectIfLoggedIn({ children }) {
  const { user, loading } = useAuth();
  if (loading) return <div className="loading"><div className="spinner" />Loading...</div>;
  if (user) return <Navigate to={getHomePath(user)} replace />;
  return children;
}

function RequireHired({ children }) {
  const { user, loading } = useAuth();
  if (loading) return <div className="loading"><div className="spinner" />Loading...</div>;
  if (!user) return <Navigate to="/login" replace />;
  const allowed = ['hired', 'in_progress', 'submitted', 'reviewed', 'approved'];
  if (!allowed.includes(user.onboarding_status)) {
    return <Navigate to={getHomePath(user)} replace />;
  }
  return children;
}

function RequirePortal({ children }) {
  const { user, loading } = useAuth();
  if (loading) return <div className="loading"><div className="spinner" />Loading...</div>;
  if (!user) return <Navigate to="/login" replace />;
  const allowed = ['submitted', 'reviewed', 'approved'];
  if (!allowed.includes(user.onboarding_status)) {
    return <Navigate to={getHomePath(user)} replace />;
  }
  return children;
}

function ApiAuthSetup({ children }) {
  const navigate = useNavigate();
  useEffect(() => {
    api.setOnUnauthorized((path) => navigate(path, { replace: true }));
    return () => api.setOnUnauthorized(null);
  }, [navigate]);
  return children;
}

function AppRoutes() {
  return (
    <Routes>
      <Route path="/" element={<Navigate to="/register" replace />} />
      {/* Public pages (no auth) */}
      <Route path="/plan/:token" element={<PotionPlanningLab />} />
      <Route path="/proposal/:token" element={<ProposalView />} />

      <Route path="/register" element={<RedirectIfLoggedIn><Register /></RedirectIfLoggedIn>} />
      <Route path="/login" element={<RedirectIfLoggedIn><Login /></RedirectIfLoggedIn>} />

      {/* Application flow (logged in, not yet hired) */}
      <Route path="/apply" element={<ProtectedRoute><Application /></ProtectedRoute>} />
      <Route path="/application-status" element={<ProtectedRoute><ApplicationStatus /></ProtectedRoute>} />

      {/* Onboarding flow (must be hired or further along) */}
      <Route element={<RequireHired><Layout /></RequireHired>}>
        <Route path="/welcome" element={<Welcome />} />
        <Route path="/field-guide" element={<FieldGuide />} />
        <Route pat

export default function App() {
  return (
    <ErrorBoundary>
      <BrowserRouter>
        <AuthProvider>
          <ApiAuthSetup>
            <AppRoutes />
          </ApiAuthSetup>
        </AuthProvider>
      </BrowserRouter>
    </ErrorBoundary>
  );
}

export default function AdminLayout() {
  const { user, logout } = useAuth();
  const navigate = useNavigate();
  const [sidebarOpen, setSidebarOpen] = useState(false);

  const handleLogout = () => { logout(); navigate('/login'); };

  return (
    <div className="admin-page" style={{ minHeight: '100vh' }}>
      {/* ── Shared Header ── */}
      <header className="site-header">
        <div style={{ display: 'flex', alignItems: 'center', gap: '0.75rem' }}>
          <button
            className="admin-sidebar-toggle"
            onClick={() => setSidebarOpen(o => !o)}
            aria-label="Toggle sidebar"
          >
            ☰
          </button>
          <BrandLogo admin />
        </div>
        <div className="header-actions">
          <span className="header-user">{user?.email}</span>
          <button className="btn btn-secondary btn-sm" onClick={handleLogout}>Sign Out</button>
        </div>
      </header>

      {/* ── Shell: Sidebar + Content ── */}
      <div class

export default function BrandLogo({ admin = false }) {
  const [missingLogo, setMissingLogo] = useState(false);

  return (
    <div className="site-brand">
      <div className="site-logo-mark" aria-hidden>
        {!missingLogo ? (
          <img
            src="/images/logo.png"
            alt=""
            onError={() => setMissingLogo(true)}
          />
        ) : (
          'DB'
        )}
      </div>
      <div className="site-logo">
        Dr. <span>Bartender</span>
        {admin && <span className="site-admin-tag">Admin</span>}
      </div>
    </div>
  );
}

export default class ErrorBoundary extends React.Component {
  constructor(props) {
    super(props);
    this.state = { hasError: false };
  }

  static getDerivedStateFromError() {
    return { hasError: true };
  }

  componentDidCatch(error, info) {
    console.error('ErrorBoundary caught:', error, info);
  }

  render() {
    if (this.state.hasError) {
      return (
        <div className="page-container" style={{ padding: '3rem 1rem', textAlign: 'center' }}>
          <div className="card" style={{ maxWidth: 480, margin: '0 auto' }}>
            <h2 style={{ marginBottom: '0.75rem' }}>Something went wrong</h2>
            <p className="text-muted" style={{ marginBottom: '1.5rem' }}>
              We hit an unexpected error. You can try reloading the page.
            </p>
            <button
              type="button"
              className="btn btn-primary"
              onClick={() => window.location.reload()}
            >
              Reload page
            </button>
   

  constructor(props) {
    super(props);
    this.state = { hasError: false };
  }

  static getDerivedStateFromError() {
    return { hasError: true };
  }

  componentDidCatch(error, info) {
    console.error('ErrorBoundary caught:', error, info);
  }

  render() {
    if (this.state.hasError) {
      return (
        <div className="page-container" style={{ padding: '3rem 1rem', textAlign: 'center' }}>
          <div className="card" style={{ maxWidth: 480, margin: '0 auto' }}>
            <h2 style={{ marginBottom: '0.75rem' }}>Something went wrong</h2>
            <p className="text-muted" style={{ marginBottom: '1.5rem' }}>
              We hit an unexpected error. You can try reloading the page.
            </p>
            <button
              type="button"
              className="btn btn-primary"
              onClick={() => window.location.reload()}
            >
              Reload page
            </button>
          </div>
        </div>
      );
    }
    return this.props.children;
  }

export default function FileUpload({ label, name, accept, helper, onChange, currentFile, camera }) {
  const inputId = useId();
  const cameraInputId = useId();

  function handleChange(e) {
    const file = e.target.files[0];
    if (file) onChange(name, file);
  }

  // Camera mode with no file yet: show two distinct picker buttons
  if (camera && !currentFile) {
    return (
      <div className="form-group">
        <label className="form-label">{label}</label>
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '0.75rem' }}>
          <label htmlFor={cameraInputId} style={{ cursor: 'pointer', display: 'block' }}>
            <div className="file-upload-area" style={{ textAlign: 'center', padding: '1.25rem 1rem' }}>
              <span className="file-upload-icon" aria-hidden>📷</span>
              <div className="file-upload-text" style={{ fontWeight: 600 }}>Take Photo</div>
              <div className="file-upload-text" style={{ fontSize: '0.75rem', margi

  function handleChange(e) {
    const file = e.target.files[0];
    if (file) onChange(name, file);
  }

export default function Layout() {
  const { user, logout } = useAuth();
  const navigate = useNavigate();
  const location = useLocation();
  const [progress, setProgress] = useState({});

  useEffect(() => {
    api.get('/progress').then(r => setProgress(r.data)).catch(() => {});
  }, [location.pathname]);

  const currentStepIndex = PATH_TO_STEP[location.pathname] ?? 0;

  function getStepStatus(index) {
    const step = STEPS[index];
    if (progress[step.key]) return 'completed';
    if (index === currentStepIndex) return 'active';
    return 'pending';
  }

  const completedCount = STEPS.filter((s, i) => progress[s.key]).length;
  const pct = Math.round((completedCount / STEPS.length) * 100);

  return (
    <>
      <header className="site-header">
        <BrandLogo />
        <div className="header-actions">
          <span className="header-user">{user?.email}</span>
          <button className="btn btn-secondary btn-sm" onClick={() => { logout(); navigate('/login'); }}>
    

  function getStepStatus(index) {
    const step = STEPS[index];
    if (progress[step.key]) return 'completed';
    if (index === currentStepIndex) return 'active';
    return 'pending';
  }

export default function LocationInput({ value, onChange, placeholder = 'Start typing an address...', className = 'form-input' }) {
  const [query, setQuery] = useState(value || '');
  const [suggestions, setSuggestions] = useState([]);
  const [open, setOpen] = useState(false);
  const [activeIdx, setActiveIdx] = useState(-1);
  const debounceRef = useRef(null);
  const containerRef = useRef(null);

  // Keep local query in sync if parent changes value externally
  useEffect(() => { setQuery(value || ''); }, [value]);

  // Close on outside click
  useEffect(() => {
    const handler = (e) => {
      if (containerRef.current && !containerRef.current.contains(e.target)) {
        setOpen(false);
      }
    };
    document.addEventListener('mousedown', handler);
    return () => document.removeEventListener('mousedown', handler);
  }, []);

  const formatAddress = (d) => {
    const a = d.address || {};
    const street = [a.house_number, a.road].filter(Boolean).join(' ');
    const cit

export default function PricingBreakdown({ snapshot, compact = false }) {
  if (!snapshot || !snapshot.breakdown) return null;

  const formatCurrency = (amount) =>
    `$${Number(amount).toLocaleString('en-US', { minimumFractionDigits: 2, maximumFractionDigits: 2 })}`;

  return (
    <div style={{ width: '100%' }}>
      <table style={{ width: '100%', borderCollapse: 'collapse' }}>
        <tbody>
          {snapshot.breakdown.map((item, i) => (
            <tr key={i} style={{ borderBottom: '1px solid var(--cream-dark, #e8e0d4)' }}>
              <td style={{ padding: compact ? '0.4rem 0' : '0.6rem 0', color: 'var(--deep-brown, #3a2218)' }}>
                {item.label}
              </td>
              <td style={{
                padding: compact ? '0.4rem 0' : '0.6rem 0',
                textAlign: 'right',
                fontWeight: 500,
                whiteSpace: 'nowrap',
                color: 'var(--deep-brown, #3a2218)'
              }}>
                {formatCurrency(it

export default function SignaturePad({ onChange, value }) {
  const canvasRef = useRef(null);
  const drawing = useRef(false);
  const hasSignature = useRef(false);

  useEffect(() => {
    const canvas = canvasRef.current;
    if (!canvas) return;
    resizeCanvas();

    // If value exists and canvas is empty, could restore — skip for simplicity
    window.addEventListener('resize', resizeCanvas);
    return () => window.removeEventListener('resize', resizeCanvas);
  }, []);

  function resizeCanvas() {
    const canvas = canvasRef.current;
    if (!canvas) return;
    const rect = canvas.parentElement.getBoundingClientRect();
    canvas.width = rect.width;
    canvas.height = 140;
  }

  function getPos(e) {
    const canvas = canvasRef.current;
    const rect = canvas.getBoundingClientRect();
    const touch = e.touches ? e.touches[0] : e;
    return {
      x: touch.clientX - rect.left,
      y: touch.clientY - rect.top
    };
  }

  function startDraw(e) {
    e.preventDefault();

  function resizeCanvas() {
    const canvas = canvasRef.current;
    if (!canvas) return;
    const rect = canvas.parentElement.getBoundingClientRect();
    canvas.width = rect.width;
    canvas.height = 140;
  }

  function getPos(e) {
    const canvas = canvasRef.current;
    const rect = canvas.getBoundingClientRect();
    const touch = e.touches ? e.touches[0] : e;
    return {
      x: touch.clientX - rect.left,
      y: touch.clientY - rect.top
    };
  }

  function startDraw(e) {
    e.preventDefault();
    drawing.current = true;
    const canvas = canvasRef.current;
    const ctx = canvas.getContext('2d');
    const pos = getPos(e);
    ctx.beginPath();
    ctx.moveTo(pos.x, pos.y);
  }

  function draw(e) {
    e.preventDefault();
    if (!drawing.current) return;
    const canvas = canvasRef.current;
    const ctx = canvas.getContext('2d');
    ctx.lineWidth = 2;
    ctx.lineCap = 'round';
    ctx.strokeStyle = '#1A1410';
    const pos = getPos(e);
    ctx.lineTo(pos.x, pos.y);
    ctx.stroke();
    hasSignature.current = true;
  }

  function stopDraw(e) {
    if (!drawing.current) return;
    drawing.current = false;
    const canvas = canvasRef.current;
    const data = canvas.toDataURL('image/png');
    onChange(data);
  }

  function clear() {
    const canvas = canvasRef.current;
    const ctx = canvas.getContext('2d');
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    hasSignature.current = false;
    onChange('');
  }

export default function W9Form({ onComplete }) {
  const [form, setForm] = useState({
    name: '',
    business_name: '',
    tax_classification: 'Individual/sole proprietor or single-member LLC',
    address: '',
    city: '',
    state: '',
    zip: '',
    ssn1: '',
    ssn2: '',
    ssn3: '',
    ein: '',
    use_ein: false,
    exempt_payee_code: '',
  });
  const [signatureData, setSignatureData] = useState('');
  const [error, setError] = useState('');
  const [sigError, setSigError] = useState('');
  const [generating, setGenerating] = useState(false);

  function handle(e) {
    const { name, value, type, checked } = e.target;
    setForm(f => ({ ...f, [name]: type === 'checkbox' ? checked : value }));
  }

  async function generate() {
    setError('');
    setSigError('');

    if (!form.name.trim()) return setError('Your legal name (as on tax return) is required.');
    if (!form.address.trim() || !form.city.trim() || !form.state || !form.zip.trim()) {
      return setErro

  function handle(e) {
    const { name, value, type, checked } = e.target;
    setForm(f => ({ ...f, [name]: type === 'checkbox' ? checked : value }));
  }

  async function generate() {
    setError('');
    setSigError('');

    if (!form.name.trim()) return setError('Your legal name (as on tax return) is required.');
    if (!form.address.trim() || !form.city.trim() || !form.state || !form.zip.trim()) {
      return setError('Full address is required.');
    }
    if (!form.use_ein) {
      if (!form.ssn1 || !form.ssn2 || !form.ssn3) return setError('Social Security Number is required.');
      if (form.ssn1.length !== 3 || form.ssn2.length !== 2 || form.ssn3.length !== 4) {
        return setError('SSN must be in XXX-XX-XXXX format.');
      }
    } else {
      if (!form.ein.trim()) return setError('Employer Identification Number is required.');
    }
    if (!signatureData) {
      setSigError('Signature is required — please sign the form above.');
      return;
    }

    setGenerating(true);
    try {
      const { jsPDF } = await import('jspdf');
      const doc = new jsPDF({ unit: 'pt', format: 'letter' });

      const ML = 42;

      function box(lineNum, labelText, valueText, x, bY, bW, bH) {
        doc.setDrawColor(160, 160, 160);
        doc.rect(x, bY, bW, bH);
        doc.setFontSize(7);
        doc.setTextColor(90, 90, 90);
        doc.text(`${lineNum}  ${labelText}`, x + 3, bY + 10);
        doc.setFontSize(10.5);
        doc.setTextColor(0, 0, 0);
        if (valueText) doc.text(valueText, x + 5, bY + bH - 8, { maxWidth: bW - 10 });
      }

export function AuthProvider({ children }) {
  const [user, setUser] = useState(null);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    const token = localStorage.getItem('token');
    if (token) {
      api.get('/auth/me')
        .then(res => setUser(res.data.user))
        .catch(() => localStorage.removeItem('token'))
        .finally(() => setLoading(false));
    } else {
      setLoading(false);
    }
  }, []);

  const login = (token, userData) => {
    localStorage.setItem('token', token);
    setUser(userData);
  };

  const logout = () => {
    localStorage.removeItem('token');
    setUser(null);
  };

  return (
    <AuthContext.Provider value={{ user, loading, login, logout }}>
      {children}
    </AuthContext.Provider>
  );
}

function StatusBadge({ status }) {
  const [cls, label] = STATUS_MAP[status] || ['badge-inprogress', status];
  return <span className={`badge ${cls}`}>{label}</span>;
}

function FieldLabel({ children }) {
  return (
    <div style={{ fontSize: '0.68rem', fontWeight: 700, letterSpacing: '0.09em', textTransform: 'uppercase', color: 'var(--warm-brown)', marginBottom: '0.2rem' }}>
      {children}
    </div>
  );
}

function Field({ label, value, long }) {
  return (
    <div style={{ marginBottom: long ? '1rem' : '0.7rem' }}>
      <FieldLabel>{label}</FieldLabel>
      <div style={{ fontSize: '0.9rem', color: 'var(--deep-brown)', lineHeight: long ? 1.65 : 1.4, whiteSpace: long ? 'pre-wrap' : undefined }}>
        {value || <span style={{ color: 'var(--text-muted)', fontStyle: 'italic' }}>Not provided</span>}
      </div>
    </div>
  );
}

function SectionCard({ title, children, style }) {
  return (
    <div className="card" style={style}>
      <h3 style={{ marginBottom: '1.1rem', color: 'var(--deep-brown)', borderBottom: '1px solid var(--border)', paddingBottom: '0.6rem', fontSize: '1rem', letterSpacing: '0.03em' }}>
        {title}
      </h3>
      {children}
    </div>
  );
}

function QuickStat({ label, value, boolVal }) {
  const isYes = boolVal === true  || value === 'yes' || value === 'Yes';
  const isNo  = boolVal === false || value === 'no'  || value === 'No';

  return (
    <div style={{ display: 'flex', flexDirection: 'column', gap: '0.35rem' }}>
      <FieldLabel>{label}</FieldLabel>
      {isYes ? (
        <span style={{ display: 'inline-block', background: '#E8F5E8', color: '#1A6B1A', border: '1px solid #90CC90', borderRadius: '99px', padding: '0.2rem 0.7rem', fontSize: '0.8rem', fontWeight: 700, width: 'fit-content' }}>Yes</span>
      ) : isNo ? (
        <span style={{ display: 'inline-block', background: '#F5F5F5', color: '#666', border: '1px solid #CCC', borderRadius: '99px', padding: '0.2rem 0.7rem', fontSize: '0.8rem', fontWeight: 700, width: 'fit-content' }}>No</span>
      ) : (
        <div style={{ fontSize: '0.9rem', color: 'var(--deep-brown)', fontWeight: 600 }}>{value || '—'}</div>
      )}
    </div>
  );
}

function Avatar({ name, imgUrl, size = 52 }) {
  const [imgFailed, setImgFailed] = useState(false);
  const initials = (name || '?').split(' ').slice(0, 2).map(w => w[0]).join('').toUpperCase();
  return (
    <div style={{
      width: size, height: size, borderRadius: '50%',
      background: 'var(--amber)', display: 'flex', alignItems: 'center', justifyContent: 'center',
      border: '2px solid rgba(212,149,74,0.6)', flexShrink: 0, overflow: 'hidden',
      fontFamily: 'var(--font-display)', fontSize: size * 0.33, color: 'white', fontWeight: 700,
      letterSpacing: '0.05em',
    }}>
      {imgUrl && !imgFailed
        ? <img src={`/api${imgUrl}`} alt={name} style={{ width: '100%', height: '100%', objectFit: 'cover' }} onError={() => setImgFailed(true)} />
        : initials}
    </div>
  );
}

function FileTile({ label, url, filename, onDownload }) {
  const ext = (filename || '').split('.').pop().toLowerCase();
  const isImage = ['jpg', 'jpeg', 'png', 'gif', 'webp', 'heic'].includes(ext);
  const [imgFailed, setImgFailed] = useState(false);
  const [hovered, setHovered] = useState(false);

  const extBadge = {
    display: 'inline-block', padding: '0.15rem 0.45rem', borderRadius: '99px',
    fontSize: '0.62rem', fontWeight: 700, letterSpacing: '0.06em', textTransform: 'uppercase',
    ...(ext === 'pdf'
      ? { background: '#E8F4FF', color: '#1A5C9E', border: '1px solid #A0C8F0' }
      : { background: '#FFF3DC', color: '#8B5E0A', border: '1px solid #E5C97A' }),
  };

  return (
    <div
      onClick={() => onDownload(url, filename)}
      onMouseEnter={() => setHovered(true)}
      onMouseLeave={() => setHovered(false)}
      style={{
        cursor: 'pointer', borderRadius: 'var(--radius)',
        border: `2px solid ${hovered ? 'var(--amber)' : 'var(--border)'}`,
     

export default function AdminApplicationDetail() {
  const { id } = useParams();
  const navigate = useNavigate();
  const [data, setData] = useState(null);
  const [loading, setLoading] = useState(true);
  const [statusLoading, setStatusLoading] = useState(false);
  const [noteText, setNoteText] = useState('');
  const [noteLoading, setNoteLoading] = useState(false);
  const [confirmAction, setConfirmAction] = useState(null);

  useEffect(() => {
    api.get(`/admin/applications/${id}`)
      .then(r => setData(r.data))
      .catch(console.error)
      .finally(() => setLoading(false));
  }, [id]);

  async function updateStatus(newStatus) {
    setConfirmAction(null);
    setStatusLoading(true);
    try {
      await api.put(`/admin/users/${id}/status`, { status: newStatus });
      // Refetch to get fresh data + auto-logged status change note
      const fresh = await api.get(`/admin/applications/${id}`);
      setData(fresh.data);
    } catch (e) { console.error(e); }
    finally 

  async function updateStatus(newStatus) {
    setConfirmAction(null);
    setStatusLoading(true);
    try {
      await api.put(`/admin/users/${id}/status`, { status: newStatus });
      // Refetch to get fresh data + auto-logged status change note
      const fresh = await api.get(`/admin/applications/${id}`);
      setData(fresh.data);
    } catch (e) { console.error(e); }
    finally { setStatusLoading(false); }
  }

  async function addNote() {
    if (!noteText.trim()) return;
    setNoteLoading(true);
    try {
      const r = await api.post(`/admin/applications/${id}/notes`, { note: noteText });
      setData(d => ({ ...d, notes: r.data }));
      setNoteText('');
    } catch (e) { console.error(e); }
    finally { setNoteLoading(false); }
  }

  async function deleteNote(noteId) {
    try {
      await api.delete(`/admin/notes/${noteId}`);
      setData(d => ({ ...d, notes: d.notes.filter(n => n.id !== noteId) }));
    } catch (e) { console.error(e); }
  }

  async function downloadFile(url, filename) {
    try {
      const response = await api.get(url, { responseType: 'blob' });
      const blobUrl = URL.createObjectURL(response.data);
      const link = document.createElement('a');
      link.href = blobUrl;
      link.download = filename;
      link.click();
      URL.revokeObjectURL(blobUrl);
    } catch (e) { console.error('Download failed', e); }
  }

export default function ClientDetail() {
  const { id } = useParams();
  const navigate = useNavigate();
  const [client, setClient] = useState(null);
  const [loading, setLoading] = useState(true);
  const [editing, setEditing] = useState(false);
  const [form, setForm] = useState({});
  const [saving, setSaving] = useState(false);

  useEffect(() => {
    api.get(`/clients/${id}`)
      .then(res => { setClient(res.data); setForm({ name: res.data.name, email: res.data.email || '', phone: res.data.phone || '', source: res.data.source || 'direct', notes: res.data.notes || '' }); })
      .catch(() => navigate('/admin/clients'))
      .finally(() => setLoading(false));
  }, [id, navigate]);

  const handleSave = async () => {
    setSaving(true);
    try {
      const res = await api.put(`/clients/${id}`, form);
      setClient(prev => ({ ...prev, ...res.data }));
      setEditing(false);
    } catch (err) {
      console.error('Failed to update client:', err);
    } finally { setSaving

export default function ClientsDashboard() {
  const navigate = useNavigate();
  const [clients, setClients] = useState([]);
  const [loading, setLoading] = useState(true);
  const [search, setSearch] = useState('');
  const [showCreate, setShowCreate] = useState(false);
  const [creating, setCreating] = useState(false);
  const [form, setForm] = useState({ name: '', email: '', phone: '', source: 'direct' });

  const fetchClients = useCallback(async () => {
    try {
      const params = {};
      if (search) params.search = search;
      const res = await api.get('/clients', { params });
      setClients(res.data);
    } catch (err) {
      console.error('Failed to fetch clients:', err);
    } finally { setLoading(false); }
  }, [search]);

  useEffect(() => { fetchClients(); }, [fetchClients]);

  const handleCreate = async (e) => {
    e.preventDefault();
    if (!form.name.trim()) return;
    setCreating(true);
    try {
      const res = await api.post('/clients', form);
      se

function slugify(str) {
  return str.toLowerCase().replace(/[^a-z0-9]+/g, '-').replace(/(^-|-$)/g, '');
}

function DrinkTable({ drinks, categories, editingId, editForm, onStartEdit, onCancelEdit, onSaveEdit, onToggleActive, onEditFormChange, withSpirit = false, onReorder }) {
  const dragItem = useRef(null);
  const dragOverItem = useRef(null);
  const [dragIndex, setDragIndex] = useState(null);
  const [dragOverIndex, setDragOverIndex] = useState(null);

  const handleDragStart = (e, index) => {
    dragItem.current = index;
    setDragIndex(index);
    e.dataTransfer.effectAllowed = 'move';
  };

  const handleDragEnter = (index) => {
    dragOverItem.current = index;
    setDragOverIndex(index);
  };

  const handleDragEnd = () => {
    const from = dragItem.current;
    const to = dragOverItem.current;
    setDragIndex(null);
    setDragOverIndex(null);
    dragItem.current = null;
    dragOverItem.current = null;
    if (from === null || to === null || from === to) return;
    const reordered = [...drinks];
    const [moved] = reordered.splice(from, 1);
    reordered.splice(to, 0, mov

function CategoryTable({ categories, drinkCounts, editingId, editForm, onStartEdit, onCancelEdit, onSaveEdit, onDelete, onEditFormChange, onReorder }) {
  const dragItem = useRef(null);
  const dragOverItem = useRef(null);
  const [dragIndex, setDragIndex] = useState(null);
  const [dragOverIndex, setDragOverIndex] = useState(null);

  const handleDragStart = (e, index) => {
    dragItem.current = index;
    setDragIndex(index);
    e.dataTransfer.effectAllowed = 'move';
  };

  const handleDragEnter = (index) => {
    dragOverItem.current = index;
    setDragOverIndex(index);
  };

  const handleDragEnd = () => {
    const from = dragItem.current;
    const to = dragOverItem.current;
    setDragIndex(null);
    setDragOverIndex(null);
    dragItem.current = null;
    dragOverItem.current = null;
    if (from === null || to === null || from === to) return;
    const reordered = [...categories];
    const [moved] = reordered.splice(from, 1);
    reordered.splice(to, 0, moved);
    onReo