# Streamlit Kanban Board Component
A powerful, interactive Kanban board component for Streamlit applications, designed for deal pipeline management, project tracking, and workflow visualization. Features drag-and-drop functionality, role-based permissions, business rules engine, smart search filters, and detailed dialogs with source-based styling.
## ✨ Features
### Core Functionality
- **Drag & Drop Interface**: Native HTML5 drag-and-drop with smooth animations
- **Interactive Deal Cards**: Click cards to open detailed dialogs with full Streamlit widget support
- **Customizable Stages**: Define pipeline stages with custom names and colors
- **Source-Based Styling**: Automatic card styling based on data source (VV=blue, OF=orange)
- **Role-Based Permissions**: Control drag/drop access and stage visibility by user role
### Advanced Capabilities
- **Permission System**: Granular control over user actions (drag, approve, reject, edit)
- **Business Rules Engine**: Configurable rules for deal transitions and validations
- **Smart Search Filters**: Real-time search with autocomplete for company names and tenant IDs
- **Visual Feedback**: Dynamic column highlighting and lock icons during drag operations
- **Responsive Design**: Mobile-friendly layout with touch support
- **Custom HTML**: Embed custom HTML content in deal cards
- **Session State Integration**: Seamless integration with Streamlit's session state
### User Experience
- **Smooth Animations**: CSS transitions for professional feel
- **Loading States**: Visual feedback during operations
- **Error Prevention**: Permission validation before allowing actions
- **Accessibility**: Keyboard navigation and screen reader support
- **Smart Dialog Management**: Automatic detection of external dialog closure (ESC/click outside)
## 🚀 Installation
### From PyPI
```bash
pip install streamlit-kanban-board-goviceversa
```
### From Test PyPI (for testing)
```bash
pip install -i https://test.pypi.org/simple/ streamlit-kanban-board-goviceversa
```
### From Source
```bash
git clone https://github.com/goviceversa-com/streamlit_kanban_board.git
cd streamlit_kanban_board
pip install -e .
```
## 🎯 Quick Start
### Basic Usage
```python
import streamlit as st
from streamlit_kanban_board_goviceversa import kanban_board
# Define your pipeline stages
stages = [
{"id": "todo", "name": "To Do", "color": "#3498db"},
{"id": "in_progress", "name": "In Progress", "color": "#f39c12"},
{"id": "done", "name": "Done", "color": "#27ae60"}
]
# Define your deals/items
deals = [
{
"id": "deal_001",
"stage": "todo",
"deal_id": "D-2024-001",
"company_name": "Acme Corp",
"product_type": "Term Loan",
"date": "2024-01-15",
"underwriter": "John Smith",
"source": "VV"
}
]
# Display the kanban board
result = kanban_board(
stages=stages,
deals=deals,
key="my_kanban_board"
)
# Handle interactions
if result:
if result.get("moved_deal"):
st.success(f"Deal moved to: {result['moved_deal']['to_stage']}")
elif result.get("clicked_deal"):
st.info(f"Deal clicked: {result['clicked_deal']['company_name']}")
```
### Advanced Usage with Business Rules
```python
from config_helpers import DealtPipelineConfigBuilder, create_user_info
# Create configuration with business rules
builder = DealtPipelineConfigBuilder()
config = builder.create_complete_deal_pipeline_config()
# Create user info
user_info = create_user_info(
role="riskManager",
email="risk@company.com",
approval_limits={"VV": {"EUR": 100000}, "OF": {"EUR": 150000}}
)
# Display enhanced kanban board
result = kanban_board(
stages=config['stages'],
deals=deals,
user_info=user_info,
permission_matrix=config['permission_matrix'],
business_rules=config['business_rules'],
key="advanced_kanban"
)
```
## 📋 API Reference
### `kanban_board()`
Creates a Kanban board component with drag-and-drop functionality.
#### Parameters
| Parameter | Type | Default | Description |
|-----------|------|---------|-------------|
| `stages` | `list[dict]` | Required | Stage definitions with id, name, and color |
| `deals` | `list[dict]` | Required | Deal/item data with required fields |
| `key` | `str` | `None` | Unique component key for Streamlit |
| `height` | `int` | `600` | Height of the kanban board in pixels |
| `allow_empty_stages` | `bool` | `True` | Whether to show stages with no deals |
| `draggable_stages` | `list[str]` | `None` | Stages user can drag to (None = all) |
| `user_info` | `dict` | `None` | Current user information for permissions |
| `permission_matrix` | `dict` | `None` | Role-based permission matrix |
| `business_rules` | `list` | `None` | Business rules for deal transitions |
| `show_tooltips` | `bool` | `True` | Whether to show tooltips with feedback |
#### Stage Format
Stages are defined as dictionaries with id, name, and optional color:
```python
stages = [
{"id": "todo", "name": "To Do", "color": "#3498db"},
{"id": "in_progress", "name": "In Progress", "color": "#f39c12"},
{"id": "done", "name": "Done", "color": "#27ae60"}
]
```
#### Data Format
Each item must include these required fields:
```python
item = {
"id": "unique_item_id", # Required: Unique identifier
"stage": "current_stage_id", # Required: Current stage
"deal_id": "D-2024-001", # Required: Display ID
"company_name": "Company Name", # Required: Company name
# Optional fields
"product_type": "Term Loan", # Product type (shown as badge)
"date": "2024-01-15", # Relevant date
"underwriter": "John Smith", # Underwriter name
"amount": 1000000, # Deal amount
"currency": "EUR", # Currency
"risk_rating": "A", # Risk rating
"source": "VV", # Source (VV=blue, OF=orange)
"priority": "high", # Priority level
"custom_html": "<div>...</div>" # Custom HTML content
}
```
#### Return Value
Returns a dictionary with interaction data:
```python
{
"moved_deal": { # Info about moved deal (if any)
"deal_id": "deal_123",
"from_stage": "todo",
"to_stage": "in_progress"
},
"clicked_deal": {...}, # Info about clicked deal (if any)
"validation_error": { # Info about blocked moves (if any)
"reason": "Amount exceeds approval limit",
"suggestions": ["Contact risk manager"]
}
}
```
## 🔐 Role-Based Permissions
### Permission Matrix
Define comprehensive role-based permissions:
```python
permission_matrix = {
"riskManager": {
"stages": {
"risk_review": {
"view": True,
"drag_to": True,
"drag_from": True,
"approve": True,
"reject": True,
"edit": True
}
},
"actions": {
"create_deal": True,
"delete_deal": False,
"edit_deal": True,
"approve_deal": True,
"reject_deal": True,
"request_info": True
},
"approval_limits": {
"VV": {"EUR": 100000},
"OF": {"EUR": 150000}
}
}
}
```
### User Info Format
```python
user_info = {
"role": "riskManager",
"email": "risk@company.com",
"permissions": ["risk_approval", "management_approval"],
"approval_limits": {"VV": {"EUR": 100000}, "OF": {"EUR": 150000}},
"department": "Risk Management",
"is_active": True
}
```
## 🏗️ Business Rules Engine
### Business Rules Format
Define complex business logic for deal transitions:
```python
business_rules = [
{
"id": "vv_high_amount",
"name": "VV High Amount Rule",
"description": "VV deals >= 100k EUR require risk manager approval",
"conditions": [
{"field": "source", "operator": "equals", "value": "VV"},
{"field": "amount", "operator": "greater_than", "value": 100000}
],
"actions": [
{"type": "deny", "message": "Requires risk manager approval"}
],
"priority": 100,
"is_active": True
}
]
```
### Configuration Helpers
Use the built-in configuration helpers for common scenarios:
```python
from config_helpers import DealtPipelineConfigBuilder
# Create complete deal pipeline configuration
builder = DealtPipelineConfigBuilder()
config = builder.create_complete_deal_pipeline_config()
# Access configuration components
stages = config['stages']
permission_matrix = config['permission_matrix']
business_rules = config['business_rules']
```
## 🔍 Smart Search Filters
The component includes built-in smart search functionality:
- **Real-time search**: Filter deals as you type
- **Autocomplete suggestions**: Dropdown with matching company names and tenant IDs
- **Multi-field search**: Search across company names, deal IDs, and other fields
- **Case-insensitive**: Automatic case normalization
- **Instant filtering**: No need to press enter or click search
### Search Features
- **Company name search**: Type company names to filter deals
- **Tenant ID search**: Search by deal IDs or tenant identifiers
- **Smart suggestions**: Dropdown shows matching options as you type
- **Clear filters**: Easy reset of search criteria
- **Visual feedback**: Clear indication of active filters
## 🎨 Styling and Customization
### Source-Based Card Colors
Cards automatically style based on the `source` field:
- **VV Source**: Light blue background (`#dbeafe`)
- **OF Source**: Light orange background (`#fed7aa`)
- **Default**: Standard white background
### Custom HTML Content
Add rich content to deal cards:
```python
deal = {
"id": "deal_001",
"stage": "review",
"deal_id": "D-2024-001",
"company_name": "Acme Corp",
"custom_html": '''
<div class="priority-high">High Priority</div>
<div class="status-urgent">Urgent Review</div>
<div>Additional custom content</div>
'''
}
```
### CSS Classes
The component includes these CSS classes for styling:
- `.kanban-board` - Main container
- `.kanban-column` - Stage columns
- `.kanban-card` - Individual deal cards
- `.kanban-card[data-source="VV"]` - VV source cards
- `.kanban-card[data-source="OF"]` - OF source cards
- `.drop-disabled` - Disabled drop zones
- `.not-draggable` - Non-draggable cards
- `.search-filter` - Search input styling
- `.suggestions-dropdown` - Autocomplete dropdown
## 🔄 Advanced Usage
### Dialog Integration
Handle card clicks to show detailed dialogs:
```python
# Handle card clicks
if result and result.get("clicked_deal"):
st.session_state.selected_deal = result["clicked_deal"]
st.session_state.show_deal_dialog = True
# Show dialog with external closure detection
if st.session_state.get("show_deal_dialog") and st.session_state.get("selected_deal"):
@st.dialog(f"Deal Details: {st.session_state.selected_deal['deal_id']}")
def show_deal_details():
deal = st.session_state.selected_deal
# Display deal information
st.write(f"**Company:** {deal['company_name']}")
st.write(f"**Product:** {deal['product_type']}")
st.write(f"**Amount:** ${deal.get('amount', 0):,.2f}")
# Add interactive elements
if st.button("Approve Deal"):
# Handle approval logic
pass
if st.button("Close"):
st.session_state.show_deal_dialog = False
st.rerun()
show_deal_details()
```
### Real-time Updates
Integrate with session state for real-time updates:
```python
# Initialize deals in session state
if "deals" not in st.session_state:
st.session_state.deals = load_deals_from_database()
# Handle deal movements
if result and result.get("moved_deal"):
moved_data = result["moved_deal"]
# Update database
update_deal_stage(moved_data["deal_id"], moved_data["to_stage"])
# Update session state
for deal in st.session_state.deals:
if deal["id"] == moved_data["deal_id"]:
deal["stage"] = moved_data["to_stage"]
break
```
### Filtering and Search
Combine with Streamlit widgets for advanced filtering:
```python
# Filter controls
col1, col2, col3 = st.columns(3)
with col1:
selected_stages = st.multiselect("Stages", stage_options)
with col2:
search_term = st.text_input("Search companies")
with col3:
selected_sources = st.multiselect("Sources", ["VV", "OF"])
# Apply filters
filtered_deals = [
deal for deal in st.session_state.deals
if (not selected_stages or deal["stage"] in selected_stages)
and (not search_term or search_term.lower() in deal["company_name"].lower())
and (not selected_sources or deal.get("source") in selected_sources)
]
# Display filtered board
result = kanban_board(
stages=stages,
deals=filtered_deals,
key="filtered_kanban"
)
```
## 📊 Example Use Cases
### Deal Pipeline Management
- Track loan applications through approval stages
- Role-based access for underwriters, risk managers, and administrators
- Source-specific workflows (VV vs OF deals)
- Business rules for amount-based approvals
### Project Management
- Kanban-style project tracking
- Team member assignments and permissions
- Custom project metadata
- Workflow automation
### Sales Pipeline
- Lead qualification and progression
- Sales team collaboration
- Customer interaction tracking
- Revenue forecasting
### Content Workflow
- Editorial content approval process
- Multi-stage review workflows
- Publication pipeline management
- Content lifecycle tracking
## 🧪 Testing
### Quick Test
Run the simple demo to test basic functionality:
```bash
streamlit run simple_demo.py
```
### Advanced Demo
Run the comprehensive sample application with business rules:
```bash
streamlit run sample_advanced_pipeline.py
```
### Basic Demo
Run the intermediate demo:
```bash
streamlit run sample.py
```
## 🔧 Development
### Building from Source
```bash
# Clone repository
git clone https://github.com/goviceversa-com/streamlit_kanban_board.git
cd streamlit_kanban_board
# Install development dependencies
cd streamlit_kanban_board_goviceversa/frontend
npm install
# Build component
npm run build
# Install Python package
cd ../..
pip install -e .
```
### Project Structure
```
streamlit_kanban_board/
├── streamlit_kanban_board_goviceversa/
│ ├── __init__.py # Python component wrapper
│ └── frontend/
│ ├── src/
│ │ ├── KanbanComponent.tsx # Main React component
│ │ ├── DealCard.tsx # Individual card component
│ │ ├── FilterPanel.tsx # Search and filter panel
│ │ ├── KanbanComponent.css # Styling
│ │ ├── types.ts # TypeScript types
│ │ └── index.tsx # Entry point
│ ├── public/
│ ├── package.json
│ └── build/ # Built component files
├── config_helpers.py # Business logic and configuration helpers
├── sample_advanced_pipeline.py # Advanced demo with business rules
├── sample.py # Intermediate demo
├── simple_demo.py # Simple demo
├── pyproject.toml # Python package configuration
├── setup.py # Package setup
└── README.md
```
## 🚀 Deployment
### GitHub Actions Workflow
The project includes automated deployment via GitHub Actions:
- **Push to main branch** → Publishes to Test PyPI
- **Push of version tag** (e.g., `v1.1.3`) → Publishes to Production PyPI
- **GitHub release published** → Publishes to Production PyPI
### Version Management
```bash
# Create and push a new version tag
git tag v1.1.3
git push origin v1.1.3
```
This will automatically trigger the GitHub Actions workflow and publish to PyPI.
## 🤝 Contributing
Contributions are welcome! Please feel free to submit a Pull Request.
### Development Guidelines
1. Follow TypeScript best practices for React components
2. Maintain backwards compatibility for Python API
3. Add tests for new features
4. Update documentation for API changes
5. Use the configuration helpers for business logic
## 📄 License
This project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details.
## 🆘 Support
- 📖 Check the API documentation above
- 🧪 Run the sample applications for examples
- 🐛 Report issues on GitHub
- 💬 Ask questions in discussions
## 🙏 Acknowledgments
- Built with [Streamlit Components](https://docs.streamlit.io/library/components)
- Drag and drop functionality using native HTML5 APIs
- Styled with modern CSS animations and transitions
- Business rules engine for complex workflow validation
Raw data
{
"_id": null,
"home_page": null,
"name": "streamlit-kanban-board-goviceversa",
"maintainer": null,
"docs_url": null,
"requires_python": ">=3.9",
"maintainer_email": null,
"keywords": "streamlit, kanban, board, drag-drop, workflow, pipeline, project-management",
"author": null,
"author_email": "Pierluigi Segatto <pier@goviceversa.com>",
"download_url": "https://files.pythonhosted.org/packages/81/26/eb43007724da558d9e1ddf72b7a07eabb52df9256a40dc9036e46885c615/streamlit-kanban-board-goviceversa-1.2.0.tar.gz",
"platform": null,
"description": "# Streamlit Kanban Board Component\n\nA powerful, interactive Kanban board component for Streamlit applications, designed for deal pipeline management, project tracking, and workflow visualization. Features drag-and-drop functionality, role-based permissions, business rules engine, smart search filters, and detailed dialogs with source-based styling.\n\n\n\n## \u2728 Features\n\n### Core Functionality\n- **Drag & Drop Interface**: Native HTML5 drag-and-drop with smooth animations\n- **Interactive Deal Cards**: Click cards to open detailed dialogs with full Streamlit widget support\n- **Customizable Stages**: Define pipeline stages with custom names and colors\n- **Source-Based Styling**: Automatic card styling based on data source (VV=blue, OF=orange)\n- **Role-Based Permissions**: Control drag/drop access and stage visibility by user role\n\n### Advanced Capabilities\n- **Permission System**: Granular control over user actions (drag, approve, reject, edit)\n- **Business Rules Engine**: Configurable rules for deal transitions and validations\n- **Smart Search Filters**: Real-time search with autocomplete for company names and tenant IDs\n- **Visual Feedback**: Dynamic column highlighting and lock icons during drag operations\n- **Responsive Design**: Mobile-friendly layout with touch support\n- **Custom HTML**: Embed custom HTML content in deal cards\n- **Session State Integration**: Seamless integration with Streamlit's session state\n\n### User Experience\n- **Smooth Animations**: CSS transitions for professional feel\n- **Loading States**: Visual feedback during operations\n- **Error Prevention**: Permission validation before allowing actions\n- **Accessibility**: Keyboard navigation and screen reader support\n- **Smart Dialog Management**: Automatic detection of external dialog closure (ESC/click outside)\n\n## \ud83d\ude80 Installation\n\n### From PyPI\n```bash\npip install streamlit-kanban-board-goviceversa\n```\n\n### From Test PyPI (for testing)\n```bash\npip install -i https://test.pypi.org/simple/ streamlit-kanban-board-goviceversa\n```\n\n### From Source\n```bash\ngit clone https://github.com/goviceversa-com/streamlit_kanban_board.git\ncd streamlit_kanban_board\npip install -e .\n```\n\n## \ud83c\udfaf Quick Start\n\n### Basic Usage\n\n```python\nimport streamlit as st\nfrom streamlit_kanban_board_goviceversa import kanban_board\n\n# Define your pipeline stages\nstages = [\n {\"id\": \"todo\", \"name\": \"To Do\", \"color\": \"#3498db\"},\n {\"id\": \"in_progress\", \"name\": \"In Progress\", \"color\": \"#f39c12\"},\n {\"id\": \"done\", \"name\": \"Done\", \"color\": \"#27ae60\"}\n]\n\n# Define your deals/items\ndeals = [\n {\n \"id\": \"deal_001\",\n \"stage\": \"todo\",\n \"deal_id\": \"D-2024-001\",\n \"company_name\": \"Acme Corp\",\n \"product_type\": \"Term Loan\",\n \"date\": \"2024-01-15\",\n \"underwriter\": \"John Smith\",\n \"source\": \"VV\"\n }\n]\n\n# Display the kanban board\nresult = kanban_board(\n stages=stages,\n deals=deals,\n key=\"my_kanban_board\"\n)\n\n# Handle interactions\nif result:\n if result.get(\"moved_deal\"):\n st.success(f\"Deal moved to: {result['moved_deal']['to_stage']}\")\n elif result.get(\"clicked_deal\"):\n st.info(f\"Deal clicked: {result['clicked_deal']['company_name']}\")\n```\n\n### Advanced Usage with Business Rules\n\n```python\nfrom config_helpers import DealtPipelineConfigBuilder, create_user_info\n\n# Create configuration with business rules\nbuilder = DealtPipelineConfigBuilder()\nconfig = builder.create_complete_deal_pipeline_config()\n\n# Create user info\nuser_info = create_user_info(\n role=\"riskManager\",\n email=\"risk@company.com\",\n approval_limits={\"VV\": {\"EUR\": 100000}, \"OF\": {\"EUR\": 150000}}\n)\n\n# Display enhanced kanban board\nresult = kanban_board(\n stages=config['stages'],\n deals=deals,\n user_info=user_info,\n permission_matrix=config['permission_matrix'],\n business_rules=config['business_rules'],\n key=\"advanced_kanban\"\n)\n```\n\n## \ud83d\udccb API Reference\n\n### `kanban_board()`\n\nCreates a Kanban board component with drag-and-drop functionality.\n\n#### Parameters\n\n| Parameter | Type | Default | Description |\n|-----------|------|---------|-------------|\n| `stages` | `list[dict]` | Required | Stage definitions with id, name, and color |\n| `deals` | `list[dict]` | Required | Deal/item data with required fields |\n| `key` | `str` | `None` | Unique component key for Streamlit |\n| `height` | `int` | `600` | Height of the kanban board in pixels |\n| `allow_empty_stages` | `bool` | `True` | Whether to show stages with no deals |\n| `draggable_stages` | `list[str]` | `None` | Stages user can drag to (None = all) |\n| `user_info` | `dict` | `None` | Current user information for permissions |\n| `permission_matrix` | `dict` | `None` | Role-based permission matrix |\n| `business_rules` | `list` | `None` | Business rules for deal transitions |\n| `show_tooltips` | `bool` | `True` | Whether to show tooltips with feedback |\n\n#### Stage Format\n\nStages are defined as dictionaries with id, name, and optional color:\n\n```python\nstages = [\n {\"id\": \"todo\", \"name\": \"To Do\", \"color\": \"#3498db\"},\n {\"id\": \"in_progress\", \"name\": \"In Progress\", \"color\": \"#f39c12\"},\n {\"id\": \"done\", \"name\": \"Done\", \"color\": \"#27ae60\"}\n]\n```\n\n#### Data Format\n\nEach item must include these required fields:\n\n```python\nitem = {\n \"id\": \"unique_item_id\", # Required: Unique identifier\n \"stage\": \"current_stage_id\", # Required: Current stage\n \"deal_id\": \"D-2024-001\", # Required: Display ID\n \"company_name\": \"Company Name\", # Required: Company name\n \n # Optional fields\n \"product_type\": \"Term Loan\", # Product type (shown as badge)\n \"date\": \"2024-01-15\", # Relevant date\n \"underwriter\": \"John Smith\", # Underwriter name\n \"amount\": 1000000, # Deal amount\n \"currency\": \"EUR\", # Currency\n \"risk_rating\": \"A\", # Risk rating\n \"source\": \"VV\", # Source (VV=blue, OF=orange)\n \"priority\": \"high\", # Priority level\n \"custom_html\": \"<div>...</div>\" # Custom HTML content\n}\n```\n\n#### Return Value\n\nReturns a dictionary with interaction data:\n\n```python\n{\n \"moved_deal\": { # Info about moved deal (if any)\n \"deal_id\": \"deal_123\",\n \"from_stage\": \"todo\",\n \"to_stage\": \"in_progress\"\n },\n \"clicked_deal\": {...}, # Info about clicked deal (if any)\n \"validation_error\": { # Info about blocked moves (if any)\n \"reason\": \"Amount exceeds approval limit\",\n \"suggestions\": [\"Contact risk manager\"]\n }\n}\n```\n\n## \ud83d\udd10 Role-Based Permissions\n\n### Permission Matrix\n\nDefine comprehensive role-based permissions:\n\n```python\npermission_matrix = {\n \"riskManager\": {\n \"stages\": {\n \"risk_review\": {\n \"view\": True,\n \"drag_to\": True,\n \"drag_from\": True,\n \"approve\": True,\n \"reject\": True,\n \"edit\": True\n }\n },\n \"actions\": {\n \"create_deal\": True,\n \"delete_deal\": False,\n \"edit_deal\": True,\n \"approve_deal\": True,\n \"reject_deal\": True,\n \"request_info\": True\n },\n \"approval_limits\": {\n \"VV\": {\"EUR\": 100000},\n \"OF\": {\"EUR\": 150000}\n }\n }\n}\n```\n\n### User Info Format\n\n```python\nuser_info = {\n \"role\": \"riskManager\",\n \"email\": \"risk@company.com\",\n \"permissions\": [\"risk_approval\", \"management_approval\"],\n \"approval_limits\": {\"VV\": {\"EUR\": 100000}, \"OF\": {\"EUR\": 150000}},\n \"department\": \"Risk Management\",\n \"is_active\": True\n}\n```\n\n## \ud83c\udfd7\ufe0f Business Rules Engine\n\n### Business Rules Format\n\nDefine complex business logic for deal transitions:\n\n```python\nbusiness_rules = [\n {\n \"id\": \"vv_high_amount\",\n \"name\": \"VV High Amount Rule\",\n \"description\": \"VV deals >= 100k EUR require risk manager approval\",\n \"conditions\": [\n {\"field\": \"source\", \"operator\": \"equals\", \"value\": \"VV\"},\n {\"field\": \"amount\", \"operator\": \"greater_than\", \"value\": 100000}\n ],\n \"actions\": [\n {\"type\": \"deny\", \"message\": \"Requires risk manager approval\"}\n ],\n \"priority\": 100,\n \"is_active\": True\n }\n]\n```\n\n### Configuration Helpers\n\nUse the built-in configuration helpers for common scenarios:\n\n```python\nfrom config_helpers import DealtPipelineConfigBuilder\n\n# Create complete deal pipeline configuration\nbuilder = DealtPipelineConfigBuilder()\nconfig = builder.create_complete_deal_pipeline_config()\n\n# Access configuration components\nstages = config['stages']\npermission_matrix = config['permission_matrix']\nbusiness_rules = config['business_rules']\n```\n\n## \ud83d\udd0d Smart Search Filters\n\nThe component includes built-in smart search functionality:\n\n- **Real-time search**: Filter deals as you type\n- **Autocomplete suggestions**: Dropdown with matching company names and tenant IDs\n- **Multi-field search**: Search across company names, deal IDs, and other fields\n- **Case-insensitive**: Automatic case normalization\n- **Instant filtering**: No need to press enter or click search\n\n### Search Features\n\n- **Company name search**: Type company names to filter deals\n- **Tenant ID search**: Search by deal IDs or tenant identifiers\n- **Smart suggestions**: Dropdown shows matching options as you type\n- **Clear filters**: Easy reset of search criteria\n- **Visual feedback**: Clear indication of active filters\n\n## \ud83c\udfa8 Styling and Customization\n\n### Source-Based Card Colors\n\nCards automatically style based on the `source` field:\n\n- **VV Source**: Light blue background (`#dbeafe`)\n- **OF Source**: Light orange background (`#fed7aa`)\n- **Default**: Standard white background\n\n### Custom HTML Content\n\nAdd rich content to deal cards:\n\n```python\ndeal = {\n \"id\": \"deal_001\",\n \"stage\": \"review\",\n \"deal_id\": \"D-2024-001\",\n \"company_name\": \"Acme Corp\",\n \"custom_html\": '''\n <div class=\"priority-high\">High Priority</div>\n <div class=\"status-urgent\">Urgent Review</div>\n <div>Additional custom content</div>\n '''\n}\n```\n\n### CSS Classes\n\nThe component includes these CSS classes for styling:\n\n- `.kanban-board` - Main container\n- `.kanban-column` - Stage columns\n- `.kanban-card` - Individual deal cards\n- `.kanban-card[data-source=\"VV\"]` - VV source cards\n- `.kanban-card[data-source=\"OF\"]` - OF source cards\n- `.drop-disabled` - Disabled drop zones\n- `.not-draggable` - Non-draggable cards\n- `.search-filter` - Search input styling\n- `.suggestions-dropdown` - Autocomplete dropdown\n\n## \ud83d\udd04 Advanced Usage\n\n### Dialog Integration\n\nHandle card clicks to show detailed dialogs:\n\n```python\n# Handle card clicks\nif result and result.get(\"clicked_deal\"):\n st.session_state.selected_deal = result[\"clicked_deal\"]\n st.session_state.show_deal_dialog = True\n\n# Show dialog with external closure detection\nif st.session_state.get(\"show_deal_dialog\") and st.session_state.get(\"selected_deal\"):\n @st.dialog(f\"Deal Details: {st.session_state.selected_deal['deal_id']}\")\n def show_deal_details():\n deal = st.session_state.selected_deal\n \n # Display deal information\n st.write(f\"**Company:** {deal['company_name']}\")\n st.write(f\"**Product:** {deal['product_type']}\")\n st.write(f\"**Amount:** ${deal.get('amount', 0):,.2f}\")\n \n # Add interactive elements\n if st.button(\"Approve Deal\"):\n # Handle approval logic\n pass\n \n if st.button(\"Close\"):\n st.session_state.show_deal_dialog = False\n st.rerun()\n \n show_deal_details()\n```\n\n### Real-time Updates\n\nIntegrate with session state for real-time updates:\n\n```python\n# Initialize deals in session state\nif \"deals\" not in st.session_state:\n st.session_state.deals = load_deals_from_database()\n\n# Handle deal movements\nif result and result.get(\"moved_deal\"):\n moved_data = result[\"moved_deal\"]\n \n # Update database\n update_deal_stage(moved_data[\"deal_id\"], moved_data[\"to_stage\"])\n \n # Update session state\n for deal in st.session_state.deals:\n if deal[\"id\"] == moved_data[\"deal_id\"]:\n deal[\"stage\"] = moved_data[\"to_stage\"]\n break\n```\n\n### Filtering and Search\n\nCombine with Streamlit widgets for advanced filtering:\n\n```python\n# Filter controls\ncol1, col2, col3 = st.columns(3)\n\nwith col1:\n selected_stages = st.multiselect(\"Stages\", stage_options)\n\nwith col2:\n search_term = st.text_input(\"Search companies\")\n\nwith col3:\n selected_sources = st.multiselect(\"Sources\", [\"VV\", \"OF\"])\n\n# Apply filters\nfiltered_deals = [\n deal for deal in st.session_state.deals\n if (not selected_stages or deal[\"stage\"] in selected_stages)\n and (not search_term or search_term.lower() in deal[\"company_name\"].lower())\n and (not selected_sources or deal.get(\"source\") in selected_sources)\n]\n\n# Display filtered board\nresult = kanban_board(\n stages=stages,\n deals=filtered_deals,\n key=\"filtered_kanban\"\n)\n```\n\n## \ud83d\udcca Example Use Cases\n\n### Deal Pipeline Management\n- Track loan applications through approval stages\n- Role-based access for underwriters, risk managers, and administrators\n- Source-specific workflows (VV vs OF deals)\n- Business rules for amount-based approvals\n\n### Project Management\n- Kanban-style project tracking\n- Team member assignments and permissions\n- Custom project metadata\n- Workflow automation\n\n### Sales Pipeline\n- Lead qualification and progression\n- Sales team collaboration\n- Customer interaction tracking\n- Revenue forecasting\n\n### Content Workflow\n- Editorial content approval process\n- Multi-stage review workflows\n- Publication pipeline management\n- Content lifecycle tracking\n\n## \ud83e\uddea Testing\n\n### Quick Test\nRun the simple demo to test basic functionality:\n\n```bash\nstreamlit run simple_demo.py\n```\n\n### Advanced Demo\nRun the comprehensive sample application with business rules:\n\n```bash\nstreamlit run sample_advanced_pipeline.py\n```\n\n### Basic Demo\nRun the intermediate demo:\n\n```bash\nstreamlit run sample.py\n```\n\n## \ud83d\udd27 Development\n\n### Building from Source\n\n```bash\n# Clone repository\ngit clone https://github.com/goviceversa-com/streamlit_kanban_board.git\ncd streamlit_kanban_board\n\n# Install development dependencies\ncd streamlit_kanban_board_goviceversa/frontend\nnpm install\n\n# Build component\nnpm run build\n\n# Install Python package\ncd ../..\npip install -e .\n```\n\n### Project Structure\n\n```\nstreamlit_kanban_board/\n\u251c\u2500\u2500 streamlit_kanban_board_goviceversa/\n\u2502 \u251c\u2500\u2500 __init__.py # Python component wrapper\n\u2502 \u2514\u2500\u2500 frontend/\n\u2502 \u251c\u2500\u2500 src/\n\u2502 \u2502 \u251c\u2500\u2500 KanbanComponent.tsx # Main React component\n\u2502 \u2502 \u251c\u2500\u2500 DealCard.tsx # Individual card component\n\u2502 \u2502 \u251c\u2500\u2500 FilterPanel.tsx # Search and filter panel\n\u2502 \u2502 \u251c\u2500\u2500 KanbanComponent.css # Styling\n\u2502 \u2502 \u251c\u2500\u2500 types.ts # TypeScript types\n\u2502 \u2502 \u2514\u2500\u2500 index.tsx # Entry point\n\u2502 \u251c\u2500\u2500 public/\n\u2502 \u251c\u2500\u2500 package.json\n\u2502 \u2514\u2500\u2500 build/ # Built component files\n\u251c\u2500\u2500 config_helpers.py # Business logic and configuration helpers\n\u251c\u2500\u2500 sample_advanced_pipeline.py # Advanced demo with business rules\n\u251c\u2500\u2500 sample.py # Intermediate demo\n\u251c\u2500\u2500 simple_demo.py # Simple demo\n\u251c\u2500\u2500 pyproject.toml # Python package configuration\n\u251c\u2500\u2500 setup.py # Package setup\n\u2514\u2500\u2500 README.md\n```\n\n## \ud83d\ude80 Deployment\n\n### GitHub Actions Workflow\n\nThe project includes automated deployment via GitHub Actions:\n\n- **Push to main branch** \u2192 Publishes to Test PyPI\n- **Push of version tag** (e.g., `v1.1.3`) \u2192 Publishes to Production PyPI\n- **GitHub release published** \u2192 Publishes to Production PyPI\n\n### Version Management\n\n```bash\n# Create and push a new version tag\ngit tag v1.1.3\ngit push origin v1.1.3\n```\n\nThis will automatically trigger the GitHub Actions workflow and publish to PyPI.\n\n## \ud83e\udd1d Contributing\n\nContributions are welcome! Please feel free to submit a Pull Request.\n\n### Development Guidelines\n1. Follow TypeScript best practices for React components\n2. Maintain backwards compatibility for Python API\n3. Add tests for new features\n4. Update documentation for API changes\n5. Use the configuration helpers for business logic\n\n## \ud83d\udcc4 License\n\nThis project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details.\n\n## \ud83c\udd98 Support\n\n- \ud83d\udcd6 Check the API documentation above\n- \ud83e\uddea Run the sample applications for examples\n- \ud83d\udc1b Report issues on GitHub\n- \ud83d\udcac Ask questions in discussions\n\n## \ud83d\ude4f Acknowledgments\n\n- Built with [Streamlit Components](https://docs.streamlit.io/library/components)\n- Drag and drop functionality using native HTML5 APIs\n- Styled with modern CSS animations and transitions\n- Business rules engine for complex workflow validation\n",
"bugtrack_url": null,
"license": "MIT",
"summary": "A powerful, interactive Kanban board component for Streamlit applications with drag-and-drop functionality, DLA V2 pre-computed permissions, and customizable workflows.",
"version": "1.2.0",
"project_urls": {
"Bug Tracker": "https://github.com/goviceversa-com/streamlit_kanban_board/issues",
"Documentation": "https://github.com/goviceversa-com/streamlit_kanban_board#readme",
"Funding": "https://github.com/sponsors/pierluigisegatto",
"Homepage": "https://github.com/goviceversa-com/streamlit_kanban_board",
"Repository": "https://github.com/goviceversa-com/streamlit_kanban_board"
},
"split_keywords": [
"streamlit",
" kanban",
" board",
" drag-drop",
" workflow",
" pipeline",
" project-management"
],
"urls": [
{
"comment_text": null,
"digests": {
"blake2b_256": "2fe521bcc512213ad63e0255d93471e15bdc8916a4c547b0c3ecceb036cf87c3",
"md5": "24ffcef9c31d6728ae1dd006c0019c23",
"sha256": "652664fe6ede2d642a6ec25c9f9653f6864921ee2ec1023b7ec67f4e7f2aa540"
},
"downloads": -1,
"filename": "streamlit_kanban_board_goviceversa-1.2.0-py3-none-any.whl",
"has_sig": false,
"md5_digest": "24ffcef9c31d6728ae1dd006c0019c23",
"packagetype": "bdist_wheel",
"python_version": "py3",
"requires_python": ">=3.9",
"size": 434133,
"upload_time": "2025-10-07T11:51:18",
"upload_time_iso_8601": "2025-10-07T11:51:18.204010Z",
"url": "https://files.pythonhosted.org/packages/2f/e5/21bcc512213ad63e0255d93471e15bdc8916a4c547b0c3ecceb036cf87c3/streamlit_kanban_board_goviceversa-1.2.0-py3-none-any.whl",
"yanked": false,
"yanked_reason": null
},
{
"comment_text": null,
"digests": {
"blake2b_256": "8126eb43007724da558d9e1ddf72b7a07eabb52df9256a40dc9036e46885c615",
"md5": "14d0b09adf89ee9687c97c84b4b338c5",
"sha256": "afd525cbd7975a6c388f07829c83a4b72d4beec2fd7fd5f8f3f0ef239222f5a4"
},
"downloads": -1,
"filename": "streamlit-kanban-board-goviceversa-1.2.0.tar.gz",
"has_sig": false,
"md5_digest": "14d0b09adf89ee9687c97c84b4b338c5",
"packagetype": "sdist",
"python_version": "source",
"requires_python": ">=3.9",
"size": 436063,
"upload_time": "2025-10-07T11:51:19",
"upload_time_iso_8601": "2025-10-07T11:51:19.659656Z",
"url": "https://files.pythonhosted.org/packages/81/26/eb43007724da558d9e1ddf72b7a07eabb52df9256a40dc9036e46885c615/streamlit-kanban-board-goviceversa-1.2.0.tar.gz",
"yanked": false,
"yanked_reason": null
}
],
"upload_time": "2025-10-07 11:51:19",
"github": true,
"gitlab": false,
"bitbucket": false,
"codeberg": false,
"github_user": "goviceversa-com",
"github_project": "streamlit_kanban_board",
"github_not_found": true,
"lcname": "streamlit-kanban-board-goviceversa"
}
JSON
