CheckPoint: Avances Varios

frontend/admin-panel/package-lock.json

@@ -8,6 +8,7 @@
       "name": "admin-panel",
       "version": "0.0.0",
       "dependencies": {
+        "@tailwindcss/postcss": "^4.1.18",
         "axios": "^1.13.2",
         "clsx": "^2.1.1",
         "lucide-react": "^0.561.0",
@@ -35,6 +36,18 @@
         "vite": "^7.2.4"
       }
     },
+    "node_modules/@alloc/quick-lru": {
+      "version": "5.2.0",
+      "resolved": "https://registry.npmjs.org/@alloc/quick-lru/-/quick-lru-5.2.0.tgz",
+      "integrity": "sha512-UrcABB+4bUrFABwbluTIBErXwvbsU/V7TZWfmbgJfbkwiBuziS9gxdODUyuiecfdGQ85jglMW6juS3+z5TsKLw==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
     "node_modules/@babel/code-frame": {
       "version": "7.27.1",
       "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.27.1.tgz",
@@ -972,7 +985,6 @@
       "version": "0.3.13",
       "resolved": "https://registry.npmjs.org/@jridgewell/gen-mapping/-/gen-mapping-0.3.13.tgz",
       "integrity": "sha512-2kkt/7niJ6MgEPxF0bYdQ6etZaA+fQvDcLKckhy1yIQOzaoKjBBjSj63/aLVjYE3qhRt5dvM+uUyfCg6UKCBbA==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "@jridgewell/sourcemap-codec": "^1.5.0",
@@ -983,7 +995,6 @@
       "version": "2.3.5",
       "resolved": "https://registry.npmjs.org/@jridgewell/remapping/-/remapping-2.3.5.tgz",
       "integrity": "sha512-LI9u/+laYG4Ds1TDKSJW2YPrIlcVYOwi2fUC6xB43lueCjgxV4lffOCZCtYFiH6TNOX+tQKXx97T4IKHbhyHEQ==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "@jridgewell/gen-mapping": "^0.3.5",
@@ -994,7 +1005,6 @@
       "version": "3.1.2",
       "resolved": "https://registry.npmjs.org/@jridgewell/resolve-uri/-/resolve-uri-3.1.2.tgz",
       "integrity": "sha512-bRISgCIjP20/tbWSPWMEi54QVPRZExkuD9lJL+UIxUKtwVJA8wW1Trb1jMs1RFXo1CBTNZ/5hpC9QvmKWdopKw==",
-      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">=6.0.0"
@@ -1004,14 +1014,12 @@
       "version": "1.5.5",
       "resolved": "https://registry.npmjs.org/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.5.5.tgz",
       "integrity": "sha512-cYQ9310grqxueWbl+WuIUIaiUaDcj7WOq5fVhEljNVgRfOUhY9fy2zTvfoqWsnebh8Sl70VScFbICvJnLKB0Og==",
-      "dev": true,
       "license": "MIT"
     },
     "node_modules/@jridgewell/trace-mapping": {
       "version": "0.3.31",
       "resolved": "https://registry.npmjs.org/@jridgewell/trace-mapping/-/trace-mapping-0.3.31.tgz",
       "integrity": "sha512-zzNR+SdQSDJzc8joaeP8QQoCQr8NuYx2dIIytl1QeBEZHJ9uW6hebsrYgbz8hJwUQao3TWCMtmfV8Nu1twOLAw==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "@jridgewell/resolve-uri": "^3.1.0",
@@ -1333,6 +1341,262 @@
         "win32"
       ]
     },
+    "node_modules/@tailwindcss/node": {
+      "version": "4.1.18",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/node/-/node-4.1.18.tgz",
+      "integrity": "sha512-DoR7U1P7iYhw16qJ49fgXUlry1t4CpXeErJHnQ44JgTSKMaZUdf17cfn5mHchfJ4KRBZRFA/Coo+MUF5+gOaCQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@jridgewell/remapping": "^2.3.4",
+        "enhanced-resolve": "^5.18.3",
+        "jiti": "^2.6.1",
+        "lightningcss": "1.30.2",
+        "magic-string": "^0.30.21",
+        "source-map-js": "^1.2.1",
+        "tailwindcss": "4.1.18"
+      }
+    },
+    "node_modules/@tailwindcss/oxide": {
+      "version": "4.1.18",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide/-/oxide-4.1.18.tgz",
+      "integrity": "sha512-EgCR5tTS5bUSKQgzeMClT6iCY3ToqE1y+ZB0AKldj809QXk1Y+3jB0upOYZrn9aGIzPtUsP7sX4QQ4XtjBB95A==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 10"
+      },
+      "optionalDependencies": {
+        "@tailwindcss/oxide-android-arm64": "4.1.18",
+        "@tailwindcss/oxide-darwin-arm64": "4.1.18",
+        "@tailwindcss/oxide-darwin-x64": "4.1.18",
+        "@tailwindcss/oxide-freebsd-x64": "4.1.18",
+        "@tailwindcss/oxide-linux-arm-gnueabihf": "4.1.18",
+        "@tailwindcss/oxide-linux-arm64-gnu": "4.1.18",
+        "@tailwindcss/oxide-linux-arm64-musl": "4.1.18",
+        "@tailwindcss/oxide-linux-x64-gnu": "4.1.18",
+        "@tailwindcss/oxide-linux-x64-musl": "4.1.18",
+        "@tailwindcss/oxide-wasm32-wasi": "4.1.18",
+        "@tailwindcss/oxide-win32-arm64-msvc": "4.1.18",
+        "@tailwindcss/oxide-win32-x64-msvc": "4.1.18"
+      }
+    },
+    "node_modules/@tailwindcss/oxide-android-arm64": {
+      "version": "4.1.18",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-android-arm64/-/oxide-android-arm64-4.1.18.tgz",
+      "integrity": "sha512-dJHz7+Ugr9U/diKJA0W6N/6/cjI+ZTAoxPf9Iz9BFRF2GzEX8IvXxFIi/dZBloVJX/MZGvRuFA9rqwdiIEZQ0Q==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "android"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@tailwindcss/oxide-darwin-arm64": {
+      "version": "4.1.18",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-darwin-arm64/-/oxide-darwin-arm64-4.1.18.tgz",
+      "integrity": "sha512-Gc2q4Qhs660bhjyBSKgq6BYvwDz4G+BuyJ5H1xfhmDR3D8HnHCmT/BSkvSL0vQLy/nkMLY20PQ2OoYMO15Jd0A==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@tailwindcss/oxide-darwin-x64": {
+      "version": "4.1.18",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-darwin-x64/-/oxide-darwin-x64-4.1.18.tgz",
+      "integrity": "sha512-FL5oxr2xQsFrc3X9o1fjHKBYBMD1QZNyc1Xzw/h5Qu4XnEBi3dZn96HcHm41c/euGV+GRiXFfh2hUCyKi/e+yw==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@tailwindcss/oxide-freebsd-x64": {
+      "version": "4.1.18",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-freebsd-x64/-/oxide-freebsd-x64-4.1.18.tgz",
+      "integrity": "sha512-Fj+RHgu5bDodmV1dM9yAxlfJwkkWvLiRjbhuO2LEtwtlYlBgiAT4x/j5wQr1tC3SANAgD+0YcmWVrj8R9trVMA==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "freebsd"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@tailwindcss/oxide-linux-arm-gnueabihf": {
+      "version": "4.1.18",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-linux-arm-gnueabihf/-/oxide-linux-arm-gnueabihf-4.1.18.tgz",
+      "integrity": "sha512-Fp+Wzk/Ws4dZn+LV2Nqx3IilnhH51YZoRaYHQsVq3RQvEl+71VGKFpkfHrLM/Li+kt5c0DJe/bHXK1eHgDmdiA==",
+      "cpu": [
+        "arm"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@tailwindcss/oxide-linux-arm64-gnu": {
+      "version": "4.1.18",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-linux-arm64-gnu/-/oxide-linux-arm64-gnu-4.1.18.tgz",
+      "integrity": "sha512-S0n3jboLysNbh55Vrt7pk9wgpyTTPD0fdQeh7wQfMqLPM/Hrxi+dVsLsPrycQjGKEQk85Kgbx+6+QnYNiHalnw==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@tailwindcss/oxide-linux-arm64-musl": {
+      "version": "4.1.18",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-linux-arm64-musl/-/oxide-linux-arm64-musl-4.1.18.tgz",
+      "integrity": "sha512-1px92582HkPQlaaCkdRcio71p8bc8i/ap5807tPRDK/uw953cauQBT8c5tVGkOwrHMfc2Yh6UuxaH4vtTjGvHg==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@tailwindcss/oxide-linux-x64-gnu": {
+      "version": "4.1.18",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-linux-x64-gnu/-/oxide-linux-x64-gnu-4.1.18.tgz",
+      "integrity": "sha512-v3gyT0ivkfBLoZGF9LyHmts0Isc8jHZyVcbzio6Wpzifg/+5ZJpDiRiUhDLkcr7f/r38SWNe7ucxmGW3j3Kb/g==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@tailwindcss/oxide-linux-x64-musl": {
+      "version": "4.1.18",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-linux-x64-musl/-/oxide-linux-x64-musl-4.1.18.tgz",
+      "integrity": "sha512-bhJ2y2OQNlcRwwgOAGMY0xTFStt4/wyU6pvI6LSuZpRgKQwxTec0/3Scu91O8ir7qCR3AuepQKLU/kX99FouqQ==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@tailwindcss/oxide-wasm32-wasi": {
+      "version": "4.1.18",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-wasm32-wasi/-/oxide-wasm32-wasi-4.1.18.tgz",
+      "integrity": "sha512-LffYTvPjODiP6PT16oNeUQJzNVyJl1cjIebq/rWWBF+3eDst5JGEFSc5cWxyRCJ0Mxl+KyIkqRxk1XPEs9x8TA==",
+      "bundleDependencies": [
+        "@napi-rs/wasm-runtime",
+        "@emnapi/core",
+        "@emnapi/runtime",
+        "@tybys/wasm-util",
+        "@emnapi/wasi-threads",
+        "tslib"
+      ],
+      "cpu": [
+        "wasm32"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "@emnapi/core": "^1.7.1",
+        "@emnapi/runtime": "^1.7.1",
+        "@emnapi/wasi-threads": "^1.1.0",
+        "@napi-rs/wasm-runtime": "^1.1.0",
+        "@tybys/wasm-util": "^0.10.1",
+        "tslib": "^2.4.0"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      }
+    },
+    "node_modules/@tailwindcss/oxide-win32-arm64-msvc": {
+      "version": "4.1.18",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-win32-arm64-msvc/-/oxide-win32-arm64-msvc-4.1.18.tgz",
+      "integrity": "sha512-HjSA7mr9HmC8fu6bdsZvZ+dhjyGCLdotjVOgLA2vEqxEBZaQo9YTX4kwgEvPCpRh8o4uWc4J/wEoFzhEmjvPbA==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@tailwindcss/oxide-win32-x64-msvc": {
+      "version": "4.1.18",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-win32-x64-msvc/-/oxide-win32-x64-msvc-4.1.18.tgz",
+      "integrity": "sha512-bJWbyYpUlqamC8dpR7pfjA0I7vdF6t5VpUGMWRkXVE3AXgIZjYUYAK7II1GNaxR8J1SSrSrppRar8G++JekE3Q==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@tailwindcss/postcss": {
+      "version": "4.1.18",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/postcss/-/postcss-4.1.18.tgz",
+      "integrity": "sha512-Ce0GFnzAOuPyfV5SxjXGn0CubwGcuDB0zcdaPuCSzAa/2vII24JTkH+I6jcbXLb1ctjZMZZI6OjDaLPJQL1S0g==",
+      "license": "MIT",
+      "dependencies": {
+        "@alloc/quick-lru": "^5.2.0",
+        "@tailwindcss/node": "4.1.18",
+        "@tailwindcss/oxide": "4.1.18",
+        "postcss": "^8.4.41",
+        "tailwindcss": "4.1.18"
+      }
+    },
     "node_modules/@types/babel__core": {
       "version": "7.20.5",
       "resolved": "https://registry.npmjs.org/@types/babel__core/-/babel__core-7.20.5.tgz",
@@ -2076,6 +2340,15 @@
         "node": ">=0.4.0"
       }
     },
+    "node_modules/detect-libc": {
+      "version": "2.1.2",
+      "resolved": "https://registry.npmjs.org/detect-libc/-/detect-libc-2.1.2.tgz",
+      "integrity": "sha512-Btj2BOOO83o3WyH59e8MgXsxEQVcarkUOpEYrubB0urwnN10yQ364rsiByU11nZlqWYZm05i/of7io4mzihBtQ==",
+      "license": "Apache-2.0",
+      "engines": {
+        "node": ">=8"
+      }
+    },
     "node_modules/dunder-proto": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/dunder-proto/-/dunder-proto-1.0.1.tgz",
@@ -2097,6 +2370,19 @@
       "dev": true,
       "license": "ISC"
     },
+    "node_modules/enhanced-resolve": {
+      "version": "5.18.4",
+      "resolved": "https://registry.npmjs.org/enhanced-resolve/-/enhanced-resolve-5.18.4.tgz",
+      "integrity": "sha512-LgQMM4WXU3QI+SYgEc2liRgznaD5ojbmY3sb8LxyguVkIg5FxdpTkvk72te2R38/TGKxH634oLxXRGY6d7AP+Q==",
+      "license": "MIT",
+      "dependencies": {
+        "graceful-fs": "^4.2.4",
+        "tapable": "^2.2.0"
+      },
+      "engines": {
+        "node": ">=10.13.0"
+      }
+    },
     "node_modules/es-define-property": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/es-define-property/-/es-define-property-1.0.1.tgz",
@@ -2640,6 +2926,12 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/graceful-fs": {
+      "version": "4.2.11",
+      "resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.2.11.tgz",
+      "integrity": "sha512-RbJ5/jmFcNNCcDV5o9eTnBLJ/HszWV0P73bc+Ff4nS/rJj+YaS6IGyiOL0VoBYX+l1Wrl3k63h/KrH+nhJ0XvQ==",
+      "license": "ISC"
+    },
     "node_modules/has-flag": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
@@ -2773,6 +3065,15 @@
       "dev": true,
       "license": "ISC"
     },
+    "node_modules/jiti": {
+      "version": "2.6.1",
+      "resolved": "https://registry.npmjs.org/jiti/-/jiti-2.6.1.tgz",
+      "integrity": "sha512-ekilCSN1jwRvIbgeg/57YFh8qQDNbwDb9xT/qu2DAHbFFZUicIl4ygVaAvzveMhMVr3LnpSKTNnwt8PoOfmKhQ==",
+      "license": "MIT",
+      "bin": {
+        "jiti": "lib/jiti-cli.mjs"
+      }
+    },
     "node_modules/js-tokens": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz",
@@ -2864,6 +3165,255 @@
         "node": ">= 0.8.0"
       }
     },
+    "node_modules/lightningcss": {
+      "version": "1.30.2",
+      "resolved": "https://registry.npmjs.org/lightningcss/-/lightningcss-1.30.2.tgz",
+      "integrity": "sha512-utfs7Pr5uJyyvDETitgsaqSyjCb2qNRAtuqUeWIAKztsOYdcACf2KtARYXg2pSvhkt+9NfoaNY7fxjl6nuMjIQ==",
+      "license": "MPL-2.0",
+      "dependencies": {
+        "detect-libc": "^2.0.3"
+      },
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      },
+      "optionalDependencies": {
+        "lightningcss-android-arm64": "1.30.2",
+        "lightningcss-darwin-arm64": "1.30.2",
+        "lightningcss-darwin-x64": "1.30.2",
+        "lightningcss-freebsd-x64": "1.30.2",
+        "lightningcss-linux-arm-gnueabihf": "1.30.2",
+        "lightningcss-linux-arm64-gnu": "1.30.2",
+        "lightningcss-linux-arm64-musl": "1.30.2",
+        "lightningcss-linux-x64-gnu": "1.30.2",
+        "lightningcss-linux-x64-musl": "1.30.2",
+        "lightningcss-win32-arm64-msvc": "1.30.2",
+        "lightningcss-win32-x64-msvc": "1.30.2"
+      }
+    },
+    "node_modules/lightningcss-android-arm64": {
+      "version": "1.30.2",
+      "resolved": "https://registry.npmjs.org/lightningcss-android-arm64/-/lightningcss-android-arm64-1.30.2.tgz",
+      "integrity": "sha512-BH9sEdOCahSgmkVhBLeU7Hc9DWeZ1Eb6wNS6Da8igvUwAe0sqROHddIlvU06q3WyXVEOYDZ6ykBZQnjTbmo4+A==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "android"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/lightningcss-darwin-arm64": {
+      "version": "1.30.2",
+      "resolved": "https://registry.npmjs.org/lightningcss-darwin-arm64/-/lightningcss-darwin-arm64-1.30.2.tgz",
+      "integrity": "sha512-ylTcDJBN3Hp21TdhRT5zBOIi73P6/W0qwvlFEk22fkdXchtNTOU4Qc37SkzV+EKYxLouZ6M4LG9NfZ1qkhhBWA==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/lightningcss-darwin-x64": {
+      "version": "1.30.2",
+      "resolved": "https://registry.npmjs.org/lightningcss-darwin-x64/-/lightningcss-darwin-x64-1.30.2.tgz",
+      "integrity": "sha512-oBZgKchomuDYxr7ilwLcyms6BCyLn0z8J0+ZZmfpjwg9fRVZIR5/GMXd7r9RH94iDhld3UmSjBM6nXWM2TfZTQ==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/lightningcss-freebsd-x64": {
+      "version": "1.30.2",
+      "resolved": "https://registry.npmjs.org/lightningcss-freebsd-x64/-/lightningcss-freebsd-x64-1.30.2.tgz",
+      "integrity": "sha512-c2bH6xTrf4BDpK8MoGG4Bd6zAMZDAXS569UxCAGcA7IKbHNMlhGQ89eRmvpIUGfKWNVdbhSbkQaWhEoMGmGslA==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "freebsd"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/lightningcss-linux-arm-gnueabihf": {
+      "version": "1.30.2",
+      "resolved": "https://registry.npmjs.org/lightningcss-linux-arm-gnueabihf/-/lightningcss-linux-arm-gnueabihf-1.30.2.tgz",
+      "integrity": "sha512-eVdpxh4wYcm0PofJIZVuYuLiqBIakQ9uFZmipf6LF/HRj5Bgm0eb3qL/mr1smyXIS1twwOxNWndd8z0E374hiA==",
+      "cpu": [
+        "arm"
+      ],
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/lightningcss-linux-arm64-gnu": {
+      "version": "1.30.2",
+      "resolved": "https://registry.npmjs.org/lightningcss-linux-arm64-gnu/-/lightningcss-linux-arm64-gnu-1.30.2.tgz",
+      "integrity": "sha512-UK65WJAbwIJbiBFXpxrbTNArtfuznvxAJw4Q2ZGlU8kPeDIWEX1dg3rn2veBVUylA2Ezg89ktszWbaQnxD/e3A==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/lightningcss-linux-arm64-musl": {
+      "version": "1.30.2",
+      "resolved": "https://registry.npmjs.org/lightningcss-linux-arm64-musl/-/lightningcss-linux-arm64-musl-1.30.2.tgz",
+      "integrity": "sha512-5Vh9dGeblpTxWHpOx8iauV02popZDsCYMPIgiuw97OJ5uaDsL86cnqSFs5LZkG3ghHoX5isLgWzMs+eD1YzrnA==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/lightningcss-linux-x64-gnu": {
+      "version": "1.30.2",
+      "resolved": "https://registry.npmjs.org/lightningcss-linux-x64-gnu/-/lightningcss-linux-x64-gnu-1.30.2.tgz",
+      "integrity": "sha512-Cfd46gdmj1vQ+lR6VRTTadNHu6ALuw2pKR9lYq4FnhvgBc4zWY1EtZcAc6EffShbb1MFrIPfLDXD6Xprbnni4w==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/lightningcss-linux-x64-musl": {
+      "version": "1.30.2",
+      "resolved": "https://registry.npmjs.org/lightningcss-linux-x64-musl/-/lightningcss-linux-x64-musl-1.30.2.tgz",
+      "integrity": "sha512-XJaLUUFXb6/QG2lGIW6aIk6jKdtjtcffUT0NKvIqhSBY3hh9Ch+1LCeH80dR9q9LBjG3ewbDjnumefsLsP6aiA==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/lightningcss-win32-arm64-msvc": {
+      "version": "1.30.2",
+      "resolved": "https://registry.npmjs.org/lightningcss-win32-arm64-msvc/-/lightningcss-win32-arm64-msvc-1.30.2.tgz",
+      "integrity": "sha512-FZn+vaj7zLv//D/192WFFVA0RgHawIcHqLX9xuWiQt7P0PtdFEVaxgF9rjM/IRYHQXNnk61/H/gb2Ei+kUQ4xQ==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/lightningcss-win32-x64-msvc": {
+      "version": "1.30.2",
+      "resolved": "https://registry.npmjs.org/lightningcss-win32-x64-msvc/-/lightningcss-win32-x64-msvc-1.30.2.tgz",
+      "integrity": "sha512-5g1yc73p+iAkid5phb4oVFMB45417DkRevRbt/El/gKXJk4jid+vPFF/AXbxn05Aky8PapwzZrdJShv5C0avjw==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
     "node_modules/locate-path": {
       "version": "6.0.0",
       "resolved": "https://registry.npmjs.org/locate-path/-/locate-path-6.0.0.tgz",
@@ -2906,6 +3456,15 @@
         "react": "^16.5.1 || ^17.0.0 || ^18.0.0 || ^19.0.0"
       }
     },
+    "node_modules/magic-string": {
+      "version": "0.30.21",
+      "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.30.21.tgz",
+      "integrity": "sha512-vd2F4YUyEXKGcLHoq+TEyCjxueSeHnFxyyjNp80yg0XV4vUhnDer/lvvlqM/arB5bXQN5K2/3oinyCRyx8T2CQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@jridgewell/sourcemap-codec": "^1.5.5"
+      }
+    },
     "node_modules/math-intrinsics": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/math-intrinsics/-/math-intrinsics-1.1.0.tgz",
@@ -2960,7 +3519,6 @@
       "version": "3.3.11",
       "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.11.tgz",
       "integrity": "sha512-N8SpfPUnUp1bK+PMYW8qSWdl9U+wwNWI4QKxOYDy9JAro3WMX7p2OeVRF9v+347pnakNevPmiHhNmZ2HbFA76w==",
-      "dev": true,
       "funding": [
         {
           "type": "github",
@@ -3076,7 +3634,6 @@
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.1.1.tgz",
       "integrity": "sha512-xceH2snhtb5M9liqDsmEw56le376mTZkEX/jEb/RxNFyegNul7eNslCXP9FDj/Lcu0X8KEyMceP2ntpaHrDEVA==",
-      "dev": true,
       "license": "ISC"
     },
     "node_modules/picomatch": {
@@ -3096,7 +3653,6 @@
       "version": "8.5.6",
       "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.5.6.tgz",
       "integrity": "sha512-3Ybi1tAuwAP9s0r1UQ2J4n5Y0G05bJkpUIO0/bI9MhwmD70S5aTWbXGBwxHrelT+XM1k6dM0pk+SwNkpTRN7Pg==",
-      "dev": true,
       "funding": [
         {
           "type": "opencollective",
@@ -3324,7 +3880,6 @@
       "version": "1.2.1",
       "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.2.1.tgz",
       "integrity": "sha512-UXWMKhLOwVKb728IUtQPXxfYU+usdybtUrK/8uGE8CQMvrhOpwvzDBwj0QhSL7MQc7vIsISBG8VQ8+IDQxpfQA==",
-      "dev": true,
       "license": "BSD-3-Clause",
       "engines": {
         "node": ">=0.10.0"
@@ -3370,9 +3925,21 @@
       "version": "4.1.18",
       "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-4.1.18.tgz",
       "integrity": "sha512-4+Z+0yiYyEtUVCScyfHCxOYP06L5Ne+JiHhY2IjR2KWMIWhJOYZKLSGZaP5HkZ8+bY0cxfzwDE5uOmzFXyIwxw==",
-      "dev": true,
       "license": "MIT"
     },
+    "node_modules/tapable": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/tapable/-/tapable-2.3.0.tgz",
+      "integrity": "sha512-g9ljZiwki/LfxmQADO3dEY1CbpmXT5Hm2fJ+QaGKwSXUylMybePR7/67YW7jOrrvjEgL1Fmz5kzyAjWVWLlucg==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=6"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/webpack"
+      }
+    },
     "node_modules/tinyglobby": {
       "version": "0.2.15",
       "resolved": "https://registry.npmjs.org/tinyglobby/-/tinyglobby-0.2.15.tgz",

frontend/admin-panel/package.json

@@ -10,6 +10,7 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "@tailwindcss/postcss": "^4.1.18",
     "axios": "^1.13.2",
     "clsx": "^2.1.1",
     "lucide-react": "^0.561.0",

frontend/admin-panel/postcss.config.js

@@ -1,6 +1,6 @@
 export default {
   plugins: {
-    tailwindcss: {},
+    '@tailwindcss/postcss': {},
     autoprefixer: {},
   },
 }

frontend/admin-panel/public/vite.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>

frontend/admin-panel/src/App.tsx

@@ -5,6 +5,9 @@ import ProtectedLayout from './layouts/ProtectedLayout';
 
 import CategoryManager from './pages/Categories/CategoryManager';
 import UserManager from './pages/Users/UserManager';
+import DiagramPage from './pages/Diagram/DiagramPage';
+import PricingManager from './pages/Pricing/PricingManager';
+import PromotionsManager from './pages/Pricing/PromotionsManager';
 
 function App() {
   return (
@@ -16,6 +19,9 @@ function App() {
           <Route path="/" element={<Dashboard />} />
           <Route path="/categories" element={<CategoryManager />} />
           <Route path="/users" element={<UserManager />} />
+          <Route path="/diagram" element={<DiagramPage />} />
+          <Route path="/pricing" element={<PricingManager />} />
+          <Route path="/promotions" element={<PromotionsManager />} />
         </Route>
       </Routes>
     </BrowserRouter>

frontend/admin-panel/src/index.css

@@ -1,3 +1,5 @@
-@tailwind base;
+@import "tailwindcss";
-@tailwind components;
+
-@tailwind utilities;
+@theme {
+  /* Aquí puedes definir tus variables si las necesitas */
+}

frontend/admin-panel/src/layouts/ProtectedLayout.tsx

@@ -1,6 +1,6 @@
 import { Navigate, Outlet } from 'react-router-dom';
 import { useAuthStore } from '../store/authStore';
-import { LogOut } from 'lucide-react';
+import { LogOut, LayoutDashboard, FolderTree, Users, FileText, DollarSign, Percent } from 'lucide-react';
 
 export default function ProtectedLayout() {
   const { isAuthenticated, logout } = useAuthStore();
@@ -11,28 +11,58 @@ export default function ProtectedLayout() {
 
   return (
     <div className="min-h-screen bg-gray-100 flex">
-      {/* Sidebar minimalista por ahora */}
+      {/* Sidebar */}
-      <aside className="w-64 bg-gray-900 text-white flex flex-col">
+      <aside className="w-64 bg-gray-900 text-white flex flex-col transition-all duration-300">
-        <div className="p-4 text-xl font-bold border-b border-gray-800">
+        <div className="p-4 text-xl font-bold border-b border-gray-800 flex items-center gap-2">
+          <LayoutDashboard className="text-blue-500" />
           SIG-CM
         </div>
+
         <nav className="flex-1 p-4">
-          <ul>
+          <ul className="space-y-1">
-            <li className="mb-2">
+            <li>
-              <a href="/" className="block p-2 hover:bg-gray-800 rounded">Dashboard</a>
+              <a href="/" className="flex items-center gap-3 p-3 hover:bg-gray-800 rounded transition-colors text-gray-300 hover:text-white">
+                <LayoutDashboard size={20} />
+                <span>Dashboard</span>
+              </a>
             </li>
-            <li className="mb-2">
+            <li>
-              <a href="/categories" className="block p-2 hover:bg-gray-800 rounded">Categorías</a>
+              <a href="/categories" className="flex items-center gap-3 p-3 hover:bg-gray-800 rounded transition-colors text-gray-300 hover:text-white">
+                <FolderTree size={20} />
+                <span>Categorías</span>
+              </a>
             </li>
-            <li className="mb-2">
+            <li>
-              <a href="/users" className="block p-2 hover:bg-gray-800 rounded">Usuarios</a>
+              <a href="/users" className="flex items-center gap-3 p-3 hover:bg-gray-800 rounded transition-colors text-gray-300 hover:text-white">
+                <Users size={20} />
+                <span>Usuarios</span>
+              </a>
+            </li>
+            <li>
+              <a href="/pricing" className="flex items-center gap-3 p-3 hover:bg-gray-800 rounded transition-colors text-gray-300 hover:text-white">
+                <DollarSign size={20} />
+                <span>Tarifas y Reglas</span>
+              </a>
+            </li>
+            <li>
+              <a href="/promotions" className="flex items-center gap-3 p-3 hover:bg-gray-800 rounded transition-colors text-gray-300 hover:text-white">
+                <Percent size={20} />
+                <span>Promociones</span>
+              </a>
+            </li>
+            <li>
+              <a href="/diagram" className="flex items-center gap-3 p-3 hover:bg-gray-800 rounded transition-colors text-gray-300 hover:text-white">
+                <FileText size={20} />
+                <span>Diagramación</span>
+              </a>
             </li>
           </ul>
         </nav>
+
         <div className="p-4 border-t border-gray-800">
           <button
             onClick={logout}
-            className="flex items-center gap-2 text-gray-400 hover:text-white w-full"
+            className="flex items-center gap-3 text-red-400 hover:text-red-300 w-full p-2 transition-colors"
           >
             <LogOut size={20} />
             <span>Cerrar Sesión</span>
@@ -41,9 +71,9 @@ export default function ProtectedLayout() {
       </aside>
 
       {/* Main Content */}
-      <main className="flex-1 p-8">
+      <main className="flex-1 p-8 overflow-y-auto">
         <Outlet />
       </main>
     </div>
   );
-}
+}

frontend/admin-panel/src/pages/Categories/CategoryManager.tsx

@@ -1,12 +1,14 @@
 import { useState, useEffect } from 'react';
-import { Category } from '../../types/Category';
+import { type Category } from '../../types/Category';
-import OperationManager from './OperationManager'; // Import added
+import OperationManager from './OperationManager';
 import { categoryService } from '../../services/categoryService';
+import { attributeService } from '../../services/attributeService';
+import { type AttributeDefinition } from '../../types/AttributeDefinition';
 import Modal from '../../components/Modal';
-import { Plus, Edit, Trash2, ChevronRight, ChevronDown, Folder, FolderOpen, Settings } from 'lucide-react';
+import { Plus, Edit, Trash2, ChevronRight, ChevronDown, Folder, FolderOpen, Settings, LayoutList } from 'lucide-react';
 import clsx from 'clsx';
 import { operationService } from '../../services/operationService';
-import { Operation } from '../../types/Operation';
+import { type Operation } from '../../types/Operation';
 
 // Type helper for the tree structure
 interface CategoryNode extends Category {
@@ -23,12 +25,21 @@ export default function CategoryManager() {
   const [editingCategory, setEditingCategory] = useState<Category | null>(null);
   const [formData, setFormData] = useState<Partial<Category>>({ name: '', slug: '', active: true, parentId: null });
 
-  // New state for operations matrix
+  // State for operations matrix
   const [selectedCategoryOps, setSelectedCategoryOps] = useState<Operation[]>([]);
   const [allOperations, setAllOperations] = useState<Operation[]>([]);
   const [configuringCategory, setConfiguringCategory] = useState<Category | null>(null);
   const [isOpsModalOpen, setIsOpsModalOpen] = useState(false);
 
+  // State for Attributes (ESTO FALTABA)
+  const [isAttrModalOpen, setIsAttrModalOpen] = useState(false);
+  const [attributes, setAttributes] = useState<AttributeDefinition[]>([]);
+  const [newAttrData, setNewAttrData] = useState({
+    name: '',
+    dataType: 'text',
+    required: false
+  });
+
   useEffect(() => {
     loadCategories();
   }, []);
@@ -126,7 +137,8 @@ export default function CategoryManager() {
     try {
       await attributeService.create({
         ...newAttrData,
-        categoryId: configuringCategory.id
+        categoryId: configuringCategory.id,
+        dataType: newAttrData.dataType as any // Type assertion for simplicity
       });
       setNewAttrData({ name: '', dataType: 'text', required: false });
       loadAttributes(configuringCategory.id);
@@ -357,7 +369,76 @@ export default function CategoryManager() {
           </div>
         </div>
       </Modal>
+
+      {/* Attributes Configuration Modal (ESTO FALTABA EN EL JSX) */}
+      <Modal
+        isOpen={isAttrModalOpen}
+        onClose={() => setIsAttrModalOpen(false)}
+        title={`Atributos de: ${configuringCategory?.name}`}
+      >
+        <div className="space-y-6">
+          {/* List Existing Attributes */}
+          <div>
+            <h4 className="font-semibold mb-2 text-sm text-gray-700">Atributos Actuales</h4>
+            {attributes.length === 0 ? (
+              <p className="text-sm text-gray-400 italic">No hay atributos definidos.</p>
+            ) : (
+              <div className="space-y-2">
+                {attributes.map(attr => (
+                  <div key={attr.id} className="flex items-center justify-between bg-gray-50 p-2 rounded border">
+                    <div className="text-sm">
+                      <span className="font-medium">{attr.name}</span>
+                      <span className="text-gray-500 ml-2 text-xs">({attr.dataType})</span>
+                      {attr.required && <span className="text-red-500 ml-1 text-xs">*Req</span>}
+                    </div>
+                    <button onClick={() => handleDeleteAttribute(attr.id)} className="text-red-500 hover:text-red-700">
+                      <Trash2 size={16} />
+                    </button>
+                  </div>
+                ))}
+              </div>
+            )}
+          </div>
+
+          {/* Add New Attribute Form */}
+          <form onSubmit={handleCreateAttribute} className="border-t pt-4">
+            <h4 className="font-semibold mb-3 text-sm text-gray-700">Agregar Atributo</h4>
+            <div className="flex gap-2 mb-2">
+              <input
+                type="text"
+                placeholder="Nombre (ej: Kilometraje)"
+                className="flex-1 border p-2 rounded text-sm"
+                value={newAttrData.name}
+                onChange={e => setNewAttrData({ ...newAttrData, name: e.target.value })}
+                required
+              />
+              <select
+                className="border p-2 rounded text-sm"
+                value={newAttrData.dataType}
+                onChange={e => setNewAttrData({ ...newAttrData, dataType: e.target.value })}
+              >
+                <option value="text">Texto</option>
+                <option value="number">Número</option>
+                <option value="boolean">Si/No</option>
+                <option value="date">Fecha</option>
+              </select>
+            </div>
+            <div className="flex items-center justify-between">
+              <label className="flex items-center gap-2 text-sm text-gray-600">
+                <input
+                  type="checkbox"
+                  checked={newAttrData.required}
+                  onChange={e => setNewAttrData({ ...newAttrData, required: e.target.checked })}
+                />
+                Es obligatorio
+              </label>
+              <button type="submit" className="bg-green-600 text-white px-3 py-1.5 rounded text-sm hover:bg-green-700 flex items-center gap-1">
+                <Plus size={16} /> Agregar
+              </button>
+            </div>
+          </form>
+        </div>
+      </Modal>
     </div>
   );
-
+}
-}

frontend/admin-panel/src/pages/Categories/OperationManager.tsx

@@ -1,5 +1,5 @@
 import { useState, useEffect } from 'react';
-import { type Operation } from '../../types/Operation'; // ID: type-import-fix
+import { type Operation } from '../../types/Operation';
 import { operationService } from '../../services/operationService';
 import { Plus, Trash2 } from 'lucide-react';
 

frontend/admin-panel/src/pages/Diagram/DiagramPage.tsx

@@ -0,0 +1,72 @@
+import { useState } from 'react';
+import { exportService } from '../../services/exportService';
+import { FileText, Download, Calendar } from 'lucide-react';
+
+export default function DiagramPage() {
+  // Fecha por defecto: Mañana
+  const tomorrow = new Date();
+  tomorrow.setDate(tomorrow.getDate() + 1);
+  const [date, setDate] = useState(tomorrow.toISOString().split('T')[0]);
+  const [loading, setLoading] = useState(false);
+
+  const handleDownload = async () => {
+    setLoading(true);
+    try {
+      await exportService.downloadDiagram(date);
+    } catch (error) {
+      console.error(error);
+      alert('Error descargando el diagrama');
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  return (
+    <div className="max-w-4xl mx-auto">
+      <h2 className="text-2xl font-bold text-gray-800 mb-6 flex items-center gap-2">
+        <FileText className="text-blue-600" />
+        Módulo de Diagramación
+      </h2>
+
+      <div className="bg-white rounded-lg shadow-sm border border-gray-200 p-8">
+        <p className="text-gray-600 mb-6">
+          Seleccione la fecha de edición para generar el archivo XML de exportación.
+          Este archivo contiene todos los avisos activos para el día seleccionado, agrupados por rubro.
+        </p>
+
+        <div className="flex items-end gap-4 max-w-md">
+          <div className="flex-1">
+            <label className="block text-sm font-medium text-gray-700 mb-1">
+              Fecha de Edición
+            </label>
+            <div className="relative">
+              <input
+                type="date"
+                value={date}
+                onChange={(e) => setDate(e.target.value)}
+                className="w-full p-3 pl-10 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 outline-none"
+              />
+              <Calendar className="absolute left-3 top-3.5 text-gray-400" size={18} />
+            </div>
+          </div>
+
+          <button
+            onClick={handleDownload}
+            disabled={loading}
+            className="bg-blue-600 text-white px-6 py-3 rounded-lg hover:bg-blue-700 disabled:bg-blue-300 transition flex items-center gap-2 font-medium"
+          >
+            {loading ? 'Generando...' : (
+              <>
+                <Download size={20} /> Descargar XML
+              </>
+            )}
+          </button>
+        </div>
+
+        <div className="mt-8 p-4 bg-yellow-50 border border-yellow-100 rounded-md text-sm text-yellow-800">
+          <strong>Nota:</strong> Solo se exportarán los avisos que tengan texto de impresión definido y cuyo rango de fechas cubra el día seleccionado.
+        </div>
+      </div>
+    </div>
+  );
+}

frontend/admin-panel/src/pages/Pricing/PricingManager.tsx

@@ -0,0 +1,142 @@
+import { useState, useEffect } from 'react';
+import api from '../../services/api';
+import { Save, DollarSign } from 'lucide-react';
+
+interface PricingConfig {
+  basePrice: number;
+  baseWordCount: number;
+  extraWordPrice: number;
+  specialChars: string;
+  specialCharPrice: number;
+  boldSurcharge: number;
+  frameSurcharge: number;
+}
+
+interface Category { id: number; name: string; }
+
+export default function PricingManager() {
+  const [categories, setCategories] = useState<Category[]>([]);
+  const [selectedCat, setSelectedCat] = useState<number | null>(null);
+  const [config, setConfig] = useState<PricingConfig>({
+    basePrice: 0, baseWordCount: 15, extraWordPrice: 0,
+    specialChars: '!', specialCharPrice: 0, boldSurcharge: 0, frameSurcharge: 0
+  });
+  const [loading, setLoading] = useState(false);
+
+  useEffect(() => {
+    // Cargar categorías
+    api.get('/categories').then(res => setCategories(res.data));
+  }, []);
+
+  useEffect(() => {
+    if (selectedCat) {
+      // Cargar config existente
+      api.get(`/pricing/${selectedCat}`).then(res => {
+        if (res.data) setConfig(res.data);
+        else setConfig({ // Default si no existe
+          basePrice: 0, baseWordCount: 15, extraWordPrice: 0,
+          specialChars: '!', specialCharPrice: 0, boldSurcharge: 0, frameSurcharge: 0
+        });
+      });
+    }
+  }, [selectedCat]);
+
+  const handleSave = async () => {
+    if (!selectedCat) return;
+    setLoading(true);
+    try {
+      await api.post('/pricing', { ...config, categoryId: selectedCat });
+      alert('Configuración guardada correctamente.');
+    } catch (e) {
+      alert('Error al guardar.');
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  return (
+    <div className="max-w-4xl mx-auto">
+      <h2 className="text-2xl font-bold mb-6 flex items-center gap-2">
+        <DollarSign className="text-green-600" />
+        Gestor de Tarifas y Reglas
+      </h2>
+
+      <div className="bg-white p-6 rounded shadow mb-6">
+        <label className="block text-sm font-medium mb-2">Seleccionar Rubro a Configurar</label>
+        <select
+          className="w-full border p-2 rounded"
+          onChange={e => setSelectedCat(Number(e.target.value))}
+          value={selectedCat || ''}
+        >
+          <option value="">-- Seleccione --</option>
+          {categories.map(c => <option key={c.id} value={c.id}>{c.name}</option>)}
+        </select>
+      </div>
+
+      {selectedCat && (
+        <div className="bg-white p-6 rounded shadow border border-gray-200">
+          <h3 className="font-bold text-lg mb-4 border-b pb-2">Reglas de Precio</h3>
+
+          <div className="grid grid-cols-2 gap-6">
+            {/* Tarifa Base */}
+            <div className="space-y-4">
+              <h4 className="font-semibold text-blue-600">Base</h4>
+              <div>
+                <label className="block text-sm text-gray-600">Precio Mínimo ($)</label>
+                <input type="number" className="border p-2 rounded w-full"
+                  value={config.basePrice} onChange={e => setConfig({ ...config, basePrice: parseFloat(e.target.value) })} />
+              </div>
+              <div>
+                <label className="block text-sm text-gray-600">Palabras Incluidas (Cant.)</label>
+                <input type="number" className="border p-2 rounded w-full"
+                  value={config.baseWordCount} onChange={e => setConfig({ ...config, baseWordCount: parseInt(e.target.value) })} />
+              </div>
+              <div>
+                <label className="block text-sm text-gray-600">Costo Palabra Extra ($)</label>
+                <input type="number" className="border p-2 rounded w-full"
+                  value={config.extraWordPrice} onChange={e => setConfig({ ...config, extraWordPrice: parseFloat(e.target.value) })} />
+              </div>
+            </div>
+
+            {/* Extras y Estilos */}
+            <div className="space-y-4">
+              <h4 className="font-semibold text-purple-600">Extras y Recargos</h4>
+              <div>
+                <label className="block text-sm text-gray-600">Caracteres Especiales (ej: !$%)</label>
+                <input type="text" className="border p-2 rounded w-full"
+                  value={config.specialChars} onChange={e => setConfig({ ...config, specialChars: e.target.value })} />
+              </div>
+              <div>
+                <label className="block text-sm text-gray-600">Costo por Caracter Especial ($)</label>
+                <input type="number" className="border p-2 rounded w-full"
+                  value={config.specialCharPrice} onChange={e => setConfig({ ...config, specialCharPrice: parseFloat(e.target.value) })} />
+              </div>
+              <div className="grid grid-cols-2 gap-2">
+                <div>
+                  <label className="block text-sm text-gray-600">Recargo Negrita ($)</label>
+                  <input type="number" className="border p-2 rounded w-full"
+                    value={config.boldSurcharge} onChange={e => setConfig({ ...config, boldSurcharge: parseFloat(e.target.value) })} />
+                </div>
+                <div>
+                  <label className="block text-sm text-gray-600">Recargo Recuadro ($)</label>
+                  <input type="number" className="border p-2 rounded w-full"
+                    value={config.frameSurcharge} onChange={e => setConfig({ ...config, frameSurcharge: parseFloat(e.target.value) })} />
+                </div>
+              </div>
+            </div>
+          </div>
+
+          <div className="mt-8 flex justify-end">
+            <button
+              onClick={handleSave}
+              disabled={loading}
+              className="bg-blue-600 text-white px-6 py-2 rounded hover:bg-blue-700 flex items-center gap-2"
+            >
+              <Save size={18} /> Guardar Configuración
+            </button>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}

frontend/admin-panel/src/pages/Pricing/PromotionsManager.tsx

@@ -0,0 +1,232 @@
+import { useState, useEffect } from 'react';
+import api from '../../services/api';
+import Modal from '../../components/Modal';
+import { Percent, Trash2, Plus, Edit, CalendarClock } from 'lucide-react';
+
+interface Promotion {
+  id: number;
+  name: string;
+  categoryId: number | null;
+  minDays: number;
+  daysOfWeek: string; // "0,6" (Domingo, Sabado)
+  discountPercentage: number;
+  discountFixedAmount: number;
+  isActive: boolean;
+}
+
+interface Category { id: number; name: string; }
+
+export default function PromotionsManager() {
+  const [promotions, setPromotions] = useState<Promotion[]>([]);
+  const [categories, setCategories] = useState<Category[]>([]);
+  const [isModalOpen, setIsModalOpen] = useState(false);
+  const [editingId, setEditingId] = useState<number | null>(null);
+
+  const [formData, setFormData] = useState<Partial<Promotion>>({
+    name: '', categoryId: null, minDays: 0, daysOfWeek: '',
+    discountPercentage: 0, discountFixedAmount: 0, isActive: true
+  });
+
+  // Helper para días de la semana
+  const daysOptions = [
+    { val: 1, label: 'Lun' }, { val: 2, label: 'Mar' }, { val: 3, label: 'Mié' },
+    { val: 4, label: 'Jue' }, { val: 5, label: 'Vie' }, { val: 6, label: 'Sáb' }, { val: 0, label: 'Dom' }
+  ];
+
+  useEffect(() => {
+    loadData();
+  }, []);
+
+  const loadData = async () => {
+    const [promosRes, catRes] = await Promise.all([
+      api.get('/pricing/promotions'),
+      api.get('/categories')
+    ]);
+    setPromotions(promosRes.data);
+    setCategories(catRes.data);
+  };
+
+  const handleEdit = (promo: Promotion) => {
+    setEditingId(promo.id);
+    setFormData(promo);
+    setIsModalOpen(true);
+  };
+
+  const handleCreate = () => {
+    setEditingId(null);
+    setFormData({
+      name: '', categoryId: null, minDays: 0, daysOfWeek: '',
+      discountPercentage: 0, discountFixedAmount: 0, isActive: true
+    });
+    setIsModalOpen(true);
+  };
+
+  const handleDelete = async (id: number) => {
+    if (!confirm("¿Eliminar promoción?")) return;
+    await api.delete(`/pricing/promotions/${id}`);
+    loadData();
+  };
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+
+    // Convertir categoryId 0 a null para el backend
+    const payload = {
+      ...formData,
+      categoryId: formData.categoryId === 0 ? null : formData.categoryId
+    };
+
+    try {
+      if (editingId) {
+        await api.put(`/pricing/promotions/${editingId}`, payload);
+      } else {
+        await api.post('/pricing/promotions', payload);
+      }
+      setIsModalOpen(false);
+      loadData();
+    } catch (e) {
+      alert("Error al guardar");
+    }
+  };
+
+  const toggleDay = (dayVal: number) => {
+    const current = formData.daysOfWeek ? formData.daysOfWeek.split(',').map(Number) : [];
+    let newDays;
+    if (current.includes(dayVal)) {
+      newDays = current.filter(d => d !== dayVal);
+    } else {
+      newDays = [...current, dayVal];
+    }
+    setFormData({ ...formData, daysOfWeek: newDays.join(',') });
+  };
+
+  return (
+    <div className="max-w-6xl mx-auto">
+      <div className="flex justify-between items-center mb-6">
+        <h2 className="text-2xl font-bold flex items-center gap-2 text-gray-800">
+          <Percent className="text-orange-500" />
+          Gestión de Promociones
+        </h2>
+        <button onClick={handleCreate} className="bg-blue-600 text-white px-4 py-2 rounded flex items-center gap-2 hover:bg-blue-700">
+          <Plus size={18} /> Nueva Promo
+        </button>
+      </div>
+
+      <div className="bg-white rounded shadow overflow-hidden">
+        <table className="w-full text-left">
+          <thead className="bg-gray-50 border-b">
+            <tr>
+              <th className="p-4">Nombre</th>
+              <th className="p-4">Rubro</th>
+              <th className="p-4">Condición Días</th>
+              <th className="p-4">Descuento</th>
+              <th className="p-4">Estado</th>
+              <th className="p-4 text-right">Acciones</th>
+            </tr>
+          </thead>
+          <tbody>
+            {promotions.map(p => (
+              <tr key={p.id} className="border-b hover:bg-gray-50">
+                <td className="p-4 font-medium">{p.name}</td>
+                <td className="p-4 text-sm text-gray-600">
+                  {p.categoryId ? categories.find(c => c.id === p.categoryId)?.name : 'Todos'}
+                </td>
+                <td className="p-4 text-sm">
+                  {p.minDays > 0 ? `Mínimo ${p.minDays} días` : 'Sin mínimo'}
+                  {p.daysOfWeek && (
+                    <div className="text-xs text-gray-500 mt-1 flex gap-1">
+                      <CalendarClock size={12} />
+                      {p.daysOfWeek.split(',').map(d => daysOptions.find(o => o.val === Number(d))?.label).join(', ')}
+                    </div>
+                  )}
+                </td>
+                <td className="p-4 font-bold text-green-600">
+                  {p.discountPercentage > 0 ? `-${p.discountPercentage}%` : `-$${p.discountFixedAmount}`}
+                </td>
+                <td className="p-4">
+                  <span className={`px-2 py-1 rounded text-xs ${p.isActive ? 'bg-green-100 text-green-800' : 'bg-red-100 text-red-800'}`}>
+                    {p.isActive ? 'Activa' : 'Inactiva'}
+                  </span>
+                </td>
+                <td className="p-4 text-right">
+                  <button onClick={() => handleEdit(p)} className="text-blue-600 p-2"><Edit size={18} /></button>
+                  <button onClick={() => handleDelete(p.id)} className="text-red-600 p-2"><Trash2 size={18} /></button>
+                </td>
+              </tr>
+            ))}
+          </tbody>
+        </table>
+      </div>
+
+      <Modal isOpen={isModalOpen} onClose={() => setIsModalOpen(false)} title={editingId ? 'Editar Promo' : 'Nueva Promo'}>
+        <form onSubmit={handleSubmit} className="space-y-4">
+          <div>
+            <label className="block text-sm font-medium mb-1">Nombre Promoción</label>
+            <input type="text" required className="w-full border p-2 rounded"
+              value={formData.name} onChange={e => setFormData({ ...formData, name: e.target.value })} />
+          </div>
+
+          <div className="grid grid-cols-2 gap-4">
+            <div>
+              <label className="block text-sm font-medium mb-1">Aplica a Rubro</label>
+              <select className="w-full border p-2 rounded"
+                value={formData.categoryId || 0}
+                onChange={e => setFormData({ ...formData, categoryId: Number(e.target.value) || null })}
+              >
+                <option value="0">Todos los Rubros</option>
+                {categories.map(c => <option key={c.id} value={c.id}>{c.name}</option>)}
+              </select>
+            </div>
+            <div>
+              <label className="block text-sm font-medium mb-1">Mínimo de Días</label>
+              <input type="number" className="w-full border p-2 rounded"
+                value={formData.minDays} onChange={e => setFormData({ ...formData, minDays: parseInt(e.target.value) })} />
+            </div>
+          </div>
+
+          <div>
+            <label className="block text-sm font-medium mb-2">Aplica solo estos días (Opcional)</label>
+            <div className="flex gap-2 flex-wrap">
+              {daysOptions.map(day => {
+                const isSelected = formData.daysOfWeek?.split(',').includes(day.val.toString());
+                return (
+                  <button
+                    key={day.val} type="button"
+                    onClick={() => toggleDay(day.val)}
+                    className={`px-3 py-1 rounded text-sm border ${isSelected ? 'bg-blue-600 text-white border-blue-600' : 'bg-gray-50 border-gray-300'}`}
+                  >
+                    {day.label}
+                  </button>
+                )
+              })}
+            </div>
+          </div>
+
+          <div className="grid grid-cols-2 gap-4 border-t pt-4">
+            <div>
+              <label className="block text-sm font-medium mb-1">Descuento %</label>
+              <input type="number" className="w-full border p-2 rounded"
+                value={formData.discountPercentage} onChange={e => setFormData({ ...formData, discountPercentage: parseFloat(e.target.value) })} />
+            </div>
+            <div>
+              <label className="block text-sm font-medium mb-1">Descuento Fijo $</label>
+              <input type="number" className="w-full border p-2 rounded"
+                value={formData.discountFixedAmount} onChange={e => setFormData({ ...formData, discountFixedAmount: parseFloat(e.target.value) })} />
+            </div>
+          </div>
+
+          <div className="flex items-center gap-2 pt-2">
+            <input type="checkbox" id="active"
+              checked={formData.isActive} onChange={e => setFormData({ ...formData, isActive: e.target.checked })} />
+            <label htmlFor="active" className="text-sm">Promoción Activa</label>
+          </div>
+
+          <div className="pt-4 flex justify-end gap-2">
+            <button type="button" onClick={() => setIsModalOpen(false)} className="px-4 py-2 bg-gray-200 rounded">Cancelar</button>
+            <button type="submit" className="px-4 py-2 bg-blue-600 text-white rounded">Guardar</button>
+          </div>
+        </form>
+      </Modal>
+    </div>
+  );
+}

frontend/admin-panel/src/pages/Users/UserManager.tsx

@@ -1,7 +1,7 @@
 import { useState, useEffect } from 'react';
 // @ts-ignore
-import { User } from '../../types/User';
+import { type User } from '../../types/User';
-import { userService } from '../../services/userService';
+import { userService, type CreateUserDto } from '../../services/userService';
 import Modal from '../../components/Modal';
 import { Plus, Edit, Trash2, Shield, User as UserIcon } from 'lucide-react';
 
@@ -43,10 +43,9 @@ export default function UserManager() {
   // @ts-ignore
   const handleEdit = (user: User) => {
     setEditingId(user.id);
-    // Password left empty intentionally
     setFormData({
       username: user.username,
-      password: '',
+      password: '', // Password vacío al editar
       role: user.role,
       email: user.email || ''
     });
@@ -66,15 +65,29 @@ export default function UserManager() {
   const handleSubmit = async (e: React.FormEvent) => {
     e.preventDefault();
     try {
+      // Validar password obligatorio al crear
+      if (!editingId && !formData.password) {
+        alert("La contraseña es obligatoria para nuevos usuarios");
+        return;
+      }
+
+      const payload: CreateUserDto = {
+        username: formData.username,
+        role: formData.role,
+        email: formData.email,
+        password: formData.password || undefined // Enviar undefined si está vacío en edit
+      };
+
       if (editingId) {
-        await userService.update(editingId, formData);
+        await userService.update(editingId, payload);
       } else {
-        await userService.create(formData as any);
+        // En create, password es string (ya validado arriba)
+        await userService.create(payload as CreateUserDto);
       }
       setIsModalOpen(false);
       loadUsers();
     } catch (error) {
-      alert('Error guardando usuario');
+      alert('Error procesando usuario');
     }
   };
 

frontend/admin-panel/src/services/api.ts

@@ -1,7 +1,7 @@
 import axios from 'axios';
 
 const api = axios.create({
-  baseURL: 'https://localhost:7034/api', // Puerto HTTPS obtenido de launchSettings.json
+  baseURL: import.meta.env.VITE_API_URL, // Usa la variable de entorno
 });
 
 api.interceptors.request.use((config) => {
@@ -12,4 +12,4 @@ api.interceptors.request.use((config) => {
   return config;
 });
 
-export default api;
+export default api;

frontend/admin-panel/src/services/attributeService.ts

@@ -1,5 +1,5 @@
 import api from './api';
-import { AttributeDefinition } from '../types/AttributeDefinition';
+import { type AttributeDefinition } from '../types/AttributeDefinition';
 
 export const attributeService = {
   getByCategoryId: async (categoryId: number): Promise<AttributeDefinition[]> => {

frontend/admin-panel/src/services/categoryService.ts

@@ -1,5 +1,5 @@
 import api from './api';
-import { Category } from '../types/Category';
+import { type Category } from '../types/Category';
 
 export const categoryService = {
   getAll: async (): Promise<Category[]> => {

frontend/admin-panel/src/services/exportService.ts

@@ -0,0 +1,20 @@
+import api from './api';
+
+export const exportService = {
+  downloadDiagram: async (date: string) => {
+    // Axios necesita config especial para descargar archivos (blob)
+    const response = await api.get('/exports/diagram', {
+      params: { date },
+      responseType: 'blob'
+    });
+
+    // Truco para forzar la descarga en el navegador
+    const url = window.URL.createObjectURL(new Blob([response.data]));
+    const link = document.createElement('a');
+    link.href = url;
+    link.setAttribute('download', `diagrama_${date}.xml`);
+    document.body.appendChild(link);
+    link.click();
+    link.remove();
+  }
+};

frontend/admin-panel/src/services/operationService.ts

@@ -1,5 +1,5 @@
 import api from './api';
-import { Operation } from '../types/Operation'; // ID: type-import-fix
+import { type Operation } from '../types/Operation';
 
 export const operationService = {
   getAll: async (): Promise<Operation[]> => {

frontend/admin-panel/src/services/userService.ts

@@ -1,25 +1,17 @@
 import api from './api';
-// @ts-ignore
+import { type User } from '../types/User';
-import type { User } from '../types/User';
 
-interface CreateUserDto {
+// DTOs específicos para creación/edición para no usar 'any'
+export interface CreateUserDto {
   username: string;
-  password: string;
+  password?: string; // Opcional en update, requerido en create (validar en UI)
   role: string;
-  email?: string;
+  email: string;
-}
-
-interface UpdateUserDto {
-  username: string;
-  password?: string;
-  role: string;
-  email?: string;
 }
 
 export const userService = {
   getAll: async (): Promise<User[]> => {
     const response = await api.get<User[]>('/users');
-    // @ts-ignore
     return response.data;
   },
 
@@ -27,11 +19,11 @@ export const userService = {
     await api.post('/users', user);
   },
 
-  update: async (id: number, user: UpdateUserDto): Promise<void> => {
+  update: async (id: number, user: CreateUserDto): Promise<void> => {
     await api.put(`/users/${id}`, user);
   },
 
   delete: async (id: number): Promise<void> => {
     await api.delete(`/users/${id}`);
   }
-};
+};

frontend/counter-panel/.gitignore

@@ -0,0 +1,24 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?

frontend/counter-panel/README.md

@@ -0,0 +1,73 @@
+# React + TypeScript + Vite
+
+This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
+
+Currently, two official plugins are available:
+
+- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react) uses [Babel](https://babeljs.io/) (or [oxc](https://oxc.rs) when used in [rolldown-vite](https://vite.dev/guide/rolldown)) for Fast Refresh
+- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
+
+## React Compiler
+
+The React Compiler is not enabled on this template because of its impact on dev & build performances. To add it, see [this documentation](https://react.dev/learn/react-compiler/installation).
+
+## Expanding the ESLint configuration
+
+If you are developing a production application, we recommend updating the configuration to enable type-aware lint rules:
+
+```js
+export default defineConfig([
+  globalIgnores(['dist']),
+  {
+    files: ['**/*.{ts,tsx}'],
+    extends: [
+      // Other configs...
+
+      // Remove tseslint.configs.recommended and replace with this
+      tseslint.configs.recommendedTypeChecked,
+      // Alternatively, use this for stricter rules
+      tseslint.configs.strictTypeChecked,
+      // Optionally, add this for stylistic rules
+      tseslint.configs.stylisticTypeChecked,
+
+      // Other configs...
+    ],
+    languageOptions: {
+      parserOptions: {
+        project: ['./tsconfig.node.json', './tsconfig.app.json'],
+        tsconfigRootDir: import.meta.dirname,
+      },
+      // other options...
+    },
+  },
+])
+```
+
+You can also install [eslint-plugin-react-x](https://github.com/Rel1cx/eslint-react/tree/main/packages/plugins/eslint-plugin-react-x) and [eslint-plugin-react-dom](https://github.com/Rel1cx/eslint-react/tree/main/packages/plugins/eslint-plugin-react-dom) for React-specific lint rules:
+
+```js
+// eslint.config.js
+import reactX from 'eslint-plugin-react-x'
+import reactDom from 'eslint-plugin-react-dom'
+
+export default defineConfig([
+  globalIgnores(['dist']),
+  {
+    files: ['**/*.{ts,tsx}'],
+    extends: [
+      // Other configs...
+      // Enable lint rules for React
+      reactX.configs['recommended-typescript'],
+      // Enable lint rules for React DOM
+      reactDom.configs.recommended,
+    ],
+    languageOptions: {
+      parserOptions: {
+        project: ['./tsconfig.node.json', './tsconfig.app.json'],
+        tsconfigRootDir: import.meta.dirname,
+      },
+      // other options...
+    },
+  },
+])
+```

frontend/counter-panel/eslint.config.js

@@ -0,0 +1,23 @@
+import js from '@eslint/js'
+import globals from 'globals'
+import reactHooks from 'eslint-plugin-react-hooks'
+import reactRefresh from 'eslint-plugin-react-refresh'
+import tseslint from 'typescript-eslint'
+import { defineConfig, globalIgnores } from 'eslint/config'
+
+export default defineConfig([
+  globalIgnores(['dist']),
+  {
+    files: ['**/*.{ts,tsx}'],
+    extends: [
+      js.configs.recommended,
+      tseslint.configs.recommended,
+      reactHooks.configs.flat.recommended,
+      reactRefresh.configs.vite,
+    ],
+    languageOptions: {
+      ecmaVersion: 2020,
+      globals: globals.browser,
+    },
+  },
+])

frontend/counter-panel/index.html

@@ -0,0 +1,13 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>counter-panel</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>

frontend/counter-panel/package.json

@@ -0,0 +1,40 @@
+{
+  "name": "counter-panel",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc -b && vite build",
+    "lint": "eslint .",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "axios": "^1.13.2",
+    "clsx": "^2.1.1",
+    "lucide-react": "^0.561.0",
+    "react": "^19.2.0",
+    "react-dom": "^19.2.0",
+    "react-router-dom": "^7.11.0",
+    "tailwind-merge": "^3.4.0",
+    "zustand": "^5.0.9"
+  },
+  "devDependencies": {
+    "@eslint/js": "^9.39.1",
+    "@tailwindcss/postcss": "^4.1.18",
+    "@types/node": "^24.10.1",
+    "@types/react": "^19.2.5",
+    "@types/react-dom": "^19.2.3",
+    "@vitejs/plugin-react": "^5.1.1",
+    "autoprefixer": "^10.4.23",
+    "eslint": "^9.39.1",
+    "eslint-plugin-react-hooks": "^7.0.1",
+    "eslint-plugin-react-refresh": "^0.4.24",
+    "globals": "^16.5.0",
+    "postcss": "^8.5.6",
+    "tailwindcss": "^4.1.18",
+    "typescript": "~5.9.3",
+    "typescript-eslint": "^8.46.4",
+    "vite": "^7.2.4"
+  }
+}

frontend/counter-panel/postcss.config.js

@@ -0,0 +1,6 @@
+export default {
+  plugins: {
+    '@tailwindcss/postcss': {},
+    autoprefixer: {},
+  },
+}

frontend/counter-panel/src/App.css

@@ -0,0 +1,42 @@
+#root {
+  max-width: 1280px;
+  margin: 0 auto;
+  padding: 2rem;
+  text-align: center;
+}
+
+.logo {
+  height: 6em;
+  padding: 1.5em;
+  will-change: filter;
+  transition: filter 300ms;
+}
+.logo:hover {
+  filter: drop-shadow(0 0 2em #646cffaa);
+}
+.logo.react:hover {
+  filter: drop-shadow(0 0 2em #61dafbaa);
+}
+
+@keyframes logo-spin {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+@media (prefers-reduced-motion: no-preference) {
+  a:nth-of-type(2) .logo {
+    animation: logo-spin infinite 20s linear;
+  }
+}
+
+.card {
+  padding: 2em;
+}
+
+.read-the-docs {
+  color: #888;
+}

frontend/counter-panel/src/App.tsx

@@ -0,0 +1,19 @@
+import { BrowserRouter, Routes, Route } from 'react-router-dom';
+import CounterLayout from './layouts/CounterLayout';
+import FastEntryPage from './pages/FastEntryPage';
+import CashRegisterPage from './pages/CashRegisterPage';
+
+function App() {
+  return (
+    <BrowserRouter>
+      <Routes>
+        <Route element={<CounterLayout />}>
+          <Route path="/" element={<FastEntryPage />} />
+          <Route path="/cash-register" element={<CashRegisterPage />} />
+        </Route>
+      </Routes>
+    </BrowserRouter>
+  );
+}
+
+export default App;

frontend/counter-panel/src/hooks/useDebounce.ts

@@ -0,0 +1,24 @@
+import { useState, useEffect } from 'react';
+
+/**
+ * Hook para retrasar la actualización de un valor hasta que pase un tiempo de espera.
+ * Útil para búsquedas o cálculos en tiempo real.
+ */
+export function useDebounce<T>(value: T, delay: number): T {
+  const [debouncedValue, setDebouncedValue] = useState<T>(value);
+
+  useEffect(() => {
+    // Configurar el timer
+    const handler = setTimeout(() => {
+      setDebouncedValue(value);
+    }, delay);
+
+    // Limpiar el timer si el valor cambia antes de que termine el delay
+    // (esto es lo que evita llamadas excesivas)
+    return () => {
+      clearTimeout(handler);
+    };
+  }, [value, delay]);
+
+  return debouncedValue;
+}

frontend/counter-panel/src/index.css

@@ -0,0 +1,18 @@
+@import "tailwindcss";
+
+@import url('https://fonts.googleapis.com/css2?family=Roboto+Mono:wght@400;500;700&family=Inter:wght@400;600&display=swap');
+
+@theme {
+  --font-sans: 'Inter', sans-serif;
+  --font-mono: 'Roboto Mono', monospace;
+  --color-slate-850: #1e293b;
+}
+
+body {
+  @apply bg-gray-100 text-slate-900 font-sans antialiased;
+}
+
+/* Estilos para simular terminal/ticket */
+.ticket-font {
+  font-family: 'Roboto Mono', monospace;
+}

frontend/counter-panel/src/layouts/CounterLayout.tsx

@@ -0,0 +1,76 @@
+import { useEffect } from 'react';
+import { Outlet, useNavigate, useLocation } from 'react-router-dom';
+import { Monitor, LogOut } from 'lucide-react';
+
+export default function CounterLayout() {
+  const navigate = useNavigate();
+  const location = useLocation();
+
+  useEffect(() => {
+    const handleKeyDown = (e: KeyboardEvent) => {
+      // Evitar conflictos si el usuario está escribiendo en un input, 
+      // excepto para F-Keys que suelen ser globales
+
+      switch (e.key) {
+        case 'F2':
+          e.preventDefault();
+          navigate('/');
+          break;
+        case 'F4':
+          e.preventDefault();
+          navigate('/cash-register');
+          break;
+        case 'Escape':
+          // Lógica para cancelar o volver
+          break;
+      }
+    };
+
+    window.addEventListener('keydown', handleKeyDown);
+    return () => window.removeEventListener('keydown', handleKeyDown);
+  }, [navigate]);
+
+  return (
+    <div className="flex flex-col h-screen bg-gray-100">
+      {/* Header tipo Sistema Legacy pero moderno */}
+      <header className="bg-slate-800 text-white p-3 flex justify-between items-center shadow-md">
+        <div className="flex items-center gap-4">
+          <div className="font-bold text-xl tracking-wider flex items-center gap-2">
+            <Monitor className="text-green-400" />
+            SIG-CM <span className="text-slate-400 text-sm font-normal">MOSTRADOR v1.0</span>
+          </div>
+          <div className="h-6 w-px bg-slate-600 mx-2"></div>
+          <div className="text-sm text-slate-300">
+            Sucursal: <span className="text-white font-mono">CENTRAL</span> | Caja: <span className="text-white font-mono">01</span>
+          </div>
+        </div>
+
+        <button className="text-red-400 hover:text-red-300 flex items-center gap-1 text-sm font-bold">
+          <LogOut size={16} /> SALIR
+        </button>
+      </header>
+
+      {/* Main Content Area */}
+      <main className="flex-1 overflow-hidden flex">
+        <Outlet />
+      </main>
+
+      {/* Footer con Barra de Atajos */}
+      <footer className="bg-slate-900 text-white p-2 flex gap-4 text-sm font-mono border-t-4 border-blue-600">
+        <ShortcutKey k="F2" label="Nuevo Aviso" active={location.pathname === '/'} />
+        <ShortcutKey k="F4" label="Caja Diaria" active={location.pathname === '/cash-register'} />
+        <ShortcutKey k="F10" label="Cobrar/Imprimir" />
+        <ShortcutKey k="ESC" label="Cancelar" />
+      </footer>
+    </div>
+  );
+}
+
+function ShortcutKey({ k, label, active = false }: { k: string, label: string, active?: boolean }) {
+  return (
+    <div className={`flex items-center gap-2 px-3 py-1 rounded ${active ? 'bg-blue-700 text-white' : 'text-slate-400'}`}>
+      <span className="bg-slate-700 px-2 rounded text-white font-bold">{k}</span>
+      <span>{label}</span>
+    </div>
+  );
+}

frontend/counter-panel/src/main.tsx

@@ -0,0 +1,10 @@
+import { StrictMode } from 'react'
+import { createRoot } from 'react-dom/client'
+import './index.css'
+import App from './App.tsx'
+
+createRoot(document.getElementById('root')!).render(
+  <StrictMode>
+    <App />
+  </StrictMode>,
+)

frontend/counter-panel/src/pages/CashRegisterPage.tsx

@@ -0,0 +1,39 @@
+export default function CashRegisterPage() {
+  return (
+    <div className="p-6 w-full">
+      <h2 className="text-2xl font-bold text-slate-800 mb-6">Caja Diaria</h2>
+      <div className="grid grid-cols-1 md:grid-cols-3 gap-6 mb-8">
+        <div className="bg-white p-6 rounded shadow border-l-4 border-green-500">
+          <div className="text-gray-500 text-sm font-bold uppercase">Total Efectivo</div>
+          <div className="text-3xl font-mono mt-2">$ 15,400.00</div>
+        </div>
+        <div className="bg-white p-6 rounded shadow border-l-4 border-blue-500">
+          <div className="text-gray-500 text-sm font-bold uppercase">Avisos Cobrados</div>
+          <div className="text-3xl font-mono mt-2">12</div>
+        </div>
+      </div>
+
+      <div className="bg-white rounded shadow overflow-hidden">
+        <table className="w-full text-left text-sm">
+          <thead className="bg-gray-50 border-b">
+            <tr>
+              <th className="p-3">Hora</th>
+              <th className="p-3">Concepto</th>
+              <th className="p-3">Usuario</th>
+              <th className="p-3 text-right">Monto</th>
+            </tr>
+          </thead>
+          <tbody>
+            <tr className="border-b">
+              <td className="p-3 font-mono">09:15</td>
+              <td className="p-3">Aviso Automotores x3 días</td>
+              <td className="p-3">cajero1</td>
+              <td className="p-3 text-right font-mono">$ 4,500.00</td>
+            </tr>
+            {/* Más filas mock */}
+          </tbody>
+        </table>
+      </div>
+    </div>
+  );
+}

frontend/counter-panel/src/pages/FastEntryPage.tsx

@@ -0,0 +1,385 @@
+import { useState, useEffect, useRef } from 'react';
+import api from '../services/api';
+import { useDebounce } from '../hooks/useDebounce';
+import {
+  Printer, Save, CheckSquare, Square, Tag,
+  AlignLeft, AlignCenter, AlignRight, AlignJustify,
+  Type
+} from 'lucide-react';
+import clsx from 'clsx';
+
+interface Category { id: number; name: string; }
+interface Operation { id: number; name: string; }
+
+interface PricingResult {
+  totalPrice: number;
+  baseCost: number;
+  extraCost: number;
+  surcharges: number;
+  discount: number;
+  wordCount: number;
+  specialCharCount: number;
+  details: string;
+  appliedPromotion: string;
+}
+
+export default function FastEntryPage() {
+  const [categories, setCategories] = useState<Category[]>([]);
+  const [operations, setOperations] = useState<Operation[]>([]);
+
+  const [formData, setFormData] = useState({
+    categoryId: '',
+    operationId: '',
+    text: '',
+    days: 3,
+    clientName: '',
+  });
+
+  const [options, setOptions] = useState({
+    isBold: false,
+    isFrame: false,
+    fontSize: 'normal', // 'small', 'normal', 'large', 'extra'
+    alignment: 'left'   // 'left', 'center', 'right', 'justify'
+  });
+
+  const [pricing, setPricing] = useState<PricingResult>({
+    totalPrice: 0, baseCost: 0, extraCost: 0, surcharges: 0, discount: 0,
+    wordCount: 0, specialCharCount: 0, details: '', appliedPromotion: ''
+  });
+
+  const textInputRef = useRef<HTMLTextAreaElement>(null);
+  const debouncedText = useDebounce(formData.text, 500);
+
+  useEffect(() => {
+    const fetchData = async () => {
+      try {
+        const [catRes, opRes] = await Promise.all([
+          api.get('/categories'),
+          api.get('/operations')
+        ]);
+        setCategories(catRes.data);
+        setOperations(opRes.data);
+      } catch (error) {
+        console.error("Error cargando datos base", error);
+      }
+    };
+    fetchData();
+  }, []);
+
+  useEffect(() => {
+    if (!formData.categoryId || !formData.text) {
+      setPricing(prev => ({ ...prev, totalPrice: 0, details: '' }));
+      return;
+    }
+
+    const calculatePrice = async () => {
+      try {
+        const res = await api.post('/pricing/calculate', {
+          categoryId: parseInt(formData.categoryId),
+          text: formData.text,
+          days: formData.days,
+          isBold: options.isBold,
+          isFrame: options.isFrame,
+          startDate: new Date().toISOString()
+        });
+        setPricing(res.data);
+      } catch (error) {
+        console.error("Error calculando precio", error);
+      }
+    };
+
+    calculatePrice();
+  }, [debouncedText, formData.categoryId, formData.days, options]);
+
+  const handleSubmit = async () => {
+    if (!formData.categoryId || !formData.operationId || !formData.text) {
+      alert("Faltan datos obligatorios.");
+      return;
+    }
+
+    if (!confirm(`¿Confirmar cobro de $${pricing.totalPrice.toLocaleString()}?`)) return;
+
+    try {
+      const startDate = new Date();
+      startDate.setDate(startDate.getDate() + 1);
+
+      await api.post('/listings', {
+        categoryId: parseInt(formData.categoryId),
+        operationId: parseInt(formData.operationId),
+        title: formData.text.substring(0, 40) + (formData.text.length > 40 ? '...' : ''),
+        description: formData.text,
+        price: 0,
+        currency: 'ARS',
+        status: 'Published',
+        userId: null,
+        printText: formData.text,
+        printStartDate: startDate.toISOString(),
+        printDaysCount: formData.days,
+        isBold: options.isBold,
+        isFrame: options.isFrame,
+        printFontSize: options.fontSize,
+        printAlignment: options.alignment
+      });
+
+      alert('✅ Aviso guardado y ticket generado.');
+      setFormData({ ...formData, text: '', clientName: '' });
+      setOptions({ isBold: false, isFrame: false, fontSize: 'normal', alignment: 'left' });
+      textInputRef.current?.focus();
+
+    } catch (err) {
+      console.error(err);
+      alert('❌ Error al procesar el cobro.');
+    }
+  };
+
+  // Helper para clases de Tailwind según estado
+  const getFontSizeClass = (size: string) => {
+    switch (size) {
+      case 'small': return 'text-xs';
+      case 'large': return 'text-lg';
+      case 'extra': return 'text-xl';
+      default: return 'text-sm';
+    }
+  };
+
+  const getAlignClass = (align: string) => {
+    switch (align) {
+      case 'center': return 'text-center';
+      case 'right': return 'text-right';
+      case 'justify': return 'text-justify';
+      default: return 'text-left';
+    }
+  };
+
+  return (
+    <div className="w-full h-full p-4 flex gap-4 bg-gray-100">
+
+      {/* --- COLUMNA IZQUIERDA: INPUTS --- */}
+      <div className="flex-1 bg-white rounded-lg shadow-sm border border-gray-200 p-6 flex flex-col">
+        <div className="flex justify-between items-center mb-6 border-b pb-2">
+          <h2 className="text-xl font-bold text-slate-800">Nueva Publicación (F2)</h2>
+          <span className="text-xs font-mono text-slate-400">ID TERMINAL: T-01</span>
+        </div>
+
+        <form className="flex-1 flex flex-col gap-4">
+          <div className="grid grid-cols-2 gap-4">
+            <div>
+              <label className="block text-sm font-bold text-slate-700 mb-1">Rubro</label>
+              <select
+                className="w-full p-2 border border-gray-300 rounded focus:ring-2 focus:ring-blue-500 bg-gray-50 outline-none"
+                value={formData.categoryId}
+                onChange={e => setFormData({ ...formData, categoryId: e.target.value })}
+                autoFocus
+              >
+                <option value="">-- Seleccionar --</option>
+                {categories.map(c => <option key={c.id} value={c.id}>{c.name}</option>)}
+              </select>
+            </div>
+            <div>
+              <label className="block text-sm font-bold text-slate-700 mb-1">Operación</label>
+              <select
+                className="w-full p-2 border border-gray-300 rounded focus:ring-2 focus:ring-blue-500 bg-gray-50 outline-none"
+                value={formData.operationId}
+                onChange={e => setFormData({ ...formData, operationId: e.target.value })}
+              >
+                <option value="">-- Seleccionar --</option>
+                {operations.map(o => <option key={o.id} value={o.id}>{o.name}</option>)}
+              </select>
+            </div>
+          </div>
+
+          <div className="flex-1 flex flex-col">
+            <label className="block text-sm font-bold text-slate-700 mb-1">Texto del Aviso</label>
+
+            {/* --- Textarea limpio sin estilos condicionales --- */}
+            <textarea
+              ref={textInputRef}
+              className="flex-1 w-full p-4 border border-gray-300 rounded resize-none focus:ring-2 focus:ring-blue-500 outline-none font-mono text-lg text-slate-700 leading-relaxed"
+              placeholder="ESCRIBA EL TEXTO AQUÍ..."
+              value={formData.text}
+              onChange={e => setFormData({ ...formData, text: e.target.value })}
+            ></textarea>
+
+            <div className="flex justify-between items-center mt-2 text-sm text-slate-500">
+              <div className="flex gap-2">
+                <span>Palabras: <b>{pricing.wordCount}</b></span>
+                {pricing.specialCharCount > 0 && <span className="text-orange-600">Signos (+$$): <b>{pricing.specialCharCount}</b></span>}
+              </div>
+              <span className="text-xs uppercase">Escribir en Mayúsculas recomendado</span>
+            </div>
+          </div>
+
+          <div className="grid grid-cols-3 gap-4 bg-gray-50 p-4 rounded border border-gray-200">
+            <div>
+              <label className="block text-xs font-bold text-slate-500 uppercase">Días</label>
+              <input
+                type="number"
+                className="w-full p-2 border rounded font-mono text-center font-bold"
+                value={formData.days}
+                onChange={e => setFormData({ ...formData, days: Math.max(1, parseInt(e.target.value) || 0) })}
+                min={1}
+              />
+            </div>
+            <div className="col-span-2">
+              <label className="block text-xs font-bold text-slate-500 uppercase">Cliente / Razón Social</label>
+              <input
+                type="text"
+                className="w-full p-2 border rounded"
+                placeholder="Consumidor Final"
+                value={formData.clientName}
+                onChange={e => setFormData({ ...formData, clientName: e.target.value })}
+              />
+            </div>
+          </div>
+        </form>
+      </div>
+
+      {/* --- COLUMNA DERECHA: TOTALES Y OPCIONES --- */}
+      <div className="w-96 flex flex-col gap-4">
+
+        {/* Panel de Totales */}
+        <div className="bg-slate-900 text-white rounded-xl p-6 shadow-xl relative overflow-hidden">
+          <div className="relative z-10">
+            <div className="text-xs text-slate-400 uppercase tracking-widest mb-1 font-semibold">Total a Cobrar</div>
+            <div className="text-5xl font-mono font-bold text-green-400 mb-4">
+              ${pricing.totalPrice.toLocaleString()}
+            </div>
+
+            <div className="space-y-2 text-sm border-t border-slate-700 pt-3">
+              <div className="flex justify-between text-slate-300">
+                <span>Base ({formData.days} días)</span>
+                <span>${pricing.baseCost.toLocaleString()}</span>
+              </div>
+
+              {pricing.extraCost > 0 && (
+                <div className="flex justify-between text-yellow-300">
+                  <span>Excedentes</span>
+                  <span>+${pricing.extraCost.toLocaleString()}</span>
+                </div>
+              )}
+
+              {pricing.surcharges > 0 && (
+                <div className="flex justify-between text-blue-300">
+                  <span>Adicionales (Estilo)</span>
+                  <span>+${pricing.surcharges.toLocaleString()}</span>
+                </div>
+              )}
+
+              {pricing.discount > 0 && (
+                <div className="flex justify-between text-green-400 font-bold bg-green-900/30 p-1 rounded px-2 -mx-2">
+                  <span className="flex items-center gap-1"><Tag size={12} /> Descuento</span>
+                  <span>-${pricing.discount.toLocaleString()}</span>
+                </div>
+              )}
+            </div>
+
+            {pricing.appliedPromotion && (
+              <div className="mt-3 text-xs text-center bg-green-600 text-white py-1 rounded">
+                ¡{pricing.appliedPromotion}!
+              </div>
+            )}
+          </div>
+        </div>
+
+        {/* --- NUEVA BARRA DE HERRAMIENTAS (TOOLBAR) --- */}
+        <div className="bg-white rounded-lg border border-gray-200 p-2 flex justify-between items-center shadow-sm">
+
+          {/* Alineación */}
+          <div className="flex bg-gray-100 rounded p-1 gap-1">
+            <button onClick={() => setOptions({ ...options, alignment: 'left' })}
+              className={clsx("p-1.5 rounded hover:bg-white transition", options.alignment === 'left' && "bg-white shadow text-blue-600")}>
+              <AlignLeft size={18} />
+            </button>
+            <button onClick={() => setOptions({ ...options, alignment: 'center' })}
+              className={clsx("p-1.5 rounded hover:bg-white transition", options.alignment === 'center' && "bg-white shadow text-blue-600")}>
+              <AlignCenter size={18} />
+            </button>
+            <button onClick={() => setOptions({ ...options, alignment: 'right' })}
+              className={clsx("p-1.5 rounded hover:bg-white transition", options.alignment === 'right' && "bg-white shadow text-blue-600")}>
+              <AlignRight size={18} />
+            </button>
+            <button onClick={() => setOptions({ ...options, alignment: 'justify' })}
+              className={clsx("p-1.5 rounded hover:bg-white transition", options.alignment === 'justify' && "bg-white shadow text-blue-600")}>
+              <AlignJustify size={18} />
+            </button>
+          </div>
+
+          <div className="w-px h-6 bg-gray-300 mx-1"></div>
+
+          {/* Tamaño de Fuente */}
+          <div className="flex bg-gray-100 rounded p-1 gap-1">
+            <button onClick={() => setOptions({ ...options, fontSize: 'small' })} title="Pequeño"
+              className={clsx("p-1.5 rounded hover:bg-white transition flex items-end", options.fontSize === 'small' && "bg-white shadow text-blue-600")}>
+              <Type size={14} />
+            </button>
+            <button onClick={() => setOptions({ ...options, fontSize: 'normal' })} title="Normal"
+              className={clsx("p-1.5 rounded hover:bg-white transition flex items-end", options.fontSize === 'normal' && "bg-white shadow text-blue-600")}>
+              <Type size={18} />
+            </button>
+            <button onClick={() => setOptions({ ...options, fontSize: 'large' })} title="Grande"
+              className={clsx("p-1.5 rounded hover:bg-white transition flex items-end", options.fontSize === 'large' && "bg-white shadow text-blue-600")}>
+              <Type size={22} />
+            </button>
+          </div>
+
+        </div>
+
+        {/* Vista Previa Papel */}
+        <div className="flex-1 bg-[#fffdf0] border border-yellow-200 rounded-lg p-4 shadow-sm overflow-y-auto flex flex-col min-h-[150px]">
+          <h3 className="text-[10px] font-bold text-yellow-800 uppercase mb-2 flex items-center gap-1 opacity-70">
+            <Printer size={12} /> Vista Previa Impresión (Papel)
+          </h3>
+          <div className={clsx(
+            "font-mono leading-tight whitespace-pre-wrap break-words p-2 border-2 transition-all",
+            // Aplicar Clases Dinámicas
+            options.isBold ? "font-bold" : "font-normal",
+            options.isFrame ? "border-slate-900" : "border-transparent",
+            getFontSizeClass(options.fontSize),
+            getAlignClass(options.alignment)
+          )}>
+            {formData.text || "(Texto vacío)"}
+          </div>
+        </div>
+
+        {/* Botones Estilo Rápido (Negrita/Recuadro) */}
+        <div className="grid grid-cols-2 gap-3">
+          <button
+            type="button"
+            onClick={() => setOptions({ ...options, isBold: !options.isBold })}
+            className={clsx(
+              "px-2 py-3 rounded-lg border flex items-center justify-center gap-2 transition-all text-sm",
+              options.isBold
+                ? "border-blue-600 bg-blue-50 text-blue-700 font-bold"
+                : "border-gray-200 bg-white text-gray-500 hover:border-gray-300"
+            )}
+          >
+            {options.isBold ? <CheckSquare size={18} /> : <Square size={18} />}
+            Negrita
+          </button>
+
+          <button
+            type="button"
+            onClick={() => setOptions({ ...options, isFrame: !options.isFrame })}
+            className={clsx(
+              "px-2 py-3 rounded-lg border flex items-center justify-center gap-2 transition-all text-sm",
+              options.isFrame
+                ? "border-slate-900 bg-slate-100 text-slate-900 font-bold"
+                : "border-gray-200 bg-white text-gray-500 hover:border-gray-300"
+            )}
+          >
+            {options.isFrame ? <CheckSquare size={18} /> : <Square size={18} />}
+            Recuadro
+          </button>
+        </div>
+
+        <button
+          onClick={handleSubmit}
+          className="bg-blue-600 hover:bg-blue-700 text-white py-4 rounded-lg font-bold shadow-lg shadow-blue-200 flex items-center justify-center gap-2 transition-transform active:scale-95 text-lg mt-2"
+        >
+          <Save size={24} />
+          COBRAR (F10)
+        </button>
+      </div>
+    </div>
+  );
+}

frontend/counter-panel/src/services/api.ts

@@ -0,0 +1,15 @@
+import axios from 'axios';
+
+const api = axios.create({
+  baseURL: import.meta.env.VITE_API_URL, // Usa la variable de entorno
+});
+
+api.interceptors.request.use((config) => {
+  const token = localStorage.getItem('token');
+  if (token) {
+    config.headers.Authorization = `Bearer ${token}`;
+  }
+  return config;
+});
+
+export default api;

frontend/counter-panel/tsconfig.app.json

@@ -0,0 +1,28 @@
+{
+  "compilerOptions": {
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
+    "target": "ES2022",
+    "useDefineForClassFields": true,
+    "lib": ["ES2022", "DOM", "DOM.Iterable"],
+    "module": "ESNext",
+    "types": ["vite/client"],
+    "skipLibCheck": true,
+
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "verbatimModuleSyntax": true,
+    "moduleDetection": "force",
+    "noEmit": true,
+    "jsx": "react-jsx",
+
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "erasableSyntaxOnly": true,
+    "noFallthroughCasesInSwitch": true,
+    "noUncheckedSideEffectImports": true
+  },
+  "include": ["src"]
+}

frontend/counter-panel/tsconfig.json

@@ -0,0 +1,7 @@
+{
+  "files": [],
+  "references": [
+    { "path": "./tsconfig.app.json" },
+    { "path": "./tsconfig.node.json" }
+  ]
+}

frontend/counter-panel/tsconfig.node.json

@@ -0,0 +1,26 @@
+{
+  "compilerOptions": {
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo",
+    "target": "ES2023",
+    "lib": ["ES2023"],
+    "module": "ESNext",
+    "types": ["node"],
+    "skipLibCheck": true,
+
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "verbatimModuleSyntax": true,
+    "moduleDetection": "force",
+    "noEmit": true,
+
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "erasableSyntaxOnly": true,
+    "noFallthroughCasesInSwitch": true,
+    "noUncheckedSideEffectImports": true
+  },
+  "include": ["vite.config.ts"]
+}

frontend/counter-panel/vite.config.ts

@@ -0,0 +1,7 @@
+import { defineConfig } from 'vite'
+import react from '@vitejs/plugin-react'
+
+// https://vite.dev/config/
+export default defineConfig({
+  plugins: [react()],
+})

frontend/public-web/.gitignore

@@ -0,0 +1,24 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?

frontend/public-web/README.md

@@ -0,0 +1,73 @@
+# React + TypeScript + Vite
+
+This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
+
+Currently, two official plugins are available:
+
+- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react) uses [Babel](https://babeljs.io/) (or [oxc](https://oxc.rs) when used in [rolldown-vite](https://vite.dev/guide/rolldown)) for Fast Refresh
+- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
+
+## React Compiler
+
+The React Compiler is not enabled on this template because of its impact on dev & build performances. To add it, see [this documentation](https://react.dev/learn/react-compiler/installation).
+
+## Expanding the ESLint configuration
+
+If you are developing a production application, we recommend updating the configuration to enable type-aware lint rules:
+
+```js
+export default defineConfig([
+  globalIgnores(['dist']),
+  {
+    files: ['**/*.{ts,tsx}'],
+    extends: [
+      // Other configs...
+
+      // Remove tseslint.configs.recommended and replace with this
+      tseslint.configs.recommendedTypeChecked,
+      // Alternatively, use this for stricter rules
+      tseslint.configs.strictTypeChecked,
+      // Optionally, add this for stylistic rules
+      tseslint.configs.stylisticTypeChecked,
+
+      // Other configs...
+    ],
+    languageOptions: {
+      parserOptions: {
+        project: ['./tsconfig.node.json', './tsconfig.app.json'],
+        tsconfigRootDir: import.meta.dirname,
+      },
+      // other options...
+    },
+  },
+])
+```
+
+You can also install [eslint-plugin-react-x](https://github.com/Rel1cx/eslint-react/tree/main/packages/plugins/eslint-plugin-react-x) and [eslint-plugin-react-dom](https://github.com/Rel1cx/eslint-react/tree/main/packages/plugins/eslint-plugin-react-dom) for React-specific lint rules:
+
+```js
+// eslint.config.js
+import reactX from 'eslint-plugin-react-x'
+import reactDom from 'eslint-plugin-react-dom'
+
+export default defineConfig([
+  globalIgnores(['dist']),
+  {
+    files: ['**/*.{ts,tsx}'],
+    extends: [
+      // Other configs...
+      // Enable lint rules for React
+      reactX.configs['recommended-typescript'],
+      // Enable lint rules for React DOM
+      reactDom.configs.recommended,
+    ],
+    languageOptions: {
+      parserOptions: {
+        project: ['./tsconfig.node.json', './tsconfig.app.json'],
+        tsconfigRootDir: import.meta.dirname,
+      },
+      // other options...
+    },
+  },
+])
+```

frontend/public-web/eslint.config.js

@@ -0,0 +1,23 @@
+import js from '@eslint/js'
+import globals from 'globals'
+import reactHooks from 'eslint-plugin-react-hooks'
+import reactRefresh from 'eslint-plugin-react-refresh'
+import tseslint from 'typescript-eslint'
+import { defineConfig, globalIgnores } from 'eslint/config'
+
+export default defineConfig([
+  globalIgnores(['dist']),
+  {
+    files: ['**/*.{ts,tsx}'],
+    extends: [
+      js.configs.recommended,
+      tseslint.configs.recommended,
+      reactHooks.configs.flat.recommended,
+      reactRefresh.configs.vite,
+    ],
+    languageOptions: {
+      ecmaVersion: 2020,
+      globals: globals.browser,
+    },
+  },
+])

frontend/public-web/index.html

@@ -0,0 +1,13 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>public-web</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>

frontend/public-web/package.json

@@ -0,0 +1,40 @@
+{
+  "name": "public-web",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc -b && vite build",
+    "lint": "eslint .",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "@tailwindcss/postcss": "^4.1.18",
+    "axios": "^1.13.2",
+    "clsx": "^2.1.1",
+    "lucide-react": "^0.561.0",
+    "react": "^19.2.0",
+    "react-dom": "^19.2.0",
+    "react-router-dom": "^7.11.0",
+    "tailwind-merge": "^3.4.0",
+    "zustand": "^5.0.9"
+  },
+  "devDependencies": {
+    "@eslint/js": "^9.39.1",
+    "@types/node": "^24.10.1",
+    "@types/react": "^19.2.5",
+    "@types/react-dom": "^19.2.3",
+    "@vitejs/plugin-react": "^5.1.1",
+    "autoprefixer": "^10.4.23",
+    "eslint": "^9.39.1",
+    "eslint-plugin-react-hooks": "^7.0.1",
+    "eslint-plugin-react-refresh": "^0.4.24",
+    "globals": "^16.5.0",
+    "postcss": "^8.5.6",
+    "tailwindcss": "^4.1.18",
+    "typescript": "~5.9.3",
+    "typescript-eslint": "^8.46.4",
+    "vite": "^7.2.4"
+  }
+}

frontend/public-web/postcss.config.js

@@ -0,0 +1,6 @@
+export default {
+  plugins: {
+    '@tailwindcss/postcss': {},
+    autoprefixer: {},
+  },
+}

frontend/public-web/src/App.css

@@ -0,0 +1,42 @@
+#root {
+  max-width: 1280px;
+  margin: 0 auto;
+  padding: 2rem;
+  text-align: center;
+}
+
+.logo {
+  height: 6em;
+  padding: 1.5em;
+  will-change: filter;
+  transition: filter 300ms;
+}
+.logo:hover {
+  filter: drop-shadow(0 0 2em #646cffaa);
+}
+.logo.react:hover {
+  filter: drop-shadow(0 0 2em #61dafbaa);
+}
+
+@keyframes logo-spin {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+@media (prefers-reduced-motion: no-preference) {
+  a:nth-of-type(2) .logo {
+    animation: logo-spin infinite 20s linear;
+  }
+}
+
+.card {
+  padding: 2em;
+}
+
+.read-the-docs {
+  color: #888;
+}

frontend/public-web/src/App.tsx

@@ -0,0 +1,42 @@
+import { BrowserRouter, Routes, Route } from 'react-router-dom';
+import HomePage from './pages/HomePage';
+import ListingDetailPage from './pages/ListingDetailPage';
+
+function App() {
+  return (
+    <BrowserRouter>
+      <div className="flex flex-col min-h-screen">
+        <header className="bg-white border-b border-gray-100 py-4 px-6 sticky top-0 z-50">
+          <div className="max-w-6xl mx-auto flex items-center justify-between">
+            <a href="/" className="font-bold text-2xl text-primary-600">SIG-CM</a>
+            <nav className="hidden md:flex gap-6 text-sm font-medium text-gray-600">
+              <a href="/" className="hover:text-primary-600">Inicio</a>
+              <a href="#" className="hover:text-primary-600">Categorías</a>
+            </nav>
+            <div>
+              <a
+                href="http://localhost:5174"
+                className="bg-primary-600 text-white px-5 py-2 rounded-full font-medium hover:bg-primary-700 transition"
+              >
+                Publicar Aviso
+              </a>
+            </div>
+          </div>
+        </header>
+
+        <Routes>
+          <Route path="/" element={<HomePage />} />
+          <Route path="/listing/:id" element={<ListingDetailPage />} />
+        </Routes>
+
+        <footer className="bg-gray-900 text-gray-400 py-12 mt-auto">
+          <div className="max-w-6xl mx-auto px-4 text-center">
+            <p>&copy; 2024 SIG-CM Clasificados Multicanal.</p>
+          </div>
+        </footer>
+      </div>
+    </BrowserRouter>
+  );
+}
+
+export default App;

frontend/public-web/src/components/ListingCard.tsx

@@ -0,0 +1,45 @@
+import type { Listing } from '../types';
+import { MapPin } from 'lucide-react';
+import { Link } from 'react-router-dom';
+
+export default function ListingCard({ listing }: { listing: Listing }) {
+  const baseUrl = import.meta.env.VITE_BASE_URL;
+
+  // Lógica de imagen: Si viene del backend, la usamos. Si no, placeholder local o remoto.
+  const imageUrl = listing.mainImageUrl
+    ? `${baseUrl}${listing.mainImageUrl}`
+    : 'https://placehold.co/400x300?text=Sin+Foto'; // placehold.co es más rápido y fiable que via.placeholder
+
+  return (
+    <Link to={`/listing/${listing.id}`} className="block h-full">
+      <div className="bg-white rounded-xl shadow-sm border border-gray-100 overflow-hidden hover:shadow-md transition group h-full flex flex-col">
+        <div className="aspect-[4/3] bg-gray-100 relative overflow-hidden">
+          <img
+            src={imageUrl}
+            alt={listing.title}
+            className="w-full h-full object-cover group-hover:scale-105 transition duration-500"
+            onError={(e) => {
+              // Fallback si la imagen falla al cargar
+              e.currentTarget.src = 'https://placehold.co/400x300?text=Error+Carga';
+            }}
+          />
+          <div className="absolute top-3 right-3 bg-white/90 backdrop-blur px-2 py-1 rounded text-xs font-bold uppercase tracking-wide">
+            Ver
+          </div>
+        </div>
+        <div className="p-4 flex flex-col flex-grow">
+          <div className="text-2xl font-bold text-gray-900 mb-1">
+            {listing.currency} {listing.price.toLocaleString()}
+          </div>
+          <h3 className="font-medium text-gray-800 mb-2 line-clamp-2 group-hover:text-primary-600 transition">
+            {listing.title}
+          </h3>
+          <div className="mt-auto pt-4 border-t border-gray-100 flex items-center text-sm text-gray-500">
+            <MapPin size={16} className="mr-1" />
+            <span>Ver detalles</span>
+          </div>
+        </div>
+      </div>
+    </Link>
+  );
+}

frontend/public-web/src/components/SearchBar.tsx

@@ -0,0 +1,35 @@
+import { Search } from 'lucide-react';
+import { useState } from 'react';
+
+interface SearchBarProps {
+  onSearch?: (query: string) => void;
+}
+
+export default function SearchBar({ onSearch }: SearchBarProps) {
+  const [query, setQuery] = useState('');
+
+  const handleSearch = (e: React.FormEvent) => {
+    e.preventDefault();
+    if (onSearch) {
+      onSearch(query);
+    }
+  };
+
+  return (
+    <form onSubmit={handleSearch} className="w-full max-w-2xl relative">
+      <input
+        type="text"
+        placeholder="¿Qué estás buscando? (Ej: Departamento, Fiat 600...)"
+        className="w-full py-4 pl-6 pr-14 rounded-full border border-gray-200 shadow-lg text-gray-800 text-lg focus:outline-none focus:ring-2 focus:ring-primary-500 transition-all placeholder:text-gray-400"
+        value={query}
+        onChange={(e) => setQuery(e.target.value)}
+      />
+      <button
+        type="submit"
+        className="absolute right-2 top-2 p-2 bg-primary-600 text-white rounded-full hover:bg-primary-700 transition flex items-center justify-center w-10 h-10"
+      >
+        <Search size={20} />
+      </button>
+    </form>
+  );
+}

frontend/public-web/src/index.css

@@ -0,0 +1,17 @@
+@import "tailwindcss";
+
+@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
+
+@theme {
+  --font-sans: 'Inter', sans-serif;
+  --color-primary-50: #f0f9ff;
+  --color-primary-100: #e0f2fe;
+  --color-primary-500: #0ea5e9;
+  --color-primary-600: #0284c7;
+  --color-primary-900: #0c4a6e;
+}
+
+body {
+  /* En v4 @apply funciona, pero requiere que el import esté arriba */
+  @apply bg-gray-50 text-gray-900 font-sans;
+}

frontend/public-web/src/main.tsx

@@ -0,0 +1,10 @@
+import { StrictMode } from 'react'
+import { createRoot } from 'react-dom/client'
+import './index.css'
+import App from './App.tsx'
+
+createRoot(document.getElementById('root')!).render(
+  <StrictMode>
+    <App />
+  </StrictMode>,
+)

frontend/public-web/src/pages/HomePage.tsx

@@ -0,0 +1,94 @@
+import { useEffect, useState } from 'react';
+import SearchBar from '../components/SearchBar';
+import ListingCard from '../components/ListingCard';
+import { publicService } from '../services/publicService';
+import type { Listing, Category } from '../types';
+
+export default function HomePage() {
+  const [listings, setListings] = useState<Listing[]>([]);
+  const [categories, setCategories] = useState<Category[]>([]);
+  const [loading, setLoading] = useState(true);
+
+  useEffect(() => {
+    loadInitialData();
+  }, []);
+
+  const loadInitialData = async () => {
+    setLoading(true);
+    try {
+      const [latestListings, cats] = await Promise.all([
+        publicService.getLatestListings(),
+        publicService.getCategories()
+      ]);
+      setListings(latestListings);
+      setCategories(cats);
+    } catch (e) {
+      console.error(e);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const handleSearch = async (query: string) => {
+    setLoading(true);
+    try {
+      const results = await publicService.searchListings(query);
+      setListings(results);
+    } catch (e) {
+      console.error(e);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const mainCategories = categories.filter(c => !c.parentId);
+
+  return (
+    <div className="min-h-screen bg-gray-50 pb-20">
+      {/* Hero Section */}
+      <div className="bg-primary-900 text-white py-20 px-4 relative overflow-hidden">
+        <div className="absolute inset-0 bg-gradient-to-br from-primary-900 to-gray-900 opacity-90"></div>
+        <div className="max-w-4xl mx-auto text-center relative z-10">
+          <h1 className="text-4xl md:text-5xl font-bold mb-6">Encuentra tu próximo objetivo</h1>
+          <p className="text-xl text-primary-100 mb-10">Clasificados verificados de Autos, Propiedades y más.</p>
+          <div className="flex justify-center">
+            <SearchBar onSearch={handleSearch} />
+          </div>
+        </div>
+      </div>
+
+      {/* Categories Quick Links */}
+      <div className="max-w-6xl mx-auto px-4 -mt-8 relative z-20">
+        <div className="bg-white rounded-xl shadow-lg p-6 flex flex-wrap justify-center gap-4 md:gap-8 border border-gray-100">
+          {mainCategories.map(cat => (
+            <button key={cat.id} className="flex flex-col items-center gap-2 group">
+              <div className="w-12 h-12 rounded-full bg-primary-50 flex items-center justify-center text-primary-600 group-hover:bg-primary-600 group-hover:text-white transition">
+                <div className="font-bold text-lg">{cat.name.charAt(0)}</div>
+              </div>
+              <span className="text-sm font-medium text-gray-600 group-hover:text-primary-700">{cat.name}</span>
+            </button>
+          ))}
+        </div>
+      </div>
+
+      {/* Latest Listings */}
+      <div className="max-w-6xl mx-auto px-4 mt-16">
+        <h2 className="text-2xl font-bold text-gray-900 mb-8">
+          {loading ? 'Cargando...' : 'Resultados Recientes'}
+        </h2>
+
+        {!loading && listings.length === 0 && (
+          <div className="text-center text-gray-500 py-10">
+            No se encontraron avisos con esos criterios.
+          </div>
+        )}
+
+        <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6">
+          {listings.map(listing => (
+            <ListingCard key={listing.id} listing={listing} />
+          ))}
+        </div>
+      </div>
+    </div>
+  );
+}

frontend/public-web/src/pages/ListingDetailPage.tsx

@@ -0,0 +1,118 @@
+import { useEffect, useState } from 'react';
+import { useParams } from 'react-router-dom';
+import { publicService } from '../services/publicService';
+import type { ListingDetail } from '../types';
+import { Calendar, Tag, ChevronLeft } from 'lucide-react';
+
+export default function ListingDetailPage() {
+  const { id } = useParams();
+  const [detail, setDetail] = useState<ListingDetail | null>(null);
+  const [loading, setLoading] = useState(true);
+  const [activeImage, setActiveImage] = useState<string>('');
+
+  useEffect(() => {
+    if (id) {
+      publicService.getListingDetail(parseInt(id))
+        .then(data => {
+          setDetail(data);
+          if (data.images.length > 0) {
+            setActiveImage(data.images[0].url);
+          }
+        })
+        .catch(err => console.error(err))
+        .finally(() => setLoading(false));
+    }
+  }, [id]);
+
+  if (loading) return <div className="min-h-screen flex items-center justify-center">Cargando...</div>;
+  if (!detail) return <div className="min-h-screen flex items-center justify-center">Aviso no encontrado.</div>;
+
+  const { listing, attributes, images } = detail;
+  const baseUrl = import.meta.env.VITE_BASE_URL; // Ajustar puerto según backend launchSettings
+
+  return (
+    <div className="max-w-6xl mx-auto px-4 py-8">
+      <a href="/" className="inline-flex items-center text-gray-500 hover:text-primary-600 mb-6">
+        <ChevronLeft size={20} /> Volver al listado
+      </a>
+
+      <div className="grid grid-cols-1 lg:grid-cols-3 gap-8">
+        {/* Galería de Fotos */}
+        <div className="lg:col-span-2 space-y-4">
+          <div className="aspect-video bg-gray-100 rounded-xl overflow-hidden border border-gray-200">
+            {activeImage ? (
+              <img src={`${baseUrl}${activeImage}`} alt={listing.title} className="w-full h-full object-contain" />
+            ) : (
+              <div className="w-full h-full flex items-center justify-center text-gray-400">Sin imágenes</div>
+            )}
+          </div>
+          {images.length > 1 && (
+            <div className="flex gap-2 overflow-x-auto pb-2">
+              {images.map(img => (
+                <button
+                  key={img.id}
+                  onClick={() => setActiveImage(img.url)}
+                  className={`w-24 h-24 flex-shrink-0 rounded-lg overflow-hidden border-2 transition ${activeImage === img.url ? 'border-primary-600' : 'border-transparent'
+                    }`}
+                >
+                  <img src={`${baseUrl}${img.url}`} alt="" className="w-full h-full object-cover" />
+                </button>
+              ))}
+            </div>
+          )}
+        </div>
+
+        {/* Información Principal */}
+        <div className="space-y-6">
+          <div className="bg-white p-6 rounded-xl shadow-sm border border-gray-100">
+            <div className="flex justify-between items-start mb-4">
+              <span className="bg-primary-50 text-primary-700 px-3 py-1 rounded-full text-sm font-medium">
+                Clasificado #{listing.id}
+              </span>
+              <span className="text-gray-400 text-sm flex items-center gap-1">
+                <Calendar size={14} />
+                {new Date(listing.createdAt).toLocaleDateString()}
+              </span>
+            </div>
+
+            <h1 className="text-3xl font-bold text-gray-900 mb-2">{listing.title}</h1>
+            <div className="text-4xl font-bold text-primary-600 mb-6">
+              {listing.currency} {listing.price.toLocaleString()}
+            </div>
+
+            <button className="w-full bg-green-600 hover:bg-green-700 text-white font-bold py-3 rounded-lg transition mb-4">
+              Contactar Anunciante
+            </button>
+            <button className="w-full bg-white border border-gray-300 text-gray-700 font-bold py-3 rounded-lg hover:bg-gray-50 transition">
+              Compartir
+            </button>
+          </div>
+
+          {/* Atributos Dinámicos */}
+          <div className="bg-white p-6 rounded-xl shadow-sm border border-gray-100">
+            <h3 className="text-lg font-semibold mb-4 flex items-center gap-2">
+              <Tag size={20} className="text-primary-600" />
+              Características
+            </h3>
+            <div className="grid grid-cols-2 gap-y-4 gap-x-2">
+              {attributes.map(attr => (
+                <div key={attr.id} className="border-b border-gray-50 pb-2">
+                  <span className="block text-xs text-gray-500 uppercase tracking-wide">{attr.attributeName}</span>
+                  <span className="font-medium text-gray-800">{attr.value}</span>
+                </div>
+              ))}
+              {attributes.length === 0 && <p className="text-gray-400 text-sm">Sin características adicionales.</p>}
+            </div>
+          </div>
+
+          <div className="bg-white p-6 rounded-xl shadow-sm border border-gray-100">
+            <h3 className="text-lg font-semibold mb-2">Descripción</h3>
+            <p className="text-gray-600 leading-relaxed whitespace-pre-line">
+              {listing.description || "Sin descripción proporcionada."}
+            </p>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}

frontend/public-web/src/services/api.ts

@@ -0,0 +1,7 @@
+import axios from 'axios';
+
+const api = axios.create({
+  baseURL: import.meta.env.VITE_API_URL, // Usa la variable de entorno
+});
+
+export default api;

frontend/public-web/src/services/publicService.ts

@@ -0,0 +1,26 @@
+import api from './api';
+import type { Listing, Category, ListingDetail } from '../types';
+
+export const publicService = {
+  getLatestListings: async (): Promise<Listing[]> => {
+    const response = await api.get<Listing[]>('/listings');
+    return response.data;
+  },
+
+  searchListings: async (query: string): Promise<Listing[]> => {
+    const response = await api.get<Listing[]>('/listings', {
+      params: { q: query }
+    });
+    return response.data;
+  },
+
+  getListingDetail: async (id: number): Promise<ListingDetail> => {
+    const response = await api.get<ListingDetail>(`/listings/${id}`);
+    return response.data;
+  },
+
+  getCategories: async (): Promise<Category[]> => {
+    const response = await api.get<Category[]>('/categories');
+    return response.data;
+  }
+};

frontend/public-web/src/types/index.ts

@@ -0,0 +1,41 @@
+export interface Listing {
+  id: number;
+  title: string;
+  description: string;
+  price: number;
+  currency: string;
+  categoryId: number;
+  operationId: number;
+  createdAt: string;
+  mainImageUrl?: string;
+  images?: ListingImage[];
+}
+
+export interface ListingAttribute {
+  id: number;
+  listingId: number;
+  attributeDefinitionId: number;
+  value: string;
+  attributeName: string;
+}
+
+export interface ListingImage {
+  id: number;
+  listingId: number;
+  url: string;
+  isMainInfo: boolean;
+  displayOrder: number;
+}
+
+export interface ListingDetail {
+  listing: Listing;
+  attributes: ListingAttribute[];
+  images: ListingImage[];
+}
+
+export interface Category {
+  id: number;
+  name: string;
+  parentId?: number;
+  subcategories?: Category[];
+}

frontend/public-web/tailwind.config.js

@@ -0,0 +1,24 @@
+/** @type {import('tailwindcss').Config} */
+export default {
+  content: [
+    "./index.html",
+    "./src/**/*.{js,ts,jsx,tsx}",
+  ],
+  theme: {
+    extend: {
+      colors: {
+        primary: {
+          50: '#f0f9ff',
+          100: '#e0f2fe',
+          500: '#0ea5e9',
+          600: '#0284c7',
+          900: '#0c4a6e',
+        }
+      },
+      fontFamily: {
+        sans: ['Inter', 'sans-serif'],
+      }
+    },
+  },
+  plugins: [],
+}

frontend/public-web/tsconfig.app.json

@@ -0,0 +1,28 @@
+{
+  "compilerOptions": {
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
+    "target": "ES2022",
+    "useDefineForClassFields": true,
+    "lib": ["ES2022", "DOM", "DOM.Iterable"],
+    "module": "ESNext",
+    "types": ["vite/client"],
+    "skipLibCheck": true,
+
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "verbatimModuleSyntax": true,
+    "moduleDetection": "force",
+    "noEmit": true,
+    "jsx": "react-jsx",
+
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "erasableSyntaxOnly": true,
+    "noFallthroughCasesInSwitch": true,
+    "noUncheckedSideEffectImports": true
+  },
+  "include": ["src"]
+}

frontend/public-web/tsconfig.json

@@ -0,0 +1,7 @@
+{
+  "files": [],
+  "references": [
+    { "path": "./tsconfig.app.json" },
+    { "path": "./tsconfig.node.json" }
+  ]
+}

frontend/public-web/tsconfig.node.json

@@ -0,0 +1,26 @@
+{
+  "compilerOptions": {
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo",
+    "target": "ES2023",
+    "lib": ["ES2023"],
+    "module": "ESNext",
+    "types": ["node"],
+    "skipLibCheck": true,
+
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "verbatimModuleSyntax": true,
+    "moduleDetection": "force",
+    "noEmit": true,
+
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "erasableSyntaxOnly": true,
+    "noFallthroughCasesInSwitch": true,
+    "noUncheckedSideEffectImports": true
+  },
+  "include": ["vite.config.ts"]
+}

frontend/public-web/vite.config.ts

@@ -0,0 +1,7 @@
+import { defineConfig } from 'vite'
+import react from '@vitejs/plugin-react'
+
+// https://vite.dev/config/
+export default defineConfig({
+  plugins: [react()],
+})

frontend/publish-wizard/package-lock.json

@@ -8,6 +8,7 @@
       "name": "publish-wizard",
       "version": "0.0.0",
       "dependencies": {
+        "@tailwindcss/postcss": "^4.1.18",
         "axios": "^1.13.2",
         "clsx": "^2.1.1",
         "framer-motion": "^12.23.26",
@@ -36,6 +37,18 @@
         "vite": "^7.2.4"
       }
     },
+    "node_modules/@alloc/quick-lru": {
+      "version": "5.2.0",
+      "resolved": "https://registry.npmjs.org/@alloc/quick-lru/-/quick-lru-5.2.0.tgz",
+      "integrity": "sha512-UrcABB+4bUrFABwbluTIBErXwvbsU/V7TZWfmbgJfbkwiBuziS9gxdODUyuiecfdGQ85jglMW6juS3+z5TsKLw==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
     "node_modules/@babel/code-frame": {
       "version": "7.27.1",
       "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.27.1.tgz",
@@ -973,7 +986,6 @@
       "version": "0.3.13",
       "resolved": "https://registry.npmjs.org/@jridgewell/gen-mapping/-/gen-mapping-0.3.13.tgz",
       "integrity": "sha512-2kkt/7niJ6MgEPxF0bYdQ6etZaA+fQvDcLKckhy1yIQOzaoKjBBjSj63/aLVjYE3qhRt5dvM+uUyfCg6UKCBbA==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "@jridgewell/sourcemap-codec": "^1.5.0",
@@ -984,7 +996,6 @@
       "version": "2.3.5",
       "resolved": "https://registry.npmjs.org/@jridgewell/remapping/-/remapping-2.3.5.tgz",
       "integrity": "sha512-LI9u/+laYG4Ds1TDKSJW2YPrIlcVYOwi2fUC6xB43lueCjgxV4lffOCZCtYFiH6TNOX+tQKXx97T4IKHbhyHEQ==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "@jridgewell/gen-mapping": "^0.3.5",
@@ -995,7 +1006,6 @@
       "version": "3.1.2",
       "resolved": "https://registry.npmjs.org/@jridgewell/resolve-uri/-/resolve-uri-3.1.2.tgz",
       "integrity": "sha512-bRISgCIjP20/tbWSPWMEi54QVPRZExkuD9lJL+UIxUKtwVJA8wW1Trb1jMs1RFXo1CBTNZ/5hpC9QvmKWdopKw==",
-      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">=6.0.0"
@@ -1005,14 +1015,12 @@
       "version": "1.5.5",
       "resolved": "https://registry.npmjs.org/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.5.5.tgz",
       "integrity": "sha512-cYQ9310grqxueWbl+WuIUIaiUaDcj7WOq5fVhEljNVgRfOUhY9fy2zTvfoqWsnebh8Sl70VScFbICvJnLKB0Og==",
-      "dev": true,
       "license": "MIT"
     },
     "node_modules/@jridgewell/trace-mapping": {
       "version": "0.3.31",
       "resolved": "https://registry.npmjs.org/@jridgewell/trace-mapping/-/trace-mapping-0.3.31.tgz",
       "integrity": "sha512-zzNR+SdQSDJzc8joaeP8QQoCQr8NuYx2dIIytl1QeBEZHJ9uW6hebsrYgbz8hJwUQao3TWCMtmfV8Nu1twOLAw==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "@jridgewell/resolve-uri": "^3.1.0",
@@ -1334,6 +1342,262 @@
         "win32"
       ]
     },
+    "node_modules/@tailwindcss/node": {
+      "version": "4.1.18",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/node/-/node-4.1.18.tgz",
+      "integrity": "sha512-DoR7U1P7iYhw16qJ49fgXUlry1t4CpXeErJHnQ44JgTSKMaZUdf17cfn5mHchfJ4KRBZRFA/Coo+MUF5+gOaCQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@jridgewell/remapping": "^2.3.4",
+        "enhanced-resolve": "^5.18.3",
+        "jiti": "^2.6.1",
+        "lightningcss": "1.30.2",
+        "magic-string": "^0.30.21",
+        "source-map-js": "^1.2.1",
+        "tailwindcss": "4.1.18"
+      }
+    },
+    "node_modules/@tailwindcss/oxide": {
+      "version": "4.1.18",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide/-/oxide-4.1.18.tgz",
+      "integrity": "sha512-EgCR5tTS5bUSKQgzeMClT6iCY3ToqE1y+ZB0AKldj809QXk1Y+3jB0upOYZrn9aGIzPtUsP7sX4QQ4XtjBB95A==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 10"
+      },
+      "optionalDependencies": {
+        "@tailwindcss/oxide-android-arm64": "4.1.18",
+        "@tailwindcss/oxide-darwin-arm64": "4.1.18",
+        "@tailwindcss/oxide-darwin-x64": "4.1.18",
+        "@tailwindcss/oxide-freebsd-x64": "4.1.18",
+        "@tailwindcss/oxide-linux-arm-gnueabihf": "4.1.18",
+        "@tailwindcss/oxide-linux-arm64-gnu": "4.1.18",
+        "@tailwindcss/oxide-linux-arm64-musl": "4.1.18",
+        "@tailwindcss/oxide-linux-x64-gnu": "4.1.18",
+        "@tailwindcss/oxide-linux-x64-musl": "4.1.18",
+        "@tailwindcss/oxide-wasm32-wasi": "4.1.18",
+        "@tailwindcss/oxide-win32-arm64-msvc": "4.1.18",
+        "@tailwindcss/oxide-win32-x64-msvc": "4.1.18"
+      }
+    },
+    "node_modules/@tailwindcss/oxide-android-arm64": {
+      "version": "4.1.18",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-android-arm64/-/oxide-android-arm64-4.1.18.tgz",
+      "integrity": "sha512-dJHz7+Ugr9U/diKJA0W6N/6/cjI+ZTAoxPf9Iz9BFRF2GzEX8IvXxFIi/dZBloVJX/MZGvRuFA9rqwdiIEZQ0Q==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "android"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@tailwindcss/oxide-darwin-arm64": {
+      "version": "4.1.18",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-darwin-arm64/-/oxide-darwin-arm64-4.1.18.tgz",
+      "integrity": "sha512-Gc2q4Qhs660bhjyBSKgq6BYvwDz4G+BuyJ5H1xfhmDR3D8HnHCmT/BSkvSL0vQLy/nkMLY20PQ2OoYMO15Jd0A==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@tailwindcss/oxide-darwin-x64": {
+      "version": "4.1.18",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-darwin-x64/-/oxide-darwin-x64-4.1.18.tgz",
+      "integrity": "sha512-FL5oxr2xQsFrc3X9o1fjHKBYBMD1QZNyc1Xzw/h5Qu4XnEBi3dZn96HcHm41c/euGV+GRiXFfh2hUCyKi/e+yw==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@tailwindcss/oxide-freebsd-x64": {
+      "version": "4.1.18",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-freebsd-x64/-/oxide-freebsd-x64-4.1.18.tgz",
+      "integrity": "sha512-Fj+RHgu5bDodmV1dM9yAxlfJwkkWvLiRjbhuO2LEtwtlYlBgiAT4x/j5wQr1tC3SANAgD+0YcmWVrj8R9trVMA==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "freebsd"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@tailwindcss/oxide-linux-arm-gnueabihf": {
+      "version": "4.1.18",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-linux-arm-gnueabihf/-/oxide-linux-arm-gnueabihf-4.1.18.tgz",
+      "integrity": "sha512-Fp+Wzk/Ws4dZn+LV2Nqx3IilnhH51YZoRaYHQsVq3RQvEl+71VGKFpkfHrLM/Li+kt5c0DJe/bHXK1eHgDmdiA==",
+      "cpu": [
+        "arm"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@tailwindcss/oxide-linux-arm64-gnu": {
+      "version": "4.1.18",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-linux-arm64-gnu/-/oxide-linux-arm64-gnu-4.1.18.tgz",
+      "integrity": "sha512-S0n3jboLysNbh55Vrt7pk9wgpyTTPD0fdQeh7wQfMqLPM/Hrxi+dVsLsPrycQjGKEQk85Kgbx+6+QnYNiHalnw==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@tailwindcss/oxide-linux-arm64-musl": {
+      "version": "4.1.18",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-linux-arm64-musl/-/oxide-linux-arm64-musl-4.1.18.tgz",
+      "integrity": "sha512-1px92582HkPQlaaCkdRcio71p8bc8i/ap5807tPRDK/uw953cauQBT8c5tVGkOwrHMfc2Yh6UuxaH4vtTjGvHg==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@tailwindcss/oxide-linux-x64-gnu": {
+      "version": "4.1.18",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-linux-x64-gnu/-/oxide-linux-x64-gnu-4.1.18.tgz",
+      "integrity": "sha512-v3gyT0ivkfBLoZGF9LyHmts0Isc8jHZyVcbzio6Wpzifg/+5ZJpDiRiUhDLkcr7f/r38SWNe7ucxmGW3j3Kb/g==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@tailwindcss/oxide-linux-x64-musl": {
+      "version": "4.1.18",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-linux-x64-musl/-/oxide-linux-x64-musl-4.1.18.tgz",
+      "integrity": "sha512-bhJ2y2OQNlcRwwgOAGMY0xTFStt4/wyU6pvI6LSuZpRgKQwxTec0/3Scu91O8ir7qCR3AuepQKLU/kX99FouqQ==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@tailwindcss/oxide-wasm32-wasi": {
+      "version": "4.1.18",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-wasm32-wasi/-/oxide-wasm32-wasi-4.1.18.tgz",
+      "integrity": "sha512-LffYTvPjODiP6PT16oNeUQJzNVyJl1cjIebq/rWWBF+3eDst5JGEFSc5cWxyRCJ0Mxl+KyIkqRxk1XPEs9x8TA==",
+      "bundleDependencies": [
+        "@napi-rs/wasm-runtime",
+        "@emnapi/core",
+        "@emnapi/runtime",
+        "@tybys/wasm-util",
+        "@emnapi/wasi-threads",
+        "tslib"
+      ],
+      "cpu": [
+        "wasm32"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "@emnapi/core": "^1.7.1",
+        "@emnapi/runtime": "^1.7.1",
+        "@emnapi/wasi-threads": "^1.1.0",
+        "@napi-rs/wasm-runtime": "^1.1.0",
+        "@tybys/wasm-util": "^0.10.1",
+        "tslib": "^2.4.0"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      }
+    },
+    "node_modules/@tailwindcss/oxide-win32-arm64-msvc": {
+      "version": "4.1.18",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-win32-arm64-msvc/-/oxide-win32-arm64-msvc-4.1.18.tgz",
+      "integrity": "sha512-HjSA7mr9HmC8fu6bdsZvZ+dhjyGCLdotjVOgLA2vEqxEBZaQo9YTX4kwgEvPCpRh8o4uWc4J/wEoFzhEmjvPbA==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@tailwindcss/oxide-win32-x64-msvc": {
+      "version": "4.1.18",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-win32-x64-msvc/-/oxide-win32-x64-msvc-4.1.18.tgz",
+      "integrity": "sha512-bJWbyYpUlqamC8dpR7pfjA0I7vdF6t5VpUGMWRkXVE3AXgIZjYUYAK7II1GNaxR8J1SSrSrppRar8G++JekE3Q==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@tailwindcss/postcss": {
+      "version": "4.1.18",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/postcss/-/postcss-4.1.18.tgz",
+      "integrity": "sha512-Ce0GFnzAOuPyfV5SxjXGn0CubwGcuDB0zcdaPuCSzAa/2vII24JTkH+I6jcbXLb1ctjZMZZI6OjDaLPJQL1S0g==",
+      "license": "MIT",
+      "dependencies": {
+        "@alloc/quick-lru": "^5.2.0",
+        "@tailwindcss/node": "4.1.18",
+        "@tailwindcss/oxide": "4.1.18",
+        "postcss": "^8.4.41",
+        "tailwindcss": "4.1.18"
+      }
+    },
     "node_modules/@types/babel__core": {
       "version": "7.20.5",
       "resolved": "https://registry.npmjs.org/@types/babel__core/-/babel__core-7.20.5.tgz",
@@ -2073,6 +2337,15 @@
         "node": ">=0.4.0"
       }
     },
+    "node_modules/detect-libc": {
+      "version": "2.1.2",
+      "resolved": "https://registry.npmjs.org/detect-libc/-/detect-libc-2.1.2.tgz",
+      "integrity": "sha512-Btj2BOOO83o3WyH59e8MgXsxEQVcarkUOpEYrubB0urwnN10yQ364rsiByU11nZlqWYZm05i/of7io4mzihBtQ==",
+      "license": "Apache-2.0",
+      "engines": {
+        "node": ">=8"
+      }
+    },
     "node_modules/dunder-proto": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/dunder-proto/-/dunder-proto-1.0.1.tgz",
@@ -2094,6 +2367,19 @@
       "dev": true,
       "license": "ISC"
     },
+    "node_modules/enhanced-resolve": {
+      "version": "5.18.4",
+      "resolved": "https://registry.npmjs.org/enhanced-resolve/-/enhanced-resolve-5.18.4.tgz",
+      "integrity": "sha512-LgQMM4WXU3QI+SYgEc2liRgznaD5ojbmY3sb8LxyguVkIg5FxdpTkvk72te2R38/TGKxH634oLxXRGY6d7AP+Q==",
+      "license": "MIT",
+      "dependencies": {
+        "graceful-fs": "^4.2.4",
+        "tapable": "^2.2.0"
+      },
+      "engines": {
+        "node": ">=10.13.0"
+      }
+    },
     "node_modules/es-define-property": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/es-define-property/-/es-define-property-1.0.1.tgz",
@@ -2676,6 +2962,12 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/graceful-fs": {
+      "version": "4.2.11",
+      "resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.2.11.tgz",
+      "integrity": "sha512-RbJ5/jmFcNNCcDV5o9eTnBLJ/HszWV0P73bc+Ff4nS/rJj+YaS6IGyiOL0VoBYX+l1Wrl3k63h/KrH+nhJ0XvQ==",
+      "license": "ISC"
+    },
     "node_modules/has-flag": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
@@ -2809,6 +3101,15 @@
       "dev": true,
       "license": "ISC"
     },
+    "node_modules/jiti": {
+      "version": "2.6.1",
+      "resolved": "https://registry.npmjs.org/jiti/-/jiti-2.6.1.tgz",
+      "integrity": "sha512-ekilCSN1jwRvIbgeg/57YFh8qQDNbwDb9xT/qu2DAHbFFZUicIl4ygVaAvzveMhMVr3LnpSKTNnwt8PoOfmKhQ==",
+      "license": "MIT",
+      "bin": {
+        "jiti": "lib/jiti-cli.mjs"
+      }
+    },
     "node_modules/js-tokens": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz",
@@ -2899,6 +3200,255 @@
         "node": ">= 0.8.0"
       }
     },
+    "node_modules/lightningcss": {
+      "version": "1.30.2",
+      "resolved": "https://registry.npmjs.org/lightningcss/-/lightningcss-1.30.2.tgz",
+      "integrity": "sha512-utfs7Pr5uJyyvDETitgsaqSyjCb2qNRAtuqUeWIAKztsOYdcACf2KtARYXg2pSvhkt+9NfoaNY7fxjl6nuMjIQ==",
+      "license": "MPL-2.0",
+      "dependencies": {
+        "detect-libc": "^2.0.3"
+      },
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      },
+      "optionalDependencies": {
+        "lightningcss-android-arm64": "1.30.2",
+        "lightningcss-darwin-arm64": "1.30.2",
+        "lightningcss-darwin-x64": "1.30.2",
+        "lightningcss-freebsd-x64": "1.30.2",
+        "lightningcss-linux-arm-gnueabihf": "1.30.2",
+        "lightningcss-linux-arm64-gnu": "1.30.2",
+        "lightningcss-linux-arm64-musl": "1.30.2",
+        "lightningcss-linux-x64-gnu": "1.30.2",
+        "lightningcss-linux-x64-musl": "1.30.2",
+        "lightningcss-win32-arm64-msvc": "1.30.2",
+        "lightningcss-win32-x64-msvc": "1.30.2"
+      }
+    },
+    "node_modules/lightningcss-android-arm64": {
+      "version": "1.30.2",
+      "resolved": "https://registry.npmjs.org/lightningcss-android-arm64/-/lightningcss-android-arm64-1.30.2.tgz",
+      "integrity": "sha512-BH9sEdOCahSgmkVhBLeU7Hc9DWeZ1Eb6wNS6Da8igvUwAe0sqROHddIlvU06q3WyXVEOYDZ6ykBZQnjTbmo4+A==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "android"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/lightningcss-darwin-arm64": {
+      "version": "1.30.2",
+      "resolved": "https://registry.npmjs.org/lightningcss-darwin-arm64/-/lightningcss-darwin-arm64-1.30.2.tgz",
+      "integrity": "sha512-ylTcDJBN3Hp21TdhRT5zBOIi73P6/W0qwvlFEk22fkdXchtNTOU4Qc37SkzV+EKYxLouZ6M4LG9NfZ1qkhhBWA==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/lightningcss-darwin-x64": {
+      "version": "1.30.2",
+      "resolved": "https://registry.npmjs.org/lightningcss-darwin-x64/-/lightningcss-darwin-x64-1.30.2.tgz",
+      "integrity": "sha512-oBZgKchomuDYxr7ilwLcyms6BCyLn0z8J0+ZZmfpjwg9fRVZIR5/GMXd7r9RH94iDhld3UmSjBM6nXWM2TfZTQ==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/lightningcss-freebsd-x64": {
+      "version": "1.30.2",
+      "resolved": "https://registry.npmjs.org/lightningcss-freebsd-x64/-/lightningcss-freebsd-x64-1.30.2.tgz",
+      "integrity": "sha512-c2bH6xTrf4BDpK8MoGG4Bd6zAMZDAXS569UxCAGcA7IKbHNMlhGQ89eRmvpIUGfKWNVdbhSbkQaWhEoMGmGslA==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "freebsd"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/lightningcss-linux-arm-gnueabihf": {
+      "version": "1.30.2",
+      "resolved": "https://registry.npmjs.org/lightningcss-linux-arm-gnueabihf/-/lightningcss-linux-arm-gnueabihf-1.30.2.tgz",
+      "integrity": "sha512-eVdpxh4wYcm0PofJIZVuYuLiqBIakQ9uFZmipf6LF/HRj5Bgm0eb3qL/mr1smyXIS1twwOxNWndd8z0E374hiA==",
+      "cpu": [
+        "arm"
+      ],
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/lightningcss-linux-arm64-gnu": {
+      "version": "1.30.2",
+      "resolved": "https://registry.npmjs.org/lightningcss-linux-arm64-gnu/-/lightningcss-linux-arm64-gnu-1.30.2.tgz",
+      "integrity": "sha512-UK65WJAbwIJbiBFXpxrbTNArtfuznvxAJw4Q2ZGlU8kPeDIWEX1dg3rn2veBVUylA2Ezg89ktszWbaQnxD/e3A==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/lightningcss-linux-arm64-musl": {
+      "version": "1.30.2",
+      "resolved": "https://registry.npmjs.org/lightningcss-linux-arm64-musl/-/lightningcss-linux-arm64-musl-1.30.2.tgz",
+      "integrity": "sha512-5Vh9dGeblpTxWHpOx8iauV02popZDsCYMPIgiuw97OJ5uaDsL86cnqSFs5LZkG3ghHoX5isLgWzMs+eD1YzrnA==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/lightningcss-linux-x64-gnu": {
+      "version": "1.30.2",
+      "resolved": "https://registry.npmjs.org/lightningcss-linux-x64-gnu/-/lightningcss-linux-x64-gnu-1.30.2.tgz",
+      "integrity": "sha512-Cfd46gdmj1vQ+lR6VRTTadNHu6ALuw2pKR9lYq4FnhvgBc4zWY1EtZcAc6EffShbb1MFrIPfLDXD6Xprbnni4w==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/lightningcss-linux-x64-musl": {
+      "version": "1.30.2",
+      "resolved": "https://registry.npmjs.org/lightningcss-linux-x64-musl/-/lightningcss-linux-x64-musl-1.30.2.tgz",
+      "integrity": "sha512-XJaLUUFXb6/QG2lGIW6aIk6jKdtjtcffUT0NKvIqhSBY3hh9Ch+1LCeH80dR9q9LBjG3ewbDjnumefsLsP6aiA==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/lightningcss-win32-arm64-msvc": {
+      "version": "1.30.2",
+      "resolved": "https://registry.npmjs.org/lightningcss-win32-arm64-msvc/-/lightningcss-win32-arm64-msvc-1.30.2.tgz",
+      "integrity": "sha512-FZn+vaj7zLv//D/192WFFVA0RgHawIcHqLX9xuWiQt7P0PtdFEVaxgF9rjM/IRYHQXNnk61/H/gb2Ei+kUQ4xQ==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/lightningcss-win32-x64-msvc": {
+      "version": "1.30.2",
+      "resolved": "https://registry.npmjs.org/lightningcss-win32-x64-msvc/-/lightningcss-win32-x64-msvc-1.30.2.tgz",
+      "integrity": "sha512-5g1yc73p+iAkid5phb4oVFMB45417DkRevRbt/El/gKXJk4jid+vPFF/AXbxn05Aky8PapwzZrdJShv5C0avjw==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
     "node_modules/locate-path": {
       "version": "6.0.0",
       "resolved": "https://registry.npmjs.org/locate-path/-/locate-path-6.0.0.tgz",
@@ -2953,6 +3503,15 @@
         "react": "^16.5.1 || ^17.0.0 || ^18.0.0 || ^19.0.0"
       }
     },
+    "node_modules/magic-string": {
+      "version": "0.30.21",
+      "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.30.21.tgz",
+      "integrity": "sha512-vd2F4YUyEXKGcLHoq+TEyCjxueSeHnFxyyjNp80yg0XV4vUhnDer/lvvlqM/arB5bXQN5K2/3oinyCRyx8T2CQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@jridgewell/sourcemap-codec": "^1.5.5"
+      }
+    },
     "node_modules/math-intrinsics": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/math-intrinsics/-/math-intrinsics-1.1.0.tgz",
@@ -3022,7 +3581,6 @@
       "version": "3.3.11",
       "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.11.tgz",
       "integrity": "sha512-N8SpfPUnUp1bK+PMYW8qSWdl9U+wwNWI4QKxOYDy9JAro3WMX7p2OeVRF9v+347pnakNevPmiHhNmZ2HbFA76w==",
-      "dev": true,
       "funding": [
         {
           "type": "github",
@@ -3147,7 +3705,6 @@
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.1.1.tgz",
       "integrity": "sha512-xceH2snhtb5M9liqDsmEw56le376mTZkEX/jEb/RxNFyegNul7eNslCXP9FDj/Lcu0X8KEyMceP2ntpaHrDEVA==",
-      "dev": true,
       "license": "ISC"
     },
     "node_modules/picomatch": {
@@ -3167,7 +3724,6 @@
       "version": "8.5.6",
       "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.5.6.tgz",
       "integrity": "sha512-3Ybi1tAuwAP9s0r1UQ2J4n5Y0G05bJkpUIO0/bI9MhwmD70S5aTWbXGBwxHrelT+XM1k6dM0pk+SwNkpTRN7Pg==",
-      "dev": true,
       "funding": [
         {
           "type": "opencollective",
@@ -3385,7 +3941,6 @@
       "version": "1.2.1",
       "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.2.1.tgz",
       "integrity": "sha512-UXWMKhLOwVKb728IUtQPXxfYU+usdybtUrK/8uGE8CQMvrhOpwvzDBwj0QhSL7MQc7vIsISBG8VQ8+IDQxpfQA==",
-      "dev": true,
       "license": "BSD-3-Clause",
       "engines": {
         "node": ">=0.10.0"
@@ -3431,9 +3986,21 @@
       "version": "4.1.18",
       "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-4.1.18.tgz",
       "integrity": "sha512-4+Z+0yiYyEtUVCScyfHCxOYP06L5Ne+JiHhY2IjR2KWMIWhJOYZKLSGZaP5HkZ8+bY0cxfzwDE5uOmzFXyIwxw==",
-      "dev": true,
       "license": "MIT"
     },
+    "node_modules/tapable": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/tapable/-/tapable-2.3.0.tgz",
+      "integrity": "sha512-g9ljZiwki/LfxmQADO3dEY1CbpmXT5Hm2fJ+QaGKwSXUylMybePR7/67YW7jOrrvjEgL1Fmz5kzyAjWVWLlucg==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=6"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/webpack"
+      }
+    },
     "node_modules/tinyglobby": {
       "version": "0.2.15",
       "resolved": "https://registry.npmjs.org/tinyglobby/-/tinyglobby-0.2.15.tgz",

frontend/publish-wizard/package.json

@@ -10,6 +10,7 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "@tailwindcss/postcss": "^4.1.18",
     "axios": "^1.13.2",
     "clsx": "^2.1.1",
     "framer-motion": "^12.23.26",

frontend/publish-wizard/postcss.config.js

@@ -1,6 +1,6 @@
 export default {
   plugins: {
-    tailwindcss: {},
+    '@tailwindcss/postcss': {},
     autoprefixer: {},
   },
 }

frontend/publish-wizard/public/vite.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>

frontend/publish-wizard/src/assets/react.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="35.93" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 228"><path fill="#00D8FF" d="M210.483 73.824a171.49 171.49 0 0 0-8.24-2.597c.465-1.9.893-3.777 1.273-5.621c6.238-30.281 2.16-54.676-11.769-62.708c-13.355-7.7-35.196.329-57.254 19.526a171.23 171.23 0 0 0-6.375 5.848a155.866 155.866 0 0 0-4.241-3.917C100.759 3.829 77.587-4.822 63.673 3.233C50.33 10.957 46.379 33.89 51.995 62.588a170.974 170.974 0 0 0 1.892 8.48c-3.28.932-6.445 1.924-9.474 2.98C17.309 83.498 0 98.307 0 113.668c0 15.865 18.582 31.778 46.812 41.427a145.52 145.52 0 0 0 6.921 2.165a167.467 167.467 0 0 0-2.01 9.138c-5.354 28.2-1.173 50.591 12.134 58.266c13.744 7.926 36.812-.22 59.273-19.855a145.567 145.567 0 0 0 5.342-4.923a168.064 168.064 0 0 0 6.92 6.314c21.758 18.722 43.246 26.282 56.54 18.586c13.731-7.949 18.194-32.003 12.4-61.268a145.016 145.016 0 0 0-1.535-6.842c1.62-.48 3.21-.974 4.76-1.488c29.348-9.723 48.443-25.443 48.443-41.52c0-15.417-17.868-30.326-45.517-39.844Zm-6.365 70.984c-1.4.463-2.836.91-4.3 1.345c-3.24-10.257-7.612-21.163-12.963-32.432c5.106-11 9.31-21.767 12.459-31.957c2.619.758 5.16 1.557 7.61 2.4c23.69 8.156 38.14 20.213 38.14 29.504c0 9.896-15.606 22.743-40.946 31.14Zm-10.514 20.834c2.562 12.94 2.927 24.64 1.23 33.787c-1.524 8.219-4.59 13.698-8.382 15.893c-8.067 4.67-25.32-1.4-43.927-17.412a156.726 156.726 0 0 1-6.437-5.87c7.214-7.889 14.423-17.06 21.459-27.246c12.376-1.098 24.068-2.894 34.671-5.345a134.17 134.17 0 0 1 1.386 6.193ZM87.276 214.515c-7.882 2.783-14.16 2.863-17.955.675c-8.075-4.657-11.432-22.636-6.853-46.752a156.923 156.923 0 0 1 1.869-8.499c10.486 2.32 22.093 3.988 34.498 4.994c7.084 9.967 14.501 19.128 21.976 27.15a134.668 134.668 0 0 1-4.877 4.492c-9.933 8.682-19.886 14.842-28.658 17.94ZM50.35 144.747c-12.483-4.267-22.792-9.812-29.858-15.863c-6.35-5.437-9.555-10.836-9.555-15.216c0-9.322 13.897-21.212 37.076-29.293c2.813-.98 5.757-1.905 8.812-2.773c3.204 10.42 7.406 21.315 12.477 32.332c-5.137 11.18-9.399 22.249-12.634 32.792a134.718 134.718 0 0 1-6.318-1.979Zm12.378-84.26c-4.811-24.587-1.616-43.134 6.425-47.789c8.564-4.958 27.502 2.111 47.463 19.835a144.318 144.318 0 0 1 3.841 3.545c-7.438 7.987-14.787 17.08-21.808 26.988c-12.04 1.116-23.565 2.908-34.161 5.309a160.342 160.342 0 0 1-1.76-7.887Zm110.427 27.268a347.8 347.8 0 0 0-7.785-12.803c8.168 1.033 15.994 2.404 23.343 4.08c-2.206 7.072-4.956 14.465-8.193 22.045a381.151 381.151 0 0 0-7.365-13.322Zm-45.032-43.861c5.044 5.465 10.096 11.566 15.065 18.186a322.04 322.04 0 0 0-30.257-.006c4.974-6.559 10.069-12.652 15.192-18.18ZM82.802 87.83a323.167 323.167 0 0 0-7.227 13.238c-3.184-7.553-5.909-14.98-8.134-22.152c7.304-1.634 15.093-2.97 23.209-3.984a321.524 321.524 0 0 0-7.848 12.897Zm8.081 65.352c-8.385-.936-16.291-2.203-23.593-3.793c2.26-7.3 5.045-14.885 8.298-22.6a321.187 321.187 0 0 0 7.257 13.246c2.594 4.48 5.28 8.868 8.038 13.147Zm37.542 31.03c-5.184-5.592-10.354-11.779-15.403-18.433c4.902.192 9.899.29 14.978.29c5.218 0 10.376-.117 15.453-.343c-4.985 6.774-10.018 12.97-15.028 18.486Zm52.198-57.817c3.422 7.8 6.306 15.345 8.596 22.52c-7.422 1.694-15.436 3.058-23.88 4.071a382.417 382.417 0 0 0 7.859-13.026a347.403 347.403 0 0 0 7.425-13.565Zm-16.898 8.101a358.557 358.557 0 0 1-12.281 19.815a329.4 329.4 0 0 1-23.444.823c-7.967 0-15.716-.248-23.178-.732a310.202 310.202 0 0 1-12.513-19.846h.001a307.41 307.41 0 0 1-10.923-20.627a310.278 310.278 0 0 1 10.89-20.637l-.001.001a307.318 307.318 0 0 1 12.413-19.761c7.613-.576 15.42-.876 23.31-.876H128c7.926 0 15.743.303 23.354.883a329.357 329.357 0 0 1 12.335 19.695a358.489 358.489 0 0 1 11.036 20.54a329.472 329.472 0 0 1-11 20.722Zm22.56-122.124c8.572 4.944 11.906 24.881 6.52 51.026c-.344 1.668-.73 3.367-1.15 5.09c-10.622-2.452-22.155-4.275-34.23-5.408c-7.034-10.017-14.323-19.124-21.64-27.008a160.789 160.789 0 0 1 5.888-5.4c18.9-16.447 36.564-22.941 44.612-18.3ZM128 90.808c12.625 0 22.86 10.235 22.86 22.86s-10.235 22.86-22.86 22.86s-22.86-10.235-22.86-22.86s10.235-22.86 22.86-22.86Z"></path></svg>

frontend/publish-wizard/src/index.css

@@ -1,8 +1,15 @@
+@import "tailwindcss";
+
 @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
 
-@tailwind base;
+@theme {
-@tailwind components;
+  --font-sans: 'Inter', sans-serif;
-@tailwind utilities;
+  --color-brand-50: #f0f9ff;
+  --color-brand-100: #e0f2fe;
+  --color-brand-500: #0ea5e9;
+  --color-brand-600: #0284c7;
+  --color-brand-900: #0c4a6e;
+}
 
 body {
   @apply bg-slate-50 text-slate-900 font-sans;

frontend/publish-wizard/src/services/api.ts

@@ -1,7 +1,7 @@
 import axios from 'axios';
 
 const api = axios.create({
-  baseURL: 'https://localhost:7034/api', // Backend URL
+  baseURL: import.meta.env.VITE_API_URL, // Usa la variable de entorno
 });
 
-export default api;
+export default api;

src/SIGCM.API/Controllers/ExportsController.cs

@@ -0,0 +1,52 @@
+using System.Text;
+using System.Xml.Linq;
+using Microsoft.AspNetCore.Authorization;
+using Microsoft.AspNetCore.Mvc;
+using SIGCM.Domain.Interfaces;
+
+namespace SIGCM.API.Controllers;
+
+[ApiController]
+[Route("api/[controller]")]
+[Authorize(Roles = "Admin,Diagramador")]
+public class ExportsController : ControllerBase
+{
+  private readonly IListingRepository _repository;
+
+  public ExportsController(IListingRepository repository)
+  {
+    _repository = repository;
+  }
+
+  [HttpGet("diagram")]
+  public async Task<IActionResult> DownloadDiagram([FromQuery] DateTime date)
+  {
+    var listings = await _repository.GetListingsForPrintAsync(date);
+
+    // Agrupar por Rubro
+    var grouped = listings.GroupBy(l => l.CategoryName ?? "Varios");
+
+    // Construir XML usando XDocument (más seguro y limpio que StringBuilder)
+    var doc = new XDocument(
+        new XElement("Edition",
+            new XAttribute("date", date.ToString("yyyy-MM-dd")),
+            from g in grouped
+            select new XElement("Category",
+                new XAttribute("name", g.Key),
+                from l in g
+                select new XElement("Ad",
+                    new XAttribute("id", l.Id),
+                    // Usamos CDATA para proteger caracteres especiales en el texto
+                    new XCData(l.PrintText ?? l.Description ?? "")
+                )
+            )
+        )
+    );
+
+    // Convertir a bytes
+    var xmlBytes = Encoding.UTF8.GetBytes(doc.ToString());
+    var fileName = $"diagrama_{date:yyyy-MM-dd}.xml";
+
+    return File(xmlBytes, "application/xml", fileName);
+  }
+}

src/SIGCM.API/Controllers/ImagesController.cs

@@ -22,16 +22,24 @@ public class ImagesController : ControllerBase
     {
         if (file == null || file.Length == 0) return BadRequest("File is empty");
 
-        // Basic validation
+        // Validaciones básicas
         var allowedExtensions = new[] { ".jpg", ".jpeg", ".png", ".webp" };
         var ext = Path.GetExtension(file.FileName).ToLowerInvariant();
         if (!allowedExtensions.Contains(ext)) return BadRequest("Invalid file type");
 
-        // Ensure directory exists
+        // Si WebRootPath es nulo, construimos la ruta manualmente apuntando a la raíz del contenido + wwwroot
-        var uploadDir = Path.Combine(_env.WebRootPath, "uploads", "listings", listingId.ToString());
+        string webRootPath = _env.WebRootPath ?? Path.Combine(Directory.GetCurrentDirectory(), "wwwroot");
-        Directory.CreateDirectory(uploadDir);
 
-        // Save file
+        // Ruta física donde se guarda
+        var uploadDir = Path.Combine(webRootPath, "uploads", "listings", listingId.ToString());
+
+        // Asegurar que la carpeta exista (esto crea toda la estructura si falta)
+        if (!Directory.Exists(uploadDir))
+        {
+            Directory.CreateDirectory(uploadDir);
+        }
+
+        // Guardar archivo
         var fileName = $"{Guid.NewGuid()}{ext}";
         var filePath = Path.Combine(uploadDir, fileName);
 
@@ -40,14 +48,16 @@ public class ImagesController : ControllerBase
             await file.CopyToAsync(stream);
         }
 
-        // Save metadata
+        // Guardar metadata en BD
+        // Ojo: La URL que guardamos en BD debe ser relativa para que el navegador la entienda
         var relativeUrl = $"/uploads/listings/{listingId}/{fileName}";
-        var image = new ListingImage 
+
-        { 
+        var image = new ListingImage
-            ListingId = listingId, 
+        {
+            ListingId = listingId,
             Url = relativeUrl,
-            IsMainInfo = false, // Logic to set first as main could be added here
+            IsMainInfo = false,
-            DisplayOrder = 0 
+            DisplayOrder = 0
         };
         await _repository.AddAsync(image);
 

src/SIGCM.API/Controllers/ListingsController.cs

@@ -28,7 +28,7 @@ public class ListingsController : ControllerBase
             Price = dto.Price,
             Currency = dto.Currency,
             UserId = dto.UserId,
-            Status = "Draft",
+            Status = "Published", // Auto publish for now
             CreatedAt = DateTime.UtcNow
         };
 
@@ -36,11 +36,28 @@ public class ListingsController : ControllerBase
         return Ok(new { id });
     }
 
+    [HttpGet]
+    public async Task<IActionResult> GetAll([FromQuery] string? q, [FromQuery] int? categoryId)
+    {
+        if (string.IsNullOrEmpty(q) && !categoryId.HasValue)
+        {
+            var listings = await _repository.GetAllAsync();
+
+            // Populate images for list view (simplified N+1 for now, fix later with JOIN)
+            // Ideally Repo returns a DTO with MainImage
+            // We will fetch images separately in frontend or update repo later for performance.
+            return Ok(listings);
+        }
+
+        var results = await _repository.SearchAsync(q, categoryId);
+        return Ok(results);
+    }
+
     [HttpGet("{id}")]
     public async Task<IActionResult> Get(int id)
     {
-        var listing = await _repository.GetByIdAsync(id);
+        var listingDetail = await _repository.GetDetailByIdAsync(id);
-        if (listing == null) return NotFound();
+        if (listingDetail == null) return NotFound();
-        return Ok(listing);
+        return Ok(listingDetail);
     }
-}
+}

src/SIGCM.API/Controllers/PricingController.cs

@@ -0,0 +1,88 @@
+using Microsoft.AspNetCore.Authorization;
+using Microsoft.AspNetCore.Mvc;
+using SIGCM.Application.DTOs;
+using SIGCM.Domain.Entities;
+using SIGCM.Infrastructure.Repositories;
+using SIGCM.Infrastructure.Services;
+
+namespace SIGCM.API.Controllers;
+
+[ApiController]
+[Route("api/[controller]")]
+[Authorize] // Requiere login, pero permite Admin y Cajero por defecto
+public class PricingController : ControllerBase
+{
+  private readonly PricingService _service;
+  private readonly PricingRepository _repository;
+
+  public PricingController(PricingService service, PricingRepository repository)
+  {
+    _service = service;
+    _repository = repository;
+  }
+
+  // Usado por: Panel Mostrador (Cajero) y Admin
+  [HttpPost("calculate")]
+  public async Task<IActionResult> Calculate(CalculatePriceRequest request)
+  {
+    var result = await _service.CalculateAsync(request);
+    return Ok(result);
+  }
+
+  // --- Endpoints de Configuración (Solo Admin) ---
+
+  // Obtener reglas de un rubro específico
+  [HttpGet("{categoryId}")]
+  [Authorize(Roles = "Admin")]
+  public async Task<IActionResult> GetConfig(int categoryId)
+  {
+    var config = await _repository.GetByCategoryIdAsync(categoryId);
+    return Ok(config);
+  }
+
+  // Guardar/Actualizar reglas
+  [HttpPost]
+  [Authorize(Roles = "Admin")]
+  public async Task<IActionResult> SaveConfig(CategoryPricing pricing)
+  {
+    if (pricing.CategoryId == 0) return BadRequest("CategoryId es requerido");
+
+    await _repository.UpsertPricingAsync(pricing);
+    return Ok(new { message = "Configuración guardada exitosamente" });
+  }
+
+  // --- ENDPOINTS DE PROMOCIONES ---
+
+  [HttpGet("promotions")]
+  [Authorize(Roles = "Admin")]
+  public async Task<IActionResult> GetPromotions()
+  {
+    var promos = await _repository.GetAllPromotionsAsync();
+    return Ok(promos);
+  }
+
+  [HttpPost("promotions")]
+  [Authorize(Roles = "Admin")]
+  public async Task<IActionResult> CreatePromotion(Promotion promo)
+  {
+    var id = await _repository.CreatePromotionAsync(promo);
+    return Ok(new { id });
+  }
+
+  [HttpPut("promotions/{id}")]
+  [Authorize(Roles = "Admin")]
+  public async Task<IActionResult> UpdatePromotion(int id, Promotion promo)
+  {
+    if (id != promo.Id) return BadRequest();
+    await _repository.UpdatePromotionAsync(promo);
+    return NoContent();
+  }
+
+  [HttpDelete("promotions/{id}")]
+  [Authorize(Roles = "Admin")]
+  public async Task<IActionResult> DeletePromotion(int id)
+  {
+    await _repository.DeletePromotionAsync(id);
+    return NoContent();
+  }
+}

src/SIGCM.API/Controllers/UsersController.cs

@@ -8,7 +8,7 @@ namespace SIGCM.API.Controllers;
 
 [ApiController]
 [Route("api/[controller]")]
-[Authorize(Roles = "Admin")] // Only admins can manage users
+[Authorize(Roles = "Admin")]
 public class UsersController : ControllerBase
 {
     private readonly IUserRepository _repository;

src/SIGCM.API/Program.cs

@@ -1,21 +1,55 @@
+using System.Text;
+using Microsoft.AspNetCore.Authentication.JwtBearer;
+using Microsoft.IdentityModel.Tokens;
 using SIGCM.Infrastructure;
 using SIGCM.Infrastructure.Data;
 
 var builder = WebApplication.CreateBuilder(args);
 
-// Add services to the container.
+// 1. Agregar servicios al contenedor.
 builder.Services.AddControllers();
 builder.Services.AddEndpointsApiExplorer();
 builder.Services.AddSwaggerGen();
 
+// 2. Configurar Autenticación JWT
+var key = Encoding.ASCII.GetBytes(builder.Configuration["Jwt:Key"]!);
+
+builder.Services.AddAuthentication(options =>
+{
+    options.DefaultAuthenticateScheme = JwtBearerDefaults.AuthenticationScheme;
+    options.DefaultChallengeScheme = JwtBearerDefaults.AuthenticationScheme;
+})
+.AddJwtBearer(options =>
+{
+    options.RequireHttpsMetadata = false;
+    options.SaveToken = true;
+    options.TokenValidationParameters = new TokenValidationParameters
+    {
+        ValidateIssuerSigningKey = true,
+        IssuerSigningKey = new SymmetricSecurityKey(key),
+        ValidateIssuer = true,
+        ValidIssuer = builder.Configuration["Jwt:Issuer"],
+        ValidateAudience = true,
+        ValidAudience = builder.Configuration["Jwt:Audience"],
+        ValidateLifetime = true,
+        ClockSkew = TimeSpan.Zero
+    };
+});
+
+// 3. Agregar Capa de Infraestructura
 builder.Services.AddInfrastructure();
 
+// 4. Configurar CORS
 builder.Services.AddCors(options =>
 {
     options.AddPolicy("AllowFrontend",
         policy =>
         {
-            policy.WithOrigins("http://localhost:5173", "http://localhost:5174", "http://localhost:5175")
+            policy.WithOrigins(
+                "http://localhost:5173", 
+                "http://localhost:5174",
+                "http://localhost:5175",
+                "http://localhost:5177")
                   .AllowAnyHeader()
                   .AllowAnyMethod();
         });
@@ -23,7 +57,8 @@ builder.Services.AddCors(options =>
 
 var app = builder.Build();
 
-// Configure the HTTP request pipeline.
+// --- Configuración del Pipeline HTTP ---
+
 if (app.Environment.IsDevelopment())
 {
     app.UseSwagger();
@@ -31,19 +66,21 @@ if (app.Environment.IsDevelopment())
 }
 
 app.UseHttpsRedirection();
-app.UseStaticFiles(); // Enable static files for images
+app.UseStaticFiles(); // Para servir imágenes
 
 app.UseCors("AllowFrontend");
 
+// IMPORTANTE: El orden importa aquí
+app.UseAuthentication(); // <- Esto faltaba
 app.UseAuthorization();
 
 app.MapControllers();
 
-// Initialize DB
+// Inicializar BD
 using (var scope = app.Services.CreateScope())
 {
     var initializer = scope.ServiceProvider.GetRequiredService<DbInitializer>();
     await initializer.InitializeAsync();
 }
 
-app.Run();
+app.Run();

src/SIGCM.Application/Class1.cs

@@ -1,6 +0,0 @@
-namespace SIGCM.Application;
-
-public class Class1
-{
-
-}

src/SIGCM.Application/DTOs/ListingDtos.cs

@@ -9,14 +9,38 @@ public class CreateListingDto
     public decimal Price { get; set; }
     public string Currency { get; set; } = "ARS";
     public int? UserId { get; set; }
-
-    // Dictionary of AttributeDefinitionId -> Value
     public Dictionary<int, string> Attributes { get; set; } = new();
+    public string? PrintText { get; set; }
+    public string? PrintFontSize { get; set; }
+    public string? PrintAlignment { get; set; }
+    public int PrintDaysCount { get; set; }
 }
 
 public class ListingDto : CreateListingDto
 {
     public int Id { get; set; }
     public DateTime CreatedAt { get; set; }
-    public string Status { get; set; }
+    public required string Status { get; set; }
 }
+
+public class ListingDetailDto : ListingDto
+{
+    public IEnumerable<ListingAttributeDto> AttributeValues { get; set; } = new List<ListingAttributeDto>();
+    public IEnumerable<ListingImageDto> Images { get; set; } = new List<ListingImageDto>();
+}
+
+public class ListingAttributeDto
+{
+    public int ListingId { get; set; }
+    public int AttributeDefinitionId { get; set; }
+    public required string AttributeName { get; set; }
+    public required string Value { get; set; }
+}
+
+public class ListingImageDto
+{
+    public int Id { get; set; }
+    public required string Url { get; set; }
+    public bool IsMainInfo { get; set; }
+    public int DisplayOrder { get; set; }
+}

src/SIGCM.Application/DTOs/PricingDtos.cs

@@ -0,0 +1,24 @@
+namespace SIGCM.Application.DTOs;
+
+public class CalculatePriceRequest
+{
+  public int CategoryId { get; set; }
+  public required string Text { get; set; }
+  public int Days { get; set; }
+  public bool IsBold { get; set; }
+  public bool IsFrame { get; set; }
+  public DateTime StartDate { get; set; }
+}
+
+public class CalculatePriceResponse
+{
+  public decimal TotalPrice { get; set; }
+  public int WordCount { get; set; }
+  public int SpecialCharCount { get; set; }
+  public decimal BaseCost { get; set; }
+  public decimal ExtraCost { get; set; }
+  public decimal Surcharges { get; set; }
+  public decimal Discount { get; set; }
+  public string Details { get; set; } = string.Empty;
+  public string AppliedPromotion { get; set; } = string.Empty;
+}

src/SIGCM.Domain/Class1.cs

@@ -1,6 +0,0 @@
-namespace SIGCM.Domain;
-
-public class Class1
-{
-
-}

src/SIGCM.Domain/Entities/CategoryPricing.cs

@@ -0,0 +1,14 @@
+namespace SIGCM.Domain.Entities;
+
+public class CategoryPricing
+{
+  public int Id { get; set; }
+  public int CategoryId { get; set; }
+  public decimal BasePrice { get; set; }
+  public int BaseWordCount { get; set; }
+  public decimal ExtraWordPrice { get; set; }
+  public string SpecialChars { get; set; } = "!";
+  public decimal SpecialCharPrice { get; set; }
+  public decimal BoldSurcharge { get; set; }
+  public decimal FrameSurcharge { get; set; }
+}

src/SIGCM.Domain/Entities/Listing.cs

@@ -8,10 +8,19 @@ public class Listing
     public required string Title { get; set; }
     public string? Description { get; set; }
     public decimal Price { get; set; }
-    public string Currency { get; set; } = "ARS"; // ARS, USD
+    public string Currency { get; set; } = "ARS";
     public DateTime CreatedAt { get; set; } = DateTime.UtcNow;
-    public string Status { get; set; } = "Draft"; // Draft, Published, Sold, Paused
+    public string Status { get; set; } = "Draft";
     public int? UserId { get; set; }
-    
+
-    // Navigation properties logic will be handled manually via repositories in Dapper
+    // Propiedades para impresión
-}
+    public string? PrintText { get; set; }
+    public DateTime? PrintStartDate { get; set; }
+    public int PrintDaysCount { get; set; }
+    public string PrintFontSize { get; set; } = "normal";
+    public string PrintAlignment { get; set; } = "left";
+
+    // Propiedades auxiliares (no están en la tabla Listings, vienen de Joins/Subqueries)
+    public string? CategoryName { get; set; }
+    public string? MainImageUrl { get; set; }
+}

src/SIGCM.Domain/Entities/Promotion.cs

@@ -0,0 +1,13 @@
+namespace SIGCM.Domain.Entities;
+
+public class Promotion
+{
+  public int Id { get; set; }
+  public string Name { get; set; } = string.Empty;
+  public int? CategoryId { get; set; }
+  public int MinDays { get; set; }
+  public string? DaysOfWeek { get; set; } // "0,6"
+  public decimal DiscountPercentage { get; set; }
+  public decimal DiscountFixedAmount { get; set; }
+  public bool IsActive { get; set; }
+}

src/SIGCM.Domain/Interfaces/IListingRepository.cs

@@ -1,3 +1,4 @@
+using SIGCM.Domain.Models;
 using SIGCM.Domain.Entities;
 
 namespace SIGCM.Domain.Interfaces;
@@ -6,5 +7,8 @@ public interface IListingRepository
 {
     Task<int> CreateAsync(Listing listing, Dictionary<int, string> attributes);
     Task<Listing?> GetByIdAsync(int id);
+    Task<ListingDetail?> GetDetailByIdAsync(int id);
     Task<IEnumerable<Listing>> GetAllAsync();
-}
+    Task<IEnumerable<Listing>> SearchAsync(string? query, int? categoryId);
+    Task<IEnumerable<Listing>> GetListingsForPrintAsync(DateTime date);
+}

src/SIGCM.Domain/Models/ListingDetail.cs

@@ -0,0 +1,15 @@
+using SIGCM.Domain.Entities;
+
+namespace SIGCM.Domain.Models;
+
+public class ListingDetail
+{
+    public required Listing Listing { get; set; }
+    public required IEnumerable<ListingAttributeValueWithName> Attributes { get; set; }
+    public required IEnumerable<ListingImage> Images { get; set; }
+}
+
+public class ListingAttributeValueWithName : ListingAttributeValue
+{
+    public required string AttributeName { get; set; }
+}

src/SIGCM.Infrastructure/Class1.cs

@@ -1,6 +0,0 @@
-namespace SIGCM.Infrastructure;
-
-public class Class1
-{
-
-}

src/SIGCM.Infrastructure/Data/DbInitializer.cs

@@ -1,4 +1,6 @@
 using Dapper;
+// Asegúrate de que BCrypt.Net esté instalado en este proyecto o referenciado
+// Si no te reconoce BCrypt, avísame, pero debería funcionar porque ya se usa en AuthService.
 
 namespace SIGCM.Infrastructure.Data;
 
@@ -14,60 +16,7 @@ public class DbInitializer
     public async Task InitializeAsync()
     {
         using var connection = _connectionFactory.CreateConnection();
-        
-        var sql = @"
-IF NOT EXISTS (SELECT * FROM sys.tables WHERE name = 'Users')
-BEGIN
-    CREATE TABLE Users (
-        Id INT IDENTITY(1,1) PRIMARY KEY,
-        Username NVARCHAR(50) NOT NULL UNIQUE,
-        PasswordHash NVARCHAR(255) NOT NULL,
-        Role NVARCHAR(20) NOT NULL,
-        Email NVARCHAR(100) NULL,
-        CreatedAt DATETIME DEFAULT GETUTCDATE()
-    );
 
-    -- Seed generic admin (password: admin123)
-    -- Hash created with BCrypt
-    INSERT INTO Users (Username, PasswordHash, Role) 
-    VALUES ('admin', '$2a$11$u.w..ExampleHashPlaceholder...', 'Admin');
-END
-
-IF NOT EXISTS (SELECT * FROM sys.tables WHERE name = 'Categories')
-BEGIN
-    CREATE TABLE Categories (
-        Id INT IDENTITY(1,1) PRIMARY KEY,
-        ParentId INT NULL,
-        Name NVARCHAR(100) NOT NULL,
-        Slug NVARCHAR(100) NOT NULL,
-        Active BIT DEFAULT 1,
-        FOREIGN KEY (ParentId) REFERENCES Categories(Id)
-    );
-END
-
-IF NOT EXISTS (SELECT * FROM sys.tables WHERE name = 'Operations')
-BEGIN
-    CREATE TABLE Operations (
-        Id INT IDENTITY(1,1) PRIMARY KEY,
-        Name NVARCHAR(50) NOT NULL UNIQUE
-    );
-END
-
-IF NOT EXISTS (SELECT * FROM sys.tables WHERE name = 'CategoryOperations')
-BEGIN
-    CREATE TABLE CategoryOperations (
-        CategoryId INT NOT NULL,
-        OperationId INT NOT NULL,
-        PRIMARY KEY (CategoryId, OperationId),
-        FOREIGN KEY (CategoryId) REFERENCES Categories(Id) ON DELETE CASCADE,
-        FOREIGN KEY (OperationId) REFERENCES Operations(Id) ON DELETE CASCADE
-    );
-END
-";
-        // Fixing the placeholder hash to a valid one might be necessary if I want to login immediately.
-        // I will update the hash command later or create a small utility to generate one.
-        // For now, I'll remove the INSERT or comment it out until I can generate a real hash in C#.
-        
         var schemaSql = @"
 IF NOT EXISTS (SELECT * FROM sys.tables WHERE name = 'Users')
 BEGIN
@@ -167,6 +116,22 @@ BEGIN
     );
 END
 ";
+        // Ejecutar creación de tablas
         await connection.ExecuteAsync(schemaSql);
+
+        // --- SEED DE DATOS (Usuario Admin) ---
+        var adminCount = await connection.ExecuteScalarAsync<int>("SELECT COUNT(1) FROM Users WHERE Username = 'admin'");
+
+        if (adminCount == 0)
+        {
+            // Creamos el hash válido para la clave del usuario usando la librería del proyecto
+            var passwordHash = BCrypt.Net.BCrypt.HashPassword("Diagonal423");
+
+            var insertAdminSql = @"
+                INSERT INTO Users (Username, PasswordHash, Role, Email)
+                VALUES ('admin', @PasswordHash, 'Admin', 'admin@sigcm.com')";
+
+            await connection.ExecuteAsync(insertAdminSql, new { PasswordHash = passwordHash });
+        }
     }
-}
+}

src/SIGCM.Infrastructure/DependencyInjection.cs

@@ -3,6 +3,7 @@ using SIGCM.Domain.Interfaces;
 using SIGCM.Application.Interfaces;
 using SIGCM.Infrastructure.Data;
 using SIGCM.Infrastructure.Repositories;
+using SIGCM.Infrastructure.Services;
 
 namespace SIGCM.Infrastructure;
 
@@ -15,11 +16,13 @@ public static class DependencyInjection
         services.AddScoped<ICategoryRepository, CategoryRepository>();
         services.AddScoped<IOperationRepository, OperationRepository>();
         services.AddScoped<IUserRepository, UserRepository>();
-        services.AddScoped<ITokenService, Services.TokenService>();
+        services.AddScoped<ITokenService, TokenService>();
-        services.AddScoped<IAuthService, Services.AuthService>();
+        services.AddScoped<IAuthService, AuthService>();
         services.AddScoped<IAttributeDefinitionRepository, AttributeDefinitionRepository>();
         services.AddScoped<IListingRepository, ListingRepository>();
         services.AddScoped<IImageRepository, ImageRepository>();
+        services.AddScoped<PricingRepository>();
+        services.AddScoped<PricingService>();
         return services;
     }
 }

src/SIGCM.Infrastructure/Repositories/ListingRepository.cs

@@ -25,8 +25,16 @@ public class ListingRepository : IListingRepository
         try
         {
             var sqlListing = @"
-                INSERT INTO Listings (CategoryId, OperationId, Title, Description, Price, Currency, CreatedAt, Status, UserId)
+                INSERT INTO Listings (
-                VALUES (@CategoryId, @OperationId, @Title, @Description, @Price, @Currency, @CreatedAt, @Status, @UserId);
+                    CategoryId, OperationId, Title, Description, Price, Currency, 
+                    CreatedAt, Status, UserId, PrintText, PrintStartDate, PrintDaysCount,
+                    IsBold, IsFrame, PrintFontSize, PrintAlignment
+                )
+                VALUES (
+                    @CategoryId, @OperationId, @Title, @Description, @Price, @Currency, 
+                    @CreatedAt, @Status, @UserId, @PrintText, @PrintStartDate, @PrintDaysCount,
+                    @IsBold, @IsFrame, @PrintFontSize, @PrintAlignment
+                );
                 SELECT CAST(SCOPE_IDENTITY() as int);";
 
             var listingId = await conn.QuerySingleAsync<int>(sqlListing, listing, transaction);
@@ -59,15 +67,90 @@ public class ListingRepository : IListingRepository
         return await conn.QuerySingleOrDefaultAsync<Listing>("SELECT * FROM Listings WHERE Id = @Id", new { Id = id });
     }
 
+    public async Task<SIGCM.Domain.Models.ListingDetail?> GetDetailByIdAsync(int id)
+    {
+        using var conn = _connectionFactory.CreateConnection();
+        var sql = @"
+            SELECT * FROM Listings WHERE Id = @Id;
+            
+            SELECT lav.*, ad.Name as AttributeName 
+            FROM ListingAttributeValues lav
+            JOIN AttributeDefinitions ad ON lav.AttributeDefinitionId = ad.Id
+            WHERE lav.ListingId = @Id;
+
+            SELECT * FROM ListingImages WHERE ListingId = @Id ORDER BY DisplayOrder;
+        ";
+
+        using var multi = await conn.QueryMultipleAsync(sql, new { Id = id });
+        var listing = await multi.ReadSingleOrDefaultAsync<Listing>();
+        if (listing == null) return null;
+
+        var attributes = await multi.ReadAsync<SIGCM.Domain.Models.ListingAttributeValueWithName>();
+        var images = await multi.ReadAsync<ListingImage>();
+
+        return new SIGCM.Domain.Models.ListingDetail
+        {
+            Listing = listing,
+            Attributes = attributes,
+            Images = images
+        };
+    }
+
     public async Task<IEnumerable<Listing>> GetAllAsync()
     {
         using var conn = _connectionFactory.CreateConnection();
-         // A simple query for now
+        // Subquery para obtener la imagen principal
         var sql = @"
-            SELECT l.* 
+            SELECT TOP 20 l.*,
+                   (SELECT TOP 1 Url FROM ListingImages li WHERE li.ListingId = l.Id ORDER BY IsMainInfo DESC, DisplayOrder ASC) as MainImageUrl
             FROM Listings l
             ORDER BY l.CreatedAt DESC";
-        
+
         return await conn.QueryAsync<Listing>(sql);
     }
-}
+
+    public async Task<IEnumerable<Listing>> SearchAsync(string? query, int? categoryId)
+    {
+        using var conn = _connectionFactory.CreateConnection();
+        var sql = @"
+            SELECT l.*,
+                   (SELECT TOP 1 Url FROM ListingImages li WHERE li.ListingId = l.Id ORDER BY IsMainInfo DESC, DisplayOrder ASC) as MainImageUrl
+            FROM Listings l
+            WHERE 1=1";
+
+        var parameters = new DynamicParameters();
+
+        if (!string.IsNullOrEmpty(query))
+        {
+            sql += " AND (l.Title LIKE @Query OR l.Description LIKE @Query)";
+            parameters.Add("Query", $"%{query}%");
+        }
+
+        if (categoryId.HasValue)
+        {
+            sql += " AND l.CategoryId = @CategoryId";
+            parameters.Add("CategoryId", categoryId);
+        }
+
+        sql += " ORDER BY l.CreatedAt DESC";
+
+        return await conn.QueryAsync<Listing>(sql, parameters);
+    }
+
+    public async Task<IEnumerable<Listing>> GetListingsForPrintAsync(DateTime targetDate)
+    {
+        using var conn = _connectionFactory.CreateConnection();
+        // La lógica: El aviso debe haber empezado antes o en la fecha target
+        // Y la fecha target debe ser menor a la fecha de inicio + duración
+        var sql = @"
+            SELECT l.*, c.Name as CategoryName 
+            FROM Listings l
+            JOIN Categories c ON l.CategoryId = c.Id
+            WHERE l.PrintStartDate IS NOT NULL 
+              AND @TargetDate >= CAST(l.PrintStartDate AS DATE)
+              AND @TargetDate < DATEADD(day, l.PrintDaysCount, CAST(l.PrintStartDate AS DATE))
+            ORDER BY c.Name, l.Title"; // Ordenado por Rubro y luego alfabético
+
+        return await conn.QueryAsync<Listing>(sql, new { TargetDate = targetDate.Date });
+    }
+}

src/SIGCM.Infrastructure/Repositories/PricingRepository.cs

@@ -0,0 +1,94 @@
+using Dapper;
+using SIGCM.Domain.Entities;
+using SIGCM.Infrastructure.Data;
+
+namespace SIGCM.Infrastructure.Repositories;
+
+public class PricingRepository
+{
+  private readonly IDbConnectionFactory _db;
+
+  public PricingRepository(IDbConnectionFactory db)
+  {
+    _db = db;
+  }
+
+  public async Task<CategoryPricing?> GetByCategoryIdAsync(int categoryId)
+  {
+    using var conn = _db.CreateConnection();
+    return await conn.QuerySingleOrDefaultAsync<CategoryPricing>(
+        "SELECT * FROM CategoryPricing WHERE CategoryId = @Id", new { Id = categoryId });
+  }
+
+  public async Task UpsertPricingAsync(CategoryPricing pricing)
+  {
+    using var conn = _db.CreateConnection();
+    // Lógica de "Si existe actualiza, sino inserta"
+    var exists = await conn.ExecuteScalarAsync<int>(
+        "SELECT COUNT(1) FROM CategoryPricing WHERE CategoryId = @CategoryId", new { pricing.CategoryId });
+
+    if (exists > 0)
+    {
+      var updateSql = @"
+                UPDATE CategoryPricing 
+                SET BasePrice = @BasePrice, BaseWordCount = @BaseWordCount, 
+                    ExtraWordPrice = @ExtraWordPrice, SpecialChars = @SpecialChars,
+                    SpecialCharPrice = @SpecialCharPrice, BoldSurcharge = @BoldSurcharge,
+                    FrameSurcharge = @FrameSurcharge
+                WHERE CategoryId = @CategoryId";
+      await conn.ExecuteAsync(updateSql, pricing);
+    }
+    else
+    {
+      var insertSql = @"
+                INSERT INTO CategoryPricing 
+                (CategoryId, BasePrice, BaseWordCount, ExtraWordPrice, SpecialChars, SpecialCharPrice, BoldSurcharge, FrameSurcharge)
+                VALUES 
+                (@CategoryId, @BasePrice, @BaseWordCount, @ExtraWordPrice, @SpecialChars, @SpecialCharPrice, @BoldSurcharge, @FrameSurcharge)";
+      await conn.ExecuteAsync(insertSql, pricing);
+    }
+  }
+
+  public async Task<IEnumerable<Promotion>> GetActivePromotionsAsync()
+  {
+    using var conn = _db.CreateConnection();
+    return await conn.QueryAsync<Promotion>(
+        "SELECT * FROM Promotions WHERE IsActive = 1");
+  }
+
+  // --- SECCIÓN PROMOCIONES ---
+
+  public async Task<IEnumerable<Promotion>> GetAllPromotionsAsync()
+  {
+    using var conn = _db.CreateConnection();
+    return await conn.QueryAsync<Promotion>("SELECT * FROM Promotions ORDER BY Id DESC");
+  }
+
+  public async Task<int> CreatePromotionAsync(Promotion promo)
+  {
+    using var conn = _db.CreateConnection();
+    var sql = @"
+            INSERT INTO Promotions (Name, CategoryId, MinDays, DaysOfWeek, DiscountPercentage, DiscountFixedAmount, IsActive)
+            VALUES (@Name, @CategoryId, @MinDays, @DaysOfWeek, @DiscountPercentage, @DiscountFixedAmount, @IsActive);
+            SELECT CAST(SCOPE_IDENTITY() as int);";
+    return await conn.QuerySingleAsync<int>(sql, promo);
+  }
+
+  public async Task UpdatePromotionAsync(Promotion promo)
+  {
+    using var conn = _db.CreateConnection();
+    var sql = @"
+            UPDATE Promotions 
+            SET Name = @Name, CategoryId = @CategoryId, MinDays = @MinDays, 
+                DaysOfWeek = @DaysOfWeek, DiscountPercentage = @DiscountPercentage, 
+                DiscountFixedAmount = @DiscountFixedAmount, IsActive = @IsActive
+            WHERE Id = @Id";
+    await conn.ExecuteAsync(sql, promo);
+  }
+
+  public async Task DeletePromotionAsync(int id)
+  {
+    using var conn = _db.CreateConnection();
+    await conn.ExecuteAsync("DELETE FROM Promotions WHERE Id = @Id", new { Id = id });
+  }
+}

src/SIGCM.Infrastructure/Services/PricingService.cs

@@ -0,0 +1,111 @@
+using SIGCM.Application.DTOs; // Asegúrate de crear este DTO (ver abajo)
+using SIGCM.Domain.Entities;
+using SIGCM.Infrastructure.Repositories;
+using System.Text.RegularExpressions;
+
+namespace SIGCM.Infrastructure.Services;
+
+public class PricingService
+{
+  private readonly PricingRepository _repo;
+
+  public PricingService(PricingRepository repo)
+  {
+    _repo = repo;
+  }
+
+  public async Task<CalculatePriceResponse> CalculateAsync(CalculatePriceRequest request)
+  {
+    // 1. Obtener Reglas
+    var pricing = await _repo.GetByCategoryIdAsync(request.CategoryId);
+
+    // Si no hay configuración para este rubro, devolvemos 0 o un default seguro
+    if (pricing == null) return new CalculatePriceResponse
+    {
+      TotalPrice = 0,
+      Details = "No hay tarifas configuradas para este rubro."
+    };
+
+    // 2. Análisis del Texto
+    var words = request.Text.Split(new[] { ' ', '\n', '\r' }, StringSplitOptions.RemoveEmptyEntries);
+    int realWordCount = words.Length;
+
+    // Contar caracteres especiales configurados en BD (ej: "!")
+    // Escapamos los caracteres por seguridad en Regex
+    string escapedSpecialChars = Regex.Escape(pricing.SpecialChars ?? "!");
+    int specialCharCount = Regex.Matches(request.Text, $"[{escapedSpecialChars}]").Count;
+
+    // 3. Costo Base y Excedente
+    decimal currentCost = pricing.BasePrice; // Precio base incluye N palabras
+
+    // ¿Cuántas palabras extra cobramos?
+    // Nota: Los caracteres especiales se cobran aparte según tu requerimiento, 
+    // o suman al conteo de palabras. Aquí implemento: Se cobran APARTE.
+
+    int extraWords = Math.Max(0, realWordCount - pricing.BaseWordCount);
+    decimal extraWordCost = extraWords * pricing.ExtraWordPrice;
+    decimal specialCharCost = specialCharCount * pricing.SpecialCharPrice;
+
+    currentCost += extraWordCost + specialCharCost;
+
+    // 4. Estilos (Negrita / Recuadro) - Se suman al precio unitario diario
+    if (request.IsBold) currentCost += pricing.BoldSurcharge;
+    if (request.IsFrame) currentCost += pricing.FrameSurcharge;
+
+    // 5. Multiplicar por Días
+    decimal totalBeforeDiscount = currentCost * request.Days;
+
+    // 6. Motor de Promociones
+    var promotions = await _repo.GetActivePromotionsAsync();
+    decimal totalDiscount = 0;
+    List<string> appliedPromos = new();
+
+    foreach (var promo in promotions)
+    {
+      // Filtro por Categoría
+      if (promo.CategoryId.HasValue && promo.CategoryId != request.CategoryId) continue;
+
+      // Filtro por Cantidad de Días
+      if (promo.MinDays > 0 && request.Days < promo.MinDays) continue;
+
+      // Filtro por Días de la Semana
+      if (!string.IsNullOrEmpty(promo.DaysOfWeek))
+      {
+        var targetDays = promo.DaysOfWeek.Split(',').Select(int.Parse).ToList();
+        bool hitsDay = false;
+        // Revisamos cada día que durará el aviso
+        for (int i = 0; i < request.Days; i++)
+        {
+          var currentDay = (int)request.StartDate.AddDays(i).DayOfWeek;
+          if (targetDays.Contains(currentDay)) hitsDay = true;
+        }
+        if (!hitsDay) continue; // No cae en ningún día de promo
+      }
+
+      // Aplicar Descuento
+      if (promo.DiscountPercentage > 0)
+      {
+        decimal discountVal = totalBeforeDiscount * (promo.DiscountPercentage / 100m);
+        totalDiscount += discountVal;
+        appliedPromos.Add($"{promo.Name} (-{promo.DiscountPercentage}%)");
+      }
+      if (promo.DiscountFixedAmount > 0)
+      {
+        totalDiscount += promo.DiscountFixedAmount;
+        appliedPromos.Add($"{promo.Name} (-${promo.DiscountFixedAmount})");
+      }
+    }
+
+    return new CalculatePriceResponse
+    {
+      TotalPrice = Math.Max(0, totalBeforeDiscount - totalDiscount),
+      BaseCost = pricing.BasePrice,
+      ExtraCost = extraWordCost + specialCharCost,
+      Surcharges = (request.IsBold ? pricing.BoldSurcharge : 0) + (request.IsFrame ? pricing.FrameSurcharge : 0),
+      Discount = totalDiscount,
+      WordCount = realWordCount,
+      SpecialCharCount = specialCharCount,
+      Details = $"Base: ${pricing.BasePrice} | Extras: ${extraWordCost + specialCharCost} | Desc: -${totalDiscount} ({string.Join(", ", appliedPromos)})"
+    };
+  }
+}