mirror of
http://172.20.10.11:3000/gitadmin/INSIGHT-MVP.git
synced 2026-06-25 01:36:39 +02:00
c739dce161
Komplette CRM-Frontend-Integration in die bestehende React-GUI: - Types, API-Client und React Query Hooks für alle CRM-Entitäten - Kontakte: Liste mit Suche/Filter, Detail mit Aktivitäten-Timeline, Create/Edit Modal - Deals: Liste mit Pipeline/Stage/Status-Filter, Detail mit Fortschrittsbalken, Create/Edit Modal - Pipelines: Verwaltungsseite mit klappbaren Cards und Stage-Management - Aktivitäten: Formular-Modal für Notizen, Anrufe, E-Mails, Meetings, Aufgaben - CRM-Navigation in Sidebar (aufklappbar, mit Inline-SVG-Icons) - Routen in App.tsx für alle CRM-Seiten - Vite-Proxy für lokale CRM-API-Entwicklung Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
123 lines
2.2 KiB
CSS
123 lines
2.2 KiB
CSS
/* ============================================================
|
||
PipelinesPage – Pipeline Cards & Stage Management
|
||
============================================================ */
|
||
|
||
.pipelineCard {
|
||
background: var(--color-bg-card);
|
||
border: 1px solid var(--color-border);
|
||
border-radius: var(--radius-md);
|
||
box-shadow: var(--shadow-sm);
|
||
margin-bottom: 1rem;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.pipelineHeader {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
padding: 1rem 1.25rem;
|
||
cursor: pointer;
|
||
transition: background 0.15s;
|
||
}
|
||
|
||
.pipelineHeader:hover {
|
||
background: var(--color-bg);
|
||
}
|
||
|
||
.pipelineHeaderLeft {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 0.75rem;
|
||
}
|
||
|
||
.pipelineName {
|
||
font-size: 1rem;
|
||
font-weight: 600;
|
||
color: var(--color-text);
|
||
}
|
||
|
||
.stageList {
|
||
border-top: 1px solid var(--color-border);
|
||
padding: 0.75rem 1.25rem;
|
||
}
|
||
|
||
.stageItem {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 0.75rem;
|
||
padding: 0.5rem 0;
|
||
border-bottom: 1px solid var(--color-border);
|
||
}
|
||
|
||
.stageItem:last-child {
|
||
border-bottom: none;
|
||
}
|
||
|
||
.stageColor {
|
||
width: 12px;
|
||
height: 12px;
|
||
border-radius: 50%;
|
||
flex-shrink: 0;
|
||
border: 1px solid var(--color-border);
|
||
}
|
||
|
||
.stageName {
|
||
flex: 1;
|
||
font-size: 0.875rem;
|
||
color: var(--color-text);
|
||
}
|
||
|
||
.stageOrder {
|
||
font-size: 0.75rem;
|
||
color: var(--color-text-muted);
|
||
min-width: 20px;
|
||
text-align: center;
|
||
}
|
||
|
||
.addStageForm {
|
||
display: flex;
|
||
gap: 0.5rem;
|
||
align-items: center;
|
||
padding: 0.75rem 0;
|
||
border-top: 1px solid var(--color-border);
|
||
margin-top: 0.5rem;
|
||
}
|
||
|
||
.addStageInput {
|
||
flex: 1;
|
||
padding: 0.375rem 0.625rem;
|
||
border: 1px solid var(--color-border);
|
||
border-radius: var(--radius-sm);
|
||
font-size: 0.875rem;
|
||
outline: none;
|
||
background: var(--color-bg);
|
||
color: var(--color-text);
|
||
}
|
||
|
||
.addStageInput:focus {
|
||
border-color: var(--color-primary);
|
||
}
|
||
|
||
.colorInput {
|
||
width: 32px;
|
||
height: 32px;
|
||
padding: 0;
|
||
border: 1px solid var(--color-border);
|
||
border-radius: var(--radius-sm);
|
||
cursor: pointer;
|
||
background: none;
|
||
}
|
||
|
||
.newPipelineForm {
|
||
background: var(--color-bg-card);
|
||
border: 2px dashed var(--color-border);
|
||
border-radius: var(--radius-md);
|
||
padding: 1.25rem;
|
||
margin-bottom: 1rem;
|
||
}
|
||
|
||
.newPipelineRow {
|
||
display: flex;
|
||
gap: 0.75rem;
|
||
align-items: end;
|
||
}
|