BOM Assistant
/* Header Section */
.bom-header {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: white;
padding: 30px;
border-radius: 8px;
margin-bottom: 30px;
box-shadow: 0 4px 6px rgba(0,0,0,0.1);
}
.bom-header h1 {
margin: 0 0 10px 0;
font-size: 2.5em;
}
.bom-header p {
margin: 0;
opacity: 0.9;
}
/* Device Selector Panel */
.device-selector {
background: #f8f9fa;
padding: 25px;
border-radius: 8px;
margin-bottom: 25px;
box-shadow: 0 2px 4px rgba(0,0,0,0.08);
}
.selector-row {
display: flex;
gap: 15px;
flex-wrap: wrap;
align-items: flex-end;
}
.form-group-inline {
flex: 1;
min-width: 200px;
}
.form-group-inline label {
display: block;
margin-bottom: 5px;
font-weight: 600;
color: #333;
}
.form-control {
width: 100%;
padding: 10px;
border: 2px solid #ddd;
border-radius: 4px;
font-size: 14px;
transition: border-color 0.3s;
}
.form-control:focus {
outline: none;
border-color: #667eea;
}
.btn {
padding: 10px 20px;
border: none;
border-radius: 4px;
cursor: pointer;
font-weight: 600;
transition: all 0.3s;
}
.btn-primary {
background: #667eea;
color: white;
}
.btn-primary:hover {
background: #5568d3;
}
.btn-success {
background: #4CAF50;
color: white;
}
.btn-success:hover {
background: #45a049;
}
.btn-secondary {
background: #6c757d;
color: white;
}
.btn-secondary:hover {
background: #5a6268;
}
.btn-danger {
background: #dc3545;
color: white;
padding: 5px 10px;
font-size: 12px;
}
.btn-danger:hover {
background: #c82333;
}
/* Action Buttons */
.action-buttons {
margin-bottom: 20px;
display: flex;
gap: 10px;
flex-wrap: wrap;
}
/* BOM Table */
.bom-table-container {
overflow-x: auto;
margin-bottom: 30px;
}
.bom-table {
width: 100%;
border-collapse: collapse;
background: white;
box-shadow: 0 2px 4px rgba(0,0,0,0.08);
}
.bom-table thead {
background: #667eea;
color: white;
}
.bom-table th {
padding: 12px;
text-align: left;
font-weight: 600;
border-bottom: 2px solid #5568d3;
}
.bom-table td {
padding: 10px 12px;
border-bottom: 1px solid #e0e0e0;
}
.bom-table tbody tr:hover {
background: #f5f5f5;
}
.chassis-row {
background: #f0f4ff;
font-weight: 600;
}
.component-row {
background: #fafbfc;
font-size: 0.95em;
}
.component-row.collapsed {
display: none;
}
.component-qty-input {
width: 60px;
padding: 4px 8px;
border: 1px solid #ddd;
border-radius: 3px;
}
.btn-expand {
background: #4CAF50;
color: white;
border: none;
padding: 4px 12px;
border-radius: 3px;
cursor: pointer;
margin-right: 5px;
}
.btn-expand:hover {
background: #45a049;
}
/* Totals Panel */
.totals-panel {
background: linear-gradient(135deg, #4CAF50 0%, #45a049 100%);
color: white;
padding: 25px;
border-radius: 8px;
box-shadow: 0 4px 6px rgba(0,0,0,0.1);
}
.totals-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 20px;
}
.total-item {
text-align: center;
}
.total-item label {
display: block;
font-size: 0.9em;
opacity: 0.9;
margin-bottom: 5px;
}
.total-item .value {
font-size: 2em;
font-weight: 700;
}
.total-item .unit {
font-size: 0.8em;
opacity: 0.9;
}
/* Empty State */
.empty-state {
text-align: center;
padding: 60px 20px;
color: #999;
}
.empty-state-icon {
font-size: 4em;
margin-bottom: 20px;
}
/* Loading State */
.loading {
display: none;
text-align: center;
padding: 20px;
}
.loading.active {
display: block;
}
/* Print Styles */
@media print {
.no-print {
display: none !important;
}
.bom-header {
background: none;
color: black;
border-bottom: 3px solid black;
}
.bom-table {
font-size: 10pt;
}
.chassis-row, .component-row {
page-break-inside: avoid;
}
@page {
margin: 0.5in;
}
}
/* Category Tiles */
.category-tiles {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
gap: 16px;
margin-top: 10px;
}
.category-tile {
background: white;
border: 2px solid #e0e0e0;
border-radius: 10px;
padding: 22px 16px;
cursor: pointer;
text-align: center;
transition: all 0.25s;
display: flex;
flex-direction: column;
align-items: center;
gap: 10px;
box-shadow: 0 2px 6px rgba(0,0,0,0.05);
}
.category-tile:hover {
border-color: #667eea;
background: #f5f7ff;
box-shadow: 0 4px 14px rgba(102, 126, 234, 0.25);
transform: translateY(-2px);
}
.category-tile-icon {
font-size: 2.4em;
line-height: 1;
}
.category-tile-label {
font-weight: 700;
font-size: 1em;
color: #333;
}
.category-tile-sub {
font-size: 0.78em;
color: #888;
line-height: 1.4;
}
/* CSV Import */
.csv-import-container {
margin-bottom: 20px;
}
.file-input-wrapper {
display: inline-block;
position: relative;
overflow: hidden;
margin-right: 10px;
}
.file-input-wrapper input[type=file] {
position: absolute;
left: -9999px;
}
.file-input-label {
display: inline-block;
padding: 10px 20px;
background: #6c757d;
color: white;
border-radius: 4px;
cursor: pointer;
font-weight: 600;
transition: background 0.3s;
}
.file-input-label:hover {
background: #5a6268;
}
/* Product Browser Modal */
.modal-overlay {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0,0,0,0.7);
z-index: 1000;
overflow-y: auto;
}
.modal-overlay.active {
display: block;
}
.modal-content-wrapper {
max-width: 1400px;
margin: 30px auto;
background: white;
border-radius: 8px;
box-shadow: 0 10px 40px rgba(0,0,0,0.3);
animation: modalFadeIn 0.3s ease;
}
@keyframes modalFadeIn {
from { opacity: 0; transform: translateY(-20px); }
to { opacity: 1; transform: translateY(0); }
}
.modal-header {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: white;
padding: 20px 30px;
border-radius: 8px 8px 0 0;
display: flex;
justify-content: space-between;
align-items: center;
}
.modal-header h2 {
margin: 0;
font-size: 1.8em;
}
.modal-close {
background: rgba(255,255,255,0.2);
border: none;
color: white;
font-size: 28px;
width: 40px;
height: 40px;
border-radius: 50%;
cursor: pointer;
transition: background 0.3s;
display: flex;
align-items: center;
justify-content: center;
line-height: 1;
}
.modal-close:hover {
background: rgba(255,255,255,0.3);
}
.modal-body {
padding: 30px;
max-height: calc(100vh - 200px);
overflow-y: auto;
}
/* Search and Filters */
.browser-controls {
display: flex;
gap: 15px;
margin-bottom: 20px;
flex-wrap: wrap;
}
.search-box {
flex: 1;
min-width: 300px;
}
.search-box input {
width: 100%;
padding: 12px 15px;
border: 2px solid #ddd;
border-radius: 6px;
font-size: 15px;
transition: border-color 0.3s;
}
.search-box input:focus {
outline: none;
border-color: #667eea;
}
.filter-section {
background: #f8f9fa;
padding: 20px;
border-radius: 6px;
margin-bottom: 20px;
}
.filter-section h4 {
margin: 0 0 15px 0;
font-size: 1.1em;
color: #333;
}
.filter-groups {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 15px;
}
.filter-group {
display: flex;
flex-direction: column;
}
.filter-group label {
font-weight: 600;
margin-bottom: 5px;
font-size: 0.9em;
color: #555;
}
.filter-group select,
.filter-group input {
padding: 8px;
border: 1px solid #ddd;
border-radius: 4px;
font-size: 14px;
}
.filter-checkboxes {
display: flex;
flex-direction: column;
gap: 8px;
}
.filter-checkboxes label {
display: flex;
align-items: center;
gap: 8px;
font-weight: normal;
cursor: pointer;
}
.filter-checkboxes input[type="checkbox"] {
width: 18px;
height: 18px;
cursor: pointer;
}
.filter-actions {
margin-top: 15px;
display: flex;
gap: 10px;
}
/* Product Table */
.product-table {
width: 100%;
border-collapse: collapse;
background: white;
box-shadow: 0 2px 4px rgba(0,0,0,0.08);
margin-bottom: 20px;
}
.product-table thead {
background: #667eea;
color: white;
}
.product-table th {
padding: 12px;
text-align: left;
font-weight: 600;
font-size: 0.9em;
white-space: nowrap;
}
.product-table th.sortable {
cursor: pointer;
user-select: none;
}
.product-table th.sortable:hover {
background: #5568d3;
}
.product-table th.sortable::after {
content: ' ⇅';
opacity: 0.5;
}
.product-table th.sort-asc::after {
content: ' ▲';
opacity: 1;
}
.product-table th.sort-desc::after {
content: ' ▼';
opacity: 1;
}
.product-table td {
padding: 12px;
border-bottom: 1px solid #e0e0e0;
}
.product-table tbody tr {
transition: background 0.2s;
}
.product-table tbody tr:hover {
background: #f5f5f5;
}
.product-name {
font-weight: 600;
color: #333;
}
.product-vendor {
color: #666;
font-size: 0.9em;
}
.price-badge {
background: #4CAF50;
color: white;
padding: 4px 10px;
border-radius: 4px;
font-weight: 600;
display: inline-block;
}
.btn-select {
padding: 8px 20px;
background: #667eea;
color: white;
border: none;
border-radius: 4px;
cursor: pointer;
font-weight: 600;
transition: background 0.3s;
margin-right: 5px;
}
.btn-select:hover {
background: #5568d3;
}
.btn-details {
padding: 8px 15px;
background: #6c757d;
color: white;
border: none;
border-radius: 4px;
cursor: pointer;
font-weight: 600;
transition: background 0.3s;
}
.btn-details:hover {
background: #5a6268;
}
/* Pagination */
.pagination {
display: flex;
justify-content: center;
align-items: center;
gap: 5px;
margin-top: 20px;
flex-wrap: wrap;
}
.page-btn {
padding: 8px 12px;
border: 1px solid #ddd;
background: white;
cursor: pointer;
border-radius: 4px;
font-weight: 500;
transition: all 0.3s;
}
.page-btn:hover {
background: #f5f5f5;
border-color: #667eea;
}
.page-btn.active {
background: #667eea;
color: white;
border-color: #667eea;
}
.page-btn:disabled {
opacity: 0.5;
cursor: not-allowed;
}
.page-info {
padding: 8px 15px;
color: #666;
font-size: 0.9em;
}
/* Product Details Modal */
.details-grid {
display: grid;
grid-template-columns: 2fr 1fr;
gap: 30px;
margin-top: 20px;
}
.specs-table {
width: 100%;
border-collapse: collapse;
}
.specs-table tr {
border-bottom: 1px solid #e0e0e0;
}
.specs-table td {
padding: 10px;
}
.specs-table td:first-child {
font-weight: 600;
color: #555;
width: 40%;
}
.specs-table td:last-child {
color: #333;
}
.pricing-panel {
background: #f8f9fa;
padding: 20px;
border-radius: 8px;
}
.vendor-price-item {
background: white;
padding: 15px;
border-radius: 6px;
margin-bottom: 10px;
border: 2px solid #e0e0e0;
transition: border-color 0.3s;
}
.vendor-price-item:hover {
border-color: #667eea;
}
.vendor-price-item.best-price {
border-color: #4CAF50;
background: #f1f8f4;
}
.vendor-name {
font-weight: 600;
color: #333;
margin-bottom: 5px;
}
.vendor-price {
font-size: 1.3em;
color: #4CAF50;
font-weight: 700;
}
.vendor-stock {
font-size: 0.85em;
color: #666;
margin-top: 5px;
}
.best-price-badge {
background: #4CAF50;
color: white;
padding: 2px 8px;
border-radius: 3px;
font-size: 0.75em;
margin-left: 8px;
}
/* Empty State */
.empty-products {
text-align: center;
padding: 60px 20px;
color: #999;
}
.empty-products-icon {
font-size: 3em;
margin-bottom: 15px;
}
/* Component Configuration Wizard */
.wizard-modal {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0,0,0,0.8);
z-index: 1100;
overflow-y: auto;
}
.wizard-modal.active {
display: block;
}
.wizard-content {
max-width: 1400px;
margin: 30px auto;
background: white;
border-radius: 12px;
box-shadow: 0 10px 50px rgba(0,0,0,0.4);
}
.wizard-header {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: white;
padding: 20px 30px;
border-radius: 12px 12px 0 0;
display: flex;
justify-content: space-between;
align-items: center;
}
.wizard-header-left {
display: flex;
align-items: center;
gap: 15px;
}
.wizard-title {
font-size: 1.8em;
font-weight: 700;
margin: 0;
}
.wizard-subtitle {
font-size: 0.9em;
opacity: 0.9;
margin-top: 5px;
}
.btn-back {
background: rgba(255,255,255,0.2);
border: none;
color: white;
padding: 8px 16px;
border-radius: 6px;
cursor: pointer;
font-weight: 600;
transition: background 0.3s;
display: flex;
align-items: center;
gap: 5px;
}
.btn-back:hover {
background: rgba(255,255,255,0.3);
}
.wizard-body {
display: grid;
grid-template-columns: 2fr 1fr;
gap: 30px;
padding: 30px;
max-height: calc(100vh - 250px);
overflow-y: auto;
}
.component-sections {
display: flex;
flex-direction: column;
gap: 15px;
}
.component-section {
background: white;
border: 2px solid #e0e0e0;
border-radius: 8px;
overflow: hidden;
transition: border-color 0.3s;
}
.component-section:hover {
border-color: #667eea;
}
.section-header {
background: #667eea;
color: white;
padding: 15px 20px;
font-weight: 600;
display: flex;
justify-content: space-between;
align-items: center;
cursor: pointer;
user-select: none;
}
.section-header:hover {
background: #5568d3;
}
.section-header .badge {
background: rgba(255,255,255,0.25);
padding: 4px 12px;
border-radius: 12px;
font-size: 0.9em;
}
.component-options {
padding: 15px;
display: flex;
flex-direction: column;
gap: 12px;
max-height: 400px;
overflow-y: auto;
}
.component-option {
background: white;
border: 2px solid #ddd;
border-radius: 6px;
padding: 15px;
display: grid;
grid-template-columns: auto 1fr auto;
gap: 15px;
align-items: center;
transition: all 0.3s;
}
.component-option:hover {
border-color: #667eea;
box-shadow: 0 2px 8px rgba(102, 126, 234, 0.2);
}
.component-option.selected {
border-color: #4CAF50;
background: #f1f8f4;
}
.component-checkbox {
width: 24px;
height: 24px;
cursor: pointer;
accent-color: #4CAF50;
}
.component-info {
display: flex;
flex-direction: column;
gap: 5px;
}
.component-name {
font-weight: 600;
color: #333;
font-size: 15px;
}
.component-specs {
font-size: 0.9em;
color: #666;
display: flex;
gap: 10px;
flex-wrap: wrap;
}
.spec-item {
display: flex;
align-items: center;
gap: 4px;
}
.component-controls {
display: flex;
flex-direction: column;
gap: 8px;
align-items: flex-end;
}
.qty-control {
display: flex;
align-items: center;
gap: 8px;
}
.qty-btn {
width: 32px;
height: 32px;
border: 1px solid #ddd;
background: white;
border-radius: 4px;
cursor: pointer;
font-weight: bold;
font-size: 16px;
transition: all 0.3s;
display: flex;
align-items: center;
justify-content: center;
}
.qty-btn:hover:not(:disabled) {
background: #667eea;
color: white;
border-color: #667eea;
}
.qty-btn:disabled {
opacity: 0.3;
cursor: not-allowed;
}
.qty-input {
width: 55px;
text-align: center;
padding: 6px;
border: 2px solid #ddd;
border-radius: 4px;
font-weight: 600;
font-size: 14px;
}
.component-price {
color: #4CAF50;
font-weight: 700;
font-size: 1.1em;
}
.component-subtotal {
color: #666;
font-size: 0.85em;
}
.config-summary {
background: #f8f9fa;
border-radius: 8px;
padding: 25px;
position: sticky;
top: 0;
height: fit-content;
border: 2px solid #e0e0e0;
}
.summary-section {
margin-bottom: 25px;
}
.summary-section h4 {
margin: 0 0 15px 0;
color: #333;
font-size: 1.1em;
border-bottom: 2px solid #667eea;
padding-bottom: 8px;
}
.summary-items {
display: flex;
flex-direction: column;
gap: 8px;
}
.summary-item {
display: flex;
justify-content: space-between;
padding: 6px 0;
font-size: 0.95em;
color: #555;
}
.summary-item-name {
flex: 1;
}
.summary-item-value {
font-weight: 600;
color: #333;
}
.summary-divider {
border-top: 1px solid #ddd;
margin: 10px 0;
}
.summary-item.total {
border-top: 2px solid #333;
margin-top: 10px;
padding-top: 15px;
font-weight: 700;
font-size: 1.4em;
}
.summary-item.total .summary-item-value {
color: #4CAF50;
}
.requirements-list {
display: flex;
flex-direction: column;
gap: 8px;
}
.requirement {
display: flex;
align-items: center;
gap: 8px;
font-size: 0.9em;
padding: 6px 10px;
border-radius: 4px;
}
.requirement.met {
color: #2e7d32;
background: #e8f5e9;
}
.requirement.unmet {
color: #c62828;
background: #ffebee;
}
.requirement-icon {
font-weight: 700;
font-size: 1.1em;
}
.wizard-actions {
display: flex;
flex-direction: column;
gap: 10px;
margin-top: 20px;
}
.btn-wizard-primary {
width: 100%;
padding: 16px;
background: #4CAF50;
color: white;
border: none;
border-radius: 6px;
font-weight: 700;
font-size: 16px;
cursor: pointer;
transition: all 0.3s;
}
.btn-wizard-primary:hover:not(:disabled) {
background: #45a049;
transform: translateY(-1px);
box-shadow: 0 4px 8px rgba(76, 175, 80, 0.3);
}
.btn-wizard-primary:disabled {
background: #ccc;
cursor: not-allowed;
transform: none;
opacity: 0.6;
}
.btn-recommended {
width: 100%;
padding: 12px;
background: #2196F3;
color: white;
border: none;
border-radius: 6px;
cursor: pointer;
font-weight: 600;
transition: all 0.3s;
}
.btn-recommended:hover {
background: #0b7dda;
transform: translateY(-1px);
}
.empty-components {
text-align: center;
padding: 40px 20px;
color: #999;
}
/* Responsive */
@media (max-width: 768px) {
.modal-content-wrapper {
margin: 10px;
width: calc(100% - 20px);
}
.browser-controls {
flex-direction: column;
}
.filter-groups {
grid-template-columns: 1fr;
}
.details-grid {
grid-template-columns: 1fr;
}
.product-table {
font-size: 0.85em;
}
.product-table th,
.product-table td {
padding: 8px 6px;
}
.wizard-body {
grid-template-columns: 1fr;
}
.config-summary {
position: relative;
}
.component-option {
grid-template-columns: auto 1fr;
gap: 10px;
}
.component-controls {
grid-column: 1 / -1;
flex-direction: row;
justify-content: space-between;
align-items: center;
}
}
/* API unavailability error display */
.api-error-banner {
background: #fde8e8;
border: 1px solid #f5c6c6;
border-radius: 6px;
color: #721c24;
padding: 16px 20px;
margin-bottom: 16px;
display: flex;
align-items: center;
gap: 12px;
}
.api-error-banner .error-icon { font-size: 20px; flex-shrink: 0; }
.api-error-banner .error-text { flex: 1; }
.api-error-banner .error-title { font-weight: 600; margin-bottom: 4px; }
.api-error-banner .error-detail { font-size: 13px; opacity: 0.8; }
BOM API کنفیگریشن: API موڈ کو فعال کرنے کے لیے مواد کو API بیس URL پر سیٹ کریں، جیسے http://localhost:5000
ہیڈر
ڈیوائس سلیکٹر
نیٹ ورک ذیلی زمرہ چننے والا (نیٹ ورک ٹائل پر کلک کرنے پر ان لائن دکھایا گیا)
ایکشن بٹن
لوڈنگ کی حالت
BOM ٹیبل
ٹوٹل پینل
پروڈکٹ براؤزر ماڈل
مصنوعات کی تفصیلات کا ماڈل
سرور کنفیگریشن وزرڈ موڈل
BOM اسسٹنٹ
ڈیٹا سینٹر کی تعیناتیوں کے لیے ہارڈ ویئر بل آف میٹریل پلاننگ ٹول۔ بجلی، BTU، TDP، ریک کی جگہ، اور کل لاگت کا حساب لگائیں۔
BOM میں ہارڈ ویئر شامل کریں۔
مصنوعات کو براؤز کرنے اور منتخب کرنے کے لیے زمرہ پر کلک کریں۔
ہارڈ ویئر ڈیٹا لوڈ ہو رہا ہے...
| زمرہ | فروش | بنائیں/ماڈل | جزو | مقدار | پاور (W) | بی ٹی یو | TDP (W) | ریک یو | سی پی یو کور | میموری (GB) | وزن (کلوگرام) | اعمال |
|---|---|---|---|---|---|---|---|---|---|---|---|---|
|
BOM میں ابھی تک کوئی ڈیوائس نہیں ہے۔ اوپر سلیکٹر کا استعمال کرتے ہوئے ہارڈ ویئر شامل کریں۔ |
||||||||||||
BOM ٹوٹل
0
واٹس
0
BTU/hr
0
واٹس
0
U
—
کور
—
انسٹال
—
کلو
سرور کو ترتیب دیں۔
اپنے سرور کے لیے اجزاء منتخب کریں۔
اجزاء کے حصے یہاں پیش کیے جائیں گے۔
ترتیب کا خلاصہ
چیسس
-
تقاضے
تقاضے یہاں پیش کیے جائیں گے۔
ٹوٹل
طاقت
0 ڈبلیو
بی ٹی یو
0 BTU/hr
ٹی ڈی پی
0 ڈبلیو
میموری انسٹال
0 جی بی
کل قیمت
$0