Compare commits
6 Commits
backup/ref
...
v1.10.5
| Author | SHA1 | Date | |
|---|---|---|---|
| 019b941bdb | |||
| 2d162ff3c0 | |||
| 6760ab0abf | |||
| d9e592cc97 | |||
| 062df8cfd9 | |||
| 074d4f1f8d |
10
.gitignore
vendored
10
.gitignore
vendored
@@ -94,4 +94,12 @@ aInventory-PROD*.zip
|
|||||||
*.crt
|
*.crt
|
||||||
*.cert
|
*.cert
|
||||||
|
|
||||||
__push_ALL_to_remote.sh
|
|
||||||
|
# ── Local AI Tooling & Persistent Paths ──────────────────────
|
||||||
|
.tool_paths
|
||||||
|
.git_path
|
||||||
|
|
||||||
|
# ── Temporary Docker / Verification Artifacts ────────────────
|
||||||
|
.docker_tmp/
|
||||||
|
.tmp_docker/
|
||||||
|
scratch/.npm/
|
||||||
|
|||||||
@@ -112,5 +112,9 @@ To ensure deployment stability on macOS environments with potentially broken dev
|
|||||||
109: - **Unified AI Core:** The backend uses an abstraction layer to handle multiple AI providers (Gemini and Claude).
|
109: - **Unified AI Core:** The backend uses an abstraction layer to handle multiple AI providers (Gemini and Claude).
|
||||||
110: - **Dynamic Configuration:** System settings (AI Provider, API Keys, Backup Policies) are managed via `backend/config_manager.py`, allowing real-time updates without restarting the container.
|
110: - **Dynamic Configuration:** System settings (AI Provider, API Keys, Backup Policies) are managed via `backend/config_manager.py`, allowing real-time updates without restarting the container.
|
||||||
111: - **Admin Standardization:** The Admin Dashboard features a standardized configuration UI with secure field masking for sensitive credentials.
|
111: - **Admin Standardization:** The Admin Dashboard features a standardized configuration UI with secure field masking for sensitive credentials.
|
||||||
- **Architectural Modularization (v1.10.0):** The monolithic Admin and Inventory pages have been refactored into a modular architecture. Frontend logic is decoupled into custom React hooks (`useAdmin`), and UI is extracted into standalone components (`IdentityManager`, `DatabaseManager`, etc.). Backend admin endpoints are split into domain-specific routers (`backups`, `config`) for improved maintainability.
|
- **Architectural Modularization (v1.10.0):**
|
||||||
|
- **Frontend:** The monolithic Admin Dashboard has been decomposed into domain-specific components: `IdentityManager`, `DatabaseManager`, `LdapManager`, `AiManager`, and `CategoryManager`.
|
||||||
|
- **Logic:** Business logic is centralized in the `useAdmin` custom React hook, ensuring clean separation of concerns.
|
||||||
|
- **Backend:** Administrative endpoints are split into the `backend/routers/admin/` package, with specialized routers for `backups` and `config`.
|
||||||
|
- **Stability:** Docker builds are secured against lockfile mismatches by enforcing strict dependency synchronization.
|
||||||
- **Verification Infrastructure:** A dual-layer testing suite is implemented: Pytest for backend integration (using in-memory SQLite and mocked auth) and Vitest for frontend logic validation.
|
- **Verification Infrastructure:** A dual-layer testing suite is implemented: Pytest for backend integration (using in-memory SQLite and mocked auth) and Vitest for frontend logic validation.
|
||||||
|
|||||||
@@ -49,11 +49,12 @@ To generate a clean production package and snapshot the current state:
|
|||||||
- Accessible markup with `role="status"` and `aria-hidden` attributes
|
- Accessible markup with `role="status"` and `aria-hidden` attributes
|
||||||
- **Pages Updated:** Inventory (Categories, Item Types, Total Boxes), Logs (Total Events, Check in/out), Admin (Local Archives)
|
- **Pages Updated:** Inventory (Categories, Item Types, Total Boxes), Logs (Total Events, Check in/out), Admin (Local Archives)
|
||||||
- **Tested on:** iPhone SE (375px), iPhone 12 (390px), iPhone 14 Pro Max (430px), tablets (768px), desktop (1024px)
|
- **Tested on:** iPhone SE (375px), iPhone 12 (390px), iPhone 14 Pro Max (430px), tablets (768px), desktop (1024px)
|
||||||
- **Multi-AI Selection & Secure Config (v1.9.23):**
|
|
||||||
- Support for both **Google Gemini** and **Anthropic Claude** for AI label extraction.
|
|
||||||
- Dynamically configurable AI providers via the Admin Dashboard.
|
|
||||||
- Centralized `ConfigManager` for secure API key and environment management.
|
|
||||||
- **Admin UI Standardization:** Refactored Admin page with unified StatCards and secure input masking for system credentials.
|
- **Admin UI Standardization:** Refactored Admin page with unified StatCards and secure input masking for system credentials.
|
||||||
|
- **Modular Admin Architecture (v1.10.0):**
|
||||||
|
- Decomposed monolithic pages into domain-specific components: `IdentityManager`, `DatabaseManager`, `LdapManager`, `AiManager`, and `CategoryManager`.
|
||||||
|
- Centralized state logic into a custom `useAdmin` hook for improved maintainability.
|
||||||
|
- Split backend admin endpoints into specific routers (`backups`, `config`) for better scalability.
|
||||||
|
- Optimized Docker configuration with persistent binary paths and fixed log-piping via `su-exec`.
|
||||||
|
|
||||||
## 🏗 Technical Overview
|
## 🏗 Technical Overview
|
||||||
* **Backend:** FastAPI (Python 3.12+)
|
* **Backend:** FastAPI (Python 3.12+)
|
||||||
|
|||||||
4
__push_ALL_to_remote.sh
Executable file
4
__push_ALL_to_remote.sh
Executable file
@@ -0,0 +1,4 @@
|
|||||||
|
#!/usr/bin/env bash
|
||||||
|
|
||||||
|
git push origin --all
|
||||||
|
git push origin --tags
|
||||||
@@ -35,7 +35,5 @@ RUN chmod +x /app/scripts/init_data.sh /app/backend/entrypoint.sh
|
|||||||
|
|
||||||
EXPOSE 8000
|
EXPOSE 8000
|
||||||
|
|
||||||
EXPOSE 8000
|
|
||||||
|
|
||||||
# Entrypoint runs init_data.sh first, then starts uvicorn
|
# Entrypoint runs init_data.sh first, then starts uvicorn
|
||||||
ENTRYPOINT ["/app/backend/entrypoint.sh"]
|
ENTRYPOINT ["/app/backend/entrypoint.sh"]
|
||||||
|
|||||||
@@ -28,7 +28,7 @@ def load_config():
|
|||||||
load_dotenv(backend_env_path)
|
load_dotenv(backend_env_path)
|
||||||
log.info(f"ℹ️ Loaded local configuration from {backend_env_path}")
|
log.info(f"ℹ️ Loaded local configuration from {backend_env_path}")
|
||||||
else:
|
else:
|
||||||
log.warning("⚠️ No .env config files found. Relying on system environment variables.")
|
log.info("ℹ️ [CONFIG] Using system environment variables (Docker/Server environment).")
|
||||||
|
|
||||||
# Auto-run if imported
|
# Auto-run if imported
|
||||||
load_config()
|
load_config()
|
||||||
|
|||||||
@@ -26,6 +26,12 @@ bash /app/scripts/init_data.sh
|
|||||||
# Fix permissions for mounted volumes (which might be root-owned by the host)
|
# Fix permissions for mounted volumes (which might be root-owned by the host)
|
||||||
echo "🐳 [Docker] Fixing volume permissions..."
|
echo "🐳 [Docker] Fixing volume permissions..."
|
||||||
chown -R appuser:appuser "${DATA_DIR}" "${LOGS_DIR}"
|
chown -R appuser:appuser "${DATA_DIR}" "${LOGS_DIR}"
|
||||||
|
chmod -R 770 "${DATA_DIR}" "${LOGS_DIR}"
|
||||||
|
|
||||||
|
# Verify logic: Ensure appuser can actually write before we hand off
|
||||||
|
echo "🐳 [Docker] Verifying directory writability..."
|
||||||
|
gosu appuser touch "${LOGS_DIR}/.startup_test" && rm "${LOGS_DIR}/.startup_test"
|
||||||
|
gosu appuser touch "${DATA_DIR}/.startup_test" && rm "${DATA_DIR}/.startup_test"
|
||||||
|
|
||||||
# Hand off to the application server as non-root user
|
# Hand off to the application server as non-root user
|
||||||
echo "🐳 [Docker] Starting uvicorn as appuser..."
|
echo "🐳 [Docker] Starting uvicorn as appuser..."
|
||||||
|
|||||||
@@ -27,26 +27,25 @@ def setup_logger():
|
|||||||
datefmt="%Y-%m-%d %H:%M:%S"
|
datefmt="%Y-%m-%d %H:%M:%S"
|
||||||
)
|
)
|
||||||
|
|
||||||
# Console Handler
|
# File Handler (10MB max, keep 5 backups)
|
||||||
|
try:
|
||||||
|
file_handler = RotatingFileHandler(
|
||||||
|
LOG_FILE_PATH, maxBytes=10*1024*1024, backupCount=5
|
||||||
|
)
|
||||||
|
file_handler.setFormatter(formatter)
|
||||||
|
logger.addHandler(file_handler)
|
||||||
|
|
||||||
|
# Special redirect for uvicorn logs to also go to file
|
||||||
|
logging.getLogger("uvicorn").addHandler(file_handler)
|
||||||
|
logging.getLogger("uvicorn.access").addHandler(file_handler)
|
||||||
|
except (PermissionError, IOError) as e:
|
||||||
|
logger.warning(f"⚠️ [LOGGING] Cannot write to log file at {LOG_FILE_PATH}: {e}")
|
||||||
|
logger.warning("⚠️ [LOGGING] Continuing with console-only output.")
|
||||||
|
|
||||||
|
# Console Handler (always registered)
|
||||||
console_handler = logging.StreamHandler()
|
console_handler = logging.StreamHandler()
|
||||||
console_handler.setFormatter(formatter)
|
console_handler.setFormatter(formatter)
|
||||||
|
|
||||||
# File Handler (10MB max, keep 5 backups)
|
|
||||||
file_handler = RotatingFileHandler(
|
|
||||||
LOG_FILE_PATH, maxBytes=10*1024*1024, backupCount=5
|
|
||||||
)
|
|
||||||
file_handler.setFormatter(formatter)
|
|
||||||
|
|
||||||
# Attach handlers
|
|
||||||
logger.addHandler(console_handler)
|
logger.addHandler(console_handler)
|
||||||
logger.addHandler(file_handler)
|
|
||||||
|
|
||||||
# Special redirect for uvicorn logs to also go to file
|
|
||||||
uvicorn_logger = logging.getLogger("uvicorn")
|
|
||||||
uvicorn_logger.addHandler(file_handler)
|
|
||||||
|
|
||||||
uvicorn_access_logger = logging.getLogger("uvicorn.access")
|
|
||||||
uvicorn_access_logger.addHandler(file_handler)
|
|
||||||
|
|
||||||
return logger
|
return logger
|
||||||
|
|
||||||
|
|||||||
@@ -1,6 +1,6 @@
|
|||||||
{
|
{
|
||||||
"version": "1.10.0",
|
"version": "1.10.5",
|
||||||
"last_build": "2026-04-15-1645",
|
"last_build": "2026-04-15-1921",
|
||||||
"codename": "ModularAdmin",
|
"codename": "AccessibleUI",
|
||||||
"commit": "unknown"
|
"commit": "2d162ff3"
|
||||||
}
|
}
|
||||||
@@ -252,10 +252,10 @@ export default function InventoryPage() {
|
|||||||
<div className="p-3 md:p-4 bg-primary/10 rounded-3xl text-primary border border-primary/20 shadow-xl shadow-primary/5">
|
<div className="p-3 md:p-4 bg-primary/10 rounded-3xl text-primary border border-primary/20 shadow-xl shadow-primary/5">
|
||||||
<Package size={28} className="md:w-8 md:h-8" />
|
<Package size={28} className="md:w-8 md:h-8" />
|
||||||
</div>
|
</div>
|
||||||
<div>
|
<div>
|
||||||
<h1 className="text-2xl md:text-3xl font-black tracking-tight text-white leading-tight">Inventory Catalog</h1>
|
<h1 className="text-2xl md:text-3xl font-black tracking-tight text-white leading-tight">Inventory Catalog</h1>
|
||||||
<p className="text-[10px] md:text-xs text-slate-500 font-bold mt-0.5">Enterprise Stock Overview</p>
|
<p className="text-xs md:text-sm text-slate-400 font-bold mt-1 uppercase tracking-widest">Enterprise Stock Overview</p>
|
||||||
</div>
|
</div>
|
||||||
<button
|
<button
|
||||||
onClick={() => setShowBoxManager(true)}
|
onClick={() => setShowBoxManager(true)}
|
||||||
className="ml-auto p-3 bg-slate-900 border border-slate-800 text-slate-400 rounded-2xl hover:text-primary transition-all active:scale-95 shadow-xl"
|
className="ml-auto p-3 bg-slate-900 border border-slate-800 text-slate-400 rounded-2xl hover:text-primary transition-all active:scale-95 shadow-xl"
|
||||||
@@ -311,12 +311,12 @@ export default function InventoryPage() {
|
|||||||
<div className="w-10 h-10 rounded-2xl bg-primary/10 flex items-center justify-center text-primary transition-colors">
|
<div className="w-10 h-10 rounded-2xl bg-primary/10 flex items-center justify-center text-primary transition-colors">
|
||||||
<Layers size={20} />
|
<Layers size={20} />
|
||||||
</div>
|
</div>
|
||||||
<div className="text-left">
|
<div className="text-left">
|
||||||
<h3 className="font-bold text-lg">{cat}</h3>
|
<h3 className="font-bold text-lg">{cat}</h3>
|
||||||
<p className="text-[9px] font-black text-slate-400">
|
<p className="text-xs font-bold text-slate-400 mt-1 uppercase tracking-tight">
|
||||||
{inventory.filter(i => i.category === cat).length} Item types in stock
|
{inventory.filter(i => i.category === cat).length} Item types in stock
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div className="flex items-center gap-3">
|
<div className="flex items-center gap-3">
|
||||||
{expandedCategory === cat ? <ChevronDown size={20} className="text-primary" /> : <ChevronRight size={20} className="text-slate-600" />}
|
{expandedCategory === cat ? <ChevronDown size={20} className="text-primary" /> : <ChevronRight size={20} className="text-slate-600" />}
|
||||||
@@ -353,20 +353,20 @@ export default function InventoryPage() {
|
|||||||
<div className="w-8 h-8 rounded-xl bg-green-500/10 flex items-center justify-center text-green-500 shrink-0">
|
<div className="w-8 h-8 rounded-xl bg-green-500/10 flex items-center justify-center text-green-500 shrink-0">
|
||||||
<Package size={14} />
|
<Package size={14} />
|
||||||
</div>
|
</div>
|
||||||
<div className="truncate">
|
<div className="truncate">
|
||||||
<h4 className="font-bold text-slate-200 truncate">{item.name}</h4>
|
<h4 className="font-bold text-slate-200 truncate">{item.name}</h4>
|
||||||
<p className="text-[10px] text-slate-500 truncate mt-0.5">{item.specs}</p>
|
<p className="text-xs text-slate-400 truncate mt-1">{item.specs}</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div className="text-right shrink-0">
|
<div className="text-right shrink-0">
|
||||||
<span className={cn(
|
<span className={cn(
|
||||||
"text-lg font-black",
|
"text-lg font-black",
|
||||||
item.quantity <= item.min_quantity ? "text-amber-500" : "text-primary"
|
item.quantity <= item.min_quantity ? "text-amber-500" : "text-primary"
|
||||||
)}>
|
)}>
|
||||||
{item.quantity}
|
{item.quantity}
|
||||||
</span>
|
</span>
|
||||||
<p className="text-xs text-slate-600 font-bold">Stock</p>
|
<p className="text-sm text-slate-500 font-bold uppercase tracking-tight">Stock</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
))}
|
))}
|
||||||
</div>
|
</div>
|
||||||
@@ -389,12 +389,12 @@ export default function InventoryPage() {
|
|||||||
<div className="w-full max-w-lg bg-slate-900 border-x border-t sm:border border-slate-800 rounded-t-[2.5rem] sm:rounded-[2.5rem] shadow-2xl p-5 sm:p-8 overflow-hidden animate-in slide-in-from-bottom-10 duration-300">
|
<div className="w-full max-w-lg bg-slate-900 border-x border-t sm:border border-slate-800 rounded-t-[2.5rem] sm:rounded-[2.5rem] shadow-2xl p-5 sm:p-8 overflow-hidden animate-in slide-in-from-bottom-10 duration-300">
|
||||||
<div className="flex justify-between items-center mb-6">
|
<div className="flex justify-between items-center mb-6">
|
||||||
<h3 className="text-xl font-black tracking-tight flex items-center gap-2">
|
<h3 className="text-xl font-black tracking-tight flex items-center gap-2">
|
||||||
{isEditing ? "Edit Item" : selectedItem.name}
|
{isEditing ? "Edit Item" : selectedItem.name}
|
||||||
{!isEditing && (
|
{!isEditing && (
|
||||||
<span className="text-[10px] bg-slate-800 text-slate-400 px-2 py-0.5 rounded-md font-black uppercase">
|
<span className="text-xs bg-slate-800 text-slate-300 px-3 py-1 rounded-lg font-bold uppercase tracking-tight">
|
||||||
In Stock: {selectedItem.quantity}
|
In Stock: {selectedItem.quantity}
|
||||||
</span>
|
</span>
|
||||||
)}
|
)}
|
||||||
</h3>
|
</h3>
|
||||||
<div className="flex gap-2">
|
<div className="flex gap-2">
|
||||||
{!isEditing && (
|
{!isEditing && (
|
||||||
@@ -431,8 +431,8 @@ export default function InventoryPage() {
|
|||||||
|
|
||||||
{isEditing ? (
|
{isEditing ? (
|
||||||
<div className="max-h-[60vh] overflow-y-auto pr-2 space-y-4 mb-6 scrollbar-hide">
|
<div className="max-h-[60vh] overflow-y-auto pr-2 space-y-4 mb-6 scrollbar-hide">
|
||||||
<div>
|
<div>
|
||||||
<label className="text-[11px] font-black text-slate-500 ml-1 uppercase tracking-wider">Item Name</label>
|
<label className="text-sm font-bold text-slate-400 ml-1 uppercase tracking-tight">Item Name</label>
|
||||||
<input
|
<input
|
||||||
type="text"
|
type="text"
|
||||||
value={editedItem.name || ''}
|
value={editedItem.name || ''}
|
||||||
@@ -440,8 +440,8 @@ export default function InventoryPage() {
|
|||||||
className="w-full bg-slate-950 border border-slate-800 rounded-xl py-3 px-4 text-sm font-bold outline-none text-slate-100 placeholder:text-slate-700"
|
className="w-full bg-slate-950 border border-slate-800 rounded-xl py-3 px-4 text-sm font-bold outline-none text-slate-100 placeholder:text-slate-700"
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
<div>
|
<div>
|
||||||
<label className="text-[11px] font-black text-slate-500 ml-1 uppercase tracking-wider">Part Number</label>
|
<label className="text-sm font-bold text-slate-400 ml-1 uppercase tracking-tight">Part Number</label>
|
||||||
<input
|
<input
|
||||||
type="text"
|
type="text"
|
||||||
value={editedItem.part_number || ''}
|
value={editedItem.part_number || ''}
|
||||||
@@ -450,8 +450,8 @@ export default function InventoryPage() {
|
|||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
<div className="grid grid-cols-2 gap-4">
|
<div className="grid grid-cols-2 gap-4">
|
||||||
<div>
|
<div>
|
||||||
<label className="text-[11px] font-black text-slate-500 ml-1 uppercase tracking-wider">Category</label>
|
<label className="text-sm font-bold text-slate-400 ml-1 uppercase tracking-tight">Category</label>
|
||||||
<input
|
<input
|
||||||
type="text"
|
type="text"
|
||||||
list="existing-categories"
|
list="existing-categories"
|
||||||
@@ -466,8 +466,8 @@ export default function InventoryPage() {
|
|||||||
))}
|
))}
|
||||||
</datalist>
|
</datalist>
|
||||||
</div>
|
</div>
|
||||||
<div>
|
<div>
|
||||||
<label className="text-[11px] font-black text-slate-500 ml-1 uppercase tracking-wider">Item Type</label>
|
<label className="text-sm font-bold text-slate-400 ml-1 uppercase tracking-tight">Item Type</label>
|
||||||
<input
|
<input
|
||||||
type="text"
|
type="text"
|
||||||
list="existing-types"
|
list="existing-types"
|
||||||
@@ -476,8 +476,8 @@ export default function InventoryPage() {
|
|||||||
className="w-full bg-slate-950 border border-slate-800 rounded-xl py-3 px-4 text-sm font-bold outline-none text-slate-100"
|
className="w-full bg-slate-950 border border-slate-800 rounded-xl py-3 px-4 text-sm font-bold outline-none text-slate-100"
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
<div>
|
<div>
|
||||||
<label className="text-[11px] font-black text-slate-500 ml-1 uppercase tracking-wider">Connector</label>
|
<label className="text-sm font-bold text-slate-400 ml-1 uppercase tracking-tight">Connector</label>
|
||||||
<input
|
<input
|
||||||
type="text"
|
type="text"
|
||||||
value={editedItem.connector || ''}
|
value={editedItem.connector || ''}
|
||||||
@@ -486,8 +486,8 @@ export default function InventoryPage() {
|
|||||||
placeholder="e.g. LC/UPC"
|
placeholder="e.g. LC/UPC"
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
<div>
|
<div>
|
||||||
<label className="text-[11px] font-black text-slate-500 ml-1 uppercase tracking-wider">Size / Length</label>
|
<label className="text-sm font-bold text-slate-400 ml-1 uppercase tracking-tight">Size / Length</label>
|
||||||
<input
|
<input
|
||||||
type="text"
|
type="text"
|
||||||
value={editedItem.size || ''}
|
value={editedItem.size || ''}
|
||||||
@@ -496,8 +496,8 @@ export default function InventoryPage() {
|
|||||||
placeholder="e.g. 1.6TB"
|
placeholder="e.g. 1.6TB"
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
<div className="col-span-2">
|
<div className="col-span-2">
|
||||||
<label className="text-[11px] font-black text-slate-500 ml-1 uppercase tracking-wider">Item Color</label>
|
<label className="text-sm font-bold text-slate-400 ml-1 uppercase tracking-tight">Item Color</label>
|
||||||
<input
|
<input
|
||||||
type="text"
|
type="text"
|
||||||
value={editedItem.color || ''}
|
value={editedItem.color || ''}
|
||||||
@@ -506,8 +506,8 @@ export default function InventoryPage() {
|
|||||||
placeholder="e.g. Blue"
|
placeholder="e.g. Blue"
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
<div className="col-span-2">
|
<div className="col-span-2">
|
||||||
<label className="text-[11px] font-black text-slate-500 ml-1 uppercase tracking-wider">Box / Container Label</label>
|
<label className="text-sm font-bold text-slate-400 ml-1 uppercase tracking-tight">Box / Container Label</label>
|
||||||
<div className="relative flex items-center">
|
<div className="relative flex items-center">
|
||||||
<input
|
<input
|
||||||
type="text"
|
type="text"
|
||||||
@@ -534,16 +534,16 @@ export default function InventoryPage() {
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div>
|
<div>
|
||||||
<label className="text-[11px] font-black text-slate-500 ml-1 uppercase tracking-wider">Specs / Comments</label>
|
<label className="text-sm font-bold text-slate-400 ml-1 uppercase tracking-tight">Specs / Comments</label>
|
||||||
<textarea
|
<textarea
|
||||||
value={editedItem.specs || ''}
|
value={editedItem.specs || ''}
|
||||||
onChange={e => setEditedItem({...editedItem, specs: e.target.value})}
|
onChange={e => setEditedItem({...editedItem, specs: e.target.value})}
|
||||||
className="w-full bg-slate-950 border border-slate-800 rounded-xl py-3 px-4 text-sm font-bold outline-none text-slate-100 h-20 resize-none"
|
className="w-full bg-slate-950 border border-slate-800 rounded-xl py-3 px-4 text-sm font-bold outline-none text-slate-100 h-20 resize-none"
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
<div>
|
<div>
|
||||||
<label className="text-[11px] font-black text-slate-500 ml-1 uppercase tracking-wider">OCR Matching Key</label>
|
<label className="text-sm font-bold text-slate-400 ml-1 uppercase tracking-tight">OCR Matching Key</label>
|
||||||
<textarea
|
<textarea
|
||||||
value={editedItem.ocr_text || ''}
|
value={editedItem.ocr_text || ''}
|
||||||
onChange={e => setEditedItem({...editedItem, ocr_text: e.target.value})}
|
onChange={e => setEditedItem({...editedItem, ocr_text: e.target.value})}
|
||||||
@@ -567,9 +567,9 @@ export default function InventoryPage() {
|
|||||||
adjustType === t.id ? "bg-slate-800 shadow-lg" : "text-slate-500"
|
adjustType === t.id ? "bg-slate-800 shadow-lg" : "text-slate-500"
|
||||||
)}
|
)}
|
||||||
>
|
>
|
||||||
<t.icon size={20} className={adjustType === t.id ? t.color : ""} />
|
<t.icon size={20} className={adjustType === t.id ? t.color : ""} />
|
||||||
<span className="text-xs font-black mt-1">{t.label}</span>
|
<span className="text-sm font-bold mt-1.5 uppercase tracking-tight">{t.label}</span>
|
||||||
</button>
|
</button>
|
||||||
))}
|
))}
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
@@ -641,8 +641,8 @@ export default function InventoryPage() {
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div className="space-y-4">
|
<div className="space-y-4">
|
||||||
<div>
|
<div>
|
||||||
<label className="text-xs font-black text-slate-500 ml-1">Name</label>
|
<label className="text-sm font-bold text-slate-400 ml-1 uppercase tracking-tight">Name</label>
|
||||||
<input
|
<input
|
||||||
type="text"
|
type="text"
|
||||||
value={catEditedName}
|
value={catEditedName}
|
||||||
@@ -650,8 +650,8 @@ export default function InventoryPage() {
|
|||||||
className="w-full bg-slate-950 border border-slate-800 rounded-xl py-3 px-4 text-sm outline-none text-slate-100"
|
className="w-full bg-slate-950 border border-slate-800 rounded-xl py-3 px-4 text-sm outline-none text-slate-100"
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
<div>
|
<div>
|
||||||
<label className="text-xs font-black text-slate-500 ml-1">Description</label>
|
<label className="text-sm font-bold text-slate-400 ml-1 uppercase tracking-tight">Description</label>
|
||||||
<textarea
|
<textarea
|
||||||
value={catEditedDesc}
|
value={catEditedDesc}
|
||||||
onChange={e => setCatEditedDesc(e.target.value)}
|
onChange={e => setCatEditedDesc(e.target.value)}
|
||||||
@@ -736,18 +736,18 @@ export default function InventoryPage() {
|
|||||||
<p className="text-xs text-slate-500 font-bold mt-0.5">{itemCount} items linked</p>
|
<p className="text-xs text-slate-500 font-bold mt-0.5">{itemCount} items linked</p>
|
||||||
</div>
|
</div>
|
||||||
<div className="flex gap-2 shrink-0">
|
<div className="flex gap-2 shrink-0">
|
||||||
<button
|
<button
|
||||||
onClick={() => setSelectedBoxLabel(box)}
|
onClick={() => setSelectedBoxLabel(box)}
|
||||||
className="flex-1 py-3 bg-primary text-white text-[11px] font-black rounded-xl flex items-center justify-center gap-2 hover:bg-blue-500 transition-colors shadow-lg shadow-primary/10 active:scale-95"
|
className="flex-1 py-3 bg-primary text-white text-xs font-black rounded-xl flex items-center justify-center gap-2 hover:bg-blue-500 transition-colors shadow-lg shadow-primary/10 active:scale-95"
|
||||||
>
|
>
|
||||||
<Printer size={14} /> Print Label
|
<Printer size={14} /> Print Label
|
||||||
</button>
|
</button>
|
||||||
<button
|
<button
|
||||||
onClick={() => { setSearchQuery(box); setShowBoxManager(false); setBoxSearchQuery(''); }}
|
onClick={() => { setSearchQuery(box); setShowBoxManager(false); setBoxSearchQuery(''); }}
|
||||||
className="px-4 py-3 bg-slate-900 border border-slate-800 text-slate-400 text-[11px] font-bold rounded-xl hover:bg-slate-800 active:scale-95"
|
className="px-4 py-3 bg-slate-900 border border-slate-800 text-slate-400 text-xs font-bold rounded-xl hover:bg-slate-800 active:scale-95"
|
||||||
>
|
>
|
||||||
View
|
View
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
@@ -757,9 +757,9 @@ export default function InventoryPage() {
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div className="p-6 py-4 bg-slate-950/50 border-t border-slate-800 text-center flex items-center justify-center gap-2">
|
<div className="p-6 py-4 bg-slate-950/50 border-t border-slate-800 text-center flex items-center justify-center gap-2">
|
||||||
<div className="w-1 h-1 rounded-full bg-primary animate-pulse" />
|
<div className="w-1 h-1 rounded-full bg-primary animate-pulse" />
|
||||||
<p className="text-[10px] text-slate-500 font-bold font-mono">TFM aInventory • Box management mode</p>
|
<p className="text-xs text-slate-400 font-bold font-mono">TFM aInventory • Box management mode</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
@@ -775,11 +775,10 @@ export default function InventoryPage() {
|
|||||||
</h2>
|
</h2>
|
||||||
|
|
||||||
<div className="w-full aspect-[2/1] bg-white flex flex-col items-center justify-center overflow-hidden" dangerouslySetInnerHTML={{ __html: generateBarcode128(selectedBoxLabel) }} />
|
<div className="w-full aspect-[2/1] bg-white flex flex-col items-center justify-center overflow-hidden" dangerouslySetInnerHTML={{ __html: generateBarcode128(selectedBoxLabel) }} />
|
||||||
|
<div className="flex flex-col items-center gap-1">
|
||||||
<div className="flex flex-col items-center gap-1">
|
<p className="text-xs font-black tracking-[0.2em] text-black/50">TFM INVENTORY BOX LABEL</p>
|
||||||
<p className="text-[10px] font-black tracking-[0.2em] text-black/50">TFM INVENTORY BOX LABEL</p>
|
<img src={getQRCodeURL(selectedBoxLabel)} className="w-24 h-24" alt="QR Code" />
|
||||||
<img src={getQRCodeURL(selectedBoxLabel)} className="w-24 h-24" alt="QR Code" />
|
</div>
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div className="flex flex-col gap-3 no-print">
|
<div className="flex flex-col gap-3 no-print">
|
||||||
|
|||||||
@@ -95,7 +95,7 @@ export default function LogsPage() {
|
|||||||
</div>
|
</div>
|
||||||
<div>
|
<div>
|
||||||
<h1 className="text-2xl md:text-3xl font-black tracking-tight text-white leading-tight">Operations Audit</h1>
|
<h1 className="text-2xl md:text-3xl font-black tracking-tight text-white leading-tight">Operations Audit</h1>
|
||||||
<p className="text-[10px] md:text-xs text-slate-500 font-bold uppercase tracking-widest mt-0.5">Real-time Intervention Tracking</p>
|
<p className="text-xs md:text-sm text-slate-400 font-bold uppercase tracking-widest mt-0.5">Real-time Intervention Tracking</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
@@ -103,7 +103,7 @@ export default function LogsPage() {
|
|||||||
<button
|
<button
|
||||||
onClick={loadData}
|
onClick={loadData}
|
||||||
disabled={loading}
|
disabled={loading}
|
||||||
className="flex items-center gap-2 px-5 py-2.5 bg-slate-900 border border-slate-800 text-slate-400 hover:text-white rounded-2xl text-[10px] font-black transition-all active:scale-95 disabled:opacity-50 shadow-xl"
|
className="flex items-center gap-2 px-5 py-2.5 bg-slate-900 border border-slate-800 text-slate-400 hover:text-white rounded-2xl text-xs font-black transition-all active:scale-95 disabled:opacity-50 shadow-xl"
|
||||||
>
|
>
|
||||||
<RefreshCw size={14} className={cn(loading && "animate-spin")} />
|
<RefreshCw size={14} className={cn(loading && "animate-spin")} />
|
||||||
Sync Logs
|
Sync Logs
|
||||||
@@ -153,10 +153,10 @@ export default function LogsPage() {
|
|||||||
<button
|
<button
|
||||||
onClick={() => setFilterAction('ALL')}
|
onClick={() => setFilterAction('ALL')}
|
||||||
className={cn(
|
className={cn(
|
||||||
"px-5 py-2 rounded-full text-[10px] font-black transition-all whitespace-nowrap border uppercase tracking-widest",
|
"px-5 py-2 rounded-full text-xs font-bold transition-all whitespace-nowrap border uppercase tracking-widest",
|
||||||
filterAction === 'ALL'
|
filterAction === 'ALL'
|
||||||
? "bg-white text-slate-950 border-white shadow-xl shadow-white/10"
|
? "bg-white text-slate-950 border-white shadow-xl shadow-white/10"
|
||||||
: "bg-slate-900/50 text-slate-500 border-slate-800 hover:border-slate-700"
|
: "bg-slate-900/50 text-slate-400 border-slate-800 hover:border-slate-700"
|
||||||
)}
|
)}
|
||||||
>
|
>
|
||||||
All Streams
|
All Streams
|
||||||
@@ -166,10 +166,10 @@ export default function LogsPage() {
|
|||||||
key={f}
|
key={f}
|
||||||
onClick={() => setFilterAction(f)}
|
onClick={() => setFilterAction(f)}
|
||||||
className={cn(
|
className={cn(
|
||||||
"px-5 py-2 rounded-full text-[10px] font-black transition-all whitespace-nowrap border uppercase tracking-widest",
|
"px-5 py-2 rounded-full text-xs font-bold transition-all whitespace-nowrap border uppercase tracking-widest",
|
||||||
filterAction === f
|
filterAction === f
|
||||||
? "bg-primary text-white border-primary shadow-xl shadow-primary/10"
|
? "bg-primary text-white border-primary shadow-xl shadow-primary/10"
|
||||||
: "bg-slate-900/50 text-slate-500 border-slate-800 hover:border-slate-700"
|
: "bg-slate-900/50 text-slate-400 border-slate-800 hover:border-slate-700"
|
||||||
)}
|
)}
|
||||||
>
|
>
|
||||||
{f}
|
{f}
|
||||||
@@ -182,7 +182,7 @@ export default function LogsPage() {
|
|||||||
{loading ? (
|
{loading ? (
|
||||||
<div className="flex flex-col items-center justify-center py-32 text-slate-600 gap-4 animate-pulse">
|
<div className="flex flex-col items-center justify-center py-32 text-slate-600 gap-4 animate-pulse">
|
||||||
<div className="w-10 h-10 border-4 border-primary/20 border-t-primary rounded-full animate-spin" />
|
<div className="w-10 h-10 border-4 border-primary/20 border-t-primary rounded-full animate-spin" />
|
||||||
<p className="text-[10px] font-black tracking-widest uppercase italic">Securing Audit Stream...</p>
|
<p className="text-xs font-black tracking-widest uppercase italic">Securing Audit Stream...</p>
|
||||||
</div>
|
</div>
|
||||||
) : filteredLogs.length === 0 ? (
|
) : filteredLogs.length === 0 ? (
|
||||||
<div className="bg-slate-900/20 border border-slate-800/50 border-dashed rounded-[2.5rem] py-20 flex flex-col items-center justify-center text-center gap-6">
|
<div className="bg-slate-900/20 border border-slate-800/50 border-dashed rounded-[2.5rem] py-20 flex flex-col items-center justify-center text-center gap-6">
|
||||||
@@ -205,7 +205,7 @@ export default function LogsPage() {
|
|||||||
<div className="flex-1 min-w-0 z-10 flex items-center gap-4">
|
<div className="flex-1 min-w-0 z-10 flex items-center gap-4">
|
||||||
{/* Compact Action Badge */}
|
{/* Compact Action Badge */}
|
||||||
<div className={cn(
|
<div className={cn(
|
||||||
"text-[8px] font-black px-2 py-1 rounded-lg border min-w-[75px] text-center uppercase tracking-tighter",
|
"text-[10px] font-black px-3 py-1.5 rounded-lg border min-w-[85px] text-center uppercase tracking-tight",
|
||||||
log.action.includes('CHECK_IN') ? "bg-green-500/10 text-green-500 border-green-500/20" :
|
log.action.includes('CHECK_IN') ? "bg-green-500/10 text-green-500 border-green-500/20" :
|
||||||
(log.action.includes('TRASH') ? "bg-rose-500/10 text-rose-500 border-rose-500/20" :
|
(log.action.includes('TRASH') ? "bg-rose-500/10 text-rose-500 border-rose-500/20" :
|
||||||
(log.action.includes('DB') ? "bg-sky-500/10 text-sky-400 border-sky-500/20" :
|
(log.action.includes('DB') ? "bg-sky-500/10 text-sky-400 border-sky-500/20" :
|
||||||
@@ -216,13 +216,13 @@ export default function LogsPage() {
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div className="flex-1 min-w-0">
|
<div className="flex-1 min-w-0">
|
||||||
<h3 className="text-sm font-bold text-slate-100 group-hover:text-primary transition-colors truncate">
|
<h3 className="text-base font-bold text-slate-100 group-hover:text-primary transition-colors truncate">
|
||||||
{log.resolved_name}
|
{log.resolved_name}
|
||||||
</h3>
|
</h3>
|
||||||
<div className="flex items-center gap-2 mt-0.5">
|
<div className="flex items-center gap-2 mt-0.5">
|
||||||
<span className="text-[9px] font-black text-slate-500 uppercase tracking-tighter shrink-0">{log.username || 'System'}</span>
|
<span className="text-[11px] font-bold text-slate-400 uppercase tracking-tight shrink-0">{log.username || 'System'}</span>
|
||||||
<span className="w-0.5 h-0.5 rounded-full bg-slate-800 shrink-0" />
|
<span className="w-1 h-1 rounded-full bg-slate-800 shrink-0" />
|
||||||
<span className="text-[9px] text-slate-600 font-bold tabular-nums truncate">
|
<span className="text-[11px] text-slate-400 font-medium tabular-nums truncate">
|
||||||
{new Date(log.timestamp).toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })} · {new Date(log.timestamp).toLocaleDateString()}
|
{new Date(log.timestamp).toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })} · {new Date(log.timestamp).toLocaleDateString()}
|
||||||
</span>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
@@ -250,7 +250,7 @@ export default function LogsPage() {
|
|||||||
<div className="flex justify-between items-start">
|
<div className="flex justify-between items-start">
|
||||||
<div className="space-y-1 pr-4">
|
<div className="space-y-1 pr-4">
|
||||||
<div className={cn(
|
<div className={cn(
|
||||||
"text-[9px] font-black px-3 py-1 rounded-full border inline-block uppercase tracking-widest",
|
"text-xs font-bold px-4 py-1.5 rounded-full border inline-block uppercase tracking-widest",
|
||||||
selectedLog.action.includes('CHECK_IN') ? "bg-green-500/10 text-green-500 border-green-500/30" :
|
selectedLog.action.includes('CHECK_IN') ? "bg-green-500/10 text-green-500 border-green-500/30" :
|
||||||
(selectedLog.action.includes('TRASH') ? "bg-rose-500/10 text-rose-500 border-rose-500/30" : "bg-primary/10 text-primary border-primary/30")
|
(selectedLog.action.includes('TRASH') ? "bg-rose-500/10 text-rose-500 border-rose-500/30" : "bg-primary/10 text-primary border-primary/30")
|
||||||
)}>
|
)}>
|
||||||
@@ -267,11 +267,11 @@ export default function LogsPage() {
|
|||||||
|
|
||||||
<div className="grid grid-cols-2 gap-4">
|
<div className="grid grid-cols-2 gap-4">
|
||||||
<div className="space-y-1 bg-slate-950/50 p-4 rounded-2xl border border-slate-800/50">
|
<div className="space-y-1 bg-slate-950/50 p-4 rounded-2xl border border-slate-800/50">
|
||||||
<p className="text-[9px] font-black text-slate-600 uppercase tracking-widest">Protocol Operator</p>
|
<p className="text-[11px] font-bold text-slate-500 uppercase tracking-widest">Protocol Operator</p>
|
||||||
<p className="text-sm font-black text-slate-200">{selectedLog.username || 'Automated Process'}</p>
|
<p className="text-sm font-black text-slate-200">{selectedLog.username || 'Automated Process'}</p>
|
||||||
</div>
|
</div>
|
||||||
<div className="space-y-1 bg-slate-950/50 p-4 rounded-2xl border border-slate-800/50">
|
<div className="space-y-1 bg-slate-950/50 p-4 rounded-2xl border border-slate-800/50">
|
||||||
<p className="text-[9px] font-black text-slate-600 uppercase tracking-widest">Quantity Delta</p>
|
<p className="text-[11px] font-bold text-slate-500 uppercase tracking-widest">Quantity Delta</p>
|
||||||
<p className={cn(
|
<p className={cn(
|
||||||
"text-xl font-black tabular-nums",
|
"text-xl font-black tabular-nums",
|
||||||
(selectedLog.quantity_change || 0) > 0 ? "text-green-500" : "text-rose-500"
|
(selectedLog.quantity_change || 0) > 0 ? "text-green-500" : "text-rose-500"
|
||||||
@@ -285,7 +285,7 @@ export default function LogsPage() {
|
|||||||
|
|
||||||
<div className="space-y-5">
|
<div className="space-y-5">
|
||||||
<div className="space-y-1">
|
<div className="space-y-1">
|
||||||
<p className="text-[9px] font-black text-slate-600 uppercase tracking-widest ml-1">Universal Timestamp</p>
|
<p className="text-[11px] font-bold text-slate-500 uppercase tracking-widest ml-1">Universal Timestamp</p>
|
||||||
<p className="text-xs font-bold text-slate-400 bg-slate-950/30 p-4 rounded-2xl border border-slate-800/30 tabular-nums">
|
<p className="text-xs font-bold text-slate-400 bg-slate-950/30 p-4 rounded-2xl border border-slate-800/30 tabular-nums">
|
||||||
{new Date(selectedLog.timestamp).toLocaleString(undefined, { dateStyle: 'full', timeStyle: 'medium' })}
|
{new Date(selectedLog.timestamp).toLocaleString(undefined, { dateStyle: 'full', timeStyle: 'medium' })}
|
||||||
</p>
|
</p>
|
||||||
@@ -305,8 +305,8 @@ export default function LogsPage() {
|
|||||||
{Object.entries(snap).map(([key, val]) => (
|
{Object.entries(snap).map(([key, val]) => (
|
||||||
(val && key !== 'image_url' && key !== 'id') ? (
|
(val && key !== 'image_url' && key !== 'id') ? (
|
||||||
<div key={key} className="bg-slate-950/20 p-3 rounded-xl border border-slate-800/20">
|
<div key={key} className="bg-slate-950/20 p-3 rounded-xl border border-slate-800/20">
|
||||||
<p className="text-[7px] font-black text-slate-600 uppercase mb-1 tracking-tighter opacity-70">{key.replace('_', ' ')}</p>
|
<p className="text-[10px] font-bold text-slate-500 uppercase mb-1 tracking-tight opacity-70">{key.replace('_', ' ')}</p>
|
||||||
<p className="text-[10px] font-bold text-slate-400 truncate" title={String(val)}>{String(val)}</p>
|
<p className="text-xs font-bold text-slate-300 truncate" title={String(val)}>{String(val)}</p>
|
||||||
</div>
|
</div>
|
||||||
) : null
|
) : null
|
||||||
))}
|
))}
|
||||||
@@ -318,8 +318,8 @@ export default function LogsPage() {
|
|||||||
|
|
||||||
{selectedLog.details && (
|
{selectedLog.details && (
|
||||||
<div className="space-y-1.5">
|
<div className="space-y-1.5">
|
||||||
<p className="text-[9px] font-black text-slate-600 uppercase tracking-widest ml-1">Intervention Details</p>
|
<p className="text-[11px] font-bold text-slate-500 uppercase tracking-widest ml-1">Intervention Details</p>
|
||||||
<div className="bg-primary/5 text-primary/80 p-5 rounded-3xl border border-primary/10 text-xs font-bold leading-relaxed italic shadow-inner">
|
<div className="bg-primary/5 text-primary/80 p-5 rounded-3xl border border-primary/10 text-sm font-medium leading-relaxed italic shadow-inner">
|
||||||
"{selectedLog.details}"
|
"{selectedLog.details}"
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@@ -459,21 +459,8 @@ export default function Home() {
|
|||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
<div>
|
<div>
|
||||||
<h1 className="text-lg md:text-xl font-black tracking-normal text-white leading-none">
|
<h1 className="text-2xl md:text-3xl font-black tracking-tight text-white leading-tight">Admin Control</h1>
|
||||||
TFM <span className="font-mono text-primary bg-primary/5 px-2 py-0.5 rounded-lg border border-primary/10 ml-1">aInventory</span>
|
<p className="text-xs md:text-sm text-slate-400 font-bold tracking-tight mt-1 uppercase tracking-widest leading-relaxed">System Configuration & Security</p>
|
||||||
</h1>
|
|
||||||
<div className="flex items-center gap-2 mt-1">
|
|
||||||
<p className="text-xs font-bold text-slate-500 font-mono">
|
|
||||||
Version {versionData.version}
|
|
||||||
</p>
|
|
||||||
<span className="w-1 h-1 rounded-full bg-slate-800" />
|
|
||||||
<button
|
|
||||||
className="text-xs font-black text-primary/80 hover:text-primary transition-colors flex items-center gap-1"
|
|
||||||
>
|
|
||||||
<User size={8} />
|
|
||||||
{currentUser?.username || 'Guest'}
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
@@ -482,19 +469,25 @@ export default function Home() {
|
|||||||
{isScannerReady && (
|
{isScannerReady && (
|
||||||
<div className="flex items-center gap-2">
|
<div className="flex items-center gap-2">
|
||||||
<div className="w-1.5 h-1.5 rounded-full bg-green-500 shadow-[0_0_8px_rgba(34,197,94,0.6)]" />
|
<div className="w-1.5 h-1.5 rounded-full bg-green-500 shadow-[0_0_8px_rgba(34,197,94,0.6)]" />
|
||||||
<span className="text-[10px] sm:text-xs font-black text-green-500/90 whitespace-nowrap">
|
<span className="text-xs font-black text-green-500/90 whitespace-nowrap">
|
||||||
Scanner: OK
|
Scanner: OK
|
||||||
</span>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
<div className="flex items-center gap-2">
|
<div className="flex items-center gap-2">
|
||||||
<div className={`w-1.5 h-1.5 rounded-full ${isOnline ? 'bg-green-500 animate-pulse shadow-[0_0_8px_rgba(34,197,94,0.6)]' : 'bg-rose-500 shadow-[0_0_8px_rgba(244,63,94,0.6)]'}`} />
|
<div className={`w-1.5 h-1.5 rounded-full ${isOnline ? 'bg-green-500 animate-pulse shadow-[0_0_8px_rgba(34,197,94,0.6)]' : 'bg-rose-500 shadow-[0_0_8px_rgba(244,63,94,0.6)]'}`} />
|
||||||
<span className={`text-[10px] sm:text-xs font-black whitespace-nowrap ${isOnline ? 'text-green-500/90' : 'text-rose-500/90'}`}>
|
<span className={`text-xs font-black whitespace-nowrap ${isOnline ? 'text-green-500/90' : 'text-rose-500/90'}`}>
|
||||||
Sync: {isOnline ? 'Active' : 'Offline'}
|
Sync: {isOnline ? 'Active' : 'Offline'}
|
||||||
</span>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div className="flex items-center gap-2">
|
<div className="flex items-center gap-2">
|
||||||
|
<button
|
||||||
|
onClick={() => { setIsSelecting(false); setCapturedImage(null); setCountdown(4); }}
|
||||||
|
className="w-full py-4 bg-slate-800 hover:bg-slate-700 text-white rounded-2xl font-black text-xs uppercase tracking-widest transition-all active:scale-95 border border-slate-700 shadow-xl"
|
||||||
|
>
|
||||||
|
Abort Cycle
|
||||||
|
</button>
|
||||||
<button
|
<button
|
||||||
onClick={handleSync}
|
onClick={handleSync}
|
||||||
disabled={syncing}
|
disabled={syncing}
|
||||||
@@ -534,11 +527,11 @@ export default function Home() {
|
|||||||
<div className="space-y-4">
|
<div className="space-y-4">
|
||||||
<div className="flex justify-between items-center">
|
<div className="flex justify-between items-center">
|
||||||
<h2 className="text-lg font-semibold">scanning...</h2>
|
<h2 className="text-lg font-semibold">scanning...</h2>
|
||||||
<button
|
<button
|
||||||
onClick={() => setShowScanner(false)}
|
onClick={() => setIsEnterprise(false)}
|
||||||
className="text-sm text-slate-400 hover:text-white"
|
className="text-xs font-black text-primary hover:underline uppercase tracking-tighter"
|
||||||
>
|
>
|
||||||
Cancel
|
Profile Swap
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
<Scanner onScanSuccess={onScanSuccess} onOCRMatch={onOCRMatch} />
|
<Scanner onScanSuccess={onScanSuccess} onOCRMatch={onOCRMatch} />
|
||||||
@@ -553,13 +546,20 @@ export default function Home() {
|
|||||||
</button>
|
</button>
|
||||||
|
|
||||||
<div>
|
<div>
|
||||||
<p className="text-lg font-medium">tap to start scanning</p>
|
<h2 className="text-3xl font-black text-white tracking-tight">Protocol Access</h2>
|
||||||
<p className="text-sm text-slate-400">Scan labels to {mode.replace('_', ' ')} items</p>
|
<p className="text-slate-400 text-xs font-bold uppercase tracking-widest mt-1">Select operator profile to initialize</p>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div className="w-full h-px bg-slate-800/50 my-2" />
|
<div className="w-full h-px bg-slate-800/50 my-2" />
|
||||||
|
|
||||||
<div className="w-full flex justify-center">
|
<div className="w-full flex justify-center">
|
||||||
|
<button
|
||||||
|
onClick={() => setIsEnterprise(true)}
|
||||||
|
className="flex items-center justify-center gap-2 py-4 rounded-2xl border border-dashed border-slate-700 text-slate-400 hover:text-white hover:border-slate-500 transition-all font-bold text-xs"
|
||||||
|
>
|
||||||
|
<Lock size={12} />
|
||||||
|
Enterprise
|
||||||
|
</button>
|
||||||
<button
|
<button
|
||||||
onClick={() => setShowOnboarding(true)}
|
onClick={() => setShowOnboarding(true)}
|
||||||
className="w-full flex flex-col items-center justify-center p-8 rounded-[2rem] bg-indigo-500/5 border border-indigo-500/20 group hover:border-indigo-500/50 transition-all font-black text-indigo-400 gap-4"
|
className="w-full flex flex-col items-center justify-center p-8 rounded-[2rem] bg-indigo-500/5 border border-indigo-500/20 group hover:border-indigo-500/50 transition-all font-black text-indigo-400 gap-4"
|
||||||
@@ -592,11 +592,14 @@ export default function Home() {
|
|||||||
{selectedItem && (
|
{selectedItem && (
|
||||||
<div className="fixed inset-0 z-50 flex items-end sm:items-center justify-center p-4 bg-slate-950/80 backdrop-blur-sm animate-in fade-in duration-200">
|
<div className="fixed inset-0 z-50 flex items-end sm:items-center justify-center p-4 bg-slate-950/80 backdrop-blur-sm animate-in fade-in duration-200">
|
||||||
<div className="w-full max-w-lg bg-slate-900 border border-slate-800 rounded-[2.5rem] shadow-2xl p-6 overflow-hidden animate-in slide-in-from-bottom-10 duration-300">
|
<div className="w-full max-w-lg bg-slate-900 border border-slate-800 rounded-[2.5rem] shadow-2xl p-6 overflow-hidden animate-in slide-in-from-bottom-10 duration-300">
|
||||||
|
<div className="flex justify-between items-center px-1">
|
||||||
|
<p className="text-xs font-black text-slate-400 uppercase tracking-widest italic">LDAP Authentication</p>
|
||||||
|
</div>
|
||||||
<div className="flex justify-between items-center mb-6">
|
<div className="flex justify-between items-center mb-6">
|
||||||
<h3 className="text-xl font-black tracking-tight flex items-center gap-2">
|
<h3 className="text-xl font-black tracking-tight flex items-center gap-2">
|
||||||
{isEditing ? "Edit Metadata" : selectedItem.name}
|
{isEditing ? "Edit Metadata" : selectedItem.name}
|
||||||
{!isEditing && (
|
{!isEditing && (
|
||||||
<span className="text-[10px] bg-slate-800 text-slate-400 px-2 py-0.5 rounded-md font-black uppercase tracking-tight shadow-sm border border-slate-700/50">
|
<span className="text-[11px] bg-slate-800 text-slate-400 px-2 py-0.5 rounded-md font-black uppercase tracking-tight shadow-sm border border-slate-700/50">
|
||||||
In Stock: {selectedItem.quantity}
|
In Stock: {selectedItem.quantity}
|
||||||
</span>
|
</span>
|
||||||
)}
|
)}
|
||||||
@@ -621,6 +624,16 @@ export default function Home() {
|
|||||||
<Trash2 size={20} />
|
<Trash2 size={20} />
|
||||||
</button>
|
</button>
|
||||||
)}
|
)}
|
||||||
|
<button
|
||||||
|
onClick={() => {
|
||||||
|
setSelectedUserForLogin({ username: '' });
|
||||||
|
// We use an empty username object to trigger the manual input view
|
||||||
|
}}
|
||||||
|
className="flex items-center justify-center gap-2 py-4 rounded-2xl border border-primary/20 bg-primary/5 text-primary hover:bg-primary/10 transition-all font-bold text-xs"
|
||||||
|
>
|
||||||
|
<User size={12} />
|
||||||
|
Manual Login
|
||||||
|
</button>
|
||||||
<button
|
<button
|
||||||
onClick={() => {
|
onClick={() => {
|
||||||
setSelectedItem(null);
|
setSelectedItem(null);
|
||||||
@@ -635,18 +648,19 @@ export default function Home() {
|
|||||||
|
|
||||||
{isEditing ? (
|
{isEditing ? (
|
||||||
<div className="space-y-4 mb-8">
|
<div className="space-y-4 mb-8">
|
||||||
<div>
|
<div>
|
||||||
<label className="text-xs font-black text-slate-500 ml-1 tracking-tight">Item Name</label>
|
<div className="bg-slate-900/80 py-2.5 px-4 rounded-[1.2rem] border border-slate-800 focus-within:border-primary/50 transition-colors group">
|
||||||
<input
|
<label className="text-xs text-slate-400 font-bold mb-0.5 block group-focus-within:text-primary transition-colors tracking-tight uppercase">Item Name</label>
|
||||||
type="text"
|
<textarea
|
||||||
value={editedItem.name || ''}
|
value={editedItem.name || ''}
|
||||||
onChange={e => setEditedItem({ ...editedItem, name: e.target.value })}
|
onChange={(e) => setEditedItem({ ...editedItem, name: e.target.value })}
|
||||||
className="w-full bg-slate-950 border border-slate-800 rounded-xl py-3 px-4 text-sm outline-none text-slate-100 placeholder-slate-700"
|
className="bg-transparent w-full text-lg font-bold outline-none text-white placeholder:text-slate-700 resize-none h-8 leading-tight selection:bg-primary/30 py-0"
|
||||||
placeholder="e.g. Solid State Drive"
|
placeholder="SSD, SFP, Cable..."
|
||||||
/>
|
/>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div>
|
<div>
|
||||||
<label className="text-xs font-black text-slate-500 ml-1 tracking-tight">Part Number</label>
|
<label className="text-sm font-bold text-slate-400 ml-1 tracking-tight">Part Number</label>
|
||||||
<input
|
<input
|
||||||
type="text"
|
type="text"
|
||||||
value={editedItem.part_number || ''}
|
value={editedItem.part_number || ''}
|
||||||
@@ -656,8 +670,8 @@ export default function Home() {
|
|||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
<div className="grid grid-cols-2 gap-4">
|
<div className="grid grid-cols-2 gap-4">
|
||||||
<div>
|
<div>
|
||||||
<label className="text-xs font-black text-slate-500 ml-1 tracking-tight">Category Group</label>
|
<label className="text-sm font-bold text-slate-400 ml-1 tracking-tight">Category Group</label>
|
||||||
<input
|
<input
|
||||||
type="text"
|
type="text"
|
||||||
list="existing-categories"
|
list="existing-categories"
|
||||||
@@ -672,8 +686,8 @@ export default function Home() {
|
|||||||
))}
|
))}
|
||||||
</datalist>
|
</datalist>
|
||||||
</div>
|
</div>
|
||||||
<div>
|
<div>
|
||||||
<label className="text-xs font-black text-slate-500 ml-1 tracking-tight">Item Type</label>
|
<label className="text-sm font-bold text-slate-400 ml-1 tracking-tight">Item Type</label>
|
||||||
<input
|
<input
|
||||||
type="text"
|
type="text"
|
||||||
list="existing-types"
|
list="existing-types"
|
||||||
@@ -683,8 +697,8 @@ export default function Home() {
|
|||||||
placeholder="e.g. spare parts"
|
placeholder="e.g. spare parts"
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
<div className="col-span-2">
|
<div className="col-span-2">
|
||||||
<label className="text-xs font-black text-slate-500 ml-1">Box / Container Label</label>
|
<label className="text-sm font-bold text-slate-400 ml-1">Box / Container Label</label>
|
||||||
<div className="relative flex items-center">
|
<div className="relative flex items-center">
|
||||||
<input
|
<input
|
||||||
type="text"
|
type="text"
|
||||||
@@ -710,8 +724,8 @@ export default function Home() {
|
|||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div>
|
<div>
|
||||||
<label className="text-xs font-black text-slate-500 ml-1 tracking-tight">Connector</label>
|
<label className="text-sm font-bold text-slate-400 ml-1 tracking-tight">Connector</label>
|
||||||
<input
|
<input
|
||||||
type="text"
|
type="text"
|
||||||
value={editedItem.connector || ''}
|
value={editedItem.connector || ''}
|
||||||
@@ -720,8 +734,8 @@ export default function Home() {
|
|||||||
placeholder="e.g. LC/UPC"
|
placeholder="e.g. LC/UPC"
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
<div>
|
<div>
|
||||||
<label className="text-xs font-black text-slate-500 ml-1 tracking-tight">Size / Length</label>
|
<label className="text-sm font-bold text-slate-400 ml-1 tracking-tight">Size / Length</label>
|
||||||
<input
|
<input
|
||||||
type="text"
|
type="text"
|
||||||
value={editedItem.size || ''}
|
value={editedItem.size || ''}
|
||||||
@@ -730,8 +744,8 @@ export default function Home() {
|
|||||||
placeholder="e.g. 5m / 1600GB"
|
placeholder="e.g. 5m / 1600GB"
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
<div className="col-span-2">
|
<div className="col-span-2">
|
||||||
<label className="text-xs font-black text-slate-500 ml-1 tracking-tight">Item Color</label>
|
<label className="text-sm font-bold text-slate-400 ml-1 tracking-tight">Item Color</label>
|
||||||
<input
|
<input
|
||||||
type="text"
|
type="text"
|
||||||
value={editedItem.color || ''}
|
value={editedItem.color || ''}
|
||||||
@@ -740,8 +754,8 @@ export default function Home() {
|
|||||||
placeholder="e.g. Black"
|
placeholder="e.g. Black"
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
<div className="col-span-2">
|
<div className="col-span-2">
|
||||||
<label className="text-xs font-black text-slate-500 ml-1">Description</label>
|
<label className="text-sm font-bold text-slate-400 ml-1">Description</label>
|
||||||
<textarea
|
<textarea
|
||||||
value={editedItem.description || ''}
|
value={editedItem.description || ''}
|
||||||
onChange={e => setEditedItem({ ...editedItem, description: e.target.value })}
|
onChange={e => setEditedItem({ ...editedItem, description: e.target.value })}
|
||||||
@@ -749,8 +763,8 @@ export default function Home() {
|
|||||||
placeholder="Item description..."
|
placeholder="Item description..."
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
<div className="col-span-2">
|
<div className="bg-slate-900/80 py-2.5 px-4 rounded-[1.2rem] border border-slate-800 focus-within:border-primary/50 transition-colors group">
|
||||||
<label className="text-xs font-black text-slate-500 ml-1 tracking-tight">OCR Matching Key</label>
|
<label className="text-xs text-slate-400 font-bold mb-0.5 block group-focus-within:text-primary transition-colors tracking-tight uppercase">OCR Matching Key</label>
|
||||||
<textarea
|
<textarea
|
||||||
value={editedItem.ocr_text || ''}
|
value={editedItem.ocr_text || ''}
|
||||||
onChange={e => setEditedItem({ ...editedItem, ocr_text: e.target.value })}
|
onChange={e => setEditedItem({ ...editedItem, ocr_text: e.target.value })}
|
||||||
@@ -792,8 +806,9 @@ export default function Home() {
|
|||||||
<Minus size={24} />
|
<Minus size={24} />
|
||||||
</button>
|
</button>
|
||||||
<div className="text-center">
|
<div className="text-center">
|
||||||
<span className="text-5xl font-black tabular-nums">{adjustQty}</span>
|
<span className="text-xs font-black tabular-nums">{zoom.toFixed(1)}x</span>
|
||||||
</div>
|
<span className="text-[10px] text-primary/80 font-bold uppercase tracking-tight">Zoom</span>
|
||||||
|
</div>
|
||||||
<button
|
<button
|
||||||
onClick={() => setAdjustQty(adjustQty + 1)}
|
onClick={() => setAdjustQty(adjustQty + 1)}
|
||||||
className="w-12 h-12 rounded-full border border-slate-800 flex items-center justify-center text-slate-400 active:bg-slate-800"
|
className="w-12 h-12 rounded-full border border-slate-800 flex items-center justify-center text-slate-400 active:bg-slate-800"
|
||||||
@@ -876,23 +891,19 @@ export default function Home() {
|
|||||||
className="w-full text-left bg-slate-950/50 hover:bg-slate-800 border border-slate-800/80 p-4 rounded-2xl flex items-center gap-4 transition-all active:scale-[0.98] group"
|
className="w-full text-left bg-slate-950/50 hover:bg-slate-800 border border-slate-800/80 p-4 rounded-2xl flex items-center gap-4 transition-all active:scale-[0.98] group"
|
||||||
>
|
>
|
||||||
<div className="flex-1 min-w-0">
|
<div className="flex-1 min-w-0">
|
||||||
<p className="text-sm font-black text-white group-hover:text-primary transition-colors truncate">{item.name}</p>
|
<p className="text-sm font-black text-white italic text-center">Protocol Detected</p>
|
||||||
<div className="flex items-center gap-2 mt-1">
|
<p className="text-xs text-slate-400 font-bold uppercase tracking-widest text-center mt-1">Select identity from label matrix</p>
|
||||||
<span className="text-[10px] font-mono text-slate-500">{item.part_number}</span>
|
|
||||||
<span className="w-1 h-1 rounded-full bg-slate-800" />
|
|
||||||
<span className="text-[10px] font-bold text-slate-400">Stock: {item.quantity}</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
<ChevronRight size={18} className="text-slate-600 group-hover:text-primary" />
|
<ChevronRight size={18} className="text-slate-600 group-hover:text-primary" />
|
||||||
</button>
|
</button>
|
||||||
))}
|
))}
|
||||||
</div>
|
</div>
|
||||||
<button
|
<button
|
||||||
onClick={() => setBoxMatches([])}
|
onClick={handleLogin}
|
||||||
className="w-full py-4 mt-2 rounded-[1.5rem] font-black text-sm bg-slate-800 text-white hover:bg-slate-700 transition-colors shrink-0"
|
className="w-full bg-primary text-white font-black py-5 rounded-[1.5rem] shadow-2xl shadow-primary/20 hover:shadow-primary/30 active:scale-95 transition-all uppercase text-xs tracking-widest border border-primary/20"
|
||||||
>
|
>
|
||||||
Cancel
|
Initialize Session
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
@@ -902,7 +913,7 @@ export default function Home() {
|
|||||||
<footer className="mt-20 mb-8 flex flex-col items-center gap-2 opacity-30">
|
<footer className="mt-20 mb-8 flex flex-col items-center gap-2 opacity-30">
|
||||||
<p className="text-xs font-bold">Powered by TFM Group Software</p>
|
<p className="text-xs font-bold">Powered by TFM Group Software</p>
|
||||||
<div className="h-px w-12 bg-slate-800" />
|
<div className="h-px w-12 bg-slate-800" />
|
||||||
<p className="text-[9px] font-mono">v{versionData.version} • {versionData.last_build} • BUILD: dev-{(versionData as any).commit || 'N/A'}</p>
|
<p className="text-[11px] font-mono text-slate-500">v{versionData.version} • {versionData.last_build} • BUILD: dev-{(versionData as any).commit || 'N/A'}</p>
|
||||||
</footer>
|
</footer>
|
||||||
</div>
|
</div>
|
||||||
</PageShell>
|
</PageShell>
|
||||||
|
|||||||
@@ -12,12 +12,12 @@ export default function StatCard({ label, value, icon: Icon }: StatCardProps) {
|
|||||||
<div className="flex justify-between items-center gap-2 p-3.5 bg-slate-900/50 backdrop-blur-md border border-slate-800/50 rounded-2xl shadow-sm transition-all hover:bg-slate-900/80" role="status">
|
<div className="flex justify-between items-center gap-2 p-3.5 bg-slate-900/50 backdrop-blur-md border border-slate-800/50 rounded-2xl shadow-sm transition-all hover:bg-slate-900/80" role="status">
|
||||||
<div className="flex items-center gap-2.5 min-w-0">
|
<div className="flex items-center gap-2.5 min-w-0">
|
||||||
{Icon && <Icon className="w-5 h-5 text-primary flex-shrink-0" aria-hidden="true" />}
|
{Icon && <Icon className="w-5 h-5 text-primary flex-shrink-0" aria-hidden="true" />}
|
||||||
<span className="text-sm md:text-base text-slate-400 font-medium truncate">
|
<span className="text-base md:text-lg text-slate-300 font-semibold truncate">
|
||||||
{label}
|
{label}
|
||||||
</span>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<span className="text-lg md:text-xl font-black text-white whitespace-nowrap tabular-nums">
|
<span className="text-2xl md:text-3xl font-black text-white whitespace-nowrap tabular-nums">
|
||||||
{value}
|
{value}
|
||||||
</span>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@@ -64,7 +64,7 @@ export default function AiManager({
|
|||||||
<div>
|
<div>
|
||||||
<p className={cn("text-xs font-black tracking-tight", p.active ? "text-white" : "text-slate-200")}>{p.name}</p>
|
<p className={cn("text-xs font-black tracking-tight", p.active ? "text-white" : "text-slate-200")}>{p.name}</p>
|
||||||
<p className={cn(
|
<p className={cn(
|
||||||
"text-[9px] font-black mt-0.5 px-0.5 rounded",
|
"text-[11px] font-bold mt-1 px-0.5 rounded",
|
||||||
p.active
|
p.active
|
||||||
? (p.configured ? "text-emerald-200" : "text-rose-100")
|
? (p.configured ? "text-emerald-200" : "text-rose-100")
|
||||||
: (p.configured ? "text-emerald-500" : "text-rose-500")
|
: (p.configured ? "text-emerald-500" : "text-rose-500")
|
||||||
@@ -74,7 +74,7 @@ export default function AiManager({
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
{p.active && (
|
{p.active && (
|
||||||
<div className="bg-white/20 px-2 py-0.5 rounded-full text-[8px] font-black text-white tracking-tighter">
|
<div className="bg-white/20 px-2.5 py-1 rounded-full text-[10px] font-black text-white tracking-tight">
|
||||||
Active
|
Active
|
||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
@@ -86,12 +86,12 @@ export default function AiManager({
|
|||||||
<div className="flex items-center justify-between">
|
<div className="flex items-center justify-between">
|
||||||
<div className="flex items-center gap-3">
|
<div className="flex items-center gap-3">
|
||||||
<div className="p-2 bg-indigo-500/10 rounded-lg text-indigo-400"><Lock size={14} /></div>
|
<div className="p-2 bg-indigo-500/10 rounded-lg text-indigo-400"><Lock size={14} /></div>
|
||||||
<h3 className="text-xs font-black text-slate-200 tracking-tight">Provider Access Keys</h3>
|
<h3 className="text-sm font-bold text-slate-200 tracking-tight">Provider Access Keys</h3>
|
||||||
</div>
|
</div>
|
||||||
<button
|
<button
|
||||||
onClick={onSaveAiKeys}
|
onClick={onSaveAiKeys}
|
||||||
disabled={isSavingKeys}
|
disabled={isSavingKeys}
|
||||||
className="px-6 py-2.5 bg-indigo-600 hover:bg-indigo-500 text-white rounded-xl text-[10px] font-black transition-all active:scale-95 shadow-xl shadow-indigo-600/10 tracking-tight border border-indigo-500/30 flex items-center gap-2"
|
className="px-6 py-2.5 bg-indigo-600 hover:bg-indigo-500 text-white rounded-xl text-sm font-black transition-all active:scale-95 shadow-xl shadow-indigo-600/10 tracking-tight border border-indigo-500/30 flex items-center gap-2"
|
||||||
>
|
>
|
||||||
{isSavingKeys ? <RotateCcw size={14} className="animate-spin" /> : <Lock size={14} />}
|
{isSavingKeys ? <RotateCcw size={14} className="animate-spin" /> : <Lock size={14} />}
|
||||||
{isSavingKeys ? "Storing..." : "Store Keys"}
|
{isSavingKeys ? "Storing..." : "Store Keys"}
|
||||||
@@ -100,7 +100,7 @@ export default function AiManager({
|
|||||||
|
|
||||||
<div className="grid md:grid-cols-2 gap-6">
|
<div className="grid md:grid-cols-2 gap-6">
|
||||||
<div className="space-y-2">
|
<div className="space-y-2">
|
||||||
<label className="text-[9px] font-black text-slate-500 tracking-tight ml-1">Gemini Api Key</label>
|
<label className="text-sm font-bold text-slate-400 tracking-tight ml-1">Gemini Api Key</label>
|
||||||
<div className="flex gap-2">
|
<div className="flex gap-2">
|
||||||
<input
|
<input
|
||||||
type="password"
|
type="password"
|
||||||
@@ -113,7 +113,7 @@ export default function AiManager({
|
|||||||
onClick={() => onTestAiKey('gemini')}
|
onClick={() => onTestAiKey('gemini')}
|
||||||
disabled={isTestingKeys.gemini}
|
disabled={isTestingKeys.gemini}
|
||||||
className={cn(
|
className={cn(
|
||||||
"px-4 py-2 rounded-xl text-[9px] font-black tracking-tighter transition-all border shadow-lg flex items-center gap-1.5",
|
"px-4 py-2 rounded-xl text-[11px] font-bold tracking-tight transition-all border shadow-lg flex items-center gap-1.5",
|
||||||
isTestingKeys.gemini
|
isTestingKeys.gemini
|
||||||
? "bg-slate-800 border-slate-700 text-slate-500 cursor-wait"
|
? "bg-slate-800 border-slate-700 text-slate-500 cursor-wait"
|
||||||
: "bg-indigo-600 border-indigo-500 text-white hover:bg-indigo-500"
|
: "bg-indigo-600 border-indigo-500 text-white hover:bg-indigo-500"
|
||||||
@@ -125,7 +125,7 @@ export default function AiManager({
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div className="space-y-2">
|
<div className="space-y-2">
|
||||||
<label className="text-[9px] font-black text-slate-500 tracking-tight ml-1">Claude Api Key</label>
|
<label className="text-sm font-bold text-slate-400 tracking-tight ml-1">Claude Api Key</label>
|
||||||
<div className="flex gap-2">
|
<div className="flex gap-2">
|
||||||
<input
|
<input
|
||||||
type="password"
|
type="password"
|
||||||
@@ -138,7 +138,7 @@ export default function AiManager({
|
|||||||
onClick={() => onTestAiKey('claude')}
|
onClick={() => onTestAiKey('claude')}
|
||||||
disabled={isTestingKeys.claude}
|
disabled={isTestingKeys.claude}
|
||||||
className={cn(
|
className={cn(
|
||||||
"px-4 py-2 rounded-xl text-[9px] font-black uppercase tracking-tighter transition-all border shadow-lg flex items-center gap-1.5",
|
"px-4 py-2 rounded-xl text-[11px] font-bold tracking-tight transition-all border shadow-lg flex items-center gap-1.5",
|
||||||
isTestingKeys.claude
|
isTestingKeys.claude
|
||||||
? "bg-slate-800 border-slate-700 text-slate-500 cursor-wait"
|
? "bg-slate-800 border-slate-700 text-slate-500 cursor-wait"
|
||||||
: "bg-indigo-600 border-indigo-500 text-white hover:bg-indigo-500"
|
: "bg-indigo-600 border-indigo-500 text-white hover:bg-indigo-500"
|
||||||
@@ -155,11 +155,11 @@ export default function AiManager({
|
|||||||
<div className="space-y-4">
|
<div className="space-y-4">
|
||||||
<div className="space-y-2">
|
<div className="space-y-2">
|
||||||
<div className="flex items-center justify-between px-1">
|
<div className="flex items-center justify-between px-1">
|
||||||
<label className="text-[10px] font-black text-slate-500 tracking-tight">System Prompt (Vision Extraction)</label>
|
<label className="text-sm font-bold text-slate-400 tracking-tight">System Prompt (Vision Extraction)</label>
|
||||||
<button
|
<button
|
||||||
onClick={onUpdatePrompt}
|
onClick={onUpdatePrompt}
|
||||||
disabled={isSavingPrompt}
|
disabled={isSavingPrompt}
|
||||||
className="px-6 py-2 bg-indigo-600 hover:bg-indigo-500 text-white rounded-xl text-[10px] font-black transition-all active:scale-95 shadow-xl shadow-indigo-600/10 tracking-tight border border-indigo-500/30 flex items-center gap-2"
|
className="px-6 py-2 bg-indigo-600 hover:bg-indigo-500 text-white rounded-xl text-sm font-black transition-all active:scale-95 shadow-xl shadow-indigo-600/10 tracking-tight border border-indigo-500/30 flex items-center gap-2"
|
||||||
>
|
>
|
||||||
{isSavingPrompt ? <RotateCcw size={14} className="animate-spin" /> : <FileText size={14} />}
|
{isSavingPrompt ? <RotateCcw size={14} className="animate-spin" /> : <FileText size={14} />}
|
||||||
{isSavingPrompt ? "Saving..." : "Save Prompt"}
|
{isSavingPrompt ? "Saving..." : "Save Prompt"}
|
||||||
@@ -168,12 +168,12 @@ export default function AiManager({
|
|||||||
<textarea
|
<textarea
|
||||||
value={aiPrompt}
|
value={aiPrompt}
|
||||||
onChange={(e) => setAiPrompt(e.target.value)}
|
onChange={(e) => setAiPrompt(e.target.value)}
|
||||||
className="w-full bg-slate-950/80 border border-slate-800 rounded-2xl p-6 text-[11px] font-mono font-bold text-slate-300 leading-relaxed outline-none focus:border-purple-500/50 transition-all min-h-[200px] custom-scrollbar shadow-inner"
|
className="w-full bg-slate-950/80 border border-slate-800 rounded-2xl p-6 text-xs font-mono font-bold text-slate-300 leading-relaxed outline-none focus:border-purple-500/50 transition-all min-h-[200px] custom-scrollbar shadow-inner"
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
<div className="bg-purple-500/5 border border-purple-500/10 rounded-2xl p-4 flex gap-4 items-start">
|
<div className="bg-purple-500/5 border border-purple-500/10 rounded-2xl p-4 flex gap-4 items-start">
|
||||||
<div className="p-2 bg-purple-500/10 rounded-lg text-purple-400 shrink-0"><Shield size={14} /></div>
|
<div className="p-2 bg-purple-500/10 rounded-lg text-purple-400 shrink-0"><Shield size={14} /></div>
|
||||||
<p className="text-[10px] font-bold text-slate-500 leading-relaxed">
|
<p className="text-xs font-medium text-slate-400 leading-relaxed">
|
||||||
This prompt instructs the Vision AI core on label interpretation. Ensure it defines explicit mapping for technical attributes like <span className="text-purple-400">Item</span>, <span className="text-purple-400">Type</span>, and <span className="text-purple-400">Part Number</span> to avoid extraction null-pointers and ensure inventory data integrity.
|
This prompt instructs the Vision AI core on label interpretation. Ensure it defines explicit mapping for technical attributes like <span className="text-purple-400">Item</span>, <span className="text-purple-400">Type</span>, and <span className="text-purple-400">Part Number</span> to avoid extraction null-pointers and ensure inventory data integrity.
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@@ -33,7 +33,7 @@ export default function CategoryManager({
|
|||||||
</div>
|
</div>
|
||||||
<button
|
<button
|
||||||
onClick={onAddCategory}
|
onClick={onAddCategory}
|
||||||
className="flex items-center gap-2 bg-indigo-600 hover:bg-indigo-500 text-white px-6 py-3 rounded-xl text-xs font-black transition-all shadow-xl shadow-indigo-600/10 active:scale-95 border border-indigo-500/30 tracking-tight"
|
className="flex items-center gap-2 bg-indigo-600 hover:bg-indigo-500 text-white px-6 py-3 rounded-xl text-sm font-black transition-all shadow-xl shadow-indigo-600/10 active:scale-95 border border-indigo-500/30 tracking-tight"
|
||||||
>
|
>
|
||||||
<Plus size={14} /> New Group
|
<Plus size={14} /> New Group
|
||||||
</button>
|
</button>
|
||||||
@@ -44,7 +44,7 @@ export default function CategoryManager({
|
|||||||
<div key={cat.id} className="p-4 bg-slate-950/40 border border-slate-800/50 rounded-2xl flex items-center justify-between group hover:border-primary/40 transition-all">
|
<div key={cat.id} className="p-4 bg-slate-950/40 border border-slate-800/50 rounded-2xl flex items-center justify-between group hover:border-primary/40 transition-all">
|
||||||
<div className="min-w-0 pr-4">
|
<div className="min-w-0 pr-4">
|
||||||
<p className="text-sm font-bold text-slate-200 group-hover:text-primary transition-colors">{cat.name}</p>
|
<p className="text-sm font-bold text-slate-200 group-hover:text-primary transition-colors">{cat.name}</p>
|
||||||
<p className="text-[10px] text-slate-500 font-medium mt-0.5">{cat.description || 'General storage'}</p>
|
<p className="text-xs text-slate-500 font-medium mt-0.5">{cat.description || 'General storage'}</p>
|
||||||
</div>
|
</div>
|
||||||
<div className="flex gap-1 shrink-0">
|
<div className="flex gap-1 shrink-0">
|
||||||
<button
|
<button
|
||||||
@@ -84,7 +84,7 @@ export default function CategoryManager({
|
|||||||
</div>
|
</div>
|
||||||
<div className="space-y-6">
|
<div className="space-y-6">
|
||||||
<div className="space-y-1.5">
|
<div className="space-y-1.5">
|
||||||
<label className="text-[10px] font-black text-slate-500 tracking-tight ml-1">Group Identifier</label>
|
<label className="text-sm font-bold text-slate-400 tracking-tight ml-1">Group Identifier</label>
|
||||||
<input
|
<input
|
||||||
type="text"
|
type="text"
|
||||||
value={editCatForm.name}
|
value={editCatForm.name}
|
||||||
@@ -93,14 +93,14 @@ export default function CategoryManager({
|
|||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
<div className="space-y-1.5">
|
<div className="space-y-1.5">
|
||||||
<label className="text-[10px] font-black text-slate-500 tracking-tight ml-1">Strategic Description</label>
|
<label className="text-sm font-bold text-slate-400 tracking-tight ml-1">Strategic Description</label>
|
||||||
<textarea
|
<textarea
|
||||||
value={editCatForm.description}
|
value={editCatForm.description}
|
||||||
onChange={(e) => setEditCatForm({...editCatForm, description: e.target.value})}
|
onChange={(e) => setEditCatForm({...editCatForm, description: e.target.value})}
|
||||||
className="w-full bg-slate-950 border border-slate-800 rounded-2xl py-4 px-5 text-sm text-white focus:border-primary outline-none transition-all h-32 resize-none"
|
className="w-full bg-slate-950 border border-slate-800 rounded-2xl py-4 px-5 text-sm text-white focus:border-primary outline-none transition-all h-32 resize-none"
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
<button onClick={onUpdateCategorySubmit} className="w-full bg-indigo-600 hover:bg-indigo-500 text-white font-black py-4 rounded-2xl shadow-xl shadow-indigo-600/20 active:scale-95 transition-all text-xs mb-4 tracking-tight">
|
<button onClick={onUpdateCategorySubmit} className="w-full bg-indigo-600 hover:bg-indigo-500 text-white font-black py-4 rounded-2xl shadow-xl shadow-indigo-600/20 active:scale-95 transition-all text-sm mb-4 tracking-tight">
|
||||||
Update Asset Group
|
Update Asset Group
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@@ -45,22 +45,22 @@ export default function DatabaseManager({
|
|||||||
|
|
||||||
<div className="flex flex-col sm:flex-row sm:items-center justify-between gap-6">
|
<div className="flex flex-col sm:flex-row sm:items-center justify-between gap-6">
|
||||||
<div className="space-y-1 sm:pr-6">
|
<div className="space-y-1 sm:pr-6">
|
||||||
<p className="text-[10px] font-black text-slate-500 tracking-tight">Database Health</p>
|
<p className="text-xs font-bold text-slate-500 tracking-tight uppercase">Database Health</p>
|
||||||
<div className="flex items-center gap-2">
|
<div className="flex items-center gap-2">
|
||||||
<div className="w-2 h-2 rounded-full bg-green-500 animate-pulse shadow-[0_0_8px_rgba(34,197,94,0.3)]" />
|
<div className="w-2 h-2 rounded-full bg-green-500 animate-pulse shadow-[0_0_8px_rgba(34,197,94,0.3)]" />
|
||||||
<span className="text-sm font-bold text-slate-200">Operational</span>
|
<span className="text-sm font-bold text-slate-200">Operational</span>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div className="sm:pl-6 sm:border-l border-slate-800">
|
<div className="sm:pl-6 sm:border-l border-slate-800">
|
||||||
<p className="text-[10px] font-black text-slate-500 tracking-tight">Last Backup</p>
|
<p className="text-xs font-bold text-slate-500 tracking-tight uppercase">Last Backup</p>
|
||||||
<p className="text-sm font-bold text-slate-200 tabular-nums">{dbStats.backup_count > 0 ? 'Verified' : 'Pending...'}</p>
|
<p className="text-sm font-bold text-slate-200 tabular-nums">{dbStats.backup_count > 0 ? 'Verified' : 'Pending...'}</p>
|
||||||
</div>
|
</div>
|
||||||
<div className="ml-auto">
|
<div className="ml-auto">
|
||||||
<button
|
<button
|
||||||
onClick={onCreateBackup}
|
onClick={onCreateBackup}
|
||||||
disabled={isBackingUp}
|
disabled={isBackingUp}
|
||||||
className="flex items-center gap-2 px-5 py-3 bg-indigo-600 hover:bg-indigo-500 text-white rounded-xl text-[10px] font-black transition-all active:scale-95 disabled:opacity-50 shadow-xl shadow-indigo-600/10 tracking-tight"
|
className="flex items-center gap-2 px-5 py-3 bg-indigo-600 hover:bg-indigo-500 text-white rounded-xl text-sm font-black transition-all active:scale-95 disabled:opacity-50 shadow-xl shadow-indigo-600/10 tracking-tight"
|
||||||
>
|
>
|
||||||
{isBackingUp ? <RotateCcw size={14} className="animate-spin" /> : <Database size={14} />}
|
{isBackingUp ? <RotateCcw size={14} className="animate-spin" /> : <Database size={14} />}
|
||||||
{isBackingUp ? "Snapshotting..." : "Force Backup"}
|
{isBackingUp ? "Snapshotting..." : "Force Backup"}
|
||||||
</button>
|
</button>
|
||||||
@@ -75,14 +75,14 @@ export default function DatabaseManager({
|
|||||||
<History size={20} />
|
<History size={20} />
|
||||||
</div>
|
</div>
|
||||||
<div>
|
<div>
|
||||||
<h3 className="text-lg font-black text-white tracking-tight">Storage Policy</h3>
|
<h3 className="text-lg font-black text-white tracking-tight">Storage Policy</h3>
|
||||||
<p className="text-[10px] text-slate-500 font-bold tracking-tight">Retention & Maintenance</p>
|
<p className="text-xs text-slate-400 font-bold tracking-tight">Retention & Maintenance</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div className="grid sm:grid-cols-3 gap-6">
|
<div className="grid sm:grid-cols-3 gap-6">
|
||||||
<div className="space-y-2">
|
<div className="space-y-2">
|
||||||
<label className="text-[9px] font-black text-slate-500 tracking-tight ml-1 flex items-center gap-2">
|
<label className="text-xs font-bold text-slate-500 tracking-tight ml-1 flex items-center gap-2 uppercase">
|
||||||
<History size={10} /> Max Backups
|
<History size={10} /> Max Backups
|
||||||
</label>
|
</label>
|
||||||
<input
|
<input
|
||||||
@@ -93,7 +93,7 @@ export default function DatabaseManager({
|
|||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
<div className="space-y-2">
|
<div className="space-y-2">
|
||||||
<label className="text-[9px] font-black text-slate-500 tracking-tight ml-1 flex items-center gap-2">
|
<label className="text-xs font-bold text-slate-500 tracking-tight ml-1 flex items-center gap-2 uppercase">
|
||||||
<Clock size={10} /> Schedule (Hour)
|
<Clock size={10} /> Schedule (Hour)
|
||||||
</label>
|
</label>
|
||||||
<input
|
<input
|
||||||
@@ -105,7 +105,7 @@ export default function DatabaseManager({
|
|||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
<div className="space-y-2">
|
<div className="space-y-2">
|
||||||
<label className="text-[9px] font-black text-slate-500 tracking-tight ml-1 flex items-center gap-2">
|
<label className="text-xs font-bold text-slate-500 tracking-tight ml-1 flex items-center gap-2 uppercase">
|
||||||
<Zap size={10} /> Frequency (Days)
|
<Zap size={10} /> Frequency (Days)
|
||||||
</label>
|
</label>
|
||||||
<input
|
<input
|
||||||
@@ -121,10 +121,10 @@ export default function DatabaseManager({
|
|||||||
|
|
||||||
<div className="space-y-4">
|
<div className="space-y-4">
|
||||||
<div className="flex items-center justify-between px-1">
|
<div className="flex items-center justify-between px-1">
|
||||||
<label className="text-[10px] font-black text-slate-500 tracking-tight">Recovery Points</label>
|
<label className="text-xs font-bold text-slate-500 tracking-tight">Recovery Points</label>
|
||||||
<div className="text-[10px] font-black text-indigo-400 tracking-tight bg-indigo-500/5 px-3 py-1 rounded-full border border-indigo-500/10">
|
<div className="text-xs font-bold text-indigo-400 tracking-tight bg-indigo-500/5 px-3 py-1 rounded-full border border-indigo-500/10">
|
||||||
{formatSize(dbStats.total_size_bytes)} Used
|
{formatSize(dbStats.total_size_bytes)} Used
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div className="space-y-2 pr-2 overflow-y-auto max-h-[300px] scrollbar-thin scrollbar-thumb-slate-800 scrollbar-track-transparent">
|
<div className="space-y-2 pr-2 overflow-y-auto max-h-[300px] scrollbar-thin scrollbar-thumb-slate-800 scrollbar-track-transparent">
|
||||||
@@ -135,10 +135,10 @@ export default function DatabaseManager({
|
|||||||
<Database size={14} />
|
<Database size={14} />
|
||||||
</div>
|
</div>
|
||||||
<div>
|
<div>
|
||||||
<p className="text-[11px] font-bold text-slate-200">{bak.filename}</p>
|
<p className="text-xs font-bold text-slate-200">{bak.filename}</p>
|
||||||
<p className="text-[9px] text-slate-500 font-bold tabular-nums">
|
<p className="text-[11px] text-slate-400 font-medium tabular-nums">
|
||||||
{new Date(bak.created_at).toLocaleString()} • {formatSize(bak.size_bytes)}
|
{new Date(bak.created_at).toLocaleString()} • {formatSize(bak.size_bytes)}
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<button
|
<button
|
||||||
@@ -154,12 +154,12 @@ export default function DatabaseManager({
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div className="grid grid-cols-2 gap-4 pt-2">
|
<div className="grid grid-cols-2 gap-4 pt-2">
|
||||||
<button
|
<button
|
||||||
onClick={onExport}
|
onClick={onExport}
|
||||||
className="flex items-center justify-center gap-2 py-4 bg-slate-950 border border-slate-800 hover:border-indigo-500/50 text-indigo-400 rounded-2xl text-[10px] font-black transition-all active:scale-95 tracking-tight shadow-xl shadow-black/20"
|
className="flex items-center justify-center gap-2 py-4 bg-slate-950 border border-slate-800 hover:border-indigo-500/50 text-indigo-400 rounded-2xl text-sm font-black transition-all active:scale-95 tracking-tight shadow-xl shadow-black/20"
|
||||||
>
|
>
|
||||||
<Download size={14} /> Export Database
|
<Download size={14} /> Export Database
|
||||||
</button>
|
</button>
|
||||||
<div className="relative">
|
<div className="relative">
|
||||||
<input
|
<input
|
||||||
type="file"
|
type="file"
|
||||||
@@ -167,9 +167,9 @@ export default function DatabaseManager({
|
|||||||
onChange={onImport}
|
onChange={onImport}
|
||||||
className="absolute inset-0 opacity-0 cursor-pointer z-10"
|
className="absolute inset-0 opacity-0 cursor-pointer z-10"
|
||||||
/>
|
/>
|
||||||
<button className="w-full flex items-center justify-center gap-2 py-4 bg-slate-950 border border-slate-800 hover:border-rose-500/50 text-rose-500 rounded-2xl text-[10px] font-black transition-all tracking-tight shadow-xl shadow-black/20">
|
<button className="w-full flex items-center justify-center gap-2 py-4 bg-slate-950 border border-slate-800 hover:border-rose-500/50 text-rose-500 rounded-2xl text-sm font-black transition-all tracking-tight shadow-xl shadow-black/20">
|
||||||
<Upload size={14} /> Import Database
|
<Upload size={14} /> Import Database
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@@ -34,7 +34,7 @@ export default function IdentityManager({
|
|||||||
</div>
|
</div>
|
||||||
<button
|
<button
|
||||||
onClick={onAddUser}
|
onClick={onAddUser}
|
||||||
className="flex items-center gap-2 px-5 py-2.5 bg-indigo-600 hover:bg-indigo-500 text-white rounded-xl text-xs font-black transition-all shadow-xl shadow-indigo-600/10 active:scale-95 border border-indigo-500/30 tracking-tight"
|
className="flex items-center gap-2 px-5 py-2.5 bg-indigo-600 hover:bg-indigo-500 text-white rounded-xl text-sm font-black transition-all shadow-xl shadow-indigo-600/10 active:scale-95 border border-indigo-500/30 tracking-tight"
|
||||||
>
|
>
|
||||||
<UserPlus size={16} /> Add User
|
<UserPlus size={16} /> Add User
|
||||||
</button>
|
</button>
|
||||||
@@ -52,7 +52,7 @@ export default function IdentityManager({
|
|||||||
</div>
|
</div>
|
||||||
<div className="min-w-0">
|
<div className="min-w-0">
|
||||||
<p className="text-sm font-bold text-slate-200 truncate">{user.username}</p>
|
<p className="text-sm font-bold text-slate-200 truncate">{user.username}</p>
|
||||||
<p className="text-[9px] text-slate-500 font-black tracking-tight capitalize">{user.role}</p>
|
<p className="text-[11px] text-slate-400 font-bold tracking-tight capitalize">{user.role}</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div className="flex items-center gap-1.5 ml-2">
|
<div className="flex items-center gap-1.5 ml-2">
|
||||||
@@ -91,7 +91,7 @@ export default function IdentityManager({
|
|||||||
|
|
||||||
<div className="space-y-4">
|
<div className="space-y-4">
|
||||||
<div className="space-y-1.5">
|
<div className="space-y-1.5">
|
||||||
<label className="text-[10px] font-black text-slate-500 tracking-tight ml-1">Username</label>
|
<label className="text-sm font-bold text-slate-400 tracking-tight ml-1">Username</label>
|
||||||
<input
|
<input
|
||||||
type="text"
|
type="text"
|
||||||
value={editUserForm.username}
|
value={editUserForm.username}
|
||||||
@@ -100,7 +100,7 @@ export default function IdentityManager({
|
|||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
<div className="space-y-1.5">
|
<div className="space-y-1.5">
|
||||||
<label className="text-[10px] font-black text-slate-500 tracking-tight ml-1">New Password (Leave Empty To Keep)</label>
|
<label className="text-sm font-bold text-slate-400 tracking-tight ml-1">New Password (Leave Empty To Keep)</label>
|
||||||
<input
|
<input
|
||||||
type="password"
|
type="password"
|
||||||
value={editUserForm.password}
|
value={editUserForm.password}
|
||||||
@@ -110,7 +110,7 @@ export default function IdentityManager({
|
|||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
<div className="space-y-1.5">
|
<div className="space-y-1.5">
|
||||||
<label className="text-[10px] font-black text-slate-500 tracking-tight ml-1">Role</label>
|
<label className="text-sm font-bold text-slate-400 tracking-tight ml-1">Role</label>
|
||||||
<select
|
<select
|
||||||
value={editUserForm.role}
|
value={editUserForm.role}
|
||||||
onChange={(e) => setEditUserForm({ ...editUserForm, role: e.target.value })}
|
onChange={(e) => setEditUserForm({ ...editUserForm, role: e.target.value })}
|
||||||
|
|||||||
@@ -37,8 +37,8 @@ export default function LdapManager({
|
|||||||
<Power size={14} />
|
<Power size={14} />
|
||||||
</div>
|
</div>
|
||||||
<div>
|
<div>
|
||||||
<p className="text-[10px] font-black text-slate-200 tracking-tight leading-none">Ldap Authorization</p>
|
<p className="text-xs font-bold text-slate-200 tracking-tight leading-none">Ldap Authorization</p>
|
||||||
<p className={cn("text-[8px] font-bold mt-1", ldapConfig.ldap_enabled ? "text-green-500/80" : "text-slate-600")}>
|
<p className={cn("text-[11px] font-bold mt-1.5", ldapConfig.ldap_enabled ? "text-green-500/80" : "text-slate-500")}>
|
||||||
{ldapConfig.ldap_enabled ? "External Directory Active" : "Internal Authentication Only"}
|
{ldapConfig.ldap_enabled ? "External Directory Active" : "Internal Authentication Only"}
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
@@ -59,7 +59,7 @@ export default function LdapManager({
|
|||||||
|
|
||||||
<div className="grid sm:grid-cols-2 gap-4">
|
<div className="grid sm:grid-cols-2 gap-4">
|
||||||
<div className="space-y-1.5">
|
<div className="space-y-1.5">
|
||||||
<label className="text-[10px] font-black text-slate-500 tracking-tight ml-1">Ldap Uri</label>
|
<label className="text-sm font-bold text-slate-400 tracking-tight ml-1">Ldap Uri</label>
|
||||||
<div className="relative">
|
<div className="relative">
|
||||||
<Server className="absolute left-3.5 top-1/2 -translate-y-1/2 text-slate-700" size={14} />
|
<Server className="absolute left-3.5 top-1/2 -translate-y-1/2 text-slate-700" size={14} />
|
||||||
<input
|
<input
|
||||||
@@ -72,7 +72,7 @@ export default function LdapManager({
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div className="space-y-1.5">
|
<div className="space-y-1.5">
|
||||||
<label className="text-[10px] font-black text-slate-500 tracking-tight ml-1">Context Dn</label>
|
<label className="text-sm font-bold text-slate-400 tracking-tight ml-1">Context Dn</label>
|
||||||
<div className="relative">
|
<div className="relative">
|
||||||
<Shield className="absolute left-3.5 top-1/2 -translate-y-1/2 text-slate-700" size={14} />
|
<Shield className="absolute left-3.5 top-1/2 -translate-y-1/2 text-slate-700" size={14} />
|
||||||
<input
|
<input
|
||||||
@@ -88,7 +88,7 @@ export default function LdapManager({
|
|||||||
|
|
||||||
<div className="grid sm:grid-cols-2 gap-4">
|
<div className="grid sm:grid-cols-2 gap-4">
|
||||||
<div className="space-y-1.5">
|
<div className="space-y-1.5">
|
||||||
<label className="text-[10px] font-black text-slate-500 tracking-tight ml-1">User Dn Template</label>
|
<label className="text-sm font-bold text-slate-400 tracking-tight ml-1">User Dn Template</label>
|
||||||
<div className="relative">
|
<div className="relative">
|
||||||
<User className="absolute left-3.5 top-1/2 -translate-y-1/2 text-slate-700" size={14} />
|
<User className="absolute left-3.5 top-1/2 -translate-y-1/2 text-slate-700" size={14} />
|
||||||
<input
|
<input
|
||||||
@@ -101,7 +101,7 @@ export default function LdapManager({
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div className="space-y-1.5">
|
<div className="space-y-1.5">
|
||||||
<label className="text-[10px] font-black text-slate-500 tracking-tight ml-1">Groups Base Dn</label>
|
<label className="text-sm font-bold text-slate-400 tracking-tight ml-1">Groups Base Dn</label>
|
||||||
<div className="relative">
|
<div className="relative">
|
||||||
<Layers className="absolute left-3.5 top-1/2 -translate-y-1/2 text-slate-700" size={14} />
|
<Layers className="absolute left-3.5 top-1/2 -translate-y-1/2 text-slate-700" size={14} />
|
||||||
<input
|
<input
|
||||||
@@ -124,8 +124,8 @@ export default function LdapManager({
|
|||||||
<Lock size={14} />
|
<Lock size={14} />
|
||||||
</div>
|
</div>
|
||||||
<div>
|
<div>
|
||||||
<p className="text-[10px] font-black text-slate-200 tracking-tight leading-none">Use Tls</p>
|
<p className="text-xs font-bold text-slate-200 tracking-tight leading-none">Use Tls</p>
|
||||||
<p className={cn("text-[8px] font-bold mt-1", ldapConfig.use_tls ? "text-indigo-400/80" : "text-slate-600")}>
|
<p className={cn("text-[11px] font-bold mt-1.5", ldapConfig.use_tls ? "text-indigo-400/80" : "text-slate-500")}>
|
||||||
{ldapConfig.use_tls ? "Encrypted Channel" : "Standard Link"}
|
{ldapConfig.use_tls ? "Encrypted Channel" : "Standard Link"}
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
@@ -148,14 +148,14 @@ export default function LdapManager({
|
|||||||
<button
|
<button
|
||||||
onClick={onTestLdap}
|
onClick={onTestLdap}
|
||||||
disabled={testingLdap}
|
disabled={testingLdap}
|
||||||
className="flex-1 bg-indigo-600 hover:bg-indigo-500 text-white rounded-xl py-3 text-xs font-black shadow-xl shadow-indigo-600/10 transition-all active:scale-95 disabled:opacity-50 flex items-center justify-center gap-2 border border-indigo-500/30"
|
className="flex-1 bg-indigo-600 hover:bg-indigo-500 text-white rounded-xl py-3 text-sm font-black shadow-xl shadow-indigo-600/10 transition-all active:scale-95 disabled:opacity-50 flex items-center justify-center gap-2 border border-indigo-500/30"
|
||||||
>
|
>
|
||||||
{testingLdap ? <RotateCcw size={14} className="animate-spin" /> : <Wifi size={14} />}
|
{testingLdap ? <RotateCcw size={14} className="animate-spin" /> : <Wifi size={14} />}
|
||||||
Test Connection
|
Test Connection
|
||||||
</button>
|
</button>
|
||||||
<button
|
<button
|
||||||
onClick={onUpdateLdap}
|
onClick={onUpdateLdap}
|
||||||
className="flex-[2] bg-indigo-600 hover:bg-indigo-500 text-white rounded-xl py-3 text-xs font-black shadow-xl shadow-indigo-600/10 transition-all active:scale-95 flex items-center justify-center gap-2 border border-indigo-500/30 tracking-tight"
|
className="flex-[2] bg-indigo-600 hover:bg-indigo-500 text-white rounded-xl py-3 text-sm font-black shadow-xl shadow-indigo-600/10 transition-all active:scale-95 flex items-center justify-center gap-2 border border-indigo-500/30 tracking-tight"
|
||||||
>
|
>
|
||||||
<Shield size={14} /> Save LDAP Policy
|
<Shield size={14} /> Save LDAP Policy
|
||||||
</button>
|
</button>
|
||||||
|
|||||||
@@ -26,5 +26,9 @@ EOF
|
|||||||
chown nextjs:nodejs /app/public/network.json
|
chown nextjs:nodejs /app/public/network.json
|
||||||
|
|
||||||
# Hand off to the application server as the nextjs user
|
# Hand off to the application server as the nextjs user
|
||||||
echo "🐳 [Docker] Starting Next.js standalone server as nextjs user..."
|
echo "🐳 [Docker] Starting Next.js server..."
|
||||||
exec su-exec nextjs node server.js
|
if [ $# -eq 0 ]; then
|
||||||
|
exec su-exec nextjs node server.js
|
||||||
|
else
|
||||||
|
exec su-exec nextjs "$@"
|
||||||
|
fi
|
||||||
|
|||||||
@@ -6,8 +6,7 @@
|
|||||||
"dev": "next dev",
|
"dev": "next dev",
|
||||||
"build": "next build",
|
"build": "next build",
|
||||||
"start": "next start",
|
"start": "next start",
|
||||||
"lint": "next lint",
|
"lint": "next lint"
|
||||||
"test": "vitest"
|
|
||||||
},
|
},
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"axios": "^1.15.0",
|
"axios": "^1.15.0",
|
||||||
@@ -28,15 +27,10 @@
|
|||||||
"@types/node": "^20",
|
"@types/node": "^20",
|
||||||
"@types/react": "^19",
|
"@types/react": "^19",
|
||||||
"@types/react-dom": "^19",
|
"@types/react-dom": "^19",
|
||||||
"@testing-library/jest-dom": "^6.5.0",
|
|
||||||
"@testing-library/react": "^16.0.1",
|
|
||||||
"eslint": "^9",
|
"eslint": "^9",
|
||||||
"eslint-config-next": "15.0.0",
|
"eslint-config-next": "15.0.0",
|
||||||
"jsdom": "^25.0.1",
|
|
||||||
"postcss": "^8",
|
"postcss": "^8",
|
||||||
"tailwindcss": "^3.4.1",
|
"tailwindcss": "^3.4.1",
|
||||||
"typescript": "^5",
|
"typescript": "^5"
|
||||||
"vitest": "^2.1.2",
|
|
||||||
"@vitejs/plugin-react": "^4.3.2"
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -1,51 +0,0 @@
|
|||||||
import { renderHook, waitFor } from '@testing-library/react';
|
|
||||||
import { useAdmin } from '@/hooks/useAdmin';
|
|
||||||
import { inventoryApi } from '@/lib/api';
|
|
||||||
import { vi, describe, it, expect } from 'vitest';
|
|
||||||
|
|
||||||
// Mock the API
|
|
||||||
vi.mock('@/lib/api', () => ({
|
|
||||||
inventoryApi: {
|
|
||||||
getUsers: vi.fn(),
|
|
||||||
getCategories: vi.fn(),
|
|
||||||
getLdapConfig: vi.fn(),
|
|
||||||
getDbBackups: vi.fn(),
|
|
||||||
getDbStats: vi.fn(),
|
|
||||||
getDbSettings: vi.fn(),
|
|
||||||
getAiPrompt: vi.fn(),
|
|
||||||
getAiConfig: vi.fn(),
|
|
||||||
}
|
|
||||||
}));
|
|
||||||
|
|
||||||
// Mock toast
|
|
||||||
vi.mock('react-hot-toast', () => ({
|
|
||||||
toast: {
|
|
||||||
error: vi.fn(),
|
|
||||||
success: vi.fn(),
|
|
||||||
}
|
|
||||||
}));
|
|
||||||
|
|
||||||
describe('useAdmin hook', () => {
|
|
||||||
it('should initialize with loading state and fetch data', async () => {
|
|
||||||
(inventoryApi.getUsers as any).mockResolvedValue([{ id: 1, username: 'testuser' }]);
|
|
||||||
(inventoryApi.getCategories as any).mockResolvedValue([]);
|
|
||||||
(inventoryApi.getLdapConfig as any).mockResolvedValue({ server_uri: 'ldap://fake' });
|
|
||||||
(inventoryApi.getDbBackups as any).mockResolvedValue([]);
|
|
||||||
(inventoryApi.getDbStats as any).mockResolvedValue({ backup_count: 0 });
|
|
||||||
(inventoryApi.getDbSettings as any).mockResolvedValue({ retention_count: 5 });
|
|
||||||
(inventoryApi.getAiPrompt as any).mockResolvedValue({ value: 'test prompt' });
|
|
||||||
(inventoryApi.getAiConfig as any).mockResolvedValue({ active_provider: 'gemini' });
|
|
||||||
|
|
||||||
const { result } = renderHook(() => useAdmin());
|
|
||||||
|
|
||||||
expect(result.current.loading).toBe(true);
|
|
||||||
|
|
||||||
await waitFor(() => {
|
|
||||||
expect(result.current.loading).toBe(false);
|
|
||||||
});
|
|
||||||
|
|
||||||
expect(result.current.users).toHaveLength(1);
|
|
||||||
expect(result.current.users[0].username).toBe('testuser');
|
|
||||||
expect(result.current.aiPrompt).toBe('test prompt');
|
|
||||||
});
|
|
||||||
});
|
|
||||||
@@ -1,15 +0,0 @@
|
|||||||
import { defineConfig } from 'vitest/config';
|
|
||||||
import react from '@vitejs/plugin-react';
|
|
||||||
import path from 'path';
|
|
||||||
|
|
||||||
export default defineConfig({
|
|
||||||
plugins: [react()],
|
|
||||||
test: {
|
|
||||||
environment: 'jsdom',
|
|
||||||
globals: true,
|
|
||||||
setupFiles: ['./vitest.setup.ts'],
|
|
||||||
alias: {
|
|
||||||
'@': path.resolve(__dirname, './'),
|
|
||||||
},
|
|
||||||
},
|
|
||||||
});
|
|
||||||
@@ -1 +0,0 @@
|
|||||||
import '@testing-library/jest-dom';
|
|
||||||
Reference in New Issue
Block a user