1️⃣ Database Modification: Add a New Column

Snipe-IT uses MySQL/MariaDB as its database. First, we need to add a new field to store the additional data.

📝 Create a Migration for the New Field

Run the following command in your Snipe-IT installation directory:

sh
php artisan make:migration add_warranty_expiry_to_assets --table=assets

Open the generated migration file in database/migrations/ and modify it:

phpuse Illuminate\Database\Migrations\Migration;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Support\Facades\Schema;

return new class extends Migration {
    public function up()
    {
        Schema::table('assets', function (Blueprint $table) {
            $table->date('warranty_expiry')->nullable()->after('purchase_date');
        });
    }

    public function down()
    {
        Schema::table('assets', function (Blueprint $table) {
            $table->dropColumn('warranty_expiry');
        });
    }
};

Now, apply the migration:

shCopyEditphp artisan migrate

---

2️⃣ Modify the Asset Model

To allow Laravel to interact with this new field, update the Asset model.

📝 Modify app/Models/Asset.php

Add the new field to the $fillable array:

php
protected $fillable = ['name', 'serial', 'purchase_date', 'warranty_expiry', ...];

---

3️⃣ Modify the Backend Controller

If we want the UI to display and edit the new field, update the API controller.

📝 Modify app/Http/Controllers/API/AssetController.php

Ensure the field is included in the response:

phppublic function show($id)
{
    return response()->json(Asset::findOrFail($id));
}

public function update(Request $request, $id)
{
    $asset = Asset::findOrFail($id);
    $asset->update($request->only(['warranty_expiry']));
    return response()->json($asset);
}

---

4️⃣ Modify Blade Templates (UI Update)

Snipe-IT uses Laravel Blade templates for some UI elements. We need to update these views.

📝 Modify resources/views/assets/form.blade.php

Add a new input field inside the <form> section:

html<div class="form-group">
    <label for="warranty_expiry">Warranty Expiry Date</label>
    <input type="date" class="form-control" name="warranty_expiry" value="{{ old('warranty_expiry', $asset->warranty_expiry ?? '') }}">
</div>

---

5️⃣ Modify Vue.js Components for UI

Snipe-IT uses Vue.js for asset management. We need to modify Vue components to display the new field.

📝 Modify resources/js/components/assets/EditAsset.vue

Locate the form section and add:

vue<template>
    <div>
        <!-- Other asset fields -->
        <div class="form-group">
            <label for="warranty_expiry">Warranty Expiry Date</label>
            <input type="date" class="form-control" v-model="asset.warranty_expiry" />
        </div>
    </div>
</template>

<script>
export default {
    data() {
        return {
            asset: {
                warranty_expiry: '' // Initialize the field
            }
        };
    },
    methods: {
        saveAsset() {
            axios.put(`/api/v1/hardware/${this.asset.id}`, this.asset)
                .then(response => {
                    this.$emit('saved', response.data);
                })
                .catch(error => {
                    console.error(error);
                });
        }
    }
}
</script>

---

6️⃣ Rebuild the Frontend

Since we modified Vue components, we need to recompile the assets.

sh
cd /var/www/snipe-it
npm install
npm run dev   # or npm run prod for production

---

7️⃣ Restart Services

Clear caches and restart relevant services:

shphp artisan config:clear
php artisan cache:clear
php artisan queue:restart
systemctl restart nginx  # or Apache

---

✅ The New Field is Now Integrated!

What we achieved: ✅ Database updated to store the field.
✅ Backend model & API updated to process the new field.
✅ Blade templates & Vue.js UI modified to display the field.
✅ Frontend rebuilt & services restarted for deployment.