INIT frontend

2025-11-28 11:55:01 -06:00
parent f99d21805f
commit 5029278228
31 changed files with 3766 additions and 0 deletions
@@ -0,0 +1,102 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Job List</title>
+
+  <!-- AG-Grid CSS (CDN) -->
+  <link rel="stylesheet"
+        href="https://cdn.jsdelivr.net/npm/ag-grid-community@32.0.0/styles/ag-grid.css">
+  <link rel="stylesheet"
+        href="https://cdn.jsdelivr.net/npm/ag-grid-community@32.0.0/styles/ag-theme-alpine.css">
+
+  <style>
+    body {font-family:Arial,sans-serif;margin:20px;background:#f8f9fa;}
+    .searchContainer{max-width:1600px;}
+    .searchBox{background-color:#ccc;width:15%;padding:10px;border-radius:8px;border:1px solid#d1d5db;box-sizing:border-box;font-size: 18px;}
+    .searchBoxInput {width:100%;outline:none;background:transparent;font-size:inherit;border:none;}
+    .searchBoxInput::placeholder {color:#9ca3af;}
+    .container {max-width:1600px;margin:auto;background:#fff;padding:20px;
+                border-radius:8px;box-shadow:0 2px 10px rgba(0,0,0,.1);}
+    #myGrid {height:750px;width:100%;}
+
+  </style>
+</head>
+<body>
+<div class="searchContainer">
+  <div class="searchBox"style="text-align: right;">
+      <input id="searchBoxInput" placeholder="Search jobs (just start typing)">
+  </div>
+<div class="container">
+
+  <div id="myGrid" class="ag-theme-alpine"></div>
+  </div>
+</div>
+<!-- AG-Grid JS (CDN) -->
+<script src="https://cdn.jsdelivr.net/npm/ag-grid-community@32.0.0/dist/ag-grid-community.min.js"></script>
+
+<script>
+  /* ---------- 100 rows of sample data ---------- */
+  const rowData = Array.from({length:100},(_,i)=>({
+    job_number: 1000+i,
+    job_name: `Project ${String.fromCharCode(65+(i%26))}${i+1}`,
+    city: `City ${i+1}`,
+    country: 'USA',
+    email: `job${i+1}@corp.com`,
+    phone: `555-${String(100+i).padStart(3,'0')}`,
+    dept: ['Eng','Mkt','Sales','HR','Fin','IT'][i%6],
+    salary: `$${(90+i%20)*1000}`,
+    join: `2024-${String((i%12)+1).padStart(2,'0')}-01`,
+    status: i%8===0?'Review':'Active',
+    projA: `${65+i%35}%`, projB: `${70+i%30}%`, projC: `${73+i%27}%`,
+    rating: (4.0+(i%10)/10).toFixed(1),
+    notes: 'On track',
+    manager: `M${i%5+1}`,
+    team: `T${String.fromCharCode(65+i%8)}`,
+    region: ['N','S','E','W'][i%4],
+    bonus: `$${i*400}`,
+    review: 'Good'
+  }));
+
+  /* ---------- Column definitions ---------- */
+  const columnDefs = [
+    {field:'job_number',headerName:'Job_Number',pinned:'left',width:120,hide:false},
+    {field:'job_name',  headerName:'Job_Name',   pinned:'left',width:160},
+    {field:'city',      headerName:'City'},
+    {field:'country',   headerName:'Country'},
+    {field:'email',     headerName:'Email'},
+    {field:'phone',     headerName:'Phone'},
+    {field:'dept',      headerName:'Dept'},
+    {field:'salary',    headerName:'Salary'},
+    {field:'join',      headerName:'Join'},
+    {field:'status',    headerName:'Status'},
+    {field:'projA',     headerName:'Proj A'},
+    {field:'projB',     headerName:'Proj B'},
+    {field:'projC',     headerName:'Proj C'},
+    {field:'rating',    headerName:'Rating'},
+    {field:'notes',     headerName:'Notes'},
+    {field:'manager',   headerName:'Manager'},
+    {field:'team',      headerName:'Team'},
+    {field:'region',    headerName:'Region'},
+    {field:'bonus',     headerName:'Bonus'},
+    {field:'review',    headerName:'Review'}
+  ];
+
+  /* ---------- Grid options ---------- */
+  const gridOptions = {
+    columnDefs,
+    rowData,
+    defaultColDef:{resizable:true,sortable:true,filter:true},
+    onGridReady: params => {
+      window.gridApi      = params.api;
+      window.columnApi    = params.columnApi;
+    }
+  };
+
+  /* ---------- Create the grid ---------- */
+  new agGrid.Grid(document.querySelector('#myGrid'), gridOptions);
+</script>
+
+</body>
+</html>