@nice2dev/ui-printing 1.0.28

package/src/print-queue/NicePrintQueue.tsx

@@ -0,0 +1,350 @@
+import React, { useState, useCallback } from 'react';
+
+import type { PrintJob, PrinterInfo, NicePrintQueueProps } from '../types/printingTypes';
+
+import styles from './PrintQueue.module.css';
+
+// ── Helpers ───────────────────────────────────────────────────────────────────
+const STATUS_LABELS: Record<string, string> = {
+  queued: 'Kolejka',
+  printing: 'Drukowanie',
+  done: 'Wydrukowano',
+  error: 'Błąd',
+  paused: 'Wstrzymano',
+  cancelled: 'Anulowano',
+};
+
+function formatTime(iso: string): string {
+  try {
+    const d = new Date(iso);
+    return d.toLocaleTimeString('pl-PL', { hour: '2-digit', minute: '2-digit' });
+  } catch {
+    return iso;
+  }
+}
+
+function formatDuration(startIso: string): string {
+  const diff = Date.now() - new Date(startIso).getTime();
+  const s = Math.floor(diff / 1000);
+  if (s < 60) {
+    return `${s}s`;
+  }
+  const m = Math.floor(s / 60);
+  return `${m}m ${s % 60}s`;
+}
+
+// ── Stats bar ─────────────────────────────────────────────────────────────────
+interface StatsBarProps {
+  jobs: PrintJob[];
+}
+const StatsBar: React.FC<StatsBarProps> = ({ jobs }) => {
+  const printing = jobs.filter((j) => j.status === 'printing').length;
+  const queued = jobs.filter((j) => j.status === 'queued').length;
+  const done = jobs.filter((j) => j.status === 'done').length;
+  const errored = jobs.filter((j) => j.status === 'error').length;
+  return (
+    <div className={styles.statsBar}>
+      <span className={`${styles.stat} ${styles.statPrinting}`}>
+        <span className={styles.dot} />
+        Drukuje: <strong>{printing}</strong>
+      </span>
+      <span className={`${styles.stat} ${styles.statQueued}`}>
+        <span className={styles.dot} />W kolejce: <strong>{queued}</strong>
+      </span>
+      <span className={`${styles.stat} ${styles.statDone}`}>
+        <span className={styles.dot} />
+        Gotowe: <strong>{done}</strong>
+      </span>
+      {errored > 0 && (
+        <span className={`${styles.stat} ${styles.statError}`}>
+          <span className={styles.dot} />
+          Błędy: <strong>{errored}</strong>
+        </span>
+      )}
+    </div>
+  );
+};
+
+// ── Job row ───────────────────────────────────────────────────────────────────
+interface JobRowProps {
+  job: PrintJob;
+  index: number;
+  total: number;
+  printers: PrinterInfo[];
+  selected: boolean;
+  onSelect: (id: string) => void;
+  onUpdate: (id: string, patch: Partial<PrintJob>) => void;
+  onRemove: (id: string) => void;
+  onPrint: (id: string) => void;
+  onReorder: (fromIdx: number, toIdx: number) => void;
+}
+const JobRow: React.FC<JobRowProps> = ({
+  job,
+  index,
+  total,
+  printers,
+  selected,
+  onSelect,
+  onUpdate,
+  onRemove,
+  onPrint,
+  onReorder,
+}) => {
+  const printer = printers.find((p) => p.id === job.options.printerId);
+  const canMoveUp = index > 0 && job.status === 'queued';
+  const canMoveDown = index < total - 1 && job.status === 'queued';
+
+  return (
+    <div
+      className={`${styles.jobRow} ${selected ? styles.jobRowSelected : ''} ${styles[`status-${job.status}`] ?? ''}`}
+    >
+      {/* Checkbox select */}
+      <input
+        type="checkbox"
+        className={styles.jobCheckbox}
+        checked={selected}
+        onChange={() => onSelect(job.id)}
+      />
+
+      {/* Status badge */}
+      <span className={`${styles.statusBadge} ${styles[`badge-${job.status}`]}`}>
+        {STATUS_LABELS[job.status] ?? job.status}
+      </span>
+
+      {/* Job info */}
+      <div className={styles.jobInfo}>
+        <div className={styles.jobName}>{job.templateName ?? job.templateId}</div>
+        <div className={styles.jobMeta}>
+          {job.entityLabel && <span>{job.entityLabel}</span>}
+          {printer && <span>🖨 {printer.name}</span>}
+          <span>×{job.options.copies}</span>
+          {job.createdAt && <span className={styles.jobTime}>{formatTime(job.createdAt)}</span>}
+          {job.startedAt && job.status !== 'done' && (
+            <span className={styles.jobDuration}>{formatDuration(job.startedAt)}</span>
+          )}
+        </div>
+        {/* Progress bar */}
+        {job.status === 'printing' && job.progress != null && (
+          <div className={styles.progressBar}>
+            <div className={styles.progressFill} style={{ width: `${job.progress}%` }} />
+          </div>
+        )}
+        {/* Error message */}
+        {job.status === 'error' && job.errorMessage && (
+          <div className={styles.jobError}>{job.errorMessage}</div>
+        )}
+      </div>
+
+      {/* Copies editor */}
+      <div className={styles.copiesEditor}>
+        <button
+          className={styles.copiesBtn}
+          disabled={job.options.copies <= 1}
+          onClick={() =>
+            onUpdate(job.id, { options: { ...job.options, copies: job.options.copies - 1 } })
+          }
+        >
+          −
+        </button>
+        <span className={styles.copiesValue}>{job.options.copies}</span>
+        <button
+          className={styles.copiesBtn}
+          onClick={() =>
+            onUpdate(job.id, { options: { ...job.options, copies: job.options.copies + 1 } })
+          }
+        >
+          +
+        </button>
+      </div>
+
+      {/* Actions */}
+      <div className={styles.jobActions}>
+        {canMoveUp && (
+          <button
+            className={styles.actionBtn}
+            title="Przesuń wyżej"
+            onClick={() => onReorder(index, index - 1)}
+          >
+            ↑
+          </button>
+        )}
+        {canMoveDown && (
+          <button
+            className={styles.actionBtn}
+            title="Przesuń niżej"
+            onClick={() => onReorder(index, index + 1)}
+          >
+            ↓
+          </button>
+        )}
+        {job.status === 'queued' && (
+          <button className={styles.actionBtn} title="Drukuj teraz" onClick={() => onPrint(job.id)}>
+            ▶
+          </button>
+        )}
+        {job.status === 'printing' && (
+          <button
+            className={styles.actionBtn}
+            title="Wstrzymaj"
+            onClick={() => onUpdate(job.id, { status: 'paused' })}
+          >
+            ⏸
+          </button>
+        )}
+        {job.status === 'paused' && (
+          <button
+            className={styles.actionBtn}
+            title="Wznów"
+            onClick={() => onUpdate(job.id, { status: 'queued' })}
+          >
+            ▶
+          </button>
+        )}
+        <button
+          className={`${styles.actionBtn} ${styles.removeBtn}`}
+          title="Usuń"
+          onClick={() => onRemove(job.id)}
+        >
+          ✕
+        </button>
+      </div>
+    </div>
+  );
+};
+
+// ── Main component ────────────────────────────────────────────────────────────
+export const NicePrintQueue: React.FC<NicePrintQueueProps> = ({
+  jobs,
+  printers = [],
+  onJobUpdate,
+  onJobRemove,
+  onJobReorder,
+  onJobPrint,
+  onBulkRemove,
+  onBulkPrint,
+  maxHeight = 500,
+  className,
+  style,
+  theme = 'light',
+}) => {
+  const [selectedIds, setSelectedIds] = useState<Set<string>>(new Set());
+  const [filter, setFilter] = useState<'all' | 'queued' | 'printing' | 'done' | 'error'>('all');
+
+  const filteredJobs = filter === 'all' ? jobs : jobs.filter((j) => j.status === filter);
+
+  const toggleSelect = useCallback((id: string) => {
+    setSelectedIds((prev) => {
+      const next = new Set(prev);
+      if (next.has(id)) {
+        next.delete(id);
+      } else {
+        next.add(id);
+      }
+      return next;
+    });
+  }, []);
+
+  const selectAll = useCallback(() => {
+    if (selectedIds.size === filteredJobs.length) {
+      setSelectedIds(new Set());
+    } else {
+      setSelectedIds(new Set(filteredJobs.map((j) => j.id)));
+    }
+  }, [filteredJobs, selectedIds.size]);
+
+  const bulkRemove = useCallback(() => {
+    onBulkRemove?.(Array.from(selectedIds));
+    setSelectedIds(new Set());
+  }, [selectedIds, onBulkRemove]);
+
+  const bulkPrint = useCallback(() => {
+    onBulkPrint?.(Array.from(selectedIds));
+    setSelectedIds(new Set());
+  }, [selectedIds, onBulkPrint]);
+
+  return (
+    <div
+      className={`${styles.root} ${theme === 'dark' ? styles.dark : ''} ${className ?? ''}`}
+      style={style}
+    >
+      {/* Stats */}
+      <StatsBar jobs={jobs} />
+
+      {/* Toolbar */}
+      <div className={styles.toolbar}>
+        {/* Filter tabs */}
+        <div className={styles.filterTabs}>
+          {(['all', 'queued', 'printing', 'done', 'error'] as const).map((f) => (
+            <button
+              key={f}
+              className={`${styles.filterTab} ${filter === f ? styles.filterTabActive : ''}`}
+              onClick={() => setFilter(f)}
+            >
+              {f === 'all' ? 'Wszystkie' : STATUS_LABELS[f]}
+              <span className={styles.filterCount}>
+                {f === 'all' ? jobs.length : jobs.filter((j) => j.status === f).length}
+              </span>
+            </button>
+          ))}
+        </div>
+
+        {/* Bulk actions */}
+        {selectedIds.size > 0 && (
+          <div className={styles.bulkActions}>
+            <span className={styles.bulkCount}>{selectedIds.size} zaznaczonych</span>
+            {onBulkPrint && (
+              <button className={styles.bulkBtn} onClick={bulkPrint}>
+                ▶ Drukuj wybrane
+              </button>
+            )}
+            {onBulkRemove && (
+              <button className={`${styles.bulkBtn} ${styles.bulkBtnRemove}`} onClick={bulkRemove}>
+                ✕ Usuń wybrane
+              </button>
+            )}
+          </div>
+        )}
+      </div>
+
+      {/* Job list */}
+      <div className={styles.jobList} style={{ maxHeight }}>
+        {filteredJobs.length === 0 ? (
+          <div className={styles.emptyState}>
+            {filter === 'all'
+              ? 'Brak zadań w kolejce'
+              : `Brak zadań ze statusem "${STATUS_LABELS[filter]}"`}
+          </div>
+        ) : (
+          <>
+            {/* Select-all header */}
+            <div className={styles.listHeader}>
+              <input
+                type="checkbox"
+                onChange={selectAll}
+                checked={selectedIds.size === filteredJobs.length && filteredJobs.length > 0}
+              />
+              <span className={styles.headerLabel}>Zadanie</span>
+              <span className={styles.headerLabel}>Kopie</span>
+              <span className={styles.headerLabel}>Akcje</span>
+            </div>
+            {filteredJobs.map((job, _index) => (
+              <JobRow
+                key={job.id}
+                job={job}
+                index={jobs.indexOf(job)}
+                total={jobs.length}
+                printers={printers}
+                selected={selectedIds.has(job.id)}
+                onSelect={toggleSelect}
+                onUpdate={onJobUpdate}
+                onRemove={onJobRemove}
+                onPrint={onJobPrint}
+                onReorder={onJobReorder}
+              />
+            ))}
+          </>
+        )}
+      </div>
+    </div>
+  );
+};

package/src/print-queue/PrintQueue.module.css

@@ -0,0 +1,203 @@
+.root {
+  display: flex;
+  flex-direction: column;
+  background: var(--nice-bg, #FFF);
+  border: 1px solid var(--nice-border, #e2e8f0);
+  border-radius: var(--nice-radius-xl, 12px);
+  overflow: hidden;
+  font-family: system-ui, sans-serif;
+  font-size: 14px;
+  color: var(--nice-text, #1e293b);
+}
+.dark { background: var(--nice-text, #1e293b); border-color: var(--nice-text, #334155); color: var(--nice-bg-secondary, #f1f5f9); }
+
+/* Stats bar */
+.statsBar {
+  display: flex;
+  align-items: center;
+  gap: var(--nice-space-5, 20px);
+  padding: var(--nice-space-2-5, 10px) var(--nice-space-4, 16px);
+  background: var(--nice-bg-secondary, #f8fafc);
+  border-bottom: 1px solid var(--nice-border, #e2e8f0);
+}
+.dark .statsBar { background: var(--nice-text, #0f172a); border-color: var(--nice-text, #334155); }
+
+.stat { display: flex; align-items: center; gap: var(--nice-space-1-5, 6px); font-size: 13px; }
+.dot { width: 8px; height: 8px; border-radius: var(--nice-radius-full, 50%); display: inline-block; }
+.statPrinting .dot { background: var(--nice-primary-hover, #2563eb); }
+.statQueued .dot { background: var(--nice-text-secondary, #64748b); }
+.statDone .dot { background: var(--nice-success-dark, #16a34a); }
+.statError .dot { background: var(--nice-danger-dark, #dc2626); }
+
+/* Toolbar */
+.toolbar {
+  display: flex;
+  align-items: center;
+  gap: var(--nice-space-3, 12px);
+  padding: var(--nice-space-2, 8px) var(--nice-space-4, 16px);
+  border-bottom: 1px solid var(--nice-border, #e2e8f0);
+  flex-wrap: wrap;
+}
+.dark .toolbar { border-color: var(--nice-text, #334155); }
+
+.filterTabs { display: flex; gap: var(--nice-space-1, 4px); }
+.filterTab {
+  display: flex; align-items: center; gap: var(--nice-space-1-25, 5px);
+  padding: var(--nice-space-1, 4px) var(--nice-space-2-5, 10px);
+  background: none;
+  border: 1px solid var(--nice-border, #e2e8f0);
+  border-radius: var(--nice-radius-md, 6px);
+  cursor: pointer;
+  font-size: 12px;
+  color: var(--nice-text-secondary, #475569);
+}
+.filterTab:hover { background: var(--nice-bg-secondary, #f1f5f9); }
+.filterTabActive { background: var(--nice-primary-bg, #eff6ff); border-color: var(--nice-primary-hover, #2563eb); color: var(--nice-primary-hover, #2563eb); }
+.filterCount {
+  background: var(--nice-bg-secondary, #f1f5f9); padding: var(--nice-space-px, 1px) var(--nice-space-1-25, 5px); border-radius: var(--nice-radius-lg, 8px);
+  font-size: 11px; color: var(--nice-text-secondary, #64748b);
+}
+.filterTabActive .filterCount { background: var(--nice-primary-bg, #dbeafe); color: var(--nice-primary-hover, #2563eb); }
+
+.bulkActions { display: flex; align-items: center; gap: var(--nice-space-2, 8px); margin-left: auto; }
+.bulkCount { font-size: 13px; color: var(--nice-text-secondary, #64748b); }
+.bulkBtn {
+  padding: var(--nice-space-1, 4px) var(--nice-space-2-5, 10px);
+  border-radius: var(--nice-radius-md, 6px);
+  border: 1px solid var(--nice-border, #e2e8f0);
+  cursor: pointer;
+  font-size: 12px;
+  background: var(--nice-bg, #FFF);
+  color: var(--nice-text, #1e293b);
+}
+.bulkBtn:hover { background: var(--nice-bg-secondary, #f1f5f9); }
+.bulkBtnRemove { color: var(--nice-danger-dark, #dc2626); border-color: var(--nice-danger-bg, #fecaca); }
+.bulkBtnRemove:hover { background: var(--nice-danger-bg, #fef2f2); }
+
+/* Job list */
+.jobList { overflow-y: auto; }
+
+.listHeader {
+  display: grid;
+  grid-template-columns: 40px 1fr min-content min-content;
+  align-items: center;
+  gap: var(--nice-space-3, 12px);
+  padding: var(--nice-space-2, 8px) var(--nice-space-4, 16px);
+  font-size: 12px;
+  font-weight: 600;
+  color: var(--nice-text-muted, #94a3b8);
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  border-bottom: 1px solid var(--nice-bg-secondary, #f1f5f9);
+}
+.dark .listHeader { border-color: var(--nice-text, #1e293b); }
+.headerLabel { white-space: nowrap; }
+
+/* Job row */
+.jobRow {
+  display: grid;
+  grid-template-columns: 40px auto 1fr min-content min-content;
+  align-items: center;
+  gap: var(--nice-space-3, 12px);
+  padding: var(--nice-space-2-5, 10px) var(--nice-space-4, 16px);
+  border-bottom: 1px solid var(--nice-bg-secondary, #f1f5f9);
+  transition: background 0.1s;
+}
+.dark .jobRow { border-color: var(--nice-text, #334155); }
+.jobRow:hover { background: var(--nice-bg-secondary, #f8fafc); }
+.dark .jobRow:hover { background: var(--nice-text, #0f172a); }
+.jobRowSelected { background: var(--nice-primary-bg, #eff6ff) !important; }
+.dark .jobRowSelected { background: #172554 !important; }
+
+.jobCheckbox { cursor: pointer; width: 16px; height: 16px; }
+
+/* Status badges */
+.statusBadge {
+  display: inline-flex;
+  align-items: center;
+  padding: var(--nice-space-0-75, 3px) var(--nice-space-2, 8px);
+  border-radius: var(--nice-radius-xl, 12px);
+  font-size: 11px;
+  font-weight: 500;
+  white-space: nowrap;
+}
+.badge-queued { background: var(--nice-bg-secondary, #f1f5f9); color: var(--nice-text-secondary, #64748b); }
+.badge-printing { background: var(--nice-primary-bg, #dbeafe); color: var(--nice-primary-dark, #1d4ed8); animation: pulse 1.5s ease-in-out infinite; }
+.badge-done { background: var(--nice-success-bg, #dcfce7); color: var(--nice-success-dark, #16a34a); }
+.badge-error { background: var(--nice-danger-bg, #fee2e2); color: var(--nice-danger-dark, #dc2626); }
+.badge-paused { background: var(--nice-warning-bg, #fef9c3); color: var(--nice-warning-dark, #854d0e); }
+.badge-cancelled { background: var(--nice-bg-secondary, #f1f5f9); color: var(--nice-text-muted, #94a3b8); }
+
+@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.7; } }
+
+/* Job info */
+.jobInfo { min-width: 0; }
+.jobName { font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+.jobMeta {
+  display: flex; align-items: center; gap: var(--nice-space-2, 8px);
+  font-size: 12px; color: var(--nice-text-muted, #94a3b8);
+  margin-top: var(--nice-space-0-5, 2px);
+}
+.jobTime { color: var(--nice-text-secondary, #64748b); }
+.jobDuration { color: var(--nice-warning, #f59e0b); }
+.jobError { font-size: 12px; color: var(--nice-danger-dark, #dc2626); margin-top: var(--nice-space-1, 4px); }
+
+/* Progress bar */
+.progressBar {
+  height: 3px;
+  background: var(--nice-border, #e2e8f0);
+  border-radius: var(--nice-radius-sm, 2px);
+  margin-top: var(--nice-space-1-5, 6px);
+  overflow: hidden;
+}
+.progressFill {
+  height: 100%;
+  background: var(--nice-primary-hover, #2563eb);
+  border-radius: var(--nice-radius-sm, 2px);
+  transition: width 0.3s;
+}
+
+/* Copies editor */
+.copiesEditor {
+  display: flex;
+  align-items: center;
+  gap: var(--nice-space-1-5, 6px);
+  white-space: nowrap;
+}
+.copiesBtn {
+  width: 22px; height: 22px;
+  display: flex; align-items: center; justify-content: center;
+  background: var(--nice-bg-secondary, #f8fafc);
+  border: 1px solid var(--nice-border, #e2e8f0);
+  border-radius: var(--nice-radius-sm, 4px);
+  cursor: pointer;
+  font-size: 14px;
+  color: var(--nice-text-secondary, #475569);
+}
+.copiesBtn:disabled { opacity: 0.4; cursor: default; }
+.copiesBtn:not(:disabled):hover { background: var(--nice-border, #e2e8f0); }
+.copiesValue { min-width: 20px; text-align: center; font-size: 13px; }
+
+/* Actions */
+.jobActions { display: flex; align-items: center; gap: var(--nice-space-1, 4px); }
+.actionBtn {
+  width: 28px; height: 28px;
+  display: flex; align-items: center; justify-content: center;
+  background: none;
+  border: 1px solid var(--nice-border, #e2e8f0);
+  border-radius: var(--nice-radius-md, 6px);
+  cursor: pointer;
+  font-size: 13px;
+  color: var(--nice-text-secondary, #475569);
+}
+.actionBtn:hover { background: var(--nice-bg-secondary, #f1f5f9); }
+.removeBtn { color: var(--nice-danger, #ef4444); border-color: var(--nice-danger-bg, #fecaca); }
+.removeBtn:hover { background: var(--nice-danger-bg, #fef2f2); }
+
+/* Empty state */
+.emptyState {
+  text-align: center;
+  padding: var(--nice-space-10, 40px) var(--nice-space-6, 24px);
+  color: var(--nice-text-muted, #94a3b8);
+  font-size: 14px;
+}

package/src/print-queue/index.ts

@@ -0,0 +1 @@
+export { NicePrintQueue } from './NicePrintQueue';