feat: StorageService S3/MinIO, POST /users, invoice upload, portal dashboard §08 statuses + notifications

2026-06-01 20:55:30 -05:00
parent 98ab5a309c
commit a047a8b032
19 changed files with 1166 additions and 134 deletions
@@ -14,6 +14,9 @@
    "test:ci": "jest --ci --coverage --forceExit"
  },
  "dependencies": {
+    "@aws-sdk/client-s3": "^3.1058.0",
+    "@aws-sdk/lib-storage": "^3.1058.0",
+    "@aws-sdk/s3-request-presigner": "^3.1058.0",
    "@moraworld/database": "workspace:*",
    "@nestjs/common": "^11.1.0",
    "@nestjs/config": "^4.0.2",
@@ -5,6 +5,7 @@ import {
  Post,
  Body,
  Param,
+  Query,
  UseGuards,
  Request,
 } from "@nestjs/common";
@@ -44,3 +45,15 @@ export class NotificationsController {
    return this.svc.seedDefaultTemplates(req.user.tenantId);
  }
 }
+
+/** GET /notifications — bandeja de entrada del usuario */
+@Controller("notifications")
+@UseGuards(JwtAuthGuard)
+export class NotificationsUserController {
+  constructor(private readonly svc: NotificationsService) {}
+
+  @Get()
+  list(@Request() req: any, @Query("limit") limit?: string) {
+    return this.svc.findByUser(req.user.id, limit ? Number(limit) : 20);
+  }
+}
@@ -1,12 +1,12 @@
 import { Module } from "@nestjs/common";
 import { NotificationsService } from "./notifications.service";
-import { NotificationsController } from "./notifications.controller";
+import { NotificationsController, NotificationsUserController } from "./notifications.controller";
 import { PrismaModule } from "../prisma/prisma.module";
 import { IntegrationsModule } from "../integrations/integrations.module";

@Module({
  imports: [PrismaModule, IntegrationsModule],
-  controllers: [NotificationsController],
+  controllers: [NotificationsController, NotificationsUserController],
  providers: [NotificationsService],
  exports: [NotificationsService],
 })
@@ -3,27 +3,21 @@ import {
  UseGuards, UseInterceptors, UploadedFiles,
 } from "@nestjs/common";
 import { FilesInterceptor } from "@nestjs/platform-express";
-import { diskStorage } from "multer";
-import { extname, join } from "path";
-import { existsSync, mkdirSync } from "fs";
-import { randomUUID } from "crypto";
+import { memoryStorage } from "multer";
+import { extname } from "path";
 import { PackagesService } from "./packages.service";
+import { StorageService } from "../storage/storage.service";
 import { CreatePackageDto, UpdateStatusDto, VerifyPackageDto, SenaeDeclarationDto } from "./dto/package.dto";
 import { JwtAuthGuard, RolesGuard, Roles } from "../auth/guards/auth.guard";
 import { CurrentUser } from "../auth/decorators/current-user.decorator";
-import { ConfigService } from "@nestjs/config";

@Controller("packages")
@UseGuards(JwtAuthGuard, RolesGuard)
 export class PackagesController {
-  private readonly apiUrl: string;
-
  constructor(
    private svc: PackagesService,
-    private config: ConfigService,
-  ) {
-    this.apiUrl = this.config.get("API_URL", "http://localhost:3001");
-  }
+    private storage: StorageService,
+  ) {}

  @Get()
  findAll(
@@ -72,23 +66,13 @@ export class PackagesController {
    return this.svc.verifyPackage(id, dto, user.id);
  }

-  /** Bodega: upload photos via multipart form (doc §10 step 4) */
+  /** Bodega: upload photos via multipart form — stored via StorageService (doc §10 step 4) */
  @Post(":id/photos")
  @Roles("OPERADOR_BODEGA", "ADMIN_EMPRESA", "SUPER_ADMIN")
  @UseInterceptors(
    FilesInterceptor("photos", 10, {
-      storage: diskStorage({
-        destination: (req, file, cb) => {
-          const pkgId = Array.isArray(req.params.id) ? req.params.id[0] : req.params.id;
-          const dir = join(process.cwd(), "uploads", "packages", pkgId);
-          if (!existsSync(dir)) mkdirSync(dir, { recursive: true });
-          cb(null, dir);
-        },
-        filename: (req, file, cb) => {
-          cb(null, `${randomUUID()}${extname(file.originalname)}`);
-        },
-      }),
-      fileFilter: (req, file, cb) => {
+      storage: memoryStorage(),
+      fileFilter: (_req, file, cb) => {
        const allowed = /jpg|jpeg|png|gif|webp/;
        cb(null, allowed.test(extname(file.originalname).toLowerCase()));
      },
@@ -100,9 +84,15 @@ export class PackagesController {
    @UploadedFiles() files: Express.Multer.File[],
    @CurrentUser() user: any,
  ): Promise<any> {
-    const baseUrl = this.apiUrl;
-    const photoUrls = (files || []).map(
-      f => `${baseUrl}/uploads/packages/${id}/${f.filename}`,
+    const photoUrls = await Promise.all(
+      (files || []).map(f =>
+        this.storage.saveFile(
+          `packages/${id}`,
+          f.originalname,
+          f.buffer,
+          f.mimetype,
+        ),
+      ),
    );
    return this.svc.addPhotos(id, photoUrls, user.id);
  }
@@ -4,9 +4,10 @@ import { PackagesController } from "./packages.controller";
 import { PrismaModule } from "../prisma/prisma.module";
 import { ConfigModule } from "@nestjs/config";
 import { NotificationsModule } from "../notifications/notifications.module";
+import { StorageModule } from "../storage/storage.module";

@Module({
-  imports: [PrismaModule, ConfigModule, NotificationsModule],
+  imports: [PrismaModule, ConfigModule, NotificationsModule, StorageModule],
  providers: [PackagesService],
  controllers: [PackagesController],
  exports: [PackagesService],
@@ -15,6 +15,10 @@ export class CreatePreAlertDto {
  @IsOptional()
  @IsString()
  vendorTracking?: string;
+
+  @IsOptional()
+  @IsString()
+  estimatedArrival?: string;
 }

 export class UpdatePreAlertStatusDto {
@@ -1,13 +1,22 @@
-import { Controller, Get, Post, Patch, Delete, Body, Param, UseGuards } from "@nestjs/common";
+import {
+  Controller, Get, Post, Patch, Delete, Body, Param, UseGuards,
+  UseInterceptors, UploadedFile,
+} from "@nestjs/common";
+import { FileInterceptor } from "@nestjs/platform-express";
+import { memoryStorage } from "multer";
 import { PreAlertsService } from "./pre-alerts.service";
 import { CreatePreAlertDto, UpdatePreAlertStatusDto } from "./dto/pre-alert.dto";
 import { JwtAuthGuard, RolesGuard, Roles } from "../auth/guards/auth.guard";
 import { CurrentUser } from "../auth/decorators/current-user.decorator";
+import { StorageService } from "../storage/storage.service";

@Controller("pre-alerts")
@UseGuards(JwtAuthGuard, RolesGuard)
 export class PreAlertsController {
-  constructor(private svc: PreAlertsService) {}
+  constructor(
+    private svc: PreAlertsService,
+    private storage: StorageService,
+  ) {}

  @Get()
  findAll(@CurrentUser() user: any) {
@@ -20,6 +29,34 @@ export class PreAlertsController {
    return this.svc.create(dto, user);
  }

+  /** Upload invoice PDF/image for a pre-alert (doc §07 / §09) */
+  @Post(":id/invoice")
+  @Roles("CLIENTE")
+  @UseInterceptors(
+    FileInterceptor("invoice", {
+      storage: memoryStorage(),
+      fileFilter: (_req, file, cb) => {
+        const allowed = /pdf|jpg|jpeg|png|webp/;
+        const ext = file.originalname.split(".").pop()?.toLowerCase() ?? "";
+        cb(null, allowed.test(ext));
+      },
+      limits: { fileSize: 10 * 1024 * 1024 }, // 10 MB
+    }),
+  )
+  async uploadInvoice(
+    @Param("id") id: string,
+    @UploadedFile() file: Express.Multer.File,
+    @CurrentUser() user: any,
+  ): Promise<any> {
+    const url = await this.storage.saveFile(
+      "invoices",
+      file.originalname,
+      file.buffer,
+      file.mimetype,
+    );
+    return this.svc.attachInvoice(id, url, user);
+  }
+
  @Patch(":id/status")
  @Roles("OPERADOR_BODEGA", "ADMIN_EMPRESA", "SUPER_ADMIN")
  updateStatus(@Param("id") id: string, @Body() dto: UpdatePreAlertStatusDto): Promise<any> {
@@ -1,6 +1,12 @@
 import { Module } from "@nestjs/common";
 import { PreAlertsController } from "./pre-alerts.controller";
 import { PreAlertsService } from "./pre-alerts.service";
+import { StorageModule } from "../storage/storage.module";
+import { PrismaModule } from "../prisma/prisma.module";

-@Module({ controllers: [PreAlertsController], providers: [PreAlertsService] })
+@Module({
+  imports: [PrismaModule, StorageModule],
+  controllers: [PreAlertsController],
+  providers: [PreAlertsService],
+})
 export class PreAlertsModule {}
@@ -19,17 +19,29 @@ export class PreAlertsService {
  async create(dto: CreatePreAlertDto, user: any): Promise<any> {
    return this.prisma.client.preAlert.create({
      data: {
-        tenantId: user.tenantId,
-        userId:   user.id,
-        store:    dto.store,
-        description:    dto.description,
-        declaredValue:  dto.declaredValue ?? 0,
-        vendorTracking: dto.vendorTracking,
-        status: "PENDIENTE",
+        tenantId:        user.tenantId,
+        userId:          user.id,
+        store:           dto.store,
+        description:     dto.description,
+        declaredValue:   dto.declaredValue ?? 0,
+        vendorTracking:  dto.vendorTracking,
+        estimatedArrival: dto.estimatedArrival ? new Date(dto.estimatedArrival) : undefined,
+        status:          "PENDIENTE",
      },
    });
  }

+  /** Attach invoice URL to a pre-alert (doc §07/§09) */
+  async attachInvoice(id: string, invoiceKey: string, user: any): Promise<any> {
+    const alert = await this.prisma.client.preAlert.findUnique({ where: { id } });
+    if (!alert) throw new NotFoundException("Pre-alerta no encontrada.");
+    if (user.role === "CLIENTE" && alert.userId !== user.id) throw new ForbiddenException();
+    return this.prisma.client.preAlert.update({
+      where: { id },
+      data: { invoiceKey },
+    });
+  }
+
  async updateStatus(id: string, dto: UpdatePreAlertStatusDto): Promise<any> {
    const alert = await this.prisma.client.preAlert.findUnique({ where: { id } });
    if (!alert) throw new NotFoundException("Pre-alerta no encontrada.");
@@ -3,38 +3,121 @@ import { ConfigService } from "@nestjs/config";
 import * as fs from "fs";
 import * as path from "path";
 import { randomUUID } from "crypto";
+import { S3Client, DeleteObjectCommand, PutObjectCommand } from "@aws-sdk/client-s3";
+import { getSignedUrl } from "@aws-sdk/s3-request-presigner";
+import { GetObjectCommand } from "@aws-sdk/client-s3";

+/**
+ * StorageService — dual mode:
+ *   • If S3_ENDPOINT is set → MinIO / S3-compatible storage
+ *   • Otherwise              → local disk under ./uploads/ (development)
+ */
@Injectable()
 export class StorageService {
  private readonly logger = new Logger(StorageService.name);
  private readonly uploadDir: string;
  private readonly baseUrl: string;
+  private readonly s3?: S3Client;
+  private readonly bucket?: string;
+  private readonly s3Public?: string;

  constructor(private config: ConfigService) {
    this.uploadDir = path.join(process.cwd(), "uploads");
-    this.baseUrl = this.config.get("API_URL", "http://localhost:3001");
-    // ensure uploads dir exists
-    if (!fs.existsSync(this.uploadDir)) {
-      fs.mkdirSync(this.uploadDir, { recursive: true });
+    this.baseUrl   = this.config.get("API_URL", "http://localhost:3001");
+
+    const endpoint  = this.config.get<string>("S3_ENDPOINT");
+    const accessKey = this.config.get<string>("S3_ACCESS_KEY");
+    const secretKey = this.config.get<string>("S3_SECRET_KEY");
+    const region    = this.config.get<string>("S3_REGION", "us-east-1");
+    const forcePath = this.config.get<string>("S3_FORCE_PATH_STYLE", "false") === "true";
+    this.bucket     = this.config.get<string>("S3_BUCKET", "moraworld");
+    this.s3Public   = this.config.get<string>("S3_PUBLIC_URL") ?? endpoint;
+
+    if (endpoint && accessKey && secretKey) {
+      this.s3 = new S3Client({
+        endpoint,
+        region,
+        forcePathStyle: forcePath,
+        credentials: { accessKeyId: accessKey, secretAccessKey: secretKey },
+      });
+      this.logger.log(`[STORAGE] S3/MinIO mode — endpoint: ${endpoint}, bucket: ${this.bucket}`);
+    } else {
+      // Local disk fallback
+      if (!fs.existsSync(this.uploadDir)) {
+        fs.mkdirSync(this.uploadDir, { recursive: true });
+      }
+      this.logger.log("[STORAGE] Local disk mode (no S3_ENDPOINT configured)");
    }
  }

-  async saveFile(subdir: string, originalName: string, buffer: Buffer): Promise<string> {
-    const ext = path.extname(originalName);
+  get isS3Mode(): boolean { return !!this.s3; }
+
+  /**
+   * Store a file. Returns its public URL.
+   * @param subdir  e.g. "packages/pkg-123" or "invoices"
+   * @param originalName  e.g. "photo.jpg"
+   * @param buffer  file contents
+   * @param mimeType  e.g. "image/jpeg"
+   */
+  async saveFile(
+    subdir: string,
+    originalName: string,
+    buffer: Buffer,
+    mimeType = "application/octet-stream",
+  ): Promise<string> {
+    const ext      = path.extname(originalName);
    const filename = `${randomUUID()}${ext}`;
+    const key      = `${subdir}/${filename}`;
+
+    if (this.s3) {
+      await this.s3.send(new PutObjectCommand({
+        Bucket:      this.bucket!,
+        Key:         key,
+        Body:        buffer,
+        ContentType: mimeType,
+        // ACL not used — presigned URLs or public endpoint handle access
+      }));
+      // Return public path (either bucket/key or via configured public URL)
+      return `${this.s3Public}/${this.bucket}/${key}`;
+    }
+
+    // Local disk
    const dir = path.join(this.uploadDir, subdir);
    if (!fs.existsSync(dir)) fs.mkdirSync(dir, { recursive: true });
-    const filepath = path.join(dir, filename);
-    fs.writeFileSync(filepath, buffer);
-    // Return URL relative to API base
-    return `${this.baseUrl}/uploads/${subdir}/${filename}`;
+    fs.writeFileSync(path.join(dir, filename), buffer);
+    return `${this.baseUrl}/uploads/${key}`;
  }

-  async deleteFile(url: string): Promise<void> {
+  /**
+   * Generate a presigned GET URL for an S3 key (valid 1 hour).
+   * Falls through to a direct URL if not in S3 mode.
+   */
+  async presign(keyOrUrl: string, expiresIn = 3600): Promise<string> {
+    if (!this.s3) return keyOrUrl;
+    // If a full URL was passed, extract the key
+    const key = keyOrUrl.includes(`/${this.bucket}/`)
+      ? keyOrUrl.split(`/${this.bucket}/`)[1]
+      : keyOrUrl;
+    return getSignedUrl(
+      this.s3,
+      new GetObjectCommand({ Bucket: this.bucket!, Key: key }),
+      { expiresIn },
+    );
+  }
+
+  /** Delete a file by its URL or S3 key */
+  async deleteFile(urlOrKey: string): Promise<void> {
    try {
-      const relative = url.replace(/^https?:\/\/[^/]+\/uploads\//, "");
-      const filepath = path.join(this.uploadDir, relative);
-      if (fs.existsSync(filepath)) fs.unlinkSync(filepath);
+      if (this.s3) {
+        const key = urlOrKey.includes(`/${this.bucket}/`)
+          ? urlOrKey.split(`/${this.bucket}/`)[1]
+          : urlOrKey;
+        await this.s3.send(new DeleteObjectCommand({ Bucket: this.bucket!, Key: key }));
+      } else {
+        const relative = urlOrKey.replace(/^https?:\/\/[^/]+\/uploads\//, "");
+        const filepath  = path.join(this.uploadDir, relative);
+        if (fs.existsSync(filepath)) fs.unlinkSync(filepath);
+      }
    } catch (e: unknown) {
      this.logger.warn(`deleteFile failed: ${(e as Error).message}`);
    }
@@ -1,8 +1,8 @@
-import { Controller, Get, Patch, Body, Param, Query, UseGuards } from "@nestjs/common";
+import { Controller, Get, Post, Patch, Body, Param, Query, UseGuards } from "@nestjs/common";
 import { UsersService } from "./users.service";
 import { JwtAuthGuard, RolesGuard, Roles } from "../auth/guards/auth.guard";
 import { CurrentUser } from "../auth/decorators/current-user.decorator";
-import { IsEnum, IsBoolean } from "class-validator";
+import { IsEnum, IsBoolean, IsEmail, IsString, MinLength, IsOptional } from "class-validator";

 class UpdateRoleDto {
  @IsEnum(["CLIENTE","OPERADOR_BODEGA","AGENTE_ADUANERO","ADMIN_EMPRESA","SUPER_ADMIN","SOPORTE"])
@@ -11,6 +11,15 @@ class UpdateRoleDto {
 class SetActiveDto {
  @IsBoolean() isActive!: boolean;
 }
+class CreateUserDto {
+  @IsEmail()    email!: string;
+  @IsString() @MinLength(8) password!: string;
+  @IsString()   firstName!: string;
+  @IsString()   lastName!: string;
+  @IsOptional() @IsString() phone?: string;
+  @IsEnum(["CLIENTE","OPERADOR_BODEGA","AGENTE_ADUANERO","ADMIN_EMPRESA","SUPER_ADMIN","SOPORTE"])
+  role!: string;
+}

@Controller("users")
@UseGuards(JwtAuthGuard, RolesGuard)
@@ -29,6 +38,13 @@ export class UsersController {
    return this.svc.findOne(id);
  }

+  /** Admin creates a user directly (doc §12) */
+  @Post()
+  @Roles("ADMIN_EMPRESA", "SUPER_ADMIN")
+  create(@Body() dto: CreateUserDto, @CurrentUser() user: any): Promise<any> {
+    return this.svc.create(dto, user.tenantId);
+  }
+
  @Patch(":id/role")
  @Roles("ADMIN_EMPRESA", "SUPER_ADMIN")
  updateRole(@Param("id") id: string, @Body() dto: UpdateRoleDto): Promise<any> {
@@ -1,6 +1,12 @@
 import { Module } from "@nestjs/common";
 import { UsersController } from "./users.controller";
 import { UsersService } from "./users.service";
+import { PrismaModule } from "../prisma/prisma.module";

-@Module({ controllers: [UsersController], providers: [UsersService] })
+@Module({
+  imports: [PrismaModule],
+  controllers: [UsersController],
+  providers: [UsersService],
+  exports: [UsersService],
+})
 export class UsersModule {}
@@ -1,5 +1,7 @@
-import { Injectable, NotFoundException } from "@nestjs/common";
+import { Injectable, NotFoundException, ConflictException } from "@nestjs/common";
 import { PrismaService } from "../prisma/prisma.service";
+import * as bcrypt from "bcrypt";
+import { generateSuiteCode } from "../common/utils/suite-code.util";

@Injectable()
 export class UsersService {
@@ -39,6 +41,52 @@ export class UsersService {
    return user;
  }

+  /** Admin creates a user directly (no self-registration) */
+  async create(dto: {
+    email: string;
+    password: string;
+    firstName: string;
+    lastName: string;
+    phone?: string;
+    role: string;
+  }, tenantId: string): Promise<any> {
+    const exists = await this.prisma.client.user.findFirst({
+      where: { email: dto.email, tenantId },
+    });
+    if (exists) throw new ConflictException("Ya existe un usuario con ese email.");
+
+    const hash = await bcrypt.hash(dto.password, 12);
+
+    // Generate suite code for CLIENTE role
+    let suiteCode: string | undefined;
+    if (dto.role === "CLIENTE") {
+      const count = await this.prisma.client.user.count({ where: { tenantId } });
+      suiteCode = generateSuiteCode(count + 1);
+    }
+
+    const user = await this.prisma.client.user.create({
+      data: {
+        tenantId,
+        email:        dto.email,
+        passwordHash: hash,
+        firstName:    dto.firstName,
+        lastName:     dto.lastName,
+        phone:        dto.phone,
+        role:         dto.role as any,
+        isActive:     true,
+      },
+    });
+
+    if (suiteCode) {
+      await this.prisma.client.suite.create({
+        data: { tenantId, userId: user.id, code: suiteCode },
+      });
+    }
+
+    const { passwordHash: _, ...safe } = user as any;
+    return safe;
+  }
+
  async updateRole(id: string, role: string): Promise<any> {
    return this.prisma.client.user.update({ where: { id }, data: { role: role as any } });
  }
@@ -4,13 +4,24 @@ import { api } from "@/lib/api";

 const ROLES = ["CLIENTE","OPERADOR_BODEGA","AGENTE_ADUANERO","ADMIN_EMPRESA","SUPER_ADMIN","SOPORTE"];

+const BLANK_FORM = { email: "", password: "", firstName: "", lastName: "", phone: "", role: "CLIENTE" };
+
 export default function UsuariosPage() {
-  const [users, setUsers] = useState<any[]>([]);
-  const [loading, setLoading] = useState(true);
-  const [search, setSearch] = useState("");
+  const [users, setUsers]       = useState<any[]>([]);
+  const [loading, setLoading]   = useState(true);
+  const [search, setSearch]     = useState("");
  const [updating, setUpdating] = useState<string | null>(null);

-  const load = (s?: string) => { setLoading(true); api.users.list(s).then(setUsers).catch(()=>{}).finally(()=>setLoading(false)); };
+  // Create modal
+  const [showModal, setShowModal] = useState(false);
+  const [form, setForm]           = useState({ ...BLANK_FORM });
+  const [creating, setCreating]   = useState(false);
+  const [createError, setCreateError] = useState("");
+
+  const load = (s?: string) => {
+    setLoading(true);
+    api.users.list(s).then(setUsers).catch(() => {}).finally(() => setLoading(false));
+  };
  useEffect(() => { load(); }, []);

  const handleRoleChange = async (id: string, role: string) => {
@@ -25,23 +36,62 @@ export default function UsuariosPage() {
    finally { setUpdating(null); }
  };

+  const handleCreate = async (e: React.FormEvent) => {
+    e.preventDefault();
+    setCreating(true); setCreateError("");
+    try {
+      await api.users.create({
+        email:     form.email,
+        password:  form.password,
+        firstName: form.firstName,
+        lastName:  form.lastName,
+        phone:     form.phone || undefined,
+        role:      form.role,
+      });
+      setShowModal(false);
+      setForm({ ...BLANK_FORM });
+      load();
+    } catch (err: any) {
+      setCreateError(err.message ?? "Error al crear usuario");
+    } finally { setCreating(false); }
+  };
+
+  const setF = (k: string) => (e: React.ChangeEvent<HTMLInputElement | HTMLSelectElement>) =>
+    setForm(f => ({ ...f, [k]: e.target.value }));
+
  return (
    <div>
      <div className="mb-6 flex justify-between items-center flex-wrap gap-4">
-        <div><h1 className="dash-page-title">Usuarios</h1><p className="dash-page-subtitle">Gestión de cuentas y roles.</p></div>
+        <div>
+          <h1 className="dash-page-title">Usuarios</h1>
+          <p className="dash-page-subtitle">Gestión de cuentas y roles.</p>
+        </div>
        <div style={{ display: "flex", gap: ".75rem" }}>
-          <input className="input" style={{ maxWidth: 260 }} placeholder="Buscar por nombre o email…"
+          <input className="input" style={{ maxWidth: 240 }} placeholder="Buscar por nombre o email…"
            value={search} onChange={e => setSearch(e.target.value)}
            onKeyDown={e => e.key === "Enter" && load(search)} />
-          <button className="btn btn-primary" onClick={() => load(search)}>Buscar</button>
+          <button className="btn btn-outline" onClick={() => load(search)}>Buscar</button>
+          <button className="btn btn-primary" onClick={() => { setCreateError(""); setForm({ ...BLANK_FORM }); setShowModal(true); }}>
+            + Nuevo usuario
+          </button>
        </div>
      </div>

      <div className="card">
        <div className="table-wrap" style={{ borderRadius: "var(--radius-lg)", border: "none" }}>
-          {loading ? <div style={{ padding: "3rem", textAlign: "center" }}><div className="spinner mx-auto" /></div> : (
+          {loading ? (
+            <div style={{ padding: "3rem", textAlign: "center" }}><div className="spinner mx-auto" /></div>
+          ) : users.length === 0 ? (
+            <div style={{ padding: "3rem", textAlign: "center", color: "var(--gray-500)" }}>
+              No se encontraron usuarios.
+            </div>
+          ) : (
            <table>
-              <thead><tr><th>Nombre</th><th>Email</th><th>Casillero</th><th>Rol</th><th>Estado</th><th>Acciones</th></tr></thead>
+              <thead>
+                <tr>
+                  <th>Nombre</th><th>Email</th><th>Casillero</th><th>Rol</th><th>Estado</th><th>Acciones</th>
+                </tr>
+              </thead>
              <tbody>
                {users.map(u => (
                  <tr key={u.id}>
@@ -55,7 +105,11 @@ export default function UsuariosPage() {
                        {ROLES.map(r => <option key={r} value={r}>{r}</option>)}
                      </select>
                    </td>
-                    <td><span className={`badge ${u.isActive ? "badge-green" : "badge-red"}`}>{u.isActive ? "Activo" : "Inactivo"}</span></td>
+                    <td>
+                      <span className={`badge ${u.isActive ? "badge-green" : "badge-red"}`}>
+                        {u.isActive ? "Activo" : "Inactivo"}
+                      </span>
+                    </td>
                    <td>
                      <button
                        className={`btn btn-sm ${u.isActive ? "btn-danger" : "btn-success"}`}
@@ -72,6 +126,60 @@ export default function UsuariosPage() {
          )}
        </div>
      </div>
+
+      {/* Create user modal */}
+      {showModal && (
+        <div style={{
+          position: "fixed", inset: 0, background: "rgba(0,0,0,.45)", zIndex: 1000,
+          display: "flex", alignItems: "center", justifyContent: "center", padding: "1rem"
+        }} onClick={e => { if (e.target === e.currentTarget) setShowModal(false); }}>
+          <div className="card" style={{ width: "100%", maxWidth: 480, maxHeight: "90vh", overflowY: "auto" }}>
+            <div className="card-header" style={{ display: "flex", justifyContent: "space-between", alignItems: "center" }}>
+              <span className="font-semibold">Crear nuevo usuario</span>
+              <button className="btn btn-ghost btn-sm" onClick={() => setShowModal(false)}>✕</button>
+            </div>
+            <div className="card-body">
+              {createError && <div className="alert alert-error mb-4">{createError}</div>}
+              <form onSubmit={handleCreate} style={{ display: "flex", flexDirection: "column", gap: "1rem" }}>
+                <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: ".75rem" }}>
+                  <div className="form-group">
+                    <label className="form-label">Nombre *</label>
+                    <input className="form-input" required value={form.firstName} onChange={setF("firstName")} placeholder="Juan" />
+                  </div>
+                  <div className="form-group">
+                    <label className="form-label">Apellido *</label>
+                    <input className="form-input" required value={form.lastName} onChange={setF("lastName")} placeholder="Pérez" />
+                  </div>
+                </div>
+                <div className="form-group">
+                  <label className="form-label">Email *</label>
+                  <input className="form-input" required type="email" value={form.email} onChange={setF("email")} placeholder="juan@ejemplo.com" />
+                </div>
+                <div className="form-group">
+                  <label className="form-label">Contraseña inicial *</label>
+                  <input className="form-input" required type="password" minLength={8} value={form.password} onChange={setF("password")} placeholder="Mínimo 8 caracteres" />
+                </div>
+                <div className="form-group">
+                  <label className="form-label">Teléfono</label>
+                  <input className="form-input" type="tel" value={form.phone} onChange={setF("phone")} placeholder="+593 99 000 0000" />
+                </div>
+                <div className="form-group">
+                  <label className="form-label">Rol *</label>
+                  <select className="form-input" value={form.role} onChange={setF("role")}>
+                    {ROLES.map(r => <option key={r} value={r}>{r}</option>)}
+                  </select>
+                </div>
+                <div style={{ display: "flex", gap: ".75rem", justifyContent: "flex-end", marginTop: ".5rem" }}>
+                  <button type="button" className="btn btn-outline" onClick={() => setShowModal(false)}>Cancelar</button>
+                  <button type="submit" className="btn btn-primary" disabled={creating}>
+                    {creating ? "Creando…" : "Crear usuario"}
+                  </button>
+                </div>
+              </form>
+            </div>
+          </div>
+        </div>
+      )}
    </div>
  );
 }
@@ -37,10 +37,12 @@ const STATUS_BADGE: Record<string, string> = {
 const PAYABLE_STATUSES = ["VERIFICADO", "DECLARACION_ADUANERA"];

 export default function MisPaquetesPage() {
-  const [packages, setPackages] = useState<any[]>([]);
-  const [loading, setLoading]   = useState(true);
-  const [filter, setFilter]     = useState("");
-  const [selected, setSelected] = useState<any | null>(null);
+  const [packages, setPackages]     = useState<any[]>([]);
+  const [loading, setLoading]       = useState(true);
+  const [filter, setFilter]         = useState("");
+  const [selected, setSelected]     = useState<string | null>(null);
+  const [detail, setDetail]         = useState<Record<string, any>>({});
+  const [loadingId, setLoadingId]   = useState<string | null>(null);

  useEffect(() => {
    api.packages.list()
@@ -49,6 +51,20 @@ export default function MisPaquetesPage() {
      .finally(() => setLoading(false));
  }, []);

+  // Expand: fetch full package (includes complete statusHistory) on first open
+  const handleExpand = async (p: any) => {
+    if (selected === p.id) { setSelected(null); return; }
+    setSelected(p.id);
+    if (detail[p.id]) return; // already loaded
+    setLoadingId(p.id);
+    try {
+      const full = await api.packages.get(p.id);
+      setDetail(d => ({ ...d, [p.id]: full }));
+    } catch {
+      setDetail(d => ({ ...d, [p.id]: p })); // fallback to list data
+    } finally { setLoadingId(null); }
+  };
+
  const filtered = packages.filter(p =>
    !filter ||
    p.trackingId?.toLowerCase().includes(filter.toLowerCase()) ||
@@ -87,7 +103,7 @@ export default function MisPaquetesPage() {
      ) : (
        <div style={{ display: "flex", flexDirection: "column", gap: "1rem" }}>
          {filtered.map(p => (
-            <div key={p.id} className="card" style={{ cursor: "pointer" }} onClick={() => setSelected(p === selected ? null : p)}>
+            <div key={p.id} className="card" style={{ cursor: "pointer" }} onClick={() => handleExpand(p)}>
              <div className="card-body" style={{ display: "flex", justifyContent: "space-between", alignItems: "center", flexWrap: "wrap", gap: "1rem" }}>
                <div>
                  <div style={{ fontWeight: 700, fontSize: "1rem", color: "var(--primary)" }}>{p.trackingId}</div>
@@ -122,12 +138,14 @@ export default function MisPaquetesPage() {
              </div>

              {/* Detalle expandido */}
-              {selected?.id === p.id && (
+              {selected === p.id && (
                <div className="card-footer" style={{ borderTop: "1px solid var(--gray-100)", paddingTop: "1rem" }}>
                  <div style={{ fontWeight: 600, marginBottom: ".75rem", fontSize: ".9rem" }}>Historial de estados</div>
-                  {p.statusHistory?.length ? (
+                  {loadingId === p.id ? (
+                    <div style={{ display: "flex", justifyContent: "center", padding: "1rem" }}><div className="spinner" /></div>
+                  ) : (detail[p.id]?.statusHistory ?? p.statusHistory)?.length ? (
                    <div className="timeline">
-                      {p.statusHistory.map((h: any, i: number) => (
+                      {(detail[p.id]?.statusHistory ?? p.statusHistory).map((h: any, i: number) => (
                        <div key={h.id} className="timeline-item">
                          <div className={`timeline-dot ${i === 0 ? "current" : "active"}`} />
                          <div>
@@ -2,65 +2,96 @@
 import { useEffect, useState } from "react";
 import Link from "next/link";
 import { api, getUser } from "@/lib/api";
+import { Timestamp } from "@/app/_components/timestamp";

+// §08 — 11 estados oficiales del ciclo de vida
 const STATUS_LABEL: Record<string, string> = {
-  RECIBIDO_EN_NJ:       "Recibido en NJ",
-  EN_PROCESO:           "En proceso",
-  EN_CAMINO_A_ECUADOR:  "En camino a Ecuador",
-  EN_ADUANA:            "En aduana",
-  EN_BODEGA_EC:         "En bodega EC",
-  LISTO_PARA_RETIRO:    "Listo para retiro",
+  REGISTRADO:           "Registrado",
+  EN_TRANSITO_BODEGA:   "En tránsito a NJ",
+  RECIBIDO_BODEGA:      "Recibido en NJ",
+  EN_VERIFICACION:      "En verificación",
+  VERIFICADO:           "Verificado",
+  DECLARACION_ADUANERA: "Declaración aduanera",
+  EN_TRANSITO_ECUADOR:  "En tránsito a Ecuador",
+  EN_ADUANA_ECUADOR:    "En aduana Ecuador",
+  LISTO_ENTREGA:        "Listo para entrega",
  ENTREGADO:            "Entregado",
-  RETENIDO_ADUANA:      "Retenido en aduana",
-  DEVUELTO:             "Devuelto",
-  PERDIDO:              "Perdido",
-  CANCELADO:            "Cancelado",
+  INCIDENCIA:           "Incidencia",
 };
+
 const STATUS_BADGE: Record<string, string> = {
-  RECIBIDO_EN_NJ: "badge-blue", EN_PROCESO: "badge-yellow",
-  EN_CAMINO_A_ECUADOR: "badge-orange", EN_ADUANA: "badge-yellow",
-  EN_BODEGA_EC: "badge-blue", LISTO_PARA_RETIRO: "badge-green",
-  ENTREGADO: "badge-green", RETENIDO_ADUANA: "badge-red",
-  DEVUELTO: "badge-red", PERDIDO: "badge-red", CANCELADO: "badge-gray",
+  REGISTRADO:           "badge-gray",
+  EN_TRANSITO_BODEGA:   "badge-yellow",
+  RECIBIDO_BODEGA:      "badge-blue",
+  EN_VERIFICACION:      "badge-yellow",
+  VERIFICADO:           "badge-green",
+  DECLARACION_ADUANERA: "badge-blue",
+  EN_TRANSITO_ECUADOR:  "badge-orange",
+  EN_ADUANA_ECUADOR:    "badge-red",
+  LISTO_ENTREGA:        "badge-green",
+  ENTREGADO:            "badge-green",
+  INCIDENCIA:           "badge-red",
 };

+const STATUS_COLOR: Record<string, string> = {
+  REGISTRADO: "#6B7280", EN_TRANSITO_BODEGA: "#F59E0B", RECIBIDO_BODEGA: "#3B82F6",
+  EN_VERIFICACION: "#8B5CF6", VERIFICADO: "#10B981", DECLARACION_ADUANERA: "#0057FF",
+  EN_TRANSITO_ECUADOR: "#F97316", EN_ADUANA_ECUADOR: "#EF4444",
+  LISTO_ENTREGA: "#84CC16", ENTREGADO: "#10B981", INCIDENCIA: "#EF4444",
+};
+
+// §08 ordered pipeline for progress bar
+const STATUS_ORDER = [
+  "REGISTRADO","EN_TRANSITO_BODEGA","RECIBIDO_BODEGA","EN_VERIFICACION",
+  "VERIFICADO","DECLARACION_ADUANERA","EN_TRANSITO_ECUADOR","EN_ADUANA_ECUADOR",
+  "LISTO_ENTREGA","ENTREGADO",
+];
+
 export default function PortalDashboard() {
  const user = getUser();
-  const [packages, setPackages] = useState<any[]>([]);
+  const [packages, setPackages]           = useState<any[]>([]);
  const [notifications, setNotifications] = useState<any[]>([]);
-  const [suite, setSuite] = useState<any>(null);
-  const [loading, setLoading] = useState(true);
+  const [suite, setSuite]                 = useState<any>(null);
+  const [preAlerts, setPreAlerts]         = useState<any[]>([]);
+  const [loading, setLoading]             = useState(true);

  useEffect(() => {
    Promise.all([
      api.packages.list(),
      api.auth.me(),
-    ]).then(([pkgs, me]) => {
-      setPackages(pkgs.slice(0, 5));
-      setNotifications([]);
+      api.preAlerts.list().catch(() => []),
+      api.notifications.list(10).catch(() => []),
+    ]).then(([pkgs, me, alerts, notifs]) => {
+      setPackages(pkgs);
      setSuite(me.suite);
+      setPreAlerts(alerts);
+      setNotifications(notifs);
    }).catch(() => {}).finally(() => setLoading(false));
  }, []);

  if (loading) return <div className="flex justify-center py-16"><div className="spinner" /></div>;

-  const active = packages.filter(p => !["ENTREGADO","CANCELADO","DEVUELTO"].includes(p.status)).length;
+  const active    = packages.filter(p => !["ENTREGADO","INCIDENCIA"].includes(p.status)).length;
  const delivered = packages.filter(p => p.status === "ENTREGADO").length;
+  const pending   = preAlerts.filter(a => a.status === "PENDIENTE").length;
+
+  // Last 3 active packages
+  const recent = packages.slice(0, 5);

  return (
    <div>
      <div className="mb-6">
        <h1 className="dash-page-title">Bienvenido, {user?.firstName} 👋</h1>
-        <p className="dash-page-subtitle">Gestiona tus envíos y tu casillero en NJ.</p>
+        <p className="dash-page-subtitle">Gestiona tus envíos desde New Jersey hasta Ecuador.</p>
      </div>

-      {/* Stats */}
+      {/* KPIs */}
      <div className="grid-4" style={{ marginBottom: "2rem" }}>
        {[
-          { label: "Paquetes activos",   value: active,            color: "var(--primary)" },
-          { label: "Entregados",          value: delivered,          color: "var(--green)" },
-          { label: "Pre-alertas",         value: "—",                color: "var(--yellow)" },
-          { label: "Mi casillero",        value: suite?.code ?? "—", color: "var(--accent)" },
+          { label: "Paquetes activos",  value: active,              color: "var(--primary)" },
+          { label: "Entregados",         value: delivered,            color: "var(--green)" },
+          { label: "Pre-alertas",        value: pending,              color: "var(--yellow)" },
+          { label: "Mi casillero",       value: suite?.code ?? "—",  color: "var(--accent)" },
        ].map(s => (
          <div key={s.label} className="stat-card">
            <div className="stat-value" style={{ color: s.color }}>{s.value}</div>
@@ -69,29 +100,63 @@ export default function PortalDashboard() {
        ))}
      </div>

-      <div className="grid-2" style={{ gap: "1.5rem" }}>
-        {/* Últimos paquetes */}
+      {/* Suite address callout */}
+      {suite && (
+        <div style={{ background: "var(--blue-50)", border: "1px solid var(--blue-200)", borderRadius: 10, padding: "1rem 1.25rem", marginBottom: "1.5rem", display: "flex", gap: "1rem", alignItems: "center", flexWrap: "wrap" }}>
+          <div style={{ fontSize: "1.5rem" }}>📦</div>
+          <div style={{ flex: 1, minWidth: 0 }}>
+            <div style={{ fontWeight: 700, fontSize: ".9rem", color: "var(--primary)", marginBottom: ".25rem" }}>Tu dirección de envío en NJ</div>
+            <div style={{ fontFamily: "monospace", fontSize: ".85rem", color: "var(--gray-700)" }}>
+              150 N Day St, <strong>{suite.code}</strong>, City of Orange, NJ 07050, EE.UU.
+            </div>
+          </div>
+          <Link href="/portal/mi-casillero" className="btn btn-outline btn-sm">Ver casillero →</Link>
+        </div>
+      )}
+
+      <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: "1.5rem" }}>
+        {/* Paquetes recientes con mini-barra de progreso */}
        <div className="card">
-          <div className="card-header flex justify-between items-center">
+          <div className="card-header" style={{ display: "flex", justifyContent: "space-between", alignItems: "center" }}>
            <span className="font-semibold">Paquetes recientes</span>
            <Link href="/portal/mis-paquetes" className="btn btn-ghost btn-sm text-primary">Ver todos →</Link>
          </div>
          <div className="card-body" style={{ padding: 0 }}>
-            {packages.length === 0 ? (
-              <p style={{ padding: "1.5rem", color: "var(--gray-500)", textAlign: "center" }}>Aún no tienes paquetes.</p>
+            {recent.length === 0 ? (
+              <div style={{ padding: "2rem", textAlign: "center" }}>
+                <div style={{ fontSize: "2rem", marginBottom: ".5rem" }}>📭</div>
+                <p style={{ color: "var(--gray-500)", fontSize: ".9rem" }}>Aún no tienes paquetes.</p>
+                <Link href="/portal/pre-alerta" className="btn btn-primary btn-sm" style={{ marginTop: ".75rem" }}>
+                  Registrar primera compra
+                </Link>
+              </div>
            ) : (
-              <div className="table-wrap" style={{ border: "none", borderRadius: 0 }}>
-                <table>
-                  <tbody>
-                    {packages.map(p => (
-                      <tr key={p.id}>
-                        <td><Link href={`/portal/mis-paquetes?id=${p.id}`} style={{ color: "var(--primary)", fontWeight: 600 }}>{p.trackingId}</Link></td>
-                        <td className="text-sm text-muted truncate" style={{ maxWidth: 120 }}>{p.description ?? "—"}</td>
-                        <td><span className={`badge ${STATUS_BADGE[p.status] ?? "badge-gray"}`}>{STATUS_LABEL[p.status] ?? p.status}</span></td>
-                      </tr>
-                    ))}
-                  </tbody>
-                </table>
+              <div style={{ display: "flex", flexDirection: "column", gap: 0 }}>
+                {recent.map((p, i) => {
+                  const step = STATUS_ORDER.indexOf(p.status);
+                  const pct  = step >= 0 ? Math.round(((step + 1) / STATUS_ORDER.length) * 100) : 0;
+                  return (
+                    <div key={p.id} style={{ padding: "1rem 1.25rem", borderBottom: i < recent.length - 1 ? "1px solid var(--gray-100)" : "none" }}>
+                      <div style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-start", marginBottom: ".4rem" }}>
+                        <div>
+                          <Link href={`/portal/mis-paquetes?id=${p.id}`} style={{ color: "var(--primary)", fontWeight: 700, fontSize: ".9rem" }}>
+                            {p.trackingId}
+                          </Link>
+                          <div style={{ fontSize: ".78rem", color: "var(--gray-500)", marginTop: ".1rem", maxWidth: 200, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }}>
+                            {p.description ?? "Sin descripción"}
+                          </div>
+                        </div>
+                        <span className={`badge ${STATUS_BADGE[p.status] ?? "badge-gray"}`} style={{ fontSize: ".7rem" }}>
+                          {STATUS_LABEL[p.status] ?? p.status}
+                        </span>
+                      </div>
+                      {/* Progress bar */}
+                      <div style={{ height: 4, background: "var(--gray-100)", borderRadius: 2, overflow: "hidden" }}>
+                        <div style={{ height: "100%", width: `${pct}%`, background: STATUS_COLOR[p.status] ?? "var(--primary)", borderRadius: 2, transition: "width .3s" }} />
+                      </div>
+                    </div>
+                  );
+                })}
              </div>
            )}
          </div>
@@ -99,19 +164,30 @@ export default function PortalDashboard() {

        {/* Notificaciones */}
        <div className="card">
-          <div className="card-header flex justify-between items-center">
-            <span className="font-semibold">Notificaciones</span>
-            <span className="badge badge-red">{notifications.length}</span>
+          <div className="card-header" style={{ display: "flex", justifyContent: "space-between", alignItems: "center" }}>
+            <span className="font-semibold">Notificaciones recientes</span>
+            {notifications.length > 0 && <span className="badge badge-red">{notifications.length}</span>}
          </div>
          <div className="card-body" style={{ padding: 0 }}>
            {notifications.length === 0 ? (
-              <p style={{ padding: "1.5rem", color: "var(--gray-500)", textAlign: "center" }}>Sin notificaciones nuevas.</p>
+              <div style={{ padding: "2rem", textAlign: "center", color: "var(--gray-500)", fontSize: ".9rem" }}>
+                Sin notificaciones nuevas.
+              </div>
            ) : (
              <div style={{ display: "flex", flexDirection: "column" }}>
-                {notifications.map(n => (
-                  <div key={n.id} style={{ padding: "1rem 1.5rem", borderBottom: "1px solid var(--gray-100)" }}>
-                    <div style={{ fontWeight: 600, fontSize: ".9rem" }}>{n.title}</div>
-                    <div style={{ fontSize: ".8rem", color: "var(--gray-500)", marginTop: ".2rem" }}>{n.body}</div>
+                {notifications.map((n, i) => (
+                  <div key={n.id} style={{ padding: ".875rem 1.25rem", borderBottom: i < notifications.length - 1 ? "1px solid var(--gray-100)" : "none" }}>
+                    <div style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-start", gap: ".5rem" }}>
+                      <div style={{ fontSize: ".82rem", color: "var(--gray-700)", lineHeight: 1.5, flex: 1 }}>
+                        {n.subject || n.body?.slice(0, 100)}
+                      </div>
+                      <span style={{ fontSize: ".7rem", color: "var(--gray-400)", flexShrink: 0 }}>
+                        <Timestamp value={n.createdAt} dateOnly />
+                      </span>
+                    </div>
+                    <div style={{ fontSize: ".75rem", color: "var(--gray-400)", marginTop: ".2rem" }}>
+                      {n.channel === "EMAIL" ? "✉️" : n.channel === "WHATSAPP" ? "💬" : "🔔"} {n.channel}
+                    </div>
                  </div>
                ))}
              </div>
@@ -119,6 +195,22 @@ export default function PortalDashboard() {
          </div>
        </div>
      </div>
+
+      {/* Accesos rápidos */}
+      <div style={{ marginTop: "1.5rem", display: "grid", gridTemplateColumns: "repeat(auto-fill, minmax(180px, 1fr))", gap: "1rem" }}>
+        {[
+          { href: "/portal/pre-alerta",    icon: "📄", label: "Pre-alerta",    desc: "Avisa qué paquete esperas" },
+          { href: "/portal/calculadora",   icon: "💰", label: "Calculadora",   desc: "Estima el costo de envío" },
+          { href: "/portal/consolidacion", icon: "📦", label: "Consolidar",    desc: "Agrupar paquetes" },
+          { href: "/portal/perfil",        icon: "👤", label: "Mi perfil",     desc: "Datos y seguridad" },
+        ].map(a => (
+          <Link key={a.href} href={a.href} className="card" style={{ padding: "1.25rem", textDecoration: "none", display: "block", transition: "box-shadow .2s" }}>
+            <div style={{ fontSize: "1.75rem", marginBottom: ".5rem" }}>{a.icon}</div>
+            <div style={{ fontWeight: 700, fontSize: ".9rem", marginBottom: ".2rem" }}>{a.label}</div>
+            <div style={{ fontSize: ".78rem", color: "var(--gray-500)" }}>{a.desc}</div>
+          </Link>
+        ))}
+      </div>
    </div>
  );
 }
@@ -63,16 +63,31 @@ export default function PreAlertaPage() {
    e.preventDefault();
    setSubmitting(true); setError(""); setSuccess("");
    try {
-      await api.preAlerts.create({
+      const created = await api.preAlerts.create({
        store: form.store,
        vendorTracking: form.vendorTracking || undefined,
        description: form.description,
        declaredValue: parseFloat(form.declaredValue),
        estimatedArrival: form.estimatedArrival || undefined,
      });
-      setSuccess("✅ Pre-alerta registrada exitosamente.");
+      // Upload invoice file if the user selected one
+      if (invoice && created?.id) {
+        try {
+          await api.preAlerts.uploadInvoice(created.id, invoice);
+        } catch {
+          // Non-fatal: alert was created, just notify about the upload failure
+          setSuccess("✅ Pre-alerta registrada. No se pudo subir la factura, inténtalo de nuevo.");
+          setForm({ store: "", vendorTracking: "", description: "", declaredValue: "", estimatedArrival: "" });
+          setUrlInput(""); setInvoice(null);
+          if (invoiceRef.current) invoiceRef.current.value = "";
+          load();
+          return;
+        }
+      }
+      setSuccess("✅ Pre-alerta registrada exitosamente." + (invoice ? " Factura adjuntada." : ""));
      setForm({ store: "", vendorTracking: "", description: "", declaredValue: "", estimatedArrival: "" });
      setUrlInput(""); setInvoice(null);
+      if (invoiceRef.current) invoiceRef.current.value = "";
      load();
    } catch (err: any) { setError(err.message ?? "Error al registrar"); }
    finally { setSubmitting(false); }
@@ -168,10 +183,10 @@ export default function PreAlertaPage() {
                  onChange={e => setInvoice(e.target.files?.[0] ?? null)}
                  style={{ fontSize: ".85rem" }} />
                {invoice && (
-                  <p style={{ fontSize: ".78rem", color: "var(--green)", marginTop: ".25rem" }}>📎 {invoice.name}</p>
-                )}
+                   <p style={{ fontSize: ".78rem", color: "var(--green)", marginTop: ".25rem" }}>📎 {invoice.name}</p>
+                 )}
                <p style={{ fontSize: ".75rem", color: "var(--gray-400)", marginTop: ".25rem" }}>
-                  Próximamente: la factura se enviará automáticamente a la bodega.
+                  Máx. 10 MB — PDF, JPG, PNG o WEBP.
                </p>
              </div>
              <button type="submit" className="btn btn-primary" disabled={submitting}>
@@ -116,10 +116,22 @@ export const api = {
    create: (body: any)  => request<any>("/pre-alerts", { method: "POST", body: JSON.stringify(body) }),
    delete: (id: string) => request<any>(`/pre-alerts/${id}`, { method: "DELETE" }),
    updateStatus: (id: string, body: any) => request<any>(`/pre-alerts/${id}/status`, { method: "PATCH", body: JSON.stringify(body) }),
+    uploadInvoice: (id: string, file: File) => {
+      const token = getToken();
+      const fd = new FormData();
+      fd.append("invoice", file);
+      return fetch(`${API_BASE}/pre-alerts/${id}/invoice`, {
+        method: "POST",
+        headers: token ? { Authorization: `Bearer ${token}` } : {},
+        body: fd,
+      }).then(r => { if (!r.ok) throw new Error("Upload failed"); return r.json(); });
+    },
  },
  users: {
    list:         (search?: string) => request<any[]>("/users" + (search ? `?search=${search}` : "")),
    get:          (id: string)      => request<any>(`/users/${id}`),
+    create:       (body: { email: string; password: string; firstName: string; lastName: string; phone?: string; role: string }) =>
+      request<any>("/users", { method: "POST", body: JSON.stringify(body) }),
    updateRole:   (id: string, role: string) => request<any>(`/users/${id}/role`, { method: "PATCH", body: JSON.stringify({ role }) }),
    setActive:    (id: string, isActive: boolean) => request<any>(`/users/${id}/active`, { method: "PATCH", body: JSON.stringify({ isActive }) }),
  },
@@ -165,6 +177,9 @@ export const api = {
    update: (id: string, body: { body: string; subject?: string; isActive?: boolean }) =>
      request<any>(`/notification-templates/${id}`, { method: "PUT", body: JSON.stringify(body) }),
  },
+  notifications: {
+    list: (limit = 20) => request<any[]>(`/notifications?limit=${limit}`),
+  },
  payments: {
    list:          (status?: string) => request<any[]>(`/payments${status ? `?status=${status}` : ""}`),
    packageDetail: (packageId: string) => request<any>(`/payments/package/${packageId}`),