Update

app/Casts/NetworkRange.php

@@ -34,6 +34,10 @@ public function get($model, string $key, $value, array $attributes)
      */
     public function set($model, string $key, $value, array $attributes)
     {
+        if (is_string($value)) {
+            return $value;
+        }
+
         return $value->getNetworkPortion().'/'.$value->getNetworkSize();
     }
 }

app/Http/Controllers/NetworkController.php

@@ -2,6 +2,7 @@
 
 namespace App\Http\Controllers;
 
+use App\Http\Requests\Network\StoreRequest;
 use App\Models\Network;
 use Illuminate\Http\Request;
 use Inertia\Inertia;
@@ -35,22 +36,32 @@ public function index(): \Inertia\Response
     /**
      * Show the form for creating a new resource.
      *
-     * @return \Illuminate\Http\Response
+     * @return \Inertia\Response
      */
     public function create()
     {
-        //
+        return Inertia::render('Networks/Create');
     }
 
     /**
      * Store a newly created resource in storage.
      *
-     * @param \Illuminate\Http\Request $request
+     * @param \App\Http\Requests\Network\StoreRequest $request
      * @return \Illuminate\Http\RedirectResponse
      */
-    public function store(Request $request)
+    public function store(StoreRequest $request)
     {
-        //
+        $data = $request->validated();
+
+        $network = new Network();
+        $network->name = $data['name'];
+        $network->range = $data['range'];
+
+        if ($network->save()) {
+            return redirect()->route('networks.index')->with('success', 'The network has been successfully added.');
+        }
+
+        return redirect()->back()->withErrors(['alert', 'The network could not be added.']);
     }
 
     /**

app/Http/Controllers/NetworkIpController.php

@@ -21,6 +21,10 @@ public function store(StoreRequest $request, Network $network)
 
         $ip = NetworkIp::where('network_id', $network->id)->where('address', $data['address'])->first();
 
+        usort($data['ports'], function ($a, $b) {
+            return $a['port'] > $b['port'];
+        });
+
         if ($ip) {
             $ip->name = $data['name'];
             $ip->ports = $data['ports'];

app/Http/Requests/Network/StoreRequest.php

@@ -0,0 +1,40 @@
+<?php
+
+namespace App\Http\Requests\Network;
+
+use App\Rules\NetworkRange;
+use Illuminate\Foundation\Http\FormRequest;
+
+class StoreRequest extends FormRequest
+{
+    /**
+     * Determine if the user is authorized to make this request.
+     *
+     * @return bool
+     */
+    public function authorize()
+    {
+        return true;
+    }
+
+    /**
+     * Get the validation rules that apply to the request.
+     *
+     * @return array
+     */
+    public function rules()
+    {
+        return [
+            'name' => [
+                'required',
+                'string',
+                'max:255',
+            ],
+            'range' => [
+                'required',
+                'max:19',
+                new NetworkRange(),
+            ],
+        ];
+    }
+}

resources/js/Pages/Networks/Components/ModifyIpModal.vue

@@ -15,7 +15,7 @@
                         </div>
                         <div class="mb-3">
                             <jet-label for="modifyIpName" value="Name"/>
-                            <jet-input id="modifyIpName" type="text" v-model="form.name" :class="{ 'is-invalid': form.errors.name }" autocomplete="name"/>
+                            <jet-input id="modifyIpName" type="text" v-model="form.name" :class="{ 'is-invalid': form.errors.name }" autocomplete="ip-name"/>
                             <jet-input-error :message="form.errors.name"/>
                         </div>
                         <div class="mb-3">

resources/js/Pages/Networks/Create.vue

@@ -0,0 +1,82 @@
+<template>
+    <app-layout title="Add Network">
+        <template #header>
+            <nav aria-label="breadcrumb">
+                <ol class="breadcrumb m-0">
+                    <li class="breadcrumb-item">
+                        <Link :href="route('networks.index')">Networks</Link>
+                    </li>
+                    <li class="breadcrumb-item active" aria-current="page">Add</li>
+                </ol>
+            </nav>
+        </template>
+
+        <div class="row">
+            <div class="col-6">
+                <div class="card p-0">
+                    <div class="card-body">
+                        <div v-show="form.errors.alert" class="alert alert-danger" role="alert">
+                            {{ form.errors.alert }}
+                        </div>
+                        <form @submit.prevent="submit">
+                            <div class="mb-3">
+                                <jet-label for="storeNetworkName" value="Name"/>
+                                <jet-input required id="storeNetworkName" type="text" v-model="form.name" :class="{ 'is-invalid': form.errors.name }" autocomplete="network-name"/>
+                                <jet-input-error :message="form.errors.name"/>
+                            </div>
+                            <div class="mb-3">
+                                <jet-label for="storeNetworkRange" value="Range"/>
+                                <jet-input required id="storeNetworkRange" type="text" v-model="form.range" :class="{ 'is-invalid': form.errors.range }" autocomplete="network-range" placeholder="0.0.0.0/0"/>
+                                <jet-input-error :message="form.errors.range"/>
+                            </div>
+                            <jet-button>Add</jet-button>
+                        </form>
+                    </div>
+                </div>
+            </div>
+        </div>
+
+    </app-layout>
+</template>
+
+<script>
+import {defineComponent} from "vue"
+import {Link} from "@inertiajs/inertia-vue3";
+import AppLayout from "@/Layouts/AppLayout.vue"
+import LinkButton from "@/Components/LinkButton";
+import JetButton from "@/Jetstream/Button";
+import JetInputError from "@/Jetstream/InputError";
+import JetInput from "@/Jetstream/Input";
+import JetLabel from "@/Jetstream/Label";
+
+export default defineComponent({
+    components: {
+        AppLayout,
+        JetButton,
+        JetInputError,
+        JetInput,
+        JetLabel,
+        Link,
+        LinkButton,
+    },
+    props: {
+        networks: Array
+    },
+    data() {
+        return {
+            form: this.$inertia.form({
+                name: null,
+                range: null,
+            }),
+        };
+    },
+    methods: {
+        submit() {
+            this.form.post(route('networks.store'), {
+                preserveScroll: true,
+                preserveState: true,
+            });
+        }
+    }
+});
+</script>

resources/js/Pages/Networks/Show.vue

@@ -118,7 +118,7 @@ export default defineComponent({
     data: function () {
         return {
             filters: {
-                onlyUsed: true,
+                onlyUsed: this.network.hosts !== 0,
             },
 
             modifyIpForm: null,