├── .browserslistrc
├── .eslintrc.js
├── .gitignore
├── README.md
├── babel.config.js
├── package-lock.json
├── package.json
├── public
    ├── favicon.ico
    └── index.html
└── src
    ├── App.vue
    ├── assets
        ├── cashflow-icon.svg
        ├── close-icon.svg
        └── trash-icon.svg
    ├── components
        ├── Action.vue
        ├── Header.vue
        ├── Home.vue
        ├── Layout.vue
        ├── Modal.vue
        ├── Movements
        │   ├── Index.vue
        │   └── Movement.vue
        ├── Resume
        │   ├── Graphic.vue
        │   └── Index.vue
        └── SplashScreen.vue
    └── main.js


/.browserslistrc:
--------------------------------------------------------------------------------
1 | > 1%
2 | last 2 versions
3 | not dead
4 | 


--------------------------------------------------------------------------------
/.eslintrc.js:
--------------------------------------------------------------------------------
 1 | module.exports = {
 2 |   root: true,
 3 |   env: {
 4 |     node: true,
 5 |   },
 6 |   extends: ["plugin:vue/vue3-essential", "eslint:recommended", "@vue/prettier"],
 7 |   parserOptions: {
 8 |     parser: "babel-eslint",
 9 |   },
10 |   rules: {
11 |     "no-console": process.env.NODE_ENV === "production" ? "warn" : "off",
12 |     "no-debugger": process.env.NODE_ENV === "production" ? "warn" : "off",
13 |   },
14 | };
15 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | .DS_Store
 2 | node_modules
 3 | /dist
 4 | 
 5 | 
 6 | # local env files
 7 | .env.local
 8 | .env.*.local
 9 | 
10 | # Log files
11 | npm-debug.log*
12 | yarn-debug.log*
13 | yarn-error.log*
14 | pnpm-debug.log*
15 | 
16 | # Editor directories and files
17 | .idea
18 | .vscode
19 | *.suo
20 | *.ntvs*
21 | *.njsproj
22 | *.sln
23 | *.sw?
24 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # cashflow
 2 | 
 3 | ## Project setup
 4 | ```
 5 | npm install
 6 | ```
 7 | 
 8 | ### Compiles and hot-reloads for development
 9 | ```
10 | npm run serve
11 | ```
12 | 
13 | ### Compiles and minifies for production
14 | ```
15 | npm run build
16 | ```
17 | 
18 | ### Lints and fixes files
19 | ```
20 | npm run lint
21 | ```
22 | 
23 | ### Customize configuration
24 | See [Configuration Reference](https://cli.vuejs.org/config/).
25 | 


--------------------------------------------------------------------------------
/babel.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 |   presets: ["@vue/cli-plugin-babel/preset"],
3 | };
4 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "cashflow",
 3 |   "version": "0.1.0",
 4 |   "private": true,
 5 |   "scripts": {
 6 |     "serve": "vue-cli-service serve",
 7 |     "build": "vue-cli-service build",
 8 |     "lint": "vue-cli-service lint"
 9 |   },
10 |   "dependencies": {
11 |     "core-js": "^3.6.5",
12 |     "vue": "^3.0.0"
13 |   },
14 |   "devDependencies": {
15 |     "@vue/cli-plugin-babel": "~4.5.0",
16 |     "@vue/cli-plugin-eslint": "~4.5.0",
17 |     "@vue/cli-service": "~4.5.0",
18 |     "@vue/compiler-sfc": "^3.0.0",
19 |     "@vue/eslint-config-prettier": "^6.0.0",
20 |     "babel-eslint": "^10.1.0",
21 |     "eslint": "^6.7.2",
22 |     "eslint-plugin-prettier": "^3.3.1",
23 |     "eslint-plugin-vue": "^7.0.0",
24 |     "prettier": "^2.2.1"
25 |   }
26 | }
27 | 


--------------------------------------------------------------------------------
/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/platzi/practico-vue/8df58cd540063c5a57a4e5381cc7c8a30c925d41/public/favicon.ico


--------------------------------------------------------------------------------
/public/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="">
 3 |   <head>
 4 |     <meta charset="utf-8">
 5 |     <meta http-equiv="X-UA-Compatible" content="IE=edge">
 6 |     <meta name="viewport" content="width=device-width,initial-scale=1.0">
 7 |     <link rel="icon" href="<%= BASE_URL %>favicon.ico">
 8 |     <title><%= htmlWebpackPlugin.options.title %></title>
 9 |   </head>
10 |   <body>
11 |     <noscript>
12 |       <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
13 |     </noscript>
14 |     <div id="app"></div>
15 |     <!-- built files will be auto injected -->
16 |   </body>
17 | </html>
18 | 


--------------------------------------------------------------------------------
/src/App.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <Suspense>
 3 |     <template #default>
 4 |       <Home />
 5 |     </template>
 6 |     <template #fallback>
 7 |       <SplashScreen />
 8 |     </template>
 9 |   </Suspense>
10 | </template>
11 | 
12 | <script>
13 | import SplashScreen from "./components/SplashScreen.vue";
14 | import { defineAsyncComponent } from "vue";
15 | 
16 | export default {
17 |   components: {
18 |     SplashScreen,
19 |     Home: defineAsyncComponent(
20 |       () =>
21 |         new Promise((resolve) => {
22 |           setTimeout(() => {
23 |             resolve(import("./components/Home.vue"));
24 |           }, 2500);
25 |         })
26 |     ),
27 |   },
28 | };
29 | </script>
30 | 
31 | <style>
32 | html,
33 | body,
34 | .app {
35 |   min-height: 100vh;
36 |   margin: 0;
37 |   font-family: Arial, Helvetica, sans-serif;
38 | }
39 | 
40 | * {
41 |   --brand-green: #04b500;
42 |   --brand-blue: #0689b0;
43 | }
44 | </style>
45 | 


--------------------------------------------------------------------------------
/src/assets/cashflow-icon.svg:
--------------------------------------------------------------------------------
 1 | <svg width="240" height="240" viewBox="0 0 240 240" fill="none" xmlns="http://www.w3.org/2000/svg">
 2 | <path d="M0 120C0 53.7701 53.7701 0 120 0C186.23 0 240 53.7701 240 120C240 186.23 186.23 240 120 240C53.7701 240 0 186.23 0 120Z" fill="url(#paint0_radial_5_4)"/>
 3 | <path d="M0 120C69.6998 154.4 97.2998 134 120 120C140.5 105.8 193.9 94.4002 240 120C240 186.23 186.23 240 120 240C53.7701 240 0 186.23 0 120Z" fill="#24B3DF"/>
 4 | <path d="M240 120C170.3 154.4 142.7 134 120 120C99.5002 105.8 46.1002 94.4002 0 120C0 186.23 53.7701 240 120 240C186.23 240 240 186.23 240 120Z" fill="#0D96BF"/>
 5 | <path d="M240 120C170.3 154.4 142.7 134 120 120C99.5002 105.8 46.1002 94.4002 0 120C0 186.23 53.7701 240 120 240C186.23 240 240 186.23 240 120Z" fill="#0D96BF"/>
 6 | <path d="M227.4 173.4C157.7 207.8 142.7 177.2 120 163.2C99.5002 149 46.1002 94.4002 0 120C0 186.23 53.7701 240 120 240C184.9 237.8 216.7 191.6 227.4 173.4Z" fill="#0689B0"/>
 7 | <defs>
 8 | <radialGradient id="paint0_radial_5_4" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(120 120) rotate(-0.690831) scale(132.71 119.991)">
 9 | <stop offset="0.0166667" stop-color="#CBF3FF"/>
10 | <stop offset="1" stop-color="#5FDAFF"/>
11 | </radialGradient>
12 | </defs>
13 | </svg>
14 | 


--------------------------------------------------------------------------------
/src/assets/close-icon.svg:
--------------------------------------------------------------------------------
1 | <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
2 | <path fill-rule="evenodd" clip-rule="evenodd" d="M2.12132 0L0 2.12132L9.54595 11.6673L0 21.2132L2.12132 23.3345L11.6673 13.7886L21.2132 23.3345L23.3345 21.2132L13.7886 11.6673L23.3345 2.12133L21.2132 8.22544e-06L11.6673 9.54595L2.12132 0Z" fill="#0689B0"/>
3 | </svg>
4 | 


--------------------------------------------------------------------------------
/src/assets/trash-icon.svg:
--------------------------------------------------------------------------------
1 | <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
2 | <path d="M4.5 7.37193L5.625 22.5H18.375L19.5 7.37193M4.5 7.37193H3L4.125 3.48113H6.75M4.5 7.37193H19.5M19.5 7.37193H21L20.25 3.48113H17.25M17.25 3.48113H12.375H6.75M17.25 3.48113L15.75 1.5H8.25L6.75 3.48113M9 10.217V19.3302M15 19.3302V10.217M12 19.3302V10.217" stroke="#0689B0" stroke-width="2"/>
3 | </svg>
4 | 


--------------------------------------------------------------------------------
/src/components/Action.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <button @click="showModal = true">Agregar movimiento</button>
  3 |   <teleport to="#app">
  4 |     <Modal v-show="showModal" @close="showModal = false">
  5 |       <form @submit.prevent="submit">
  6 |         <div class="field">
  7 |           <label>Título</label>
  8 |           <input type="text" v-model="title" />
  9 |         </div>
 10 |         <div class="field">
 11 |           <label>Monto</label>
 12 |           <input type="number" v-model="amount" />
 13 |         </div>
 14 |         <div class="field">
 15 |           <label>Descripción</label>
 16 |           <textarea rows="4" v-model="description"></textarea>
 17 |         </div>
 18 |         <div class="field">
 19 |           <label class="radio-label">
 20 |             <input type="radio" v-model="movementType" value="Ingreso" />
 21 |             <span>Ingreso</span>
 22 |           </label>
 23 |           <label class="radio-label">
 24 |             <input type="radio" v-model="movementType" value="Gasto" />
 25 |             <span>Gasto</span>
 26 |           </label>
 27 |         </div>
 28 |         <div class="action">
 29 |           <button>Agregar movimiento</button>
 30 |         </div>
 31 |       </form>
 32 |     </Modal>
 33 |   </teleport>
 34 | </template>
 35 | 
 36 | <script setup>
 37 | import { ref, defineEmits } from "vue";
 38 | import Modal from "./Modal.vue";
 39 | 
 40 | const showModal = ref(false);
 41 | const title = ref("");
 42 | const amount = ref(0);
 43 | const description = ref("");
 44 | const movementType = ref("Ingreso");
 45 | 
 46 | const emit = defineEmits(["create"]);
 47 | 
 48 | const submit = () => {
 49 |   showModal.value = !showModal.value;
 50 |   emit("create", {
 51 |     title: title.value,
 52 |     description: description.value,
 53 |     amount: movementType.value === "Ingreso" ? amount.value : -amount.value,
 54 |     time: new Date(),
 55 |     id: new Date(),
 56 |   });
 57 |   title.value = "";
 58 |   description.value = "";
 59 |   amount.value = 0;
 60 |   movementType.value = "Ingreso";
 61 | };
 62 | </script>
 63 | 
 64 | <style scoped>
 65 | button {
 66 |   color: white;
 67 |   font-size: 1.25rem;
 68 |   background-color: var(--brand-blue);
 69 |   border: none;
 70 |   width: 100%;
 71 |   padding: 24px 60px;
 72 |   border-radius: 60px;
 73 |   box-sizing: border-box;
 74 | }
 75 | 
 76 | form {
 77 |   font-size: 1.24rem;
 78 |   width: 100%;
 79 | }
 80 | 
 81 | form .action {
 82 |   padding: 0 24px;
 83 | }
 84 | 
 85 | .field {
 86 |   display: flex;
 87 |   justify-content: space-between;
 88 |   flex-direction: column;
 89 |   padding: 16px 24px;
 90 | }
 91 | 
 92 | label {
 93 |   margin-bottom: 8px;
 94 | }
 95 | 
 96 | input,
 97 | textarea {
 98 |   font-size: 1.24rem;
 99 |   border: 2px solid var(--brand-blue);
100 |   border-radius: 8px;
101 |   padding: 8px;
102 | }
103 | 
104 | input[type="number"] {
105 |   text-align: right;
106 | }
107 | 
108 | .radio-label {
109 |   display: flex;
110 |   align-items: center;
111 |   margin-top: 8px;
112 | }
113 | 
114 | .radio-label span {
115 |   margin-top: 4px;
116 |   margin-left: 8px;
117 | }
118 | 
119 | input[type="radio"] {
120 |   appearance: none;
121 |   width: 1.24rem;
122 |   height: 1.24rem;
123 |   color: var(--brand-blue);
124 |   border: 2px solid var(--brand-blue);
125 |   border-radius: 50%;
126 | }
127 | 
128 | input[type="radio"]:checked {
129 |   background-color: var(--brand-blue);
130 | }
131 | </style>
132 | 


--------------------------------------------------------------------------------
/src/components/Header.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <header>
 3 |     <img @click="reload" src="@/assets/cashflow-icon.svg" alt="Logo" />
 4 |     <h1><span>Cash</span>Flow</h1>
 5 |     <span></span>
 6 |   </header>
 7 | </template>
 8 | 
 9 | <script>
10 | export default {
11 |   methods: {
12 |     reload() {
13 |       location.reload();
14 |     },
15 |   },
16 | };
17 | </script>
18 | 
19 | <style scoped>
20 | header {
21 |   display: flex;
22 |   justify-content: space-around;
23 |   align-items: center;
24 |   width: 100vw;
25 | }
26 | 
27 | img,
28 | span {
29 |   width: 48px;
30 | }
31 | 
32 | h1 {
33 |   font-size: 1.4rem;
34 |   color: var(--brand-blue);
35 | }
36 | 
37 | h1 span {
38 |   color: var(--brand-green);
39 | }
40 | </style>
41 | 


--------------------------------------------------------------------------------
/src/components/Home.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <Layout>
  3 |     <template #header>
  4 |       <Header></Header>
  5 |     </template>
  6 |     <template #resume>
  7 |       <Resume
  8 |         :total-label="'Ahorro total'"
  9 |         :label="label"
 10 |         :total-amount="totalAmount"
 11 |         :amount="amount"
 12 |       >
 13 |         <template #graphic>
 14 |           <Graphic :amounts="amounts" @select="select" />
 15 |         </template>
 16 |         <template #action>
 17 |           <Action @create="create" />
 18 |         </template>
 19 |       </Resume>
 20 |     </template>
 21 |     <template #movements>
 22 |       <Movements
 23 |         :movements="movements"
 24 |         @remove="remove"
 25 |       />
 26 |     </template>
 27 |   </Layout>
 28 | </template>
 29 | 
 30 | <script>
 31 | import Layout from "./Layout.vue";
 32 | import Header from "./Header.vue";
 33 | import Resume from "./Resume/Index.vue";
 34 | import Action from "./Action.vue";
 35 | import Movements from "./Movements/Index.vue";
 36 | import Graphic from "./Resume/Graphic.vue";
 37 | 
 38 | export default {
 39 |   components: {
 40 |     Layout,
 41 |     Header,
 42 |     Resume,
 43 |     Action,
 44 |     Movements,
 45 |     Graphic,
 46 | },
 47 |   data() {
 48 |     return {
 49 |       label: null,
 50 |       amount: null,
 51 |       movements: [],
 52 |     };
 53 |   },
 54 |   computed: {
 55 |     amounts() {
 56 |       const lastDays = this.movements
 57 |         .filter(m => {
 58 |           const today = new Date();
 59 |           const oldDate = today.setDate(today.getDate() - 30);
 60 | 
 61 |           return m.time > oldDate;
 62 |         })
 63 |         .map(m => m.amount);
 64 | 
 65 |       return lastDays.map((m, i) => {
 66 |         const lastMovements = lastDays.slice(0, i + 1);
 67 | 
 68 |         return lastMovements.reduce((suma, movement) => {
 69 |           return suma + movement
 70 |         }, 0);
 71 |       });
 72 |     },
 73 |     totalAmount() {
 74 |       return this.movements.reduce((suma, m) => {
 75 |         return suma + m.amount;
 76 |       }, 0);
 77 |     }
 78 |   },
 79 |   mounted() {
 80 |     const movements = JSON.parse(localStorage.getItem("movements"));
 81 |     console.log(movements);
 82 | 
 83 |     if (Array.isArray(movements)) {
 84 |       this.movements = movements.map(m => {
 85 |         return { ...m, time: new Date(m.time) };
 86 |       });
 87 |     }
 88 |   },
 89 |   methods: {
 90 |     create(movement) {
 91 |       this.movements.push(movement);
 92 |       this.save();
 93 |     },
 94 |     remove(id) {
 95 |       const index = this.movements.findIndex(m => m.id === id);
 96 |       this.movements.splice(index, 1);
 97 |       this.save();
 98 |     },
 99 |     save() {
100 |       localStorage.setItem("movements", JSON.stringify(this.movements));
101 |     },
102 |     select(el) {
103 |       console.log(el);
104 |       this.amount = el;
105 |     }
106 |   }
107 | };
108 | </script>
109 | 


--------------------------------------------------------------------------------
/src/components/Layout.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="header">
 3 |     <slot name="header"></slot>
 4 |   </div>
 5 |   <div class="resume">
 6 |     <slot name="resume"></slot>
 7 |   </div>
 8 |   <div class="movements">
 9 |     <div class="head" @click="showMovements = !showMovements">
10 |       <div class="grip"></div>
11 |     </div>
12 |     <div class="body" v-show="showMovements">
13 |       <slot name="movements"></slot>
14 |     </div>
15 |   </div>
16 | </template>
17 | 
18 | <script setup>
19 | import { ref } from "vue";
20 | const showMovements = ref(false);
21 | </script>
22 | 
23 | <style scoped>
24 | .header,
25 | .resume,
26 | .movements {
27 |   display: flex;
28 |   justify-content: space-around;
29 |   align-items: center;
30 |   padding: 14px 0;
31 |   box-sizing: border-box;
32 | }
33 | 
34 | .header {
35 |   position: fixed;
36 |   width: 100vw;
37 | }
38 | 
39 | .resume {
40 |   min-height: 100vh;
41 | }
42 | 
43 | .movements {
44 |   z-index: 1;
45 |   position: absolute;
46 |   flex-direction: column;
47 |   bottom: 0;
48 |   width: 100vw;
49 |   background-color: white;
50 |   box-shadow: 0 -8px 16px #e5e5e5;
51 |   border-radius: 24px;
52 | }
53 | 
54 | .movements .head {
55 |   display: flex;
56 |   justify-content: center;
57 |   align-items: center;
58 |   padding: 24px;
59 |   width: 100%;
60 |   box-sizing: border-box;
61 | }
62 | 
63 | .movements .body {
64 |   height: 75vh;
65 |   width: 100%;
66 | }
67 | 
68 | .movements .head .grip {
69 |   width: 120px;
70 |   height: 8px;
71 |   background-color: #e5e5e5;
72 |   border-radius: 4px;
73 | }
74 | </style>
75 | 


--------------------------------------------------------------------------------
/src/components/Modal.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="modal">
 3 |     <div class="head">
 4 |       <p>Nuevo movimiento</p>
 5 |       <img @click="close" src="@/assets/close-icon.svg" alt="cerrar" />
 6 |     </div>
 7 |     <div class="body">
 8 |       <slot></slot>
 9 |     </div>
10 |   </div>
11 | </template>
12 | 
13 | <script setup>
14 | import { defineEmits } from "vue";
15 | 
16 | const emit = defineEmits(["close"]);
17 | 
18 | const close = () => emit("close");
19 | </script>
20 | 
21 | <style scoped>
22 | .modal {
23 |   z-index: 2;
24 |   position: absolute;
25 |   left: 0;
26 |   right: 0;
27 |   top: 0;
28 |   bottom: 0;
29 |   background-color: white;
30 | }
31 | 
32 | .head {
33 |   display: flex;
34 |   justify-content: space-between;
35 |   align-items: center;
36 |   width: 100%;
37 |   padding: 24px 24px;
38 |   box-sizing: border-box;
39 | }
40 | 
41 | p {
42 |   margin: 0;
43 |   font-size: 1.5rem;
44 |   color: var(--brand-blue);
45 | }
46 | </style>
47 | 


--------------------------------------------------------------------------------
/src/components/Movements/Index.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="movements">
 3 |     <h2 class="title">Historial</h2>
 4 |     <div class="content">
 5 |       <Movement
 6 |         v-for="{ id, title, description, amount } in movements"
 7 |         :key="id"
 8 |         :id="id"
 9 |         :title="title"
10 |         :description="description"
11 |         :amount="amount"
12 |         @remove="remove"
13 |       />
14 |     </div>
15 |   </div>
16 | </template>
17 | 
18 | <script setup>
19 | import { toRefs, defineProps, defineEmits } from "vue";
20 | import Movement from "./Movement.vue";
21 | 
22 | const props = defineProps({
23 |   movements: {
24 |     type: Array,
25 |     default: () => [],
26 |   },
27 | });
28 | 
29 | const { movements } = toRefs(props);
30 | 
31 | const emit = defineEmits(["remove"]);
32 | 
33 | const remove = (id) => {
34 |   emit("remove", id);
35 | };
36 | </script>
37 | 
38 | <style scoped>
39 | .movements {
40 |   max-height: 100%;
41 |   padding: 0 8px;
42 |   margin-bottom: 14px;
43 | }
44 | 
45 | .title {
46 |   margin: 8px 16px 24px 16px;
47 |   color: var(--brand-blue);
48 | }
49 | 
50 | .content {
51 |   max-height: 68vh;
52 |   display: flex;
53 |   flex-direction: column;
54 |   gap: 8px;
55 |   overflow-y: scroll;
56 | }
57 | </style>
58 | 


--------------------------------------------------------------------------------
/src/components/Movements/Movement.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div class="movement">
  3 |     <div class="content">
  4 |       <h4>{{ title }}</h4>
  5 |       <p>{{ description }}</p>
  6 |     </div>
  7 |     <div class="action">
  8 |       <img src="@/assets/trash-icon.svg" alt="borrar" @click="remove" />
  9 |       <p
 10 |         :class="{
 11 |           red: isNegative,
 12 |           green: !isNegative,
 13 |         }"
 14 |       >
 15 |         {{ amountCurrency }}
 16 |       </p>
 17 |     </div>
 18 |   </div>
 19 | </template>
 20 | 
 21 | <script setup>
 22 | import { toRefs, defineProps, defineEmits, computed } from "vue";
 23 | 
 24 | const currencyFormatter = new Intl.NumberFormat("es-MX", {
 25 |   style: "currency",
 26 |   currency: "MXN",
 27 | });
 28 | 
 29 | const props = defineProps({
 30 |   id: {
 31 |     type: Number,
 32 |   },
 33 |   title: {
 34 |     type: String,
 35 |   },
 36 |   description: {
 37 |     type: String,
 38 |   },
 39 |   amount: {
 40 |     type: Number,
 41 |   },
 42 | });
 43 | 
 44 | const { id, title, description, amount } = toRefs(props);
 45 | 
 46 | const amountCurrency = computed(() => currencyFormatter.format(amount.value));
 47 | 
 48 | const isNegative = computed(() => amount.value < 0);
 49 | 
 50 | const emit = defineEmits(["remove"]);
 51 | 
 52 | const remove = () => {
 53 |   emit("remove", id.value);
 54 | };
 55 | </script>
 56 | 
 57 | <style scoped>
 58 | .movement {
 59 |   display: flex;
 60 |   justify-content: space-between;
 61 |   align-items: center;
 62 |   width: 100%;
 63 |   padding: 16px;
 64 |   background-color: #e6f9ff;
 65 |   border-radius: 8px;
 66 |   box-sizing: border-box;
 67 | }
 68 | 
 69 | .movement .content {
 70 |   width: 100%;
 71 | }
 72 | 
 73 | .movement .action {
 74 |   display: flex;
 75 |   justify-content: space-between;
 76 |   align-items: flex-end;
 77 |   flex-direction: column;
 78 | }
 79 | 
 80 | h4,
 81 | p {
 82 |   margin: 0;
 83 |   padding: 0;
 84 | }
 85 | 
 86 | h4 {
 87 |   margin-bottom: 8px;
 88 | }
 89 | 
 90 | .movement .action img {
 91 |   margin-bottom: 16px;
 92 | }
 93 | 
 94 | .red {
 95 |   color: red;
 96 | }
 97 | 
 98 | .green {
 99 |   color: green;
100 | }
101 | </style>
102 | 


--------------------------------------------------------------------------------
/src/components/Resume/Graphic.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |     <div>
  3 |         <svg
  4 |             @touchstart="tap"
  5 |             @touchmove="tap"
  6 |             @touchend="untap"
  7 |             viewBox="0 0 300 200"
  8 |         >
  9 |             <line
 10 |                 stroke="#c4c4c4"
 11 |                 stroke-width="2"
 12 |                 x1="0"
 13 |                 :y1="zero"
 14 |                 x2="300"
 15 |                 :y2="zero"
 16 |             />
 17 |             <polyline
 18 |                 fill="none"
 19 |                 stroke="#0689B0"
 20 |                 stroke-width="2"
 21 |                 :points="points"
 22 |             />
 23 |             <line
 24 |                 v-show="showPointer"
 25 |                 stroke="#04b500"
 26 |                 stroke-width="2"
 27 |                 :x1="pointer"
 28 |                 y1="0"
 29 |                 :x2="pointer"
 30 |                 y2="200"
 31 |             />
 32 |         </svg>
 33 |         <p>Últimos 30 días</p>
 34 |     </div>
 35 | </template>
 36 | 
 37 | <script setup>
 38 | import { ref, toRefs, defineProps, defineEmits, computed, watch } from 'vue';
 39 | 
 40 | const props = defineProps({
 41 |     amounts: {
 42 |         type: Array,
 43 |         default: () => [],
 44 |     }
 45 | });
 46 | 
 47 | const { amounts } = toRefs(props);
 48 | 
 49 | const amountToPixels = (amount) => {
 50 |     const min = Math.min(...amounts.value);
 51 |     const max = Math.max(...amounts.value);
 52 | 
 53 |     const amountAbs = amount + Math.abs(min);
 54 |     const minmax = Math.abs(max) + Math.abs(min);
 55 | 
 56 |     return 200 - ((amountAbs * 100) / minmax) * 2;
 57 | }
 58 | 
 59 | const zero = computed(() => {
 60 |     return amountToPixels(0);
 61 | });
 62 | 
 63 | const points = computed(() => {
 64 |     const total = amounts.value.length;
 65 |     return amounts.value.reduce((points, amount, i) => {
 66 |         const x = (300 / total) * (i + 1);
 67 |         const y = amountToPixels(amount);
 68 |         return `${points} ${x},${y}`;
 69 |     }, `0, ${amountToPixels(amounts.value.length ? amounts.value[0] : 0)}`);
 70 | });
 71 | 
 72 | const showPointer = ref(false);
 73 | const pointer = ref(0);
 74 | 
 75 | const emit = defineEmits(["select"]);
 76 | 
 77 | watch(pointer, (value) => {
 78 |     const index = Math.ceil((value / (300 / amounts.value.length)));
 79 |     if (index < 0 || index > amounts.value.length) return;
 80 |     emit("select", amounts.value[index - 1]);
 81 | });
 82 | 
 83 | const tap = ({ target, touches }) => {
 84 |     showPointer.value = true;
 85 |     const elementWidth = target.getBoundingClientRect().width;
 86 |     const elementX = target.getBoundingClientRect().x;
 87 |     const touchX = touches[0].clientX;
 88 |     pointer.value = ((touchX - elementX) * 300) / elementWidth;
 89 | }
 90 | 
 91 | const untap = () => {
 92 |     showPointer.value = false;
 93 | }
 94 | </script>
 95 | 
 96 | <style scoped>
 97 | svg {
 98 |   width: 100%;
 99 | }
100 | p {
101 |   text-align: center;
102 | }
103 | </style>


--------------------------------------------------------------------------------
/src/components/Resume/Index.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <main>
 3 |     <p>{{ labelVisual }}</p>
 4 |     <h1>{{ amountCurrency }}</h1>
 5 |     <div class="graphic">
 6 |       <slot name="graphic"></slot>
 7 |     </div>
 8 |     <div class="action">
 9 |       <slot name="action"></slot>
10 |     </div>
11 |   </main>
12 | </template>
13 | 
14 | <script>
15 | const currencyFormatter = new Intl.NumberFormat("es-MX", {
16 |   style: "currency",
17 |   currency: "MXN",
18 | });
19 | 
20 | export default {
21 |   props: {
22 |     totalLabel: {
23 |       type: String,
24 |     },
25 |     label: {
26 |       type: String,
27 |       default: null,
28 |     },
29 |     totalAmount: {
30 |       type: Number,
31 |     },
32 |     amount: {
33 |       type: Number,
34 |       default: null,
35 |     },
36 |   },
37 |   computed: {
38 |     labelVisual() {
39 |       return this.label !== null ? this.label : this.totalLabel;
40 |     },
41 |     amountVisual() {
42 |       return this.amount !== null ? this.amount : this.totalAmount;
43 |     },
44 |     amountCurrency() {
45 |       return currencyFormatter.format(this.amountVisual);
46 |     },
47 |   },
48 | };
49 | </script>
50 | 
51 | <style scoped>
52 | main {
53 |   display: flex;
54 |   justify-content: center;
55 |   align-items: center;
56 |   flex-direction: column;
57 |   width: 100%;
58 | }
59 | 
60 | h1,
61 | p {
62 |   margin: 0;
63 |   text-align: center;
64 | }
65 | 
66 | h1 {
67 |   margin-top: 14px;
68 |   color: var(--brand-green);
69 | }
70 | 
71 | .graphic {
72 |   display: flex;
73 |   justify-content: center;
74 |   align-items: center;
75 |   width: 100%;
76 |   padding: 48px 24px;
77 |   box-sizing: border-box;
78 | }
79 | </style>
80 | 


--------------------------------------------------------------------------------
/src/components/SplashScreen.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="splashscreen">
 3 |     <img src="@/assets/cashflow-icon.svg" alt="Logo" />
 4 |     <h1><span>Cash</span>Flow</h1>
 5 |   </div>
 6 | </template>
 7 | 
 8 | <style scoped>
 9 | .splashscreen {
10 |   display: flex;
11 |   justify-content: center;
12 |   align-items: center;
13 |   flex-direction: column;
14 |   height: 100vh;
15 | }
16 | h1 {
17 |   color: var(--brand-blue);
18 | }
19 | h1 span {
20 |   color: var(--brand-green);
21 | }
22 | </style>
23 | 


--------------------------------------------------------------------------------
/src/main.js:
--------------------------------------------------------------------------------
1 | import { createApp } from "vue";
2 | import App from "./App.vue";
3 | 
4 | createApp(App).mount("#app");
5 | 


--------------------------------------------------------------------------------