liqa/client/src/pages/credential/CredentialsPage.tsx

import { useEffect, useState } from 'react';
import { useNavigate } from 'react-router-dom';
import { useTranslation } from 'react-i18next';
import { Settings, Pencil, Trash2, Plus } from 'lucide-react';
import { credentials } from '../../api';
import type { Credential } from '../../api';
import { Breadcrumbs, Button, Card, ContextMenu, DescriptionList, Timestamp } from '../../ui';
import styles from '../Page.module.css';

function CredentialCard({
  credential,
  onDelete,
}: {
  credential: Credential;
  onDelete: (id: number) => void;
}) {
  const { t } = useTranslation();
  const navigate = useNavigate();

  const header = (
    <div className={styles.envCardHeader}>
      <span className={styles.envCardName}>{credential.name}</span>
      <div onClick={(e) => e.stopPropagation()}>
        <ContextMenu
          align="right"
          trigger={
            <Button variant="ghost" size="sm" aria-label={t('credentials.menu_label')}>
              <Settings size={14} />
            </Button>
          }
          items={[
            {
              label: t('credentials.action_edit'),
              icon: <Pencil size={14} />,
              onClick: () => navigate(`/credentials/${credential.id}/edit`),
            },
            {
              label: t('credentials.action_delete'),
              icon: <Trash2 size={14} />,
              variant: 'danger',
              onClick: () => onDelete(credential.id),
            },
          ]}
        />
      </div>
    </div>
  );

  const footer = (
    <div className={styles.envCardFooter}>
      <span className={styles.envCardId}>#{credential.id}</span>
      <Timestamp value={credential.updatedAt} />
    </div>
  );

  return (
    <Card
      className={styles.envCard}
      header={header}
      headerVariant="primary"
      footer={footer}
      onClick={() => navigate(`/credentials/${credential.id}`)}
    >
      <DescriptionList
        layout="compact"
        truncate
        items={[
          {
            term: t('credentials.field_last_used'),
            detail: credential.lastUsedAt ? <Timestamp value={credential.lastUsedAt} /> : '—',
          },
        ]}
      />
    </Card>
  );
}

function AddCredentialCard() {
  const { t } = useTranslation();
  const navigate = useNavigate();
  return (
    <div className={styles.envCardAdd}>
      <Button variant="ghost" onClick={() => navigate('/credentials/new')}>
        <Plus size={16} />
        {t('credentials.action_add')}
      </Button>
    </div>
  );
}

export function CredentialsPage() {
  const { t } = useTranslation();
  const [items, setItems] = useState<Credential[]>([]);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState<string | null>(null);

  const load = () => {
    credentials
      .list()
      .then((res) => setItems(res.data))
      .catch((err: Error) => setError(err.message))
      .finally(() => setLoading(false));
  };

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

  const handleDelete = async (id: number) => {
    await credentials.remove(id);
    setItems((prev) => prev.filter((c) => c.id !== id));
  };

  return (
    <div>
      <Breadcrumbs items={[{ label: t('credentials.title') }]} className={styles.breadcrumbs} />
      {error && <p className={styles.error}>{error}</p>}
      {loading ? (
        <p className={styles.muted}>{t('credentials.loading')}</p>
      ) : (
        <div className={styles.envGrid}>
          {items.map((credential) => (
            <CredentialCard key={credential.id} credential={credential} onDelete={handleDelete} />
          ))}
          <AddCredentialCard />
        </div>
      )}
    </div>
  );
}