@fishawack/lab-velocity 2.0.0-beta.44 → 2.0.0-beta.45

package/README.md

@@ -103,6 +103,7 @@ import { Auth } from "@fishawack/lab-velocity";
             // ...
             paths: ["auth.user"],
         }),
+        Auth.ImpersonationPlugin,
     ],
 
     modules: {
@@ -113,6 +114,8 @@ import { Auth } from "@fishawack/lab-velocity";
 }
 ```
 
+`Auth.ImpersonationPlugin` displays a persistent banner when an admin is impersonating another user, persisted across page reloads.
+
 ### Base Styles
 
 @fishawack/lab-velocity extends @fishawack/lab-ui, for this reason you should replace the two references to variables & defaults with @fishawack/lab-velocity ones.
@@ -188,6 +191,7 @@ There are two different set of sass imports for the admin and the frontend route
 @import "@fishawack/lab-velocity/components/menu";
 @import "@fishawack/lab-velocity/components/layout";
 @import "@fishawack/lab-velocity/components/descriptions";
+@import "@fishawack/lab-velocity/components/token-display";
 @import "element-plus/theme-chalk/el-tabs";
 @import "element-plus/theme-chalk/el-tab-pane";
 ```
@@ -478,3 +482,24 @@ import { Checkbox as VelCheckbox } from "@fishawack/lab-velocity";
         ),
     },
 ```
+
+## Local dev
+
+To work locally mount a local clone of the project into the packages directory via an overridden docker compose file.
+
+### Docker setup
+
+Create a docker compose file at `_Docker/docker-compose.yml`
+
+```yml
+services:
+    core:
+        volumes:
+            - $PWD/../lab-velocity:/app/packages/lab-velocity
+```
+
+### Npm install
+
+```bash
+npm install ./packages/lab-velocity
+```

package/_Build/vue/components/layout/PageHeader.vue

@@ -1,6 +1,6 @@
 <template>
-    <div class="grid justify-between">
-        <div class="grid__4/6 flex justify-start">
+    <div class="flex flex-wrap items-start gap" style="row-gap: 16px">
+        <div class="flex justify-start items-center">
             <span v-if="icon">
                 <div
                     class="p-1.5 mr-2 border-radius border border-solid border-muted flex items-center justify-center"
@@ -17,10 +17,11 @@
             <h2 class="m-0 font-500 text-secondary">{{ title }}</h2>
         </div>
 
-        <div class="grid__2/6 flex gap justify-end items-start">
-            <div class="flex gap items-center">
-                <slot />
-            </div>
+        <div
+            class="flex flex-wrap gap items-center justify-end"
+            style="margin-left: auto"
+        >
+            <slot />
         </div>
     </div>
 </template>

package/_Build/vue/components/layout/Table.vue

@@ -2,6 +2,7 @@
     <el-table
         :data="$props.data"
         :height="fixedHeight ? 762 : undefined"
+        :row-class-name="rowClassName"
         style="width: 100%"
         @sort-change="handleSort"
     >
@@ -131,6 +132,10 @@ export default {
             type: Boolean,
             default: true,
         },
+        rowClassName: {
+            type: [Function, String],
+            default: undefined,
+        },
     },
     emits: ["sort", "reload"],
 

package/_Build/vue/components/layout/TableSorter.vue

@@ -64,6 +64,7 @@
                 :label="jsonData.label"
                 :over-write-id="jsonData.overWriteId"
                 :fixed-height="fixedHeight"
+                :row-class-name="jsonData.rowClassName"
                 :target-action="
                     (item) => ({
                         name: `${jsonData.slug}.show`,

package/_Build/vue/modules/AuthModule/js/guest-request.js

@@ -0,0 +1,32 @@
+"use strict";
+import axios from "axios";
+
+/**
+ * Wraps a form POST to a guest-only route with automatic logged-in detection.
+ *
+ * If the server redirects to /hydrate/logged-in (because a stale session
+ * exists), the helper dispatches a logout, fetches a fresh CSRF cookie,
+ * and retries the original request once.
+ *
+ * @param {object}   options
+ * @param {object}   options.form   - form-backend-validation Form instance
+ * @param {string}   options.url    - endpoint to POST to
+ * @param {string}   [options.method] - HTTP method (default: "post")
+ * @param {import('vuex').Store} options.store - Vuex store (for dispatch("logout"))
+ * @returns {Promise<object>} resolved response data
+ */
+export async function guestRequest({ form, url, method = "post", store }) {
+    const res = await form[method](url);
+
+    if (res && res["logged-in"]) {
+        try {
+            await store.dispatch("logout");
+        } catch (_) {}
+
+        await axios.get("/sanctum/csrf-cookie");
+
+        return await form[method](url);
+    }
+
+    return res;
+}

package/_Build/vue/modules/AuthModule/js/impersonation-banner.js

@@ -0,0 +1,102 @@
+"use strict";
+
+import { createApp, h, ref } from "vue";
+
+let bannerApp = null;
+let bannerContainer = null;
+let storeRef = null;
+const currentUser = ref(null);
+
+function mountBanner() {
+    if (bannerApp) return;
+
+    bannerContainer = document.createElement("div");
+    document.body.insertBefore(bannerContainer, document.body.firstChild);
+
+    bannerApp = createApp({
+        setup() {
+            function stop() {
+                storeRef.dispatch("stopImpersonating");
+            }
+
+            return () =>
+                h(
+                    "div",
+                    {
+                        style: {
+                            background: "#c0392b",
+                            color: "#fff",
+                            display: "flex",
+                            alignItems: "center",
+                            justifyContent: "center",
+                            gap: "16px",
+                            padding: "12px 16px",
+                            fontSize: "14px",
+                            fontFamily: "sans-serif",
+                        },
+                    },
+                    [
+                        h(
+                            "span",
+                            `Impersonating: ${currentUser.value?.name} (${currentUser.value?.email})`,
+                        ),
+                        h(
+                            "button",
+                            {
+                                onClick: stop,
+                                style: {
+                                    background: "#fff",
+                                    color: "#c0392b",
+                                    border: "none",
+                                    padding: "4px 12px",
+                                    borderRadius: "4px",
+                                    cursor: "pointer",
+                                    fontWeight: "bold",
+                                },
+                            },
+                            "Stop impersonating",
+                        ),
+                    ],
+                );
+        },
+    });
+
+    bannerApp.mount(bannerContainer);
+}
+
+function unmountBanner() {
+    if (!bannerApp) return;
+
+    bannerApp.unmount();
+    bannerContainer?.remove();
+    bannerApp = null;
+    bannerContainer = null;
+}
+
+export function syncImpersonationBanner(user) {
+    currentUser.value = user;
+
+    if (user?.impersonating_as) {
+        mountBanner();
+    } else {
+        unmountBanner();
+    }
+}
+
+export function setImpersonationStore(store) {
+    storeRef = store;
+}
+
+export function ImpersonationPlugin(store) {
+    setImpersonationStore(store);
+
+    // Handle persisted state on load (vuex-persistedstate bypasses mutations)
+    syncImpersonationBanner(store.state.auth?.user ?? store.state.user);
+
+    // Handle all future setUser mutations
+    store.subscribe((mutation) => {
+        if (mutation.type === "auth/setUser" || mutation.type === "setUser") {
+            syncImpersonationBanner(mutation.payload);
+        }
+    });
+}

package/_Build/vue/modules/AuthModule/js/router.js

@@ -179,50 +179,84 @@ export function routes(node) {
 }
 
 export function beforeEach(router, store) {
+    let initialLoad = true;
+
+    // These routes must always be reachable regardless of auth/verification state.
+    // Without this, force_password_change or unverified state can trap the user with
+    // no way to log out or complete an SSO callback.
+    const ALWAYS_ALLOW = new Set(["auth.logout", "auth.callback"]);
+
     router.beforeEach(async (to, from, next) => {
-        // If authenticated query param is present, assume authentication has happened elsewhere and attempt to fetch user data
-        if (to.query.authenticated && !store.getters.authenticated) {
+        // Refresh user state on initial page load (handles cross-app state sync)
+        // or when authenticated query param is present (bypass/redirect flow)
+        if (
+            (store.getters.authenticated && initialLoad) ||
+            to.query.authenticated
+        ) {
             await store.dispatch("getUser", {
                 errors: (e) => console.error(e),
             });
         }
 
+        initialLoad = false;
+
         const { user, redirect } = store.state.auth;
+        const isGuestRoute = to.matched.some((d) => d.meta.guest) === true;
 
-        // User verification handling and redirect if user alrady verified but accessing an expired verification route
+        // Logout and SSO callback must always be reachable — prevents every
+        // possible "stuck" scenario caused by state-based redirects below.
+        if (ALWAYS_ALLOW.has(to.name)) {
+            return next();
+        }
+
+        // Redirect already-verified users away from verification routes
         if (
             to.query.verified ||
             (to.name === "auth.expired-verification" && user?.email_verified_at)
         ) {
-            next({ name: "auth.success-verify" });
-        } else if (store.getters.authenticated) {
-            // User is authenticated - check permissions and redirect appropriately
-            if (user.force_password_change && to.name !== "auth.force-reset") {
-                // User needs to change password - redirect to force reset
-                next({ name: "auth.force-reset" });
-            } else if (to.name === "auth.login") {
-                // Already logged in user hitting login
-                next({ name: redirect });
-            } else if (
+            return next({ name: "auth.success-verify" });
+        }
+
+        if (store.getters.authenticated) {
+            // 1. Email verification is the highest priority redirect.
+            //    Must come before force_password_change — there is no point forcing
+            //    a password change on an account that hasn't been verified yet.
+            //    Guest routes, auth.verify and auth.expired-verification are exempt
+            //    so the user can always complete or re-request verification.
+            if (
                 !user?.email_verified_at &&
-                to.matched.some((d) => d.meta.guest) !== true
+                !isGuestRoute &&
+                to.name !== "auth.verify" &&
+                to.name !== "auth.expired-verification"
             ) {
-                // User needs email verification and trying to access protected route
-                next({ name: "auth.verify" });
-            } else {
-                // User is authenticated and authorized - proceed
-                next();
+                return next({ name: "auth.verify" });
             }
-        } else {
-            // User is not authenticated - handle guest routes and login redirects
-            if (to.matched.some((d) => d.meta.guest) === true) {
-                // Route allows guest access - proceed
-                next();
-            } else {
-                // Protected route requires authentication - redirect to standard login
-                next({ name: "auth.login" });
+
+            // 2. Force password change applies only after verification is satisfied.
+            //    Guest routes are exempt so the user can still navigate within /auth
+            //    (e.g. auth.verify, auth.expired-verification) without looping.
+            if (
+                user?.force_password_change &&
+                !isGuestRoute &&
+                to.name !== "auth.force-reset"
+            ) {
+                return next({ name: "auth.force-reset" });
+            }
+
+            // 3. Redirect an already-authenticated user away from the login page
+            if (to.name === "auth.login") {
+                return next({ name: redirect });
             }
+
+            return next();
+        }
+
+        // Unauthenticated: allow guest routes, otherwise redirect to login
+        if (isGuestRoute) {
+            return next();
         }
+
+        return next({ name: "auth.login" });
     });
 }
 

package/_Build/vue/modules/AuthModule/js/store.js

@@ -65,6 +65,14 @@ const store = {
 
             return axios.post("/logout");
         },
+
+        stopImpersonating({ commit }) {
+            return axios.post("/api/users/impersonate/stop").then((res) => {
+                commit("setUser", res.data.data);
+
+                return res.data.data;
+            });
+        },
     },
 };
 

package/_Build/vue/modules/AuthModule/routes/PCompanies/resource.js

@@ -19,9 +19,7 @@ export default [
     {
         api: {
             params: {
-                index: ({ $route }) => ({
-                    "filter[withTrashed]": $route.query.trashed,
-                }),
+                index: () => ({}),
                 show: () => ({
                     include: "primary_contact",
                 }),
@@ -35,6 +33,7 @@ export default [
         singular: "company",
         icon: "icon-cases",
         auditable: true,
+        trashable: true,
         ...merge(columns(companiesColumns), {
             index: {
                 layout: [

package/_Build/vue/modules/AuthModule/routes/PTeams/resource.js

@@ -29,6 +29,7 @@ export default [
             },
         },
         auditable: true,
+        trashable: true,
         permissions: {
             create: ({ $store }) => $store.getters.can("write teams"),
             edit: ({ $store }) => $store.getters.can("write teams"),

package/_Build/vue/modules/AuthModule/routes/PUsers/SetPasswordAction.vue

@@ -0,0 +1,51 @@
+<template>
+    <vel-button @click="visible = true">Set Password</vel-button>
+
+    <SetPasswordDialog
+        v-if="visible"
+        :user-id="userId"
+        @close="visible = false"
+        @success="onSuccess"
+    />
+</template>
+
+<script>
+import VelButton from "../../../../components/basic/Button.vue";
+import SetPasswordDialog from "./SetPasswordDialog.vue";
+import { ElNotification } from "element-plus";
+
+export default {
+    components: {
+        VelButton,
+        SetPasswordDialog,
+    },
+    props: {
+        userId: {
+            type: [Number, String],
+            required: true,
+        },
+        model: {
+            type: Object,
+            required: true,
+        },
+    },
+    data() {
+        return {
+            visible: false,
+        };
+    },
+    methods: {
+        onSuccess(data) {
+            this.visible = false;
+
+            Object.assign(this.model, data);
+
+            ElNotification({
+                title: "Success",
+                message: "Password updated",
+                type: "success",
+            });
+        },
+    },
+};
+</script>

package/_Build/vue/modules/AuthModule/routes/PUsers/SetPasswordDialog.vue

@@ -0,0 +1,138 @@
+<template>
+    <el-dialog
+        :model-value="true"
+        title="Set Password"
+        width="500px"
+        @close="$emit('close')"
+    >
+        <vel-basic
+            v-model="password"
+            name="password"
+            type="password"
+            label="Password"
+            placeholder="Enter new password"
+            class="AM-mb-2"
+        />
+
+        <vel-basic
+            v-model="passwordConfirmation"
+            name="password_confirmation"
+            type="password"
+            label="Confirm Password"
+            placeholder="Confirm new password"
+            class="AM-mb-2"
+        />
+
+        <div class="AM-mb-2">
+            <p class="font-700 AM-mb-0.5">Password must contain:</p>
+            <p class="m-0">
+                {{ passwordLengthValid ? "✓" : "✗" }} At least 8 characters
+            </p>
+            <p class="m-0">{{ hasLetter ? "✓" : "✗" }} At least one letter</p>
+            <p class="m-0">
+                {{ hasNumberOrSymbol ? "✓" : "✗" }} At least one number or
+                symbol
+            </p>
+        </div>
+
+        <template #footer>
+            <el-button @click="$emit('close')">Cancel</el-button>
+            <el-button
+                type="primary"
+                :disabled="!canSubmit"
+                :loading="loading"
+                @click="submit"
+            >
+                Set Password
+            </el-button>
+        </template>
+    </el-dialog>
+</template>
+
+<script>
+import { ElDialog, ElButton, ElNotification } from "element-plus";
+import VelBasic from "../../../../components/form/basic.vue";
+import axios from "axios";
+
+export default {
+    components: {
+        ElDialog,
+        ElButton,
+        VelBasic,
+    },
+    props: {
+        userId: {
+            type: [Number, String],
+            required: true,
+        },
+    },
+    emits: ["close", "success"],
+    data() {
+        return {
+            password: "",
+            passwordConfirmation: "",
+            loading: false,
+        };
+    },
+    computed: {
+        passwordLengthValid() {
+            return this.password.length >= 8;
+        },
+        hasLetter() {
+            return /[a-zA-Z]/.test(this.password);
+        },
+        hasNumberOrSymbol() {
+            return (
+                /[0-9]/.test(this.password) ||
+                /[!@#$%^&*()_+\-=[\]{};':"\\|,.<>/?]/.test(this.password)
+            );
+        },
+        passwordValid() {
+            return (
+                this.passwordLengthValid &&
+                this.hasLetter &&
+                this.hasNumberOrSymbol
+            );
+        },
+        canSubmit() {
+            return (
+                this.passwordValid &&
+                this.password === this.passwordConfirmation &&
+                this.password.length > 0
+            );
+        },
+    },
+    methods: {
+        async submit() {
+            this.loading = true;
+
+            try {
+                const res = await axios.post(
+                    `/api/users/${this.userId}/set-password`,
+                    {
+                        password: this.password,
+                        password_confirmation: this.passwordConfirmation,
+                    },
+                );
+
+                this.$emit("success", res.data.data);
+            } catch (e) {
+                if (e.response?.status === 422) {
+                    const errors = e.response.data.errors || {};
+                    const message =
+                        Object.values(errors).flat().join("\n") ||
+                        e.response.data.message;
+
+                    ElNotification({
+                        title: "Validation Error",
+                        message,
+                        type: "error",
+                    });
+                }
+            } finally {
+                this.loading = false;
+            }
+        },
+    },
+};
+</script>

package/_Build/vue/modules/AuthModule/routes/PUsers/resource.js

@@ -9,6 +9,7 @@ import usersColumns, { detectedCompany } from "./columns.js";
 import VelFormRole from "../../../../components/layout/FormRole.vue";
 import VelButton from "../../../../components/basic/Button.vue";
 import VelRoleLegend from "../../../../components/layout/RoleLegend.vue";
+import SetPasswordAction from "./SetPasswordAction.vue";
 
 function generatePassword(
     length = 20,
@@ -26,9 +27,8 @@ export default [
     {
         api: {
             params: {
-                index: ({ $route }) => ({
+                index: () => ({
                     include: "company",
-                    "filter[withTrashed]": $route.query.trashed,
                 }),
                 show: () => ({ include: "company" }),
             },
@@ -37,6 +37,7 @@ export default [
             value: "email",
         },
         auditable: true,
+        trashable: true,
         permissions: {
             create: ({ $store }) => $store.getters.can("write users"),
             edit: ({ $store }) => $store.getters.can("write users"),
@@ -152,6 +153,42 @@ export default [
             },
             show: {
                 actions: [
+                    ({ model, $store }) =>
+                        $store.getters.can("write users") &&
+                        !model.email_verified_at &&
+                        h(
+                            VelButton,
+                            {
+                                async onClick() {
+                                    try {
+                                        const res = await axios.post(
+                                            `/api/users/${model.id}/verify`,
+                                        );
+
+                                        Object.assign(model, res.data.data);
+
+                                        ElNotification({
+                                            title: "Success",
+                                            message: "User marked as verified",
+                                            type: "success",
+                                        });
+                                    } catch (e) {
+                                        console.log(e);
+                                    }
+                                },
+                            },
+                            "Mark as Verified",
+                        ),
+                    ({ model, $store }) => {
+                        if (!$store.getters.can("write users")) {
+                            return;
+                        }
+
+                        return h(SetPasswordAction, {
+                            userId: model.id,
+                            model,
+                        });
+                    },
                     ({ model, $store, $root }) =>
                         $store.getters.can("impersonate users") &&
                         h(

package/_Build/vue/modules/AuthModule/routes/change-password.vue

@@ -81,6 +81,7 @@
 
 <script>
 import Form from "form-backend-validation";
+import { guestRequest } from "../js/guest-request";
 
 export default {
     components: {
@@ -126,15 +127,11 @@ export default {
             this.loading = true;
 
             try {
-                const res = await this.form.post("/login");
-
-                if (res["logged-in"]) {
-                    try {
-                        await this.$store.dispatch("logout");
-                    } catch (e) {}
-
-                    await this.form.post("/login");
-                }
+                await guestRequest({
+                    form: this.form,
+                    url: "/login",
+                    store: this.$store,
+                });
             } catch (e) {
                 console.log(e);
             } finally {

package/_Build/vue/modules/AuthModule/routes/force-reset.vue

@@ -50,6 +50,7 @@
 <script>
 import Form from "form-backend-validation";
 import { ElNotification } from "element-plus";
+import { guestRequest } from "../js/guest-request";
 
 export default {
     components: {
@@ -98,15 +99,11 @@ export default {
         },
         async login() {
             try {
-                const res = await this.form.post("/login");
-
-                if (res["logged-in"]) {
-                    try {
-                        await this.$store.dispatch("logout");
-                    } catch (e) {}
-
-                    await this.form.post("/login");
-                }
+                await guestRequest({
+                    form: this.form,
+                    url: "/login",
+                    store: this.$store,
+                });
             } catch (e) {
                 console.log(e);
             } finally {

package/_Build/vue/modules/AuthModule/routes/forgot.vue

@@ -47,6 +47,7 @@
 
 <script>
 import Form from "form-backend-validation";
+import { guestRequest } from "../js/guest-request";
 
 export default {
     components: {
@@ -66,7 +67,11 @@ export default {
     methods: {
         async onSubmit() {
             try {
-                await this.form.post("/forgot-password");
+                await guestRequest({
+                    form: this.form,
+                    url: "/forgot-password",
+                    store: this.$store,
+                });
 
                 this.$router.push({
                     name: "auth.success-forgot",

package/_Build/vue/modules/AuthModule/routes/login.vue

@@ -65,6 +65,7 @@
 
 <script>
 import Form from "form-backend-validation";
+import { guestRequest } from "../js/guest-request";
 
 export default {
     components: {
@@ -93,15 +94,11 @@ export default {
             this.loading = true;
 
             try {
-                const res = await this.form.post("/login");
-
-                if (res["logged-in"]) {
-                    try {
-                        await this.$store.dispatch("logout");
-                    } catch (e) {}
-
-                    await this.form.post("/login");
-                }
+                const res = await guestRequest({
+                    form: this.form,
+                    url: "/login",
+                    store: this.$store,
+                });
 
                 await this.postLogin();
             } catch (e) {

package/_Build/vue/modules/AuthModule/routes/loginsso.vue

@@ -57,6 +57,7 @@
 
 <script>
 import Form from "form-backend-validation";
+import { guestRequest } from "../js/guest-request";
 
 export default {
     components: {
@@ -87,7 +88,12 @@ export default {
             this.loading = true;
 
             try {
-                const res = await this.form.post(`/hydrate/sso/check`);
+                const res = await guestRequest({
+                    form: this.form,
+                    url: "/hydrate/sso/check",
+                    store: this.$store,
+                });
+
                 if (res["redirect_url"]) {
                     this.redirect_url = res["redirect_url"];
                     this.setRedirect();

package/_Build/vue/modules/AuthModule/routes/logout.vue

@@ -1,4 +1,6 @@
 <script>
+import axios from "axios";
+
 export default {
     metaInfo() {
         return {
@@ -11,9 +13,15 @@ export default {
             await this.$store.dispatch("logout");
         } catch {
             /* empty */
-        } finally {
-            this.$router.push({ name: "auth.login" });
         }
+
+        try {
+            await axios.get("/sanctum/csrf-cookie");
+        } catch {
+            /* empty */
+        }
+
+        this.$router.push({ name: "auth.login" });
     },
 };
 </script>

package/_Build/vue/modules/AuthModule/routes/register.vue

@@ -84,6 +84,7 @@
 <script>
 import Form from "form-backend-validation";
 import { ElNotification } from "element-plus";
+import { guestRequest } from "../js/guest-request";
 
 export default {
     components: {
@@ -116,15 +117,12 @@ export default {
             this.loading = true;
 
             try {
-                const res = await this.form.post("/register");
-
-                if (res["logged-in"]) {
-                    try {
-                        await this.$store.dispatch("logout");
-                    } catch (e) {}
+                const res = await guestRequest({
+                    form: this.form,
+                    url: "/register",
+                    store: this.$store,
+                });
 
-                    await this.form.post("/register");
-                }
                 if (res["redirect"]) {
                     // Redirect here
                     this.$router.push({

package/_Build/vue/modules/AuthModule/routes/reset.vue

@@ -66,6 +66,7 @@
 
 <script>
 import Form from "form-backend-validation";
+import { guestRequest } from "../js/guest-request";
 
 export default {
     components: {
@@ -98,7 +99,11 @@ export default {
     methods: {
         async onSubmit() {
             try {
-                const res = await this.form.post("/reset-password");
+                await guestRequest({
+                    form: this.form,
+                    url: "/reset-password",
+                    store: this.$store,
+                });
 
                 this.$router.push({
                     name: "auth.success-reset",

package/_Build/vue/modules/AuthModule/routes/success-forgot.vue

@@ -53,6 +53,7 @@
 <script>
 import Form from "form-backend-validation";
 import { ElNotification } from "element-plus";
+import { guestRequest } from "../js/guest-request";
 
 export default {
     components: {
@@ -77,7 +78,11 @@ export default {
                     this.notification = null;
                 }
 
-                await this.form.post("/forgot-password");
+                await guestRequest({
+                    form: this.form,
+                    url: "/forgot-password",
+                    store: this.$store,
+                });
 
                 ElNotification({
                     type: "success",

package/_Build/vue/modules/resource/index.js

@@ -13,6 +13,7 @@ import {
 } from "element-plus";
 import VelButton from "../../components/basic/Button.vue";
 import VelAudit from "../../components/layout/Audit.vue";
+import { applyTrashable } from "./trashable.js";
 
 export const defaultResource = meta();
 
@@ -20,7 +21,7 @@ export function meta(name = "default", properties = {}) {
     const singular = properties.singular || name.slice(0, -1);
     const slug = properties.slug || kebabCase(name);
 
-    return merge(
+    const result = merge(
         {
             name,
             title: properties.title || name[0].toUpperCase() + name.slice(1),
@@ -52,6 +53,7 @@ export function meta(name = "default", properties = {}) {
                 label: `Search ${name}`,
             },
             auditable: false,
+            trashable: false,
             form: {
                 component: null,
                 submit: null,
@@ -393,6 +395,12 @@ export function meta(name = "default", properties = {}) {
         },
         properties,
     );
+
+    if (result.trashable) {
+        applyTrashable(result);
+    }
+
+    return result;
 }
 
 export function columns(columns = []) {

package/_Build/vue/modules/resource/trashable.js

@@ -0,0 +1,104 @@
+import axios from "axios";
+import { h } from "vue";
+
+import VelTableSorter from "../../components/layout/TableSorter.vue";
+import { ElNotification } from "element-plus";
+import VelButton from "../../components/basic/Button.vue";
+import VelCheckbox from "../../components/form/Checkbox.vue";
+
+export function applyTrashable(result) {
+    const originalStructure = result.index.structure;
+    result.index.structure = (props) => {
+        const structure = originalStructure(props);
+        structure["json-data"].rowClassName = ({ row }) =>
+            row.deleted_at ? "el-table__row--trashed" : "";
+        return structure;
+    };
+
+    result.table.actions.push(({ model, resource }, props) => {
+        const { $emit } = props;
+
+        if (resource.permissions.delete(props, { model }) && model.deleted_at) {
+            return h({
+                data: () => ({
+                    loading: false,
+                }),
+                render() {
+                    return h(
+                        VelButton,
+                        {
+                            tag: "a",
+                            type: "success",
+                            size: "small",
+                            loading: this.loading,
+                            onClick: async () => {
+                                this.loading = true;
+
+                                await axios.post(
+                                    `${resource.api.endpoint(props)}/${model.id}/restore`,
+                                );
+
+                                $emit("reload");
+
+                                ElNotification({
+                                    title: "Success",
+                                    message: `${resource.singularTitle} restored.`,
+                                    type: "success",
+                                });
+
+                                this.loading = false;
+                            },
+                        },
+                        () => "Restore",
+                    );
+                },
+            });
+        }
+    });
+
+    const originalLayout = [...result.index.layout];
+    result.index.layout = [
+        (props) => {
+            const { resource } = props;
+
+            return h({
+                data: () => ({
+                    showTrashed: false,
+                }),
+                methods: {
+                    reload() {
+                        this.$refs.table?.reload();
+                    },
+                },
+                render() {
+                    const structureProps = resource.index.structure(props);
+
+                    if (this.showTrashed) {
+                        structureProps.apiParams = {
+                            ...structureProps.apiParams,
+                            "filter[withTrashed]": 1,
+                        };
+                    }
+
+                    return h("div", [
+                        resource.permissions.delete(props) &&
+                            h(VelCheckbox, {
+                                label: `Show trashed ${resource.name}`,
+                                modelValue: this.showTrashed,
+                                class: "mt-3",
+                                "onUpdate:modelValue": (val) => {
+                                    this.showTrashed = val;
+                                    this.$nextTick(() => this.reload());
+                                },
+                            }),
+                        h(VelTableSorter, {
+                            ...structureProps,
+                            ref: "table",
+                        }),
+                    ]);
+                },
+            });
+        },
+        ...originalLayout.slice(1),
+    ];
+}

package/components/_table.scss

@@ -10,6 +10,9 @@
     .el-table__cell {
         padding: get-ratio(8px) get-ratio(12px);
     }
+    .el-table__row--trashed {
+        color: var(--el-color-danger);
+    }
 }
 
 .table-wrapper {

package/index.js

@@ -1,11 +1,13 @@
 import Router from "./_Build/vue/modules/AuthModule/js/router.js";
 import Axios from "./_Build/vue/modules/AuthModule/js/axios.js";
 import Store from "./_Build/vue/modules/AuthModule/js/store.js";
+import { ImpersonationPlugin } from "./_Build/vue/modules/AuthModule/js/impersonation-banner.js";
 
 export const Auth = {
     Router,
     Axios,
     Store,
+    ImpersonationPlugin,
 };
 
 export { default as Resource } from "./_Build/vue/modules/resource/index.js";

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@fishawack/lab-velocity",
-    "version": "2.0.0-beta.44",
+    "version": "2.0.0-beta.45",
     "description": "Avalere Health branded style system",
     "scripts": {
         "setup": "npm ci || npm i && npm run content",