Add user database migration, core reusable components, and layout structure
This commit is contained in:
+25
-3
@@ -5,14 +5,15 @@ import (
|
||||
"net/http"
|
||||
"os"
|
||||
|
||||
"github.com/jmoiron/sqlx"
|
||||
"github.com/joho/godotenv"
|
||||
"golang.org/x/crypto/bcrypt"
|
||||
"workorders/internal/api"
|
||||
"workorders/internal/config"
|
||||
"workorders/internal/repository"
|
||||
)
|
||||
|
||||
func main() {
|
||||
// Load .env if present (ignored in production containers where env is injected)
|
||||
if _, err := os.Stat(".env"); err == nil {
|
||||
if err := godotenv.Load(); err != nil {
|
||||
log.Printf("warning: could not load .env: %v", err)
|
||||
@@ -33,8 +34,10 @@ func main() {
|
||||
log.Fatalf("migrations: %v", err)
|
||||
}
|
||||
|
||||
log.Printf("fetching JWKS from %s", cfg.JWKSUrl)
|
||||
api.InitJWKS(cfg.JWKSUrl)
|
||||
log.Printf("seeding default admin...")
|
||||
if err := seedAdmin(db, cfg.AdminPassword); err != nil {
|
||||
log.Printf("warning: seed admin: %v", err)
|
||||
}
|
||||
|
||||
r := api.NewRouter(cfg, db)
|
||||
|
||||
@@ -43,3 +46,22 @@ func main() {
|
||||
log.Fatal(err)
|
||||
}
|
||||
}
|
||||
|
||||
func seedAdmin(db *sqlx.DB, password string) error {
|
||||
var count int
|
||||
if err := db.Get(&count, "SELECT COUNT(*) FROM users"); err != nil {
|
||||
return err
|
||||
}
|
||||
if count > 0 {
|
||||
return nil
|
||||
}
|
||||
hash, err := bcrypt.GenerateFromPassword([]byte(password), bcrypt.DefaultCost)
|
||||
if err != nil {
|
||||
return err
|
||||
}
|
||||
_, err = db.Exec(`
|
||||
INSERT INTO users (username, email, display_name, password_hash, role)
|
||||
VALUES (@p1, @p2, @p3, @p4, 'admin')`,
|
||||
"admin", "admin@workorders.local", "Admin User", string(hash))
|
||||
return err
|
||||
}
|
||||
|
||||
@@ -9,11 +9,11 @@ require (
|
||||
github.com/jmoiron/sqlx v1.3.5
|
||||
github.com/joho/godotenv v1.5.1
|
||||
github.com/microsoft/go-mssqldb v1.7.2
|
||||
golang.org/x/crypto v0.18.0
|
||||
)
|
||||
|
||||
require (
|
||||
github.com/golang-sql/civil v0.0.0-20220223132316-b832511892a9 // indirect
|
||||
github.com/golang-sql/sqlexp v0.1.0 // indirect
|
||||
golang.org/x/crypto v0.18.0 // indirect
|
||||
golang.org/x/text v0.14.0 // indirect
|
||||
)
|
||||
|
||||
@@ -1,7 +1,110 @@
|
||||
package handlers
|
||||
|
||||
import "net/http"
|
||||
import (
|
||||
"net/http"
|
||||
"strconv"
|
||||
"time"
|
||||
|
||||
"github.com/golang-jwt/jwt/v5"
|
||||
"github.com/jmoiron/sqlx"
|
||||
"golang.org/x/crypto/bcrypt"
|
||||
"workorders/internal/config"
|
||||
"workorders/internal/model"
|
||||
)
|
||||
|
||||
type AuthHandler struct {
|
||||
db *sqlx.DB
|
||||
cfg *config.Config
|
||||
}
|
||||
|
||||
func NewAuthHandler(db *sqlx.DB, cfg *config.Config) *AuthHandler {
|
||||
return &AuthHandler{db: db, cfg: cfg}
|
||||
}
|
||||
|
||||
func (h *AuthHandler) Login(w http.ResponseWriter, r *http.Request) {
|
||||
var body struct {
|
||||
Username string `json:"username"`
|
||||
Password string `json:"password"`
|
||||
}
|
||||
if err := decode(r, &body); err != nil || body.Username == "" || body.Password == "" {
|
||||
respondError(w, http.StatusBadRequest, "username and password required")
|
||||
return
|
||||
}
|
||||
|
||||
var user model.User
|
||||
err := h.db.Get(&user,
|
||||
`SELECT * FROM users WHERE (username=@p1 OR email=@p1) AND active=1`,
|
||||
body.Username)
|
||||
if err != nil {
|
||||
respondError(w, http.StatusUnauthorized, "invalid credentials")
|
||||
return
|
||||
}
|
||||
|
||||
if err := bcrypt.CompareHashAndPassword([]byte(user.PasswordHash), []byte(body.Password)); err != nil {
|
||||
respondError(w, http.StatusUnauthorized, "invalid credentials")
|
||||
return
|
||||
}
|
||||
|
||||
token, err := generateToken(user, h.cfg.JWTSecret)
|
||||
if err != nil {
|
||||
respondError(w, http.StatusInternalServerError, "token generation failed")
|
||||
return
|
||||
}
|
||||
|
||||
h.db.Exec(`UPDATE users SET last_login=GETUTCDATE() WHERE id=@p1`, user.ID)
|
||||
|
||||
respond(w, http.StatusOK, map[string]any{
|
||||
"token": token,
|
||||
"user": publicUser(user),
|
||||
})
|
||||
}
|
||||
|
||||
func (h *AuthHandler) Refresh(w http.ResponseWriter, r *http.Request) {
|
||||
user := userFromCtx(r)
|
||||
|
||||
var dbUser model.User
|
||||
if err := h.db.Get(&dbUser, `SELECT * FROM users WHERE id=@p1 AND active=1`, user.UserID); err != nil {
|
||||
respondError(w, http.StatusUnauthorized, "user not found")
|
||||
return
|
||||
}
|
||||
|
||||
token, err := generateToken(dbUser, h.cfg.JWTSecret)
|
||||
if err != nil {
|
||||
respondError(w, http.StatusInternalServerError, "token generation failed")
|
||||
return
|
||||
}
|
||||
|
||||
respond(w, http.StatusOK, map[string]any{"token": token})
|
||||
}
|
||||
|
||||
func Me(w http.ResponseWriter, r *http.Request) {
|
||||
respond(w, http.StatusOK, userFromCtx(r))
|
||||
}
|
||||
|
||||
func generateToken(user model.User, secret string) (string, error) {
|
||||
claims := model.LocalClaims{
|
||||
RegisteredClaims: jwt.RegisteredClaims{
|
||||
Subject: strconv.Itoa(user.ID),
|
||||
ExpiresAt: jwt.NewNumericDate(time.Now().Add(8 * time.Hour)),
|
||||
IssuedAt: jwt.NewNumericDate(time.Now()),
|
||||
},
|
||||
UserID: user.ID,
|
||||
Username: user.Username,
|
||||
Email: user.Email,
|
||||
DisplayName: user.DisplayName,
|
||||
Role: user.Role,
|
||||
}
|
||||
token := jwt.NewWithClaims(jwt.SigningMethodHS256, claims)
|
||||
return token.SignedString([]byte(secret))
|
||||
}
|
||||
|
||||
func publicUser(u model.User) map[string]any {
|
||||
return map[string]any{
|
||||
"id": u.ID,
|
||||
"username": u.Username,
|
||||
"email": u.Email,
|
||||
"display_name": u.DisplayName,
|
||||
"role": u.Role,
|
||||
"avatar_url": u.AvatarURL,
|
||||
}
|
||||
}
|
||||
|
||||
+31
-130
@@ -2,117 +2,21 @@ package api
|
||||
|
||||
import (
|
||||
"context"
|
||||
"crypto/rsa"
|
||||
"encoding/base64"
|
||||
"encoding/json"
|
||||
"fmt"
|
||||
"log"
|
||||
"math/big"
|
||||
"net/http"
|
||||
"strings"
|
||||
"sync"
|
||||
"time"
|
||||
|
||||
"github.com/golang-jwt/jwt/v5"
|
||||
"workorders/internal/model"
|
||||
)
|
||||
|
||||
// jwksCache caches the public keys from Keycloak
|
||||
type jwksCache struct {
|
||||
mu sync.RWMutex
|
||||
keys map[string]*rsa.PublicKey
|
||||
fetchAt time.Time
|
||||
url string
|
||||
var roleLevel = map[string]int{
|
||||
"admin": 4, "dispatcher": 3, "field_tech": 2, "viewer": 1,
|
||||
}
|
||||
|
||||
var cache = &jwksCache{}
|
||||
|
||||
func InitJWKS(url string) {
|
||||
cache.url = url
|
||||
if err := cache.refresh(); err != nil {
|
||||
log.Printf("JWKS initial fetch warning: %v (will retry per-request)", err)
|
||||
}
|
||||
}
|
||||
|
||||
func (c *jwksCache) refresh() error {
|
||||
resp, err := http.Get(c.url) //nolint:gosec
|
||||
if err != nil {
|
||||
return fmt.Errorf("fetch JWKS: %w", err)
|
||||
}
|
||||
defer resp.Body.Close()
|
||||
|
||||
var jwks struct {
|
||||
Keys []struct {
|
||||
Kid string `json:"kid"`
|
||||
Kty string `json:"kty"`
|
||||
Alg string `json:"alg"`
|
||||
N string `json:"n"`
|
||||
E string `json:"e"`
|
||||
} `json:"keys"`
|
||||
}
|
||||
if err := json.NewDecoder(resp.Body).Decode(&jwks); err != nil {
|
||||
return fmt.Errorf("decode JWKS: %w", err)
|
||||
}
|
||||
|
||||
keys := make(map[string]*rsa.PublicKey, len(jwks.Keys))
|
||||
for _, k := range jwks.Keys {
|
||||
if k.Kty != "RSA" {
|
||||
continue
|
||||
}
|
||||
pub, err := rsaPublicKey(k.N, k.E)
|
||||
if err != nil {
|
||||
continue
|
||||
}
|
||||
keys[k.Kid] = pub
|
||||
}
|
||||
|
||||
c.mu.Lock()
|
||||
c.keys = keys
|
||||
c.fetchAt = time.Now()
|
||||
c.mu.Unlock()
|
||||
return nil
|
||||
}
|
||||
|
||||
func (c *jwksCache) get(kid string) (*rsa.PublicKey, error) {
|
||||
c.mu.RLock()
|
||||
key, ok := c.keys[kid]
|
||||
stale := time.Since(c.fetchAt) > 10*time.Minute
|
||||
c.mu.RUnlock()
|
||||
|
||||
if ok && !stale {
|
||||
return key, nil
|
||||
}
|
||||
if err := c.refresh(); err != nil {
|
||||
if ok {
|
||||
return key, nil // use stale key if refresh fails
|
||||
}
|
||||
return nil, err
|
||||
}
|
||||
c.mu.RLock()
|
||||
key, ok = c.keys[kid]
|
||||
c.mu.RUnlock()
|
||||
if !ok {
|
||||
return nil, fmt.Errorf("key %q not found", kid)
|
||||
}
|
||||
return key, nil
|
||||
}
|
||||
|
||||
func rsaPublicKey(nStr, eStr string) (*rsa.PublicKey, error) {
|
||||
nBytes, err := base64.RawURLEncoding.DecodeString(nStr)
|
||||
if err != nil {
|
||||
return nil, err
|
||||
}
|
||||
eBytes, err := base64.RawURLEncoding.DecodeString(eStr)
|
||||
if err != nil {
|
||||
return nil, err
|
||||
}
|
||||
n := new(big.Int).SetBytes(nBytes)
|
||||
e := new(big.Int).SetBytes(eBytes)
|
||||
return &rsa.PublicKey{N: n, E: int(e.Int64())}, nil
|
||||
}
|
||||
|
||||
// OIDCAuth validates a Keycloak-issued JWT in the Authorization header.
|
||||
func OIDCAuth(next http.Handler) http.Handler {
|
||||
// JWTAuth validates a locally-issued HMAC-signed JWT in the Authorization header.
|
||||
func JWTAuth(secret string) func(http.Handler) http.Handler {
|
||||
return func(next http.Handler) http.Handler {
|
||||
return http.HandlerFunc(func(w http.ResponseWriter, r *http.Request) {
|
||||
auth := r.Header.Get("Authorization")
|
||||
if !strings.HasPrefix(auth, "Bearer ") {
|
||||
@@ -121,43 +25,45 @@ func OIDCAuth(next http.Handler) http.Handler {
|
||||
}
|
||||
raw := strings.TrimPrefix(auth, "Bearer ")
|
||||
|
||||
token, err := jwt.Parse(raw, func(t *jwt.Token) (any, error) {
|
||||
if _, ok := t.Method.(*jwt.SigningMethodRSA); !ok {
|
||||
var claims model.LocalClaims
|
||||
_, err := jwt.ParseWithClaims(raw, &claims, func(t *jwt.Token) (any, error) {
|
||||
if _, ok := t.Method.(*jwt.SigningMethodHMAC); !ok {
|
||||
return nil, fmt.Errorf("unexpected signing method: %v", t.Header["alg"])
|
||||
}
|
||||
kid, _ := t.Header["kid"].(string)
|
||||
return cache.get(kid)
|
||||
return []byte(secret), nil
|
||||
}, jwt.WithExpirationRequired())
|
||||
|
||||
if err != nil || !token.Valid {
|
||||
if err != nil {
|
||||
jsonError(w, "invalid token", http.StatusUnauthorized)
|
||||
return
|
||||
}
|
||||
|
||||
claims, ok := token.Claims.(jwt.MapClaims)
|
||||
if !ok {
|
||||
jsonError(w, "invalid claims", http.StatusUnauthorized)
|
||||
return
|
||||
}
|
||||
|
||||
user := model.UserClaims{
|
||||
Sub: stringClaim(claims, "sub"),
|
||||
Email: stringClaim(claims, "email"),
|
||||
Name: stringClaim(claims, "name"),
|
||||
UserID: claims.UserID,
|
||||
Username: claims.Username,
|
||||
Email: claims.Email,
|
||||
DisplayName: claims.DisplayName,
|
||||
Role: claims.Role,
|
||||
}
|
||||
if ra, ok := claims["realm_access"].(map[string]any); ok {
|
||||
if roles, ok := ra["roles"].([]any); ok {
|
||||
for _, r := range roles {
|
||||
if s, ok := r.(string); ok {
|
||||
user.Roles = append(user.Roles, s)
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
ctx := context.WithValue(r.Context(), model.CtxUserKey, user)
|
||||
next.ServeHTTP(w, r.WithContext(ctx))
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
// RequireRole blocks requests where the user's role is below the required level.
|
||||
func RequireRole(minRole string) func(http.Handler) http.Handler {
|
||||
minLevel := roleLevel[minRole]
|
||||
return func(next http.Handler) http.Handler {
|
||||
return http.HandlerFunc(func(w http.ResponseWriter, r *http.Request) {
|
||||
user := UserFromCtx(r)
|
||||
if roleLevel[user.Role] >= minLevel {
|
||||
next.ServeHTTP(w, r)
|
||||
return
|
||||
}
|
||||
jsonError(w, "forbidden", http.StatusForbidden)
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
func CORS(next http.Handler) http.Handler {
|
||||
@@ -173,11 +79,6 @@ func CORS(next http.Handler) http.Handler {
|
||||
})
|
||||
}
|
||||
|
||||
func stringClaim(c jwt.MapClaims, key string) string {
|
||||
v, _ := c[key].(string)
|
||||
return v
|
||||
}
|
||||
|
||||
func jsonError(w http.ResponseWriter, msg string, code int) {
|
||||
w.Header().Set("Content-Type", "application/json")
|
||||
w.WriteHeader(code)
|
||||
|
||||
@@ -20,9 +20,16 @@ func NewRouter(cfg *config.Config, db *sqlx.DB) http.Handler {
|
||||
// Serve frontend static files
|
||||
r.Handle("/*", http.FileServer(http.Dir("./web")))
|
||||
|
||||
// Protected API
|
||||
// Public auth routes
|
||||
auth := handlers.NewAuthHandler(db, cfg)
|
||||
r.Post("/api/auth/login", auth.Login)
|
||||
|
||||
// Protected API routes
|
||||
r.Group(func(r chi.Router) {
|
||||
r.Use(OIDCAuth)
|
||||
r.Use(JWTAuth(cfg.JWTSecret))
|
||||
|
||||
r.Post("/api/auth/refresh", auth.Refresh)
|
||||
r.Get("/api/auth/me", handlers.Me)
|
||||
|
||||
wo := handlers.NewWorkOrderHandler(db, cfg)
|
||||
r.Get("/api/work-orders", wo.List)
|
||||
@@ -59,8 +66,6 @@ func NewRouter(cfg *config.Config, db *sqlx.DB) http.Handler {
|
||||
r.Get("/api/registry/vehicles", reg.Vehicles)
|
||||
r.Get("/api/registry/equipment", reg.Equipment)
|
||||
r.Get("/api/registry/materials", reg.Materials)
|
||||
|
||||
r.Get("/api/me", handlers.Me)
|
||||
})
|
||||
|
||||
return r
|
||||
|
||||
@@ -6,21 +6,20 @@ type Config struct {
|
||||
Addr string
|
||||
DBDSN string
|
||||
JWTSecret string
|
||||
AdminPassword string
|
||||
UploadPath string
|
||||
BaseURL string
|
||||
OIDCIssuer string
|
||||
JWKSUrl string
|
||||
AppEnv string
|
||||
}
|
||||
|
||||
func Load() *Config {
|
||||
return &Config{
|
||||
Addr: env("ADDR", ":8080"),
|
||||
Addr: env("ADDR", ":9080"),
|
||||
DBDSN: env("DB_DSN", ""),
|
||||
JWTSecret: env("JWT_SECRET", "change-me-in-production"),
|
||||
AdminPassword: env("ADMIN_PASSWORD", "admin123"),
|
||||
UploadPath: env("UPLOAD_PATH", "./uploads"),
|
||||
BaseURL: env("BASE_URL", "http://localhost:8080"),
|
||||
OIDCIssuer: env("OIDC_ISSUER", "http://localhost:8180/realms/workorders"),
|
||||
JWKSUrl: env("JWKS_URL", "http://localhost:8180/realms/workorders/protocol/openid-connect/certs"),
|
||||
BaseURL: env("BASE_URL", "http://localhost:9080"),
|
||||
AppEnv: env("APP_ENV", "development"),
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,6 +1,12 @@
|
||||
package model
|
||||
|
||||
import "time"
|
||||
import (
|
||||
"time"
|
||||
|
||||
"github.com/golang-jwt/jwt/v5"
|
||||
)
|
||||
|
||||
// ── Work Order ────────────────────────────────────────────────────────────────
|
||||
|
||||
type WorkOrder struct {
|
||||
ID int `db:"id" json:"id"`
|
||||
@@ -41,6 +47,8 @@ type WorkOrderListItem struct {
|
||||
PhotoCount int `db:"photo_count" json:"photo_count"`
|
||||
}
|
||||
|
||||
// ── Steps / Resources / Attachments / Accounting ─────────────────────────────
|
||||
|
||||
type Step struct {
|
||||
ID int `db:"id" json:"id"`
|
||||
WOID int `db:"wo_id" json:"wo_id"`
|
||||
@@ -90,6 +98,8 @@ type AccountingCode struct {
|
||||
Description string `db:"description" json:"description"`
|
||||
}
|
||||
|
||||
// ── Resource Registry ─────────────────────────────────────────────────────────
|
||||
|
||||
type RegistryPerson struct {
|
||||
ID int `db:"id" json:"id"`
|
||||
Name string `db:"name" json:"name"`
|
||||
@@ -119,11 +129,38 @@ type RegistryMaterial struct {
|
||||
PartNumber string `db:"part_number" json:"part_number"`
|
||||
}
|
||||
|
||||
// ── Users & Auth ──────────────────────────────────────────────────────────────
|
||||
|
||||
type User struct {
|
||||
ID int `db:"id" json:"id"`
|
||||
Username string `db:"username" json:"username"`
|
||||
Email string `db:"email" json:"email"`
|
||||
DisplayName string `db:"display_name" json:"display_name"`
|
||||
PasswordHash string `db:"password_hash" json:"-"`
|
||||
Role string `db:"role" json:"role"`
|
||||
AvatarURL string `db:"avatar_url" json:"avatar_url,omitempty"`
|
||||
Active bool `db:"active" json:"active"`
|
||||
LastLogin *time.Time `db:"last_login" json:"last_login"`
|
||||
CreatedAt time.Time `db:"created_at" json:"created_at"`
|
||||
}
|
||||
|
||||
// LocalClaims is the JWT payload for locally-issued tokens.
|
||||
type LocalClaims struct {
|
||||
jwt.RegisteredClaims
|
||||
UserID int `json:"uid"`
|
||||
Username string `json:"username"`
|
||||
Email string `json:"email"`
|
||||
DisplayName string `json:"name"`
|
||||
Role string `json:"role"`
|
||||
}
|
||||
|
||||
// UserClaims is stored in request context after token validation.
|
||||
type UserClaims struct {
|
||||
Sub string
|
||||
Email string
|
||||
Name string
|
||||
Roles []string
|
||||
UserID int `json:"user_id"`
|
||||
Username string `json:"username"`
|
||||
Email string `json:"email"`
|
||||
DisplayName string `json:"display_name"`
|
||||
Role string `json:"role"`
|
||||
}
|
||||
|
||||
type CtxKey string
|
||||
|
||||
@@ -0,0 +1,16 @@
|
||||
CREATE TABLE users (
|
||||
id INT IDENTITY PRIMARY KEY,
|
||||
username NVARCHAR(100) NOT NULL UNIQUE,
|
||||
email NVARCHAR(200) NOT NULL UNIQUE,
|
||||
display_name NVARCHAR(200),
|
||||
password_hash NVARCHAR(200) NOT NULL,
|
||||
role NVARCHAR(30) NOT NULL DEFAULT 'viewer',
|
||||
avatar_url NVARCHAR(500),
|
||||
active BIT NOT NULL DEFAULT 1,
|
||||
last_login DATETIME2,
|
||||
created_at DATETIME2 NOT NULL DEFAULT GETUTCDATE(),
|
||||
CONSTRAINT chk_user_role CHECK (role IN ('admin','dispatcher','field_tech','viewer'))
|
||||
);
|
||||
|
||||
CREATE INDEX ix_users_username ON users (username);
|
||||
CREATE INDEX ix_users_email ON users (email);
|
||||
+127
-75
@@ -1,84 +1,136 @@
|
||||
import { setToken } from './lib/api.mjs';
|
||||
import './components/wo-list.mjs';
|
||||
import './components/wo-form.mjs';
|
||||
// ── Register all custom elements ──────────────────────────────────────────────
|
||||
import './components/shared/ui-badge.mjs';
|
||||
import './components/shared/ui-button.mjs';
|
||||
import './components/shared/ui-spinner.mjs';
|
||||
import './components/shared/ui-toast.mjs';
|
||||
import './components/shared/ui-empty.mjs';
|
||||
import './components/shared/ui-dialog.mjs';
|
||||
import './components/layout/app-root.mjs';
|
||||
import './components/layout/app-sidebar.mjs';
|
||||
import './components/layout/app-topbar.mjs';
|
||||
import './components/layout/app-mobile-nav.mjs';
|
||||
import './components/work-orders/wo-list.mjs';
|
||||
import './components/work-orders/wo-kanban.mjs';
|
||||
import './components/work-orders/wo-form.mjs';
|
||||
import './components/work-orders/wo-detail.mjs';
|
||||
|
||||
// ── Keycloak init ─────────────────────────────────────────────────────────────
|
||||
const keycloak = new Keycloak({
|
||||
url: window.KEYCLOAK_URL || 'http://localhost:8180',
|
||||
realm: window.KEYCLOAK_REALM || 'workorders',
|
||||
clientId: window.KEYCLOAK_CLIENT_ID || 'workorders-app',
|
||||
});
|
||||
import { getUser, setToken, clearToken } from './lib/auth.mjs';
|
||||
import { api } from './lib/api.mjs';
|
||||
import { router } from './lib/router.mjs';
|
||||
import { showToast } from './components/shared/ui-toast.mjs';
|
||||
|
||||
keycloak.init({
|
||||
onLoad: 'login-required',
|
||||
pkceMethod: 'S256',
|
||||
checkLoginIframe: false,
|
||||
})
|
||||
.then(authenticated => {
|
||||
if (!authenticated) { keycloak.login(); return; }
|
||||
setToken(keycloak.token);
|
||||
const root = document.getElementById('root');
|
||||
|
||||
// Refresh token before it expires
|
||||
setInterval(async () => {
|
||||
try { await keycloak.updateToken(60); setToken(keycloak.token); }
|
||||
catch { keycloak.login(); }
|
||||
}, 30_000);
|
||||
window.addEventListener('auth:expired', () => { clearToken(); showLoginPage(); });
|
||||
window.addEventListener('auth:logout', () => { clearToken(); showLoginPage(); });
|
||||
|
||||
window.addEventListener('auth:expired', () => keycloak.login());
|
||||
renderApp(keycloak);
|
||||
})
|
||||
.catch(() => document.getElementById('app').innerHTML =
|
||||
'<p style="color:red;padding:2rem">Failed to connect to authentication server.</p>');
|
||||
|
||||
// ── App shell ─────────────────────────────────────────────────────────────────
|
||||
function renderApp(kc) {
|
||||
const app = document.getElementById('app');
|
||||
const userName = kc.tokenParsed?.name || kc.tokenParsed?.preferred_username || 'User';
|
||||
|
||||
// Nav
|
||||
const nav = document.createElement('nav');
|
||||
nav.innerHTML = `
|
||||
<span class="brand">Work Orders</span>
|
||||
<span class="spacer"></span>
|
||||
<span class="user-info">${userName}</span>
|
||||
<button id="logout" style="background:transparent;border:1px solid rgba(255,255,255,.4);color:#fff;padding:.3rem .8rem;font-size:.85rem">Logout</button>`;
|
||||
document.body.insertBefore(nav, app);
|
||||
nav.querySelector('#logout').addEventListener('click', () => kc.logout());
|
||||
|
||||
showList();
|
||||
|
||||
app.addEventListener('wo:select', e => showDetail(e.detail.id));
|
||||
app.addEventListener('wo:cancel', () => showList());
|
||||
app.addEventListener('wo:saved', () => showList());
|
||||
|
||||
document.addEventListener('keydown', e => { if (e.key === 'Escape') showList(); });
|
||||
const user = getUser();
|
||||
if (user) {
|
||||
startApp();
|
||||
} else {
|
||||
showLoginPage();
|
||||
}
|
||||
|
||||
function showList() {
|
||||
const app = document.getElementById('app');
|
||||
app.innerHTML = `
|
||||
<div class="page-header">
|
||||
<h1>Work Orders</h1>
|
||||
<button id="new-wo">+ New Work Order</button>
|
||||
// ── Login page ────────────────────────────────────────────────────────────────
|
||||
function showLoginPage() {
|
||||
root.innerHTML = `
|
||||
<style>
|
||||
.login-wrap {
|
||||
min-height: 100vh; display: flex; align-items: center; justify-content: center;
|
||||
background: var(--bg); padding: 1rem;
|
||||
}
|
||||
.login-card {
|
||||
background: var(--surface); border: 1px solid var(--border);
|
||||
border-radius: var(--radius-lg); padding: 2.5rem 2rem;
|
||||
width: 100%; max-width: 380px; box-shadow: var(--shadow-md);
|
||||
}
|
||||
.login-brand {
|
||||
display: flex; align-items: center; justify-content: center; gap: .75rem;
|
||||
margin-bottom: 1.75rem;
|
||||
}
|
||||
.login-icon {
|
||||
width: 40px; height: 40px; background: var(--teal); border-radius: var(--radius);
|
||||
display: flex; align-items: center; justify-content: center; color: #fff;
|
||||
}
|
||||
.login-title { font-size: 1.25rem; font-weight: 700; color: var(--text); }
|
||||
.login-card form { display: flex; flex-direction: column; gap: 1rem; }
|
||||
.login-card label { display: flex; flex-direction: column; gap: .3rem; font-size: .875rem; font-weight: 600; color: var(--text); }
|
||||
.login-card input { border: 1px solid var(--border); border-radius: var(--radius-sm); padding: .6rem .75rem; background: var(--surface); color: var(--text); font-size: .938rem; width: 100%; transition: border-color .15s; }
|
||||
.login-card input:focus { outline: none; border-color: var(--teal); box-shadow: 0 0 0 3px rgba(10,126,164,.15); }
|
||||
.login-btn {
|
||||
background: var(--teal); color: #fff; border: none; border-radius: var(--radius);
|
||||
padding: .65rem; font-size: .938rem; font-weight: 600; cursor: pointer;
|
||||
transition: opacity .15s; display: flex; align-items: center; justify-content: center; gap: .4rem;
|
||||
}
|
||||
.login-btn:hover { opacity: .88; }
|
||||
.login-btn:disabled { opacity: .5; cursor: not-allowed; }
|
||||
.login-error { color: var(--danger); font-size: .813rem; text-align: center; min-height: 1.25rem; }
|
||||
</style>
|
||||
<div class="login-wrap">
|
||||
<div class="login-card">
|
||||
<div class="login-brand">
|
||||
<div class="login-icon"><i data-lucide="clipboard-list" style="width:20px;height:20px"></i></div>
|
||||
<span class="login-title">Work Orders</span>
|
||||
</div>
|
||||
<wo-list id="wo-list"></wo-list>`;
|
||||
app.querySelector('#new-wo').addEventListener('click', showCreate);
|
||||
}
|
||||
|
||||
function showCreate() {
|
||||
const app = document.getElementById('app');
|
||||
app.innerHTML = `
|
||||
<div class="page-header"><h1>New Work Order</h1></div>
|
||||
<div class="card"><wo-form></wo-form></div>`;
|
||||
}
|
||||
|
||||
function showDetail(id) {
|
||||
const app = document.getElementById('app');
|
||||
app.innerHTML = `
|
||||
<div class="page-header">
|
||||
<h1>Edit Work Order</h1>
|
||||
<button id="back" class="secondary">← Back</button>
|
||||
<form id="login-form">
|
||||
<label>Username or Email<input id="login-user" type="text" autocomplete="username" required placeholder="admin"></label>
|
||||
<label>Password<input id="login-pass" type="password" autocomplete="current-password" required placeholder="••••••••"></label>
|
||||
<div class="login-error" id="login-error"></div>
|
||||
<button type="submit" class="login-btn" id="login-btn">Sign In</button>
|
||||
</form>
|
||||
</div>
|
||||
<div class="card"><wo-form wo-id="${id}"></wo-form></div>`;
|
||||
app.querySelector('#back').addEventListener('click', showList);
|
||||
</div>`;
|
||||
|
||||
if (window.lucide) lucide.createIcons({ nodes: [root] });
|
||||
|
||||
root.querySelector('#login-form').addEventListener('submit', async e => {
|
||||
e.preventDefault();
|
||||
const btn = root.querySelector('#login-btn');
|
||||
const err = root.querySelector('#login-error');
|
||||
const username = root.querySelector('#login-user').value.trim();
|
||||
const password = root.querySelector('#login-pass').value;
|
||||
btn.disabled = true;
|
||||
btn.textContent = 'Signing in…';
|
||||
err.textContent = '';
|
||||
try {
|
||||
const res = await fetch('/api/auth/login', {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({ username, password }),
|
||||
});
|
||||
const json = await res.json();
|
||||
if (!res.ok) throw new Error(json.error || 'Login failed');
|
||||
setToken(json.data.token);
|
||||
startApp();
|
||||
} catch (ex) {
|
||||
err.textContent = ex.message;
|
||||
btn.disabled = false;
|
||||
btn.textContent = 'Sign In';
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// ── Main app ──────────────────────────────────────────────────────────────────
|
||||
function startApp() {
|
||||
root.innerHTML = '<app-root></app-root>';
|
||||
const appRoot = root.querySelector('app-root');
|
||||
|
||||
router
|
||||
.on('/', () => appRoot.setPage('<wo-list></wo-list>'))
|
||||
.on('/work-orders', () => appRoot.setPage('<wo-list></wo-list>'))
|
||||
.on('/work-orders/new', () => appRoot.setPage('<wo-form></wo-form>'))
|
||||
.on('/work-orders/:id/edit', ({ id }) => appRoot.setPage(`<wo-form wo-id="${id}"></wo-form>`))
|
||||
.on('/work-orders/:id', ({ id }) => appRoot.setPage(`<wo-detail wo-id="${id}"></wo-detail>`))
|
||||
.on('/registry/people', () => appRoot.setPage('<p style="padding:2rem;color:var(--text-muted)">People registry — Phase 2</p>'))
|
||||
.on('/registry/vehicles', () => appRoot.setPage('<p style="padding:2rem;color:var(--text-muted)">Vehicles registry — Phase 2</p>'))
|
||||
.on('/registry/equipment', () => appRoot.setPage('<p style="padding:2rem;color:var(--text-muted)">Equipment registry — Phase 2</p>'))
|
||||
.on('/registry/materials', () => appRoot.setPage('<p style="padding:2rem;color:var(--text-muted)">Materials registry — Phase 2</p>'))
|
||||
.on('/reports', () => appRoot.setPage('<p style="padding:2rem;color:var(--text-muted)">Reports — Phase 3</p>'))
|
||||
.on('/users', () => appRoot.setPage('<p style="padding:2rem;color:var(--text-muted)">User management — Phase 3</p>'))
|
||||
.on('/settings', () => appRoot.setPage('<p style="padding:2rem;color:var(--text-muted)">Settings — Phase 4</p>'))
|
||||
.start();
|
||||
|
||||
// Global navigation events from WO components
|
||||
window.addEventListener('wo:navigate', e => router.navigate(e.detail.path));
|
||||
window.addEventListener('wo:toast', e => showToast(e.detail.message, e.detail.type));
|
||||
}
|
||||
|
||||
@@ -0,0 +1,41 @@
|
||||
const TABS = [
|
||||
{ label: 'Dashboard', href: '/', icon: 'layout-dashboard' },
|
||||
{ label: 'Work Orders', href: '/work-orders', icon: 'clipboard-list' },
|
||||
{ label: 'People', href: '/registry/people', icon: 'users' },
|
||||
{ label: 'Reports', href: '/reports', icon: 'bar-chart-2' },
|
||||
];
|
||||
|
||||
class AppMobileNav extends HTMLElement {
|
||||
connectedCallback() {
|
||||
this.#render();
|
||||
window.addEventListener('hashchange', () => this.#render());
|
||||
}
|
||||
|
||||
#render() {
|
||||
const path = decodeURIComponent(location.hash.slice(1)) || '/';
|
||||
this.innerHTML = `
|
||||
<style>
|
||||
app-mobile-nav a {
|
||||
flex: 1; display: flex; flex-direction: column; align-items: center;
|
||||
justify-content: center; gap: .2rem; text-decoration: none;
|
||||
color: var(--text-muted); font-size: .65rem; font-weight: 500;
|
||||
padding: .4rem; position: relative; transition: color .15s;
|
||||
}
|
||||
app-mobile-nav a.active { color: var(--teal); }
|
||||
app-mobile-nav a.active::after {
|
||||
content: ''; position: absolute; bottom: 0; left: 25%; right: 25%;
|
||||
height: 2px; background: var(--teal); border-radius: 1px;
|
||||
}
|
||||
app-mobile-nav a i { width: 20px; height: 20px; }
|
||||
</style>
|
||||
${TABS.map(t => {
|
||||
const active = t.href === '/' ? path === '/' : path.startsWith(t.href);
|
||||
return `<a href="#${t.href}" class="${active ? 'active' : ''}">
|
||||
<i data-lucide="${t.icon}"></i>
|
||||
<span>${t.label}</span>
|
||||
</a>`;
|
||||
}).join('')}`;
|
||||
if (window.lucide) lucide.createIcons({ nodes: [this] });
|
||||
}
|
||||
}
|
||||
customElements.define('app-mobile-nav', AppMobileNav);
|
||||
@@ -0,0 +1,26 @@
|
||||
class AppRoot extends HTMLElement {
|
||||
connectedCallback() {
|
||||
this.innerHTML = `
|
||||
<app-sidebar></app-sidebar>
|
||||
<div class="app-shell">
|
||||
<app-topbar></app-topbar>
|
||||
<main id="main-content"></main>
|
||||
</div>
|
||||
<app-mobile-nav></app-mobile-nav>`;
|
||||
|
||||
// Apply saved collapse state
|
||||
if (localStorage.getItem('sidebar-collapsed') === 'true') {
|
||||
this.classList.add('collapsed');
|
||||
}
|
||||
}
|
||||
|
||||
setPage(html) {
|
||||
const main = document.getElementById('main-content');
|
||||
if (main) {
|
||||
main.innerHTML = html;
|
||||
main.scrollTop = 0;
|
||||
if (window.lucide) lucide.createIcons({ nodes: [main] });
|
||||
}
|
||||
}
|
||||
}
|
||||
customElements.define('app-root', AppRoot);
|
||||
@@ -0,0 +1,141 @@
|
||||
import { getUser, clearToken } from '../../lib/auth.mjs';
|
||||
import { router } from '../../lib/router.mjs';
|
||||
|
||||
const NAV = [
|
||||
{ label: 'Dashboard', href: '/', icon: 'layout-dashboard', section: 'main' },
|
||||
{ label: 'Work Orders', href: '/work-orders', icon: 'clipboard-list', section: 'main' },
|
||||
{ label: 'People', href: '/registry/people', icon: 'users', section: 'resources' },
|
||||
{ label: 'Vehicles', href: '/registry/vehicles', icon: 'truck', section: 'resources' },
|
||||
{ label: 'Equipment', href: '/registry/equipment', icon: 'wrench', section: 'resources' },
|
||||
{ label: 'Materials', href: '/registry/materials', icon: 'package', section: 'resources' },
|
||||
{ label: 'Reports', href: '/reports', icon: 'bar-chart-2', section: 'operations' },
|
||||
];
|
||||
|
||||
const ADMIN_NAV = [
|
||||
{ label: 'Users', href: '/users', icon: 'user-cog' },
|
||||
{ label: 'Settings', href: '/settings', icon: 'settings' },
|
||||
];
|
||||
|
||||
class AppSidebar extends HTMLElement {
|
||||
#collapsed = localStorage.getItem('sidebar-collapsed') === 'true';
|
||||
|
||||
connectedCallback() { this.#render(); this.#listenRoute(); }
|
||||
|
||||
#listenRoute() {
|
||||
window.addEventListener('hashchange', () => this.#updateActive());
|
||||
}
|
||||
|
||||
#toggle() {
|
||||
this.#collapsed = !this.#collapsed;
|
||||
localStorage.setItem('sidebar-collapsed', this.#collapsed);
|
||||
const appRoot = document.querySelector('app-root');
|
||||
if (appRoot) appRoot.classList.toggle('collapsed', this.#collapsed);
|
||||
this.#render();
|
||||
}
|
||||
|
||||
#updateActive() {
|
||||
const path = decodeURIComponent(location.hash.slice(1)) || '/';
|
||||
this.querySelectorAll('.nav-item').forEach(el => {
|
||||
const href = el.dataset.href;
|
||||
const active = href === '/' ? path === '/' : path.startsWith(href);
|
||||
el.classList.toggle('active', active);
|
||||
});
|
||||
}
|
||||
|
||||
#navItemHTML(item, currentPath) {
|
||||
const active = item.href === '/' ? currentPath === '/' : currentPath.startsWith(item.href);
|
||||
return `
|
||||
<a class="nav-item${active ? ' active' : ''}" data-href="${item.href}" href="#${item.href}" title="${item.label}">
|
||||
<i data-lucide="${item.icon}"></i>
|
||||
<span class="label">${item.label}</span>
|
||||
</a>`;
|
||||
}
|
||||
|
||||
#render() {
|
||||
const user = getUser();
|
||||
const path = decodeURIComponent(location.hash.slice(1)) || '/';
|
||||
const c = this.#collapsed;
|
||||
const appRoot = document.querySelector('app-root');
|
||||
if (appRoot) appRoot.classList.toggle('collapsed', c);
|
||||
|
||||
const initials = (user?.displayName || user?.username || 'U')
|
||||
.split(' ').map(w => w[0]).join('').slice(0, 2).toUpperCase();
|
||||
|
||||
this.innerHTML = `
|
||||
<style>
|
||||
app-sidebar { overflow: hidden; }
|
||||
.top { display: flex; align-items: center; justify-content: space-between; padding: 1rem; min-height: 56px; border-bottom: 1px solid rgba(255,255,255,.06); }
|
||||
.brand { display: flex; align-items: center; gap: .6rem; text-decoration: none; }
|
||||
.brand-icon { width: 28px; height: 28px; background: var(--teal); border-radius: 6px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
|
||||
.brand-icon svg { color: #fff; }
|
||||
.brand-name { font-size: .9rem; font-weight: 700; color: #fff; white-space: nowrap; overflow: hidden; transition: opacity .2s; }
|
||||
.collapsed .brand-name { opacity: 0; width: 0; }
|
||||
.toggle-btn { background: none; border: none; cursor: pointer; color: rgba(255,255,255,.5); padding: .3rem; border-radius: 4px; display: flex; flex-shrink: 0; transition: color .15s; }
|
||||
.toggle-btn:hover { color: #fff; }
|
||||
.nav { flex: 1; overflow-y: auto; padding: .5rem 0; }
|
||||
.section-label { padding: .5rem 1rem .25rem; font-size: .65rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: rgba(255,255,255,.3); white-space: nowrap; overflow: hidden; transition: opacity .2s; }
|
||||
.collapsed .section-label { opacity: 0; }
|
||||
.nav-item { display: flex; align-items: center; gap: .75rem; padding: .55rem 1rem; color: rgba(255,255,255,.7); text-decoration: none; font-size: .875rem; font-weight: 500; transition: background .15s, color .15s; cursor: pointer; border-left: 3px solid transparent; }
|
||||
.nav-item:hover { background: var(--sidebar-hover); color: #fff; text-decoration: none; }
|
||||
.nav-item.active { background: rgba(10,126,164,.2); color: #fff; border-left-color: var(--teal); }
|
||||
.nav-item i { width: 18px; height: 18px; flex-shrink: 0; }
|
||||
.nav-item .label { white-space: nowrap; overflow: hidden; transition: opacity .2s; }
|
||||
.collapsed .nav-item .label { opacity: 0; width: 0; }
|
||||
.collapsed .nav-item { justify-content: center; padding: .55rem; }
|
||||
.divider { height: 1px; background: rgba(255,255,255,.06); margin: .5rem 0; }
|
||||
.bottom { border-top: 1px solid rgba(255,255,255,.06); padding: .75rem 1rem; display: flex; align-items: center; gap: .6rem; }
|
||||
.avatar { width: 32px; height: 32px; border-radius: 50%; background: var(--teal); color: #fff; display: flex; align-items: center; justify-content: center; font-size: .75rem; font-weight: 700; flex-shrink: 0; }
|
||||
.user-info { flex: 1; overflow: hidden; transition: opacity .2s; }
|
||||
.collapsed .user-info { opacity: 0; width: 0; }
|
||||
.user-name { font-size: .813rem; font-weight: 600; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
|
||||
.user-role { font-size: .7rem; color: rgba(255,255,255,.45); white-space: nowrap; }
|
||||
.logout-btn { background: none; border: none; cursor: pointer; color: rgba(255,255,255,.4); padding: .3rem; border-radius: 4px; display: flex; flex-shrink: 0; transition: color .15s; }
|
||||
.logout-btn:hover { color: #fff; }
|
||||
.collapsed .logout-btn { display: none; }
|
||||
</style>
|
||||
|
||||
<div class="top ${c ? 'collapsed' : ''}">
|
||||
<a class="brand" href="#/">
|
||||
<div class="brand-icon"><i data-lucide="clipboard-list" style="width:16px;height:16px"></i></div>
|
||||
<span class="brand-name">Work Orders</span>
|
||||
</a>
|
||||
<button class="toggle-btn" id="toggle-btn" title="Toggle sidebar">
|
||||
<i data-lucide="${c ? 'chevrons-right' : 'chevrons-left'}" style="width:18px;height:18px"></i>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<nav class="nav ${c ? 'collapsed' : ''}">
|
||||
<div class="section-label">Main</div>
|
||||
${NAV.filter(n => n.section === 'main').map(n => this.#navItemHTML(n, path)).join('')}
|
||||
<div class="divider"></div>
|
||||
<div class="section-label">Resources</div>
|
||||
${NAV.filter(n => n.section === 'resources').map(n => this.#navItemHTML(n, path)).join('')}
|
||||
<div class="divider"></div>
|
||||
<div class="section-label">Operations</div>
|
||||
${NAV.filter(n => n.section === 'operations').map(n => this.#navItemHTML(n, path)).join('')}
|
||||
${user?.role === 'admin' ? `
|
||||
<div class="divider"></div>
|
||||
<div class="section-label">Admin</div>
|
||||
${ADMIN_NAV.map(n => this.#navItemHTML(n, path)).join('')}` : ''}
|
||||
</nav>
|
||||
|
||||
<div class="bottom ${c ? 'collapsed' : ''}">
|
||||
<div class="avatar">${initials}</div>
|
||||
<div class="user-info">
|
||||
<div class="user-name">${user?.displayName || user?.username || 'User'}</div>
|
||||
<div class="user-role">${user?.role || ''}</div>
|
||||
</div>
|
||||
<button class="logout-btn" id="logout-btn" title="Sign out">
|
||||
<i data-lucide="log-out" style="width:16px;height:16px"></i>
|
||||
</button>
|
||||
</div>`;
|
||||
|
||||
if (window.lucide) lucide.createIcons({ nodes: [this] });
|
||||
this.querySelector('#toggle-btn')?.addEventListener('click', () => this.#toggle());
|
||||
this.querySelector('#logout-btn')?.addEventListener('click', () => {
|
||||
clearToken();
|
||||
window.dispatchEvent(new CustomEvent('auth:logout'));
|
||||
});
|
||||
}
|
||||
}
|
||||
customElements.define('app-sidebar', AppSidebar);
|
||||
@@ -0,0 +1,104 @@
|
||||
import { getUser, clearToken } from '../../lib/auth.mjs';
|
||||
|
||||
const BREADCRUMBS = {
|
||||
'/': ['Dashboard'],
|
||||
'/work-orders': ['Work Orders'],
|
||||
'/work-orders/new': ['Work Orders', 'New'],
|
||||
'/registry/people': ['Resources', 'People'],
|
||||
'/registry/vehicles': ['Resources', 'Vehicles'],
|
||||
'/registry/equipment': ['Resources', 'Equipment'],
|
||||
'/registry/materials': ['Resources', 'Materials'],
|
||||
'/reports': ['Reports'],
|
||||
'/users': ['Admin', 'Users'],
|
||||
'/settings': ['Admin', 'Settings'],
|
||||
};
|
||||
|
||||
class AppTopbar extends HTMLElement {
|
||||
#menuOpen = false;
|
||||
|
||||
connectedCallback() {
|
||||
this.#render();
|
||||
window.addEventListener('hashchange', () => this.#render());
|
||||
document.addEventListener('click', e => {
|
||||
if (!this.contains(e.target) && this.#menuOpen) {
|
||||
this.#menuOpen = false;
|
||||
this.#render();
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
#render() {
|
||||
const user = getUser();
|
||||
const path = decodeURIComponent(location.hash.slice(1)) || '/';
|
||||
const crumb = BREADCRUMBS[path] || [path.split('/').filter(Boolean).map(s => s.replace(/-/g, ' ')).join(' › ')];
|
||||
const initials = (user?.displayName || user?.username || 'U')
|
||||
.split(' ').map(w => w[0]).join('').slice(0, 2).toUpperCase();
|
||||
|
||||
this.innerHTML = `
|
||||
<style>
|
||||
app-topbar { position: relative; }
|
||||
.breadcrumb { flex: 1; display: flex; align-items: center; gap: .4rem; font-size: .875rem; }
|
||||
.crumb { color: var(--text-muted); }
|
||||
.crumb:last-child { color: var(--text); font-weight: 600; }
|
||||
.sep { color: var(--border); }
|
||||
.right { display: flex; align-items: center; gap: .5rem; margin-left: auto; }
|
||||
.avatar-btn { background: none; border: none; cursor: pointer; display: flex; align-items: center; gap: .5rem; padding: .3rem .5rem; border-radius: var(--radius); transition: background .15s; }
|
||||
.avatar-btn:hover { background: var(--surface-2); }
|
||||
.avatar { width: 30px; height: 30px; border-radius: 50%; background: var(--teal); color: #fff; display: flex; align-items: center; justify-content: center; font-size: .75rem; font-weight: 700; flex-shrink: 0; }
|
||||
.user-name { font-size: .813rem; font-weight: 500; color: var(--text); }
|
||||
.dropdown { position: absolute; top: calc(100% + .25rem); right: 1.25rem; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-md); min-width: 180px; z-index: 100; overflow: hidden; }
|
||||
.dd-item { display: flex; align-items: center; gap: .6rem; padding: .65rem 1rem; font-size: .875rem; color: var(--text); cursor: pointer; border: none; background: none; width: 100%; text-align: left; transition: background .15s; }
|
||||
.dd-item:hover { background: var(--surface-2); }
|
||||
.dd-item.danger { color: var(--danger); }
|
||||
.dd-divider { height: 1px; background: var(--border); margin: .25rem 0; }
|
||||
.mobile-menu-btn { display: none; background: none; border: none; cursor: pointer; color: var(--text); padding: .4rem; }
|
||||
@media (max-width: 768px) { .mobile-menu-btn { display: flex; } .breadcrumb { font-size: .813rem; } }
|
||||
</style>
|
||||
|
||||
<button class="mobile-menu-btn" id="mobile-menu">
|
||||
<i data-lucide="menu" style="width:22px;height:22px"></i>
|
||||
</button>
|
||||
|
||||
<nav class="breadcrumb">
|
||||
${crumb.map((c, i) => `
|
||||
<span class="crumb">${c}</span>
|
||||
${i < crumb.length - 1 ? '<span class="sep">/</span>' : ''}
|
||||
`).join('')}
|
||||
</nav>
|
||||
|
||||
<div class="right">
|
||||
<button class="avatar-btn" id="user-menu-btn">
|
||||
<div class="avatar">${initials}</div>
|
||||
<span class="user-name">${user?.displayName || user?.username || ''}</span>
|
||||
<i data-lucide="chevron-down" style="width:14px;height:14px;color:var(--text-muted)"></i>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
${this.#menuOpen ? `
|
||||
<div class="dropdown" id="dropdown">
|
||||
<button class="dd-item">
|
||||
<i data-lucide="user" style="width:15px;height:15px"></i> My Profile
|
||||
</button>
|
||||
<div class="dd-divider"></div>
|
||||
<button class="dd-item danger" id="dd-logout">
|
||||
<i data-lucide="log-out" style="width:15px;height:15px"></i> Sign Out
|
||||
</button>
|
||||
</div>` : ''}`;
|
||||
|
||||
if (window.lucide) lucide.createIcons({ nodes: [this] });
|
||||
|
||||
this.querySelector('#user-menu-btn')?.addEventListener('click', e => {
|
||||
e.stopPropagation();
|
||||
this.#menuOpen = !this.#menuOpen;
|
||||
this.#render();
|
||||
});
|
||||
this.querySelector('#dd-logout')?.addEventListener('click', () => {
|
||||
clearToken();
|
||||
window.dispatchEvent(new CustomEvent('auth:logout'));
|
||||
});
|
||||
this.querySelector('#mobile-menu')?.addEventListener('click', () => {
|
||||
window.dispatchEvent(new CustomEvent('sidebar:toggle'));
|
||||
});
|
||||
}
|
||||
}
|
||||
customElements.define('app-topbar', AppTopbar);
|
||||
@@ -0,0 +1,52 @@
|
||||
const STATUS_LABELS = {
|
||||
draft: 'Draft', assigned: 'Assigned', scheduled: 'Scheduled',
|
||||
in_progress: 'In Progress', pending_review: 'Pending Review', closed: 'Closed',
|
||||
};
|
||||
const PRIORITY_LABELS = { low: 'Low', normal: 'Normal', high: 'High', urgent: 'Urgent' };
|
||||
|
||||
class UiBadge extends HTMLElement {
|
||||
connectedCallback() { this.#render(); }
|
||||
static get observedAttributes() { return ['type', 'value']; }
|
||||
attributeChangedCallback() { this.#render(); }
|
||||
|
||||
#render() {
|
||||
const type = this.getAttribute('type') || 'status';
|
||||
const value = this.getAttribute('value') || '';
|
||||
const label = type === 'priority'
|
||||
? (PRIORITY_LABELS[value] || value)
|
||||
: (STATUS_LABELS[value] || value.replace('_', ' '));
|
||||
|
||||
this.attachShadow({ mode: 'open' });
|
||||
this.shadowRoot.innerHTML = `
|
||||
<style>
|
||||
:host { display: inline-flex; }
|
||||
.badge {
|
||||
display: inline-flex; align-items: center; gap: .35rem;
|
||||
padding: .2rem .6rem; border-radius: 999px;
|
||||
font-size: .7rem; font-weight: 700; text-transform: uppercase;
|
||||
letter-spacing: .04em; white-space: nowrap;
|
||||
}
|
||||
.dot { width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; }
|
||||
|
||||
/* Status variants */
|
||||
.s-draft { background:var(--status-draft-bg); color:var(--status-draft); }
|
||||
.s-assigned { background:var(--status-assigned-bg); color:var(--status-assigned); }
|
||||
.s-scheduled { background:var(--status-scheduled-bg); color:var(--status-scheduled); }
|
||||
.s-in_progress { background:var(--status-in_progress-bg); color:var(--status-in_progress); }
|
||||
.s-pending_review { background:var(--status-pending_review-bg); color:var(--status-pending_review); }
|
||||
.s-closed { background:var(--status-closed-bg); color:var(--status-closed); }
|
||||
|
||||
/* Priority variants */
|
||||
.p-low { background:#F1F5F9; color:var(--priority-low); }
|
||||
.p-normal { background:#E0F2FE; color:var(--priority-normal); }
|
||||
.p-high { background:#FFF7ED; color:var(--priority-high); }
|
||||
.p-urgent { background:#FEF2F2; color:var(--priority-urgent); }
|
||||
</style>
|
||||
<span class="badge ${type === 'priority' ? 'p' : 's'}-${value}">
|
||||
<span class="dot" style="background:currentColor"></span>
|
||||
${label}
|
||||
</span>`;
|
||||
}
|
||||
}
|
||||
|
||||
customElements.define('ui-badge', UiBadge);
|
||||
@@ -0,0 +1,47 @@
|
||||
class UiButton extends HTMLElement {
|
||||
static get observedAttributes() { return ['variant', 'size', 'loading', 'disabled']; }
|
||||
connectedCallback() { this.#render(); }
|
||||
attributeChangedCallback() { this.#render(); }
|
||||
|
||||
#render() {
|
||||
const variant = this.getAttribute('variant') || 'primary';
|
||||
const size = this.getAttribute('size') || 'md';
|
||||
const loading = this.hasAttribute('loading');
|
||||
const disabled = this.hasAttribute('disabled') || loading;
|
||||
const pad = { sm: '.35rem .75rem', md: '.5rem 1rem', lg: '.65rem 1.25rem' }[size] || '.5rem 1rem';
|
||||
const fs = { sm: '.813rem', md: '.875rem', lg: '1rem' }[size] || '.875rem';
|
||||
|
||||
if (!this.shadowRoot) this.attachShadow({ mode: 'open' });
|
||||
this.shadowRoot.innerHTML = `
|
||||
<style>
|
||||
:host { display: inline-flex; }
|
||||
button {
|
||||
display: inline-flex; align-items: center; gap: .4rem;
|
||||
padding: ${pad}; border: none; border-radius: var(--radius);
|
||||
font-size: ${fs}; font-weight: 600; cursor: pointer;
|
||||
transition: opacity .15s, background .15s;
|
||||
white-space: nowrap;
|
||||
}
|
||||
button:disabled { opacity: .5; cursor: not-allowed; }
|
||||
.primary { background: var(--teal); color: #fff; }
|
||||
.primary:hover:not(:disabled) { background: var(--teal-dk); }
|
||||
.ghost { background: transparent; border: 1px solid var(--border); color: var(--text); }
|
||||
.ghost:hover:not(:disabled) { background: var(--surface-2); }
|
||||
.danger { background: var(--danger); color: #fff; }
|
||||
.danger:hover:not(:disabled) { opacity: .88; }
|
||||
.icon { background: transparent; border: none; color: var(--text-muted); padding: .4rem; border-radius: var(--radius-sm); }
|
||||
.icon:hover:not(:disabled) { background: var(--surface-2); color: var(--text); }
|
||||
.ring {
|
||||
width: 14px; height: 14px; border: 2px solid rgba(255,255,255,.4);
|
||||
border-top-color: #fff; border-radius: 50%;
|
||||
animation: spin .6s linear infinite; flex-shrink: 0;
|
||||
}
|
||||
@keyframes spin { to { transform: rotate(360deg); } }
|
||||
</style>
|
||||
<button class="${variant}" ${disabled ? 'disabled' : ''}>
|
||||
${loading ? '<div class="ring"></div>' : ''}
|
||||
<slot></slot>
|
||||
</button>`;
|
||||
}
|
||||
}
|
||||
customElements.define('ui-button', UiButton);
|
||||
@@ -0,0 +1,56 @@
|
||||
class UiDialog extends HTMLElement {
|
||||
connectedCallback() {
|
||||
this.attachShadow({ mode: 'open' });
|
||||
this.shadowRoot.innerHTML = `
|
||||
<style>
|
||||
:host { display: contents; }
|
||||
dialog {
|
||||
border: none; border-radius: var(--radius-lg); padding: 0;
|
||||
background: var(--surface); color: var(--text);
|
||||
box-shadow: var(--shadow-lg); max-height: 90vh; overflow: hidden;
|
||||
display: flex; flex-direction: column;
|
||||
}
|
||||
dialog[open] { display: flex; }
|
||||
dialog::backdrop { background: rgba(0,0,0,.45); backdrop-filter: blur(2px); }
|
||||
.size-sm { width: min(400px, 95vw); }
|
||||
.size-md { width: min(600px, 95vw); }
|
||||
.size-lg { width: min(860px, 95vw); }
|
||||
.header {
|
||||
display: flex; align-items: center; justify-content: space-between;
|
||||
padding: 1.1rem 1.25rem; border-bottom: 1px solid var(--border);
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.header h2 { font-size: 1rem; font-weight: 600; }
|
||||
.close-btn {
|
||||
background: none; border: none; cursor: pointer; color: var(--text-muted);
|
||||
padding: .25rem; border-radius: var(--radius-sm); display: flex;
|
||||
transition: color .15s;
|
||||
}
|
||||
.close-btn:hover { color: var(--text); }
|
||||
.body { padding: 1.25rem; overflow-y: auto; flex: 1; }
|
||||
@media (max-width: 768px) {
|
||||
dialog { width: 100vw !important; max-height: 85vh; border-radius: var(--radius-lg) var(--radius-lg) 0 0; }
|
||||
dialog[open] { position: fixed; bottom: 0; left: 0; margin: 0; }
|
||||
}
|
||||
</style>
|
||||
<dialog class="size-${this.getAttribute('size') || 'md'}">
|
||||
<div class="header">
|
||||
<h2>${this.getAttribute('title') || ''}</h2>
|
||||
<button class="close-btn" aria-label="Close">
|
||||
<i data-lucide="x" style="width:18px;height:18px"></i>
|
||||
</button>
|
||||
</div>
|
||||
<div class="body"><slot></slot></div>
|
||||
</dialog>`;
|
||||
|
||||
const dialog = this.shadowRoot.querySelector('dialog');
|
||||
this.shadowRoot.querySelector('.close-btn').addEventListener('click', () => this.close());
|
||||
dialog.addEventListener('click', e => { if (e.target === dialog) this.close(); });
|
||||
document.addEventListener('keydown', e => { if (e.key === 'Escape') this.close(); });
|
||||
if (window.lucide) lucide.createIcons({ nodes: [this.shadowRoot] });
|
||||
}
|
||||
|
||||
open() { this.shadowRoot?.querySelector('dialog')?.showModal(); }
|
||||
close() { this.shadowRoot?.querySelector('dialog')?.close(); this.dispatchEvent(new CustomEvent('ui:close', { bubbles: true, composed: true })); }
|
||||
}
|
||||
customElements.define('ui-dialog', UiDialog);
|
||||
@@ -0,0 +1,35 @@
|
||||
class UiEmpty extends HTMLElement {
|
||||
connectedCallback() {
|
||||
const icon = this.getAttribute('icon') || 'inbox';
|
||||
const heading = this.getAttribute('heading') || 'Nothing here yet';
|
||||
const body = this.getAttribute('body') || '';
|
||||
|
||||
this.attachShadow({ mode: 'open' });
|
||||
this.shadowRoot.innerHTML = `
|
||||
<style>
|
||||
:host { display: flex; justify-content: center; }
|
||||
.wrap {
|
||||
display: flex; flex-direction: column; align-items: center;
|
||||
gap: .75rem; padding: 3rem 2rem; text-align: center; max-width: 360px;
|
||||
}
|
||||
.icon-wrap {
|
||||
width: 64px; height: 64px; border-radius: 50%;
|
||||
background: var(--surface-2); display: flex; align-items: center;
|
||||
justify-content: center; color: var(--text-muted);
|
||||
}
|
||||
h3 { font-size: 1rem; font-weight: 600; color: var(--text); }
|
||||
p { font-size: .875rem; color: var(--text-muted); line-height: 1.6; }
|
||||
::slotted(*) { margin-top: .5rem; }
|
||||
</style>
|
||||
<div class="wrap">
|
||||
<div class="icon-wrap">
|
||||
<i data-lucide="${icon}" style="width:28px;height:28px"></i>
|
||||
</div>
|
||||
<h3>${heading}</h3>
|
||||
${body ? `<p>${body}</p>` : ''}
|
||||
<slot></slot>
|
||||
</div>`;
|
||||
if (window.lucide) lucide.createIcons({ nodes: [this.shadowRoot] });
|
||||
}
|
||||
}
|
||||
customElements.define('ui-empty', UiEmpty);
|
||||
@@ -0,0 +1,21 @@
|
||||
class UiSpinner extends HTMLElement {
|
||||
connectedCallback() {
|
||||
const size = this.getAttribute('size') || 'md';
|
||||
const px = { sm: '16px', md: '24px', lg: '40px' }[size] || '24px';
|
||||
this.attachShadow({ mode: 'open' });
|
||||
this.shadowRoot.innerHTML = `
|
||||
<style>
|
||||
:host { display: inline-flex; align-items: center; justify-content: center; }
|
||||
.ring {
|
||||
width: ${px}; height: ${px};
|
||||
border: 2px solid var(--border);
|
||||
border-top-color: var(--teal);
|
||||
border-radius: 50%;
|
||||
animation: spin .6s linear infinite;
|
||||
}
|
||||
@keyframes spin { to { transform: rotate(360deg); } }
|
||||
</style>
|
||||
<div class="ring"></div>`;
|
||||
}
|
||||
}
|
||||
customElements.define('ui-spinner', UiSpinner);
|
||||
@@ -0,0 +1,51 @@
|
||||
class UiToastContainer extends HTMLElement {
|
||||
connectedCallback() {
|
||||
Object.assign(this.style, {
|
||||
position: 'fixed', top: '1rem', right: '1rem', zIndex: '9999',
|
||||
display: 'flex', flexDirection: 'column', gap: '.5rem',
|
||||
maxWidth: '380px', pointerEvents: 'none',
|
||||
});
|
||||
}
|
||||
|
||||
show(message, type = 'info') {
|
||||
const colors = { success: 'var(--success)', error: 'var(--danger)', info: 'var(--teal)', warning: 'var(--warning)' };
|
||||
const icons = { success: 'check-circle', error: 'x-circle', info: 'info', warning: 'alert-triangle' };
|
||||
const toast = document.createElement('div');
|
||||
Object.assign(toast.style, {
|
||||
display: 'flex', alignItems: 'center', gap: '.6rem',
|
||||
padding: '.75rem 1rem', borderRadius: '8px', color: '#fff',
|
||||
fontSize: '.875rem', fontFamily: 'inherit',
|
||||
boxShadow: '0 4px 12px rgba(0,0,0,.25)',
|
||||
background: colors[type] || colors.info,
|
||||
animation: 'toastIn .2s ease', pointerEvents: 'auto',
|
||||
minWidth: '260px',
|
||||
});
|
||||
toast.innerHTML = `<i data-lucide="${icons[type] || 'info'}" style="width:16px;height:16px;flex-shrink:0"></i><span>${message}</span>`;
|
||||
this.appendChild(toast);
|
||||
if (window.lucide) lucide.createIcons({ nodes: [toast] });
|
||||
|
||||
const style = document.createElement('style');
|
||||
style.textContent = `@keyframes toastIn{from{opacity:0;transform:translateX(1rem)}to{opacity:1;transform:none}}`;
|
||||
if (!document.getElementById('toast-keyframes')) {
|
||||
style.id = 'toast-keyframes';
|
||||
document.head.appendChild(style);
|
||||
}
|
||||
|
||||
setTimeout(() => {
|
||||
toast.style.opacity = '0';
|
||||
toast.style.transition = 'opacity .3s';
|
||||
setTimeout(() => toast.remove(), 300);
|
||||
}, 4000);
|
||||
}
|
||||
}
|
||||
customElements.define('ui-toast-container', UiToastContainer);
|
||||
|
||||
let _container = null;
|
||||
|
||||
export function showToast(message, type = 'info') {
|
||||
if (!_container) {
|
||||
_container = document.createElement('ui-toast-container');
|
||||
document.body.appendChild(_container);
|
||||
}
|
||||
_container.show(message, type);
|
||||
}
|
||||
@@ -0,0 +1,250 @@
|
||||
import { api } from '../../lib/api.mjs';
|
||||
import { formatDateTime, formatDate } from '../../lib/format.mjs';
|
||||
|
||||
const TABS = ['Overview', 'Checklist', 'Resources', 'Photos', 'Accounting', 'Activity'];
|
||||
const STATUS_TRANSITIONS = {
|
||||
draft: ['assigned','scheduled'],
|
||||
assigned: ['scheduled','in_progress'],
|
||||
scheduled: ['in_progress'],
|
||||
in_progress: ['pending_review','closed'],
|
||||
pending_review: ['in_progress','closed'],
|
||||
closed: [],
|
||||
};
|
||||
|
||||
class WoDetail extends HTMLElement {
|
||||
#woId = null;
|
||||
#wo = null;
|
||||
#tab = 'Overview';
|
||||
#loading = true;
|
||||
|
||||
static get observedAttributes() { return ['wo-id']; }
|
||||
attributeChangedCallback(_, __, val) { this.#woId = val ? +val : null; if (this.shadowRoot) this.#load(); }
|
||||
|
||||
connectedCallback() {
|
||||
this.attachShadow({ mode: 'open' });
|
||||
if (this.#woId) this.#load();
|
||||
}
|
||||
|
||||
async #load() {
|
||||
this.#loading = true;
|
||||
this.#render();
|
||||
try { this.#wo = await api.get(`/work-orders/${this.#woId}`); } catch { this.#wo = null; }
|
||||
this.#loading = false;
|
||||
this.#render();
|
||||
}
|
||||
|
||||
#render() {
|
||||
const s = this.shadowRoot;
|
||||
s.innerHTML = `<style>${this.#css()}</style>${this.#html()}`;
|
||||
this.#bind();
|
||||
if (window.lucide) lucide.createIcons({ nodes: [s] });
|
||||
}
|
||||
|
||||
#css() { return `
|
||||
:host { display: block; }
|
||||
.page-header { display:flex; align-items:center; gap:1rem; margin-bottom:1.25rem; flex-wrap:wrap; }
|
||||
.back-btn { background:none; border:1px solid var(--border); color:var(--text); border-radius:var(--radius); padding:.4rem .75rem; font-size:.813rem; font-weight:500; cursor:pointer; display:flex; align-items:center; gap:.3rem; transition:background .15s; flex-shrink:0; }
|
||||
.back-btn:hover { background:var(--surface-2); }
|
||||
.header-info { flex:1; min-width:0; }
|
||||
.wo-number { font-family:monospace; font-size:.813rem; color:var(--text-muted); margin-bottom:.15rem; }
|
||||
h1 { font-size:1.2rem; font-weight:700; color:var(--text); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
|
||||
.header-badges { display:flex; align-items:center; gap:.5rem; margin-top:.35rem; flex-wrap:wrap; }
|
||||
.header-actions { display:flex; gap:.5rem; flex-shrink:0; }
|
||||
.btn { display:inline-flex; align-items:center; gap:.35rem; padding:.45rem .9rem; border:none; border-radius:var(--radius); font-size:.813rem; font-weight:600; cursor:pointer; transition:opacity .15s,background .15s; white-space:nowrap; }
|
||||
.btn-primary { background:var(--teal); color:#fff; }
|
||||
.btn-primary:hover { opacity:.88; }
|
||||
.btn-ghost { background:transparent; border:1px solid var(--border); color:var(--text); }
|
||||
.btn-ghost:hover { background:var(--surface-2); }
|
||||
.meta-strip { background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:.9rem 1.25rem; margin-bottom:1rem; display:flex; gap:2rem; flex-wrap:wrap; box-shadow:var(--shadow-sm); }
|
||||
.meta-item { display:flex; flex-direction:column; gap:.15rem; }
|
||||
.meta-label { font-size:.7rem; font-weight:700; color:var(--text-muted); text-transform:uppercase; letter-spacing:.06em; }
|
||||
.meta-value { font-size:.875rem; color:var(--text); font-weight:500; }
|
||||
.tab-bar { display:flex; gap:0; border-bottom:2px solid var(--border); margin-bottom:1rem; overflow-x:auto; }
|
||||
.tab { padding:.65rem 1rem; font-size:.875rem; font-weight:500; color:var(--text-muted); border:none; background:none; cursor:pointer; border-bottom:2px solid transparent; margin-bottom:-2px; white-space:nowrap; transition:color .15s,border-color .15s; }
|
||||
.tab.active { color:var(--teal); border-bottom-color:var(--teal); font-weight:600; }
|
||||
.tab:hover:not(.active) { color:var(--text); }
|
||||
.tab-content { background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:1.25rem; box-shadow:var(--shadow-sm); }
|
||||
.detail-grid { display:grid; grid-template-columns:1fr 1fr; gap:1.25rem; }
|
||||
.detail-field { display:flex; flex-direction:column; gap:.25rem; }
|
||||
.field-label { font-size:.7rem; font-weight:700; color:var(--text-muted); text-transform:uppercase; letter-spacing:.06em; }
|
||||
.field-value { font-size:.875rem; color:var(--text); line-height:1.5; }
|
||||
.field-value.empty { color:var(--text-muted); font-style:italic; }
|
||||
.text-block { background:var(--surface-2); border-radius:var(--radius-sm); padding:.75rem 1rem; font-size:.875rem; line-height:1.6; color:var(--text); white-space:pre-wrap; }
|
||||
.phase-badge { display:inline-flex; align-items:center; gap:.3rem; padding:.2rem .6rem; border-radius:999px; font-size:.7rem; font-weight:700; background:var(--surface-2); color:var(--text-muted); }
|
||||
.status-menu { position:relative; }
|
||||
.status-dropdown { position:absolute; top:calc(100% + .25rem); right:0; background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); box-shadow:var(--shadow-md); z-index:50; min-width:160px; overflow:hidden; }
|
||||
.status-opt { display:flex; align-items:center; gap:.5rem; padding:.6rem 1rem; font-size:.875rem; cursor:pointer; border:none; background:none; width:100%; text-align:left; transition:background .15s; color:var(--text); }
|
||||
.status-opt:hover { background:var(--surface-2); }
|
||||
.status-dot { width:8px; height:8px; border-radius:50%; flex-shrink:0; }
|
||||
.placeholder { text-align:center; padding:3rem; color:var(--text-muted); }
|
||||
.placeholder i { margin-bottom:.75rem; }
|
||||
@media (max-width:768px) { .detail-grid { grid-template-columns:1fr; } .meta-strip { gap:1rem; } }
|
||||
`; }
|
||||
|
||||
#html() {
|
||||
if (this.#loading) return `
|
||||
<div style="display:flex;align-items:center;justify-content:center;padding:4rem">
|
||||
<ui-spinner size="lg"></ui-spinner>
|
||||
</div>`;
|
||||
|
||||
if (!this.#wo) return `
|
||||
<ui-empty icon="alert-circle" heading="Work order not found" body="This work order may have been deleted.">
|
||||
<button class="btn btn-ghost" id="back" style="margin-top:.5rem">
|
||||
<i data-lucide="arrow-left" style="width:14px;height:14px"></i> Back to list
|
||||
</button>
|
||||
</ui-empty>`;
|
||||
|
||||
const wo = this.#wo;
|
||||
const transitions = STATUS_TRANSITIONS[wo.status] || [];
|
||||
const STATUS_COLORS = { draft:'var(--status-draft)', assigned:'var(--status-assigned)', scheduled:'var(--status-scheduled)', in_progress:'var(--status-in_progress)', pending_review:'var(--status-pending_review)', closed:'var(--status-closed)' };
|
||||
|
||||
return `
|
||||
<div class="page-header">
|
||||
<button class="back-btn" id="back"><i data-lucide="chevron-left" style="width:15px;height:15px"></i> Work Orders</button>
|
||||
<div class="header-info">
|
||||
<div class="wo-number">${wo.wo_number}</div>
|
||||
<h1>${this.#esc(wo.title)}</h1>
|
||||
<div class="header-badges">
|
||||
<ui-badge type="status" value="${wo.status}"></ui-badge>
|
||||
<ui-badge type="priority" value="${wo.priority}"></ui-badge>
|
||||
</div>
|
||||
</div>
|
||||
<div class="header-actions">
|
||||
<button class="btn btn-ghost" id="edit-btn">
|
||||
<i data-lucide="pencil" style="width:14px;height:14px"></i> Edit
|
||||
</button>
|
||||
${transitions.length ? `
|
||||
<div class="status-menu" id="status-menu">
|
||||
<button class="btn btn-primary" id="status-btn">
|
||||
<i data-lucide="refresh-cw" style="width:14px;height:14px"></i> Change Status
|
||||
</button>
|
||||
<div class="status-dropdown" id="status-dropdown" style="display:none">
|
||||
${transitions.map(s => `
|
||||
<button class="status-opt" data-status="${s}">
|
||||
<span class="status-dot" style="background:${STATUS_COLORS[s]}"></span>
|
||||
${s.replace('_',' ')}
|
||||
</button>`).join('')}
|
||||
</div>
|
||||
</div>` : ''}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="meta-strip">
|
||||
<div class="meta-item">
|
||||
<span class="meta-label">Site</span>
|
||||
<span class="meta-value">${this.#esc(wo.site_name) || '—'}</span>
|
||||
</div>
|
||||
<div class="meta-item">
|
||||
<span class="meta-label">Scheduled Start</span>
|
||||
<span class="meta-value">${formatDateTime(wo.scheduled_start)}</span>
|
||||
</div>
|
||||
<div class="meta-item">
|
||||
<span class="meta-label">Scheduled End</span>
|
||||
<span class="meta-value">${formatDateTime(wo.scheduled_end)}</span>
|
||||
</div>
|
||||
<div class="meta-item">
|
||||
<span class="meta-label">Created By</span>
|
||||
<span class="meta-value">${this.#esc(wo.created_by) || '—'}</span>
|
||||
</div>
|
||||
<div class="meta-item">
|
||||
<span class="meta-label">Created</span>
|
||||
<span class="meta-value">${formatDate(wo.created_at)}</span>
|
||||
</div>
|
||||
${wo.parent_type ? `<div class="meta-item">
|
||||
<span class="meta-label">Parent</span>
|
||||
<span class="meta-value">${wo.parent_type} #${wo.parent_id}</span>
|
||||
</div>` : ''}
|
||||
</div>
|
||||
|
||||
<div class="tab-bar">
|
||||
${TABS.map(t => `<button class="tab${this.#tab===t?' active':''}" data-tab="${t}">${t}</button>`).join('')}
|
||||
</div>
|
||||
|
||||
<div class="tab-content" id="tab-content">
|
||||
${this.#tabContent(wo)}
|
||||
</div>`;
|
||||
}
|
||||
|
||||
#tabContent(wo) {
|
||||
switch (this.#tab) {
|
||||
case 'Overview': return `
|
||||
<div class="detail-grid">
|
||||
<div class="detail-field" style="grid-column:1/-1">
|
||||
<div class="field-label">Description</div>
|
||||
${wo.description
|
||||
? `<div class="text-block">${this.#esc(wo.description)}</div>`
|
||||
: '<div class="field-value empty">No description provided</div>'}
|
||||
</div>
|
||||
<div class="detail-field" style="grid-column:1/-1">
|
||||
<div class="field-label">Instructions</div>
|
||||
${wo.instructions
|
||||
? `<div class="text-block">${this.#esc(wo.instructions)}</div>`
|
||||
: '<div class="field-value empty">No instructions provided</div>'}
|
||||
</div>
|
||||
<div class="detail-field">
|
||||
<div class="field-label">Address</div>
|
||||
<div class="field-value${wo.address?'':' empty'}">${this.#esc(wo.address) || 'Not set'}</div>
|
||||
</div>
|
||||
<div class="detail-field">
|
||||
<div class="field-label">Access Notes</div>
|
||||
${wo.access_notes
|
||||
? `<div class="text-block" style="font-size:.813rem">${this.#esc(wo.access_notes)}</div>`
|
||||
: '<div class="field-value empty">No access notes</div>'}
|
||||
</div>
|
||||
</div>`;
|
||||
case 'Checklist':
|
||||
case 'Resources':
|
||||
case 'Photos':
|
||||
case 'Accounting':
|
||||
case 'Activity':
|
||||
return `<div class="placeholder">
|
||||
<i data-lucide="construction" style="width:40px;height:40px;margin:0 auto .75rem;color:var(--text-muted)"></i>
|
||||
<p style="font-weight:600;margin-bottom:.35rem">${this.#tab} — Coming in Phase 2</p>
|
||||
<p style="font-size:.875rem">This section will be available in the next phase of development.</p>
|
||||
</div>`;
|
||||
default: return '';
|
||||
}
|
||||
}
|
||||
|
||||
#bind() {
|
||||
const s = this.shadowRoot;
|
||||
s.querySelector('#back')?.addEventListener('click', () =>
|
||||
window.dispatchEvent(new CustomEvent('wo:navigate', { detail: { path: '/work-orders' } })));
|
||||
|
||||
s.querySelector('#edit-btn')?.addEventListener('click', () =>
|
||||
window.dispatchEvent(new CustomEvent('wo:navigate', { detail: { path: `/work-orders/${this.#woId}/edit` } })));
|
||||
|
||||
// Tab switching
|
||||
s.querySelectorAll('.tab').forEach(tab =>
|
||||
tab.addEventListener('click', () => {
|
||||
this.#tab = tab.dataset.tab;
|
||||
s.querySelectorAll('.tab').forEach(t => t.classList.toggle('active', t.dataset.tab === this.#tab));
|
||||
s.querySelector('#tab-content').innerHTML = this.#tabContent(this.#wo);
|
||||
if (window.lucide) lucide.createIcons({ nodes: [s.querySelector('#tab-content')] });
|
||||
}));
|
||||
|
||||
// Status dropdown
|
||||
const statusBtn = s.querySelector('#status-btn');
|
||||
const dropdown = s.querySelector('#status-dropdown');
|
||||
statusBtn?.addEventListener('click', e => {
|
||||
e.stopPropagation();
|
||||
dropdown.style.display = dropdown.style.display === 'none' ? 'block' : 'none';
|
||||
});
|
||||
document.addEventListener('click', () => { if (dropdown) dropdown.style.display = 'none'; }, { once: false });
|
||||
|
||||
s.querySelectorAll('.status-opt').forEach(opt =>
|
||||
opt.addEventListener('click', async () => {
|
||||
dropdown.style.display = 'none';
|
||||
try {
|
||||
await api.put(`/work-orders/${this.#woId}/status`, { status: opt.dataset.status });
|
||||
window.dispatchEvent(new CustomEvent('wo:toast', { detail: { message: `Status changed to ${opt.dataset.status.replace('_',' ')}`, type: 'success' } }));
|
||||
this.#load();
|
||||
} catch (err) {
|
||||
window.dispatchEvent(new CustomEvent('wo:toast', { detail: { message: err.message, type: 'error' } }));
|
||||
}
|
||||
}));
|
||||
}
|
||||
|
||||
#esc(s) { return (s || '').replace(/&/g,'&').replace(/</g,'<').replace(/>/g,'>'); }
|
||||
}
|
||||
customElements.define('wo-detail', WoDetail);
|
||||
@@ -0,0 +1,221 @@
|
||||
import { api } from '../../lib/api.mjs';
|
||||
import { toLocalDatetime } from '../../lib/format.mjs';
|
||||
|
||||
const STATUSES = ['draft','assigned','scheduled','in_progress','pending_review','closed'];
|
||||
const PRI_COLOR = { low:'var(--priority-low)', normal:'var(--priority-normal)', high:'var(--priority-high)', urgent:'var(--priority-urgent)' };
|
||||
|
||||
class WoForm extends HTMLElement {
|
||||
#woId = null;
|
||||
#wo = null;
|
||||
#dirty = false;
|
||||
|
||||
static get observedAttributes() { return ['wo-id']; }
|
||||
attributeChangedCallback(_, __, val) { this.#woId = val ? +val : null; if (this.shadowRoot) this.#load(); }
|
||||
|
||||
connectedCallback() {
|
||||
this.attachShadow({ mode: 'open' });
|
||||
this.#render();
|
||||
if (this.#woId) this.#load();
|
||||
}
|
||||
|
||||
async #load() {
|
||||
if (!this.#woId) return;
|
||||
try { this.#wo = await api.get(`/work-orders/${this.#woId}`); } catch { /* ignore */ }
|
||||
this.#render();
|
||||
}
|
||||
|
||||
#render() {
|
||||
const wo = this.#wo || {};
|
||||
const isNew = !this.#woId;
|
||||
const s = this.shadowRoot;
|
||||
s.innerHTML = `<style>${this.#css()}</style>${this.#html(wo, isNew)}`;
|
||||
this.#bind();
|
||||
if (window.lucide) lucide.createIcons({ nodes: [s] });
|
||||
}
|
||||
|
||||
#css() { return `
|
||||
:host { display: block; }
|
||||
.page-header { display:flex; align-items:center; gap:1rem; margin-bottom:1.25rem; }
|
||||
.back-btn { background:none; border:1px solid var(--border); color:var(--text); border-radius:var(--radius); padding:.4rem .75rem; font-size:.813rem; font-weight:500; cursor:pointer; display:flex; align-items:center; gap:.3rem; transition:background .15s; }
|
||||
.back-btn:hover { background:var(--surface-2); }
|
||||
h1 { font-size:1.25rem; font-weight:700; color:var(--text); }
|
||||
.layout { display:grid; grid-template-columns:2fr 1fr; gap:1.5rem; align-items:start; }
|
||||
.card { background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:1.25rem; display:flex; flex-direction:column; gap:1rem; box-shadow:var(--shadow-sm); }
|
||||
.card-title { font-size:.813rem; font-weight:700; color:var(--text-muted); text-transform:uppercase; letter-spacing:.06em; padding-bottom:.75rem; border-bottom:1px solid var(--border); }
|
||||
label { display:flex; flex-direction:column; gap:.3rem; font-size:.813rem; font-weight:600; color:var(--text); }
|
||||
input, select, textarea { border:1px solid var(--border); border-radius:var(--radius-sm); padding:.5rem .75rem; background:var(--surface); color:var(--text); font-size:.875rem; width:100%; transition:border-color .15s,box-shadow .15s; color-scheme:inherit; }
|
||||
input:focus, select:focus, textarea:focus { outline:none; border-color:var(--teal); box-shadow:0 0 0 3px rgba(10,126,164,.15); }
|
||||
textarea { resize:vertical; min-height:80px; line-height:1.6; font-family:inherit; }
|
||||
.row2 { display:grid; grid-template-columns:1fr 1fr; gap:1rem; }
|
||||
select { appearance:none; cursor:pointer; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2364748B' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right .6rem center; padding-right:2rem; }
|
||||
.priority-select-wrap { position:relative; }
|
||||
.pri-dot { width:8px; height:8px; border-radius:50%; position:absolute; left:.75rem; top:50%; transform:translateY(-50%); pointer-events:none; }
|
||||
.priority-select { padding-left:1.75rem; }
|
||||
.footer { display:flex; justify-content:flex-end; gap:.75rem; margin-top:.5rem; }
|
||||
.btn { display:inline-flex; align-items:center; gap:.4rem; padding:.5rem 1rem; border:none; border-radius:var(--radius); font-size:.875rem; font-weight:600; cursor:pointer; transition:opacity .15s; }
|
||||
.btn-primary { background:var(--teal); color:#fff; }
|
||||
.btn-primary:hover { opacity:.88; }
|
||||
.btn-ghost { background:transparent; border:1px solid var(--border); color:var(--text); }
|
||||
.btn-ghost:hover { background:var(--surface-2); }
|
||||
.btn:disabled { opacity:.5; cursor:not-allowed; }
|
||||
.err { color:var(--danger); font-size:.813rem; text-align:right; }
|
||||
@media (max-width:768px) { .layout { grid-template-columns:1fr; } .row2 { grid-template-columns:1fr; } }
|
||||
`; }
|
||||
|
||||
#html(wo, isNew) {
|
||||
const v = (field, fallback = '') => this.#esc(wo[field] ?? fallback);
|
||||
return `
|
||||
<div class="page-header">
|
||||
<button class="back-btn" id="back"><i data-lucide="chevron-left" style="width:15px;height:15px"></i> Back</button>
|
||||
<h1>${isNew ? 'New Work Order' : `Edit ${wo.wo_number || 'Work Order'}`}</h1>
|
||||
</div>
|
||||
<form id="wo-form">
|
||||
<div class="layout">
|
||||
<!-- Left: main fields -->
|
||||
<div style="display:flex;flex-direction:column;gap:1rem;">
|
||||
<div class="card">
|
||||
<div class="card-title">Details</div>
|
||||
<label>Title *<input name="title" required value="${v('title')}" placeholder="Brief description of the work"></label>
|
||||
<label>Description<textarea name="description" rows="3" placeholder="What needs to be done…">${v('description')}</textarea></label>
|
||||
<label>Instructions<textarea name="instructions" rows="5" placeholder="Step-by-step instructions for the field crew…">${v('instructions')}</textarea></label>
|
||||
</div>
|
||||
<div class="card">
|
||||
<div class="card-title">Location</div>
|
||||
<label>Site Name<input name="site_name" value="${v('site_name')}" placeholder="e.g. Downtown Office"></label>
|
||||
<label>Address<input name="address" value="${v('address')}" placeholder="Street address"></label>
|
||||
<label>Access Notes<textarea name="access_notes" rows="2" placeholder="Gate codes, road conditions, parking info…">${v('access_notes')}</textarea></label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Right: metadata -->
|
||||
<div style="display:flex;flex-direction:column;gap:1rem;">
|
||||
<div class="card">
|
||||
<div class="card-title">Status & Priority</div>
|
||||
${!isNew ? `<label>Status
|
||||
<select name="status">
|
||||
${STATUSES.map(s => `<option value="${s}" ${wo.status===s?'selected':''}>${s.replace('_',' ')}</option>`).join('')}
|
||||
</select>
|
||||
</label>` : ''}
|
||||
<label>Priority
|
||||
<div class="priority-select-wrap">
|
||||
<span class="pri-dot" id="pri-dot" style="background:${PRI_COLOR[wo.priority||'normal']}"></span>
|
||||
<select name="priority" class="priority-select">
|
||||
${['low','normal','high','urgent'].map(p =>
|
||||
`<option value="${p}" ${(wo.priority||'normal')===p?'selected':''}>${p.charAt(0).toUpperCase()+p.slice(1)}</option>`
|
||||
).join('')}
|
||||
</select>
|
||||
</div>
|
||||
</label>
|
||||
</div>
|
||||
<div class="card">
|
||||
<div class="card-title">Schedule</div>
|
||||
<label>Scheduled Start<input type="datetime-local" name="scheduled_start" value="${toLocalDatetime(wo.scheduled_start)}"></label>
|
||||
<label>Scheduled End<input type="datetime-local" name="scheduled_end" value="${toLocalDatetime(wo.scheduled_end)}"></label>
|
||||
</div>
|
||||
<div class="card">
|
||||
<div class="card-title">Parent</div>
|
||||
<label>Parent Type
|
||||
<select name="parent_type">
|
||||
<option value="">None</option>
|
||||
<option value="project" ${wo.parent_type==='project'?'selected':''}>Project</option>
|
||||
<option value="ticket" ${wo.parent_type==='ticket'?'selected':''}>Trouble Ticket</option>
|
||||
<option value="service_order" ${wo.parent_type==='service_order'?'selected':''}>Service Order</option>
|
||||
</select>
|
||||
</label>
|
||||
<label>Parent ID<input name="parent_id" type="number" value="${wo.parent_id ?? ''}" placeholder="Reference ID"></label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="footer">
|
||||
<div class="err" id="form-err"></div>
|
||||
<button type="button" class="btn btn-ghost" id="cancel-btn">Cancel</button>
|
||||
<button type="submit" class="btn btn-primary" id="save-btn">
|
||||
<i data-lucide="save" style="width:14px;height:14px"></i>
|
||||
${isNew ? 'Create Work Order' : 'Save Changes'}
|
||||
</button>
|
||||
</div>
|
||||
</form>`;
|
||||
}
|
||||
|
||||
#bind() {
|
||||
const s = this.shadowRoot;
|
||||
|
||||
s.querySelector('#back')?.addEventListener('click', () => this.#goBack());
|
||||
s.querySelector('#cancel-btn')?.addEventListener('click', () => this.#goBack());
|
||||
|
||||
// Update priority dot colour on change
|
||||
s.querySelector('[name="priority"]')?.addEventListener('change', e => {
|
||||
const dot = s.querySelector('#pri-dot');
|
||||
if (dot) dot.style.background = PRI_COLOR[e.target.value] || PRI_COLOR.normal;
|
||||
});
|
||||
|
||||
// Dirty tracking
|
||||
s.querySelectorAll('input, select, textarea').forEach(el =>
|
||||
el.addEventListener('input', () => { this.#dirty = true; }));
|
||||
|
||||
s.querySelector('#wo-form')?.addEventListener('submit', async e => {
|
||||
e.preventDefault();
|
||||
const val = n => (s.querySelector(`[name="${n}"]`)?.value ?? '').trim();
|
||||
const dt = n => { const v = val(n); return v ? new Date(v).toISOString() : null; };
|
||||
|
||||
if (!val('title')) {
|
||||
s.querySelector('#form-err').textContent = 'Title is required.';
|
||||
return;
|
||||
}
|
||||
|
||||
const body = {
|
||||
title: val('title'),
|
||||
description: val('description'),
|
||||
instructions: val('instructions'),
|
||||
priority: val('priority') || 'normal',
|
||||
site_name: val('site_name'),
|
||||
address: val('address'),
|
||||
access_notes: val('access_notes'),
|
||||
scheduled_start: dt('scheduled_start'),
|
||||
scheduled_end: dt('scheduled_end'),
|
||||
parent_type: val('parent_type') || null,
|
||||
parent_id: val('parent_id') ? +val('parent_id') : null,
|
||||
};
|
||||
|
||||
const btn = s.querySelector('#save-btn');
|
||||
btn.disabled = true;
|
||||
s.querySelector('#form-err').textContent = '';
|
||||
|
||||
try {
|
||||
if (this.#woId) {
|
||||
// Also update status if changed
|
||||
const newStatus = val('status');
|
||||
if (newStatus && this.#wo?.status !== newStatus) {
|
||||
await api.put(`/work-orders/${this.#woId}/status`, { status: newStatus });
|
||||
}
|
||||
await api.put(`/work-orders/${this.#woId}`, body);
|
||||
window.dispatchEvent(new CustomEvent('wo:toast', { detail: { message: 'Work order saved', type: 'success' } }));
|
||||
} else {
|
||||
const created = await api.post('/work-orders', body);
|
||||
window.dispatchEvent(new CustomEvent('wo:toast', { detail: { message: 'Work order created', type: 'success' } }));
|
||||
this.#dirty = false;
|
||||
window.dispatchEvent(new CustomEvent('wo:navigate', { detail: { path: `/work-orders/${created.id}` } }));
|
||||
return;
|
||||
}
|
||||
this.#dirty = false;
|
||||
window.dispatchEvent(new CustomEvent('wo:navigate', { detail: { path: `/work-orders/${this.#woId}` } }));
|
||||
} catch (err) {
|
||||
s.querySelector('#form-err').textContent = err.message;
|
||||
btn.disabled = false;
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
#goBack() {
|
||||
if (this.#dirty && !confirm('You have unsaved changes. Leave anyway?')) return;
|
||||
if (this.#woId) {
|
||||
window.dispatchEvent(new CustomEvent('wo:navigate', { detail: { path: `/work-orders/${this.#woId}` } }));
|
||||
} else {
|
||||
window.dispatchEvent(new CustomEvent('wo:navigate', { detail: { path: '/work-orders' } }));
|
||||
}
|
||||
}
|
||||
|
||||
#esc(s) { return (s || '').replace(/&/g,'&').replace(/</g,'<').replace(/>/g,'>').replace(/"/g,'"'); }
|
||||
}
|
||||
customElements.define('wo-form', WoForm);
|
||||
@@ -0,0 +1,127 @@
|
||||
import { api } from '../../lib/api.mjs';
|
||||
|
||||
const COLUMNS = [
|
||||
{ key: 'draft', label: 'Draft', color: 'var(--status-draft)' },
|
||||
{ key: 'assigned', label: 'Assigned', color: 'var(--status-assigned)' },
|
||||
{ key: 'scheduled', label: 'Scheduled', color: 'var(--status-scheduled)' },
|
||||
{ key: 'in_progress', label: 'In Progress', color: 'var(--status-in_progress)' },
|
||||
{ key: 'pending_review', label: 'Pending Review', color: 'var(--status-pending_review)' },
|
||||
{ key: 'closed', label: 'Closed', color: 'var(--status-closed)' },
|
||||
];
|
||||
|
||||
const PRI_COLOR = { low:'var(--priority-low)', normal:'var(--priority-normal)', high:'var(--priority-high)', urgent:'var(--priority-urgent)' };
|
||||
|
||||
class WoKanban extends HTMLElement {
|
||||
#data = [];
|
||||
#dragging = null;
|
||||
|
||||
connectedCallback() {
|
||||
this.attachShadow({ mode: 'open' });
|
||||
this.#load();
|
||||
}
|
||||
|
||||
async #load() {
|
||||
try { this.#data = await api.get('/work-orders') ?? []; } catch { this.#data = []; }
|
||||
this.#render();
|
||||
}
|
||||
|
||||
#render() {
|
||||
const s = this.shadowRoot;
|
||||
const byStatus = Object.fromEntries(COLUMNS.map(c => [c.key, this.#data.filter(w => w.status === c.key)]));
|
||||
|
||||
s.innerHTML = `
|
||||
<style>
|
||||
:host { display: block; }
|
||||
.board { display: grid; grid-template-columns: repeat(6, minmax(220px, 1fr)); gap: .75rem; overflow-x: auto; padding-bottom: .5rem; }
|
||||
.col { background: var(--surface-2); border-radius: var(--radius); min-height: 400px; display: flex; flex-direction: column; }
|
||||
.col-header { padding: .75rem 1rem; display: flex; align-items: center; gap: .5rem; border-bottom: 1px solid var(--border); }
|
||||
.col-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
|
||||
.col-label { font-size: .813rem; font-weight: 700; color: var(--text); }
|
||||
.col-count { margin-left: auto; font-size: .75rem; font-weight: 600; color: var(--text-muted); background: var(--surface); border: 1px solid var(--border); border-radius: 999px; padding: .1rem .45rem; }
|
||||
.col-body { flex: 1; padding: .5rem; display: flex; flex-direction: column; gap: .5rem; overflow-y: auto; max-height: calc(100vh - 220px); }
|
||||
.wo-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: .75rem; cursor: pointer; transition: box-shadow .15s, opacity .15s; }
|
||||
.wo-card:hover { box-shadow: var(--shadow-md); }
|
||||
.wo-card[draggable] { cursor: grab; }
|
||||
.wo-card.dragging { opacity: .4; }
|
||||
.drop-zone { border: 2px dashed var(--teal); border-radius: var(--radius-sm); min-height: 60px; background: rgba(10,126,164,.05); }
|
||||
.wo-num { font-size: .7rem; font-family: monospace; color: var(--text-muted); margin-bottom: .2rem; }
|
||||
.wo-title { font-size: .813rem; font-weight: 600; color: var(--text); line-height: 1.4; margin-bottom: .4rem; }
|
||||
.wo-site { font-size: .75rem; color: var(--text-muted); margin-bottom: .4rem; }
|
||||
.card-footer { display: flex; align-items: center; gap: .4rem; }
|
||||
.pri-dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }
|
||||
.pri-label { font-size: .7rem; color: var(--text-muted); flex: 1; }
|
||||
.step-prog { font-size: .7rem; color: var(--text-muted); }
|
||||
@media (max-width: 768px) { .board { grid-template-columns: repeat(6, 240px); } }
|
||||
</style>
|
||||
<div class="board">
|
||||
${COLUMNS.map(col => `
|
||||
<div class="col" data-status="${col.key}" id="col-${col.key}">
|
||||
<div class="col-header">
|
||||
<span class="col-dot" style="background:${col.color}"></span>
|
||||
<span class="col-label">${col.label}</span>
|
||||
<span class="col-count">${byStatus[col.key].length}</span>
|
||||
</div>
|
||||
<div class="col-body" data-status="${col.key}">
|
||||
${byStatus[col.key].map(wo => `
|
||||
<div class="wo-card" draggable="true" data-id="${wo.id}" data-status="${wo.status}">
|
||||
<div class="wo-num">${wo.wo_number}</div>
|
||||
<div class="wo-title">${this.#esc(wo.title)}</div>
|
||||
${wo.site_name ? `<div class="wo-site">${this.#esc(wo.site_name)}</div>` : ''}
|
||||
<div class="card-footer">
|
||||
<span class="pri-dot" style="background:${PRI_COLOR[wo.priority]}"></span>
|
||||
<span class="pri-label">${wo.priority}</span>
|
||||
${wo.step_count ? `<span class="step-prog">${wo.steps_done}/${wo.step_count}</span>` : ''}
|
||||
</div>
|
||||
</div>`).join('')}
|
||||
</div>
|
||||
</div>`).join('')}
|
||||
</div>`;
|
||||
|
||||
this.#bindDragDrop();
|
||||
this.#bindClicks();
|
||||
}
|
||||
|
||||
#bindClicks() {
|
||||
this.shadowRoot.querySelectorAll('.wo-card').forEach(card => {
|
||||
card.addEventListener('click', () =>
|
||||
window.dispatchEvent(new CustomEvent('wo:navigate', { detail: { path: `/work-orders/${card.dataset.id}` } })));
|
||||
});
|
||||
}
|
||||
|
||||
#bindDragDrop() {
|
||||
const s = this.shadowRoot;
|
||||
s.querySelectorAll('.wo-card').forEach(card => {
|
||||
card.addEventListener('dragstart', e => {
|
||||
this.#dragging = card;
|
||||
card.classList.add('dragging');
|
||||
e.dataTransfer.effectAllowed = 'move';
|
||||
});
|
||||
card.addEventListener('dragend', () => {
|
||||
card.classList.remove('dragging');
|
||||
this.#dragging = null;
|
||||
});
|
||||
});
|
||||
|
||||
s.querySelectorAll('.col-body').forEach(zone => {
|
||||
zone.addEventListener('dragover', e => { e.preventDefault(); e.dataTransfer.dropEffect = 'move'; zone.classList.add('drop-zone'); });
|
||||
zone.addEventListener('dragleave', () => zone.classList.remove('drop-zone'));
|
||||
zone.addEventListener('drop', async e => {
|
||||
e.preventDefault();
|
||||
zone.classList.remove('drop-zone');
|
||||
if (!this.#dragging) return;
|
||||
const newStatus = zone.dataset.status;
|
||||
const id = this.#dragging.dataset.id;
|
||||
if (this.#dragging.dataset.status === newStatus) return;
|
||||
try {
|
||||
await api.put(`/work-orders/${id}/status`, { status: newStatus });
|
||||
await this.#load();
|
||||
} catch (err) {
|
||||
window.dispatchEvent(new CustomEvent('wo:toast', { detail: { message: err.message, type: 'error' } }));
|
||||
}
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
#esc(s) { return (s || '').replace(/&/g,'&').replace(/</g,'<').replace(/>/g,'>'); }
|
||||
}
|
||||
customElements.define('wo-kanban', WoKanban);
|
||||
@@ -0,0 +1,259 @@
|
||||
import { api } from '../../lib/api.mjs';
|
||||
import { formatDateTime } from '../../lib/format.mjs';
|
||||
|
||||
const STATUSES = ['draft','assigned','scheduled','in_progress','pending_review','closed'];
|
||||
const PRIORITIES = ['low','normal','high','urgent'];
|
||||
|
||||
const STATUS_LABEL = { draft:'Draft', assigned:'Assigned', scheduled:'Scheduled', in_progress:'In Progress', pending_review:'Pending Review', closed:'Closed' };
|
||||
const PRI_COLOR = { low:'var(--priority-low)', normal:'var(--priority-normal)', high:'var(--priority-high)', urgent:'var(--priority-urgent)' };
|
||||
|
||||
class WoList extends HTMLElement {
|
||||
#data = [];
|
||||
#loading = true;
|
||||
#view = localStorage.getItem('wo-view') || 'list';
|
||||
#filters = { status: '', search: '', priority: '' };
|
||||
#debounce = null;
|
||||
|
||||
connectedCallback() {
|
||||
this.attachShadow({ mode: 'open' });
|
||||
this.#render();
|
||||
this.#load();
|
||||
}
|
||||
|
||||
async #load() {
|
||||
this.#loading = true;
|
||||
this.#render();
|
||||
try {
|
||||
const p = new URLSearchParams();
|
||||
if (this.#filters.status) p.set('status', this.#filters.status);
|
||||
if (this.#filters.search) p.set('search', this.#filters.search);
|
||||
if (this.#filters.priority) p.set('priority', this.#filters.priority);
|
||||
this.#data = await api.get(`/work-orders?${p}`) ?? [];
|
||||
} catch { this.#data = []; }
|
||||
this.#loading = false;
|
||||
this.#render();
|
||||
}
|
||||
|
||||
#render() {
|
||||
const s = this.shadowRoot;
|
||||
s.innerHTML = `<style>${this.#css()}</style>${this.#html()}`;
|
||||
this.#bind();
|
||||
if (window.lucide) lucide.createIcons({ nodes: [s] });
|
||||
}
|
||||
|
||||
#css() { return `
|
||||
:host { display: block; }
|
||||
.page-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:1.25rem; }
|
||||
h1 { font-size:1.25rem; font-weight:700; color:var(--text); }
|
||||
.filter-bar { display:flex; align-items:center; gap:.75rem; margin-bottom:1rem; flex-wrap:wrap; }
|
||||
.search-wrap { position:relative; flex:1; min-width:200px; }
|
||||
.search-wrap i { position:absolute; left:.65rem; top:50%; transform:translateY(-50%); color:var(--text-muted); width:15px; height:15px; pointer-events:none; }
|
||||
.search-input { border:1px solid var(--border); border-radius:var(--radius-sm); padding:.45rem .75rem .45rem 2.1rem; background:var(--surface); color:var(--text); font-size:.875rem; width:100%; transition:border-color .15s; }
|
||||
.search-input:focus { outline:none; border-color:var(--teal); box-shadow:0 0 0 3px rgba(10,126,164,.15); }
|
||||
select.filter { border:1px solid var(--border); border-radius:var(--radius-sm); padding:.45rem 2rem .45rem .65rem; background:var(--surface); color:var(--text); font-size:.875rem; cursor:pointer; appearance:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2364748B' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right .6rem center; }
|
||||
.view-toggle { display:flex; border:1px solid var(--border); border-radius:var(--radius-sm); overflow:hidden; }
|
||||
.view-btn { background:var(--surface); border:none; padding:.4rem .6rem; cursor:pointer; color:var(--text-muted); display:flex; transition:background .15s,color .15s; }
|
||||
.view-btn.active { background:var(--teal); color:#fff; }
|
||||
.new-btn { display:inline-flex; align-items:center; gap:.4rem; padding:.5rem 1rem; background:var(--teal); color:#fff; border:none; border-radius:var(--radius); font-size:.875rem; font-weight:600; cursor:pointer; white-space:nowrap; transition:opacity .15s; }
|
||||
.new-btn:hover { opacity:.88; }
|
||||
|
||||
/* Table */
|
||||
table { width:100%; border-collapse:collapse; background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); overflow:hidden; }
|
||||
thead { background:var(--surface-2); }
|
||||
th { text-align:left; padding:.65rem 1rem; font-size:.75rem; font-weight:700; color:var(--text-muted); text-transform:uppercase; letter-spacing:.04em; border-bottom:1px solid var(--border); white-space:nowrap; }
|
||||
td { padding:.75rem 1rem; border-bottom:1px solid var(--border-lt); font-size:.875rem; color:var(--text); vertical-align:middle; }
|
||||
tr:last-child td { border-bottom:none; }
|
||||
tr:hover td { background:var(--surface-2); cursor:pointer; }
|
||||
.wo-num { font-family:var(--font-mono,monospace); font-size:.813rem; color:var(--text-muted); }
|
||||
.wo-title { font-weight:600; }
|
||||
.priority-dot { width:8px; height:8px; border-radius:50%; display:inline-block; margin-right:.35rem; }
|
||||
.progress-bar { height:4px; background:var(--border); border-radius:2px; width:80px; }
|
||||
.progress-fill { height:100%; border-radius:2px; background:var(--teal); transition:width .3s; }
|
||||
.actions { display:flex; gap:.35rem; }
|
||||
.action-btn { background:none; border:none; cursor:pointer; color:var(--text-muted); padding:.3rem; border-radius:4px; display:flex; transition:color .15s,background .15s; }
|
||||
.action-btn:hover { color:var(--text); background:var(--surface-2); }
|
||||
.action-btn.del:hover { color:var(--danger); }
|
||||
|
||||
/* Mobile cards */
|
||||
.card-list { display:none; flex-direction:column; gap:.6rem; }
|
||||
.wo-card { background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:.9rem 1rem; cursor:pointer; transition:box-shadow .15s; }
|
||||
.wo-card:hover { box-shadow:var(--shadow-sm); }
|
||||
.card-top { display:flex; align-items:flex-start; justify-content:space-between; gap:.5rem; margin-bottom:.4rem; }
|
||||
.card-meta { font-size:.75rem; color:var(--text-muted); margin-top:.25rem; }
|
||||
|
||||
/* Skeleton */
|
||||
.skeleton { background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); overflow:hidden; }
|
||||
.skel-row { display:flex; gap:.75rem; padding:.75rem 1rem; border-bottom:1px solid var(--border-lt); align-items:center; }
|
||||
.skel-row:last-child { border-bottom:none; }
|
||||
.skel { background:linear-gradient(90deg,var(--surface-2) 25%,var(--border-lt) 50%,var(--surface-2) 75%); background-size:200% 100%; animation:shimmer 1.4s infinite; border-radius:4px; }
|
||||
@keyframes shimmer { to { background-position:-200% 0; } }
|
||||
|
||||
@media (max-width:768px) {
|
||||
.filter-bar { gap:.5rem; }
|
||||
table { display:none; }
|
||||
.card-list { display:flex; }
|
||||
}
|
||||
`; }
|
||||
|
||||
#html() {
|
||||
if (this.#loading) return `
|
||||
${this.#headerHTML()}
|
||||
${this.#filterBarHTML()}
|
||||
<div class="skeleton">
|
||||
${[1,2,3,4,5].map(() => `<div class="skel-row">
|
||||
<div class="skel" style="width:80px;height:14px"></div>
|
||||
<div class="skel" style="flex:1;height:14px"></div>
|
||||
<div class="skel" style="width:60px;height:14px"></div>
|
||||
<div class="skel" style="width:70px;height:20px;border-radius:999px"></div>
|
||||
</div>`).join('')}
|
||||
</div>`;
|
||||
|
||||
if (this.#data.length === 0) return `
|
||||
${this.#headerHTML()}
|
||||
${this.#filterBarHTML()}
|
||||
<ui-empty icon="clipboard-list"
|
||||
heading="No work orders found"
|
||||
body="${this.#hasFilters() ? 'Try adjusting your filters.' : 'Create your first work order to get started.'}">
|
||||
${!this.#hasFilters() ? '<button class="new-btn" id="empty-new"><i data-lucide="plus" style="width:15px;height:15px"></i> New Work Order</button>' : ''}
|
||||
</ui-empty>`;
|
||||
|
||||
return `
|
||||
${this.#headerHTML()}
|
||||
${this.#filterBarHTML()}
|
||||
${this.#view === 'kanban'
|
||||
? '<wo-kanban></wo-kanban>'
|
||||
: `${this.#tableHTML()}${this.#cardListHTML()}`}`;
|
||||
}
|
||||
|
||||
#headerHTML() {
|
||||
return `<div class="page-header">
|
||||
<h1>Work Orders</h1>
|
||||
<button class="new-btn" id="new-wo">
|
||||
<i data-lucide="plus" style="width:15px;height:15px"></i> New Work Order
|
||||
</button>
|
||||
</div>`;
|
||||
}
|
||||
|
||||
#filterBarHTML() {
|
||||
const viewActive = v => this.#view === v ? ' active' : '';
|
||||
return `<div class="filter-bar">
|
||||
<div class="search-wrap">
|
||||
<i data-lucide="search"></i>
|
||||
<input class="search-input" id="search" type="search" placeholder="Search work orders…" value="${this.#filters.search}">
|
||||
</div>
|
||||
<select class="filter" id="filter-status">
|
||||
<option value="">All statuses</option>
|
||||
${STATUSES.map(s => `<option value="${s}" ${this.#filters.status===s?'selected':''}>${STATUS_LABEL[s]}</option>`).join('')}
|
||||
</select>
|
||||
<select class="filter" id="filter-priority">
|
||||
<option value="">All priorities</option>
|
||||
${PRIORITIES.map(p => `<option value="${p}" ${this.#filters.priority===p?'selected':''}>${p.charAt(0).toUpperCase()+p.slice(1)}</option>`).join('')}
|
||||
</select>
|
||||
<div class="view-toggle">
|
||||
<button class="view-btn${viewActive('list')}" data-view="list" title="List view"> <i data-lucide="list" style="width:15px;height:15px"></i></button>
|
||||
<button class="view-btn${viewActive('kanban')}" data-view="kanban" title="Kanban view"> <i data-lucide="columns-3" style="width:15px;height:15px"></i></button>
|
||||
</div>
|
||||
</div>`;
|
||||
}
|
||||
|
||||
#tableHTML() {
|
||||
return `<table>
|
||||
<thead><tr>
|
||||
<th>WO #</th><th>Title</th><th>Site</th>
|
||||
<th>Status</th><th>Priority</th><th>Scheduled</th><th>Steps</th><th></th>
|
||||
</tr></thead>
|
||||
<tbody>
|
||||
${this.#data.map(wo => `
|
||||
<tr class="wo-row" data-id="${wo.id}">
|
||||
<td class="wo-num">${wo.wo_number}</td>
|
||||
<td class="wo-title">${this.#esc(wo.title)}</td>
|
||||
<td>${this.#esc(wo.site_name) || '<span style="color:var(--text-muted)">—</span>'}</td>
|
||||
<td><ui-badge type="status" value="${wo.status}"></ui-badge></td>
|
||||
<td>
|
||||
<span class="priority-dot" style="background:${PRI_COLOR[wo.priority]}"></span>
|
||||
${wo.priority.charAt(0).toUpperCase()+wo.priority.slice(1)}
|
||||
</td>
|
||||
<td style="color:var(--text-muted)">${formatDateTime(wo.scheduled_start)}</td>
|
||||
<td>
|
||||
<div class="progress-bar"><div class="progress-fill" style="width:${wo.step_count ? Math.round(wo.steps_done/wo.step_count*100) : 0}%"></div></div>
|
||||
<span style="font-size:.75rem;color:var(--text-muted)">${wo.steps_done}/${wo.step_count}</span>
|
||||
</td>
|
||||
<td>
|
||||
<div class="actions">
|
||||
<button class="action-btn edit-btn" data-id="${wo.id}" title="Edit"><i data-lucide="pencil" style="width:14px;height:14px"></i></button>
|
||||
<button class="action-btn del del-btn" data-id="${wo.id}" title="Delete"><i data-lucide="trash-2" style="width:14px;height:14px"></i></button>
|
||||
</div>
|
||||
</td>
|
||||
</tr>`).join('')}
|
||||
</tbody>
|
||||
</table>`;
|
||||
}
|
||||
|
||||
#cardListHTML() {
|
||||
return `<div class="card-list">
|
||||
${this.#data.map(wo => `
|
||||
<div class="wo-card" data-id="${wo.id}">
|
||||
<div class="card-top">
|
||||
<div>
|
||||
<div class="wo-num">${wo.wo_number}</div>
|
||||
<div class="wo-title">${this.#esc(wo.title)}</div>
|
||||
</div>
|
||||
<ui-badge type="status" value="${wo.status}"></ui-badge>
|
||||
</div>
|
||||
<div class="card-meta">${this.#esc(wo.site_name) || '—'} · ${wo.steps_done}/${wo.step_count} steps</div>
|
||||
</div>`).join('')}
|
||||
</div>`;
|
||||
}
|
||||
|
||||
#hasFilters() { return !!(this.#filters.status || this.#filters.search || this.#filters.priority); }
|
||||
#esc(s) { return (s || '').replace(/&/g,'&').replace(/</g,'<').replace(/>/g,'>'); }
|
||||
|
||||
#nav(path) { window.dispatchEvent(new CustomEvent('wo:navigate', { detail: { path } })); }
|
||||
|
||||
#bind() {
|
||||
const s = this.shadowRoot;
|
||||
|
||||
s.querySelector('#new-wo')?.addEventListener('click', () => this.#nav('/work-orders/new'));
|
||||
s.querySelector('#empty-new')?.addEventListener('click', () => this.#nav('/work-orders/new'));
|
||||
|
||||
s.querySelector('#search')?.addEventListener('input', e => {
|
||||
clearTimeout(this.#debounce);
|
||||
this.#debounce = setTimeout(() => { this.#filters.search = e.target.value; this.#load(); }, 350);
|
||||
});
|
||||
s.querySelector('#filter-status')?.addEventListener('change', e => { this.#filters.status = e.target.value; this.#load(); });
|
||||
s.querySelector('#filter-priority')?.addEventListener('change', e => { this.#filters.priority = e.target.value; this.#load(); });
|
||||
|
||||
s.querySelectorAll('.view-btn').forEach(btn =>
|
||||
btn.addEventListener('click', () => {
|
||||
this.#view = btn.dataset.view;
|
||||
localStorage.setItem('wo-view', this.#view);
|
||||
this.#render();
|
||||
}));
|
||||
|
||||
s.querySelectorAll('.wo-row').forEach(row =>
|
||||
row.addEventListener('click', e => {
|
||||
if (e.target.closest('.actions')) return;
|
||||
this.#nav(`/work-orders/${row.dataset.id}`);
|
||||
}));
|
||||
|
||||
s.querySelectorAll('.wo-card').forEach(card =>
|
||||
card.addEventListener('click', () => this.#nav(`/work-orders/${card.dataset.id}`)));
|
||||
|
||||
s.querySelectorAll('.edit-btn').forEach(btn =>
|
||||
btn.addEventListener('click', e => { e.stopPropagation(); this.#nav(`/work-orders/${btn.dataset.id}/edit`); }));
|
||||
|
||||
s.querySelectorAll('.del-btn').forEach(btn =>
|
||||
btn.addEventListener('click', async e => {
|
||||
e.stopPropagation();
|
||||
if (!confirm('Delete this work order?')) return;
|
||||
try {
|
||||
await api.delete(`/work-orders/${btn.dataset.id}`);
|
||||
window.dispatchEvent(new CustomEvent('wo:toast', { detail: { message: 'Work order deleted', type: 'success' } }));
|
||||
this.#load();
|
||||
} catch (err) {
|
||||
window.dispatchEvent(new CustomEvent('wo:toast', { detail: { message: err.message, type: 'error' } }));
|
||||
}
|
||||
}));
|
||||
}
|
||||
}
|
||||
customElements.define('wo-list', WoList);
|
||||
+21
-7
@@ -2,18 +2,32 @@
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>Work Orders</title>
|
||||
|
||||
<!-- Fonts: Inter (UI) + JetBrains Mono (WO numbers) -->
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet">
|
||||
|
||||
<!-- Icons: Lucide (tree-shakeable, no API key) -->
|
||||
<script src="https://unpkg.com/lucide@latest/dist/umd/lucide.min.js"></script>
|
||||
|
||||
<!-- Leaflet (Phase 2 — maps) -->
|
||||
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9/dist/leaflet.css">
|
||||
<script src="https://unpkg.com/leaflet@1.9/dist/leaflet.js" defer></script>
|
||||
|
||||
<!-- Chart.js (Phase 4 — dashboard charts) -->
|
||||
<script src="https://cdn.jsdelivr.net/npm/chart.js@4/dist/chart.umd.min.js" defer></script>
|
||||
|
||||
<!-- App styles -->
|
||||
<link rel="stylesheet" href="/styles/reset.css">
|
||||
<link rel="stylesheet" href="/styles/global.css">
|
||||
|
||||
<!-- Keycloak JS adapter (served by Keycloak itself) -->
|
||||
<script src="http://localhost:8180/js/keycloak.js"></script>
|
||||
<link rel="stylesheet" href="/styles/typography.css">
|
||||
<link rel="stylesheet" href="/styles/forms.css">
|
||||
</head>
|
||||
<body>
|
||||
<div id="app">
|
||||
<p style="padding:2rem;color:#64748b">Connecting to authentication server...</p>
|
||||
</div>
|
||||
<div id="root"></div>
|
||||
<script type="module" src="/app.mjs"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
+13
-10
@@ -1,26 +1,29 @@
|
||||
import { getToken, clearToken } from './auth.mjs';
|
||||
|
||||
const BASE = '/api';
|
||||
let _token = '';
|
||||
|
||||
export function setToken(t) { _token = t; }
|
||||
export function getToken() { return _token; }
|
||||
|
||||
async function request(method, path, body, isForm = false) {
|
||||
const headers = { Authorization: `Bearer ${_token}` };
|
||||
if (!isForm && body) headers['Content-Type'] = 'application/json';
|
||||
async function request(method, path, body, isFormData = false) {
|
||||
const token = getToken();
|
||||
const headers = {};
|
||||
if (token) headers['Authorization'] = `Bearer ${token}`;
|
||||
if (!isFormData && body !== undefined) headers['Content-Type'] = 'application/json';
|
||||
|
||||
const res = await fetch(BASE + path, {
|
||||
method,
|
||||
headers,
|
||||
body: body ? (isForm ? body : JSON.stringify(body)) : undefined,
|
||||
body: body !== undefined
|
||||
? (isFormData ? body : JSON.stringify(body))
|
||||
: undefined,
|
||||
});
|
||||
|
||||
if (res.status === 401) {
|
||||
clearToken();
|
||||
window.dispatchEvent(new CustomEvent('auth:expired'));
|
||||
return null;
|
||||
throw new Error('Session expired');
|
||||
}
|
||||
|
||||
const json = await res.json().catch(() => ({}));
|
||||
if (!res.ok) throw new Error(json.error || `HTTP ${res.status}`);
|
||||
if (!res.ok) throw new Error(json.error || `Request failed (${res.status})`);
|
||||
return json.data;
|
||||
}
|
||||
|
||||
|
||||
@@ -0,0 +1,49 @@
|
||||
const TOKEN_KEY = 'wo_token';
|
||||
const USER_KEY = 'wo_user';
|
||||
|
||||
export function getToken() {
|
||||
return localStorage.getItem(TOKEN_KEY) || '';
|
||||
}
|
||||
|
||||
export function setToken(token) {
|
||||
localStorage.setItem(TOKEN_KEY, token);
|
||||
try {
|
||||
const payload = JSON.parse(atob(token.split('.')[1]));
|
||||
localStorage.setItem(USER_KEY, JSON.stringify({
|
||||
id: payload.uid,
|
||||
username: payload.username,
|
||||
email: payload.email,
|
||||
displayName: payload.name,
|
||||
role: payload.role,
|
||||
}));
|
||||
} catch { /* ignore decode errors */ }
|
||||
}
|
||||
|
||||
export function clearToken() {
|
||||
localStorage.removeItem(TOKEN_KEY);
|
||||
localStorage.removeItem(USER_KEY);
|
||||
}
|
||||
|
||||
export function getUser() {
|
||||
const token = getToken();
|
||||
if (!token) return null;
|
||||
try {
|
||||
const payload = JSON.parse(atob(token.split('.')[1]));
|
||||
if (payload.exp && payload.exp * 1000 < Date.now()) {
|
||||
clearToken();
|
||||
return null;
|
||||
}
|
||||
const stored = localStorage.getItem(USER_KEY);
|
||||
return stored ? JSON.parse(stored) : null;
|
||||
} catch {
|
||||
return null;
|
||||
}
|
||||
}
|
||||
|
||||
const ROLE_LEVEL = { admin: 4, dispatcher: 3, field_tech: 2, viewer: 1 };
|
||||
|
||||
export function hasRole(minRole) {
|
||||
const user = getUser();
|
||||
if (!user) return false;
|
||||
return (ROLE_LEVEL[user.role] || 0) >= (ROLE_LEVEL[minRole] || 0);
|
||||
}
|
||||
@@ -0,0 +1,40 @@
|
||||
export function formatDate(iso) {
|
||||
if (!iso) return '—';
|
||||
return new Date(iso).toLocaleDateString('en-US', {
|
||||
year: 'numeric', month: 'short', day: 'numeric',
|
||||
});
|
||||
}
|
||||
|
||||
export function formatDateTime(iso) {
|
||||
if (!iso) return '—';
|
||||
return new Date(iso).toLocaleString('en-US', {
|
||||
month: 'short', day: 'numeric', year: 'numeric',
|
||||
hour: 'numeric', minute: '2-digit',
|
||||
});
|
||||
}
|
||||
|
||||
export function formatRelative(iso) {
|
||||
if (!iso) return '—';
|
||||
const diff = Date.now() - new Date(iso).getTime();
|
||||
const mins = Math.floor(diff / 60000);
|
||||
if (mins < 1) return 'just now';
|
||||
if (mins < 60) return `${mins}m ago`;
|
||||
const hrs = Math.floor(mins / 60);
|
||||
if (hrs < 24) return `${hrs}h ago`;
|
||||
const days = Math.floor(hrs / 24);
|
||||
if (days < 7) return `${days}d ago`;
|
||||
return formatDate(iso);
|
||||
}
|
||||
|
||||
export function formatPhone(phone) {
|
||||
if (!phone) return '—';
|
||||
const d = phone.replace(/\D/g, '');
|
||||
return d.length === 10
|
||||
? `(${d.slice(0,3)}) ${d.slice(3,6)}-${d.slice(6)}`
|
||||
: phone;
|
||||
}
|
||||
|
||||
export function toLocalDatetime(iso) {
|
||||
if (!iso) return '';
|
||||
return new Date(iso).toISOString().slice(0, 16);
|
||||
}
|
||||
@@ -0,0 +1,33 @@
|
||||
class Router {
|
||||
#routes = [];
|
||||
|
||||
on(pattern, handler) {
|
||||
const regex = new RegExp(
|
||||
'^' + pattern.replace(/:([^/]+)/g, '(?<$1>[^/]+)') + '$'
|
||||
);
|
||||
this.#routes.push({ regex, handler });
|
||||
return this;
|
||||
}
|
||||
|
||||
navigate(path) {
|
||||
location.hash = '#' + path;
|
||||
}
|
||||
|
||||
start() {
|
||||
const dispatch = () => {
|
||||
const path = decodeURIComponent(location.hash.slice(1)) || '/';
|
||||
for (const { regex, handler } of this.#routes) {
|
||||
const m = path.match(regex);
|
||||
if (m) { handler(m.groups || {}); return; }
|
||||
}
|
||||
};
|
||||
window.addEventListener('hashchange', dispatch);
|
||||
dispatch();
|
||||
}
|
||||
|
||||
get current() {
|
||||
return decodeURIComponent(location.hash.slice(1)) || '/';
|
||||
}
|
||||
}
|
||||
|
||||
export const router = new Router();
|
||||
@@ -0,0 +1,10 @@
|
||||
export function createStore(initial) {
|
||||
let state = { ...initial };
|
||||
const subscribers = new Set();
|
||||
|
||||
return {
|
||||
get() { return { ...state }; },
|
||||
set(updates) { state = { ...state, ...updates }; subscribers.forEach(fn => fn(state)); },
|
||||
subscribe(fn) { subscribers.add(fn); return () => subscribers.delete(fn); },
|
||||
};
|
||||
}
|
||||
@@ -0,0 +1,82 @@
|
||||
/* Shared form control styles — applied to light DOM forms */
|
||||
label {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: .35rem;
|
||||
font-size: var(--text-sm);
|
||||
font-weight: var(--weight-semibold);
|
||||
color: var(--text);
|
||||
}
|
||||
|
||||
input, select, textarea {
|
||||
border: 1px solid var(--border);
|
||||
border-radius: var(--radius-sm);
|
||||
padding: .5rem .75rem;
|
||||
background: var(--surface);
|
||||
color: var(--text);
|
||||
font-size: var(--text-base);
|
||||
width: 100%;
|
||||
transition: border-color .15s, box-shadow .15s;
|
||||
color-scheme: inherit;
|
||||
}
|
||||
|
||||
input:focus, select:focus, textarea:focus {
|
||||
outline: none;
|
||||
border-color: var(--teal);
|
||||
box-shadow: 0 0 0 3px rgba(10,126,164,.15);
|
||||
}
|
||||
|
||||
input::placeholder, textarea::placeholder {
|
||||
color: var(--text-muted);
|
||||
}
|
||||
|
||||
textarea {
|
||||
resize: vertical;
|
||||
min-height: 80px;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
select {
|
||||
cursor: pointer;
|
||||
appearance: none;
|
||||
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2364748B' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
|
||||
background-repeat: no-repeat;
|
||||
background-position: right .75rem center;
|
||||
padding-right: 2.25rem;
|
||||
}
|
||||
|
||||
input[type="datetime-local"],
|
||||
input[type="date"],
|
||||
input[type="time"] {
|
||||
color-scheme: inherit;
|
||||
}
|
||||
|
||||
input[type="checkbox"],
|
||||
input[type="radio"] {
|
||||
width: 1rem;
|
||||
height: 1rem;
|
||||
accent-color: var(--teal);
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.form-error {
|
||||
color: var(--danger);
|
||||
font-size: var(--text-sm);
|
||||
margin-top: .25rem;
|
||||
}
|
||||
|
||||
.form-group {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: .35rem;
|
||||
}
|
||||
|
||||
.form-row {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
@media (max-width: 600px) {
|
||||
.form-row { grid-template-columns: 1fr; }
|
||||
}
|
||||
+241
-126
@@ -1,156 +1,271 @@
|
||||
/* ── Light mode (default) ─────────────────────────────────────────────────── */
|
||||
/* ── Design Tokens — Light Mode ──────────────────────────────────────────────── */
|
||||
:root {
|
||||
--navy: #0d2137;
|
||||
--accent: #0a7ea4;
|
||||
--accent-lt: #14b8d4;
|
||||
--surface: #ffffff;
|
||||
--surface-2: #f8fafc;
|
||||
--bg: #f0f6fa;
|
||||
--border: #e2ebf0;
|
||||
--text: #1a2e3b;
|
||||
--muted: #64748b;
|
||||
--danger: #c0392b;
|
||||
--success: #1d9d6c;
|
||||
--warning: #e07b39;
|
||||
/* Brand */
|
||||
--navy: #0D2137;
|
||||
--teal: #0A7EA4;
|
||||
--teal-lt: #14B8D4;
|
||||
--teal-dk: #075E7A;
|
||||
|
||||
/* Surfaces */
|
||||
--bg: #F0F6FA;
|
||||
--surface: #FFFFFF;
|
||||
--surface-2: #E8F0F5;
|
||||
--border: #D1DDE6;
|
||||
--border-lt: #E8F0F5;
|
||||
|
||||
/* Text */
|
||||
--text: #1A2E3B;
|
||||
--text-muted: #64748B;
|
||||
--text-inv: #FFFFFF;
|
||||
|
||||
/* Semantic */
|
||||
--success: #1D9D6C;
|
||||
--warning: #E07B39;
|
||||
--danger: #C0392B;
|
||||
--info: #0A7EA4;
|
||||
|
||||
/* Shadows */
|
||||
--shadow-sm: 0 1px 3px rgba(0,0,0,.08);
|
||||
--shadow-md: 0 4px 12px rgba(0,0,0,.10);
|
||||
--shadow-lg: 0 8px 24px rgba(0,0,0,.12);
|
||||
|
||||
/* Radius */
|
||||
--radius-sm: 4px;
|
||||
--radius: 8px;
|
||||
--shadow: 0 2px 8px rgba(0,0,0,.08);
|
||||
--radius-lg: 12px;
|
||||
--radius-xl: 16px;
|
||||
|
||||
/* Status badge colours — light */
|
||||
--badge-draft-bg: #e2e8f0; --badge-draft-text: #475569;
|
||||
--badge-assigned-bg: #dbeafe; --badge-assigned-text: #1d4ed8;
|
||||
--badge-scheduled-bg: #fef3c7; --badge-scheduled-text: #92400e;
|
||||
--badge-in_progress-bg: #d1fae5; --badge-in_progress-text: #065f46;
|
||||
--badge-pending_review-bg: #ede9fe; --badge-pending_review-text: #5b21b6;
|
||||
--badge-closed-bg: #f3f4f6; --badge-closed-text: #6b7280;
|
||||
/* Sidebar */
|
||||
--sidebar-bg: #0D2137;
|
||||
--sidebar-hover: #153248;
|
||||
--sidebar-active: #0A7EA4;
|
||||
--sidebar-w: 260px;
|
||||
--sidebar-collapsed: 64px;
|
||||
|
||||
/* Status colours */
|
||||
--status-draft: #94A3B8;
|
||||
--status-assigned: #0A7EA4;
|
||||
--status-scheduled: #8B5CF6;
|
||||
--status-in_progress: #E07B39;
|
||||
--status-pending_review: #D97706;
|
||||
--status-closed: #1D9D6C;
|
||||
|
||||
/* Status badge backgrounds (light tint) */
|
||||
--status-draft-bg: #F1F5F9;
|
||||
--status-assigned-bg: #E0F2FE;
|
||||
--status-scheduled-bg: #EDE9FE;
|
||||
--status-in_progress-bg: #FFF7ED;
|
||||
--status-pending_review-bg: #FFFBEB;
|
||||
--status-closed-bg: #DCFCE7;
|
||||
|
||||
/* Priority colours */
|
||||
--priority-low: #64748B;
|
||||
--priority-normal: #0A7EA4;
|
||||
--priority-high: #E07B39;
|
||||
--priority-urgent: #C0392B;
|
||||
|
||||
font-family: Calibri, 'Segoe UI', system-ui, sans-serif;
|
||||
font-size: 16px;
|
||||
color: var(--text);
|
||||
background: var(--bg);
|
||||
color-scheme: light;
|
||||
}
|
||||
|
||||
/* ── Dark mode ────────────────────────────────────────────────────────────── */
|
||||
/* ── Dark Mode ───────────────────────────────────────────────────────────────── */
|
||||
@media (prefers-color-scheme: dark) {
|
||||
:root {
|
||||
--navy: #0a1929;
|
||||
--accent: #29b6d8;
|
||||
--accent-lt: #4dd0e8;
|
||||
--surface: #0f2336;
|
||||
--surface-2: #0c1d2e;
|
||||
--bg: #081828;
|
||||
--border: #1e3a52;
|
||||
--text: #e2eaf2;
|
||||
--muted: #8baabf;
|
||||
--danger: #f87171;
|
||||
--success: #34d399;
|
||||
--warning: #fbbf24;
|
||||
--shadow: 0 2px 12px rgba(0,0,0,.4);
|
||||
:root { --_dark: 1; }
|
||||
}
|
||||
:root[data-theme="dark"] { --_dark: 1; }
|
||||
|
||||
/* Status badge colours — dark (muted tints so they don't blaze) */
|
||||
--badge-draft-bg: #1e2d3d; --badge-draft-text: #94a3b8;
|
||||
--badge-assigned-bg: #1e3a5f; --badge-assigned-text: #93c5fd;
|
||||
--badge-scheduled-bg: #3d2e00; --badge-scheduled-text: #fde68a;
|
||||
--badge-in_progress-bg: #064e30; --badge-in_progress-text: #6ee7b7;
|
||||
--badge-pending_review-bg: #2e1f5e; --badge-pending_review-text: #c4b5fd;
|
||||
--badge-closed-bg: #1c2a38; --badge-closed-text: #6b7280;
|
||||
@media (prefers-color-scheme: dark) {
|
||||
:root:not([data-theme="light"]) {
|
||||
--navy: #0A1929;
|
||||
--teal: #29B6D8;
|
||||
--teal-lt: #4DD0E8;
|
||||
--teal-dk: #1A8FAD;
|
||||
|
||||
--bg: #081828;
|
||||
--surface: #0F2336;
|
||||
--surface-2: #0C1D2E;
|
||||
--border: #1E3A52;
|
||||
--border-lt: #1A3048;
|
||||
|
||||
--text: #E2EAF2;
|
||||
--text-muted: #8BAABF;
|
||||
--text-inv: #FFFFFF;
|
||||
|
||||
--success: #34D399;
|
||||
--warning: #FBBF24;
|
||||
--danger: #F87171;
|
||||
--info: #29B6D8;
|
||||
|
||||
--shadow-sm: 0 1px 3px rgba(0,0,0,.3);
|
||||
--shadow-md: 0 4px 12px rgba(0,0,0,.4);
|
||||
--shadow-lg: 0 8px 24px rgba(0,0,0,.5);
|
||||
|
||||
--sidebar-bg: #061220;
|
||||
--sidebar-hover: #0D1F32;
|
||||
--sidebar-active: #1A5C78;
|
||||
|
||||
--status-draft-bg: #1E2D3D;
|
||||
--status-assigned-bg: #1E3A5F;
|
||||
--status-scheduled-bg: #2E1F5E;
|
||||
--status-in_progress-bg: #3D2E00;
|
||||
--status-pending_review-bg: #3D2800;
|
||||
--status-closed-bg: #064E30;
|
||||
|
||||
color-scheme: dark;
|
||||
}
|
||||
}
|
||||
:root[data-theme="dark"] {
|
||||
--navy: #0A1929;
|
||||
--teal: #29B6D8;
|
||||
--teal-lt: #4DD0E8;
|
||||
--bg: #081828;
|
||||
--surface: #0F2336;
|
||||
--surface-2: #0C1D2E;
|
||||
--border: #1E3A52;
|
||||
--border-lt: #1A3048;
|
||||
--text: #E2EAF2;
|
||||
--text-muted: #8BAABF;
|
||||
--shadow-sm: 0 1px 3px rgba(0,0,0,.3);
|
||||
--shadow-md: 0 4px 12px rgba(0,0,0,.4);
|
||||
color-scheme: dark;
|
||||
}
|
||||
|
||||
/* ── Reset ────────────────────────────────────────────────────────────────── */
|
||||
body { min-height: 100vh; }
|
||||
/* ── Base ────────────────────────────────────────────────────────────────────── */
|
||||
body {
|
||||
background: var(--bg);
|
||||
color: var(--text);
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
a { color: var(--accent); text-decoration: none; }
|
||||
a { color: var(--teal); text-decoration: none; }
|
||||
a:hover { text-decoration: underline; }
|
||||
|
||||
/* ── Buttons ──────────────────────────────────────────────────────────────── */
|
||||
button {
|
||||
cursor: pointer;
|
||||
border: none;
|
||||
border-radius: var(--radius);
|
||||
padding: .5rem 1rem;
|
||||
background: var(--accent);
|
||||
color: #fff;
|
||||
font-weight: 600;
|
||||
transition: opacity .15s;
|
||||
/* ── App Layout (Light DOM — no shadow root) ─────────────────────────────────── */
|
||||
app-root {
|
||||
display: grid;
|
||||
grid-template-columns: var(--sidebar-w) 1fr;
|
||||
grid-template-rows: 1fr;
|
||||
min-height: 100vh;
|
||||
}
|
||||
button:hover { opacity: .85; }
|
||||
button.secondary {
|
||||
background: transparent;
|
||||
border: 1px solid var(--border);
|
||||
color: var(--text);
|
||||
app-root.collapsed {
|
||||
grid-template-columns: var(--sidebar-collapsed) 1fr;
|
||||
}
|
||||
|
||||
/* ── Form controls ────────────────────────────────────────────────────────── */
|
||||
input, select, textarea {
|
||||
border: 1px solid var(--border);
|
||||
border-radius: var(--radius);
|
||||
padding: .5rem .75rem;
|
||||
width: 100%;
|
||||
.app-shell {
|
||||
display: grid;
|
||||
grid-template-rows: 56px 1fr;
|
||||
min-height: 100vh;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
#main-content {
|
||||
overflow-y: auto;
|
||||
padding: 1.5rem;
|
||||
background: var(--bg);
|
||||
}
|
||||
|
||||
app-mobile-nav { display: none; }
|
||||
|
||||
@media (max-width: 768px) {
|
||||
app-root {
|
||||
grid-template-columns: 1fr;
|
||||
grid-template-rows: 56px 1fr 56px;
|
||||
}
|
||||
.app-shell { grid-template-rows: 1fr; }
|
||||
app-sidebar { display: none; }
|
||||
app-mobile-nav { display: flex; }
|
||||
app-topbar { display: none; }
|
||||
#main-content { padding: 1rem; }
|
||||
}
|
||||
|
||||
/* ── Sidebar (Light DOM) ──────────────────────────────────────────────────────── */
|
||||
app-sidebar {
|
||||
background: var(--sidebar-bg);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100vh;
|
||||
position: sticky;
|
||||
top: 0;
|
||||
overflow: hidden;
|
||||
transition: width .2s ease;
|
||||
}
|
||||
|
||||
/* ── Topbar (Light DOM) ───────────────────────────────────────────────────────── */
|
||||
app-topbar {
|
||||
background: var(--surface);
|
||||
color: var(--text);
|
||||
transition: border-color .15s;
|
||||
}
|
||||
input:focus, select:focus, textarea:focus {
|
||||
outline: none;
|
||||
border-color: var(--accent);
|
||||
}
|
||||
|
||||
/* Native date/time pickers pick up OS colour scheme via color-scheme property */
|
||||
input[type="datetime-local"] { color-scheme: inherit; }
|
||||
|
||||
/* ── Cards ────────────────────────────────────────────────────────────────── */
|
||||
.card {
|
||||
background: var(--surface);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: var(--radius);
|
||||
padding: 1.25rem;
|
||||
box-shadow: var(--shadow);
|
||||
}
|
||||
|
||||
/* ── Status badges ────────────────────────────────────────────────────────── */
|
||||
.badge {
|
||||
display: inline-block;
|
||||
padding: .2rem .6rem;
|
||||
border-radius: 999px;
|
||||
font-size: .75rem;
|
||||
font-weight: 600;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: .04em;
|
||||
}
|
||||
.badge-draft { background: var(--badge-draft-bg); color: var(--badge-draft-text); }
|
||||
.badge-assigned { background: var(--badge-assigned-bg); color: var(--badge-assigned-text); }
|
||||
.badge-scheduled { background: var(--badge-scheduled-bg); color: var(--badge-scheduled-text); }
|
||||
.badge-in_progress { background: var(--badge-in_progress-bg); color: var(--badge-in_progress-text); }
|
||||
.badge-pending_review { background: var(--badge-pending_review-bg); color: var(--badge-pending_review-text); }
|
||||
.badge-closed { background: var(--badge-closed-bg); color: var(--badge-closed-text); }
|
||||
|
||||
/* ── Layout ───────────────────────────────────────────────────────────────── */
|
||||
#app { max-width: 1200px; margin: 0 auto; padding: 0 1rem; }
|
||||
|
||||
/* ── Nav ──────────────────────────────────────────────────────────────────── */
|
||||
nav {
|
||||
background: var(--navy);
|
||||
color: #fff;
|
||||
padding: .75rem 1.5rem;
|
||||
border-bottom: 1px solid var(--border);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 1.5rem;
|
||||
border-bottom: 1px solid rgba(255,255,255,.06);
|
||||
padding: 0 1.25rem;
|
||||
height: 56px;
|
||||
gap: 1rem;
|
||||
z-index: 10;
|
||||
}
|
||||
nav .brand { font-weight: 700; font-size: 1.1rem; color: #fff; }
|
||||
nav a { color: rgba(255,255,255,.8); font-size: .9rem; }
|
||||
nav a:hover { color: #fff; text-decoration: none; }
|
||||
nav .spacer { flex: 1; }
|
||||
nav .user-info { font-size: .85rem; color: rgba(255,255,255,.6); }
|
||||
|
||||
/* ── Page header ──────────────────────────────────────────────────────────── */
|
||||
/* ── Mobile Nav (Light DOM) ───────────────────────────────────────────────────── */
|
||||
app-mobile-nav {
|
||||
background: var(--surface);
|
||||
border-top: 1px solid var(--border);
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
height: 56px;
|
||||
align-items: center;
|
||||
justify-content: space-around;
|
||||
z-index: 100;
|
||||
padding-bottom: env(safe-area-inset-bottom);
|
||||
}
|
||||
|
||||
/* ── Page Header ──────────────────────────────────────────────────────────────── */
|
||||
.page-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 1.5rem 0 1rem;
|
||||
margin-bottom: 1.25rem;
|
||||
}
|
||||
.page-header h1 { font-size: 1.4rem; }
|
||||
.page-header h1 {
|
||||
font-size: 1.25rem;
|
||||
font-weight: 700;
|
||||
color: var(--text);
|
||||
}
|
||||
|
||||
/* ── Cards ────────────────────────────────────────────────────────────────────── */
|
||||
.card {
|
||||
background: var(--surface);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: var(--radius);
|
||||
box-shadow: var(--shadow-sm);
|
||||
}
|
||||
|
||||
/* ── Buttons ──────────────────────────────────────────────────────────────────── */
|
||||
button, .btn {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: .4rem;
|
||||
padding: .5rem 1rem;
|
||||
border: none;
|
||||
border-radius: var(--radius);
|
||||
font-weight: 600;
|
||||
font-size: .875rem;
|
||||
cursor: pointer;
|
||||
transition: opacity .15s, background .15s;
|
||||
background: var(--teal);
|
||||
color: #fff;
|
||||
}
|
||||
button:hover, .btn:hover { opacity: .88; }
|
||||
button.ghost, .btn-ghost {
|
||||
background: transparent;
|
||||
border: 1px solid var(--border);
|
||||
color: var(--text);
|
||||
}
|
||||
button.danger, .btn-danger {
|
||||
background: var(--danger);
|
||||
color: #fff;
|
||||
}
|
||||
button:disabled { opacity: .5; cursor: not-allowed; }
|
||||
|
||||
/* ── Utility ──────────────────────────────────────────────────────────────────── */
|
||||
.text-muted { color: var(--text-muted); }
|
||||
.text-sm { font-size: .813rem; }
|
||||
.mono { font-family: var(--font-mono); }
|
||||
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
|
||||
|
||||
@@ -1,6 +1,7 @@
|
||||
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
|
||||
html { -webkit-text-size-adjust: 100%; }
|
||||
body { line-height: 1.5; -webkit-font-smoothing: antialiased; }
|
||||
img, svg { display: block; max-width: 100%; }
|
||||
img, picture, video, canvas, svg { display: block; max-width: 100%; }
|
||||
input, button, textarea, select { font: inherit; }
|
||||
p, h1, h2, h3, h4, h5, h6 { overflow-wrap: break-word; }
|
||||
ul, ol { list-style: none; }
|
||||
|
||||
@@ -0,0 +1,37 @@
|
||||
:root {
|
||||
--font-body: 'Inter', 'Segoe UI', system-ui, sans-serif;
|
||||
--font-mono: 'JetBrains Mono', 'Cascadia Code', 'Consolas', monospace;
|
||||
|
||||
--text-xs: 0.70rem;
|
||||
--text-sm: 0.813rem;
|
||||
--text-base: 0.938rem;
|
||||
--text-md: 1.063rem;
|
||||
--text-lg: 1.25rem;
|
||||
--text-xl: 1.5rem;
|
||||
--text-2xl: 2rem;
|
||||
|
||||
--weight-normal: 400;
|
||||
--weight-medium: 500;
|
||||
--weight-semibold: 600;
|
||||
--weight-bold: 700;
|
||||
}
|
||||
|
||||
html {
|
||||
font-family: var(--font-body);
|
||||
font-size: 16px;
|
||||
color: var(--text);
|
||||
}
|
||||
|
||||
h1 { font-size: var(--text-xl); font-weight: var(--weight-bold); }
|
||||
h2 { font-size: var(--text-lg); font-weight: var(--weight-semibold); }
|
||||
h3 { font-size: var(--text-md); font-weight: var(--weight-semibold); }
|
||||
h4 { font-size: var(--text-base); font-weight: var(--weight-medium); }
|
||||
|
||||
.text-xs { font-size: var(--text-xs); }
|
||||
.text-sm { font-size: var(--text-sm); }
|
||||
.text-base { font-size: var(--text-base); }
|
||||
.text-lg { font-size: var(--text-lg); }
|
||||
.font-mono { font-family: var(--font-mono); }
|
||||
.font-medium { font-weight: var(--weight-medium); }
|
||||
.font-semibold { font-weight: var(--weight-semibold); }
|
||||
.font-bold { font-weight: var(--weight-bold); }
|
||||
Reference in New Issue
Block a user