inboxlookup_screen 1.0.2

package/src/components/Service/OrdersMasterDetail.css

@@ -0,0 +1,427 @@
+.orders-container {
+    display: flex;
+    gap: 16px;
+    padding: 16px;
+    height: 90vh;
+}
+
+/* LEFT PANEL */
+.orders-left {
+    max-width: 15%;
+    background: #ffffff;
+    border-radius: 12px;
+    padding: 12px;
+    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
+    height: 100%;
+}
+
+.panel-title {
+    font-size: 18px;
+    font-weight: 600;
+    margin-bottom: 12px;
+}
+
+.order-item {
+    padding: 7px;
+    border-radius: 10px;
+    /* margin-bottom: 8px; */
+    cursor: pointer;
+    background: #f9fafb;
+    transition: all 0.2s ease;
+}
+
+.order-item:hover {
+    background: #fff;
+}
+
+/* RIGHT PANEL CARD */
+.excel-card {
+    background: #ffffff;
+    border-radius: 12px;
+    padding: 12px;
+    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.08);
+    height: 100%;
+}
+
+/* HEADER */
+.excel-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin-bottom: 12px;
+}
+
+.excel-header h2 {
+    margin: 0;
+    font-size: 18px;
+    font-weight: 600;
+    color: #2c2c2c;
+}
+
+/* ACTION BUTTONS */
+.excel-actions {
+    display: flex;
+    gap: 10px;
+}
+
+/* Improve DataGrid appearance */
+.dx-datagrid {
+    border-radius: 8px;
+}
+
+/* Header look like Excel */
+.dx-datagrid-headers {
+    background-color: #f5f7fa;
+    font-weight: 600;
+}
+
+/* Row hover */
+.dx-row:hover {
+    background-color: #f0f6ff;
+}
+
+/* Focused cell (Excel-like) */
+.dx-datagrid-focus-overlay {
+    border-color: #4a90e2;
+}
+
+.order-item.active {
+    background: #e0ecff;
+    border-left: 4px solid #3b82f6;
+}
+
+.order-id {
+    font-weight: 600;
+    color: #2563eb;
+}
+
+.order-customer {
+    font-size: 14px;
+    margin: 4px 0;
+}
+
+.status {
+    font-size: 12px;
+    padding: 4px 10px;
+    border-radius: 20px;
+    display: inline-block;
+}
+
+.status.pending {
+    background: #fef3c7;
+    color: #92400e;
+}
+
+.status.completed {
+    background: #d1fae5;
+    color: #065f46;
+}
+
+.dx-list:not(.dx-list-select-decorator-enabled) .dx-list-item.dx-state-focused.dx-list-item-selected {
+    /* background-color: rgba(0, 0, 0, .1); */
+    background-color: white !important;
+
+    color: #333;
+}
+
+.dx-list:not(.dx-list-select-decorator-enabled) .dx-list-item.dx-list-item-selected {
+    /* background-color: rgba(0, 0, 0, .1); */
+    color: #333;
+}
+
+.dx-list:not(.dx-list-select-decorator-enabled) .dx-list-item.dx-list-item-selected {
+    background-color: white !important;
+    color: #333;
+}
+
+/* RIGHT PANEL */
+.orders-right {
+    flex: 1;
+    max-width: 82%;
+    background: #ffffff;
+    border-radius: 12px;
+
+    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
+}
+
+.details-grid {
+    display: grid;
+    grid-template-columns: 150px 1fr;
+    row-gap: 16px;
+    margin-top: 24px;
+}
+
+.label {
+    font-weight: 600;
+    color: #6b7280;
+}
+
+.value {
+    font-weight: 500;
+}
+
+.edit-btn {
+    margin-top: 32px;
+}
+
+/* Make popup stick to right side */
+.right-side-popup .dx-overlay-content {
+    padding: 0;
+    border-radius: 0;
+}
+
+/* Popup body full height */
+.popup-content {
+    height: calc(100vh - 48px);
+    /* adjust for title bar */
+    overflow-y: auto;
+    padding: 16px;
+    background: #fff;
+}
+
+/* Form styling */
+.popup-content .form-group {
+    display: flex;
+    flex-direction: column;
+    margin-bottom: 12px;
+}
+
+.popup-content label {
+    font-size: 13px;
+    font-weight: 500;
+    margin-bottom: 4px;
+}
+
+.popup-content input {
+    height: 36px;
+    padding: 6px 8px;
+    border: 1px solid #dcdcdc;
+    border-radius: 4px;
+    background: #f9f9f9;
+}
+
+.custom-search-wrapper {
+    width: 100%;
+    margin: 12px 0 16px;
+}
+
+.custom-search-bar {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+}
+
+.custom-search-history {
+    margin-top: 6px;
+    background: #ffffff;
+    border-radius: 10px;
+    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
+    padding: 6px;
+    max-height: 240px;
+    overflow-y: auto;
+}
+
+.custom-history-item {
+    padding: 10px 14px;
+    border-radius: 8px;
+    font-size: 14px;
+    cursor: pointer;
+    transition: all 0.2s ease;
+    color: #333;
+}
+
+.custom-history-item:hover {
+    background: #eef4ff;
+}
+
+.custom-no-history {
+    padding: 14px;
+    text-align: center;
+    font-size: 13px;
+    color: #999;
+}
+
+/* Make DataGrid search panel full width */
+.dx-datagrid-search-panel {
+    width: 100% !important;
+}
+
+/* Stretch input inside search panel */
+.dx-datagrid-search-panel .dx-texteditor {
+    width: 100% !important;
+}
+
+.grid-search-wrapper {
+    position: relative;
+}
+
+/* Accordion below search panel */
+.search-history-accordion {
+    background: #fff;
+    border: 1px solid #e0e0e0;
+    border-radius: 0 0 6px 6px;
+    margin-bottom: 8px;
+    max-height: 220px;
+    overflow-y: auto;
+}
+
+/* Item */
+.search-history-item {
+    padding: 10px 14px;
+    cursor: pointer;
+    font-size: 14px;
+}
+
+.search-history-item:hover {
+    background-color: #e6f0ff;
+}
+
+.no-history {
+    padding: 12px;
+    text-align: center;
+    color: #999;
+}
+
+/*orderMaster*/
+.Ordermaster {
+    display: flex;
+    gap: 30px;
+    width: 100%;
+}
+
+.ordermasterbox {
+    Box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
+    padding: 30px;
+    MARGIN: 10PX 0;
+    border-radius: 5px;
+}
+
+.levellist>label {
+    display: block;
+}
+
+.levellist.first {
+    max-width: 70%;
+    flex: 1;
+}
+
+.levellist.second {
+    max-width: 15%;
+    flex: 1;
+}
+
+.levellist.third {
+    max-width: 15%;
+    flex: 1;
+}
+
+.orderbutton {
+    border: none;
+    background: #113e70;
+    padding: 6px 15px;
+    border-radius: 5px;
+    margin-top: 20px;
+    color: #fff;
+    cursor: pointer;
+}
+
+
+.Ordermaster input,
+select {
+    width: 100%;
+    padding: 5px;
+    height: 25px;
+}
+
+/* Container */
+.ordermasterbox {
+    background: #ffffff;
+    padding: 16px 20px;
+    border-radius: 10px;
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
+    margin-bottom: 16px;
+}
+
+/* Main row */
+.Ordermaster {
+    display: flex;
+    align-items: flex-end;
+    gap: 20px;
+    flex-wrap: wrap;
+}
+
+/* Each field */
+.levellist {
+    display: flex;
+    flex-direction: column;
+    gap: 6px;
+}
+
+/* Width control */
+.levellist.first {
+    flex: 2;
+    min-width: 260px;
+}
+
+.levellist.second,
+.levellist.third {
+    flex: 1;
+    min-width: 160px;
+}
+
+.levellist.action {
+    min-width: 120px;
+}
+
+/* Labels */
+.levellist label {
+    font-size: 13px;
+    font-weight: 500;
+    color: #555;
+}
+
+/* Inputs */
+.form-control {
+    height: 38px;
+    padding: 6px 10px;
+    font-size: 14px;
+    border-radius: 6px;
+    border: 1px solid #dcdcdc;
+    outline: none;
+}
+
+.form-control:focus {
+    border-color: #1976d2;
+    box-shadow: 0 0 0 2px rgba(25, 118, 210, 0.15);
+}
+
+/* Search button */
+.orderbutton {
+    height: 38px;
+    padding: 0 20px;
+    background: #1976d2;
+    color: #fff;
+    border: none;
+    border-radius: 6px;
+    font-size: 14px;
+    font-weight: 500;
+    margin-left: 10px;
+    cursor: pointer;
+    transition: background 0.2s ease;
+}
+
+.orderbutton:hover {
+    background: #125aa3;
+}
+
+/* Responsive */
+@media (max-width: 900px) {
+    .Ordermaster {
+        flex-direction: column;
+        align-items: stretch;
+    }
+
+    .levellist {
+        width: 100%;
+    }
+}