Add router provisioning workflow and filtering UI

src/App.css

@@ -242,8 +242,11 @@ nav button:hover {
 
 .panel {
   padding: 0;
+  overflow: visible;
+}
+
+.panel table {
   overflow: hidden;
-  overflow-x: auto;
 }
 
 table {
@@ -428,20 +431,6 @@ td {
   }
 }
 
-.router-form select {
-  height: 40px;
-  border: 1px solid #dfe3e8;
-  border-radius: 8px;
-  padding: 0 12px;
-  background: #fbfbfc;
-  color: #111827;
-}
-
-.router-form select:focus {
-  outline: 2px solid rgba(93, 168, 255, 0.25);
-  border-color: #5da8ff;
-}
-
 .custom-select {
   position: relative;
 }
@@ -462,7 +451,7 @@ td {
 
 .custom-select-menu {
   position: absolute;
-  z-index: 100;
+  z-index: 9999;
   top: calc(100% + 6px);
   left: 0;
   right: 0;
@@ -593,12 +582,6 @@ td {
   background: #fef9c3;
 }
 
-.table-action:disabled,
-.small-action:disabled {
-  opacity: 0.55;
-  cursor: not-allowed;
-}
-
 .deployment-modal {
   width: 720px;
   max-width: calc(100vw - 48px);
@@ -643,4 +626,56 @@ td {
   line-height: 1.5;
   white-space: pre-wrap;
   font-family: "JetBrains Mono", Consolas, monospace;
+}
+
+.table-toolbar {
+  display: flex;
+  justify-content: space-between;
+  gap: 14px;
+  padding: 16px;
+  border-bottom: 1px solid #edf0f3;
+  background: white;
+  position: relative;
+  z-index: 20;
+}
+
+.search-box {
+  height: 40px;
+  min-width: 320px;
+  display: flex;
+  align-items: center;
+  gap: 9px;
+  background: #fbfbfc;
+  border: 1px solid #dfe3e8;
+  border-radius: 10px;
+  padding: 0 12px;
+  color: #64748b;
+}
+
+.search-box input {
+  width: 100%;
+  border: 0;
+  outline: 0;
+  background: transparent;
+  color: #111827;
+  font-weight: 700;
+}
+
+
+.toolbar-select {
+  width: 200px;
+}
+
+.toolbar-select .custom-select-button {
+  height: 40px;
+}
+
+.chevron {
+  color: #64748b;
+  transition: transform 0.2s ease;
+  flex-shrink: 0;
+}
+
+.chevron.open {
+  transform: rotate(180deg);
 }