Initial commit

frontend/.gitignore

@@ -0,0 +1,352 @@
+# ---> VisualStudioCode
+.vscode/*
+!.vscode/settings.json
+!.vscode/tasks.json
+!.vscode/launch.json
+!.vscode/extensions.json
+!.vscode/*.code-snippets
+
+# Local History for Visual Studio Code
+.history/
+
+# Built Visual Studio Code Extensions
+*.vsix
+
+# ---> Node
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+lerna-debug.log*
+.pnpm-debug.log*
+
+# Diagnostic reports (https://nodejs.org/api/report.html)
+report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json
+
+# Runtime data
+pids
+*.pid
+*.seed
+*.pid.lock
+
+# Directory for instrumented libs generated by jscoverage/JSCover
+lib-cov
+
+# Coverage directory used by tools like istanbul
+coverage
+*.lcov
+
+# nyc test coverage
+.nyc_output
+
+# Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files)
+.grunt
+
+# Bower dependency directory (https://bower.io/)
+bower_components
+
+# node-waf configuration
+.lock-wscript
+
+# Compiled binary addons (https://nodejs.org/api/addons.html)
+build/Release
+
+# Dependency directories
+node_modules/
+jspm_packages/
+
+# Snowpack dependency directory (https://snowpack.dev/)
+web_modules/
+
+# TypeScript cache
+*.tsbuildinfo
+
+# Optional npm cache directory
+.npm
+
+# Optional eslint cache
+.eslintcache
+
+# Optional stylelint cache
+.stylelintcache
+
+# Microbundle cache
+.rpt2_cache/
+.rts2_cache_cjs/
+.rts2_cache_es/
+.rts2_cache_umd/
+
+# Optional REPL history
+.node_repl_history
+
+# Output of 'npm pack'
+*.tgz
+
+# Yarn Integrity file
+.yarn-integrity
+
+# dotenv environment variable files
+.env
+.env.development.local
+.env.test.local
+.env.production.local
+.env.local
+
+# parcel-bundler cache (https://parceljs.org/)
+.cache
+.parcel-cache
+
+# Next.js build output
+.next
+out
+
+# Nuxt.js build / generate output
+.nuxt
+dist
+
+# Gatsby files
+.cache/
+# Comment in the public line in if your project uses Gatsby and not Next.js
+# https://nextjs.org/blog/next-9-1#public-directory-support
+# public
+
+# vuepress build output
+.vuepress/dist
+
+# vuepress v2.x temp and cache directory
+.temp
+.cache
+
+# vitepress build output
+**/.vitepress/dist
+
+# vitepress cache directory
+**/.vitepress/cache
+
+# Docusaurus cache and generated files
+.docusaurus
+
+# Serverless directories
+.serverless/
+
+# FuseBox cache
+.fusebox/
+
+# DynamoDB Local files
+.dynamodb/
+
+# TernJS port file
+.tern-port
+
+# Stores VSCode versions used for testing VSCode extensions
+.vscode-test
+
+# yarn v2
+.yarn/cache
+.yarn/unplugged
+.yarn/build-state.yml
+.yarn/install-state.gz
+.pnp.*
+
+# ---> Python
+# Byte-compiled / optimized / DLL files
+__pycache__/
+*.py[cod]
+*$py.class
+
+# C extensions
+*.so
+
+# Distribution / packaging
+.Python
+build/
+develop-eggs/
+dist/
+downloads/
+eggs/
+.eggs/
+lib/
+lib64/
+parts/
+sdist/
+var/
+wheels/
+share/python-wheels/
+*.egg-info/
+.installed.cfg
+*.egg
+MANIFEST
+
+# PyInstaller
+#  Usually these files are written by a python script from a template
+#  before PyInstaller builds the exe, so as to inject date/other infos into it.
+*.manifest
+*.spec
+
+# Installer logs
+pip-log.txt
+pip-delete-this-directory.txt
+
+# Unit test / coverage reports
+htmlcov/
+.tox/
+.nox/
+.coverage
+.coverage.*
+.cache
+nosetests.xml
+coverage.xml
+*.cover
+*.py,cover
+.hypothesis/
+.pytest_cache/
+cover/
+
+# Translations
+*.mo
+*.pot
+
+# Django stuff:
+*.log
+local_settings.py
+db.sqlite3
+db.sqlite3-journal
+
+# Flask stuff:
+instance/
+.webassets-cache
+
+# Scrapy stuff:
+.scrapy
+
+# Sphinx documentation
+docs/_build/
+
+# PyBuilder
+.pybuilder/
+target/
+
+# Jupyter Notebook
+.ipynb_checkpoints
+
+# IPython
+profile_default/
+ipython_config.py
+
+# pyenv
+#   For a library or package, you might want to ignore these files since the code is
+#   intended to run in multiple environments; otherwise, check them in:
+# .python-version
+
+# pipenv
+#   According to pypa/pipenv#598, it is recommended to include Pipfile.lock in version control.
+#   However, in case of collaboration, if having platform-specific dependencies or dependencies
+#   having no cross-platform support, pipenv may install dependencies that don't work, or not
+#   install all needed dependencies.
+#Pipfile.lock
+
+# UV
+#   Similar to Pipfile.lock, it is generally recommended to include uv.lock in version control.
+#   This is especially recommended for binary packages to ensure reproducibility, and is more
+#   commonly ignored for libraries.
+#uv.lock
+
+# poetry
+#   Similar to Pipfile.lock, it is generally recommended to include poetry.lock in version control.
+#   This is especially recommended for binary packages to ensure reproducibility, and is more
+#   commonly ignored for libraries.
+#   https://python-poetry.org/docs/basic-usage/#commit-your-poetrylock-file-to-version-control
+#poetry.lock
+
+# pdm
+#   Similar to Pipfile.lock, it is generally recommended to include pdm.lock in version control.
+#pdm.lock
+#   pdm stores project-wide configurations in .pdm.toml, but it is recommended to not include it
+#   in version control.
+#   https://pdm.fming.dev/latest/usage/project/#working-with-version-control
+.pdm.toml
+.pdm-python
+.pdm-build/
+
+# PEP 582; used by e.g. github.com/David-OConnor/pyflow and github.com/pdm-project/pdm
+__pypackages__/
+
+# Celery stuff
+celerybeat-schedule
+celerybeat.pid
+
+# SageMath parsed files
+*.sage.py
+
+# Environments
+.env
+.venv
+env/
+venv/
+ENV/
+env.bak/
+venv.bak/
+
+# Spyder project settings
+.spyderproject
+.spyproject
+
+# Rope project settings
+.ropeproject
+
+# mkdocs documentation
+/site
+
+# mypy
+.mypy_cache/
+.dmypy.json
+dmypy.json
+
+# Pyre type checker
+.pyre/
+
+# pytype static type analyzer
+.pytype/
+
+# Cython debug symbols
+cython_debug/
+
+# PyCharm
+#  JetBrains specific template is maintained in a separate JetBrains.gitignore that can
+#  be found at https://github.com/github/gitignore/blob/main/Global/JetBrains.gitignore
+#  and can be added to the global gitignore or merged into this file.  For a more nuclear
+#  option (not recommended) you can uncomment the following to ignore the entire idea folder.
+#.idea/
+
+# Ruff stuff:
+.ruff_cache/
+
+# PyPI configuration file
+.pypirc
+
+# 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/index.html

@@ -0,0 +1,13 @@
+<!doctype html>
+<html lang="es">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/png" href="/images/lock.png" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>TOTP Demo</title>
+  </head>
+  <body>
+    <div id="root" class="p-0 m-0"></div>
+    <script type="module" src="/src/main.jsx"></script>
+  </body>
+</html>

frontend/jsconfig.json

@@ -0,0 +1,9 @@
+{
+    "compilerOptions": {
+      "baseUrl": ".",
+      "paths": {
+        "@/*": ["src/*"]
+      }
+    },
+    "include": ["src"]
+  }

frontend/package.json

@@ -0,0 +1,39 @@
+{
+  "name": "miarma-base",
+  "private": true,
+  "version": "1.0.0",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "lint": "eslint .",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "@fortawesome/fontawesome-free": "^7.0.0",
+    "@fortawesome/fontawesome-svg-core": "^7.0.0",
+    "@fortawesome/free-brands-svg-icons": "^7.0.0",
+    "@fortawesome/free-regular-svg-icons": "^7.0.0",
+    "@fortawesome/free-solid-svg-icons": "^7.0.0",
+    "@fortawesome/react-fontawesome": "^0.2.3",
+    "axios": "^1.11.0",
+    "bootstrap": "^5.3.7",
+    "date-fns": "^4.1.0",
+    "framer-motion": "^12.23.12",
+    "react": "^19.1.0",
+    "react-bootstrap": "^2.10.10",
+    "react-dom": "^19.1.0",
+    "react-router-dom": "^7.7.1"
+  },
+  "devDependencies": {
+    "@eslint/js": "^9.30.1",
+    "@types/react": "^19.1.8",
+    "@types/react-dom": "^19.1.6",
+    "@vitejs/plugin-react": "^4.6.0",
+    "electron": "^37.2.5",
+    "eslint": "^9.30.1",
+    "eslint-plugin-react-hooks": "^5.2.0",
+    "eslint-plugin-react-refresh": "^0.4.20",
+    "globals": "^16.3.0",
+    "vite": "^7.0.4"
+  }
+}

frontend/public/config/settings.dev.json

@@ -0,0 +1 @@
+{}

frontend/public/config/settings.prod.json

@@ -0,0 +1 @@
+{}

frontend/src/App.jsx

@@ -0,0 +1,10 @@
+import 'bootstrap/dist/css/bootstrap.min.css'
+import 'bootstrap/dist/js/bootstrap.bundle.min.js'
+
+const App = () => {
+  return (
+    <></>
+  )
+}
+
+export default App

frontend/src/css/index.css

@@ -0,0 +1,131 @@
+/* ================================
+   FUENTES PERSONALIZADAS
+================================== */
+@font-face {
+  font-family: "Open Sans";
+  src: url('/fonts/OpenSans.ttf');
+}
+
+@font-face {
+  font-family: "Product Sans";
+  src: url('/fonts/ProductSansRegular.ttf');
+}
+
+@font-face {
+  font-family: "Product Sans Italic";
+  src: url('/fonts/ProductSansItalic.ttf');
+}
+
+@font-face {
+  font-family: "Product Sans Italic Bold";
+  src: url('/fonts/ProductSansBoldItalic.ttf');
+}
+
+@font-face {
+  font-family: "Product Sans Bold";
+  src: url('/fonts/ProductSansBold.ttf');
+}
+
+/* ================================
+   PALETA DE COLORES
+================================== */
+
+:root {
+  /* Colores base */
+  --bondi-blue-light: #5bc0da;
+  --bondi-blue: #359ebc;
+  --bondi-blue-dark: #0c7fa3;
+  --bondi-blue-darker: #09698a;
+
+  --gun-powder-lighter: #686983;
+  --gun-powder-light: #4e5067;
+  --gun-powder: #3d3c52;
+  --gun-powder-dark: #303145;
+
+  /* 🎨 Fondos */
+  --background-main: var(--gun-powder-dark);
+  --background-alt: var(--gun-powder);
+  --background-card: var(--gun-powder-light);
+  --background-hover: var(--bondi-blue-dark);
+  --background-accent: var(--bondi-blue);
+
+  /* ✍️ Texto */
+  --text-main: #f0f4f8;
+  --text-muted: #c2c6d1;
+  --text-inverted: #0d1117;
+  --text-accent: var(--bondi-blue-light);
+  --text-link: var(--bondi-blue);
+
+  /* 🪞 Bordes */
+  --border-color: #2c2d3e;
+  --border-hover: var(--bondi-blue-dark);
+  --border-accent: var(--bondi-blue);
+
+  /* 💡 Sombras */
+  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.25);
+  --shadow-md: 0 2px 6px rgba(0, 0, 0, 0.35);
+  --shadow-lg: 0 4px 12px rgba(0, 0, 0, 0.45);
+  --shadow-accent: 0 0 12px rgba(53, 158, 188, 0.4);
+
+  /* 🔘 Botones */
+  --button-bg: var(--bondi-blue);
+  --button-bg-hover: var(--bondi-blue-dark);
+  --button-text: #ffffff;
+  --button-disabled: #5f7080;
+
+  /* 🧭 Inputs */
+  --input-bg: var(--gun-powder);
+  --input-border: var(--gun-powder-lighter);
+  --input-border-focus: var(--bondi-blue);
+  --input-text: var(--text-main);
+  --input-placeholder: #a0a4b2;
+
+  /* 🚨 Estados */
+  --success: #4cc9b0;
+  --warning: #f3c969;
+  --error: #e85d75;
+  --info: var(--bondi-blue-light);
+}
+
+/* ================================
+   ESTILOS BASE / RESET SUAVE
+================================== */
+html {
+  font-family: "Open Sans", sans-serif;
+  color: var(--text-main);
+  background-color: var(--background-main);
+  
+}
+
+body {
+  font-family: "Open Sans", sans-serif;
+  color: var(--text-main);
+  background-color: transparent !important;
+}
+
+main {
+  color: var(--text-main);
+  background-color: var(--background-main);
+}
+
+/* Tipografía global */
+div,
+label,
+input,
+p,
+span,
+a,
+button {
+  font-family: "Open Sans", sans-serif;
+  color: var(--text-main);
+}
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  font-family: "Product Sans", sans-serif;
+  color: var(--text-main);
+}

frontend/src/hooks/useData.js

@@ -0,0 +1,130 @@
+import { useState, useEffect, useCallback, useRef } from "react";
+import axios from "axios";
+
+export const useData = (config) => {
+  const [data, setData] = useState(null);
+  const [dataLoading, setLoading] = useState(true);
+  const [dataError, setError] = useState(null);
+  const configRef = useRef();
+
+  useEffect(() => {
+    if (config?.baseUrl) {
+      configRef.current = config;
+    }
+  }, [config]);
+
+  const getAuthHeaders = () => ({
+    "Content-Type": "application/json",
+    "Authorization": `Bearer ${localStorage.getItem("token")}`,
+  });
+
+  const fetchData = useCallback(async () => {
+    const current = configRef.current;
+    if (!current?.baseUrl) return;
+
+    setLoading(true);
+    setError(null);
+
+    try {
+      const response = await axios.get(current.baseUrl, {
+        headers: getAuthHeaders(),
+        params: current.params,
+      });
+      setData(response.data.data);
+    } catch (err) {
+      setError(err.response?.data?.message || err.message);
+    } finally {
+      setLoading(false);
+    }
+  }, []);
+
+  useEffect(() => {
+    if (config?.baseUrl) {
+      fetchData();
+    }
+  }, [config, fetchData]);
+
+  const getData = async (url, params = {}) => {
+    try {
+      const response = await axios.get(url, {
+        headers: getAuthHeaders(),
+        params,
+      });
+      return { data: response.data.data, error: null };
+    } catch (err) {
+      return {
+        data: null,
+        error: err.response?.data?.message || err.message,
+      };
+    }
+  };  
+
+  const postData = async (endpoint, payload) => {
+    const headers = {
+      Authorization: `Bearer ${localStorage.getItem("token")}`,
+      ...(payload instanceof FormData ? {} : { "Content-Type": "application/json" }),
+    };
+    const response = await axios.post(endpoint, payload, { headers });
+    await fetchData();
+    return response.data.data;
+  };
+
+  const postDataValidated = async (endpoint, payload) => {
+    try {
+      const headers = {
+        Authorization: `Bearer ${localStorage.getItem("token")}`,
+        ...(payload instanceof FormData ? {} : { "Content-Type": "application/json" }),
+      };
+      const response = await axios.post(endpoint, payload, { headers });
+      return { data: response.data.data, errors: null };
+    } catch (err) {
+      const raw = err.response?.data?.message;
+      let parsed = {};
+  
+      try {
+        parsed = JSON.parse(raw);
+      } catch {
+        return { data: null, errors: { general: raw || err.message } };
+      }
+  
+      return { data: null, errors: parsed };
+    }
+  };  
+
+  const putData = async (endpoint, payload) => {
+    const response = await axios.put(endpoint, payload, {
+      headers: getAuthHeaders(),
+    });
+    await fetchData();
+    return response.data.data;
+  };
+
+  const deleteData = async (endpoint) => {
+    const response = await axios.delete(endpoint, {
+      headers: getAuthHeaders(),
+    });
+    await fetchData();
+    return response.data.data;
+  };
+
+  const deleteDataWithBody = async (endpoint, payload) => {
+    const response = await axios.delete(endpoint, {
+      headers: getAuthHeaders(),
+      data: payload,
+    });
+    await fetchData();
+    return response.data.data;
+  };
+
+  return {
+    data,
+    dataLoading,
+    dataError,
+    getData,
+    postData,
+    postDataValidated,
+    putData,
+    deleteData,
+    deleteDataWithBody,
+  };
+};

frontend/src/main.jsx

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

frontend/vite.config.js

@@ -0,0 +1,16 @@
+import { defineConfig } from 'vite'
+import react from '@vitejs/plugin-react'
+import path from 'path'
+
+export default defineConfig({
+  plugins: [react()],
+  server: {
+    host: "localhost",
+    port: 5173,
+  },
+  resolve: {
+    alias: {
+      '@': path.resolve(__dirname, './src'),
+    },
+  },
+})