@visns-studio/visns-components 5.15.3 → 5.15.5

package/src/components/styles/CameraPlacementModal.module.scss

@@ -0,0 +1,185 @@
+// Additional styles for Verkada camera modal
+.cameraSpec {
+    font-size: 12px;
+    color: #6b7280;
+    margin-bottom: 4px;
+    line-height: 1.4;
+}
+
+.noModel {
+    color: #ef4444;
+    font-style: italic;
+    font-size: 13px;
+    margin-bottom: 8px;
+}
+
+.cameraPreview {
+    background: #f9fafb;
+    border: 1px solid #e5e7eb;
+    border-radius: 8px;
+    padding: 16px;
+    margin: 16px 0;
+
+    h4 {
+        margin: 0 0 12px 0;
+        color: #374151;
+        font-size: 16px;
+        font-weight: 600;
+    }
+}
+
+.cameraSpecs {
+    display: flex;
+    flex-direction: column;
+    gap: 6px;
+}
+
+.specRow {
+    display: flex;
+    font-size: 13px;
+    line-height: 1.4;
+    color: #4b5563;
+
+    strong {
+        width: 100px;
+        flex-shrink: 0;
+        color: #374151;
+        font-weight: 500;
+    }
+}
+
+.directionHelper {
+    font-size: 11px;
+    color: #9ca3af;
+    margin-top: 4px;
+    text-align: center;
+}
+
+.directionControl {
+    background: #f8fafc;
+    border: 1px solid #e2e8f0;
+    border-radius: 6px;
+    padding: 12px;
+    margin: 8px 0;
+    
+    label {
+        display: block;
+        font-size: 13px;
+        font-weight: 500;
+        color: #374151;
+        margin-bottom: 8px;
+    }
+}
+
+.directionSlider {
+    width: 100%;
+    height: 6px;
+    border-radius: 3px;
+    background: #e2e8f0;
+    outline: none;
+    opacity: 0.7;
+    transition: opacity 0.2s;
+    margin-bottom: 8px;
+    
+    &:hover {
+        opacity: 1;
+    }
+    
+    &::-webkit-slider-thumb {
+        appearance: none;
+        width: 20px;
+        height: 20px;
+        border-radius: 50%;
+        background: #3b82f6;
+        cursor: pointer;
+        box-shadow: 0 2px 6px rgba(59, 130, 246, 0.4);
+        transition: all 0.2s ease;
+        
+        &:hover {
+            background: #2563eb;
+            transform: scale(1.1);
+        }
+    }
+    
+    &::-moz-range-thumb {
+        width: 20px;
+        height: 20px;
+        border-radius: 50%;
+        background: #3b82f6;
+        cursor: pointer;
+        border: none;
+        box-shadow: 0 2px 6px rgba(59, 130, 246, 0.4);
+    }
+}
+
+.cameraModelName {
+    font-size: 14px;
+    color: #1f2937;
+    margin-bottom: 12px;
+    padding-bottom: 8px;
+    border-bottom: 1px solid #e5e7eb;
+    
+    strong {
+        font-weight: 600;
+    }
+}
+
+.cameraSpecGrid {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: 8px;
+    margin-bottom: 12px;
+}
+
+.specItem {
+    display: flex;
+    flex-direction: column;
+    gap: 2px;
+}
+
+.specLabel {
+    font-size: 11px;
+    font-weight: 500;
+    color: #6b7280;
+    text-transform: uppercase;
+    letter-spacing: 0.05em;
+}
+
+.specValue {
+    font-size: 12px;
+    color: #374151;
+    font-weight: 500;
+    
+    &.indoor {
+        color: #059669;
+    }
+    
+    &.outdoor {
+        color: #d97706;
+    }
+}
+
+.cameraFeatures {
+    margin-bottom: 12px;
+    
+    .specLabel {
+        display: block;
+        margin-bottom: 6px;
+    }
+}
+
+.featuresList {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 4px;
+}
+
+.featureTag {
+    background: #f1f5f9;
+    color: #475569;
+    font-size: 10px;
+    font-weight: 500;
+    padding: 2px 6px;
+    border-radius: 4px;
+    border: 1px solid #e2e8f0;
+}

package/src/components/styles/GenericQuote.module.scss

@@ -246,10 +246,10 @@
     background: white;
     border-radius: 12px;
     box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
-    width: 95%;
-    max-width: 1400px;
-    height: 90vh;
-    max-height: 90vh;
+    width: 98%;
+    max-width: 1600px;
+    height: 95vh;
+    max-height: 95vh;
     display: flex;
     flex-direction: column;
     overflow: hidden;
@@ -313,7 +313,7 @@
 
 .contentEditorBody {
     flex: 1;
-    padding: 20px;
+    padding: 12px;
     overflow: hidden;
     background: var(--tertiary-color);
     display: flex;
@@ -374,7 +374,8 @@
     flex: 1; /* Take all remaining space */
     display: flex;
     flex-direction: column;
-    min-height: 0; /* Allow flex shrinking */
+    min-height: 500px; /* Ensure minimum height for editor */
+    height: 100%; /* Fill available height */
     
     /* TinyMCE overrides */
     :global(.tox-tinymce) {

package/src/components/utils/CameraIcon.jsx

@@ -0,0 +1,18 @@
+import React from 'react';
+
+// Wrapper component to render Lucide icons for cameras
+const CameraIcon = ({ icon: IconComponent, size = 16, className = '', ...props }) => {
+  if (!IconComponent) {
+    return null;
+  }
+  
+  return (
+    <IconComponent 
+      size={size} 
+      className={className}
+      {...props}
+    />
+  );
+};
+
+export default CameraIcon;

package/src/index.js

@@ -15,6 +15,7 @@ import Autocomplete from './components/Autocomplete';
 import Breadcrumb from './components/Breadcrumb';
 import BusinessCardOcr from './components/BusinessCardOcr';
 import Call from './components/Call';
+import CameraPlacement from './components/CameraPlacement';
 import ClientAssociationManager from './components/ClientAssociationManager';
 import CustomFetch from './components/Fetch';
 import Download from './components/Download';
@@ -93,6 +94,7 @@ export {
     Breadcrumb,
     BusinessCardOcr,
     Call,
+    CameraPlacement,
     CellWithTooltip,
     ClientAssociationManager,
     ClientLogin,