Merge branch 'master' into cam

.gitignore

+kgOrdersClient/.vscode/
 kgOrdersClient/__history/
 kgOrdersClient/__recovery/
 kgOrdersClient/TMSWeb
@@ -17,3 +18,4 @@ kgOrdersServer/Source/__recovery/
 *.identcache
 *.res
 *.tvsconfig
+

kgOrdersClient/View.AddOrder.dfm

+object FAddOrder: TFAddOrder
+  Width = 982
+  Height = 633
+  CSSLibrary = cssBootstrap
+  ElementFont = efCSS
+  Font.Charset = ANSI_CHARSET
+  Font.Color = clBlack
+  Font.Height = -11
+  Font.Name = 'Arial'
+  Font.Style = []
+  ParentFont = False
+  object cbWebPlate: TWebCheckBox
+    Left = 58
+    Top = 53
+    Width = 113
+    Height = 22
+    Caption = 'Web Plate'
+    ChildOrder = 5
+    ElementID = 'cbwebplate'
+    ElementFont = efCSS
+    HeightStyle = ssAuto
+    HeightPercent = 100.000000000000000000
+    WidthStyle = ssAuto
+    WidthPercent = 100.000000000000000000
+    OnClick = cbWebPlateClick
+  end
+  object cbCorrugatedPlate: TWebCheckBox
+    Left = 177
+    Top = 53
+    Width = 113
+    Height = 22
+    Caption = 'Corrugated Plate'
+    Checked = True
+    ChildOrder = 5
+    ElementID = 'cbcorrugatedplate'
+    ElementFont = efCSS
+    HeightStyle = ssAuto
+    HeightPercent = 100.000000000000000000
+    State = cbChecked
+    WidthStyle = ssAuto
+    WidthPercent = 100.000000000000000000
+    OnClick = cbCorrugatedPlateClick
+  end
+  object edtSearch: TWebEdit
+    Left = 300
+    Top = 53
+    Width = 146
+    Height = 22
+    ChildOrder = 8
+    ElementID = 'edtTEST'
+    ElementFont = efCSS
+    HeightStyle = ssAuto
+    HeightPercent = 100.000000000000000000
+    WidthStyle = ssAuto
+    WidthPercent = 100.000000000000000000
+    OnChange = edtSearchChange
+  end
+  object edtID: TWebEdit
+    Left = 475
+    Top = 55
+    Width = 121
+    Height = 22
+    ChildOrder = 8
+    ElementID = 'edtid'
+    ElementFont = efCSS
+    HeightStyle = ssAuto
+    HeightPercent = 100.000000000000000000
+    WidthStyle = ssAuto
+    WidthPercent = 100.000000000000000000
+  end
+  object btnConfirm: TWebButton
+    Left = 610
+    Top = 52
+    Width = 96
+    Height = 25
+    Caption = 'Confirm'
+    ChildOrder = 9
+    ElementID = 'btnconfirm'
+    ElementFont = efCSS
+    HeightStyle = ssAuto
+    HeightPercent = 100.000000000000000000
+    WidthStyle = ssAuto
+    WidthPercent = 100.000000000000000000
+    OnClick = btnConfirmClick
+  end
+  object btnCancel: TWebButton
+    Left = 722
+    Top = 52
+    Width = 96
+    Height = 25
+    Caption = 'Cancel'
+    ChildOrder = 9
+    ElementID = 'btncancel'
+    ElementFont = efCSS
+    HeightStyle = ssAuto
+    HeightPercent = 100.000000000000000000
+    WidthStyle = ssAuto
+    WidthPercent = 100.000000000000000000
+    OnClick = btnCancelClick
+  end
+  object pnlFNCGrid: TWebPanel
+    Left = 0
+    Top = 124
+    Width = 982
+    Height = 509
+    ElementID = 'pnlfncgrid'
+    Align = alBottom
+    ChildOrder = 10
+    ElementPosition = epRelative
+    TabOrder = 6
+    object TMSFNCGrid1: TTMSFNCGrid
+      Left = 0
+      Top = 0
+      Width = 982
+      Height = 509
+      Align = alClient
+      ParentDoubleBuffered = False
+      DoubleBuffered = True
+      TabOrder = 0
+      DefaultRowHeight = 40.000000000000000000
+      FixedColumns = 0
+      ColumnCount = 0
+      RowCount = 1
+      Options.Bands.Enabled = True
+      Options.ColumnSize.Stretch = True
+      Options.Editing.CalcFormat = '%g'
+      Options.Filtering.MultiColumn = True
+      Options.Grouping.CalcFormat = '%g'
+      Options.Grouping.GroupCountFormat = '(%d)'
+      Options.IO.XMLEncoding = 'ISO-8859-1'
+      Options.Mouse.ColumnSizing = True
+      Options.Mouse.ClickMargin = 0
+      Options.Mouse.ColumnSizeMargin = 6
+      Options.Mouse.RowSizing = True
+      Options.Mouse.RowSizeMargin = 6
+      Options.Mouse.FixedColumnSizing = True
+      Options.Mouse.FixedRowSizing = True
+      OnSelectedCell = TMSFNCGrid1SelectedCell
+      Columns = <
+        item
+          BorderWidth = 1
+          FixedFont.Charset = DEFAULT_CHARSET
+          FixedFont.Color = clWindowText
+          FixedFont.Height = -11
+          FixedFont.Name = 'Tahoma'
+          FixedFont.Style = []
+          Font.Charset = DEFAULT_CHARSET
+          Font.Color = clWindowText
+          Font.Height = -11
+          Font.Name = 'Tahoma'
+          Font.Style = []
+          ID = ''
+          Width = 68.000000000000000000
+        end
+        item
+          BorderWidth = 1
+          FixedFont.Charset = DEFAULT_CHARSET
+          FixedFont.Color = clWindowText
+          FixedFont.Height = -11
+          FixedFont.Name = 'Tahoma'
+          FixedFont.Style = []
+          Font.Charset = DEFAULT_CHARSET
+          Font.Color = clWindowText
+          Font.Height = -11
+          Font.Name = 'Tahoma'
+          Font.Style = []
+          ID = ''
+          Width = 68.000000000000000000
+        end
+        item
+          BorderWidth = 1
+          FixedFont.Charset = DEFAULT_CHARSET
+          FixedFont.Color = clWindowText
+          FixedFont.Height = -11
+          FixedFont.Name = 'Tahoma'
+          FixedFont.Style = []
+          Font.Charset = DEFAULT_CHARSET
+          Font.Color = clWindowText
+          Font.Height = -11
+          Font.Name = 'Tahoma'
+          Font.Style = []
+          ID = ''
+          Width = 845.000000000000000000
+        end>
+      DefaultFont.Charset = DEFAULT_CHARSET
+      DefaultFont.Color = clBlack
+      DefaultFont.Height = -11
+      DefaultFont.Name = 'Segoe UI'
+      DefaultFont.Style = []
+      TopRow = 1
+      Appearance.FixedLayout.Fill.Color = 16380654
+      Appearance.FixedLayout.Fill.ColorTo = 16382457
+      Appearance.FixedLayout.Font.Charset = DEFAULT_CHARSET
+      Appearance.FixedLayout.Font.Color = 4539717
+      Appearance.FixedLayout.Font.Height = -13
+      Appearance.FixedLayout.Font.Name = 'Tahoma'
+      Appearance.FixedLayout.Font.Style = [fsBold]
+      Appearance.NormalLayout.Fill.Color = 16578806
+      Appearance.NormalLayout.Font.Charset = DEFAULT_CHARSET
+      Appearance.NormalLayout.Font.Color = 8026746
+      Appearance.NormalLayout.Font.Height = -11
+      Appearance.NormalLayout.Font.Name = 'Tahoma'
+      Appearance.NormalLayout.Font.Style = []
+      Appearance.GroupLayout.Fill.Color = 12817262
+      Appearance.GroupLayout.Fill.ColorTo = 15385233
+      Appearance.GroupLayout.Stroke.Color = 15987699
+      Appearance.GroupLayout.Font.Charset = DEFAULT_CHARSET
+      Appearance.GroupLayout.Font.Color = clBlack
+      Appearance.GroupLayout.Font.Height = -11
+      Appearance.GroupLayout.Font.Name = 'Tahoma'
+      Appearance.GroupLayout.Font.Style = []
+      Appearance.SummaryLayout.Fill.Color = 14009785
+      Appearance.SummaryLayout.Fill.ColorTo = 15385233
+      Appearance.SummaryLayout.Stroke.Color = 15987699
+      Appearance.SummaryLayout.Font.Charset = DEFAULT_CHARSET
+      Appearance.SummaryLayout.Font.Color = clBlack
+      Appearance.SummaryLayout.Font.Height = -11
+      Appearance.SummaryLayout.Font.Name = 'Tahoma'
+      Appearance.SummaryLayout.Font.Style = []
+      Appearance.SelectedLayout.Fill.Color = 16441019
+      Appearance.SelectedLayout.Fill.ColorTo = 15385233
+      Appearance.SelectedLayout.Font.Charset = DEFAULT_CHARSET
+      Appearance.SelectedLayout.Font.Color = 4539717
+      Appearance.SelectedLayout.Font.Height = -11
+      Appearance.SelectedLayout.Font.Name = 'Tahoma'
+      Appearance.SelectedLayout.Font.Style = []
+      Appearance.FocusedLayout.Fill.Color = 16039284
+      Appearance.FocusedLayout.Fill.ColorTo = 15385233
+      Appearance.FocusedLayout.Font.Charset = DEFAULT_CHARSET
+      Appearance.FocusedLayout.Font.Color = 4539717
+      Appearance.FocusedLayout.Font.Height = -11
+      Appearance.FocusedLayout.Font.Name = 'Tahoma'
+      Appearance.FocusedLayout.Font.Style = []
+      Appearance.FixedSelectedLayout.Fill.Color = clLightsteelblue
+      Appearance.FixedSelectedLayout.Fill.ColorTo = 15385233
+      Appearance.FixedSelectedLayout.Font.Charset = DEFAULT_CHARSET
+      Appearance.FixedSelectedLayout.Font.Color = clBlack
+      Appearance.FixedSelectedLayout.Font.Height = -11
+      Appearance.FixedSelectedLayout.Font.Name = 'Tahoma'
+      Appearance.FixedSelectedLayout.Font.Style = []
+      Appearance.BandLayout.Fill.Color = 16711679
+      Appearance.BandLayout.Font.Charset = DEFAULT_CHARSET
+      Appearance.BandLayout.Font.Color = 8026746
+      Appearance.BandLayout.Font.Height = -11
+      Appearance.BandLayout.Font.Name = 'Tahoma'
+      Appearance.BandLayout.Font.Style = []
+      Appearance.ProgressLayout.Color = 15385233
+      Appearance.ProgressLayout.Format = '%.0f%%'
+      LeftCol = 0
+      ScrollMode = scmItemScrolling
+      DesignTimeSampleData = True
+    end
+  end
+  object XDataWebClient1: TXDataWebClient
+    Connection = DMConnection.ApiConnection
+    Left = 382
+    Top = 576
+  end
+  object xdwdsCustomers: TXDataWebDataSet
+    Connection = DMConnection.ApiConnection
+    Left = 288
+    Top = 578
+    object xdwdsCustomersID: TIntegerField
+      FieldName = 'ID'
+    end
+    object xdwdsCustomersNAME: TStringField
+      FieldName = 'NAME'
+    end
+    object xdwdsCustomersSHORT_NAME: TStringField
+      FieldName = 'SHORT_NAME'
+    end
+    object xdwdsCustomersADDRESS: TStringField
+      FieldName = 'ADDRESS'
+    end
+  end
+  object wdsCustomers: TWebDataSource
+    DataSet = xdwdsCustomers
+    Left = 38
+    Top = 562
+  end
+end

kgOrdersClient/View.AddOrder.html

+<div class="container-fluid">
+    <!-- Row 1: Checkboxes, Search/ID input, and Buttons -->
+    <div class="row mt-3 g-2 justify-content-center align-items-center">
+        <!-- Checkbox 1: Web Plate -->
+        <div class="col-auto d-flex align-items-center">
+            <div class="form-check form-check-lg mt-4 me-2">
+                <label class="form-check-label ms-2" for="cbwebplate">Web Plate</label>
+                <input class="form-check-input" type="checkbox" id="cbwebplate">
+            </div>
+        </div>
+        <!-- Checkbox 2: Corrugated Plate -->
+        <div class="col-auto d-flex align-items-center">
+            <div class="form-check form-check-lg mt-4 me-2">
+                <label class="form-check-label ms-2" for="cbcorrugatedplate">Corrugated Plate</label>
+                <input class="form-check-input" type="checkbox" id="cbcorrugatedplate" checked>
+            </div>
+        </div>
+        <!-- Search Input -->
+        <div class="col-auto">
+            <label for="edtsearch" class="form-label mb-0">Enter Customer Info</label>
+            <input  id="edtTEST" type="text" class="form-control">
+        </div>
+        <!-- Selected ID -->
+        <div class="col-auto">
+            <label for="edtid" class="form-label mb-0">Selected ID</label>
+            <input type="text" class="form-control" id="edtid">
+        </div>
+        <!-- Buttons -->
+        <div class="col-auto d-flex justify-content-end">
+            <button id="btnconfirm" class="btn btn-primary mt-3 me-2">Confirm</button>
+            <button id="btncancel" class="btn btn-secondary mt-3">Cancel</button>
+        </div>
+    </div>
+
+    <!-- Row 2: FNC Grid -->
+    <div class="row mt-3">
+        <div class="col-12">
+            <div id="pnlfncgrid" class="grid-container border border-1">
+                <!-- TMS FNC Grid will be rendered here -->
+            </div>
+        </div>
+    </div>
+</div>
+

kgOrdersClient/View.OrderList.pas → kgOrdersClient/View.AddOrder.pas

-unit View.OrderList;
+unit View.AddOrder;
 
 interface
 
@@ -10,19 +10,10 @@ uses
   VCL.TMSFNCGridCell, VCL.TMSFNCGridOptions, VCL.TMSFNCCustomComponent,
   VCL.TMSFNCCustomGrid, VCL.TMSFNCGridDatabaseAdapter, VCL.TMSFNCCustomControl,
   VCL.TMSFNCCustomScrollControl, WEBLib.DB, XData.Web.JsonDataset, Vcl.StdCtrls,
-  Vcl.Controls, ConnectionModule;
+  Vcl.Controls, ConnectionModule, WEBLib.WebCtrls;
 
 type
-  TFOrderList = class(TWebForm)
-    lblEntries: TWebLabel;
-    lblEntries2: TWebLabel;
-    edtSearch: TWebEdit;
-    edtCompanyName: TWebEdit;
-    edtID: TWebEdit;
-    pnlMessage: TWebPanel;
-    lblMessage: TWebLabel;
-    btnCloseNotification: TWebButton;
-    btnFilter: TWebButton;
+  TFAddOrder = class(TWebForm)
     XDataWebClient1: TXDataWebClient;
     wdsCustomers: TWebDataSource;
     xdwdsCustomers: TXDataWebDataSet;
@@ -30,37 +21,57 @@ type
     xdwdsCustomersNAME: TStringField;
     xdwdsCustomersSHORT_NAME: TStringField;
     xdwdsCustomersADDRESS: TStringField;
-    TMSFNCGrid1: TTMSFNCGrid;
-    btnConfirm: TWebButton;
-    cbCorrugatedPlate: TWebCheckBox;
     cbWebPlate: TWebCheckBox;
-    procedure WebFormShow(Sender: TObject);
-    procedure btnFilterClick(Sender: TObject);
+    cbCorrugatedPlate: TWebCheckBox;
+    edtSearch: TWebEdit;
+    edtID: TWebEdit;
+    btnConfirm: TWebButton;
+    btnCancel: TWebButton;
+    pnlFNCGrid: TWebPanel;
+    TMSFNCGrid1: TTMSFNCGrid;
     procedure cbCorrugatedPlateClick(Sender: TObject);
     procedure cbWebPlateClick(Sender: TObject);
     procedure btnConfirmClick(Sender: TObject);
+    procedure btnCancelClick(Sender: TObject);
+    procedure TMSFNCGrid1SelectedCell(Sender: TObject; ACol, ARow: Integer);
     procedure edtSearchChange(Sender: TObject);
   private
-    [async] procedure getCustomers();
+    [async] procedure GetCustomers();
     procedure PopulateGridManually;
     procedure ApplyFilter;
   public
+  class function CreateForm(AElementID: string): TWebForm;
   end;
 
 var
-  FOrderList: TFOrderList;
+  FAddOrder: TFAddOrder;
 
 implementation
 
 {$R *.dfm}
 
-procedure TFOrderList.WebFormShow(Sender: TObject);
+
+class function TFAddOrder.CreateForm(AElementID: string): TWebForm;
 begin
-  getCustomers(); // Fetch and populate the grid with customer data
+  Application.CreateForm(TFAddOrder, AElementID, Result,
+    procedure(AForm: TObject)
+    begin
+      with TFAddOrder(AForm) do
+      begin
+        GetCustomers();
+      end;
+    end
+  );
 end;
 
-[async]
-procedure TFOrderList.getCustomers();
+
+procedure TFAddOrder.edtSearchChange(Sender: TObject);
+begin
+  ApplyFilter;
+end;
+
+
+[async] procedure TFAddOrder.GetCustomers();
 var
   xdcResponse: TXDataClientResponse;
   customerList: TJSObject;
@@ -78,7 +89,8 @@ begin
   PopulateGridManually;
 end;
 
-procedure TFOrderList.PopulateGridManually;
+
+procedure TFAddOrder.PopulateGridManually;
 var
   RowIndex: Integer;
 begin
@@ -87,12 +99,15 @@ begin
     TMSFNCGrid1.Clear; // Clear any existing data
 
     // Set up column headers
-    TMSFNCGrid1.ColumnCount := 4;
+    TMSFNCGrid1.ColumnCount := 3;
     TMSFNCGrid1.RowCount := 1;
     TMSFNCGrid1.Cells[0, 0] := 'ID';
-    TMSFNCGrid1.Cells[1, 0] := 'Name';
-    TMSFNCGrid1.Cells[2, 0] := 'Short Name';
-    TMSFNCGrid1.Cells[3, 0] := 'Address';
+    TMSFNCGrid1.Cells[1, 0] := 'Short Name';
+    TMSFNCGrid1.Cells[2, 0] := 'Name';
+
+//    TMSFNCGrid1.ColumnWidths[0] := 40;
+//    TMSFNCGrid1.ColumnWidths[1] := 80;
+//    TMSFNCGrid1.ColumnWidths[2] := 250;
 
     // Populate the grid with data from the dataset
     xdwdsCustomers.First;
@@ -103,79 +118,79 @@ begin
       TMSFNCGrid1.RowCount := RowIndex + 1;
 
       TMSFNCGrid1.Cells[0, RowIndex] := xdwdsCustomers.FieldByName('ID').AsString;
-      TMSFNCGrid1.Cells[1, RowIndex] := xdwdsCustomers.FieldByName('NAME').AsString;
-      TMSFNCGrid1.Cells[2, RowIndex] := xdwdsCustomers.FieldByName('SHORT_NAME').AsString;
-      TMSFNCGrid1.Cells[3, RowIndex] := xdwdsCustomers.FieldByName('ADDRESS').AsString;
+      TMSFNCGrid1.Cells[1, RowIndex] := xdwdsCustomers.FieldByName('SHORT_NAME').AsString;
+      TMSFNCGrid1.Cells[2, RowIndex] := xdwdsCustomers.FieldByName('NAME').AsString;
 
       Inc(RowIndex);
       xdwdsCustomers.Next;
     end;
 
-    // Auto-size columns
-    TMSFNCGrid1.AutoSizeColumns;
   finally
     TMSFNCGrid1.EndUpdate;
   end;
 end;
 
-procedure TFOrderList.ApplyFilter;
+
+procedure TFAddOrder.TMSFNCGrid1SelectedCell(Sender: TObject; ACol,
+  ARow: Integer);
+begin
+  edtID.Text := TMSFNCGrid1.Cells[0, ARow];
+end;
+
+
+procedure TFAddOrder.ApplyFilter;
 var
   fd: TTMSFNCGridFilterData;
   i: Integer;
   SearchText: string;
 begin
   SearchText := Trim(edtSearch.Text);
+  Console.Log('Filter Applied: ' + SearchText);
 
-  // Remove any existing filters
   TMSFNCGrid1.RemoveFilter;
-
-
   TMSFNCGrid1.Filter.Clear;
 
-  // Add a filter for each column
-  for i := 0 to TMSFNCGrid1.ColumnCount - 1 do
+  for i := 0 to 2 do
   begin
     fd := TMSFNCGrid1.Filter.Add;
     fd.Column := i;
     fd.Condition := '*' + SearchText + '*'; // Match text anywhere in the cell
-    fd.CaseSensitive := False; // Make the filter case-insensitive
+    fd.CaseSensitive := False;
 
-    // Use foOR for "match any column" logic
     if i > 0 then
       fd.Operation := foOR
     else
-      fd.Operation := foNONE; // First filter has no logical operation
+      fd.Operation := foNONE;
   end;
 
-  // Apply the filters to the grid
   TMSFNCGrid1.ApplyFilter;
 end;
 
 
-procedure TFOrderList.btnFilterClick(Sender: TObject);
-begin
-  ApplyFilter;
-end;
-
-procedure TFOrderList.cbCorrugatedPlateClick(Sender: TObject);
+procedure TFAddOrder.cbCorrugatedPlateClick(Sender: TObject);
 begin
   cbWebPlate.Checked := False;
 end;
 
-procedure TFOrderList.cbWebPlateClick(Sender: TObject);
+
+procedure TFAddOrder.cbWebPlateClick(Sender: TObject);
 begin
   cbCorrugatedPlate.Checked := False;
 end;
 
-procedure TFOrderList.btnConfirmClick(Sender: TObject);
+procedure TFAddOrder.btnConfirmClick(Sender: TObject);
 begin
-  Close;
+  edtID.Text := '';
+  window.location.reload(true);
 end;
 
-procedure TFOrderList.edtSearchChange(Sender: TObject);
+
+procedure TFAddOrder.btnCancelClick(Sender: TObject);
 begin
-  ApplyFilter;
+  edtID.Text := '';
+  Close;
 end;
 
+
 end.
 

kgOrdersClient/View.Main.dfm

@@ -128,7 +128,11 @@ object FViewMain: TFViewMain
     Width = 471
     Height = 369
     ElementID = 'main.webpanel'
+    HeightStyle = ssAuto
+    WidthStyle = ssAuto
     ChildOrder = 3
+    ElementFont = efCSS
+    ElementPosition = epIgnore
     TabOrder = 0
   end
   object WebMessageDlg1: TWebMessageDlg

kgOrdersClient/View.Main.html

@@ -45,13 +45,13 @@
         </div>
     </nav>
 
-    <div id="page-wrapper" class="container-fluid">
+    <div class="container-fluid">
         <div class="row">
             <div id="main.webpanel" class="col-12"></div>
         </div>
         <div class="row">
             <div class="col-12">
-                <div class="form-outline mb-4">
+                <div class="form-outline">
                     <textarea class="form-control" id="main.debugmemo" rows="4"></textarea>
                 </div>
             </div>

kgOrdersClient/View.OrderList.dfm

-object FOrderList: TFOrderList
-  Width = 1016
-  Height = 683
-  Font.Charset = ANSI_CHARSET
-  Font.Color = clBlack
-  Font.Height = -11
-  Font.Name = 'Arial'
-  Font.Style = []
-  ParentFont = False
-  OnShow = WebFormShow
-  object lblEntries: TWebLabel
-    Left = 0
-    Top = 336
-    Width = 77
-    Height = 14
-    Caption = 'Showing 0 of ...'
-    ElementID = 'lblentries'
-    ElementFont = efCSS
-    HeightStyle = ssAuto
-    HeightPercent = 100.000000000000000000
-    WidthPercent = 100.000000000000000000
-  end
-  object lblEntries2: TWebLabel
-    Left = 8
-    Top = 358
-    Width = 49
-    Height = 14
-    Caption = 'lblEntries2'
-    ElementID = 'lblentries2'
-    ElementFont = efCSS
-    HeightStyle = ssAuto
-    HeightPercent = 100.000000000000000000
-    WidthPercent = 100.000000000000000000
-  end
-  object pnlMessage: TWebPanel
-    Left = 24
-    Top = 57
-    Width = 121
-    Height = 33
-    ElementClassName = 'card'
-    ElementID = 'pnl_message'
-    ChildOrder = 5
-    ElementBodyClassName = 'card-body'
-    ElementFont = efCSS
-    ElementPosition = epRelative
-    Role = 'alert'
-    TabOrder = 0
-    object lblMessage: TWebLabel
-      Left = 28
-      Top = 9
-      Width = 44
-      Height = 14
-      Caption = 'Message'
-      ElementID = 'pnl_message'
-      ElementFont = efCSS
-      ElementPosition = epRelative
-      HeightStyle = ssAuto
-      HeightPercent = 100.000000000000000000
-      WidthPercent = 100.000000000000000000
-    end
-    object btnCloseNotification: TWebButton
-      Left = 96
-      Top = 3
-      Width = 22
-      Height = 25
-      ChildOrder = 1
-      ElementClassName = 'btn btn-light'
-      ElementID = 'view.login.message.button'
-      ElementFont = efCSS
-      ElementPosition = epRelative
-      HeightStyle = ssAuto
-      HeightPercent = 100.000000000000000000
-      Role = 'button'
-      WidthStyle = ssAuto
-      WidthPercent = 100.000000000000000000
-    end
-  end
-  object cbCorrugatedPlate: TWebCheckBox
-    Left = 172
-    Top = 210
-    Width = 113
-    Height = 22
-    Caption = 'Corrugated Plate'
-    Checked = True
-    ChildOrder = 5
-    HeightPercent = 100.000000000000000000
-    State = cbChecked
-    WidthPercent = 100.000000000000000000
-    OnClick = cbCorrugatedPlateClick
-  end
-  object cbWebPlate: TWebCheckBox
-    Left = 304
-    Top = 210
-    Width = 113
-    Height = 22
-    Caption = 'Web Plate'
-    ChildOrder = 5
-    HeightPercent = 100.000000000000000000
-    WidthPercent = 100.000000000000000000
-    OnClick = cbWebPlateClick
-  end
-  object edtCompanyName: TWebEdit
-    Left = 302
-    Top = 252
-    Width = 121
-    Height = 22
-    ChildOrder = 7
-    HeightPercent = 100.000000000000000000
-    WidthPercent = 100.000000000000000000
-  end
-  object edtID: TWebEdit
-    Left = 172
-    Top = 252
-    Width = 121
-    Height = 22
-    ChildOrder = 8
-    HeightPercent = 100.000000000000000000
-    WidthPercent = 100.000000000000000000
-  end
-  object btnConfirm: TWebButton
-    Left = 564
-    Top = 251
-    Width = 96
-    Height = 25
-    Caption = 'Confirm'
-    ChildOrder = 9
-    HeightPercent = 100.000000000000000000
-    WidthPercent = 100.000000000000000000
-    OnClick = btnConfirmClick
-  end
-  object btnFilter: TWebButton
-    Left = 564
-    Top = 195
-    Width = 96
-    Height = 25
-    Caption = 'Filter'
-    ChildOrder = 9
-    HeightPercent = 100.000000000000000000
-    WidthPercent = 100.000000000000000000
-    OnClick = btnFilterClick
-  end
-  object TMSFNCGrid1: TTMSFNCGrid
-    Left = 228
-    Top = 308
-    Width = 588
-    Height = 353
-    AdaptToStyle = True
-    ParentDoubleBuffered = False
-    DoubleBuffered = True
-    TabOrder = 7
-    DefaultRowHeight = 40.000000000000000000
-    FixedColumns = 0
-    ColumnCount = 0
-    RowCount = 1
-    Options.Bands.Enabled = True
-    Options.Editing.CalcFormat = '%g'
-    Options.Filtering.MultiColumn = True
-    Options.Grouping.CalcFormat = '%g'
-    Options.Grouping.GroupCountFormat = '(%d)'
-    Options.IO.XMLEncoding = 'ISO-8859-1'
-    Options.Mouse.ColumnSizing = True
-    Options.Mouse.ClickMargin = 0
-    Options.Mouse.ColumnSizeMargin = 6
-    Options.Mouse.RowSizing = True
-    Options.Mouse.RowSizeMargin = 6
-    Options.Mouse.FixedColumnSizing = True
-    Options.Mouse.FixedRowSizing = True
-    Columns = <
-      item
-        BorderWidth = 1
-        FixedFont.Charset = DEFAULT_CHARSET
-        FixedFont.Color = clWindowText
-        FixedFont.Height = -11
-        FixedFont.Name = 'Tahoma'
-        FixedFont.Style = []
-        Font.Charset = DEFAULT_CHARSET
-        Font.Color = clWindowText
-        Font.Height = -11
-        Font.Name = 'Tahoma'
-        Font.Style = []
-        ID = ''
-        Width = 68.000000000000000000
-      end
-      item
-        BorderWidth = 1
-        FixedFont.Charset = DEFAULT_CHARSET
-        FixedFont.Color = clWindowText
-        FixedFont.Height = -11
-        FixedFont.Name = 'Tahoma'
-        FixedFont.Style = []
-        Font.Charset = DEFAULT_CHARSET
-        Font.Color = clWindowText
-        Font.Height = -11
-        Font.Name = 'Tahoma'
-        Font.Style = []
-        ID = ''
-        Width = 68.000000000000000000
-      end
-      item
-        BorderWidth = 1
-        FixedFont.Charset = DEFAULT_CHARSET
-        FixedFont.Color = clWindowText
-        FixedFont.Height = -11
-        FixedFont.Name = 'Tahoma'
-        FixedFont.Style = []
-        Font.Charset = DEFAULT_CHARSET
-        Font.Color = clWindowText
-        Font.Height = -11
-        Font.Name = 'Tahoma'
-        Font.Style = []
-        ID = ''
-        Width = 68.000000000000000000
-      end
-      item
-        BorderWidth = 1
-        FixedFont.Charset = DEFAULT_CHARSET
-        FixedFont.Color = clWindowText
-        FixedFont.Height = -11
-        FixedFont.Name = 'Tahoma'
-        FixedFont.Style = []
-        Font.Charset = DEFAULT_CHARSET
-        Font.Color = clWindowText
-        Font.Height = -11
-        Font.Name = 'Tahoma'
-        Font.Style = []
-        ID = ''
-        Width = 68.000000000000000000
-      end
-      item
-        BorderWidth = 1
-        FixedFont.Charset = DEFAULT_CHARSET
-        FixedFont.Color = clWindowText
-        FixedFont.Height = -11
-        FixedFont.Name = 'Tahoma'
-        FixedFont.Style = []
-        Font.Charset = DEFAULT_CHARSET
-        Font.Color = clWindowText
-        Font.Height = -11
-        Font.Name = 'Tahoma'
-        Font.Style = []
-        ID = ''
-        Width = 68.000000000000000000
-      end>
-    DefaultFont.Charset = DEFAULT_CHARSET
-    DefaultFont.Color = clBlack
-    DefaultFont.Height = -11
-    DefaultFont.Name = 'Segoe UI'
-    DefaultFont.Style = []
-    Stroke.Color = 15987699
-    TopRow = 1
-    Appearance.FixedLayout.Fill.Kind = gfkGradient
-    Appearance.FixedLayout.Fill.Color = 16382457
-    Appearance.FixedLayout.Fill.ColorTo = 16382457
-    Appearance.FixedLayout.Stroke.Color = 15987699
-    Appearance.FixedLayout.Font.Charset = DEFAULT_CHARSET
-    Appearance.FixedLayout.Font.Color = clBlack
-    Appearance.FixedLayout.Font.Height = -11
-    Appearance.FixedLayout.Font.Name = 'Tahoma'
-    Appearance.FixedLayout.Font.Style = [fsBold]
-    Appearance.NormalLayout.Fill.Color = -1
-    Appearance.NormalLayout.Stroke.Color = 15987699
-    Appearance.NormalLayout.Font.Charset = DEFAULT_CHARSET
-    Appearance.NormalLayout.Font.Color = clBlack
-    Appearance.NormalLayout.Font.Height = -11
-    Appearance.NormalLayout.Font.Name = 'Tahoma'
-    Appearance.NormalLayout.Font.Style = []
-    Appearance.GroupLayout.Fill.Kind = gfkGradient
-    Appearance.GroupLayout.Fill.Color = 15385233
-    Appearance.GroupLayout.Fill.ColorTo = 15385233
-    Appearance.GroupLayout.Stroke.Color = 15987699
-    Appearance.GroupLayout.Font.Charset = DEFAULT_CHARSET
-    Appearance.GroupLayout.Font.Color = clBlack
-    Appearance.GroupLayout.Font.Height = -11
-    Appearance.GroupLayout.Font.Name = 'Tahoma'
-    Appearance.GroupLayout.Font.Style = []
-    Appearance.SummaryLayout.Fill.Kind = gfkGradient
-    Appearance.SummaryLayout.Fill.Color = 15385233
-    Appearance.SummaryLayout.Fill.ColorTo = 15385233
-    Appearance.SummaryLayout.Stroke.Color = 15987699
-    Appearance.SummaryLayout.Font.Charset = DEFAULT_CHARSET
-    Appearance.SummaryLayout.Font.Color = clBlack
-    Appearance.SummaryLayout.Font.Height = -11
-    Appearance.SummaryLayout.Font.Name = 'Tahoma'
-    Appearance.SummaryLayout.Font.Style = []
-    Appearance.SelectedLayout.Fill.Kind = gfkGradient
-    Appearance.SelectedLayout.Fill.Color = 15385233
-    Appearance.SelectedLayout.Fill.ColorTo = 15385233
-    Appearance.SelectedLayout.Stroke.Color = 15987699
-    Appearance.SelectedLayout.Font.Charset = DEFAULT_CHARSET
-    Appearance.SelectedLayout.Font.Color = clBlack
-    Appearance.SelectedLayout.Font.Height = -11
-    Appearance.SelectedLayout.Font.Name = 'Tahoma'
-    Appearance.SelectedLayout.Font.Style = []
-    Appearance.FocusedLayout.Fill.Kind = gfkGradient
-    Appearance.FocusedLayout.Fill.Color = 15385233
-    Appearance.FocusedLayout.Fill.ColorTo = 15385233
-    Appearance.FocusedLayout.Stroke.Color = 15987699
-    Appearance.FocusedLayout.Font.Charset = DEFAULT_CHARSET
-    Appearance.FocusedLayout.Font.Color = clBlack
-    Appearance.FocusedLayout.Font.Height = -11
-    Appearance.FocusedLayout.Font.Name = 'Tahoma'
-    Appearance.FocusedLayout.Font.Style = []
-    Appearance.FixedSelectedLayout.Fill.Kind = gfkGradient
-    Appearance.FixedSelectedLayout.Fill.Color = 15385233
-    Appearance.FixedSelectedLayout.Fill.ColorTo = 15385233
-    Appearance.FixedSelectedLayout.Stroke.Color = 15987699
-    Appearance.FixedSelectedLayout.Font.Charset = DEFAULT_CHARSET
-    Appearance.FixedSelectedLayout.Font.Color = clBlack
-    Appearance.FixedSelectedLayout.Font.Height = -11
-    Appearance.FixedSelectedLayout.Font.Name = 'Tahoma'
-    Appearance.FixedSelectedLayout.Font.Style = []
-    Appearance.BandLayout.Fill.Color = clLightyellow
-    Appearance.BandLayout.Stroke.Color = 15987699
-    Appearance.BandLayout.Font.Charset = DEFAULT_CHARSET
-    Appearance.BandLayout.Font.Color = clWindowText
-    Appearance.BandLayout.Font.Height = -11
-    Appearance.BandLayout.Font.Name = 'Tahoma'
-    Appearance.BandLayout.Font.Style = []
-    Appearance.ProgressLayout.Color = 15385233
-    Appearance.ProgressLayout.Format = '%.0f%%'
-    LeftCol = 0
-    ScrollMode = scmItemScrolling
-    DesignTimeSampleData = True
-  end
-  object edtSearch: TWebEdit
-    Left = 437
-    Top = 198
-    Width = 121
-    Height = 22
-    ChildOrder = 8
-    HeightPercent = 100.000000000000000000
-    WidthPercent = 100.000000000000000000
-    OnChange = edtSearchChange
-  end
-  object XDataWebClient1: TXDataWebClient
-    Connection = DMConnection.ApiConnection
-    Left = 88
-    Top = 434
-  end
-  object xdwdsCustomers: TXDataWebDataSet
-    Connection = DMConnection.ApiConnection
-    Left = 84
-    Top = 490
-    object xdwdsCustomersID: TIntegerField
-      FieldName = 'ID'
-    end
-    object xdwdsCustomersNAME: TStringField
-      FieldName = 'NAME'
-    end
-    object xdwdsCustomersSHORT_NAME: TStringField
-      FieldName = 'SHORT_NAME'
-    end
-    object xdwdsCustomersADDRESS: TStringField
-      FieldName = 'ADDRESS'
-    end
-  end
-  object wdsCustomers: TWebDataSource
-    DataSet = xdwdsCustomers
-    Left = 38
-    Top = 562
-  end
-end

kgOrdersClient/View.OrderList.html

-<div class="row">
-    <div class="col-12">
-        <div class="container mt-4">
-            <div class="row justify-content-center">
-                <div class="col-12 col-md-8">
-                    <div class="row">
-                        <div class="col-sm">
-                            <div id="pnl_message" class="alert alert-danger">
-                                <button id="view.login.message.button" type="button" class="btn-close" aria-label="Close"></button>
-                                <span id="view.login.message.label"></span>
-                            </div>
-                        </div>
-                    </div>
-                    <div class="row">
-                        <label id="lblentries"></label>
-                    </div>
-
-                    <label id="lblentries2"></label>
-                    <nav aria-label="Page navigation">
-                        <ul class="pagination justify-content-center" id="pagination">
-                            <!-- Pagination items will be added dynamically via Delphi code -->
-                        </ul>
-                    </nav>
-                </div>
-            </div>
-        </div>
-    </div>

kgOrdersClient/View.Orders.dfm

@@ -12,8 +12,8 @@ object FViewOrders: TFViewOrders
   OnCreate = WebFormCreate
   OnShow = WebFormShow
   object lblEntries: TWebLabel
-    Left = 0
-    Top = 336
+    Left = 68
+    Top = 333
     Width = 77
     Height = 13
     Caption = 'Showing 0 of ...'
@@ -23,46 +23,17 @@ object FViewOrders: TFViewOrders
     HeightPercent = 100.000000000000000000
     WidthPercent = 100.000000000000000000
   end
-  object lblEntries2: TWebLabel
-    Left = 8
-    Top = 358
-    Width = 49
-    Height = 13
-    Caption = 'lblEntries2'
-    ElementID = 'lblentries2'
-    ElementFont = efCSS
-    HeightStyle = ssAuto
-    HeightPercent = 100.000000000000000000
-    WidthPercent = 100.000000000000000000
-  end
-  object wcbPageSize: TWebComboBox
-    Left = -4
-    Top = 52
-    Width = 145
-    Height = 21
-    ElementClassName = 'custom-select'
-    ElementID = 'wcbpagesize'
-    ElementFont = efCSS
-    HeightStyle = ssAuto
-    HeightPercent = 100.000000000000000000
-    Text = '10'
-    WidthPercent = 100.000000000000000000
-    ItemIndex = -1
-    Items.Strings = (
-      '10'
-      '25'
-      '50')
-  end
   object wcbSortBy: TWebComboBox
-    Left = 0
-    Top = 18
+    Left = 368
+    Top = 16
     Width = 145
     Height = 21
-    ElementClassName = 'custom-select'
     ElementID = 'wcbsortby'
     ElementFont = efCSS
     HeightStyle = ssAuto
     HeightPercent = 100.000000000000000000
+    TabOrder = 4
+    TabStop = False
     Text = 'PROOF DONE'
     WidthPercent = 100.000000000000000000
     ItemIndex = -1
@@ -85,20 +56,22 @@ object FViewOrders: TFViewOrders
     Height = 25
     Caption = 'Apply'
     ChildOrder = 7
-    ElementClassName = 'btn btn-light'
     ElementID = 'btnapply'
     ElementFont = efCSS
     HeightStyle = ssAuto
     HeightPercent = 100.000000000000000000
+    TabOrder = 5
+    TabStop = False
     WidthPercent = 100.000000000000000000
     OnClick = btnApplyClick
   end
   object edtSearch: TWebEdit
-    Left = 48
-    Top = 382
+    Left = 35
+    Top = 16
     Width = 121
     Height = 22
     HelpType = htKeyword
+    TabStop = False
     ChildOrder = 8
     ElementClassName = 'form-control'
     ElementID = 'edtsearch'
@@ -106,44 +79,46 @@ object FViewOrders: TFViewOrders
     HeightStyle = ssAuto
     HeightPercent = 100.000000000000000000
     HideSelection = False
+    TabOrder = 1
     WidthPercent = 100.000000000000000000
   end
-  object btnaddOrder: TWebButton
-    Left = 0
+  object btnAddOrder: TWebButton
+    Left = 59
     Top = 79
     Width = 96
     Height = 25
     Caption = 'Add Order'
     ChildOrder = 5
-    ElementClassName = 'btn btn-light'
     ElementID = 'btnaddorder'
     ElementFont = efCSS
     HeightStyle = ssAuto
     HeightPercent = 100.000000000000000000
+    TabOrder = 6
+    TabStop = False
     WidthPercent = 100.000000000000000000
-    OnClick = btnaddOrderClick
+    OnClick = btnAddOrderClick
   end
   object btnFilters: TWebButton
-    Left = 542
-    Top = 50
+    Left = 462
+    Top = 79
     Width = 96
     Height = 25
     Caption = 'Show Filters'
     ChildOrder = 6
-    ElementClassName = 'btn btn-light'
     ElementID = 'btnfilters'
     ElementFont = efCSS
     HeightStyle = ssAuto
     HeightPercent = 100.000000000000000000
+    TabOrder = 9
+    TabStop = False
     WidthPercent = 100.000000000000000000
     OnClick = btnFiltersClick
   end
   object dtpStartDate: TWebDateTimePicker
     Left = 168
     Top = 16
-    Width = 170
+    Width = 85
     Height = 22
-    ElementClassName = 'form-control'
     ElementID = 'dtpstartdate'
     HeightStyle = ssAuto
     BorderStyle = bsSingle
@@ -152,14 +127,15 @@ object FViewOrders: TFViewOrders
     Date = 45553.505972858790000000
     ElementFont = efCSS
     Role = ''
+    TabOrder = 2
+    TabStop = False
     Text = ''
   end
   object dtpEndDate: TWebDateTimePicker
-    Left = 356
+    Left = 266
     Top = 16
-    Width = 170
+    Width = 87
     Height = 22
-    ElementClassName = 'form-control'
     ElementID = 'dtpenddate'
     HeightStyle = ssAuto
     BorderStyle = bsSingle
@@ -168,12 +144,14 @@ object FViewOrders: TFViewOrders
     Date = 45553.505972858790000000
     ElementFont = efCSS
     Role = ''
+    TabOrder = 3
+    TabStop = False
     Text = ''
   end
   object pnlMessage: TWebPanel
-    Left = 220
-    Top = 429
-    Width = 121
+    Left = 82
+    Top = 352
+    Width = 125
     Height = 33
     ElementClassName = 'card'
     ElementID = 'pnl_message'
@@ -182,10 +160,10 @@ object FViewOrders: TFViewOrders
     ElementFont = efCSS
     ElementPosition = epRelative
     Role = 'alert'
-    TabOrder = 8
+    TabOrder = 7
     object lblMessage: TWebLabel
-      Left = 28
-      Top = 9
+      Left = 32
+      Top = 11
       Width = 42
       Height = 13
       Caption = 'Message'
@@ -215,74 +193,58 @@ object FViewOrders: TFViewOrders
     end
   end
   object WebButton1: TWebButton
-    Left = 174
+    Left = 188
     Top = 79
     Width = 96
     Height = 25
     Caption = 'Set Status'
     ChildOrder = 11
-    ElementClassName = 'btn btn-light'
     ElementID = 'btnsetstatus'
     ElementFont = efCSS
     HeightStyle = ssAuto
     HeightPercent = 100.000000000000000000
+    TabOrder = 7
+    TabStop = False
     WidthPercent = 100.000000000000000000
   end
   object WebButton2: TWebButton
-    Left = 344
+    Left = 328
     Top = 79
     Width = 96
     Height = 25
     Caption = 'PDF'
     ChildOrder = 12
-    ElementClassName = 'btn btn-light'
     ElementID = 'btngeneratepdf'
     ElementFont = efCSS
     HeightStyle = ssAuto
     HeightPercent = 100.000000000000000000
+    TabOrder = 8
+    TabStop = False
     WidthPercent = 100.000000000000000000
   end
-  object btnConfirm: TWebButton
-    Left = 566
-    Top = 317
-    Width = 96
-    Height = 25
-    Caption = 'Confirm'
-    ChildOrder = 13
-    ElementClassName = 'btn btn-light'
-    ElementID = 'btn_confirm_order'
-    ElementFont = efCSS
-    HeightStyle = ssAuto
-    HeightPercent = 100.000000000000000000
-    WidthPercent = 100.000000000000000000
-    OnClick = btnConfirmClick
-  end
-  object wcbCustomers: TWebDBLookupComboBox
-    Left = 550
-    Top = 286
-    Width = 145
-    Height = 22
-    ElementClassName = 'custom-select'
-    ElementID = 'wcbcustomer'
+  object pnlOrders: TWebPanel
+    Left = 34
+    Top = 114
+    Width = 619
+    Height = 197
+    ElementClassName = 'card'
+    ElementID = 'pnl_orders'
+    Caption = 'pnlOrders'
+    ChildOrder = 15
+    ElementBodyClassName = 'card-body'
     ElementFont = efCSS
-    HeightPercent = 100.000000000000000000
-    WidthPercent = 100.000000000000000000
-    OnChange = wcbCustomersChange
-    DataField = 'CURR_ID'
-    DataSource = wdsSave
-    KeyField = 'ID'
-    ListField = 'NAME'
-    ListSource = wdsCustomers
+    TabOrder = 10
+    Visible = False
   end
   object XDataWebClient1: TXDataWebClient
     Connection = DMConnection.ApiConnection
-    Left = 8
-    Top = 430
+    Left = 28
+    Top = 410
   end
   object XDataWebDataSet1: TXDataWebDataSet
     Connection = DMConnection.ApiConnection
-    Left = 58
-    Top = 432
+    Left = 70
+    Top = 410
     object XDataWebDataSet1ID: TStringField
       FieldName = 'ID'
     end
@@ -340,18 +302,18 @@ object FViewOrders: TFViewOrders
   end
   object WebDataSource1: TWebDataSource
     DataSet = XDataWebDataSet1
-    Left = 94
-    Top = 430
+    Left = 120
+    Top = 410
   end
   object wdsCustomers: TWebDataSource
     DataSet = xdwdsCustomers
-    Left = 598
-    Top = 406
+    Left = 518
+    Top = 414
   end
   object xdwdsCustomers: TXDataWebDataSet
     Connection = DMConnection.ApiConnection
-    Left = 596
-    Top = 354
+    Left = 422
+    Top = 412
     object xdwdsCustomersNAME: TStringField
       FieldName = 'NAME'
     end
@@ -364,15 +326,15 @@ object FViewOrders: TFViewOrders
   end
   object xdwdsSave: TXDataWebDataSet
     Connection = DMConnection.ApiConnection
-    Left = 498
-    Top = 352
+    Left = 188
+    Top = 408
     object xdwdsSaveCURR_ID: TIntegerField
       FieldName = 'CURR_ID'
     end
   end
   object wdsSave: TWebDataSource
     DataSet = xdwdsSave
-    Left = 490
-    Top = 408
+    Left = 346
+    Top = 412
   end
 end

kgOrdersClient/View.Orders.html

-<div class="row">
-    <div class="col-12">
-        <div class="container mt-4">
-            <div class="row justify-content-center">
-                <div class="col-12 col-md-8">
-                    <div class="row">
-                        <div class="col-sm">
-                            <div id="pnl_message" class="alert alert-danger">
-                                <button id="view.login.message.button" type="button" class="btn-close" aria-label="Close"></button>
-                                <span id="view.login.message.label"></span>
-                            </div>
-                        </div>
-                    </div>
-                   <div class="mb-3" id="filter_info" style="display: none;">
-                        <div class="row">
-                            <!-- Search Input Field -->
-                            <div class="col-auto">
-                                <label class='pe-2' style="font-weight: 700;">Search:</label>
-                                <input class="form-control input-sm" id="edtsearch">
-                            </div>
-                            <!-- Start Date Input Field -->
-                            <div class="col-auto">
-                                <label class='pe-2' style="font-weight: 700;">Start Date:</label>
-                                <input class="form-control input-sm" id="dtpstartdate" type="date">
-                            </div>
-                            <!-- End Date Input Field -->
-                            <div class="col-auto">
-                                <label class='pe-2' style="font-weight: 700;">End Date:</label>
-                                <input class="form-control input-sm" id="dtpenddate" type="date">
-                            </div>
-                            <!-- Status Type Dropdown -->
-                            <div class="col-auto">
-                                <label style="font-weight: 700;">Status Type:</label>
-                                <div>
-                                    <select class="form-control input-sm" id="wcbsortby" style="font-size: 1.00rem; height: calc(2.25rem + 2px); padding-top: 0.375rem; padding-bottom: 0.375rem;"></select>
-                                </div>
+<div class="container vh-100 d-flex flex-column pb-5" style="max-width: 80%;">
+
+    <!-- Alert Section -->
+    <div class="row">
+        <div class="col-sm">
+            <div id="pnl_message" class="alert alert-danger">
+                <button id="view.login.message.button" type="button" class="btn-close" aria-label="Close"></button>
+                <span id="view.login.message.label"></span>
+            </div>
+        </div>
+    </div>
 
-                            </div>
-                            <!-- Button (Align this with the inputs) -->
-                            <div class="col-auto d-flex align-items-end">
-                                <label style="font-weight: 700;"> </label>
-                                <button class="btn btn-primary btn-sm" id="btnapply">Apply</button>
-                            </div>
-                        </div>
-                    </div>
-                    <form class="form-inline">
-                        <div class= "row">
-                            <div class="col-sm-3">
-                                <label class="py-2" style="font-weight: 700;">Show <select class="custom-select" id="wcbpagesize" style="font-size: 1.00rem;"></select> entries</label>
-                            </div>
-                            <div class="col-sm-2">
-                                <button class= "ps-3" id="btnaddorder"></button>
-                            </div>
-                            <div class="col-sm-2">
-                                <button class= "ps-3" id="btnsetstatus"></button>
-                            </div>
-                            <div class="col-sm-2">
-                                <button class= "ps-3" id="btngeneratepdf"></button>
-                            </div>
-                            <div class="col-sm-2">
-                                <button class= "ps-3" id="btnfilters"></button>
-                            </div>
-                        </div>
-                    </form>
-                    </div>
-                    <div class="row">
-                        <label id="lblentries"></label>
-                    </div>
-                    <table class="table table-responsive table-striped table-bordered" id="tblPhoneGrid">
-                        <thead class="thead-dark">
-                            <tr>
-                                <th scope="col">Order ID</th>
-                                <th scope="col">Company Name</th>
-                                <th scope="col">Job Name</th>
-                                <th scope="col">Order Date</th>
-                                <th scope="col">Proof Due</th>
-                                <th scope="col">Proof Date</th>
-                                <th scope="col">Art Due</th>
-                                <th scope="col">Art Done</th>
-                                <th scope="col">Plate Due</th>
-                                <th scope="col">Plate Done</th>
-                                <th scope="col">Mount Due</th>
-                                <th scope="col">Mount Done</th>
-                                <th scope="col">Ship Due</th>
-                                <th scope="col">Ship Done</th>
-                                <th scope="col">Price</th>
-                                <th scope="col">Quickbooks Reference Number</th>
-                                <th scope="col">Colors</th>
-                            </tr>
-                        </thead>
-                        <tbody>
-                            <!-- Rows will be added dynamically via Delphi code -->
-                        </tbody>
-                    </table>
-                    <label id="lblentries2"></label>
-                    <nav aria-label="Page navigation">
-                        <ul class="pagination justify-content-center" id="pagination">
-                            <!-- Pagination items will be added dynamically via Delphi code -->
-                        </ul>
-                    </nav>
+    <!-- Filters Section -->
+    <div class="container mb-3">
+        <!-- Filters Row (Hidden Initially) -->
+        <div id="filter_info" style="display: none;">
+            <div class="row justify-content-center">
+                <div class="col-auto">
+                    <label for="edtsearch" class="fw-bold">Search:</label>
+                    <input type="text" id="edtsearch" class="form-control">
+                </div>
+                <div class="col-auto">
+                    <label for="dtpstartdate" class="fw-bold">Start Date:</label>
+                    <input type="date" id="dtpstartdate" class="form-control">
+                </div>
+                <div class="col-auto">
+                    <label for="dtpenddate" class="fw-bold">End Date:</label>
+                    <input type="date" id="dtpenddate" class="form-control">
+                </div>
+                <div class="col-auto">
+                    <label for="wcbsortby" class="fw-bold">Property Type*</label>
+                    <select class="form-select" id="wcbsortby"></select>
+                </div>
+                <div class="col-auto d-flex align-items-end">
+                    <button id="btnapply" class="btn btn-primary">Apply</button>
                 </div>
             </div>
         </div>
+
+        <!-- Actions Row -->
+        <div class="row mt-3 justify-content-center">
+            <div class="col-auto">
+                <button id="btnaddorder" class="btn btn-secondary mt-3">Add Order</button>
+            </div>
+            <div class="col-auto">
+                <button id="btnsetstatus" class="btn btn-secondary mt-3">Set Status</button>
+            </div>
+            <div class="col-auto">
+                <button id="btngeneratepdf" class="btn btn-secondary mt-3">Generate PDF</button>
+            </div>
+            <div class="col-auto">
+                <button id="btnfilters" class="btn btn-secondary mt-3">Filters</button>
+            </div>
+        </div>
     </div>
-<!-- Modal -->
-<div class="modal fade" id="confirmation_modal" tabindex="-1" aria-labelledby="confirmation_modal_label" aria-hidden="true">
-  <div class="modal-dialog">
-    <div class="modal-content">
-      <div class="modal-header">
-        <h5 class="modal-title" id="confirmation_modal_label">Select Customer</h5>
-        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
-      </div>
-      <div class="modal-body">
-        <select class="form-control input-sm" id="wcbcustomer"></select>
-      </div>
-      <div class="modal-footer">
-        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
-        <button type="button" class="btn btn-primary" data-bs-dismiss="modal" id="btn_confirm_order">Confirm</button>
-      </div>
+
+
+
+
+    <!-- Entries Label Section -->
+    <div class="container mt-2">
+        <div class="row">
+            <div class="col">
+                <label id="lblentries"></label>
+            </div>
+        </div>
+    </div>
+
+    <!-- Table Section -->
+    <div id="order_table_section" class="overflow-auto mt-2 flex-grow-1">
+        <table id="tblPhoneGrid" class="table table-striped table-bordered">
+            <thead style="position: sticky; top: 0; z-index: 1; background-color: white; border-bottom: 2px solid #dee2e6;">
+                <tr>
+                    <th>Order ID</th>
+                    <th>Company Name</th>
+                    <th>Job Name</th>
+                    <th>Order Date</th>
+                    <th>Proof Due</th>
+                    <th>Proof Date</th>
+                    <th>Art Due</th>
+                    <th>Art Done</th>
+                    <th>Plate Due</th>
+                    <th>Plate Done</th>
+                    <th>Mount Due</th>
+                    <th>Mount Done</th>
+                    <th>Ship Due</th>
+                    <th>Ship Done</th>
+                    <th>Price</th>
+                    <th>QuickBooks Ref Number</th>
+                    <th>Colors</th>
+                </tr>
+            </thead>
+            <tbody>
+                <!-- Rows will be dynamically added -->
+            </tbody>
+        </table>
+    </div>
+
+    <!-- Pagination Section -->
+    <div class="container mt-4">
+        <div class="row justify-content-center">
+            <nav aria-label="Page navigation">
+                <ul id="pagination" class="pagination">
+                    <!-- Pagination items added dynamically -->
+                </ul>
+            </nav>
+        </div>
+    </div>
+</div>
+
+<!-- pnl_orders Div -->
+<div id="pnl_orders"
+     style="display: none;
+            position: fixed;
+            top: 50%;
+            left: 50%;
+            transform: translate(-50%, -50%);
+            z-index: 1050;
+            padding: 20px;
+            border-radius: 10px;
+            width: 65%; /* Reduced width for a tighter panel */
+            height: auto; /* Panel height adjusts automatically */
+            background-color: white;
+            box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);">
+</div>
+
+<!-- Confirmation Modal -->
+<div id="confirmation_modal" class="modal fade" tabindex="-1" aria-labelledby="confirmation_modal_label" aria-hidden="true">
+    <div class="modal-dialog">
+        <div class="modal-content">
+            <div class="modal-header">
+                <h5 id="confirmation_modal_label" class="modal-title">Select Customer</h5>
+                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+            </div>
+            <div class="modal-body">
+                <select id="wcbcustomer" class="form-control input-sm"></select>
+            </div>
+            <div class="modal-footer">
+                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
+                <button type="button" class="btn btn-primary" data-bs-dismiss="modal" id="btn_confirm_order">Confirm</button>
+            </div>
+        </div>
     </div>
-  </div>
 </div>
+

kgOrdersClient/View.Orders.pas

@@ -13,14 +13,13 @@ uses
   WEBLib.Forms, WEBLib.Dialogs, WEBLib.Menus, WEBLib.ExtCtrls, WEBLib.StdCtrls,
   WEBLib.JSON, Auth.Service, XData.Web.Client, WebLib.Storage,
   ConnectionModule, App.Types, Vcl.StdCtrls, Vcl.Controls, WEBLib.DBCtrls,
-  Data.DB, XData.Web.JsonDataset, XData.Web.Dataset, WEBLib.DB;
+  XData.Web.JsonDataset, WEBLib.DB, Data.DB, XData.Web.Dataset, View.AddOrder;
 
 type
   TFViewOrders = class(TWebForm)
     XDataWebClient1: TXDataWebClient;
     XDataWebDataSet1: TXDataWebDataSet;
     lblEntries: TWebLabel;
-    wcbPageSize: TWebComboBox;
     wcbSortBy: TWebComboBox;
     btnApply: TWebButton;
     edtSearch: TWebEdit;
@@ -40,11 +39,10 @@ type
     XDataWebDataSet1ID: TStringField;
     XDataWebDataSet1qbRefNum: TStringField;
     XDataWebDataSet1colors: TStringField;
-    btnaddOrder: TWebButton;
+    btnAddOrder: TWebButton;
     btnFilters: TWebButton;
     dtpStartDate: TWebDateTimePicker;
     dtpEndDate: TWebDateTimePicker;
-    lblEntries2: TWebLabel;
     XDataWebDataSet1plateDue: TStringField;
     XDataWebDataSet1plateDone: TStringField;
     XDataWebDataSet1orderType: TStringField;
@@ -53,9 +51,7 @@ type
     btnCloseNotification: TWebButton;
     WebButton1: TWebButton;
     WebButton2: TWebButton;
-    btnConfirm: TWebButton;
     wdsCustomers: TWebDataSource;
-    wcbCustomers: TWebDBLookupComboBox;
     xdwdsCustomers: TXDataWebDataSet;
     xdwdsCustomersNAME: TStringField;
     xdwdsCustomersID: TIntegerField;
@@ -63,15 +59,15 @@ type
     xdwdsSave: TXDataWebDataSet;
     wdsSave: TWebDataSource;
     xdwdsSaveCURR_ID: TIntegerField;
+    pnlOrders: TWebPanel;
     procedure WebFormCreate(Sender: TObject);
     procedure btnApplyClick(Sender: TObject);
     procedure btnSearchClick(Sender: TObject);
-    procedure btnaddOrderClick(Sender: TObject);
+    procedure btnAddOrderClick(Sender: TObject);
     procedure btnFiltersClick(Sender: TObject);
     procedure btnCloseNotificationClick(Sender: TObject);
     procedure WebFormShow(Sender: TObject);
     procedure btnConfirmClick(Sender: TObject);
-    procedure wcbCustomersChange(Sender: TObject);
   private
     FChildForm: TWebForm;
     procedure AddRowToTable(temp: string);
@@ -106,7 +102,7 @@ var
 implementation
 
 uses
-  XData.Model.Classes, View.Main, View.OrderList;
+  XData.Model.Classes, View.Main;
 
 {$R *.dfm}
 
@@ -121,7 +117,6 @@ begin
   DMConnection.ApiConnection.Connected := True;
   PageNumber := 1;
   TotalPages := 1; // Initial total pages
-  wcbPageSize.Text := '10';
   wcbSortBy.Text := 'PROOF';
   //today := TDateTime.Today;
   dtpStartDate.Date := 0;
@@ -169,33 +164,24 @@ end;
 
 procedure TFViewOrders.ShowOrderListForm();
 var
-  newform: TFOrderList;
-  formattedBkNum: string;
+  OrdersPanel: TJSHTMLElement;
 begin
-  newform := TFOrderList.CreateNew;
+  // Get the panel element for orders
+  OrdersPanel := TJSHTMLElement(document.getElementById('pnl_orders'));
 
-  {newform.FUserInfo := AUserInfo;
-  newform.FBKNum := ABKNum;
-  newform.FSource := ASource;
-  newform.FViewImages := AViewImages;}
+  // Hide the panel before loading the form
+  if Assigned(OrdersPanel) then
+    OrdersPanel.style.setProperty('display', 'none');
 
-  newform.Caption := 'Select Company an Order Type';
-  newForm.Popup := True;
-  newForm.Border := fbDialog;
-  console.log(newForm.GetElementHandle);
+  // Create the order list form, passing the ElementID
+  TFAddOrder.CreateForm(pnlOrders.ElementID);
 
-  // used to manage Back button handling to close subform
-  window.location.hash := 'subform';
-
-  newform.ShowModal(
-    procedure(AValue: TModalResult)
-    begin
-      if newForm.edtID.Text <> '' then
-        orderEntry('', newForm.edtID.Text, 'ADD');
-    end
-  );
+  // Show the panel after the form is created
+  if Assigned(OrdersPanel) then
+    OrdersPanel.style.setProperty('display', 'block');
 end;
 
+
 procedure TFViewOrders.AddRowToTable(temp: string);
 // Adds rows to the table
 // PhoneNumber: phone number of the location
@@ -622,33 +608,25 @@ begin
     if callListLength = 0 then
     begin
       lblEntries.Caption := 'No entries found';
-      lblEntries2.Caption := 'No entries found';
     end
     else if (PageNumber * PageSize) < callListLength then
     begin
       lblEntries.Caption := 'Showing entries ' + IntToStr((PageNumber - 1) * PageSize + 1) +
                             ' - ' + IntToStr(PageNumber * PageSize) +
                              ' of ' + IntToStr(callListLength);
-      lblEntries2.Caption := 'Showing entries ' + IntToStr((PageNumber - 1) * PageSize + 1) +
-                            ' - ' + IntToStr(PageNumber * PageSize) +
-                             ' of ' + IntToStr(callListLength);
     end
     else if (PageNumber * PageSize) >= callListLength then
     begin
        lblEntries.Caption := 'Showing entries ' + IntToStr((PageNumber - 1) * PageSize + 1) +
                             ' - ' + IntToStr(callListLength) +
                              ' of ' + IntToStr(callListLength);
-      lblEntries2.Caption := 'Showing entries ' + IntToStr((PageNumber - 1) * PageSize + 1) +
-                            ' - ' + IntToStr(callListLength) +
-                             ' of ' + IntToStr(callListLength);
     end;
     GeneratePagination(TotalPages);
   end;
 end;
 
-procedure TFViewOrders.btnaddOrderClick(Sender: TObject);
+procedure TFViewOrders.btnAddOrderClick(Sender: TObject);
 begin
-  //getCustomers();
   ShowOrderListForm();
 end;
 
@@ -663,7 +641,7 @@ var
 searchOptions: string;
 begin
   PageNumber := 1;
-  PageSize := StrToInt(wcbPageSize.Text);
+  PageSize := 50;
   OrderBy := wcbSortBy.Text;
   searchOptions :=  '&pagenumber=' + IntToStr(PageNumber) +
                     '&pagesize=' + IntToStr(PageSize) +
@@ -755,7 +733,7 @@ var
 searchOptions: string;
 begin
   //PageNumber := 1;
-  PageSize := StrToInt(wcbPageSize.Text);
+  PageSize := 50;
   OrderBy := wcbSortBy.Text;
   searchOptions :=  '&pagenumber=' + IntToStr(PageNumber) +
                     '&pagesize=' + IntToStr(PageSize) +
@@ -786,10 +764,5 @@ begin
   end;
 end;
 
-procedure TFViewOrders.wcbCustomersChange(Sender: TObject);
-begin
-  console.log(wcbCustomers.Value);
-end;
 
 end.
-

kgOrdersClient/config.json

-{
-    "AuthUrl": "hhttp://localhost:2004/emsys/envoy/auth/",
-    "ApiUrl": "http://localhost:2004/emsys/envoy/api/",
-    "AppUrl": "http://localhost:2004/emsys/envoy/app/"
-  }
\ No newline at end of file

kgOrdersClient/css/app.css

+.login-card {
+    display: inline-block;
+    width: 300px; /* Adjust width as needed */
+    padding: 0;
+    border-radius: 10px;
+    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+    background-color: #fff;
+}
+
+input[type="text"] {
+  min-width: 50px;
+  max-width: 100%;
+  width: auto;
+  padding-left: 5px;
+}
+
+.card-header {
+    width: 100%;
+    text-align: left; /* Align text to the left */
+    background-color: #f8f9fa; /* Match the card background */
+    padding: 0.75rem 1.25rem;
+    border-bottom: 1px solid rgba(0, 0, 0, 0.125);
+    border-top-left-radius: 10px;
+    border-top-right-radius: 10px;
+    margin: 0; /* Remove any margin */
+    box-sizing: border-box; /* Ensure padding is included in the element's total width and height */
+}
+
+/* Ensure that the title does not affect the navbar layout */
+#view.main.apptitle {
+    display: flex;
+    align-items: center;
+    justify-content: flex-start; /* Align title to the left */
+    width: auto;  /* Ensure it doesn't stretch the container */
+    margin-right: 20px; /* Optional: add space between title and navbar items */
+}
+
+/* Fixed width for title area to prevent shifting */
+#title {
+    white-space: nowrap;  /* Prevent the title text from wrapping */
+    width: 200px;  /* Fixed width for the title */
+    text-overflow: ellipsis;  /* Truncate text with ellipsis if it overflows */
+    overflow: hidden;
+    font-weight: bold;  /* Optional: make the title text bold */
+}
+
+/* Navbar items - keep them aligned and spaced out */
+.navbar-nav .nav-item {
+    padding: 0 15px; /* Adjust spacing between navbar items */
+}
+
+/* Flexbox for the entire navbar */
+.navbar-nav {
+    display: flex;
+    justify-content: flex-end; /* Align navbar items to the right */
+    width: 100%;
+}
+
+/* Additional mobile responsiveness (optional) */
+@media (max-width: 1200px) {
+    .navbar-nav {
+        flex-direction: column; /* Stack items vertically on smaller screens */
+        align-items: flex-start; /* Align items to the left */
+    }
+
+    .navbar-nav-spaced .nav-item {
+        padding: 10px 0; /* Adjust vertical spacing between items */
+    }
+}
+
+/* Make sure active navbar item color gets applied */
+.navbar-nav .nav-item a.active {
+    color: #fff !important; /* Set text color to white for active item */
+    background-color: #004F84 !important; /* Darker blue for active background */
+    font-weight: bold;
+}
+
+/* Default navbar item color */
+.navbar-nav .nav-item a {
+    color: #000 !important; /* Default color for links */
+    transition: color 0.3s ease;
+}
+
+/* Navbar item hover state */
+.navbar-nav .nav-item a:hover {
+    color: #fff !important; /* Set hover text color to white */
+    background-color: #286090 !important; /* Light blue on hover */
+}
+
+.nav-item {
+    padding: 0 20px; /* Adjust this value for desired spacing between labels */
+}
+
+.mr-2 {
+    margin-right: 0.5rem;
+}
+
+.custom-h4 {
+    margin-bottom: 5px;
+}
+
+.custom-hr {
+    margin-top: 5px;
+    margin-bottom: 10px;
+}
+
+.custom-select-large {
+        font-size: 1.25rem;
+        padding: 0.5rem;
+        height: 2.5rem;
+}
+
+.player-container {
+  position: fixed;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  background-color: #fff;
+  border: 1px solid #ccc;
+  padding: 20px;
+  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
+  z-index: 1000;
+}
+
+.player-container audio {
+  width: 100%;
+}
+
+.close-btn {
+  position: absolute;
+  top: 10px;
+  right: 10px;
+  cursor: pointer;
+}
+
+.card-title {
+    margin: 0;
+    font-size: 1.25rem; /* Adjust font size as needed */
+}
+
+
+.card-body {
+    padding: 2rem;
+}
+
+.table tbody tr:hover {
+    background-color: #d1e7fd; /* Light blue color for hover effect */
+    cursor: pointer;
+}
+
+.form-input{
+    display: table;
+}
+
+.form-cells{
+    display: table-cell
+}
+
+.table tbody tr {
+    transition: background-color 0.3s ease;
+}
+
+.table {
+    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+    border-radius: 5px;
+}
+
+.navbar-nav {
+    margin-left: auto; /* Align the dropdown to the right */
+}
+
+.container {
+    margin-top: 50px; /* Adjust the top margin as needed */
+}
+
+@media (max-width: 1200px) {
+    .table-responsive {
+        display: block;
+        width: 100%;
+        overflow-x: auto;
+        -webkit-overflow-scrolling: touch;
+    }
+
+    .table thead {
+        display: none;
+    }
+
+    .table tbody, .table tr, .table td {
+        display: block;
+        width: 100%;
+    }
+
+    .table tr {
+        margin-bottom: 1rem;
+    }
+
+    .table td {
+        text-align: right;
+        padding-left: 50%; /* Adjust padding to accommodate the data-label */
+        position: relative;
+    }
+
+    .table td::before {
+        content: attr(data-label);
+        position: absolute;
+        left: 0;
+        width: 50%;
+        padding-left: 15px; /* Adjust as necessary */
+        font-weight: bold;
+        text-align: left;
+    }
+
+    .table td .transcript {
+        margin-top: 20px; /* Set top margin to 20px */
+        text-align: left; /* Ensure text alignment is left */
+        margin-left: 8px;
+        white-space: normal; /* Prevent text from being cut off */
+    }
+}
+
+.btn-primary {
+    background-color: #286090 !important;
+    border-color: #286090 !important;
+    color: #fff !important;
+}
+
+.btn-primary:hover {
+    background-color: #204d74 !important;
+    border-color: #204d74 !important;
+}
+
+.login-navbar {
+    max-width: 1200px; /* Set the max-width to match a medium screen */
+    margin: auto;
+    border-bottom-left-radius: 10px; /* Round the bottom left corner */
+    border-bottom-right-radius: 10px; /* Round the bottom right corner */
+    border: 1px solid #d3d3d3;
+}
+
+.navbar-toggler {
+    display: none;
+}
+
+.dropdown-menu a {
+    display: flex;           /* Use flexbox for alignment */
+    align-items: center;     /* Vertically center the content */
+    width: 100%;             /* Ensure they take up the full width */
+    padding: 0.5rem 1rem;    /* Add padding to make them clickable */
+    color: #000;             /* Adjust the text color if necessary */
+    text-decoration: none;   /* Remove underlines */
+}
+
+.dropdown-menu a:hover {
+    background-color: #204d74;
+    color: #fff;
+}
+
+.dropdown-menu a span {
+    flex-grow: 1;            /* Make the span take up the remaining space */
+}
+
+/* Style for the selected number */
+.selected-number .page-link {
+    background-color: #204d74;
+    color: #fff !important;
+}
+
+/* Style for the unselected numbers and text (previous/next) */
+.pagination .page-item a,
+.pagination .page-item span {
+    color: #204d74;
+}
+
+.pagination .page-item.active .page-link,
+.pagination .page-item.active .page-link:hover,
+.pagination .page-item.active .page-link:focus {
+    background-color: #204d74;
+    border-color: #204d74;
+    color: #fff !important;
+}
+
+
+.grid-container {
+    position: relative; /* Ensure the container is the reference for child positioning */
+    height: 400px; /* Set the height for the grid */
+    width: 100%; /* Full width of the parent container */
+    overflow: hidden; /* Prevent unintended overflow */
+}
+
+#TFAddOrder_TMSFNCGrid2 {
+    top: 0px !important; /* Reset the top offset */
+    left: 0px !important; /* Reset the left offset */
+    position: absolute !important; /* Use relative positioning to align with the grid container */
+}
+
+#TFAddOrder_TMSFNCGrid2_Canvas {
+    position: relative !important; /* Ensure absolute positioning within the parent */
+    width: 100% !important; /* Make the canvas fill the container width */
+    height: 100% !important; /* Make the canvas fill the container height */
+    left: 0px !important; /* Align canvas to the left */
+}
+
+#TFAddOrder_ScrollBar5 {
+    top: 0px !important; /* Align scrollbar to the top */
+    right: 0px !important; /* Align scrollbar to the right edge */
+    position: absolute !important; /* Position within the grid container */
+    height: 400px !important; /* Match the height of the grid container */
+    box-sizing: border-box !important; /* Prevent borders from affecting dimensions */
+}
+
+
+
+
+
+
+
+
+
+
+
+

kgOrdersClient/index.html

@@ -4,7 +4,7 @@
   <noscript>Your browser does not support JavaScript!</noscript>
   <link rel="icon" href="data:;base64,=">
   <title>TMS Web Project</title>
-  <link href="template/css/app.css" rel="stylesheet" type="text/css">
+  <link href="css/app.css" rel="stylesheet" type="text/css">
   <link href="https://cdnjs.cloudflare.com/ajax/libs/flag-icon-css/2.3.1/css/flag-icon.min.css" rel="stylesheet">
   <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
   <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.0/css/all.min.css" rel="stylesheet">
@@ -25,7 +25,7 @@
   </script>
 
 
-  <title>EM Systems webCharms App</title>
+  <title>EM Systems webKGOrders App</title>
     <script type="text/javascript" src="$(ProjectName).js"></script>
     <style>
       /*-----svg loader styles-------*/

kgOrdersClient/template/css/app.css

@@ -280,5 +280,42 @@ input[type="text"] {
 }
 
 
+.grid-container {
+    position: relative; /* Ensure the container is the reference for child positioning */
+    height: 400px; /* Set the height for the grid */
+    width: 100%; /* Full width of the parent container */
+    overflow: hidden; /* Prevent unintended overflow */
+}
+
+#TFAddOrder_TMSFNCGrid2 {
+    top: 0px !important; /* Reset the top offset */
+    left: 0px !important; /* Reset the left offset */
+    position: absolute !important; /* Use relative positioning to align with the grid container */
+}
+
+#TFAddOrder_TMSFNCGrid2_Canvas {
+    position: relative !important; /* Ensure absolute positioning within the parent */
+    width: 100% !important; /* Make the canvas fill the container width */
+    height: 100% !important; /* Make the canvas fill the container height */
+    left: 0px !important; /* Align canvas to the left */
+}
+
+#TFAddOrder_ScrollBar5 {
+    top: 0px !important; /* Align scrollbar to the top */
+    right: 0px !important; /* Align scrollbar to the right edge */
+    position: absolute !important; /* Position within the grid container */
+    height: 400px !important; /* Match the height of the grid container */
+    box-sizing: border-box !important; /* Prevent borders from affecting dimensions */
+}
+
+
+
+
+
+
+
+
+
+
 
 

kgOrdersClient/webKGOrders.dpr

@@ -18,7 +18,7 @@ uses
   View.EditUser in 'View.EditUser.pas' {FViewEditUser: TWebForm} {*.html},
   View.Orders in 'View.Orders.pas' {FViewOrders: TWebForm} {*.html},
   View.OrderEntryCorrugated in 'View.OrderEntryCorrugated.pas' {FOrderEntry: TWebForm} {*.html},
-  View.OrderList in 'View.OrderList.pas' {FOrderList: TWebForm} {*.html};
+  View.AddOrder in 'View.AddOrder.pas' {FAddOrder: TWebForm} {*.html};
 
 {$R *.res}
 

kgOrdersClient/webKGOrders.dproj

@@ -171,8 +171,8 @@
             <FormType>dfm</FormType>
             <DesignClass>TWebForm</DesignClass>
         </DCCReference>
-        <DCCReference Include="View.OrderList.pas">
-            <Form>FOrderList</Form>
+        <DCCReference Include="View.AddOrder.pas">
+            <Form>FAddOrder</Form>
             <FormType>dfm</FormType>
             <DesignClass>TWebForm</DesignClass>
         </DCCReference>

kgOrdersServer/Source/Auth.Database.dfm

@@ -19,13 +19,11 @@ object AuthDatabase: TAuthDatabase
   object ucKG: TUniConnection
     ProviderName = 'MySQL'
     Database = 'kg_order_entry'
-    SpecificOptions.Strings = (
-      'PostgreSQL.Schema=envoy')
     Username = 'root'
     LoginPrompt = False
     Left = 67
     Top = 131
-    EncryptedPassword = '9AFF92FF8CFF86FF8CFFCFFFCEFF'
+    EncryptedPassword = '9AFF92FF8CFF86FF8CFFDEFFCFFFCEFFCDFF'
   end
   object MySQLUniProvider1: TMySQLUniProvider
     Left = 230

kgOrdersServer/Source/Auth.Database.pas

@@ -56,27 +56,6 @@ begin
       ucKG.Server := iniStr;
     end;
 
-    iniStr := IniFile.ReadString( 'Twilio', 'AccountSID', '' );
-    if iniStr.IsEmpty then
-      Logger.Log( 1, 'iniFile: ' + ChangeFileExt(Application.ExeName, '.ini') +
-                  ' Twilio->AccountSID: Entry not found' )
-    else
-    begin
-      Logger.Log( 1, 'iniFile: ' + ChangeFileExt(Application.ExeName, '.ini') +
-                  ' Twilio->AccountSID: ' + iniStr );
-      //accountSID := iniStr;
-    end;
-
-    iniStr := IniFile.ReadString( 'Twilio', 'AuthHeader', '' );
-    if iniStr.IsEmpty then
-      Logger.Log( 1, 'iniFile: ' + ChangeFileExt(Application.ExeName, '.ini') +
-                  ' Twilio->AuthHeader: Entry not found' )
-    else
-    begin
-      Logger.Log( 1, 'iniFile: ' + ChangeFileExt(Application.ExeName, '.ini') +
-                  ' Twilio->AuthHeader: ' + iniStr );
-      //authHeader := iniStr;
-    end;
     Logger.Log(1, '');
   finally
     IniFile.Free;

kgOrdersServer/Source/Database.dfm

@@ -5,13 +5,11 @@ object FDatabaseModule: TFDatabaseModule
   object ucKG: TUniConnection
     ProviderName = 'MySQL'
     Database = 'kg_order_entry'
-    SpecificOptions.Strings = (
-      'PostgreSQL.Schema=envoy')
     Username = 'root'
     LoginPrompt = False
     Left = 75
     Top = 139
-    EncryptedPassword = '9AFF92FF8CFF86FF8CFFCFFFCEFF'
+    EncryptedPassword = '9AFF92FF8CFF86FF8CFFDEFFCFFFCEFFCDFF'
   end
   object UniQuery1: TUniQuery
     Connection = ucKG

kgOrdersServer/Source/Main.dfm

@@ -3,7 +3,7 @@ object FMain: TFMain
   Top = 0
   Caption = 'KG Orders Server'
   ClientHeight = 597
-  ClientWidth = 764
+  ClientWidth = 773
   Color = clBtnFace
   Font.Charset = DEFAULT_CHARSET
   Font.Color = clWindowText
@@ -12,17 +12,18 @@ object FMain: TFMain
   Font.Style = []
   OnClose = FormClose
   DesignSize = (
-    764
+    773
     597)
   TextHeight = 13
   object memoInfo: TMemo
-    Left = 8
-    Top = 40
-    Width = 744
+    Left = 20
+    Top = 44
+    Width = 753
     Height = 549
     Anchors = [akLeft, akTop, akRight, akBottom]
     ReadOnly = True
     TabOrder = 0
+    ExplicitWidth = 744
   end
   object btnApiSwaggerUI: TButton
     Left = 297
@@ -60,13 +61,6 @@ object FMain: TFMain
     TabOrder = 4
     OnClick = btnAuthSwaggerUIClick
   end
-  object tmrTwilio: TTimer
-    Enabled = False
-    Interval = 300000
-    OnTimer = tmrTwilioTimer
-    Left = 167
-    Top = 399
-  end
   object initTimer: TTimer
     OnTimer = initTimerTimer
     Left = 58

kgOrdersServer/Source/Main.pas

@@ -17,13 +17,11 @@ type
     btnApiSwaggerUI: TButton;
     btnData: TButton;
     btnExit: TButton;
-    tmrTwilio: TTimer;
     initTimer: TTimer;
     btnAuthSwaggerUI: TButton;
     procedure btnApiSwaggerUIClick(Sender: TObject);
     procedure btnDataClick(Sender: TObject);
     procedure btnExitClick(Sender: TObject);
-    procedure tmrTwilioTimer(Sender: TObject);
     procedure ContactFormData(AText: String);
     procedure FormClose(Sender: TObject; var Action: TCloseAction);
     procedure initTimerTimer(Sender: TObject);
@@ -128,28 +126,6 @@ begin
       Logger.Log( 1, '--Database->Server: Entry not found' )
     else
       Logger.Log( 1, '--Database->Server: ' + iniStr );
-
-    iniStr := IniFile.ReadString( 'Options', 'TwilioUpdateTime', '' );
-    if iniStr.IsEmpty then
-      Logger.Log( 1, '--Options->TwilioUpdateTime: Entry not found' )
-    else
-    begin
-      Logger.Log( 1, '--Options->TwilioUpdateTime: ' + iniStr );
-      if iniStr = '0' then
-      begin
-        Logger.Log( 1, '--Twilio Update Timer not enabled due to timer length of ' +
-                    '0. Edit the ini file to enable auto updates.');
-        tmrTwilio.Enabled := False;
-      end
-      else
-      begin
-        Logger.Log( 1, '--Twilio Update Timer enabled and set to update every '+ iniStr + ' minutes.');
-        tmrTwilio.Interval := StrToInt(IniStr) * 60000;
-        tmrTwilio.Enabled := True;
-      end;
-
-    end;
-
     Logger.Log(1, '');
   finally
     IniFile.Free;
@@ -165,17 +141,6 @@ begin
   AppServerModule.StartAppServer( serverConfig.url );
 end;
 
-procedure TFMain.tmrTwilioTimer(Sender: TObject);
-var
-  key: string;
-  phoneNum: string;
-begin
-  memoInfo.Lines.Add('Timer set off');
-  tmrTwilio.Enabled := False;
-  tmrTwilio.Enabled := True;
-
-end;
-
 procedure TFMain.FormClose(Sender: TObject; var Action: TCloseAction);
 begin
   phoneDict.Free;

kgOrdersServer/kgOrdersServer.ini

 [Options]
-
-LogFileNum=234
-
-UpdateTimerLength=0
+LogFileNum=25
 
 [Database]
 --Server=192.168.159.132
---Server=192.168.102.129
-Server=192.168.102.130
-
-[Twilio]
-AccountSID=AC37aeef9c36a2cccbaecbadafc172b2ff
-AuthHeader=Basic QUMzN2FlZWY5YzM2YTJjY2NiYWVjYmFkYWZjMTcyYjJmZjo5NzM5OTAwYTgyZmRlNjVlMzI2ODFmZjVmMmI5ZGZjZgo=
+Server=192.168.198.131
+--Server=192.168.102.130