Commit 4700fcf0 by Elias Sarraf

server ver 0.9.14.0 & webClient ver 0.9.14.1 deploy to test

parent d7a47844
......@@ -8,26 +8,21 @@ kgOrdersClient/css/__recovery/
kgOrdersClient/config/__history/
kgOrdersServer/__history
kgOrdersServer/__recovery
kgOrdersServer/*.txt
kgOrdersServer/doc/
kgOrdersServer/logs
kgOrdersServer/Win32/
kgOrdersServer/Source/__history/
kgOrdersServer/Source/__recovery/
kgOrdersServer/bin/logs/
kgOrdersServer/bin/static/
kgOrdersServer/static/reports/
kgOrdersServer/bin/kgOrdersServer.ini
*.exe
*.local
*.identcache
*.res
*.skincfg
*.txt
*.tvsconfig
kgOrdersServer/bin/logs/
kgOrdersServer/bin/static/
kgOrdersServer/static/reports/
kgOrdersServer/bin/kgOrdersServer_MemoryManager_EventLog.txt
kgOrdersServer/bin/kgOrdersServer.ini
......@@ -19,7 +19,7 @@ type
FUnauthorizedAccessProc: TUnauthorizedAccessProc;
public
const clientVersion = '0.9.13.9';
const clientVersion = '0.9.14.1';
procedure InitApp(SuccessProc: TSuccessProc;
UnauthorizedAccessProc: TUnauthorizedAccessProc);
procedure SetClientConfig(Callback: TVersionCheckCallback);
......
......@@ -39,10 +39,8 @@ begin
StatusMessage.innerHTML := AMessage;
StatusMessage.className := 'alert ' + AClass;
StatusMessage.style.setProperty('display', 'block');
end
end
else
console.log('Error: Status message element not found');
end;
end;
end;
......@@ -56,9 +54,7 @@ begin
StatusMessage.style.setProperty('display', 'none');
StatusMessage.className := '';
StatusMessage.innerHTML := '';
end
else
console.log('Error: Status message element not found');
end;
end;
......@@ -324,29 +320,9 @@ var
begin
CrimeTitleElement := TJSHTMLElement(document.getElementById('crime_title'));
if Assigned(CrimeTitleElement) then
CrimeTitleElement.innerText := CurrentReportType
else
Console.Log('Element with ID "crime_title" not found.');
CrimeTitleElement.innerText := CurrentReportType;
end;
// Used html number input type to restrict the input instead of this function
// function FormatDollarValue(ValueStr: string): string;
// var
// i: Integer;
// begin
// Result := ''; // Initialize the result
// // Filter out any characters that are not digits or decimal point
// for i := 1 to Length(ValueStr) do
// begin
// if (Pos(ValueStr[i], '0123456789.') > 0) then
// begin
// Result := Result + ValueStr[i];
// end;
// end;
// end;
end.
......@@ -550,7 +550,6 @@ begin
end
else
begin
console.log(qbCustJSON);
Response := await(XDataWebClient1.RawInvokeAsync('ILookupService.ImportQBCustomer',
[qbCustJSON]));
mode := 'EDIT';
......@@ -660,7 +659,6 @@ begin
ShowErrorModal('Cannot save address: Customer ID is not set.');
Exit;
end;
console.log('Saving address. CustomerID = ' + customerID);
if VerifyAddress() then
begin
......@@ -707,7 +705,6 @@ begin
xdcResponse := await(XDataWebClient1.RawInvokeAsync('ILookupService.GetRepUsers', []));
RepUsers := TJSObject(xdcResponse.Result);
console.log(RepUsers);
xdwdsUsers.Close;
xdwdsUsers.SetJSONData(RepUsers['value']);
......
......@@ -77,7 +77,6 @@ begin
if not DMConnection.ApiConnection.Connected then
begin
DMConnection.ApiConnection.OpenAsync;
console.log('report requirements connection open')
end;
end;
......
......@@ -61,7 +61,6 @@ begin
if not DMConnection.ApiConnection.Connected then
begin
DMConnection.ApiConnection.OpenAsync;
console.log('report requirements connection open')
end;
end;
......
......@@ -401,7 +401,6 @@ var
item: TJSObject;
itemListLength: integer;
begin
console.log('correct');
if PageNumber > 0 then
begin
Utils.ShowSpinner('spinner');
......@@ -411,7 +410,6 @@ begin
itemList := TJSObject(xdcResponse.Result);
data := TJSArray(itemList['data']);
itemListLength := integer(itemList['count']);
console.log(data);
xdwdsItems.Close;
xdwdsItems.SetJsonData(data);
xdwdsItems.Open;
......@@ -638,9 +636,6 @@ procedure TFViewItems.wdbtcItemsClickCell(Sender: TObject; ACol, ARow: Integer);
begin
if lblFormState.Caption = 'View Mode' then
begin
console.log(wdbtcItems.Cells[3, ARow]);
console.log(xdwdsItems.Locate('ID', wdbtcItems.Cells[0, ARow], []));
console.log(wdbtcItems.Cells[0, ARow]);
xdwdsItems.Locate('ID', wdbtcItems.Cells[0, ARow], []);
end;
end;
......
......@@ -108,7 +108,6 @@ end;
procedure TFViewLogin.WebFormShow(Sender: TObject);
begin
console.log(DMConnection.clientVersion);
FViewLogin.lblClientVersion.Caption := 'v' + DMConnection.clientVersion;
if FMessage <> '' then
ShowNotification(FMessage)
......
......@@ -99,7 +99,7 @@ begin
lblUsername.Caption := ' ' + userName.ToLower + ' ';
FChildForm := nil;
change := false;
console.log(JS.toBoolean(AuthService.TokenPayload.Properties['user_access_type']));
if (not (JS.toString(AuthService.TokenPayload.Properties['user_access_type']) = 'ADMIN')) then
begin
lblUsers.enabled := false;
......
......@@ -762,7 +762,6 @@ begin
if not DMConnection.ApiConnection.Connected then
begin
DMConnection.ApiConnection.OpenAsync;
console.log('report requirements connection open')
end;
end;
......
......@@ -280,7 +280,6 @@ begin
orderID := orderInfo;
mode := modeParam;
notification := info;
console.log('Mode in createform: ' + modeParam);
InitializeForm;
end;
......@@ -601,8 +600,6 @@ begin
jsObj := JS.TJSObject(Response.Result);
console.log(jsObj);
xdwdsOrder.Close;
xdwdsOrder.SetJsonData(jsObj);
xdwdsOrder.Open;
......@@ -762,7 +759,6 @@ begin
if not DMConnection.ApiConnection.Connected then
begin
DMConnection.ApiConnection.OpenAsync;
console.log('report requirements connection open')
end;
end;
......@@ -814,7 +810,6 @@ begin
xdcResponse := await(XDataWebClient1.RawInvokeAsync('ILookupService.GetItems',
[]));
items := TJSObject(xdcResponse.Result);
console.log(items);
xdwdsQBItem.Close;
xdwdsQBItem.SetJsonData(items['data']);
xdwdsQBITEM.Open;
......
object FQBInfo: TFQBInfo
Width = 449
Height = 191
Height = 175
OnCreate = WebFormCreate
OnShow = WebFormShow
object lblConnected: TWebLabel
......@@ -63,8 +63,8 @@ object FQBInfo: TFQBInfo
WidthPercent = 100.000000000000000000
end
object btnLinkToQB: TWebButton
Left = 13
Top = 137
Left = 235
Top = 138
Width = 96
Height = 25
Caption = 'Link to QB'
......@@ -74,8 +74,8 @@ object FQBInfo: TFQBInfo
OnClick = btnLinkToQBClick
end
object btnClose: TWebButton
Left = 115
Top = 137
Left = 337
Top = 138
Width = 96
Height = 25
Caption = 'Close'
......
......@@ -49,8 +49,7 @@ begin
qblink := qblink + '&state=7';
redirectUri := DMConnection.AuthConnection.URL + 'AuthService/QBAuthorize';
qblink := qblink + '&redirect_uri=' + RedirectUri;
console.log(redirectUri);
console.log(qbLink);
qbWindow := window.open('', '_blank');
if Assigned(qbWindow) then
qbWindow.location.href := qbLink;
......@@ -62,7 +61,6 @@ begin
if not DMConnection.ApiConnection.Connected then
begin
DMConnection.ApiConnection.OpenAsync;
console.log('report requirements connection open')
end;
end;
......@@ -87,7 +85,7 @@ begin
xdcResponse := await(XDataWebClient1.RawInvokeAsync('ILookupService.getQBInfo', []));
QBInfo := TJSObject(xdcResponse.Result);
ClientID := String(QBInfo['clientID']);
console.log(QBInfo);
if boolean(QBInfo['connected']) then
begin
lblCompanyName.Caption := lblCompanyName.Caption + String(QBInfo['CompanyName']);
......
......@@ -125,7 +125,7 @@ begin
dtpPlateDue.Date := PlateDue;
dtpArtDue.Date := ArtDue;
ItemsToRemove := TStringList.Create;
console.log(orderType);
if orderType = 'web plate' then
begin
dtpMountDue.Visible := false;
......@@ -259,8 +259,7 @@ begin
DOW := DayOfWeek(CurrDate);
end;
result := CurrDate;
console.log(CurrDate);
end;
end.
\ No newline at end of file
end.
......@@ -187,7 +187,6 @@ begin
end
else
showToast(Info);
console.log('Info at Timer:' + Info);
end;
......@@ -196,7 +195,6 @@ var
FormEl: TJSHTMLFormElement;
AllValid: Boolean;
begin
console.log(mode);
FormEl := TJSHTMLFormElement(document.getElementById('userprofileform'));
// Clear previous invalid state
......
......@@ -70,7 +70,6 @@ begin
userList := TJSObject(xdcResponse.Result);
data := TJSArray(userList['data']);
user := TJSObject(data[0]);
console.log(user);
xdwdsUser.SetJsonData(user);
xdwdsUser.Open;
except
......
{
"AuthUrl" : "http://localhost:2004/kgOrders/auth/",
"ApiUrl" : "http://localhost:2004/kgOrders/api/"
"AuthUrl" : "http://localhost:2001/emsys/kgOrders/auth/",
"ApiUrl" : "http://localhost:2001/emsys/kgOrders/api/"
}
......@@ -118,8 +118,6 @@ begin
end;
begin
Application.Initialize;
Application.MainFormOnTaskbar := True;
......@@ -127,3 +125,4 @@ begin
StartApplication;
Application.Run;
end.
<Project xmlns="http://schemas.microsoft.com/developer/msbuild/2003">
<PropertyGroup>
<ProjectGuid>{DB6F5DBF-7E4B-45DA-AFFA-6C8DF15BA740}</ProjectGuid>
<ProjectVersion>20.3</ProjectVersion>
<ProjectVersion>20.4</ProjectVersion>
<FrameworkType>VCL</FrameworkType>
<MainSource>webKGOrders.dpr</MainSource>
<Base>True</Base>
......@@ -987,6 +987,9 @@
<Platform Name="Win64x">
<Operation>1</Operation>
</Platform>
<Platform Name="WinARM64EC">
<Operation>1</Operation>
</Platform>
</DeployClass>
<DeployClass Name="ProjectiOSDeviceDebug">
<Platform Name="iOSDevice32">
......@@ -1057,6 +1060,10 @@
<RemoteDir>Assets</RemoteDir>
<Operation>1</Operation>
</Platform>
<Platform Name="WinARM64EC">
<RemoteDir>Assets</RemoteDir>
<Operation>1</Operation>
</Platform>
</DeployClass>
<DeployClass Name="UWP_DelphiLogo44">
<Platform Name="Win32">
......@@ -1067,6 +1074,10 @@
<RemoteDir>Assets</RemoteDir>
<Operation>1</Operation>
</Platform>
<Platform Name="WinARM64EC">
<RemoteDir>Assets</RemoteDir>
<Operation>1</Operation>
</Platform>
</DeployClass>
<DeployClass Name="iOS_AppStore1024">
<Platform Name="iOSDevice64">
......@@ -1281,6 +1292,7 @@
<ProjectRoot Platform="Win32" Name="$(PROJECTNAME)"/>
<ProjectRoot Platform="Win64" Name="$(PROJECTNAME)"/>
<ProjectRoot Platform="Win64x" Name="$(PROJECTNAME)"/>
<ProjectRoot Platform="WinARM64EC" Name="$(PROJECTNAME)"/>
</Deployment>
<Platforms>
<Platform value="Win32">True</Platform>
......
......@@ -79,11 +79,6 @@ begin
webClientVersion := iniFile.ReadString('Settings', 'webClientVersion', '');
Result.AddPair('webClientVersion', webClientVersion);
if webClientVersion = '' then
begin
Result.AddPair('error', 'webClientVersion is not configured.');
Exit;
end;
if clientVersion <> webClientVersion then
begin
Logger.Log(1, 'webApp version mismatch client ver: ' + clientVersion + ' required ver: ' + webClientVersion);
......
......@@ -115,6 +115,8 @@ procedure TFMain.StartServers;
var
iniFile: TIniFile;
iniStr: string;
bContinue: boolean;
debugMode: boolean;
begin
// The version is centered when the app is running
Logger.Log( 1, '*******************************************************' );
......@@ -124,10 +126,14 @@ begin
Logger.Log( 1, '*******************************************************' );
Logger.Log( 1, '' );
bContinue := True;
iniFile := TIniFile.Create( ExtractFilePath(Application.ExeName) + 'kgOrdersServer.ini' );
try
Logger.Log( 1, 'iniFile: ' + ExtractFilePath(Application.ExeName) + 'kgOrdersServer.ini' );
debugMode := iniFile.ReadBool( 'Settings', 'DebugMode', True );
Logger.Log( 1, 'debugMode: ' + BoolToStr(debugMode, True) );
Logger.Log( 1, 'LogLevels are displayed here. They were set in kgOrdersServer.dpr, it executes first' );
Logger.Log(1, '--- Settings ---');
iniStr := iniFile.ReadString( 'Settings', 'MemoLogLevel', '' );
......@@ -151,14 +157,20 @@ begin
iniStr := iniFile.ReadString( 'Settings', 'webClientVersion', '' );
if iniStr.IsEmpty then
Logger.Log( 1, '--Settings->WebClientVersion: Entry not found - ERROR: ini entry required!!!')
begin
Logger.Log( 1, '--Settings->WebClientVersion: Entry not found - ERROR: ini entry required!!!');
bContinue := False;
end
else
Logger.Log( 1, '--Settings->WebClientVersion: ' + iniStr );
Logger.Log(1, '--- Database ---');
iniStr := IniFile.ReadString( 'Database', 'Server', '' );
if iniStr.IsEmpty then
Logger.Log( 1, '----Database->Server: Entry not found - ERROR: ini entry required!!!' )
begin
Logger.Log( 1, '----Database->Server: Entry not found - ERROR: ini entry required!!!' );
bContinue := False;
end
else
Logger.Log( 1, '----Database->Server: ' + iniStr );
......@@ -228,16 +240,26 @@ begin
IniFile.Free;
end;
AuthServerModule := TAuthServerModule.Create(Self);
AuthServerModule.StartAuthServer(serverConfig.url, AUTH_MODEL);
if bContinue then
begin
AuthServerModule := TAuthServerModule.Create(Self);
AuthServerModule.StartAuthServer(serverConfig.url, AUTH_MODEL);
ApiServerModule := TApiServerModule.Create( Self );
ApiServerModule.StartApiServer(serverConfig.url, API_MODEL);
ApiServerModule := TApiServerModule.Create( Self );
ApiServerModule.StartApiServer(serverConfig.url, API_MODEL);
AppServerModule := TAppServerModule.Create(Self);
AppServerModule.StartAppServer( serverConfig.url );
AppServerModule := TAppServerModule.Create(Self);
AppServerModule.StartAppServer( serverConfig.url );
UpdateGUI;
UpdateGUI;
end
else
begin
Logger.Log( 1, 'ini configuration error: Existing program!' );
if debugMode then
MessageDlg( 'ini configuration error: Existing program!', mtConfirmation, [mbOk], 0 );
Close();
end;
end;
......
{
"url": "http://localhost:2004/kgOrders/",
"url": "http://localhost:2001/emsys/kgOrders/",
"jwtTokenSecret": "super_secret0123super_secret4567",
"adminPassword": "whatisthisusedfor",
"webAppFolder": "static",
......
[Settings]
MemoLogLevel=3
FileLogLevel=4
webClientVersion=0.9.13.2
LogFileNum=123
[Database]
--Database=kg_order_entry
--Username=root
--Password=emsys01
--Server=192.168.116.131
Server=192.168.159.10
--Server=192.168.116.132
--Server=192.168.102.129
--Server=192.168.75.133
--Password=emsys!012
[Quickbooks]
Enabled=1
BaseUrl=https://sandbox-quickbooks.api.intuit.com
--BaseUrl=https://quickbooks.api.intuit.com/v3
--RedirectUri=https://webapps.em-sys.net/kgOrdersTest/auth/AuthService/Authorize
--RedirectUri=https://webapps.em-sys.net/kgOrders/auth/AuthService/Authorize
RedirectUri=http://localhost:2004/kgOrders/auth/AuthService/Authorize
CompanyID=9341454336461805
ClientID=ABYqlDx1EsacZYXvHIJ7RDB7zmnQdwABU3fwQLIZPmBgU0VW1P
ClientSecret=PM7OnvQWsgOqjWfDpZAnyRttDN9446Am6d85pDxr
RefreshToken=RT1-247-H0-17820557806jgiv9npad8srv5wix30
AccessToken=eyJhbGciOiJkaXIiLCJlbmMiOiJBMTI4Q0JDLUhTMjU2IiwieC5vcmciOiJIMCJ9..UJs-kGD2vMVnniwh5pEOWg.KUOqaQFsO4ksf51-bBo09GpLoVFIUMCR2ii1TzaXVIaUAqe53a43S5SZBSX3UeqnPm9cHLlrL4_xgLITi_-8CemLaWvfTreRuR93g6y82Hli-5UaVc_os29rcEkEhh87G0TRS2br-63o-yqihxBO9zYECIPZ9DGBTaFdizPM_d3DMPQJ3FfKlxors2HzYKhmU-4njzLAdK6o5GxpUnB5MDC7Hu3HpSwDQDP6RXLak9Fy_lot_bJY2V0rqdPoVqWaLELOCk_9ZJSTfCVwzCX-2ZiIIo_MFzenqxDK8RcTOAvnPMKSFur3LFsSxvME7Ve-63N0k2Zvf8wbzsdMjY0U1PMc8SPHkWnuUooVfRspUr7lt5NWxPKGSN02j-XGL8S4AgafUVXAb4C2HlvVQDR6yP9YLTOpTtLjUjDIkd_-fMfhBlRvukXzpPB8_0etuR4Ajbne9Fs6PXQO-HfPXPUlyQUDE0Tq5kCmih5fKm8BBUQ.3kNe3BzqWg_QaQ8BqQfJ-A
LastRefresh=3/12/2026 11:29:41 AM
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<title>TMS Web Project</title>
<style>
</style>
</head>
<body>
</body>
</html>
\ No newline at end of file
<nav class="navbar navbar-expand navbar-light bg-light sticky-top border-light" style="z-index: 100;">
<div class="container-fluid d-flex align-items-center ps-0 pe-0">
<!-- Left-aligned form state label -->
<div class="me-auto ps-3">
<label id="lbl_form_state" class="form-label mb-0 fw-bold text-uppercase text-nowrap text-danger" style="font-size: 16px;">View Mode</label>
</div>
<!-- Right-aligned buttons -->
<ul class="navbar-nav ms-auto pe-2 mb-0">
<li class="nav-item pe-2">
<button id="btnadd" class="btn btn-primary btn-sm">Add</button>
</li>
<li class="nav-item pe-2">
<button id="btnedit" class="btn btn-primary btn-sm">Edit</button>
</li>
<li class="nav-item pe-2">
<button id="btndelete" class="btn btn-danger btn-sm">Delete</button>
</li>
<li class="nav-item pe-2">
<button id="btnconfirm" class="btn btn-success btn-sm">Save</button>
</li>
<li class="nav-item pe-2">
<button id="btncancel" class="btn btn-danger btn-sm">Cancel</button>
</li>
<li class="nav-item">
<button id="btnclose" class="btn btn-primary btn-sm">Close</button>
</li>
</ul>
</div>
</nav>
<div class="row mx-5">
<h4 class="custom-h4 mt-3">Customer Information</h4>
<hr class="custom-hr">
<div class="row">
<div class="col-auto">
<label for="wdbe_first_name" style="font-weight: 700; font-size: 15px;" class="form-label mt-2">Customer Num</label>
<input id="edtcompanyid" class="form-control input-sm"style="width: 100px" required/>
</div>
<div class="col-auto">
<label for="wdbe_first_name" style="font-weight: 700; font-size: 15px;" class="form-label mt-2">QB ID:</label>
<input id="edtqbid" class="form-control input-sm"style="width: 200px" required/>
</div>
<div class="col-auto">
<label for="wdbe_first_name" style="font-weight: 700; font-size: 15px;" class="form-label mt-2">Customer Name:</label>
<input id="edtcompanyname" type="text" class="form-control" style="width: 300px;" required/>
<div class="invalid-feedback" style="font-size: 15px;">
Please Provide a Company Name.
</div>
</div>
<div class="col-auto">
<label for="wdbe_first_name" style="font-weight: 700; font-size: 15px;" class="form-label mt-2">Customer ID:</label>
<input id="edtcompanyaccountname"type="text" class="form-control" style="width: 150px" required/>
<div class="invalid-feedback" id="shortnamefeedback" style="font-size: 15px;">
Please Provide a Company Account Name.
</div>
</div>
<div class="col-auto">
<label for="wdbe_first_name" style="font-weight: 700; font-size: 15px;" class="form-label mt-2">Start Date:</label>
<input class="form-control input-sm" id="dtpstartdate" type="date" required>
</div>
<div class="col-auto">
<label for="wdbe_first_name" style="font-weight: 700; font-size: 15px;" class="form-label mt-2">End Date:</label>
<input class="form-control input-sm" id="dtpenddate" type="date" required>
</div>
<div class="col-auto">
<label for="wdbe_first_name" style="font-weight: 700; font-size: 15px;" class="form-label mt-2">Phone:</label>
<input id="edtphone" type="text" class="form-control"/>
</div>
<div class="col-auto">
<label for="wdbe_first_name" style="font-weight: 700; font-size: 15px;" class="form-label mt-2">Fax:</label>
<input id="edtfax" class="form-control input-sm"style="width: 200px"/>
</div>
<div class="col-auto">
<label for="wdbe_first_name" style="font-weight: 700; font-size: 15px;" class="form-label mt-2">Representative:</label>
<select id="wdblcbrep" class='form-select'></select>
</div>
</div>
<h4 class="custom-h4 mt-3">Billing Information</h4>
<hr class="custom-hr">
<div class="row">
<div class="col-auto">
<label for="wdbe_first_name" style="font-weight: 700; font-size: 15px;" class="form-label mt-2">Billing Address:</label>
<input id="edtbillingaddress" class="form-control input-sm" style="width: 300px" required/>
<div class="invalid-feedback" style="font-size: 15px;">
Please Provide a Address.
</div>
</div>
<div class="col-auto">
<label for="wdbe_first_name" style="font-weight: 700; font-size: 15px;" class="form-label mt-2">Billing City</label>
<input id="edtbillingcity" class="form-control input-sm" style="width: 250px" required/>
<div class="invalid-feedback" style="font-size: 15px;">
Please Provide a City.
</div>
</div>
<div class="col-auto">
<label for="wdbe_first_name" style="font-weight: 700; font-size: 15px;" class="form-label mt-2">Billing State:</label>
<input id="edtbillingstate" class="form-control input-sm" style="width: 100px" required/>
<div class="invalid-feedback" style="font-size: 15px;">
Please Provide a State.
</div>
</div>
<div class="col-auto">
<label for="wdbe_first_name" style="font-weight: 700; font-size: 15px;" class="form-label mt-2">Billing Zip Code:</label>
<input id="edtbillingzip" class="form-control input-sm" style="width: 200px" required/>
<div class="invalid-feedback" style="font-size: 15px;">
Please Provide a Zip Code.
</div>
</div>
<div class="col-auto">
<label for="wdbe_first_name" style="font-weight: 700; font-size: 15px;" class="form-label mt-2">Billing Contact:</label>
<input id="edtbillingcontact" class="form-control input-sm" style="width: 250px" required/>
<div class="invalid-feedback" style="font-size: 15px;">
Please Provide a Billing Contact.
</div>
</div>
</div>
<div class="row mt-3">
<div class="col-auto">
<label for="wdbe_first_name" style="font-weight: 700; font-size: 15px;" class="form-label">Billing Address Block</label>
<textarea id="memoaddressblock" class="form-control" style=" width: 500px; height: 150px;" required></textarea>
<div class="invalid-feedback" style="font-size: 15px;">
Please Enter a Billing Address Block.
</div>
</div>
</div>
<h4 class="custom-h4 mt-3">Shipping Addresses</h4>
<hr class="custom-hr">
<div class="row">
<div class="overflow-auto mt-2"
style="max-height: calc(100vh - 250px); padding-bottom: 0; width: 100%;">
<table id="tblPhoneGrid" class="table table-striped table-bordered" style="width: 100%;">
<thead class="sticky-top thead-light">
<tr style="font-size: 0.875rem;">
<!-- headers -->
</tr>
</thead>
<tbody id="orderTableBody" class="align-middle">
<!-- rows -->
</tbody>
</table>
</div>
</div>
<div class="row mt-1">
<div class="col-auto">
<button id="btnshipadd" class="btn btn-primary btn-sm">Add</button>
</div>
<div class="col-auto">
<button id="btnshipedit" class="btn btn-primary btn-sm">Edit</button>
</div>
<div class="col-auto">
<button id="btnshipdelete" class="btn btn-danger btn-sm">Delete</button>
</div>
<div class="col-auto">
<button id="btnshipconfirm" class="btn btn-success btn-sm">Save</button>
</div>
<div class="col-auto">
<button id="btnshipcancel" class="btn btn-danger btn-sm">Cancel</button>
</div>
</div>
<div class="row mt-3">
<div class="col-auto">
<label for="wdbe_first_name" style="font-weight: 700; font-size: 15px;" class="form-label mt-2">First Line:</label>
<input id="edtfirstline" class="form-control input-sm" style="width: 300px" required/>
<div class="invalid-feedback" style="font-size: 15px;">
Please Enter the First Line.
</div>
</div>
<div class="col-auto">
<label for="wdbe_first_name" style="font-weight: 700; font-size: 15px;" class="form-label mt-2">Address:</label>
<input id="edtshippingaddress" class="form-control input-sm" style="width: 300px" required/>
<div class="invalid-feedback" style="font-size: 15px;">
Please Enter an Address.
</div>
</div>
<div class="col-auto">
<label for="wdbe_first_name" style="font-weight: 700; font-size: 15px;" class="form-label mt-2">City</label>
<input id="edtshippingcity" class="form-control input-sm" style="width: 250px" required/>
<div class="invalid-feedback" style="font-size: 15px;">
Please Enter a City.
</div>
</div>
<div class="col-auto">
<label for="wdbe_first_name" style="font-weight: 700; font-size: 15px;" class="form-label mt-2">State:</label>
<input id="edtshippingstate" class="form-control input-sm" style="width: 100px" required/>
<div class="invalid-feedback" style="font-size: 15px;">
Please Enter a State.
</div>
</div>
<div class="col-auto">
<label for="wdbe_first_name" style="font-weight: 700; font-size: 15px;" class="form-label mt-2">Zip Code:</label>
<input id="edtshippingzip" class="form-control input-sm" style="width: 200px" required/>
<div class="invalid-feedback" style="font-size: 15px;">
Please Enter a Zip Code.
</div>
</div>
<div class="col-auto">
<label for="wdbe_first_name" style="font-weight: 700; font-size: 15px;" class="form-label mt-2">Contact:</label>
<input id="edtshippingcontact" class="form-control input-sm" style="width: 250px" required/>
<div class="invalid-feedback" style="font-size: 15px;">
Please Enter a Shipping Contact.
</div>
</div>
</div>
<div class="row my-3">
<div class="col-auto">
<label for="wdbe_first_name" style="font-weight: 700; font-size: 15px;" class="form-label">Shipping Block</label>
<textarea id="memoshipblock" class="form-control" style=" width: 500px; height: 150px;" required></textarea>
<div class="invalid-feedback" style="font-size: 15px;">
Please Enter a Shipping Block.
</div>
</div>
</div>
</div>
<div id="spinner" class="position-absolute top-50 start-50 translate-middle d-none">
<div class="lds-roller">
<div></div><div></div><div></div><div></div>
<div></div><div></div><div></div><div></div>
</div>
</div>
<div class="container h-100 d-flex flex-column mt-0" style="max-width: 100%; padding-bottom: 0;">
<!-- Actions Row -->
<div class="row mt-3 justify-content-center align-items-end">
<div class="col-auto">
<label for="wcbpagesize" class="form-label fw-bold" style="font-size: 1.1rem;">
Show
<select class="form-select d-inline-block w-auto" id="wcbpagesize" style="font-size: 1rem;"></select>
entries
</label>
</div>
<div class="col-auto">
<button id="btnaddcustomer" class="btn btn-secondary">Add Customer</button>
</div>
<div class="col-auto">
<label style="font-weight: 700; font-size: 15px;" class="form-label mt-2">Customer ID:</label>
<input id="edtfilter" type="text" class="form-control" style="width: 200px;" />
</div>
</div>
<!-- Entries Label Section d-flex justify-content-between w-100 mt-2-->
<!-- Table Section -->
<div class="row justify-content-center">
<div class="col-12 col-md-8">
<div class="row">
<div class="col-auto">
<label id="lblentries" style="font-size: 1.10rem;"></label>
</div>
</div>
<div id="order_table_section"
class="overflow-auto mt-2"
style="max-height: calc(100vh - 250px);">
<table id="tblPhoneGrid"
class="table table-striped table-bordered w-100">
<thead class="sticky-top thead-light">
<tr style="font-size: 0.875rem;"></tr>
</thead>
<tbody id="orderTableBody" class="align-middle"></tbody>
</table>
</div>
</div>
</div>
<!-- Pagination Section -->
<div class="d-flex justify-content-center w-100 mt-4">
<nav aria-label="Page navigation">
<ul id="pagination" class="pagination">
<!-- Pagination items added dynamically -->
</ul>
</nav>
</div>
</div>
<div class="container">
<br />
<div class="panel panel-red">
<div id="view.errorpage.title" class="panel-heading">
Error Page
</div>
<div id="view.errorpage.message" class="panel-body">
Message
</div>
<div class="panel-footer">
<a href=".">Reload web application</a>
</div>
</div>
</div>
<div class="row">
<div class="col-12">
<h1 class="page-header pt-3" id="view.home.title" style="font-size: 24px;">Home</h1>
<div class="row card-body">
<div class="form-outline mb-4">
<textarea class="form-control" id="view.home.notesmemo" rows="20"></textarea>
</div>
</div>
</div>
</div>
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<title>TMS Web Project</title>
<style>
</style>
</head>
<body>
</body>
</html>
\ No newline at end of file
<nav class="navbar navbar-expand navbar-light bg-light sticky-top border-light" style="z-index: 100;">
<div class="container-fluid d-flex align-items-center ps-0 pe-0">
<!-- Left-aligned form state label -->
<div class="me-auto ps-3">
<label id="lbl_form_state" class="form-label mb-0 fw-bold text-uppercase text-nowrap text-danger" style="font-size: 16px;">View Mode</label>
</div>
<!-- Right-aligned buttons -->
<ul class="navbar-nav ms-auto pe-2 mb-0">
<li class="nav-item pe-2">
<button id="btnadd" class="btn btn-primary btn-sm">Add</button>
</li>
<li class="nav-item pe-2">
<button id="btnedit" class="btn btn-primary btn-sm">Edit</button>
</li>
<li class="nav-item pe-2">
<button id="btndelete" class="btn btn-danger btn-sm">Delete</button>
</li>
<li class="nav-item pe-2">
<button id="btnconfirm" class="btn btn-success btn-sm">Save</button>
</li>
<li class="nav-item pe-2">
<button id="btncancel" class="btn btn-danger btn-sm">Cancel</button>
</li>
</ul>
</div>
</nav>
<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">
<form class="form-inline">
<div class="row">
<div class="col-sm-6">
<label style="font-weight: 700;">Name:</label>
<input class="form-control input-sm" id="edtname">
</div>
<div class="col-sm-6">
<label class= 'pe-2'style="font-weight: 700;">Description:</label>
<input class="form-control input-sm" id="edtdescription">
</div>
</div>
</form>
<div class="row">
<div class="col-sm">
<form class='form-inline'>
<div class="col-sm">
<div class="form-cells"><input type="checkbox" id="cbstatus"></div>
<div class="form-cells ps-1 py-2"><label style="font-weight: 700;font-size: 15px" id="lblactive">Active?</label></div>
</div>
</form>
</div>
</div>
<form class="form-inline">
<div class= "row">
<div class="col-sm-5">
<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>
</form>
<!-- Table Section -->
<div id="order_table_section" class="overflow-auto mt-2"
style="max-height: calc(100vh - 250px); padding-bottom: 0; width: 100%;">
<table id="tblPhoneGrid" class="table table-striped table-bordered border-light" style="width: 100%;">
<thead class="sticky-top thead-light">
<tr style="font-size: 0.875rem;">
<!-- Table headers are dynamically generated -->
</tr>
</thead>
<tbody id="orderTableBody" class="align-middle">
<!-- Table rows are dynamically generated -->
</tbody>
</table>
</div>
<label id="lblentries"></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>
</div>
</div>
<nav class="navbar navbar-light bg-light login-navbar">
<div class="d-flex align-items-center">
<a id="view.login.apptitle" class="navbar-brand ps-2" href="index.html"> Koehler-Gibson Orders</a>
<span id="view.login.version" class="small text-muted ms-2"></span>
</div>
</nav>
<div class="container mt-5">
<div class="row justify-content-center">
<div class="col-auto">
<img id="kgpicture" style="width: 250px; height: 250px;">
</div>
<div class="col-md-6 col-lg-4">
<div class="card login-card">
<div class="card-header">
<h3 id="view.login.title" class="fs-6 card-title">Please Sign In</h3>
</div>
<div class="card-body">
<div role="form">
<div id="view.login.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>
<fieldset>
<div class="mb-3">
<input id="view.login.edtusername" class="form-control" type="text" autofocus placeholder="Username">
</div>
<div class="mb-3">
<input id="view.login.edtpassword" class="form-control" type="password" placeholder="Password">
</div>
<div class="mb-3">
<button id="view.login.btnlogin" class="btn btn-primary w-100">Login</button>
</div>
<div class="text-end text-muted small mt-1">
<span id="lbl_client_version"></span>
</div>
</fieldset>
</div>
</div>
</div>
</div>
</div>
</div>
<div id="wrapper">
<nav class="navbar navbar-expand navbar-light bg-light" style="margin-bottom: 0px;">
<div class="container-fluid">
<div class="d-flex align-items-center">
<a id="view.main.apptitle" class="navbar-brand" href="index.html">Koehler-Gibson Orders</a>
<span id="view.main.version" class="small text-muted ms-2"></span>
</div>
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="dropdown-item" id="lblorders" href="#"><i class="fa fa-tags fa-fw"></i><span> Orders</span></a>
</li>
<li class="nav-item">
<a class="dropdown-item" id="lblcustomers" href="#"><i class="fa fa-tags fa-fw"></i><span> Customers</span></a>
</li>
<li class="nav-item">
<a class="dropdown-item" id="dropdown.menu.itemlist" href="#"><i class="fa fa-cubes fa-fw"></i><span> Items</span></a>
</li>
</ul>
<div class="collapse navbar-collapse show" id="navbarNavDropdown">
<ul class="navbar-nav ms-auto">
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" id="navbarDropdownMenuLink" role="button" data-bs-toggle="dropdown" aria-expanded="false">
<i class="fa fa-user fa-fw"></i><span class="panel-title" id="view.main.username"> Username </span>
</a>
<ul class="dropdown-menu dropdown-menu-end" aria-labelledby="navbarDropdownMenuLink">
<li>
<a class="dropdown-item" id="dropdown.menu.home" href="#"><i class="fa fa-home fa-fw"></i><span> Home</span></a>
</li>
<li>
<a class="dropdown-item" id="dropdown.menu.userprofile" href="#"><i class="fa fa-user fa-fw"></i><span> User Profile</span></a>
</li>
<li>
<a class="dropdown-item" id="dropdown.menu.users" href="#"><i class="fas fa-address-book fa-fw"></i><span> Users</span></a>
</li>
<li>
<a class="dropdown-item" id="dropdown.menu.linktoqb" href="#"><i class="fas fa-book fa-fw"></i><span> Link to QB</span></a>
</li>
<li>
<hr class="dropdown-divider">
</li>
<li>
<a class="dropdown-item" id="dropdown.menu.logout" href="#"><i class="fa fa-sign-out fa-fw"></i><span> Logout</span></a>
</li>
</ul>
</li>
</ul>
</div>
</div>
</nav>
<!-- Toast wrapper directly under navbar -->
<div id="toast-wrapper"
class="position-fixed top-0 start-0 mt-5 ms-4"
style="z-index: 1080; min-width: 300px; max-width: 500px;">
<div id="bootstrapToast"
class="toast align-items-center text-white bg-success border-0 shadow"
role="alert" aria-live="assertive" aria-atomic="true">
<div class="d-flex">
<div class="toast-body" id="bootstrapToastBody">
Success message
</div>
<button type="button" class="btn-close btn-close-white me-2 m-auto"
data-bs-dismiss="toast" aria-label="Close"></button>
</div>
</div>
</div>
<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">
<textarea class="form-control" id="main.debugmemo" rows="4"></textarea>
</div>
</div>
</div>
</div>
</div>
<div id="spinner" class="position-absolute top-50 start-50 translate-middle d-none">
<div class="lds-roller">
<div></div><div></div><div></div><div></div>
<div></div><div></div><div></div><div></div>
</div>
</div>
<div class="modal fade" id="main_errormodal" tabindex="-1" aria-labelledby="main_lblmodal" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content shadow-lg">
<div class="modal-header">
<h5 class="modal-title" id="main_lblmodal">Error</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body fs-6 fw-bold" id="main_lblmodal_body">
Please contact EMSystems to solve the issue.
</div>
<div class="modal-footer justify-content-center">
<button type="button" id="btn_modal_restart" class="btn btn-primary">Back to Orders</button>
</div>
</div>
</div>
</div>
<div class="modal fade" id="main_confirmation_modal" tabindex="-1" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content shadow-lg">
<div class="modal-header">
<h5 class="modal-title">Confirm</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body fw-bold" id="main_modal_body">
Placeholder text
</div>
<div class="modal-footer justify-content-center">
<button type="button" class="btn btn-primary me-3" id="btn_confirm_left">Cancel</button>
<button type="button" class="btn btn-secondary" id="btn_confirm_right">Confirm</button>
</div>
</div>
</div>
</div>
<div class="modal fade" id="main_notification_modal" tabindex="-1" aria-labelledby="main_lblmodal" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content shadow-lg">
<div class="modal-header">
<h5 class="modal-title" id="main_notification_modal">Info</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body fs-6 fw-bold" id="main_notification_modal_body">
Please contact EMSystems to solve the issue.
</div>
<div class="modal-footer justify-content-center">
<button type="button" id="btn_modal_close" class="btn btn-primary">Close</button>
</div>
</div>
</div>
</div>
<div id="spinner" class="position-absolute top-50 start-50 translate-middle d-none">
<div class="lds-roller">
<div></div><div></div><div></div><div></div>
<div></div><div></div><div></div><div></div>
</div>
</div>
<nav class="navbar navbar-expand navbar-light bg-light border-light sticky-top" style="z-index: 100;">
<div class="container-fluid d-flex align-items-center ps-0 pe-0">
<!-- Left-aligned label -->
<div class="me-auto ps-3">
<label id="lbl_form_state" class="form-label mb-0 fw-bold text-uppercase text-nowrap text-danger" style="font-size: 16px;">Test</label>
</div>
<!-- Right-aligned buttons -->
<ul class="navbar-nav ms-auto pe-2 mb-0">
<li class="nav-item pe-2">
<button id="btnadd" class="btn btn-primary btn-sm">Add</button>
</li>
<li class="nav-item pe-2">
<button id="btnedit" class="btn btn-primary btn-sm">Edit</button>
</li>
<li class="nav-item pe-2">
<button id="btncopy" class="btn btn-primary btn-sm">Copy</button>
</li>
<li class="nav-item pe-2">
<button id="btndelete" class="btn btn-danger btn-sm">Delete</button>
</li>
<li class="nav-item pe-2">
<button id="btnconfirm" class="btn btn-success btn-sm">Save</button>
</li>
<li class="nav-item pe-2">
<button id="btncancel" class="btn btn-danger btn-sm">Cancel</button>
</li>
<li class="nav-item pe-2">
<button id="btnpdf" class="btn btn-primary btn-sm">PDF</button>
</li>
<li class="nav-item pe-2">
<button id="btnsendtoqb" class="btn btn-primary btn-sm">Send To QB</button>
</li>
<li class="nav-item">
<button id="btnclose" class="btn btn-primary btn-sm">Close</button>
</li>
</ul>
</div>
</nav>
<div class="row mx-5">
<h4 class="custom-h4 mt-3">Customer</h4>
<hr class="custom-hr">
<div class="row">
<div class="col-auto">
<label for="wdbe_first_name" style="font-weight: 700; font-size: 15px;" class="form-label mt-2">Customer Name:</label>
<input id="edtcompanyname" type="text" class="form-control" style="width: 300px;" required/>
<div class="invalid-feedback" style="font-size: 15px;">
Please Provide a Customer Name.
</div>
</div>
<div class="col-auto">
<label for="wdbe_first_name" style="font-weight: 700; font-size: 15px;" class="form-label mt-2">Customer ID:</label>
<input id="edtaccountcompanyname"type="text" class="form-control" style="width: 150px" required/>
<div class="invalid-feedback" style="font-size: 15px;">
Please Provide a Customer ID Name.
</div>
</div>
<div class="col-auto d-flex flex-column">
<label for="wdbcbinqb" class="form-label mt-2" style="font-weight: 700; font-size: 15px;">In QB?:</label>
<input id="wdbcbinqb" type="checkbox" class="form-check-input mt-1"
style="transform: scale(1.2); width: 20px; height: 20px;">
</div>
<div class="col-auto">
<label for="wdbe_first_name" style="font-weight: 700; font-size: 15px;" class="form-label mt-2">QB Order Number:</label>
<input id="edtqbordernum"type="text" class="form-control" style="width: 150px" required/>
</div>
</div>
<h4 class="custom-h4 mt-3">Staff Fields</h4>
<hr class="custom-hr">
<div class="row">
<div class="col-auto">
<label for="wdbe_first_name" style="font-weight: 700; font-size: 15px;" class="form-label mt-2">Order Num:</label>
<input id="edtordernum" class="form-control input-sm" style="width: 100px"/>
</div>
<div class="col-auto">
<label for="wdbe_first_name" style="font-weight: 700; font-size: 15px;" class="form-label mt-2">Order Date:</label>
<input class="form-control input-sm" id="dtporderdate" type="date" required>
<div class="invalid-feedback" style="font-size: 15px;">
Please Provide an Order Date.
</div>
</div>
<div class="col-auto">
<label for="wdbe_first_name" style="font-weight: 700; font-size: 15px;" class="form-label mt-2">Proof Date:</label>
<input class="form-control input-sm" id="dtpproofdate" type="date">
</div>
<div class="col-auto">
<label for="wdbe_first_name" style="font-weight: 700; font-size: 15px;" class="form-label mt-2">Ship Date:</label>
<input class="form-control input-sm" id="dtpshipdate" type="date">
</div>
<div class="col-auto">
<label for="wdbe_first_name" style="font-weight: 700; font-size: 15px;" class="form-label mt-2">Ship Via:</label>
<input id="edtshipvia" type="text" class="form-control"/>
</div>
<div class="col-auto">
<label for="wdbe_first_name" style="font-weight: 700; font-size: 15px;" class="form-label mt-2">Quantity:</label>
<input id="edtquantity" class="form-control input-sm" style="width: 100px" type="number" min="1" required/>
<div class="invalid-feedback" style="font-size: 15px;" required>
Please Provide a Valid Quantity.
</div>
</div>
<div class="col-auto">
<label for="wdbe_first_name" style="font-weight: 700; font-size: 15px;" class="form-label mt-2">Price:</label>
<input id="edtprice" class="form-control input-sm" style="width: 100px" type="number" min="1" required/>
<div class="invalid-feedback" style="font-size: 15px;">
Please Provide a Valid Price.
</div>
</div>
<div>
<label for="wdbe_first_name" style="font-weight: 700; font-size: 15px;" class="form-label mt-2">Invoice To:</label>
<input id="edtinvoiceto" class="form-control input-sm" required/>
<div class="invalid-feedback" style="font-size: 15px;">
Please Provide an Invoice Address.
</div>
</div>
<div>
<label for="wdbe_first_name" style="font-weight: 700; font-size: 15px;" class="form-label mt-2">Ship To:</label>
<select id="wcbshipto" class='form-select' required></select>
<div class="invalid-feedback" style="font-size: 15px;">
Please Provide a Ship To Address.
</div>
<div class="mt-2">
<button id="btnaddaddress" class="btn btn-primary btn-sm">Add Address</button>
</div>
</div>
<div class="col-auto">
<label for="wdbe_first_name" style="font-weight: 700; font-size: 15px;" class="form-label mt-2">PO Number:</label>
<input id="edtponumber" class="form-control input-sm" width='50%'/>
</div>
<div class="col-auto">
<label style="font-weight: 700; font-size: 15px;" class="form-label mt-2">QB Item:</label>
<select id="wcbqbitem" class='form-select' required></select>
<div class="invalid-feedback" style="font-size: 15px;">
Please Provide a QB Item.
</div>
</div>
<div class="col-auto">
<label for="wdbe_first_name" style="font-weight: 700; font-size: 15px;" class="form-label mt-2">Job Name:</label>
<input id="edtjobname" class="form-control input-sm" style="width: 600px"/>
<div class="invalid-feedback" style="font-size: 15px;">
Please Provide a Job Name.
</div>
</div>
<div class="row">
<div class="col-12">
<label for="edtitemdescription" class="form-label mt-2" style="font-weight: 700; font-size: 15px;">
Item Description:
</label>
<input id="edtitemdescription" class="form-control" style="width: 100%;" />
</div>
</div>
<div class="col-auto">
<label for="wdbe_first_name" style="font-weight: 700; font-size: 15px;" class="form-label mt-2">Art Due:</label>
<input class="form-control input-sm" id="dtpartdue" type="date">
</div>
<div class="col-auto">
<label for="wdbe_first_name" style="font-weight: 700; font-size: 15px;" class="form-label mt-2">Plate Due:</label>
<input class="form-control input-sm" id="dtpplatedue" type="date">
</div>
<div class="col-auto">
<label for="wdbe_first_name" style="font-weight: 700; font-size: 15px;" class="form-label mt-2">Mount Due:</label>
<input class="form-control input-sm" id="dtpmountdue" type="date">
</div>
</div>
<h4 class="custom-h4 mt-3">Supplied by Customer</h4>
<hr class="custom-hr">
<div class="row">
<div class="col-auto">
<input type="checkbox" id="cbcolorcopy">
<label class='pe-2' style="font-weight: 700; font-size: 15px;">Color Copy?</label>
</div>
<div class="col-auto">
<input type="checkbox" id="cbplates">
<label class='pe-2' style="font-weight: 700; font-size: 15px;">Plates?</label>
</div>
<div class="col-auto">
<input type="checkbox" id="cbsampleCarton">
<label class='pe-2' style="font-weight: 700; font-size: 15px;">Sample Carton?</label>
</div>
<div class="col-auto">
<input type="checkbox" id="edtemail"/>
<label class='pe-2' style="font-weight: 700; font-size: 15px;">Email?</label>
</div>
<div class="col-auto">
<input type="checkbox" id="cbftp"/>
<label class='pe-2' style="font-weight: 700; font-size: 15px;">FTP?</label>
</div>
<div class="col-auto">
<label class='pe-2' style="font-weight: 700; font-size: 15px;">Other:</label>
<input class="form-control input-sm" id="edtother" style="width: 150px"/>
</div>
<div class="col-auto">
<input type="checkbox" id="edtexistingcuttingdie"/>
<label class='pe-2' style="font-weight: 700; font-size: 15px;">Existing Cutting Die?</label>
</div>
<div class="col-auto">
<input type="checkbox" id="edtrefartprintcard"/>
<label class='pe-2' style="font-weight: 700; font-size: 15px;">Ref Art Print Card?</label>
</div>
<div class="col-auto">
<input type="checkbox" id="edtrefartapdf"/>
<label class='pe-2' style="font-weight: 700; font-size: 15px;">Ref Art A PDF?</label>
</div>
</div>
<h4 class="custom-h4 mt-3">Layout</h4>
<hr class="custom-hr">
<div class="row">
<div class="col-auto">
<label for="wdbe_first_name" style="font-weight: 700; font-size: 15px;" class="form-label mt-2">RSC L:</label>
<input id="edtrscl" class="form-control input-sm" style="width: 150px"/>
</div>
<div class="col-auto">
<label for="wdbe_first_name" style="font-weight: 700; font-size: 15px;" class="form-label mt-2">RSC W:</label>
<input id="edtrscw" class="form-control input-sm" style="width: 150px"/>
</div>
<div class="col-auto">
<label for="wdbe_first_name" style="font-weight: 700; font-size: 15px;" class="form-label mt-2">RSC D:</label>
<input id="edtrscd" class="form-control input-sm" style="width: 150px"/>
</div>
<div class="col-auto">
<label for="wdbe_first_name" style="font-weight: 700; font-size: 15px;" class="form-label mt-2">Die Cut No:</label>
<input class="form-control input-sm" id="edtdiecutno" style="width: 150px"/>
</div>
<div class="col-auto">
<label for="wdbe_first_name" style="font-weight: 700; font-size: 15px;" class="form-label mt-2">Across No:</label>
<input class="form-control input-sm" id="edtacrossno" style="width: 150px"/>
</div>
<div class="col-auto">
<label for="wdbe_first_name" style="font-weight: 700; font-size: 15px;" class="form-label mt-2">Around No:</label>
<input class="form-control input-sm" id="edtaroundno" style="width: 150px"/>
</div>
<div class="col-auto">
<label for="wdbe_first_name" style="font-weight: 700; font-size: 15px;" class="form-label mt-2">CAD File:</label>
<input id="edtcadfile" class="form-control input-sm" style="width: 150px"/>
</div>
<div class="col-auto">
<input type="checkbox" id="cbexcaliburdie">
<label for="wdbe_first_name" style="font-weight: 700; font-size: 15px;" class="form-label mt-2">Excalibur Die?</label>
</div>
<div class="col-auto">
<label for="wdbe_first_name" style="font-weight: 700; font-size: 15px;" class="form-label mt-2">RSC Style:</label>
<input id="edtrscstyle" class="form-control input-sm" style="width: 150px"/>
</div>
</div>
<h4 class="custom-h4 mt-3">Mounting</h4>
<hr class="custom-hr">
<div class="row">
<div class="col-auto">
<input type="checkbox" id="cbloose">
<label for="wdbe_first_name" style="font-weight: 700; font-size: 15px;" class="form-label mt-2">Loose:</label>
<input id="edtloose" class="form-control input-sm" style="width: 150px"/>
</div>
<div class="col-auto">
<input type="checkbox" id="cbstickybak">
<label for="wdbe_first_name" style="font-weight: 700; font-size: 15px;" class="form-label mt-2">Sticky Bak?</label>
</div>
<div class="col-auto">
<input type="checkbox" id="cbfullmount">
<label for="wdbe_first_name" style="font-weight: 700; font-size: 15px;" class="form-label mt-2">Full Mount?</label>
</div>
<div class="col-auto">
<input type="checkbox" id="cbstripmount">
<label for="wdbe_first_name" style="font-weight: 700; font-size: 15px;" class="form-label mt-2">Strip Mount:</label>
<input id="edtstripmount" class="form-control input-sm" style="width: 150px"/>
</div>
<div class="col-auto">
<label for="wdbe_first_name" style="font-weight: 700; font-size: 15px;" class="form-label mt-2">Standard Setup:</label>
<input id="edtstandardsetup" class="form-control input-sm" style="width: 150px"/>
</div>
<div class="col-auto">
<label for="wdbe_first_name" style="font-weight: 700; font-size: 15px;" class="form-label mt-2">Custom Backing:</label>
<input id="edtcustombacking" class="form-control input-sm" style="width: 150px"/>
</div>
<div class="col-auto">
<label for="wdbe_first_name" style="font-weight: 700; font-size: 15px;" class="form-label mt-2">Custom Adhesive:</label>
<input id="edtcustomadhesive" class="form-control input-sm" style="width: 150px"/>
</div>
<div class="col-auto">
<label for="wdbe_first_name" style="font-weight: 700; font-size: 15px;" class="form-label mt-2">Cylinder Size:</label>
<input id="edtcylindersize" class="form-control input-sm" style="width: 150px"/>
</div>
<div class="col-auto">
<label for="wdbe_first_name" style="font-weight: 700; font-size: 15px;" class="form-label mt-2">Machine Indent:</label>
<input id="edtmachineindent" class="form-control input-sm" style="width: 150px"/>
</div>
<div class="col-auto">
<label for="wdbe_first_name" style="font-weight: 700; font-size: 15px;" class="form-label mt-2">Cross Hairs:</label>
<input id="edtcrosshairs" class="form-control input-sm" style="width: 150px"/>
</div>
<div class="col-auto">
<label for="wdbe_first_name" style="font-weight: 700; font-size: 15px;" class="form-label mt-2">Clemson:</label>
<input id="edtclemson" class="form-control input-sm" style="width: 150px"/>
</div>
</div>
<h4 class="custom-h4 mt-3">Colors</h4>
<hr class="custom-hr">
<div class="row align-items-center">
<!-- placeholders for the 4 dynamic input columns to center the Add Color button the dynamically created Remove button -->
<div class="col-sm"></div>
<div class="col-sm"></div>
<div class="col-sm"></div>
<div class="col-sm"></div>
<div class="col-auto d-flex justify-content-center">
<!-- Delphi-generated TWebButton stays here -->
<button id="btnaddcolor" class="btn btn-primary btn-sm me-3">
Add Color
</button>
</div>
</div>
<!-- your existing container for the dynamic rows -->
<div id="additionalFields" class="row mt-3"></div>
<h4 class="custom-h4 mt-3">Proofing</h4>
<hr class="custom-hr">
<div class="row">
<div class="col-auto">
<label for="wdbe_first_name" style="font-weight: 700; font-size: 15px;" class="form-label mt-2">Fax:</label>
<input id="edtfax" class="form-control input-sm" style="width: 150px"/>
</div>
<div class="col-auto">
<label for="wdbe_first_name" style="font-weight: 700; font-size: 15px;" class="form-label mt-2">Fax Attn:</label>
<input id="edtfaxattn" class="form-control input-sm" style="width: 150px"/>
</div>
<div class="col-auto">
<label for="wdbe_first_name" style="font-weight: 700; font-size: 15px;" class="form-label mt-2">Email:</label>
<input id="edtproofemail" class="form-control input-sm" style="width: 150px"/>
</div>
<div class="col-auto">
<label for="wdbe_first_name" style="font-weight: 700; font-size: 15px;" class="form-label mt-2">Email Attn:</label>
<input id="edtemailattn" class="form-control input-sm" style="width: 150px"/>
</div>
<div class="col-auto">
<label for="wdbe_first_name" style="font-weight: 700; font-size: 15px;" class="form-label mt-2">Ship To:</label>
<input id="edtproofshipto" class="form-control input-sm" style="width: 150px"/>
</div>
<div class="col-auto">
<input type="checkbox" id="cbfullsizepanel">
<label for="wdbe_first_name" style="font-weight: 700; font-size: 15px;" class="form-label mt-2">Full Size Panel?</label>
</div>
<div class="col-auto">
<input type="checkbox" id="cbprintcard">
<label for="wdbe_first_name" style="font-weight: 700; font-size: 15px;" class="form-label mt-2">Print Card?</label>
</div>
<div class="col-auto">
<input type="checkbox" id="cbwideformat">
<label for="wdbe_first_name" style="font-weight: 700; font-size: 15px;" class="form-label mt-2">Wide Format?</label>
</div>
<div class="col-auto">
<input type="checkbox" id="cbpdffile">
<label for="wdbe_first_name" style="font-weight: 700; font-size: 15px;" class="form-label mt-2">PDF File?</label>
</div>
<div class="col-auto">
<label for="wdbe_first_name" style="font-weight: 700; font-size: 15px;" class="form-label mt-2">Other:</label>
<input id="edtproofother" class="form-control input-sm" style="width: 150px"/>
</div>
<div class="col-auto">
<input type="checkbox" id="cbartapprovedasis">
<label for="wdbe_first_name" style="font-weight: 700; font-size: 15px;" class="form-label mt-2">Art Approved As Is?</label>
</div>
<div class="col-auto">
<label for="wdbe_first_name" style="font-weight: 700; font-size: 15px;" class="form-label mt-2">Approved Date:</label>
<input class="form-control input-sm" id="dtpapproveddate" type="date">
</div>
</div>
<h4 class="custom-h4 mt-3">Plates</h4>
<hr class="custom-hr">
<div class="row">
<div class="col-auto">
<label style="font-weight: 700; font-size: 15px;" class="form-label mt-2">Thickness:</label>
<select id="wcbthickness" class='form-select'></select>
</div>
<div class="col-auto">
<label style="font-weight: 700; font-size: 15px;" class="form-label mt-2">Plate Material:</label>
<select id="wcbmaterial" class='form-select'></select>
</div>
<div class="col-auto">
<label class="form-label mt-2" style="font-weight: 700; font-size: 15px;" id="lbljobnumber">Job Number:</label>
<input id="edtjobnumber" class="form-control input-sm" style="width: 150px"/>
</div>
</div>
<h4 class="custom-h4 mt-3">General</h4>
<hr class="custom-hr">
<div class="row pb-3">
<div class="col-auto">
<label for="wdbe_first_name" style="font-weight: 700; font-size: 15px;" class="form-label">Special Instructions (Max Length 2048 characters)</label>
<textarea id="edtspecialinstructions" class="form-control mb-3" style=" width: 1100px; height: 150px;" maxlength="2048"></textarea>
</div>
</div>
</div>
<nav class="navbar navbar-expand navbar-light bg-light border-light sticky-top" style="z-index: 100;">
<div class="container-fluid d-flex align-items-center ps-0 pe-0">
<!-- Left-aligned label -->
<div class="me-auto ps-3">
<label id="lbl_order_type" class="form-label mb-0 fw-bold text-uppercase text-nowrap" style="font-size: 16px;">Cutting Die -</label>
</div>
<div class="me-auto ps-2">
<label id="lbl_form_state" class="form-label mb-0 fw-bold text-uppercase text-nowrap text-danger" style="font-size: 16px;"> View Mode</label>
</div>
<!-- Right-aligned buttons -->
<ul class="navbar-nav ms-auto pe-2 mb-0">
<li class="nav-item pe-2">
<button id="btnadd" class="btn btn-primary btn-sm">Add</button>
</li>
<li class="nav-item pe-2">
<button id="btnedit" class="btn btn-primary btn-sm">Edit</button>
</li>
<li class="nav-item pe-2">
<button id="btncopy" class="btn btn-primary btn-sm">Copy</button>
</li>
<li class="nav-item pe-2">
<button id="btndelete" class="btn btn-danger btn-sm">Delete</button>
</li>
<li class="nav-item pe-2">
<button id="btnconfirm" class="btn btn-success btn-sm">Save</button>
</li>
<li class="nav-item pe-2">
<button id="btncancel" class="btn btn-danger btn-sm">Cancel</button>
</li>
<li class="nav-item pe-2">
<button id="btnpdf" class="btn btn-primary btn-sm">PDF</button>
</li>
<li class="nav-item pe-2">
<button id="btnsendtoqb" class="btn btn-primary btn-sm">Send To QB</button>
</li>
<li class="nav-item">
<button id="btnclose" class="btn btn-primary btn-sm">Close</button>
</li>
</ul>
</div>
</nav>
<div class="row mx-5">
<h4 class="custom-h4 mt-3">Customer</h4>
<hr class="custom-hr">
<div class="row">
<div class="col-auto">
<label for="wdbe_first_name" style="font-weight: 700; font-size: 15px;" class="form-label mt-2">Customer Name:</label>
<input id="edtcompanyname" type="text" class="form-control" style="width: 300px;" required/>
<div class="invalid-feedback" style="font-size: 15px;">
Please Provide a Customer Name.
</div>
</div>
<div class="col-auto">
<label for="wdbe_first_name" style="font-weight: 700; font-size: 15px;" class="form-label mt-2">Customer ID:</label>
<input id="edtaccountcompanyname"type="text" class="form-control" style="width: 150px" required/>
<div class="invalid-feedback" style="font-size: 15px;">
Please Provide a Customer ID.
</div>
</div>
<div class="col-auto d-flex flex-column">
<label for="wdbcbinqb" class="form-label mt-2" style="font-weight: 700; font-size: 15px;">In QB?:</label>
<input id="wdbcbinqb" type="checkbox" class="form-check-input mt-1"
style="transform: scale(1.2); width: 20px; height: 20px;">
</div>
<div class="col-auto">
<label for="wdbe_first_name" style="font-weight: 700; font-size: 15px;" class="form-label mt-2">QB Order Number:</label>
<input id="edtqbordernum"type="text" class="form-control" style="width: 150px"/>
</div>
</div>
<h4 class="custom-h4 mt-3">Staff Fields</h4>
<hr class="custom-hr">
<div class="row">
<div class="col-auto">
<label for="wdbe_first_name" style="font-weight: 700; font-size: 15px;" class="form-label mt-2">Order Num:</label>
<input id="edtordernum" class="form-control input-sm" style="width: 100px"/>
</div>
<div class="col-auto">
<label for="wdbe_first_name" style="font-weight: 700; font-size: 15px;" class="form-label mt-2">Order Date:</label>
<input class="form-control input-sm" id="dtporderdate" type="date" required>
<div class="invalid-feedback" style="font-size: 15px;">
Please Provide an Order Date.
</div>
</div>
<div class="col-auto">
<label for="wdbe_first_name" style="font-weight: 700; font-size: 15px;" class="form-label mt-2">Proof Date:</label>
<input class="form-control input-sm" id="dtpproofdate" type="date">
</div>
<div class="col-auto">
<label for="wdbe_first_name" style="font-weight: 700; font-size: 15px;" class="form-label mt-2">Ship Date:</label>
<input class="form-control input-sm" id="dtpshipdate" type="date">
</div>
<div class="col-auto">
<label for="wdbe_first_name" style="font-weight: 700; font-size: 15px;" class="form-label mt-2">Ship Via:</label>
<input id="edtshipvia" type="text" class="form-control"/>
</div>
<div class="col-auto">
<label for="wdbe_first_name" style="font-weight: 700; font-size: 15px;" class="form-label mt-2">Quantity:</label>
<input id="edtquantity" class="form-control input-sm" style="width: 100px" type="number" min="1" required/>
<div class="invalid-feedback" style="font-size: 15px;" required>
Please Provide a Valid Quantity.
</div>
</div>
<div class="col-auto">
<label for="wdbe_first_name" style="font-weight: 700; font-size: 15px;" class="form-label mt-2">Price:</label>
<input id="edtprice" class="form-control input-sm" style="width: 100px" type="number" min="1" required/>
<div class="invalid-feedback" style="font-size: 15px;">
Please Provide a Valid Price.
</div>
</div>
<div>
<label for="wdbe_first_name" style="font-weight: 700; font-size: 15px;" class="form-label mt-2">Invoice To:</label>
<input id="edtinvoiceto" class="form-control input-sm" required/>
<div class="invalid-feedback" style="font-size: 15px;">
Please Provide an Invoice Address.
</div>
</div>
<div>
<label for="wdbe_first_name" style="font-weight: 700; font-size: 15px;" class="form-label mt-2">Ship To:</label>
<select id="wcbshipto" class='form-select' required></select>
<div class="invalid-feedback" style="font-size: 15px;">
Please Provide a Ship To Address.
</div>
<div class="mt-2">
<button id="btnaddaddress" class="btn btn-primary btn-sm">Add Address</button>
</div>
</div>
<div class="col-auto">
<label for="wdbe_first_name" style="font-weight: 700; font-size: 15px;" class="form-label mt-2">PO Number:</label>
<input id="edtponumber" class="form-control input-sm" width='50%'/>
</div>
<div class="col-auto">
<label style="font-weight: 700; font-size: 15px;" class="form-label mt-2">QB Item:</label>
<select id="wcbqbitem" class='form-select' required></select>
<div class="invalid-feedback" style="font-size: 15px;">
Please Provide a QB Item.
</div>
</div>
<div class="col-auto">
<label for="wdbe_first_name" style="font-weight: 700; font-size: 15px;" class="form-label mt-2">Job Name:</label>
<input id="edtjobname" class="form-control input-sm" style="width: 600px"/>
<div class="invalid-feedback" style="font-size: 15px;">
Please Provide a Job Name.
</div>
</div>
<div class="row">
<div class="col-12">
<label for="edtitemdescription" class="form-label mt-2" style="font-weight: 700; font-size: 15px;">
Item Description:
</label>
<input id="edtitemdescription" class="form-control" style="width: 100%;" />
</div>
</div>
</div>
<h4 class="custom-h4 mt-3 mt-3">General</h4>
<hr class="custom-hr">
<div class="row">
<div class="col-auto">
<label for="wdbe_first_name" style="font-weight: 700; font-size: 15px;" class="form-label">Special Instructions (Max Length 2048 characters)</label>
<textarea id="edtspecialinstructions" class="form-control mb-3" style=" width: 1100px; height: 150px;" maxlength="2048"></textarea>
</div>
</div>
</div>
<nav class="navbar navbar-expand navbar-light bg-light border-light sticky-top" style="z-index: 100;">
<div class="container-fluid d-flex align-items-center ps-0 pe-0">
<!-- Left-aligned label -->
<div class="me-auto ps-3">
<label id="lbl_form_state" class="form-label mb-0 fw-bold text-uppercase text-nowrap text-danger" style="font-size: 16px;">Test</label>
</div>
<!-- Right-aligned buttons -->
<ul class="navbar-nav ms-auto pe-2 mb-0">
<li class="nav-item pe-2">
<button id="btnadd" class="btn btn-primary btn-sm">Add</button>
</li>
<li class="nav-item pe-2">
<button id="btnedit" class="btn btn-primary btn-sm">Edit</button>
</li>
<li class="nav-item pe-2">
<button id="btncopy" class="btn btn-primary btn-sm">Copy</button>
</li>
<li class="nav-item pe-2">
<button id="btndelete" class="btn btn-danger btn-sm">Delete</button>
</li>
<li class="nav-item pe-2">
<button id="btnconfirm" class="btn btn-success btn-sm">Save</button>
</li>
<li class="nav-item pe-2">
<button id="btncancel" class="btn btn-danger btn-sm">Cancel</button>
</li>
<li class="nav-item pe-2">
<button id="btnpdf" class="btn btn-primary btn-sm">PDF</button>
</li>
<li class="nav-item pe-2">
<button id="btnsendtoqb" class="btn btn-primary btn-sm">Send To QB</button>
</li>
<li class="nav-item">
<button id="btnclose" class="btn btn-primary btn-sm">Close</button>
</li>
</ul>
</div>
</nav>
<div class="row mx-5">
<h4 class="custom-h4 mt-3">Customer</h4>
<hr class="custom-hr">
<div class="row">
<div class="col-auto">
<label for="wdbe_first_name" style="font-weight: 700; font-size: 15px;" class="form-label mt-2">Customer Name:</label>
<input id="edtcompanyname" type="text" class="form-control" style="width: 300px;" required/>
<div class="invalid-feedback" style="font-size: 15px;">
Please Provide a Customer Name.
</div>
</div>
<div class="col-auto">
<label for="wdbe_first_name" style="font-weight: 700; font-size: 15px;" class="form-label mt-2">Customer ID:</label>
<input id="edtaccountcompanyname"type="text" class="form-control" style="width: 150px" required/>
<div class="invalid-feedback" style="font-size: 15px;">
Please Provide a Customer ID.
</div>
</div>
<div class="col-auto d-flex flex-column">
<label for="wdbcbinqb" class="form-label mt-2" style="font-weight: 700; font-size: 15px;">In QB?:</label>
<input id="wdbcbinqb" type="checkbox" class="form-check-input mt-1"
style="transform: scale(1.2); width: 20px; height: 20px;">
</div>
<div class="col-auto">
<label for="wdbe_first_name" style="font-weight: 700; font-size: 15px;" class="form-label mt-2">QB Order Number:</label>
<input id="edtqbordernum"type="text" class="form-control" style="width: 150px"/>
</div>
</div>
<h4 class="custom-h4 mt-3">Staff Fields</h4>
<hr class="custom-hr">
<div class="row">
<div class="col-auto">
<label for="wdbe_first_name" style="font-weight: 700; font-size: 15px;" class="form-label mt-2">Order Num:</label>
<input id="edtordernum" class="form-control input-sm" style="width: 100px"/>
</div>
<div class="col-auto">
<label for="wdbe_first_name" style="font-weight: 700; font-size: 15px;" class="form-label mt-2">Order Date:</label>
<input class="form-control input-sm" id="dtporderdate" type="date" required>
<div class="invalid-feedback" style="font-size: 15px;">
Please Provide an Order Date.
</div>
</div>
<div class="col-auto">
<label style="font-weight: 700; font-size: 15px;" class="form-label mt-2">Proof Date:</label>
<input class="form-control input-sm" id="dtpproofdate" type="date">
</div>
<div class="col-auto">
<label style="font-weight: 700; font-size: 15px;" class="form-label mt-2">Ship Date:</label>
<input class="form-control input-sm" id="dtpshipdate" type="date">
</div>
<div class="col-auto">
<label style="font-weight: 700; font-size: 15px;" class="form-label mt-2">Ship Via:</label>
<input id="edtshipvia" type="text" class="form-control"/>
</div>
<div class="col-auto">
<label for="wdbe_first_name" style="font-weight: 700; font-size: 15px;" class="form-label mt-2">Quantity:</label>
<input id="edtquantity" class="form-control input-sm" style="width: 100px" type="number" min="1" required/>
<div class="invalid-feedback" style="font-size: 15px;" required>
Please Provide a Valid Quantity.
</div>
</div>
<div class="col-auto">
<label for="wdbe_first_name" style="font-weight: 700; font-size: 15px;" class="form-label mt-2">Price:</label>
<input id="edtprice" class="form-control input-sm" style="width: 100px" type="number" min="1" required/>
<div class="invalid-feedback" style="font-size: 15px;">
Please Provide a Valid Price.
</div>
</div>
<div>
<label for="wdbe_first_name" style="font-weight: 700; font-size: 15px;" class="form-label mt-2">Invoice To:</label>
<input id="edtinvoiceto" class="form-control input-sm" required/>
<div class="invalid-feedback" style="font-size: 15px;">
Please Provide an Invoice Address.
</div>
</div>
<div>
<label for="wdbe_first_name" style="font-weight: 700; font-size: 15px;" class="form-label mt-2">Ship To:</label>
<select id="wcbshipto" class='form-select' required></select>
<div class="invalid-feedback" style="font-size: 15px;">
Please Provide a Ship To Address.
</div>
<div class="mt-2">
<button id="btnaddaddress" class="btn btn-primary btn-sm">Add Address</button>
</div>
</div>
<div class="col-auto">
<label style="font-weight: 700; font-size: 15px;" class="form-label mt-2">PO Number:</label>
<input id="edtponumber" class="form-control input-sm" width='50%'/>
</div>
<div class="col-auto">
<label style="font-weight: 700; font-size: 15px;" class="form-label mt-2">QB Item:</label>
<select id="wcbqbitem" class='form-select' required></select>
<div class="invalid-feedback" style="font-size: 15px;">
Please Provide a QB Item.
</div>
</div>
<div class="col-auto">
<label for="wdbe_first_name" style="font-weight: 700; font-size: 15px;" class="form-label mt-2">Job Name:</label>
<input id="edtjobname" class="form-control input-sm" style="width: 600px"/>
<div class="invalid-feedback" style="font-size: 15px;">
Please Provide a Job Name.
</div>
</div>
<div class="row">
<div class="col-12">
<label for="edtitemdescription" class="form-label mt-2" style="font-weight: 700; font-size: 15px;">
Item Description:
</label>
<input id="edtitemdescription" class="form-control" style="width: 100%;" />
</div>
</div>
<div class="col-auto">
<label style="font-weight: 700; font-size: 15px;" class="form-label mt-2">Art Due:</label>
<input class="form-control input-sm" id="dtpartdue" type="date">
</div>
<div class="col-auto">
<label style="font-weight: 700; font-size: 15px;" class="form-label mt-2">Plate Due:</label>
<input class="form-control input-sm" id="dtpplatedue" type="date">
</div>
</div>
<h4 class="custom-h4 mt-3">Supplied by Customer</h4>
<hr class="custom-hr">
<div class="row">
<div class="col-auto">
<label style="font-weight: 700; font-size: 15px;" class="form-label mt-2">B/W or Color Copy:</label>
<input id="edtbworcolorcopy" class="form-control input-sm" width='50%'/>
</div>
<div class="col-auto">
<label style="font-weight: 700; font-size: 15px;" class="form-label mt-2">Plates:</label>
<input id="edtplates" class="form-control input-sm" width='50%'/>
</div>
<div class="col-auto">
<label style="font-weight: 700; font-size: 15px;" class="form-label mt-2">Sample:</label>
<input id="edtsample" class="form-control input-sm" width='50%'/>
</div>
<div class="col-auto">
<label style="font-weight: 700; font-size: 15px;" class="form-label mt-2">Dimensional Layout:</label>
<input id="edtdimensionallayout" class="form-control input-sm" width='50%'/>
</div>
<div class="col-auto">
<label style="font-weight: 700; font-size: 15px;" class="form-label mt-2">Other:</label>
<input id="edtother" class="form-control input-sm" width='50%'/>
</div>
<div class="col-auto">
<label style="font-weight: 700; font-size: 15px;" class="form-label mt-2">Email:</label>
<input id="edtemail" class="form-control input-sm" width='50%'/>
</div>
<div class="col-auto">
<label style="font-weight: 700; font-size: 15px;" class="form-label mt-2">FTP:</label>
<input id="edtftp" class="form-control input-sm" width='50%'/>
</div>
<div class="col-auto">
<label style="font-weight: 700; font-size: 15px;" class="form-label mt-2">Total Inches Used:</label>
<input id="edttotalinchesused" class="form-control input-sm" width='50%'/>
</div>
<div class="col-auto">
<label style="font-weight: 700; font-size: 15px;" class="form-label mt-2">Sheets Used:</label>
<input id="edtsheetsused" class="form-control input-sm" width='50%'/>
</div>
<div class="col-auto">
<label style="font-weight: 700; font-size: 15px;" class="form-label mt-2">Initials:</label>
<input id="edtinitials" class="form-control input-sm" width='50%'/>
</div>
</div>
<h4 class="custom-h4 mt-3">Proofing</h4>
<hr class="custom-hr">
<div class="row">
<div class="col-auto">
<input type="checkbox" id="cbpdf">
<label label style="font-weight: 700; font-size: 15px;" class="form-label mt-2">PDF?</label>
</div>
<div class="col-auto">
<label style="font-weight: 700; font-size: 15px;" class="form-label mt-2">PDF To:</label>
<input id="edtpdfto" class="form-control input-sm" width='50%'/>
</div>
<div class="col-auto">
<label style="font-weight: 700; font-size: 15px;" class="form-label mt-2">PDF Date 1:</label>
<input class="form-control input-sm" id="dtppdfdate1" type="date">
</div>
<div class="col-auto">
<label style="font-weight: 700; font-size: 15px;" class="form-label mt-2">PDF Date 2:</label>
<input class="form-control input-sm" id="dtppdfdate2" type="date">
</div>
<div class="col-auto">
<label style="font-weight: 700; font-size: 15px;" class="form-label mt-2">PDF Date 3:</label>
<input class="form-control input-sm" id="dtppdfdate3" type="date">
</div>
<div class="col-auto">
<input type="checkbox" id="cbfullsizeinkjet">
<label label style="font-weight: 700; font-size: 15px;" class="form-label mt-2">Full Size Ink Jet For Layout Content Only?</label>
</div>
<div class="col-auto">
<label style="font-weight: 700; font-size: 15px;" class="form-label mt-2">Ink Jet To:</label>
<input id="edtinkjetto" class="form-control input-sm" width='50%'/>
</div>
<div class="col-auto">
<label style="font-weight: 700; font-size: 15px;" class="form-label mt-2">Ink Jet To 2:</label>
<input id="edtinkjetto2" class="form-control input-sm" width='50%'/>
</div>
<div class="col-auto">
<label style="font-weight: 700; font-size: 15px;" class="form-label mt-2">Ink Jet Date 1:</label>
<input class="form-control input-sm" id="dtpinkjetdate1" type="date">
</div>
<div class="col-auto">
<label style="font-weight: 700; font-size: 15px;" class="form-label mt-2">Ink Jet Date 2:</label>
<input class="form-control input-sm" id="dtpinkjetdate2" type="date">
</div>
<div class="col-auto">
<label style="font-weight: 700; font-size: 15px;" class="form-label mt-2">Ink Jet Date 3:</label>
<input class="form-control input-sm" id="dtpinkjetdate3" type="date">
</div>
<div class="col-auto">
<label style="font-weight: 700; font-size: 15px;" class="form-label mt-2">Color Contract:</label>
<select id="wcbcolorcontract" class='form-select'></select>
</div>
<div class="col-auto">
<label style="font-weight: 700; font-size: 15px;" class="form-label mt-2">Color Contract To:</label>
<input id="edtcolorcontrastto" class="form-control input-sm" width='50%'/>
</div>
<div class="col-auto">
<label style="font-weight: 700; font-size: 15px;" class="form-label mt-2">Color Contract Date 1:</label>
<input class="form-control input-sm" id="dtpcolorcontrastdate1" type="date">
</div>
<div class="col-auto">
<label style="font-weight: 700; font-size: 15px;" class="form-label mt-2">Color Contract Date 2:</label>
<input class="form-control input-sm" id="dtpcolorcontrastdate2" type="date">
</div>
<div class="col-auto">
<label style="font-weight: 700; font-size: 15px;" class="form-label mt-2">Digital Color Key:</label>
<input id="edtdigitalcolorkey" class="form-control input-sm" width='50%'/>
</div>
<div class="col-auto">
<label style="font-weight: 700; font-size: 15px;" class="form-label mt-2">Digital Color To:</label>
<input id="edtdigitalcolorto" class="form-control input-sm" width='50%'/>
</div>
<div class="col-auto">
<label style="font-weight: 700; font-size: 15px;" class="form-label mt-2">Digital Color Date:</label>
<input class="form-control input-sm" id="dtpdigitalcolordate" type="date">
</div>
</div>
<h4 class="custom-h4 mt-3">Quantity</h4>
<hr class="custom-hr">
<div class="row">
<div class="col-auto">
<label style="font-weight: 700; font-size: 15px;" class="form-label mt-2">Press Name:</label>
<input id="edtpressname" class="form-control input-sm" width="50%" />
</div>
<div class="col-auto">
<label style="font-weight: 700; font-size: 15px;" class="form-label mt-2">Anilax Info:</label>
<input id="edtanilaxinfo" class="form-control input-sm" width="50%" />
</div>
</div>
<h4 class="custom-h4 mt-3">Colors</h4>
<hr class="custom-hr">
<div class="row align-items-center">
<!-- placeholders for the 4 dynamic input columns to center the Add Color button -->
<div class="col-sm"></div>
<div class="col-sm"></div>
<div class="col-sm"></div>
<div class="col-sm"></div>
<div class="col-auto d-flex justify-content-center">
<!-- Delphi-generated TWebButton stays here -->
<button id="btnaddcolor" class="btn btn-primary btn-sm me-3">
Add Color
</button>
</div>
</div>
<!-- Dynamically injected color rows go here -->
<div id="additionalFields" class="row mt-3"></div>
<h4 class="custom-h4 mt-3">Plate Marks</h4>
<hr class="custom-hr">
<div class="row">
<div class="col-auto">
<label label style="font-weight: 700; font-size: 15px;" class="form-label mt-2">Microdots:</label>
<input id="edtmicrodots" class="form-control input-sm" style="width: 150px"/>
</div>
<div class="col-auto">
<label style="font-weight: 700; font-size: 15px;" class="form-label mt-2">Microdots Comments:</label>
<input id="edtmicrodotscomments" class="form-control input-sm" style="width: 150px"/>
</div>
<div class="col-auto">
<label style="font-weight: 700; font-size: 15px;" class="form-label mt-2">Crosshairs:</label>
<input id="edtcrosshairs" class="form-control input-sm" style="width: 150px"/>
</div>
<div class="col-auto">
<label style="font-weight: 700; font-size: 15px;" class="form-label mt-2">Crosshairs Comments:</label>
<input id="edtcrosshairscomments" class="form-control input-sm" style="width: 150px"/>
</div>
<div class="col-auto">
<label style="font-weight: 700; font-size: 15px;" class="form-label mt-2">Color Bars:</label>
<input id="edtcolorbars" class="form-control input-sm" style="width: 150px"/>
</div>
<div class="col-auto">
<label style="font-weight: 700; font-size: 15px;" class="form-label mt-2">Color Bars Comments:</label>
<input id="edtcolorbarscomments" class="form-control input-sm" style="width: 150px"/>
</div>
<div class="col-auto">
<label style="font-weight: 700; font-size: 15px;" class="form-label mt-2">Other:</label>
<input id="edtplateother" class="form-control input-sm" style="width: 150px"/>
</div>
<div class="col-auto">
<label style="font-weight: 700; font-size: 15px;" class="form-label mt-2">Microdots Comments:</label>
<input id="edtplateothercomments" class="form-control input-sm" style="width: 150px"/>
</div>
</div>
<h4 class="custom-h4 mt-3">Layout</h4>
<hr class="custom-hr">
<div class="row">
<div class="col-auto">
<label style="font-weight: 700; font-size: 15px;" class="form-label mt-2">Around:</label>
<input id="edtaround" class="form-control input-sm" style="width: 150px"/>
</div>
<div class="col-auto">
<label style="font-weight: 700; font-size: 15px;" class="form-label mt-2">Accross:</label>
<input id="edtaccross" class="form-control input-sm" style="width: 150px"/>
</div>
<div class="col-auto">
<label style="font-weight: 700; font-size: 15px;" class="form-label mt-2">Surface Print:</label>
<input id="edtsurfaceprint" class="form-control input-sm" style="width: 150px"/>
</div>
<div class="col-auto">
<label style="font-weight: 700; font-size: 15px;" class="form-label mt-2">Reverse Print:</label>
<input id="edtreverseprint" class="form-control input-sm" style="width: 150px"/>
</div>
<div class="col-auto">
<label style="font-weight: 700; font-size: 15px;" class="form-label mt-2">Cylinder Repeat:</label>
<input id="edtcylinderrepeat" class="form-control input-sm" style="width: 150px"/>
</div>
<div class="col-auto">
<label style="font-weight: 700; font-size: 15px;" class="form-label mt-2">Cutoff Dimension:</label>
<input id="edtcutoffdimension" class="form-control input-sm" style="width: 150px"/>
</div>
<div class="col-auto">
<label label style="font-weight: 700; font-size: 15px;" class="form-label mt-2">Pitch:</label>
<input id="edtpitch" class="form-control input-sm" style="width: 150px"/>
</div>
<div class="col-auto">
<label label style="font-weight: 700; font-size: 15px;" class="form-label mt-2">Teeth:</label>
<input id="edtteeth" class="form-control input-sm" style="width: 150px"/>
</div>
<div class="col-auto">
<label label style="font-weight: 700; font-size: 15px;" class="form-label mt-2">Bleed:</label>
<input id="edtbleed" class="form-control input-sm" style="width: 150px"/>
</div>
<div class="col-auto">
<label label style="font-weight: 700; font-size: 15px;" class="form-label mt-2">Cutback:</label>
<input id="edtcutback" class="form-control input-sm" style="width: 150px"/>
</div>
<div class="col-auto">
<label style="font-weight: 700; font-size: 15px;" class="form-label mt-2">Minimum Trap Dimension:</label>
<input id="edtminimumtrapdimension" class="form-control input-sm" style="width: 150px"/>
</div>
<div class="col-auto">
<label style="font-weight: 700; font-size: 15px;" class="form-label mt-2">Maximum Trap Dimension:</label>
<input id="edtmaximumtrapdimension" class="form-control input-sm" style="width: 150px"/>
</div>
</div>
<h4 class="custom-h4 mt-3">Print Orientation</h4>
<hr class="custom-hr">
<div class="row">
<div class="col-auto">
<label style="font-weight: 700; font-size: 15px;" class="form-label mt-2">Print Orientation:</label>
<select id="wcbprint" class='form-select'></select>
</div>
</div>
<h4 class="custom-h4 mt-3">UPC</h4>
<hr class="custom-hr">
<div class="row">
<div class="col-auto">
<label style="font-weight: 700; font-size: 15px;" class="form-label mt-2">Size:</label>
<input id="edtsize" class="form-control input-sm" style="width: 150px"/>
</div>
<div class="col-auto">
<label style="font-weight: 700; font-size: 15px;" class="form-label mt-2">Bar Width Reduction:</label>
<input id="edtbarwidthreduction" class="form-control input-sm" style="width: 150px"/>
</div>
<div class="col-auto">
<label style="font-weight: 700; font-size: 15px;" class="form-label mt-2">Distortion Percent:</label>
<input id="edtdistortionpercent" class="form-control input-sm" style="width: 150px"/>
</div>
<div class="col-auto">
<label style="font-weight: 700; font-size: 15px;" class="form-label mt-2">Distortion Amount:</label>
<input id="edtdistortionamount" class="form-control input-sm" style="width: 150px"/>
</div>
<h4 class="custom-h4 mt-3">Plates</h4>
<hr class="custom-hr">
<div class="row">
<div class="col-auto">
<label style="font-weight: 700; font-size: 15px;" class="form-label mt-2">Thickness:</label>
<select id="wcbthickness" class='form-select'></select>
</div>
<div class="col-auto">
<label style="font-weight: 700; font-size: 15px;" class="form-label mt-2">Plate Material:</label>
<select id="wcbmaterial" class='form-select'></select>
</div>
<div class="col-auto">
<label style="font-weight: 700; font-size: 15px;" class="form-label mt-2">Job Number:</label>
<input id="edtjobnumber" class="form-control input-sm" style="width: 150px"/>
</div>
</div>
<h4 class="custom-h4 mt-3">General</h4>
<hr class="custom-hr">
<div class="row">
<div class="col-auto">
<label for="wdbe_first_name" style="font-weight: 700; font-size: 15px;" class="form-label">Special Instructions (Max Length 2048 characters)</label>
<textarea id="edtcomments" class="form-control mb-3" style=" width: 1100px; height: 150px;" maxlength="2048"></textarea>
</div>
</div>
</div>
<div class="container h-100 d-flex flex-column mt-0 py-0" style="max-width: 100%;">
<!-- Actions Row -->
<div class="row mt-2 justify-content-center">
<div class="col-auto d-flex align-items-center">
<label class="mt-3" style="font-weight: 700;">
Show <select class="custom-select" id="wcbpagesize" style="font-size: 1.00rem;"></select> entries
</label>
</div>
<div class="col-auto d-flex align-items-center">
<label class="mt-3" style="font-weight: 700;">
Order By: <select class="custom-select" id="wlcborderby" style="font-size: 1.00rem;"></select>
</label>
</div>
<div class="col-auto">
<button id="btnorderby" class="btn btn-secondary mt-3">Descending <i class="fa fa-arrow-down"></i></button>
</div>
<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" type="button">Generate PDF</button>
<div class="invalid-feedback">
No order selected. Please select an order to generate a PDF.
</div>
</div>
<div class="col-auto">
<button id="btnfilters" class="btn btn-secondary mt-3">Filters</button>
</div>
</div>
<!-- Entries Label Section d-flex justify-content-between w-100 mt-2-->
<div class="row">
<div class="col-auto">
<label id="lblentries"></label>
</div>
</div>
<div class="row">
<div class="col-12">
<input id="edtsearch" type="text" class="form-control" style="width: 100%;"/>
</div>
</div>
<!-- Table Section -->
<div id="order_table_section" class="overflow-auto mt-2"
style="max-height: calc(100vh - 250px); padding-bottom: 0; width: 100%;">
<table id="tblPhoneGrid" class="table table-striped table-bordered border-light" style="width: 100%;">
<thead class="sticky-top thead-light">
<tr style="font-size: 0.875rem;">
<!-- Table headers are dynamically generated -->
</tr>
</thead>
<tbody id="orderTableBody" class="align-middle">
<!-- Table rows are dynamically generated -->
</tbody>
</table>
</div>
<!-- Pagination Section -->
<div class="d-flex justify-content-center w-100 mt-2">
<nav aria-label="Page navigation">
<ul id="pagination" class="pagination">
<!-- Pagination items added dynamically -->
</ul>
</nav>
</div>
</div>
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<title>TMS Web Project</title>
<style>
</style>
</head>
<body>
</body>
</html>
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<title>TMS Web Project</title>
<style>
</style>
</head>
<body>
</body>
</html>
\ No newline at end of file
<div class="container">
<!-- Edit-User form -->
<div class="row">
<div class="col-lg-10 col-xl-8 mx-auto">
<form id="edituserform" class="row g-3" novalidate>
<div class="col-md-6">
<label id="lblusername" for="edtusername" class="form-label">Username</label>
<input id="edtusername" class="form-control" required>
<div class="invalid-feedback">Username is required.</div>
</div>
<div class="col-md-6">
<label id="lblpassword" for="edtpassword" class="form-label">Password</label>
<input id="edtpassword" type="password" class="form-control" required>
<div class="invalid-feedback">Passwords is required.</div>
</div>
<div class="col-md-6">
<label id="lblfullname" for="edtfullname" class="form-label">Full&nbsp;Name</label>
<input id="edtfullname" class="form-control" required>
<div class="invalid-feedback">Full Name is required.</div>
</div>
<div class="col-md-6">
<label id="lblactive" for="cbstatus" class="form-label">Active</label>
<div class="form-check mt-1">
<input id="cbstatus" class="form-check-input" type="checkbox" style="width: 1.5em; height: 1.5em;">
</div>
</div>
<div class="col-md-6">
<label id="lblemail" for="edtemail" class="form-label">Email&nbsp;Address</label>
<input id="edtemail" type="email" class="form-control">
</div>
<div class="col-md-6">
<label id="lblQB" for="edtQB" class="form-label">QuickBooks&nbsp;ID</label>
<input id="edtQB" class="form-control">
</div>
<div class="col-md-6">
<label id="lblrights" for="edtrights" class="form-label">System&nbsp;Rights</label>
<input id="edtrights" class="form-control">
</div>
<div class="col-md-6">
<label id="lblaccess" for="cbaccess" class="form-label">Access&nbsp;Type</label>
<select id="cbaccess" class="form-select">
</select>
</div>
<div class="gap-2 mt-4">
<button id="btnconfirm" type="button" class="btn btn-primary">
Confirm
</button>
<button id="btncancel" type="button" class="btn btn-danger">
Cancel
</button>
</div>
</form>
</div>
</div>
</div>
<!-- Confirmation 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">Confirm</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
Are you sure you want to make these changes?
</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_changes">Confirm</button>
</div>
</div>
</div>
</div>
<div class="container">
<!-- Profile form -->
<div class="row">
<div class="col-lg-8 col-xl-6 mx-auto">
<form id="userprofileform" class="needs-validation" role="form" autocomplete="off" novalidate>
<div class="mb-3">
<label id="view.userprofile.form.lblUserID"
for="view.userprofile.form.edtUserID"
class="form-label">User&nbsp;ID</label>
<input id="view.userprofile.form.edtUserID"
class="form-control"
readonly>
</div>
<div class="mb-3">
<label id="view.userprofile.form.lblUserName"
for="view.userprofile.form.edtUsername"
class="form-label">Username</label>
<input id="view.userprofile.form.edtUsername"
class="form-control">
</div>
<div class="mb-3">
<label id="view.userprofile.form.lblFullName"
for="view.userprofile.form.edtFullName"
class="form-label">Full&nbsp;Name</label>
<input id="view.userprofile.form.edtFullName"
class="form-control">
</div>
<div class="mb-3">
<label id="view.userprofile.form.lblEmail"
for="view.userprofile.form.edtEmail"
class="form-label">Email&nbsp;Address</label>
<input id="view.userprofile.form.edtEmail"
type="email"
class="form-control">
</div>
<div class="mb-3">
<label id="view.userprofile.form.lblAccessType"
for="view.userprofile.form.edtAccessType"
class="form-label">Email&nbsp;Address</label>
<input id="view.userprofile.form.edtAccessType"
type="email"
class="form-control">
</div>
<div class="mb-3">
<label id="view.userprofile.form.lblQBID"
for="view.userprofile.form.edtQBID"
class="form-label">Email&nbsp;Address</label>
<input id="view.userprofile.form.edtQBID"
type="email"
class="form-control">
</div>
</form>
</div>
</div>
</div>
<div class="row">
<div class="col-12">
<div class="container mt-4 px-0">
<div class="row justify-content-center">
<div class="col-12 col-md-8">
<div class="row">
<div class=col-sm>
</div>
</div>
</div>
<div class="row justify-content-center py-2">
<div class="col-sm">
<button id="btnadduser" class="btn btn-primary">Add User></button>
</div>
</div class="table-user-responsive">
<table class="table table-striped table-bordered" id="tblPhoneGrid">
<thead class="thead-dark">
<tr>
<th scope="col">UserID</th>
<th scope="col">Username</th>
<th scope="col">Password</th>
<th scope="col">Full Name</th>
<th scope="col">Status</th>
<th scope="col">Email Address</th>
<th scope="col">Access Type</th>
<th scope="col">System Rights</th>
<th scope="col">QB ID</th>
<th scope="col">Edit</th>
</tr>
</thead>
<tbody>
<!-- Rows will be added dynamically via Delphi code -->
</tbody>
</table>
<label id="lblentries"></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>
{
"AuthUrl" : "http://localhost:2004/kgOrders/auth/",
"ApiUrl" : "http://localhost:2004/kgOrders/api/"
}
.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;
}
.tbl-min-120 {
min-width: 120px;
}
input[type="text"] {
min-width: 50px;
max-width: 100%;
width: auto;
padding-left: 5px;
}
/* Chrome, Safari, Edge, Opera */
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
-webkit-appearance: none;
margin: 0;
}
/* Firefox */
input[type=number] {
-moz-appearance: textfield;
}
is-invalid .form-check-input {
border: 1px solid #dc3545 !important;
}
.is-invalid .form-check-label {
color: #dc3545 !important;
}
input[type="checkbox"]:focus,
input[type="checkbox"]:focus-visible {
outline: auto !important
}
.input-search input {
width: 100px; /* Adjust the width of the input */
height: 35px; /* Set the height to match label height */
padding: 5px; /* Padding for input text */
font-size: 14px; /* Font size for input text */
border: 1px solid #ced4da; /* Border style */
border-radius: 5px; /* Rounded corners for the input */
box-sizing: border-box; /* Ensures padding and border are included in the element's total width and height */
}
.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 */
z-index: 9999;
}
/* 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;
margin-top: 5px;
}
.form-input{
display: table;
}
.form-cells{
display: table-cell
}
.table tbody tr {
transition: background-color 0.3s ease;
}
.table thead th{
border: 2px;
background-color: #e6e6e6;
}
.table thead {
border-color: #e6e6e6;
}
.min-w-80 {
min-width: 80px;
}
.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;
}
.card {
border: none !important;
box-shadow: none !important; /* If shadow is causing the issue */
}
.color-column {
width: 200px; /* Fixed width for the column */
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis; /* Adds ellipsis */
}
.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 */
}
#tblPhoneGrid {
--bs-table-bg: #fff;
--bs-table-border-color: #dee2e6; /* or whatever border tone you like */
}
/* and make sure the table collapses borders so there are no gaps */
#tblPhoneGrid {
border-collapse: collapse !important;
}
@keyframes slideInLeft {
from {
transform: translateX(-120%);
opacity: 0;
}
to {
transform: translateX(0);
opacity: 1;
}
}
.toast.slide-in {
animation: slideInLeft 0.4s ease-out forwards;
}
#spinner {
position: fixed !important;
z-index: 9999 !important;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.lds-roller {
display: inline-block;
position: relative;
width: 80px;
height: 80px;
}
.lds-roller div {
animation: lds-roller 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
transform-origin: 40px 40px;
}
.lds-roller div:after {
content: " ";
display: block;
position: absolute;
width: 10px;
height: 10px;
border-radius: 50%;
background: #204d74;
margin: -5px 0 0 -5px;
}
.lds-roller div:nth-child(1) {
animation-delay: -0.036s;
}
.lds-roller div:nth-child(1):after {
top: 63px;
left: 63px;
}
.lds-roller div:nth-child(2) {
animation-delay: -0.072s;
}
.lds-roller div:nth-child(2):after {
top: 68px;
left: 56px;
}
.lds-roller div:nth-child(3) {
animation-delay: -0.108s;
}
.lds-roller div:nth-child(3):after {
top: 71px;
left: 48px;
}
.lds-roller div:nth-child(4) {
animation-delay: -0.144s;
}
.lds-roller div:nth-child(4):after {
top: 72px;
left: 40px;
}
.lds-roller div:nth-child(5) {
animation-delay: -0.18s;
}
.lds-roller div:nth-child(5):after {
top: 71px;
left: 32px;
}
.lds-roller div:nth-child(6) {
animation-delay: -0.216s;
}
.lds-roller div:nth-child(6):after {
top: 68px;
left: 24px;
}
.lds-roller div:nth-child(7) {
animation-delay: -0.252s;
}
.lds-roller div:nth-child(7):after {
top: 63px;
left: 17px;
}
.lds-roller div:nth-child(8) {
animation-delay: -0.288s;
}
.lds-roller div:nth-child(8):after {
top: 56px;
left: 12px;
}
@keyframes lds-roller {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<meta content="width=device-width, initial-scale=1" name="viewport"/>
<noscript>Your browser does not support JavaScript!</noscript>
<link href="data:;base64,=" rel="icon"/>
<title>EM Systems webKGOrders App</title>
<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"/>
<link href="css/app.css" rel="stylesheet" type="text/css"/>
<link href="css/spinner.css" rel="stylesheet" type="text/css"/>
<script crossorigin="anonymous" integrity="sha256-eKhayi8LEQwp4NKxN+CfCh+3qOVUtJn3QNZ0TciWLP4=" src="https://code.jquery.com/jquery-3.7.1.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.bundle.min.js" type="text/javascript"></script>
<link crossorigin="anonymous" href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet"/>
<script src="webKGOrders.js" type="text/javascript"></script>
</head>
<body>
</body>
<script type="text/javascript">rtl.run();</script>
</html>
This source diff could not be displayed because it is too large. You can view the blob instead.
This source diff could not be displayed because it is too large. You can view the blob instead.
<Project xmlns="http://schemas.microsoft.com/developer/msbuild/2003">
<PropertyGroup>
<ProjectGuid>{2A3028D9-BC39-4625-9BA5-0338012E2824}</ProjectGuid>
<ProjectVersion>20.3</ProjectVersion>
<ProjectVersion>20.4</ProjectVersion>
<FrameworkType>VCL</FrameworkType>
<Base>True</Base>
<Config Condition="'$(Config)'==''">Debug</Config>
......@@ -114,11 +114,10 @@
<VerInfo_Locale>1033</VerInfo_Locale>
<DCC_ExeOutput>.\bin</DCC_ExeOutput>
<DCC_UnitSearchPath>C:\RADTOOLS\FastMM4;$(DCC_UnitSearchPath)</DCC_UnitSearchPath>
<VerInfo_Keys>CompanyName=EM Systems;FileDescription=$(MSBuildProjectName);FileVersion=0.9.13.9;InternalName=;LegalCopyright=;LegalTrademarks=;OriginalFilename=;ProgramID=com.embarcadero.$(MSBuildProjectName);ProductName=$(MSBuildProjectName);ProductVersion=0.9.11;Comments=</VerInfo_Keys>
<VerInfo_Keys>CompanyName=EM Systems;FileDescription=$(MSBuildProjectName);FileVersion=0.9.14.0;InternalName=;LegalCopyright=;LegalTrademarks=;OriginalFilename=;ProgramID=com.embarcadero.$(MSBuildProjectName);ProductName=$(MSBuildProjectName);ProductVersion=0.9.11;Comments=</VerInfo_Keys>
<VerInfo_MajorVer>0</VerInfo_MajorVer>
<VerInfo_MinorVer>9</VerInfo_MinorVer>
<VerInfo_Release>13</VerInfo_Release>
<VerInfo_Build>9</VerInfo_Build>
<VerInfo_Release>14</VerInfo_Release>
</PropertyGroup>
<PropertyGroup Condition="'$(Cfg_1_Win64)'!=''">
<AppDPIAwarenessMode>PerMonitorV2</AppDPIAwarenessMode>
......@@ -229,7 +228,12 @@
<Source>
<Source Name="MainSource">kgOrdersServer.dpr</Source>
</Source>
<Excluded_Packages/>
<Excluded_Packages>
<Excluded_Packages Name="$(BDSBIN)\bcboffice2k370.bpl">Embarcadero C++Builder Office 2000 Servers Package</Excluded_Packages>
<Excluded_Packages Name="$(BDSBIN)\bcbofficexp370.bpl">Embarcadero C++Builder Office XP Servers Package</Excluded_Packages>
<Excluded_Packages Name="$(BDSBIN)\dcloffice2k370.bpl">Microsoft Office 2000 Sample Automation Server Wrapper Components</Excluded_Packages>
<Excluded_Packages Name="$(BDSBIN)\dclofficexp370.bpl">Microsoft Office XP Sample Automation Server Wrapper Components</Excluded_Packages>
</Excluded_Packages>
</Delphi.Personality>
<Deployment Version="5">
<DeployFile LocalName="bin\kgOrdersServer.exe" Configuration="Debug" Class="ProjectOutput">
......@@ -896,6 +900,9 @@
<Platform Name="Win64x">
<Operation>1</Operation>
</Platform>
<Platform Name="WinARM64EC">
<Operation>1</Operation>
</Platform>
</DeployClass>
<DeployClass Name="ProjectiOSDeviceDebug">
<Platform Name="iOSDevice32">
......@@ -966,6 +973,10 @@
<RemoteDir>Assets</RemoteDir>
<Operation>1</Operation>
</Platform>
<Platform Name="WinARM64EC">
<RemoteDir>Assets</RemoteDir>
<Operation>1</Operation>
</Platform>
</DeployClass>
<DeployClass Name="UWP_DelphiLogo44">
<Platform Name="Win32">
......@@ -976,6 +987,10 @@
<RemoteDir>Assets</RemoteDir>
<Operation>1</Operation>
</Platform>
<Platform Name="WinARM64EC">
<RemoteDir>Assets</RemoteDir>
<Operation>1</Operation>
</Platform>
</DeployClass>
<DeployClass Name="iOS_AppStore1024">
<Platform Name="iOSDevice64">
......@@ -1189,6 +1204,7 @@
<ProjectRoot Platform="Win32" Name="$(PROJECTNAME)"/>
<ProjectRoot Platform="Win64" Name="$(PROJECTNAME)"/>
<ProjectRoot Platform="Win64x" Name="$(PROJECTNAME)"/>
<ProjectRoot Platform="WinARM64EC" Name="$(PROJECTNAME)"/>
</Deployment>
<Platforms>
<Platform value="Win32">True</Platform>
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment