Fix project type errors

eslint.config.js

@@ -0,0 +1,20 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const eslint_config_typescript_1 = require("@vue/eslint-config-typescript");
+const eslint_plugin_vue_1 = __importDefault(require("eslint-plugin-vue"));
+// To allow more languages other than `ts` in `.vue` files, uncomment the following lines:
+// import { configureVueProject } from '@vue/eslint-config-typescript'
+// configureVueProject({ scriptLangs: ['ts', 'tsx'] })
+// More info at https://github.com/vuejs/eslint-config-typescript/#advanced-setup
+const vueEssentialConfig = eslint_plugin_vue_1.default.configs['flat/essential'];
+const vueTsRecommendedConfig = eslint_config_typescript_1.vueTsConfigs.recommended;
+exports.default = (0, eslint_config_typescript_1.defineConfigWithVueTs)({
+    name: 'app/files-to-lint',
+    files: ['**/*.{ts,mts,tsx,vue}'],
+}, {
+    name: 'app/ignores',
+    ignores: ['**/dist/**', '**/dist-ssr/**', '**/coverage/**'],
+}, vueEssentialConfig, vueTsRecommendedConfig);

eslint.config.ts

@@ -1,4 +1,3 @@
-import { globalIgnores } from 'eslint/config'
 import { defineConfigWithVueTs, vueTsConfigs } from '@vue/eslint-config-typescript'
 import pluginVue from 'eslint-plugin-vue'
 
@@ -7,14 +6,22 @@ import pluginVue from 'eslint-plugin-vue'
 // configureVueProject({ scriptLangs: ['ts', 'tsx'] })
 // More info at https://github.com/vuejs/eslint-config-typescript/#advanced-setup
 
+const vueEssentialConfig =
+  pluginVue.configs['flat/essential'] as unknown as Parameters<typeof defineConfigWithVueTs>[number]
+
+const vueTsRecommendedConfig =
+  vueTsConfigs.recommended as unknown as Parameters<typeof defineConfigWithVueTs>[number]
+
 export default defineConfigWithVueTs(
   {
     name: 'app/files-to-lint',
     files: ['**/*.{ts,mts,tsx,vue}'],
   },
+  {
+    name: 'app/ignores',
+    ignores: ['**/dist/**', '**/dist-ssr/**', '**/coverage/**'],
+  },
 
-  globalIgnores(['**/dist/**', '**/dist-ssr/**', '**/coverage/**']),
-
-  pluginVue.configs['flat/essential'],
-  vueTsConfigs.recommended,
+  vueEssentialConfig,
+  vueTsRecommendedConfig,
 )

package.json

@@ -33,6 +33,6 @@
     "typescript": "~5.8.0",
     "vite": "^6.2.4",
     "vite-plugin-vue-devtools": "^7.7.2",
-    "vue-tsc": "^2.2.8"
+    "vue-tsc": "^2.2.12"
   }
 }

src/api/offstylesApi.ts

@@ -1,8 +1,8 @@
-import { Style } from "@/types/Style";
-import Api from "./api";
-import type { Time } from "@/types/Time";
-import type { User } from "@/types/User";
-import type { RecentModAction, ModerationTargetFilter } from "@/types/moderation";
+import { Style } from '@/types/Style';
+import Api from './api';
+import type { Time } from '@/types/Time';
+import type { User } from '@/types/User';
+import type { RecentModAction, ModerationTargetFilter, ModerationAction } from '@/types/moderation';
 
 // Add new interfaces based on the API spec
 export interface RankAwareRecord extends Time {
@@ -72,6 +72,20 @@ export interface ServerKeyInfo {
   permissions: number;
 }
 
+export interface ModerationLogModerator {
+  steam_id: string;
+  username: string;
+  avatar_url?: string;
+}
+
+export interface ModerationLogAction extends ModerationAction {
+  mod: ModerationLogModerator;
+}
+
+export interface ModerationLogResponse {
+  actions: ModerationLogAction[];
+}
+
 class OffstylesApi extends Api {
   static offstylesApiUrl = import.meta.env.DEV ? "/api" : "https://offstyles.tommyy.dev/api";
 
@@ -318,7 +332,7 @@ class OffstylesApi extends Api {
   }
 
   // Get moderation logs
-  static async getModerationLogs(id: string): Promise<RecentModAction[]> {
+  static async getModerationLogs(id: string): Promise<ModerationLogResponse> {
     const params = new URLSearchParams({
       id: id,
     });

src/components/ComboBox.vue

@@ -12,25 +12,30 @@
   import IconChevronDown from '@/components/icons/IconChevronDown.vue';
   import loadWheel from '@/components/icons/loadWheel.vue';
 
+  interface ComboBoxOptionItem {
+    id?: number | string,
+    name: string,
+  }
+
   const props = defineProps<{
-    select_options: object[],
-    selected_option: { id?:number, name?:string },
+    select_options: ComboBoxOptionItem[],
+    selected_option: ComboBoxOptionItem | null,
     type: string,
     is_loading?: boolean,
   }>()
 
-  const selected = ref<object>(props.selected_option);
+  const selected = ref<ComboBoxOptionItem | null>(props.selected_option);
 
   //update selected when parent selected_option changes
-  const selectedProp = computed(()=>{return props.selected_option});
-  watch(selectedProp, async()=>{
-    if(props.selected_option !== selected.value){
+  const selectedProp = computed(() => props.selected_option);
+  watch(selectedProp, async () => {
+    if (props.selected_option !== selected.value) {
       selected.value = props.selected_option;
     }
   });
 
   const emit = defineEmits(['select-Changed']);
-  watch(selected, async() => {
+  watch(selected, async () => {
     emit('select-Changed', selected.value !== null ? selected.value : {});
   });
 
@@ -55,7 +60,7 @@
             <ComboboxInput
               class="w-full py-2 pl-3 pr-10 text-sm leading-5 text-gray-200 placeholder:text-gray-300"
               :placeholder="'Enter a '+props.type"
-              :displayValue="(option) => option?.name"
+              :displayValue="(option: unknown) => ((option as ComboBoxOptionItem | null)?.name ?? '')"
               @change="query = $event.target.value;"
 
             />

src/components/PlayerProfile.vue

@@ -2,16 +2,16 @@
   <div class="moderation-dropdown">
     <button @click="showDropdown = !showDropdown">Moderation Actions</button>
     <div v-if="showDropdown" class="dropdown-menu">
-      <div v-for="action in actions" :key="action.action">
-        <button @click="performAction(action)">{{ action.action }}</button>
+      <div v-for="action in actions" :key="action">
+        <button @click="performAction(action)">{{ action }}</button>
       </div>
     </div>
   </div>
 </template>
 
 <script setup lang="ts">
 import { ref } from 'vue';
-import type { ModerationActionType, ModerationPostData } from '@/types/moderation';
+import { ModerationActionType, type ModerationPostData } from '@/types/moderation';
 
 const showDropdown = ref(false);
 const actions = Object.values(ModerationActionType);

src/types/moderation.ts

@@ -12,6 +12,12 @@ export enum ModerationActionType {
   Unban = "Unban"
 }
 
+export interface ModeratorInfo {
+  steam_id: string;
+  username: string;
+  avatar_url?: string;
+}
+
 // Individual moderation action
 export interface ModerationAction {
   mod_steam_id: string;
@@ -20,12 +26,24 @@ export interface ModerationAction {
   action: ModerationActionType;
 }
 
+export interface ModerationLogAction {
+  timestamp: number; // Unix timestamp in milliseconds
+  action: ModerationActionType;
+  notes?: string;
+  mod: ModeratorInfo;
+}
+
 // Moderation record (contains all actions for a target)
 export interface ModerationRecord {
   _id?: string; // ObjectId as string
   actions: ModerationAction[];
 }
 
+export interface ModerationLogResponse {
+  _id?: string; // ObjectId as string
+  actions: ModerationLogAction[];
+}
+
 // Target types for moderation
 export enum ModerationTarget {
   Player = "Player",

tsconfig.json

@@ -7,5 +7,9 @@
     {
       "path": "./tsconfig.app.json"
     }
-  ]
-}
+  ],
+  "compilerOptions": {
+    "moduleResolution": "Bundler",
+    "module": "ESNext"
+  }
+}