diff --git a/Step/wwwroot/src/modules/base-components/cards/card-assisted-tooling.ts b/Step/wwwroot/src/modules/base-components/cards/card-assisted-tooling.ts
new file mode 100644
index 00000000..716b2420
--- /dev/null
+++ b/Step/wwwroot/src/modules/base-components/cards/card-assisted-tooling.ts
@@ -0,0 +1,19 @@
+import Vue from 'vue';
+import Component from 'vue-class-component';
+import {Prop} from 'vue-property-decorator';
+
+@Component({})
+export default class CardAssitedTooling extends Vue{
+    
+        @Prop({default: 0})
+        magId:number;
+        @Prop({default: 0})
+        posId:number;
+        @Prop({default:"../assets/icons/Tools/Tools.png"})
+        imgSource:string;
+        @Prop({default: false})
+        isUp:boolean;
+        @Prop({default: false})
+        isDown:boolean;
+    
+}
\ No newline at end of file
diff --git a/Step/wwwroot/src/modules/base-components/cards/card-assisted-tooling.vue b/Step/wwwroot/src/modules/base-components/cards/card-assisted-tooling.vue
index cc92fa10..0e70aa96 100644
--- a/Step/wwwroot/src/modules/base-components/cards/card-assisted-tooling.vue
+++ b/Step/wwwroot/src/modules/base-components/cards/card-assisted-tooling.vue
@@ -20,14 +20,5 @@
   </div>
 <!-- </div> -->
 </template>
-<script>
-export default {
-    props:{
-        magId: {default: 0},
-        posId: {default: 0},
-        imgSource: {default:"../assets/icons/Tools/Tools.png"},
-        isUp: {default: false},
-        isDown: {default: false}
-    }
-}
-</script>
\ No newline at end of file
+
+<script lang="ts" src="./card-assisted-tooling.ts"></script>
\ No newline at end of file
diff --git a/Step/wwwroot/src/modules/base-components/cards/card-busy-depot.ts b/Step/wwwroot/src/modules/base-components/cards/card-busy-depot.ts
new file mode 100644
index 00000000..e02033c7
--- /dev/null
+++ b/Step/wwwroot/src/modules/base-components/cards/card-busy-depot.ts
@@ -0,0 +1,13 @@
+import Vue from 'vue';
+import Component from 'vue-class-component';
+import {Prop} from 'vue-property-decorator';
+
+@Component({})
+export default class CardBusyDepot extends Vue{
+
+        @Prop({default:4})
+        type:number;
+        @Prop({default:false})
+        toolInSpindle:boolean;
+    
+}
\ No newline at end of file
diff --git a/Step/wwwroot/src/modules/base-components/cards/card-busy-depot.vue b/Step/wwwroot/src/modules/base-components/cards/card-busy-depot.vue
index 554a02b2..cd2ba794 100644
--- a/Step/wwwroot/src/modules/base-components/cards/card-busy-depot.vue
+++ b/Step/wwwroot/src/modules/base-components/cards/card-busy-depot.vue
@@ -26,13 +26,5 @@
         </div>
     </span>
 </template>
-<script>
-export default {
-    props:{
-        type: {default:4},
-        toolInSpindle: {default:false}
-    },
-    methods:{
-    }
-}
-</script>
\ No newline at end of file
+
+<script lang="ts" src="./card-busy-depot.ts"></script>
\ No newline at end of file
diff --git a/Step/wwwroot/src/modules/base-components/cards/card-folder-path.ts b/Step/wwwroot/src/modules/base-components/cards/card-folder-path.ts
new file mode 100644
index 00000000..9d1b4839
--- /dev/null
+++ b/Step/wwwroot/src/modules/base-components/cards/card-folder-path.ts
@@ -0,0 +1,29 @@
+import Vue from 'vue';
+import Component from 'vue-class-component';
+import {Prop} from 'vue-property-decorator';
+
+@Component({})
+export default class CardFolderPath extends Vue{
+    
+        @Prop({ default: "/assets/icons/_png/folder-closed-25x25.png"})
+        imgSource:string;
+        @Prop({ default: "PC"})
+        name:string;
+        @Prop({default: true})
+        withArrow:boolean;
+        @Prop({default: "FOLDER"})
+        iconType:string;
+        @Prop({default: false})
+        disabled:boolean;
+        @Prop({default: false})
+        selected:boolean;
+        @Prop({default: true})
+        fileExist:boolean;
+    
+  
+      onClick(){
+          if(!this.disabled)
+            this.$emit("click");
+      };
+    
+}
\ No newline at end of file
diff --git a/Step/wwwroot/src/modules/base-components/cards/card-folder-path.vue b/Step/wwwroot/src/modules/base-components/cards/card-folder-path.vue
index 725678f0..1c4df4a9 100644
--- a/Step/wwwroot/src/modules/base-components/cards/card-folder-path.vue
+++ b/Step/wwwroot/src/modules/base-components/cards/card-folder-path.vue
@@ -19,22 +19,5 @@
     </div>
 <!-- </div> -->
 </template>
-<script>
-export default {
-    props:{
-        imgSource: { default: "/assets/icons/_png/folder-closed-25x25.png"},
-        name:{ default: "PC"},
-        withArrow: {default: true},
-        iconType: {default: "FOLDER"},
-        disabled: {default: false},
-        selected: {default: false},
-        fileExist: {default: true}
-    },
-    methods:{
-      onClick(){
-          if(!this.disabled)
-            this.$emit("click");
-      }
-    }
-};
-</script>
\ No newline at end of file
+
+<script lang="ts" src="./card-folder-path.ts"></script>
\ No newline at end of file
diff --git a/Step/wwwroot/src/modules/base-components/cards/card-report.ts b/Step/wwwroot/src/modules/base-components/cards/card-report.ts
new file mode 100644
index 00000000..9af1728c
--- /dev/null
+++ b/Step/wwwroot/src/modules/base-components/cards/card-report.ts
@@ -0,0 +1,16 @@
+import Vue from 'vue';
+import Component from 'vue-class-component';
+import {Prop} from 'vue-property-decorator';
+
+@Component({})
+export default class CardReport extends Vue{
+    
+        @Prop({default: ""})
+        title:string;
+     
+  
+        onClick(){
+            this.$emit("click");
+        };
+    
+}
\ No newline at end of file
diff --git a/Step/wwwroot/src/modules/base-components/cards/card-report.vue b/Step/wwwroot/src/modules/base-components/cards/card-report.vue
index 9f062fa8..322e89a9 100644
--- a/Step/wwwroot/src/modules/base-components/cards/card-report.vue
+++ b/Step/wwwroot/src/modules/base-components/cards/card-report.vue
@@ -9,15 +9,5 @@
   </div>
 <!-- </div> -->
 </template>
-<script>
-export default {
-    props:{
-        title: {default: ""},
-    }, methods:{
-        onClick: function(){
-            this.$emit("click");
-        }
-    }
 
-}
-</script>
\ No newline at end of file
+<script lang="ts" src="./card-report.ts"></script>
\ No newline at end of file
diff --git a/Step/wwwroot/src/modules/base-components/cards/card-tool-depot.ts b/Step/wwwroot/src/modules/base-components/cards/card-tool-depot.ts
new file mode 100644
index 00000000..0ff0e21c
--- /dev/null
+++ b/Step/wwwroot/src/modules/base-components/cards/card-tool-depot.ts
@@ -0,0 +1,28 @@
+import Vue from 'vue';
+import Component from 'vue-class-component';
+import {Prop} from 'vue-property-decorator';
+
+@Component({})
+export default class CardToolDepot extends Vue{
+    
+        @Prop({default:"E13"})
+        code:string;
+        @Prop({default:"Utensile XYZ"})
+        title:string;
+        @Prop({default:"../assets/icons/_png/fresa-raggiatura-104x104.png"})
+        imgSource:string;
+        @Prop({default:false})
+        editable:boolean;
+        @Prop({default:0})
+        headId:number;
+    
+   
+        onClick(){
+            this.$emit("click");
+        };
+
+        onClickInfo(){
+            this.$emit("clickinfo");
+        };
+    
+}
\ No newline at end of file
diff --git a/Step/wwwroot/src/modules/base-components/cards/card-tool-depot.vue b/Step/wwwroot/src/modules/base-components/cards/card-tool-depot.vue
index b5f5d838..1f076dc5 100644
--- a/Step/wwwroot/src/modules/base-components/cards/card-tool-depot.vue
+++ b/Step/wwwroot/src/modules/base-components/cards/card-tool-depot.vue
@@ -18,22 +18,5 @@
   </div>
 <!-- </div> -->
 </template>
-<script>
-export default {
-    props:{
-        code: {default:"E13"},
-        title: {default:"Utensile XYZ"},
-        imgSource: {default:"../assets/icons/_png/fresa-raggiatura-104x104.png"},
-        editable: false,
-        headId: {default:0}
-    },
-    methods:{
-        onClick(){
-            this.$emit("click");
-        },
-        onClickInfo(){
-            this.$emit("clickinfo");
-        }
-    }
-}
-</script>
\ No newline at end of file
+
+<script lang="ts" src="./card-tool-depot.ts"></script>
\ No newline at end of file
diff --git a/Step/wwwroot/src/modules/base-components/cards/card-utilieties.ts b/Step/wwwroot/src/modules/base-components/cards/card-utilieties.ts
new file mode 100644
index 00000000..d23aa705
--- /dev/null
+++ b/Step/wwwroot/src/modules/base-components/cards/card-utilieties.ts
@@ -0,0 +1,20 @@
+import Vue from 'vue';
+import Component from 'vue-class-component';
+import {Prop} from 'vue-property-decorator';
+
+@Component({})
+export default class CardUtilities extends Vue{
+
+        @Prop({default:""})
+        title:string;
+        @Prop({default:""})
+        letters:string;
+        @Prop({default:""})
+        image:string;
+    
+    
+        clickEvent(){
+            this.$emit("on-click-event");
+        };
+    
+}
\ No newline at end of file
diff --git a/Step/wwwroot/src/modules/base-components/cards/card-utilities.vue b/Step/wwwroot/src/modules/base-components/cards/card-utilities.vue
index 1692a76a..1fff5cda 100644
--- a/Step/wwwroot/src/modules/base-components/cards/card-utilities.vue
+++ b/Step/wwwroot/src/modules/base-components/cards/card-utilities.vue
@@ -13,17 +13,5 @@
   </div>
 </div>
 </template>
-<script>
-export default {
-    props:{
-        title: {default:""},
-        letters: {default:""},
-        image: {default:""}
-    },
-    methods:{
-        clickEvent(){
-            this.$emit("on-click-event");
-        }
-    }
-}
-</script>
\ No newline at end of file
+
+<script lang="ts" src="./card-utilities.ts"></script>
\ No newline at end of file
diff --git a/Step/wwwroot/src/modules/base-components/cards/card.ts b/Step/wwwroot/src/modules/base-components/cards/card.ts
new file mode 100644
index 00000000..13111700
--- /dev/null
+++ b/Step/wwwroot/src/modules/base-components/cards/card.ts
@@ -0,0 +1,20 @@
+import Vue from 'vue';
+import Component from 'vue-class-component';
+import {Prop} from 'vue-property-decorator';
+
+@Component({})
+export default class Card extends Vue{
+    
+        @Prop({default: ""})
+        title:string;
+        @Prop({default:""})
+        imgSource:string;
+        @Prop({default:false})
+        locked:boolean;
+     
+        
+        onClick(){
+            this.$emit("click");
+        };
+    
+}
\ No newline at end of file
diff --git a/Step/wwwroot/src/modules/base-components/cards/card.vue b/Step/wwwroot/src/modules/base-components/cards/card.vue
index 497060a4..f0c8e6b8 100644
--- a/Step/wwwroot/src/modules/base-components/cards/card.vue
+++ b/Step/wwwroot/src/modules/base-components/cards/card.vue
@@ -12,17 +12,5 @@
   </div>
 <!-- </div> -->
 </template>
-<script>
-export default {
-    props:{
-        title: {default: ""},
-        imgSource: {default:""},
-        locked: {default:false}
-    }, methods:{
-        onClick: function(){
-            this.$emit("click");
-        }
-    }
 
-}
-</script>
\ No newline at end of file
+<script lang="ts" src="./card.ts"></script>
\ No newline at end of file
diff --git a/Step/wwwroot/src/modules/base-components/cards/detail-card.ts b/Step/wwwroot/src/modules/base-components/cards/detail-card.ts
new file mode 100644
index 00000000..d5951e28
--- /dev/null
+++ b/Step/wwwroot/src/modules/base-components/cards/detail-card.ts
@@ -0,0 +1,38 @@
+import Vue from 'vue';
+import Component from 'vue-class-component';
+import {Prop} from 'vue-property-decorator';
+
+@Component({})
+export default class DetailCard extends Vue{
+   
+        @Prop({default:0})
+        posId:number;
+        @Prop({default:""})
+        label:string;
+        @Prop({default:1})
+        physicalType:number;
+        @Prop({default:1})
+        type:number;
+        @Prop({ default: false })
+        magposOccupied:boolean;
+        @Prop({ default: false })
+        toolMounted:boolean;
+        @Prop({ default: false })
+        editable:boolean;
+        @Prop({ default: false })
+        disabled:boolean;
+        @Prop({default: false})
+        assistedTooling:boolean;
+        @Prop({default: false})
+        magazineLocked:boolean;
+    
+  
+        onClick(action){
+            this.$emit("click", action, this.posId, this.type);
+        };
+
+        isOdd(num){
+            return (num %2 == 1);
+        };
+    
+}
\ No newline at end of file
diff --git a/Step/wwwroot/src/modules/base-components/cards/detail-card.vue b/Step/wwwroot/src/modules/base-components/cards/detail-card.vue
index 52f07c7b..a448c21b 100644
--- a/Step/wwwroot/src/modules/base-components/cards/detail-card.vue
+++ b/Step/wwwroot/src/modules/base-components/cards/detail-card.vue
@@ -21,27 +21,5 @@
 
   </div>
 </template>
-<script>
-export default {
-    props:{
-        posId:{default:0},
-        label:{default:""},
-        physicalType:{default:1},
-        type:{default:1},
-        magposOccupied:{ default: false },
-        toolMounted:{ default: false },
-        editable:{ default: false },
-        disabled:{ default: false },
-        assistedTooling: {default: false},
-        magazineLocked: {default: false}
-    },
-    methods:{
-        onClick(action){
-            this.$emit("click", action, this.posId, this.type);
-        },
-        isOdd(num){
-            return (num %2 == 1);
-        }
-    }
-}
-</script>
+
+<script lang="ts" src="./detail-card.ts"></script>
diff --git a/Step/wwwroot/src/modules/base-components/cards/equipment.ts b/Step/wwwroot/src/modules/base-components/cards/equipment.ts
new file mode 100644
index 00000000..6507e57f
--- /dev/null
+++ b/Step/wwwroot/src/modules/base-components/cards/equipment.ts
@@ -0,0 +1,26 @@
+import Vue from 'vue';
+import Component from 'vue-class-component';
+import {Prop} from 'vue-property-decorator';
+
+@Component({})
+export default class Equipment extends Vue{
+    
+        @Prop({default: ""})
+        code:string;
+        @Prop({default: "Utensile XYZ"})
+        title:string;
+        @Prop({default:""})
+        imgSource:string;
+        @Prop({default: null})
+        magPosition;
+        @Prop({default: null})
+        shankPosition;
+        @Prop({default: 0})
+        headId:number;
+    
+    
+      onClick(){
+        this.$emit("click");
+      };
+    
+}
\ No newline at end of file
diff --git a/Step/wwwroot/src/modules/base-components/cards/equipment.vue b/Step/wwwroot/src/modules/base-components/cards/equipment.vue
index 08d0c62c..69b237e0 100644
--- a/Step/wwwroot/src/modules/base-components/cards/equipment.vue
+++ b/Step/wwwroot/src/modules/base-components/cards/equipment.vue
@@ -20,20 +20,5 @@
       </div>
   <!-- </div> -->
 </template>
-<script>
-export default {
-    props:{
-        code: {default: ""},
-        title: {default: "Utensile XYZ"},
-        imgSource: {default:""},
-        magPosition: {default: null},
-        shankPosition: {default: null},
-        headId: {default: 0}
-    },
-    methods:{
-      onClick(){
-        this.$emit("click");
-      }
-    }
-}
-</script>
+
+<script lang="ts" src="./equipment.ts"></script>
diff --git a/Step/wwwroot/src/modules/base-components/cards/load-equipment.ts b/Step/wwwroot/src/modules/base-components/cards/load-equipment.ts
new file mode 100644
index 00000000..412976ef
--- /dev/null
+++ b/Step/wwwroot/src/modules/base-components/cards/load-equipment.ts
@@ -0,0 +1,19 @@
+import Vue from 'vue';
+import Component from 'vue-class-component';
+import {Prop} from 'vue-property-decorator';
+
+@Component({})
+export default class LoadEquipment extends Vue{
+    
+        @Prop({default: ""})
+        code:string;
+        @Prop({default: ""})
+        title:string;
+        @Prop({default:""})
+        imgSource:string;
+        @Prop({default: false})
+        isUp:boolean;
+        @Prop({default: false})
+        isDown:boolean;
+    
+}
\ No newline at end of file
diff --git a/Step/wwwroot/src/modules/base-components/cards/load-equipment.vue b/Step/wwwroot/src/modules/base-components/cards/load-equipment.vue
index 6f8754bf..2c399fa1 100644
--- a/Step/wwwroot/src/modules/base-components/cards/load-equipment.vue
+++ b/Step/wwwroot/src/modules/base-components/cards/load-equipment.vue
@@ -14,14 +14,5 @@
       </div>
   <!-- </div> -->
 </template>
-<script>
-export default {
-    props:{
-        code: {default: ""},
-        title: {default: ""},
-        imgSource: {default:""},
-        isUp: {default: false},
-        isDown: {default: false}
-    }
-}
-</script>
+
+<script lamg="ts" src="./load-equipment.ts"></script>
diff --git a/Step/wwwroot/src/modules/base-components/cards/missing-tool.ts b/Step/wwwroot/src/modules/base-components/cards/missing-tool.ts
new file mode 100644
index 00000000..050d2d3f
--- /dev/null
+++ b/Step/wwwroot/src/modules/base-components/cards/missing-tool.ts
@@ -0,0 +1,22 @@
+import Vue from 'vue';
+import Component from 'vue-class-component';
+import {Prop} from 'vue-property-decorator';
+
+@Component({})
+export default class MissingTool extends Vue{
+    
+      @Prop({ default: "E23" })
+      code:string;
+      @Prop({ default: "Utensile ABC" })
+      title:string;
+      @Prop({ default: "Non presente in macchina" })
+      error:string;
+      @Prop({ default: "../assets/icons/Tools/Saw.png" })
+      imgSource:string;
+    
+    
+      onClick() {
+        this.$emit("click");
+      };
+    
+  }
\ No newline at end of file
diff --git a/Step/wwwroot/src/modules/base-components/cards/missing-tool.vue b/Step/wwwroot/src/modules/base-components/cards/missing-tool.vue
index d4afdde7..0b7c7186 100644
--- a/Step/wwwroot/src/modules/base-components/cards/missing-tool.vue
+++ b/Step/wwwroot/src/modules/base-components/cards/missing-tool.vue
@@ -16,18 +16,5 @@
   </div>
 <!-- </div> -->
 </template>
-<script>
-export default {
-  props: {
-    code: { default: "E23" },
-    title: { default: "Utensile ABC" },
-    error: { default: "Non presente in macchina" },
-    imgSource: { default: "../assets/icons/Tools/Saw.png" }
-  },
-  methods: {
-    onClick: function() {
-      this.$emit("click");
-    }
-  }
-};
-</script>
+
+<script lang="ts" src="./missin-tool.ts"></script>
diff --git a/Step/wwwroot/src/modules/base-components/cards/objects-job.ts b/Step/wwwroot/src/modules/base-components/cards/objects-job.ts
new file mode 100644
index 00000000..290e6b4e
--- /dev/null
+++ b/Step/wwwroot/src/modules/base-components/cards/objects-job.ts
@@ -0,0 +1,20 @@
+import Vue from 'vue';
+import Component from 'vue-class-component';
+import {Prop} from 'vue-property-decorator';
+
+@Component({})
+export default class ObjectJob extends Vue{
+      // imgSource: {default:"../assets/icons/_png/keyboard-dots-24x48.png"},
+      @Prop({ default: "" })
+      title:string;
+      @Prop({ default: false })
+      min:boolean;
+      @Prop({ default: false })
+      expanded:boolean;
+    
+      get imgSource() {
+        if (this.min) return "../assets/icons/_png/keyboard-dots-24x24.png";
+        return "../assets/icons/_png/keyboard-dots-24x48.png";
+      };
+     
+  }
\ No newline at end of file
diff --git a/Step/wwwroot/src/modules/base-components/cards/objects-job.vue b/Step/wwwroot/src/modules/base-components/cards/objects-job.vue
index 33c0294b..c3a93bfe 100644
--- a/Step/wwwroot/src/modules/base-components/cards/objects-job.vue
+++ b/Step/wwwroot/src/modules/base-components/cards/objects-job.vue
@@ -14,20 +14,5 @@
   </div>
 <!-- </div> -->
 </template>
-<script>
-export default {
-  props: {
-    // imgSource: {default:"../assets/icons/_png/keyboard-dots-24x48.png"},
-    title: { default: "" },
-    min: { default: false },
-    expanded: { default: false }
-  },
-  computed: {
-    imgSource: function() {
-      if (this.min) return "../assets/icons/_png/keyboard-dots-24x24.png";
-      return "../assets/icons/_png/keyboard-dots-24x48.png";
-    }
-  },
-  methods: {}
-};
-</script>
+
+<script lang="ts" src="./objects-job.ts"></script>
diff --git a/Step/wwwroot/src/modules/base-components/cards/process-selection-maintenance.ts b/Step/wwwroot/src/modules/base-components/cards/process-selection-maintenance.ts
new file mode 100644
index 00000000..ee51449b
--- /dev/null
+++ b/Step/wwwroot/src/modules/base-components/cards/process-selection-maintenance.ts
@@ -0,0 +1,32 @@
+import Vue from 'vue';
+import Component from 'vue-class-component';
+import {Prop} from 'vue-property-decorator';
+
+import { Hub } from "src/services/hub";
+import { processModelActions } from "src/store/runningProcess.store";
+
+@Component({})
+export default class ProcessSelectionMaintenance extends Vue{
+
+  // data: function(){
+  //   return {
+  //     selectedProcess: 1
+  //   }
+  // },
+
+    get processes() {
+      return this.$store.state.process.process;
+    };
+
+    get selectedProcess() {
+      return this.$store.state.process.selectedProcess;
+    };
+  
+
+    selectProcess(id) {
+      if(this.selectedProcess != id){
+        Hub.Current.selectProcess(id);
+      }
+    };
+  
+}
\ No newline at end of file
diff --git a/Step/wwwroot/src/modules/base-components/cards/process-selection-maintenance.vue b/Step/wwwroot/src/modules/base-components/cards/process-selection-maintenance.vue
index 4da93a7c..3c954d81 100644
--- a/Step/wwwroot/src/modules/base-components/cards/process-selection-maintenance.vue
+++ b/Step/wwwroot/src/modules/base-components/cards/process-selection-maintenance.vue
@@ -1,37 +1,12 @@
 <template>
 <div class="process-selection-maintenance" v-if="processes.length > 1 && checkSecurityEnabled('processCmd')">
-  <div class="process" v-for="p in processes" :key="p.id" v-if="p.type != 'AUX'" :class="{selected: p.id == selectedProcess, 'small': p.id != selectedProcess, 'error' : p.isInAlarm}" @click="selectProcess(p.id)" :title="'process_tooltip_select' | localize('Select NC-Process %d',p.id)">
-    <span>{{p.id}}</span>
+  <div class="process" v-for="p in processes" :key="p.id"  :class="{selected: p.id == selectedProcess, 'small': p.id != selectedProcess, 'error' : p.isInAlarm}" @click="selectProcess(p.id)" :title="'process_tooltip_select' | localize('Select NC-Process %d',p.id)">
+    <span v-if="p.type != 'AUX'">{{p.id}}</span>
     <!-- <small v-if="p.type == 'AUX'">AUX</small> -->
   </div>
 </div>
 
 </template>
-<script>
-import { Hub } from "src/services/hub";
-import { processModelActions } from "src/store/runningProcess.store";
-export default {
-  // data: function(){
-  //   return {
-  //     selectedProcess: 1
-  //   }
-  // },
-  computed: {
-    processes: function() {
-      return this.$store.state.process.process;
-    },
-    selectedProcess: function() {
-      return this.$store.state.process.selectedProcess;
-    }
-  },
-  methods: {
-    selectProcess: function(id) {
-      if(this.selectedProcess != id){
-        Hub.Current.selectProcess(id);
-      }
-      
-    }
-  }
-};
-</script>
+
+<script lang="ts" src="./process-selection-maintenance.ts"></script>
 
diff --git a/Step/wwwroot/src/modules/base-components/cards/tool.ts b/Step/wwwroot/src/modules/base-components/cards/tool.ts
new file mode 100644
index 00000000..39502c06
--- /dev/null
+++ b/Step/wwwroot/src/modules/base-components/cards/tool.ts
@@ -0,0 +1,21 @@
+import Vue from 'vue';
+import Component from 'vue-class-component';
+import {Prop} from 'vue-property-decorator';
+
+@Component({})
+export default class Tool extends Vue{
+    
+        @Prop({default: ""})
+        code:string;
+        @Prop({default: ""})
+        title:string;
+        @Prop({default: "Mag. 5"})
+        store:string;
+        @Prop({default:""})
+        imgSource:string ;
+    
+    
+        onClick(){
+            this.$emit("click");
+        };
+}
\ No newline at end of file
diff --git a/Step/wwwroot/src/modules/base-components/cards/tool.vue b/Step/wwwroot/src/modules/base-components/cards/tool.vue
index bdfa1ff6..35cd417d 100644
--- a/Step/wwwroot/src/modules/base-components/cards/tool.vue
+++ b/Step/wwwroot/src/modules/base-components/cards/tool.vue
@@ -21,19 +21,5 @@
   </div>
 <!-- </div> -->
 </template>
-<script>
-export default {
-    props:{
-        code: {default: ""},
-        title: {default: ""},
-        store: {default: "Mag. 5"},
-        imgSource: {default:""}
-    }
-    , methods:{
-        onClick: function(){
-            this.$emit("click");
-        }
-    }
 
-}
-</script>
+<script lang="ts" src="./tool.ts"></script>