#28 dependency: add axios

Reviewed-on: #25

Rakefile

@@ -12,12 +12,12 @@ namespace :live do
 
   desc 'monitorear salida'
   task :tail do
-    compose('logs', '-f', 'django', compose: DOCKER_COMPOSE)
+    compose('logs', '-f', 'frontend', compose: DOCKER_COMPOSE)
   end
 
   desc 'monitorear salida'
   task :tail_end do
-    compose('logs', '-f', '-n 50', 'django', compose: DOCKER_COMPOSE)
+    compose('logs', '-f', '-n 50', 'frontend', compose: DOCKER_COMPOSE)
   end
 
   desc 'iniciar entorno'

docker-compose.yml

@@ -7,4 +7,7 @@ services:
       - ./:/app/
     ports:
       - "7001:3000"
+    environment:
+      - VITE_DJANGO_BASE_URL=http://localhost:7000
+      - VITE_API_IMPLEMENTATION=django
 

package-lock.json

@@ -9,6 +9,7 @@
       "version": "0.0.0",
       "dependencies": {
         "@mdi/font": "7.4.47",
+        "axios": "^1.13.5",
         "core-js": "^3.37.1",
         "roboto-fontface": "*",
         "vee-validate": "^4.14.6",
@@ -1503,6 +1504,12 @@
         "node": ">=16.14.0"
       }
     },
+    "node_modules/asynckit": {
+      "version": "0.4.0",
+      "resolved": "https://registry.npmjs.org/asynckit/-/asynckit-0.4.0.tgz",
+      "integrity": "sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q==",
+      "license": "MIT"
+    },
     "node_modules/available-typed-arrays": {
       "version": "1.0.7",
       "resolved": "https://registry.npmjs.org/available-typed-arrays/-/available-typed-arrays-1.0.7.tgz",
@@ -1519,6 +1526,17 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/axios": {
+      "version": "1.13.5",
+      "resolved": "https://registry.npmjs.org/axios/-/axios-1.13.5.tgz",
+      "integrity": "sha512-cz4ur7Vb0xS4/KUN0tPWe44eqxrIu31me+fbang3ijiNscE129POzipJJA6zniq2C/Z6sJCjMimjS8Lc/GAs8Q==",
+      "license": "MIT",
+      "dependencies": {
+        "follow-redirects": "^1.15.11",
+        "form-data": "^4.0.5",
+        "proxy-from-env": "^1.1.0"
+      }
+    },
     "node_modules/babel-eslint": {
       "version": "10.1.0",
       "resolved": "https://registry.npmjs.org/babel-eslint/-/babel-eslint-10.1.0.tgz",
@@ -1667,6 +1685,19 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/call-bind-apply-helpers": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/call-bind-apply-helpers/-/call-bind-apply-helpers-1.0.2.tgz",
+      "integrity": "sha512-Sp1ablJ0ivDkSzjcaJdxEunN5/XvksFJ2sMBFfq6x0ryhQV/2b/KwFe21cMpmHtPOSij8K99/wSfoEuTObmuMQ==",
+      "license": "MIT",
+      "dependencies": {
+        "es-errors": "^1.3.0",
+        "function-bind": "^1.1.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
     "node_modules/callsites": {
       "version": "3.1.0",
       "resolved": "https://registry.npmjs.org/callsites/-/callsites-3.1.0.tgz",
@@ -1752,6 +1783,18 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/combined-stream": {
+      "version": "1.0.8",
+      "resolved": "https://registry.npmjs.org/combined-stream/-/combined-stream-1.0.8.tgz",
+      "integrity": "sha512-FQN4MRfuJeHf7cBbBMJFXhKSDq+2kAArBlmRBvcvFE5BB1HZKXtSFASDhdlz9zOYwxh8lDdnvmMOe/+5cdoEdg==",
+      "license": "MIT",
+      "dependencies": {
+        "delayed-stream": "~1.0.0"
+      },
+      "engines": {
+        "node": ">= 0.8"
+      }
+    },
     "node_modules/concat-map": {
       "version": "0.0.1",
       "resolved": "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz",
@@ -1941,6 +1984,15 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/delayed-stream": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/delayed-stream/-/delayed-stream-1.0.0.tgz",
+      "integrity": "sha512-ZySD7Nf91aLB0RxL4KGrKHBXl7Eds1DAmEdcoVawXnLD7SDhpNgtuII2aAkg7a7QS41jxPSZ17p4VdGnMHk3MQ==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.4.0"
+      }
+    },
     "node_modules/doctrine": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/doctrine/-/doctrine-3.0.0.tgz",
@@ -1954,6 +2006,20 @@
         "node": ">=6.0.0"
       }
     },
+    "node_modules/dunder-proto": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/dunder-proto/-/dunder-proto-1.0.1.tgz",
+      "integrity": "sha512-KIN/nDJBQRcXw0MLVhZE9iQHmG68qAVIBg9CqmUYjmQIhgij9U5MFvrqkUL5FbtyyzZuOeOt0zdeRe4UY7ct+A==",
+      "license": "MIT",
+      "dependencies": {
+        "call-bind-apply-helpers": "^1.0.1",
+        "es-errors": "^1.3.0",
+        "gopd": "^1.2.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
     "node_modules/entities": {
       "version": "4.5.0",
       "resolved": "https://registry.npmjs.org/entities/-/entities-4.5.0.tgz",
@@ -2028,14 +2094,10 @@
       }
     },
     "node_modules/es-define-property": {
-      "version": "1.0.0",
+      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/es-define-property/-/es-define-property-1.0.0.tgz",
+      "resolved": "https://registry.npmjs.org/es-define-property/-/es-define-property-1.0.1.tgz",
-      "integrity": "sha512-jxayLKShrEqqzJ0eumQbVhTYQM27CfT1T35+gCgDFoL82JLsXqTJ76zv6A0YLOgEnLUMvLzsDsGIrl8NFpT2gQ==",
+      "integrity": "sha512-e3nRfgfUZ4rNGL232gUgX06QNyyez04KdjFrF+LTRoOXmrOgFKDg4BCdsjW8EnT69eqdYGmRpJwiPVYNrCaW3g==",
-      "dev": true,
       "license": "MIT",
-      "dependencies": {
-        "get-intrinsic": "^1.2.4"
-      },
       "engines": {
         "node": ">= 0.4"
       }
@@ -2044,17 +2106,15 @@
       "version": "1.3.0",
       "resolved": "https://registry.npmjs.org/es-errors/-/es-errors-1.3.0.tgz",
       "integrity": "sha512-Zf5H2Kxt2xjTvbJvP2ZWLEICxA6j+hAmMzIlypy4xcBg1vKVnx89Wy0GbS+kf5cwCVFFzdCFh2XSCFNULS6csw==",
-      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">= 0.4"
       }
     },
     "node_modules/es-object-atoms": {
-      "version": "1.0.0",
+      "version": "1.1.1",
-      "resolved": "https://registry.npmjs.org/es-object-atoms/-/es-object-atoms-1.0.0.tgz",
+      "resolved": "https://registry.npmjs.org/es-object-atoms/-/es-object-atoms-1.1.1.tgz",
-      "integrity": "sha512-MZ4iQ6JwHOBQjahnjwaC1ZtIBH+2ohjamzAO3oaHcXYup7qxjF2fixyH+Q71voWHeOkI2q/TnJao/KfXYIZWbw==",
+      "integrity": "sha512-FGgH2h8zKNim9ljj7dankFPcICIK9Cp5bm+c2gQSYePhpaG5+esrLODihIorn+Pe6FGJzWhXQotPv73jTaldXA==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "es-errors": "^1.3.0"
@@ -2064,15 +2124,15 @@
       }
     },
     "node_modules/es-set-tostringtag": {
-      "version": "2.0.3",
+      "version": "2.1.0",
-      "resolved": "https://registry.npmjs.org/es-set-tostringtag/-/es-set-tostringtag-2.0.3.tgz",
+      "resolved": "https://registry.npmjs.org/es-set-tostringtag/-/es-set-tostringtag-2.1.0.tgz",
-      "integrity": "sha512-3T8uNMC3OQTHkFUsFq8r/BwAXLHvU/9O9mE0fBc/MY5iq/8H7ncvO947LmYA6ldWw9Uh8Yhf25zu6n7nML5QWQ==",
+      "integrity": "sha512-j6vWzfrGVfyXxge+O0x5sh6cvxAog0a/4Rdd2K36zCMV5eJ+/+tOAngRO8cODMNWbVRdVlmGZQL2YS3yR8bIUA==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
-        "get-intrinsic": "^1.2.4",
+        "es-errors": "^1.3.0",
+        "get-intrinsic": "^1.2.6",
         "has-tostringtag": "^1.0.2",
-        "hasown": "^2.0.1"
+        "hasown": "^2.0.2"
       },
       "engines": {
         "node": ">= 0.4"
@@ -2851,6 +2911,26 @@
       "dev": true,
       "license": "ISC"
     },
+    "node_modules/follow-redirects": {
+      "version": "1.15.11",
+      "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.15.11.tgz",
+      "integrity": "sha512-deG2P0JfjrTxl50XGCDyfI97ZGVCxIpfKYmfyrQ54n5FO/0gfIES8C/Psl6kWVDolizcaaxZJnTS0QSMxvnsBQ==",
+      "funding": [
+        {
+          "type": "individual",
+          "url": "https://github.com/sponsors/RubenVerborgh"
+        }
+      ],
+      "license": "MIT",
+      "engines": {
+        "node": ">=4.0"
+      },
+      "peerDependenciesMeta": {
+        "debug": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/for-each": {
       "version": "0.3.3",
       "resolved": "https://registry.npmjs.org/for-each/-/for-each-0.3.3.tgz",
@@ -2861,6 +2941,22 @@
         "is-callable": "^1.1.3"
       }
     },
+    "node_modules/form-data": {
+      "version": "4.0.5",
+      "resolved": "https://registry.npmjs.org/form-data/-/form-data-4.0.5.tgz",
+      "integrity": "sha512-8RipRLol37bNs2bhoV67fiTEvdTrbMUYcFTiy3+wuuOnUog2QBHCZWXDRijWQfAkhBj2Uf5UnVaiWwA5vdd82w==",
+      "license": "MIT",
+      "dependencies": {
+        "asynckit": "^0.4.0",
+        "combined-stream": "^1.0.8",
+        "es-set-tostringtag": "^2.1.0",
+        "hasown": "^2.0.2",
+        "mime-types": "^2.1.12"
+      },
+      "engines": {
+        "node": ">= 6"
+      }
+    },
     "node_modules/fs.realpath": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/fs.realpath/-/fs.realpath-1.0.0.tgz",
@@ -2886,7 +2982,6 @@
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.2.tgz",
       "integrity": "sha512-7XHNxH7qX9xG5mIwxkhumTox/MIRNcOgDrxWsMt2pAr23WHp6MrRlN7FBSFpCpr+oVO0F744iUgR82nJMfG2SA==",
-      "dev": true,
       "license": "MIT",
       "funding": {
         "url": "https://github.com/sponsors/ljharb"
@@ -2922,17 +3017,21 @@
       }
     },
     "node_modules/get-intrinsic": {
-      "version": "1.2.4",
+      "version": "1.3.0",
-      "resolved": "https://registry.npmjs.org/get-intrinsic/-/get-intrinsic-1.2.4.tgz",
+      "resolved": "https://registry.npmjs.org/get-intrinsic/-/get-intrinsic-1.3.0.tgz",
-      "integrity": "sha512-5uYhsJH8VJBTv7oslg4BznJYhDoRI6waYCxMmCdnTrcCrHA/fCFKoTFz2JKKE0HdDFUF7/oQuhzumXJK7paBRQ==",
+      "integrity": "sha512-9fSjSaos/fRIVIp+xSJlE6lfwhES7LNtKaCBIamHsjr2na1BiABJPo0mOjjz8GJDURarmCPGqaiVg5mfjb98CQ==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
+        "call-bind-apply-helpers": "^1.0.2",
+        "es-define-property": "^1.0.1",
         "es-errors": "^1.3.0",
+        "es-object-atoms": "^1.1.1",
         "function-bind": "^1.1.2",
-        "has-proto": "^1.0.1",
+        "get-proto": "^1.0.1",
-        "has-symbols": "^1.0.3",
+        "gopd": "^1.2.0",
-        "hasown": "^2.0.0"
+        "has-symbols": "^1.1.0",
+        "hasown": "^2.0.2",
+        "math-intrinsics": "^1.1.0"
       },
       "engines": {
         "node": ">= 0.4"
@@ -2941,6 +3040,19 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/get-proto": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/get-proto/-/get-proto-1.0.1.tgz",
+      "integrity": "sha512-sTSfBjoXBp89JvIKIefqw7U2CCebsc74kiY6awiGogKtoSGbgjYE/G/+l9sF3MWFPNc9IcoOC4ODfKHfxFmp0g==",
+      "license": "MIT",
+      "dependencies": {
+        "dunder-proto": "^1.0.1",
+        "es-object-atoms": "^1.0.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
     "node_modules/get-symbol-description": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/get-symbol-description/-/get-symbol-description-1.0.2.tgz",
@@ -3041,13 +3153,12 @@
       }
     },
     "node_modules/gopd": {
-      "version": "1.0.1",
+      "version": "1.2.0",
-      "resolved": "https://registry.npmjs.org/gopd/-/gopd-1.0.1.tgz",
+      "resolved": "https://registry.npmjs.org/gopd/-/gopd-1.2.0.tgz",
-      "integrity": "sha512-d65bNlIadxvpb/A2abVdlqKqV563juRnZ1Wtk6s1sIR8uNsXR70xqIzVqxVf1eTqDunwT2MkczEeaezCKTZhwA==",
+      "integrity": "sha512-ZUKRh6/kUFoAiTAtTYPZJ3hw9wNxx+BIBOijnlG9PnrJsCcSjs1wyyD6vJpaYtgnzDrKYRSqf3OO6Rfa93xsRg==",
-      "dev": true,
       "license": "MIT",
-      "dependencies": {
+      "engines": {
-        "get-intrinsic": "^1.1.3"
+        "node": ">= 0.4"
       },
       "funding": {
         "url": "https://github.com/sponsors/ljharb"
@@ -3107,10 +3218,9 @@
       }
     },
     "node_modules/has-symbols": {
-      "version": "1.0.3",
+      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/has-symbols/-/has-symbols-1.0.3.tgz",
+      "resolved": "https://registry.npmjs.org/has-symbols/-/has-symbols-1.1.0.tgz",
-      "integrity": "sha512-l3LCuF6MgDNwTDKkdYGEihYjt5pRPbEg46rtlmnSPlUbgmB8LOIrKJbYYFBSbnPaJexMKtiPO8hmeRjRz2Td+A==",
+      "integrity": "sha512-1cDNdwJ2Jaohmb3sg4OmKaMBwuC48sYni5HUw2DvsC8LjGTLK9h+eb1X6RyuOHe4hT0ULCW68iomhjUoKUqlPQ==",
-      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">= 0.4"
@@ -3123,7 +3233,6 @@
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/has-tostringtag/-/has-tostringtag-1.0.2.tgz",
       "integrity": "sha512-NqADB8VjPFLM2V0VvHUewwwsw0ZWBaIdgo+ieHtK3hasLz4qeCRjYcqfB6AQrBggRKppKF8L52/VqdVsO47Dlw==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "has-symbols": "^1.0.3"
@@ -3139,7 +3248,6 @@
       "version": "2.0.2",
       "resolved": "https://registry.npmjs.org/hasown/-/hasown-2.0.2.tgz",
       "integrity": "sha512-0hJU9SCPvmMzIBdZFqNPXWa6dqh7WdH0cII9y+CyS8rG3nL48Bclra9HmKhVVUHyPWNH5Y7xDwAB7bfgSjkUMQ==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "function-bind": "^1.1.2"
@@ -3721,6 +3829,15 @@
         "node": ">=16.14.0"
       }
     },
+    "node_modules/math-intrinsics": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/math-intrinsics/-/math-intrinsics-1.1.0.tgz",
+      "integrity": "sha512-/IXtbwEk5HTPyEwyKX6hGkYXxM9nbj64B+ilVJnC/R6B0pH5G4V3b0pVbL7DBj4tkhBAppbQUlf6F6Xl9LHu1g==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
     "node_modules/merge2": {
       "version": "1.4.1",
       "resolved": "https://registry.npmjs.org/merge2/-/merge2-1.4.1.tgz",
@@ -3745,6 +3862,27 @@
         "node": ">=8.6"
       }
     },
+    "node_modules/mime-db": {
+      "version": "1.52.0",
+      "resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.52.0.tgz",
+      "integrity": "sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/mime-types": {
+      "version": "2.1.35",
+      "resolved": "https://registry.npmjs.org/mime-types/-/mime-types-2.1.35.tgz",
+      "integrity": "sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw==",
+      "license": "MIT",
+      "dependencies": {
+        "mime-db": "1.52.0"
+      },
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
     "node_modules/minimatch": {
       "version": "3.1.2",
       "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.1.2.tgz",
@@ -4206,6 +4344,12 @@
         "node": ">= 0.8.0"
       }
     },
+    "node_modules/proxy-from-env": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/proxy-from-env/-/proxy-from-env-1.1.0.tgz",
+      "integrity": "sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg==",
+      "license": "MIT"
+    },
     "node_modules/punycode": {
       "version": "2.3.1",
       "resolved": "https://registry.npmjs.org/punycode/-/punycode-2.3.1.tgz",

package.json

@@ -9,6 +9,7 @@
   },
   "dependencies": {
     "@mdi/font": "7.4.47",
+    "axios": "^1.13.5",
     "core-js": "^3.37.1",
     "roboto-fontface": "*",
     "vee-validate": "^4.14.6",

src/assets/icons/tryton-icon.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="256" height="256" version="1.0"><path d="M256 196.25c0 40.122-21.534 60.038-64.603 59.747H67.495C22.498 255.997 0 236.663 0 197.994V60.184C0 20.06 22.016 0 66.049 0h124.384C234.144 0 256 20.206 256 60.62v135.63" style="text-align:start;line-height:125%;-inkscape-font-specification:Kimberley" font-size="108.872" font-weight="400" fill="#1b2019" font-family="Kimberley"/><path d="M19.006 169.515c5.949-3.124 17.076 1.966 22.115 10.12 4.518 7.31 27.406 14.114 35.516 10.558 5.412-2.372 6.779-5.378 7.202-15.844.798-19.685-3.636-35.098-17.99-62.536-7.205-13.77-14.753-29-16.775-33.835C47.052 73.14 41.601 64.6 36.961 59c-9.876-11.91-10.183-15.164-2.078-22.074C47.02 26.581 67.52 43.327 63.095 59.97c-2.178 8.191 2.003 20.14 15.85 45.295 16.431 29.85 33.084 41.94 43.03 31.243 2.57-2.763 5.759-18.178 8.698-42.04 4.421-35.889 4.399-38.037-.47-45.252-8.418-12.475-.48-25.42 12.84-20.943 13.43 4.513 22.192 22.778 13.775 28.714-3.735 2.633-4.942 10.29-6.636 42.097-2.173 40.785-.53 51.7 8.609 57.187 8.121 4.876 10.946 3.885 28.067-9.889 18.167-14.612 25.636-24.069 26.115-33.067.446-8.37 5.992-12.847 14.832-11.972 5.635.56 8.15 2.41 11.3 8.312 6.431 12.053 4.589 19.71-5.212 21.667-7.987 1.592-21.708 19.27-42.815 55.16-22.288 37.897-27.173 41.845-52.152 42.147-10.268.123-24.634-3.295-58.453-13.914-24.663-7.746-48.043-14.468-51.957-14.943-14.142-1.708-21.187-24.12-9.51-30.257z" fill="#ededed"/></svg>

src/components/AdminPurchase.vue

@@ -16,7 +16,7 @@
                 required
                 class="mr-4"
             ></v-autocomplete>
-            <v-btn color="primary" @click="openModal">Agregar Cliente</v-btn>
+            <!-- <v-btn color="primary" @click="openModal">Agregar Cliente</v-btn> -->
             <CreateCustomerModal ref="customerModal" @customerCreated="handleNewCustomer"/>
       </v-col>
       <v-col lg="4">

src/components/Login.vue

@@ -0,0 +1,42 @@
+<script setup>
+  import { ref } from 'vue';
+  import AuthService from '@/services/auth';
+  import { inject } from 'vue';
+
+  const username = ref('');
+  const password = ref('');
+  const error = ref('');
+
+  async function login() {
+    try {
+      await AuthService.login({ username: username.value, password: password.value });
+      // opcional: redirigir al dashboard
+    } catch (e) {
+      error.value = e.message;
+    }
+  }
+
+  // ejemplo de llamada a clientes (requiere token)
+  const api = inject('api');
+
+  async function loadCustomers() {
+    try {
+      const data = await api.getCustomers();
+      console.log(data);
+    } catch (e) {
+      console.error(e);
+    }
+  }
+</script>
+
+<template>
+  <h1>Login</h1>
+  <v-form @submit.prevent="login">
+    <v-text-field v-model="username" label="Usuario" required />
+    <v-text-field v-model="password" label="Contraseña" type="password" required />
+    <v-btn type="submit">Entrar</v-btn>
+    <v-alert v-if="error" type="error">{{ error }}</v-alert>
+  </v-form>
+
+  <v-btn @click="loadCustomers">Cargar clientes</v-btn>
+</template>

src/components/NavBar.vue

@@ -40,6 +40,7 @@
 </template>
 
 <script>
+ import trytonIcon from '../assets/icons/tryton-icon.svg';
  export default {
      name: 'NavBar',
      data: () => ({
@@ -55,6 +56,9 @@
              { title: 'Cuadres de tarro', route: '/cuadres_de_tarro', icon: 'mdi-chart-bar'},
              { title: 'CSV Tryton', route: '/ventas_para_tryton', icon: 'mdi-file-table'},
              { title: 'Compra adm', route: '/compra_admin', icon: 'mdi-cart'},
+             { title: 'Actualizar Productos De Tryton', route: '/sincronizar_productos_tryton', icon: 'trytonIcon'},
+             { title: 'Actualizar Clientes De Tryton', route: '/sincronizar_clientes_tryton', icon: 'trytonIcon'},
+             { title: 'Actualizar Ventas Tryton', route: '/sincronizar_ventas_tryton', icon: 'trytonIcon'}
          ],
      }),
      watch: {

src/components/Purchase.vue

@@ -16,7 +16,7 @@
                 required
                 class="mr-4"
             ></v-autocomplete>
-            <v-btn color="primary" @click="openModal">Agregar Cliente</v-btn>
+            <!--<v-btn color="primary" @click="openModal">Agregar Cliente</v-btn>-->
             <CreateCustomerModal ref="customerModal" @customerCreated="handleNewCustomer"/>
       </v-col>
       <v-col lg="4">

src/pages/autenticarse.vue

@@ -0,0 +1,7 @@
+<template>
+  <Login />
+</template>
+
+<script setup>
+//
+</script>

src/pages/login.vue

@@ -0,0 +1,7 @@
+<template>
+  <Login />
+</template>
+
+<script setup>
+//
+</script>

src/pages/sincronizar_clientes_tryton.vue

@@ -0,0 +1,79 @@
+<template>
+  <div>
+    <CodeDialog @code-verified="(verified) => showComponent = verified"/>
+  </div>
+  <v-container class="fill-height d-flex align-center justify-center">
+    <v-card class="pa-6" max-width="600" elevation="4">
+      <v-card-title class="text-h5 font-weight-bold text-center">
+        🔄 Sincronización de Clientes
+      </v-card-title>
+
+      <v-card-text>
+        <p>
+          Esta acción sincronizará los <strong>clientes</strong> desde el sistema
+          <strong>Tryton</strong> hacia la plataforma.
+        </p>
+        <v-alert type="warning" dense border="start" border-color="warning">
+          <strong>Advertencia:</strong> Este proceso podría tardar varios minutos
+          y reemplazar datos existentes en la plataforma.  
+          Asegúrese de que la información en Tryton esté actualizada antes de
+          continuar.
+        </v-alert>
+        <p class="mt-4">
+          Durante la sincronización, no se podrán modificar productos en la
+          plataforma para evitar conflictos.
+        </p>
+      </v-card-text>
+
+      <v-card-actions class="justify-center">
+        <v-btn color="primary" @click="startSync">
+          Iniciar Sincronización
+        </v-btn>
+        <v-btn text @click="$router.push('/')">
+          Cancelar
+        </v-btn>
+      </v-card-actions>
+    </v-card>
+
+
+    <v-data-table :items="checked_tryton_parties"></v-data-table>
+    <v-data-table :items="created_customers"></v-data-table>
+    <v-data-table :items="failed_parties"></v-data-table>
+    <v-data-table :items="untouched_customers"></v-data-table>
+  </v-container>
+</template>
+
+<script>
+  import CodeDialog from '../components/CodeDialog.vue'
+  import { inject } from 'vue';
+
+  export default {
+    name: 'CustomersFromTryton',
+    data() {
+      return {
+        api: inject('api'),
+        checked_tryton_parties: [],
+        created_customers: [],
+        failed_parties: [],
+        untouched_customers: [],
+        updated_customers: [],
+      }
+    },
+    methods: {
+      startSync() {
+        this.api.getCustomersFromTryton()
+          .then(response => {
+            // Manejar la respuesta exitosa
+            this.checked_tryton_parties = response.checked_tryton_parties.map(id => ({ id }));
+            this.created_customers = response.created_customers.map(id => ({ id }));
+            this.failed_parties = response.failed_parties.map(id => ({ id }));
+            this.untouched_customers = response.untouched_customers.map(id => ({ id }));
+          })
+          .catch(error => {
+            // Manejar el error
+            console.error("Error al sincronizar clientes:", error);
+          });
+      }
+    }
+  }
+ </script>

src/pages/sincronizar_productos_tryton.vue

@@ -0,0 +1,60 @@
+<template>
+  <div>
+    <CodeDialog @code-verified="(verified) => showComponent = verified"/>
+  </div>
+  <v-container class="fill-height d-flex align-center justify-center">
+    <v-card class="pa-6" max-width="600" elevation="4">
+      <v-card-title class="text-h5 font-weight-bold text-center">
+        🔄 Sincronización de Productos
+      </v-card-title>
+
+      <v-card-text>
+        <p>
+          Esta acción sincronizará los <strong>productos</strong> desde el sistema
+          <strong>Tryton</strong> hacia la plataforma.
+        </p>
+        <v-alert type="warning" dense border="start" border-color="warning">
+          <strong>Advertencia:</strong> Este proceso podría tardar varios minutos
+          y reemplazar datos existentes en la plataforma.  
+          Asegúrese de que la información en Tryton esté actualizada antes de
+          continuar.
+        </v-alert>
+        <p class="mt-4">
+          Durante la sincronización, no se podrán modificar productos en la
+          plataforma para evitar conflictos.
+        </p>
+      </v-card-text>
+
+      <v-card-actions class="justify-center">
+        <v-btn color="primary" @click="startSync">
+          Iniciar Sincronización
+        </v-btn>
+        <v-btn text @click="$router.push('/')">
+          Cancelar
+        </v-btn>
+      </v-card-actions>
+    </v-card>
+    <v-data-table :items="productos_tryton"></v-data-table>
+  </v-container>
+</template>
+
+<script>
+  import CodeDialog from '../components/CodeDialog.vue'
+  import { inject } from 'vue';
+
+  export default {
+    name: 'ProductsFromTryton',
+    data() {
+      return {
+        api: inject('api'),
+        productos_tryton: [{}],
+        showComponent: false,
+      }
+    },
+    methods: {
+      startSync() {
+        this.productos_tryton = this.api.getProductsFromTryton()
+      }
+    }
+  }
+ </script>

src/pages/sincronizar_ventas_tryton.vue

@@ -0,0 +1,63 @@
+<template>
+  <div>
+    <CodeDialog @code-verified="(verified) => showComponent = verified"/>
+  </div>
+  <v-container class="fill-height d-flex align-center justify-center">
+    <v-card class="pa-6" max-width="600" elevation="4">
+      <v-card-title class="text-h5 font-weight-bold text-center">
+        🔄 Sincronización de Ventas
+      </v-card-title>
+
+      <v-card-text>
+        <p>
+          Esta acción sincronizará las <strong>ventas</strong> desde el sistema
+          <strong>Tryton</strong> hacia la plataforma.
+        </p>
+        <v-alert type="warning" dense border="start" border-color="warning">
+          <strong>Advertencia:</strong> Este proceso podría tardar varios minutos
+          y reemplazar datos existentes en la plataforma.  
+          Asegúrese de que la información en Tryton esté actualizada antes de
+          continuar.
+        </v-alert>
+      </v-card-text>
+
+      <v-card-actions class="justify-center">
+        <v-btn color="primary" @click="startSync">
+          Iniciar Sincronización
+        </v-btn>
+        <v-btn text @click="$router.push('/')">
+          Cancelar
+        </v-btn>
+      </v-card-actions>
+    </v-card>
+    <v-data-table :items="ventas_tryton_failed"></v-data-table>
+    <v-data-table :items="ventas_tryton_successful"></v-data-table>
+  </v-container>
+</template>
+<script>
+  import CodeDialog from '../components/CodeDialog.vue';
+  import { inject } from 'vue';
+
+  export default {
+    name: 'SalesToTryton',
+    data() {
+      return {
+        api: inject('api'),
+        ventas_tryton: [],
+        showComponent: false,
+      }
+    },
+    methods: {
+      startSync() {
+        this.api.sendSalesToTryton()
+          .then(response => {
+            this.ventas_tryton_failed = response.failed.map(id => ({ id }));
+            this.ventas_tryton_successful = response.successful.map(id => ({ id }));
+          })
+          .catch(error => {
+            console.error("Error al sincronizar las ventas", error);
+          });
+      }
+    }
+  }
+</script>

src/services/api-implementation.js

@@ -3,7 +3,7 @@ import Api from './api';
 
 class ApiImplementation {
   constructor() {
-    const implementation = process.env.API_IMPLEMENTATION;
+    const implementation = import.meta.env.VITE_API_IMPLEMENTATION;
     let apiImplementation;
     if (implementation === 'django') {
       apiImplementation = new DjangoApi();

src/services/api.js

@@ -50,6 +50,18 @@ class Api {
   getCSVForTryton() {
     return this.apiImplementation.getCSVForTryton();
   }
+
+  getProductsFromTryton() {
+    return this.apiImplementation.getProductsFromTryton();
+  }
+
+  getCustomersFromTryton() {
+    return this.apiImplementation.getCustomersFromTryton();
+  }
+
+  sendSalesToTryton(){
+    return this.apiImplementation.sendSalesToTryton();
+  }
 }
 
 export default Api;

src/services/auth.js

@@ -0,0 +1,49 @@
+class AuthService {
+  static TOKEN_KEY = 'access_token';
+  static REFRESH_KEY = 'refresh_token';
+
+  static login(credentials) {
+    const url = `${import.meta.env.VITE_DJANGO_BASE_URL}/api/token/`;
+    return fetch(url, {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify(credentials),
+    })
+      .then(r => r.json())
+      .then(data => {
+        localStorage.setItem(this.TOKEN_KEY, data.access);
+        localStorage.setItem(this.REFRESH_KEY, data.refresh);
+        return data;
+      });
+  }
+
+  static getAccessToken() {
+    return localStorage.getItem(this.TOKEN_KEY);
+  }
+
+  static getRefreshToken() {
+    return localStorage.getItem(this.REFRESH_KEY);
+  }
+
+  static async refresh() {
+    const refresh = this.getRefreshToken();
+    if (!refresh) throw new Error('No refresh token');
+
+    const url = `${import.meta.env.VITE_DJANGO_BASE_URL}/api/token/refresh/`;
+    const resp = await fetch(url, {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ refresh }),
+    });
+    const data = await resp.json();
+    localStorage.setItem(this.TOKEN_KEY, data.access);
+    return data.access;
+  }
+
+  static logout() {
+    localStorage.removeItem(this.TOKEN_KEY);
+    localStorage.removeItem(this.REFRESH_KEY);
+  }
+}
+
+export default AuthService;

src/services/django-api.js

@@ -1,6 +1,36 @@
+import AuthService from '@/services/auth';
+
 class DjangoApi {
   constructor() {
-    this.base = process.env.DJANGO_BASE_URL;
+    this.base = import.meta.env.VITE_DJANGO_BASE_URL;
+  }
+
+  _authHeaders() {
+    const token = AuthService.getAccessToken();
+    return token ? { Authorization: `Bearer ${token}` } : {};
+  }
+
+  _handleResponse(response) {
+    if (!response.ok) {
+      // Si el token ha expirado (401) intentamos refrescar y re‑intentar
+      if (response.status === 401) {
+        return AuthService.refresh().then(newToken => {
+          // volver a ejecutar la petición original con el nuevo token
+          const retryHeaders = {
+            ...response.headers,
+            Authorization: `Bearer ${newToken}`,
+          };
+          // aquí usamos fetch de nuevo con los mismos parámetros
+          // (para simplificar, delegamos a getRequest/postRequest)
+          // En la práctica, extrae la lógica a una función reutilizable.
+          throw new Error('Retry logic should be implemented here');
+        });
+      }
+      return response.json().then(err => {
+        throw new Error(`Error ${response.status}: ${err.detail || response.statusText}`);
+      });
+    }
+    return response.json();
   }
 
   getCustomers() {
@@ -63,43 +93,39 @@ class DjangoApi {
     return this.getRequest(url);
   }
 
+  getProductsFromTryton(){
+    const url = this.base + '/don_confiao/api/importar_productos_de_tryton';
+    return this.postRequest(url, {});
+  }
+
+  getCustomersFromTryton(){
+    const url = this.base + '/don_confiao/api/importar_clientes_de_tryton';
+    return this.postRequest(url, {});
+  }
+
+  sendSalesToTryton(){
+    const url = this.base + '/don_confiao/api/enviar_ventas_a_tryton';
+    return this.postRequest(url, {});
+  }
+
   getRequest(url) {
-    return new Promise ((resolve, reject) => {
+    return fetch(url, {
-      fetch(url)
+      headers: {
-        .then(response => response.json())
+        'Content-Type': 'application/json',
-        .then(data => {
+        ...this._authHeaders(),
-          resolve(data);
+      },
-        })
+    }).then(this._handleResponse);
-        .catch(error => {
-          reject(error);
-        });
-    });
   }
 
   postRequest(url, content) {
-    return new Promise((resolve, reject) => {
+    return fetch(url, {
-      fetch(url, {
+      method: 'POST',
-        method: 'POST',
+      headers: {
-        headers: {
+        'Content-Type': 'application/json',
-          'Content-Type': 'application/json',
+        ...this._authHeaders(),
-        },
+      },
-        body: JSON.stringify(content)
+      body: JSON.stringify(content),
-      })
+    }).then(this._handleResponse);
-        .then(response => {
-          if (!response.ok) {
-            reject(new Error(`Error ${response.status}: ${response.statusText}`));
-          } else {
-            response.json().then(data => {
-              if (!data) {
-                reject(new Error('La respuesta no es un JSON válido'));
-              } else {
-                resolve(data);
-              }
-            });
-          }
-        })
-        .catch(error => reject(error));
-    });
   }
 }
 

vite.config.mjs

@@ -11,6 +11,16 @@ import Vuetify, { transformAssetUrls } from 'vite-plugin-vuetify'
 import { defineConfig } from 'vite'
 import { fileURLToPath, URL } from 'node:url'
 
+const aliasMap = {
+   '@': fileURLToPath(new URL('./src', import.meta.url)),
+};
+
+console.log('🔧 Alias configurado:');
+console.log(aliasMap);          // <-- se muestra en la terminal al iniciar Vite
+console.log('Resolución real de "@":', aliasMap['@']);
+
+
+
 // https://vitejs.dev/config/
 export default defineConfig({
   plugins: [
@@ -47,12 +57,10 @@ export default defineConfig({
     }),
   ],
   define: { 'process.env': {
-    API_IMPLEMENTATION: 'django',
-    DJANGO_BASE_URL: 'http://localhost:7000'
   } },
   resolve: {
     alias: {
-      '@': fileURLToPath(new URL('./src', import.meta.url))
+      '@': fileURLToPath(new URL('./src', import.meta.url)),
     },
     extensions: [
       '.js',