Feature/implement login insights

.hintrc

@@ -0,0 +1,17 @@
+{
+  "extends": [
+    "development"
+  ],
+  "hints": {
+    "compat-api/css": [
+      "default",
+      {
+        "ignore": [
+          "scrollbar-color",
+          "scrollbar-width",
+          "scrollbar-width: thin"
+        ]
+      }
+    ]
+  }
+}

README.md

@@ -54,6 +54,8 @@ Durante el desarrollo del proyecto, se utilizaron las siguientes librerías:
 ```sh
 npm install react-router-dom
 npm install axios
+npm install d3
+npm install jwt-decode
 npm install framer-motion
 npm install react-datepicker
 npm install date-fns

package.json

@@ -8,6 +8,8 @@
     "@testing-library/react": "^16.2.0",
     "@testing-library/user-event": "^13.5.0",
     "axios": "^1.8.4",
+    "d3": "^7.9.0",
+    "jwt-decode": "^4.0.0",
     "framer-motion": "^12.6.2",
     "react": "^19.0.0",
     "date-fns": "^4.1.0",
@@ -17,6 +19,7 @@
     "react-router-dom": "^7.4.0",
     "react-scripts": "^5.0.1",
     "styled-components": "^6.1.16",
+    "styled-system": "^5.1.5",
     "web-vitals": "^2.1.4"
   },
   "scripts": {

src/App.css

@@ -94,21 +94,42 @@ ul {
 }
 
 .content .panel .header {
+  display: flex;
+  flex-direction: row;
+  justify-content: flex-start;
+  align-items: center;
+  height: 20%;
+  margin-right: 5%;
+}
+
+.content .panel .header .info {
   display: flex;
   flex-direction: column;
-  justify-content: center;
+  gap: 5px;
   width: 100%;
-  height: 20%;
 }
 
-.content .panel .header .title {
+.content .panel .header .info .title {
   font-weight: bold;
 }
 
-.content .panel .header .title, .content .panel .header .greetings {
+.content .panel .header .info .title, .content .panel .header .greetings {
   font-size: 21px;
 }
 
+.content .panel .header .user-info {
+  display: flex;
+  flex-direction: row;
+  gap: 20px;
+  width: 100%;
+  align-items: center;
+  justify-content: flex-end;
+}
+
+.content .panel .header .user-info span {
+  font-size: 18px;
+}
+
 .content .panel .container {
   flex: 1;
   display: flex;