Merge branch 'feat/create-projects' into develop

app/controllers/projects_controller.ts

@@ -0,0 +1,54 @@
+// app/controllers/projects_controller.ts
+import Project from '#models/project';
+import type { HttpContext } from '@adonisjs/core/http';
+import { createProjectValidator, updateProjectValidator } from '#validators/project';
+
+export default class ProjectsController {
+    // GET /settings/projects
+    public async index({ inertia, auth }: HttpContext) {
+        const projects = await Project.all();
+        // return inertia.render('Admin/Project/Index', { projects });
+        return inertia.render('Admin/Project/Index', {
+            projects: projects,
+            can: {
+                edit: await auth.user?.can(['settings']),
+                create: await auth.user?.can(['settings']),
+            },
+        });
+    }
+
+    // GET /settings/projects/create
+    public async create({ inertia }: HttpContext) {
+        return inertia.render('Admin/Project/Create');
+    }
+
+    // POST /settings/projects
+    public async store({ request, response, session }: HttpContext) {
+        // Validate the request data
+        const data = await request.validateUsing(createProjectValidator);
+
+        await Project.create(data);
+
+        session.flash('success', 'Project created successfully');
+        return response.redirect().toRoute('settings.project.index');
+    }
+
+    // GET /settings/projects/:id/edit
+    public async edit({ params, inertia }: HttpContext) {
+        const project = await Project.findOrFail(params.id);
+        return inertia.render('Admin/Project/Edit', { project });
+    }
+
+    // PUT /settings/projects/:id
+    public async update({ params, request, response, session }: HttpContext) {
+        const project = await Project.findOrFail(params.id);
+        
+        // Validate the request data
+        const data = await request.validateUsing(updateProjectValidator);
+
+        await project.merge(data).save();
+
+        session.flash('success', 'Project updated successfully');
+        return response.redirect().toRoute('settings.project.index');
+    }
+}

app/validators/project.ts

@@ -0,0 +1,28 @@
+// app/validators/project.ts
+import vine from '@vinejs/vine';
+
+export const createProjectValidator = vine.compile(
+    vine.object({
+        label: vine.string().trim().minLength(1).maxLength(50),
+        name: vine
+            .string()
+            .trim()
+            .minLength(3)
+            .maxLength(255)
+            .regex(/^[a-z0-9-]+$/),
+        description: vine.string().trim().maxLength(255).minLength(5).optional(),
+    }),
+);
+
+export const updateProjectValidator = vine.compile(
+    vine.object({
+        // label is NOT included since it's readonly
+        name: vine
+            .string()
+            .trim()
+            .minLength(3)
+            .maxLength(255)
+            .regex(/^[a-z0-9-]+$/),
+         description: vine.string().trim().maxLength(255).minLength(5).optional(),
+    }),
+);

resources/js/Layouts/LayoutAuthenticated.vue

@@ -14,11 +14,11 @@ const props = defineProps({
     showAsideMenu: {
       type: Boolean,
       default: true // Set default value to true
+    },
+    hasProgressBar: {
+      type: Boolean,
+      default: false // New prop to indicate if progress bar is shown
     }
-	// user: {
-	// 	type: Object,
-	// 	default: () => ({}),
-	// }
 });
 </script>
 
@@ -29,9 +29,18 @@ const props = defineProps({
     }">
         <div :class="{ 
             'ml-60 lg:ml-0': layoutService.isAsideMobileExpanded,
-            'xl:pl-60': props.showAsideMenu==true }"
+            'xl:pl-60': props.showAsideMenu==true,
-            class="pt-14  min-h-screen w-screen transition-position lg:w-auto bg-gray-50 dark:bg-slate-800 dark:text-slate-100">
+            'pt-14': !props.hasProgressBar,
-            <NavBar :class="{ 'ml-60 lg:ml-0': layoutService.isAsideMobileExpanded }" :showBurger="props.showAsideMenu" />
+            'pt-24': props.hasProgressBar // Increased padding when progress bar is present (pt-14 + height of progress bar)
+        }"
+            class="min-h-screen w-screen transition-position lg:w-auto bg-gray-50 dark:bg-slate-800 dark:text-slate-100">
+            <NavBar 
+                :class="{ 
+                    'ml-60 lg:ml-0': layoutService.isAsideMobileExpanded,
+                    'top-10': props.hasProgressBar // Push NavBar down when progress bar is present
+                }" 
+                :showBurger="props.showAsideMenu" 
+            />
             <!-- Conditionally render AsideMenu based on showAsideMenu prop -->
             <template v-if="showAsideMenu">
                 <AsideMenu />

resources/js/Pages/Admin/License/Index.vue

@@ -1,6 +1,6 @@
 <script lang="ts" setup>
-import { usePage } from '@inertiajs/vue3';
+import { Head, usePage } from '@inertiajs/vue3';
-import { mdiAccountKey, mdiSquareEditOutline, mdiAlertBoxOutline } from '@mdi/js';
+import { mdiLicense, mdiCheckCircle, mdiCloseCircle, mdiAlertBoxOutline } from '@mdi/js';
 import { computed, ComputedRef } from 'vue';
 import LayoutAuthenticated from '@/Layouts/LayoutAuthenticated.vue';
 import SectionMain from '@/Components/SectionMain.vue';
@@ -9,107 +9,150 @@ import BaseButton from '@/Components/BaseButton.vue';
 import CardBox from '@/Components/CardBox.vue';
 import BaseButtons from '@/Components/BaseButtons.vue';
 import NotificationBar from '@/Components/NotificationBar.vue';
-// import Pagination from '@/Components/Admin/Pagination.vue';
-// import Sort from '@/Components/Admin/Sort.vue';
 import { stardust } from '@eidellev/adonis-stardust/client';
-// import CardBoxModal from '@/Components/CardBoxModal.vue';
 
-// const isModalDangerActive = ref(false);
+interface License {
-// const deleteId = ref();
+    id: number;
+    name: string;
+    sort_order: number;
+    active: boolean;
+}
 
-defineProps({
+const props = defineProps({
     licenses: {
-        type: Object,
+        type: Array<License>,
-        default: () => ({}),
+        default: () => [],
     },
-    // filters: {
-    //     type: Object,
-    //     default: () => ({}),
-    // },
     can: {
         type: Object,
         default: () => ({}),
     },
 });
 
-const flash: ComputedRef<any> = computed(() => {
+const flash: ComputedRef<any> = computed(() => usePage().props.flash);
-    // let test = usePage();
-    // console.log(test);
-    return usePage().props.flash;
-});
 
+const licenseCount = computed(() => props.licenses.length);
 
+const getLicenseColor = (index: number) => {
+    const colors = [
+        'bg-emerald-100 text-emerald-800 dark:bg-emerald-900 dark:text-emerald-300',
+        'bg-blue-100 text-blue-800 dark:bg-blue-900 dark:text-blue-300',
+        'bg-violet-100 text-violet-800 dark:bg-violet-900 dark:text-violet-300',
+        'bg-amber-100 text-amber-800 dark:bg-amber-900 dark:text-amber-300',
+        'bg-rose-100 text-rose-800 dark:bg-rose-900 dark:text-rose-300',
+        'bg-cyan-100 text-cyan-800 dark:bg-cyan-900 dark:text-cyan-300',
+    ];
+    return colors[index % colors.length];
+};
 </script>
 
 <template>
-
     <LayoutAuthenticated>
-
         <Head title="Licenses" />
         <SectionMain>
-            <SectionTitleLineWithButton :icon="mdiAccountKey" title="Licenses" main>
+            <SectionTitleLineWithButton :icon="mdiLicense" title="Licenses" main>
-                <!-- <BaseButton
+                <div class="flex items-center gap-3">
-                    v-if="can.create"
+                    <span class="text-sm text-gray-500 dark:text-gray-400 font-medium">
-                    :route-name="stardust.route('settings.role.create')"
+                        {{ licenseCount }} {{ licenseCount === 1 ? 'license' : 'licenses' }}
-                    :icon="mdiPlus"
+                    </span>
-                    label="Add"
+                </div>
-                    color="info"
-                    rounded-full
-                    small
-                /> -->
             </SectionTitleLineWithButton>
+
             <NotificationBar v-if="flash.message" color="success" :icon="mdiAlertBoxOutline">
                 {{ flash.message }}
             </NotificationBar>
+
             <CardBox class="mb-6" has-table>
-            </CardBox>
-            <CardBox class="mb-6" has-form-data>
                 <table>
                     <thead>
                         <tr>
-                            <th>
+                            <th>Name</th>
-                                <!-- <Sort label="Name" attribute="name" /> -->
+                            <th>Sort Order</th>
-                                Name
+                            <th>Status</th>
-                            </th>
-                            <th>
-                                <!-- <Sort label="Sort Order" attribute="sort_order" /> -->
-                                Sort Order
-                            </th>
                             <th v-if="can.edit">Actions</th>
-
                         </tr>
                     </thead>
 
                     <tbody>
-                        <tr v-for="license in licenses" :key="license.id">
+                        <tr v-if="licenses.length === 0">
+                            <td colspan="4" class="text-center py-12">
+                                <div class="flex flex-col items-center justify-center text-gray-500 dark:text-gray-400">
+                                    <p class="text-lg font-medium mb-2">No licenses found</p>
+                                    <p class="text-sm">Licenses will appear here once configured</p>
+                                </div>
+                            </td>
+                        </tr>
+                        <tr
+                            v-for="(license, index) in licenses"
+                            :key="license.id"
+                            class="hover:bg-gray-50 dark:hover:bg-slate-800 transition-colors"
+                        >
                             <td data-label="Name">
-                                <!-- <Link
+                                <span
-                                    :href="stardust.route('settings.role.show', [role.id])"
+                                    class="inline-flex items-center px-3 py-1 rounded-full text-sm font-medium transition-all hover:shadow-md"
-                                    class="no-underline hover:underline text-cyan-600 dark:text-cyan-400"
+                                    :class="getLicenseColor(index)"
                                 >
                                     {{ license.name }}
-                                </Link> -->
+                                </span>
-                                {{ license.name }}
                             </td>
-                            <td data-label="Description">
+                            <td data-label="Sort Order">
-                                {{ license.sort_order }}
+                                <span
+                                    class="inline-flex items-center justify-center w-8 h-8 rounded-full bg-gray-100 dark:bg-slate-700 text-gray-700 dark:text-gray-300 font-semibold text-sm"
+                                >
+                                    {{ license.sort_order }}
+                                </span>
+                            </td>
+                            <td data-label="Status">
+                                <span
+                                    v-if="license.active"
+                                    class="inline-flex items-center gap-1 px-2.5 py-1 rounded-full text-xs font-medium bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-300"
+                                >
+                                    <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 20 20">
+                                        <path
+                                            fill-rule="evenodd"
+                                            d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z"
+                                            clip-rule="evenodd"
+                                        />
+                                    </svg>
+                                    Active
+                                </span>
+                                <span
+                                    v-else
+                                    class="inline-flex items-center gap-1 px-2.5 py-1 rounded-full text-xs font-medium bg-gray-100 text-gray-800 dark:bg-gray-800 dark:text-gray-300"
+                                >
+                                    <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 20 20">
+                                        <path
+                                            fill-rule="evenodd"
+                                            d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z"
+                                            clip-rule="evenodd"
+                                        />
+                                    </svg>
+                                    Inactive
+                                </span>
                             </td>
-
                             <td v-if="can.edit" class="before:hidden lg:w-1 whitespace-nowrap">
                                 <BaseButtons type="justify-start lg:justify-end" no-wrap>
-                                    <BaseButton v-if="license.active"
+                                    <BaseButton
+                                        v-if="license.active"
                                         :route-name="stardust.route('settings.license.down', [license.id])"
-                                        color="warning" :icon="mdiSquareEditOutline" label="deactivate" small />
+                                        color="warning"
-                                    <BaseButton v-else :route-name="stardust.route('settings.license.up', [license.id])"
+                                        :icon="mdiCloseCircle"
-                                        color="success" :icon="mdiSquareEditOutline" label="activate" small />
+                                        label="Deactivate"
+                                        small
+                                    />
+                                    <BaseButton
+                                        v-else
+                                        :route-name="stardust.route('settings.license.up', [license.id])"
+                                        color="success"
+                                        :icon="mdiCheckCircle"
+                                        label="Activate"
+                                        small
+                                    />
                                 </BaseButtons>
                             </td>
                         </tr>
                     </tbody>
                 </table>
-                <!-- <div class="py-4">
-					<Pagination v-bind:data="roles.meta" />
-				</div> -->
             </CardBox>
         </SectionMain>
     </LayoutAuthenticated>

resources/js/Pages/Admin/Project/Create.vue

@@ -0,0 +1,135 @@
+<script lang="ts" setup>
+import { Head, useForm } from '@inertiajs/vue3';
+import { mdiFolderPlus, mdiArrowLeftBoldOutline, mdiFormTextarea, mdiContentSave } from '@mdi/js';
+import LayoutAuthenticated from '@/Layouts/LayoutAuthenticated.vue';
+import SectionMain from '@/Components/SectionMain.vue';
+import SectionTitleLineWithButton from '@/Components/SectionTitleLineWithButton.vue';
+import CardBox from '@/Components/CardBox.vue';
+import FormField from '@/Components/FormField.vue';
+import FormControl from '@/Components/FormControl.vue';
+import BaseButton from '@/Components/BaseButton.vue';
+import BaseButtons from '@/Components/BaseButtons.vue';
+import { stardust } from '@eidellev/adonis-stardust/client';
+
+const form = useForm({
+    label: '',
+    name: '',
+    description: '',
+});
+
+const submit = async () => {
+    await form.post(stardust.route('settings.project.store'));
+};
+</script>
+
+<template>
+    <LayoutAuthenticated>
+        <Head title="Create New Project" />
+        <SectionMain>
+            <SectionTitleLineWithButton :icon="mdiFolderPlus" title="Create New Project" main>
+                <BaseButton
+                    :route-name="stardust.route('settings.project.index')"
+                    :icon="mdiArrowLeftBoldOutline"
+                    label="Back"
+                    color="white"
+                    rounded-full
+                    small
+                />
+            </SectionTitleLineWithButton>
+
+            <CardBox form @submit.prevent="submit()" class="shadow-lg">
+                <div class="grid grid-cols-1 gap-6">
+                    <FormField label="Label" help="Required. Displayed project label" :class="{ 'text-red-400': form.errors.label }">
+                        <FormControl
+                            v-model="form.label"
+                            type="text"
+                            placeholder="e.g., my-awesome-project"                           
+                            required
+                            :error="form.errors.label"
+                            class="transition-all focus:ring-2 focus:ring-blue-500"
+                        >
+                            <div class="text-red-400 text-sm mt-1" v-if="form.errors.label">
+                                {{ form.errors.label }}
+                            </div>
+                        </FormControl>
+                    </FormField>
+
+                    <FormField
+                        label="Name"
+                        help="Required. Project identifier (slug, lowercase, no spaces)"
+                        :class="{ 'text-red-400': form.errors.name }"
+                    >
+                        <FormControl
+                            v-model="form.name"
+                            type="text"
+                            placeholder="Enter a descriptive titel..."
+                            required
+                            :error="form.errors.name"
+                            class="font-mono transition-all focus:ring-2 focus:ring-blue-500"
+                        >
+                            <div class="text-red-400 text-sm mt-1" v-if="form.errors.name">
+                                {{ form.errors.name }}
+                            </div>
+                        </FormControl>
+                    </FormField>
+
+                    <FormField
+                        label="Description"
+                        help="Optional. Detailed description of the project"
+                        :class="{ 'text-red-400': form.errors.description }"
+                    >
+                        <FormControl
+                            v-model="form.description"
+                            :icon="mdiFormTextarea"
+                            name="description"
+                            type="textarea"
+                            placeholder="Describe what this project is about..."
+                            :error="form.errors.description"
+                            class="transition-all focus:ring-2 focus:ring-blue-500"
+                        >
+                            <div class="text-red-400 text-sm mt-1" v-if="form.errors.description">
+                                {{ form.errors.description }}
+                            </div>
+                        </FormControl>
+                    </FormField>
+                </div>
+
+                <template #footer>
+                    <BaseButtons class="justify-between">
+                        <BaseButton :route-name="stardust.route('settings.project.index')" label="Cancel" color="white" outline />
+                        <BaseButton
+                            type="submit"
+                            color="info"
+                            :icon="mdiContentSave"
+                            label="Create Project"
+                            :class="{ 'opacity-25': form.processing }"
+                            :disabled="form.processing"
+                            class="transition-all hover:shadow-lg"
+                        />
+                    </BaseButtons>
+                </template>
+            </CardBox>
+
+            <!-- Helper Card -->
+            <CardBox
+                class="mt-6 bg-gradient-to-br from-blue-50 to-indigo-50 dark:from-slate-800 dark:to-slate-900 border-l-4 border-blue-500"
+            >
+                <div class="flex items-start gap-4">
+                    <div class="flex-shrink-0">
+                        <div class="w-10 h-10 rounded-full bg-blue-500 dark:bg-blue-600 flex items-center justify-center">
+                            <span class="text-white text-lg">💡</span>
+                        </div>
+                    </div>
+                    <div class="flex-1">
+                        <h3 class="text-sm font-semibold text-gray-900 dark:text-white mb-2">Quick Tips</h3>
+                        <ul class="text-sm text-gray-700 dark:text-gray-300 space-y-1">
+                            <li>• <strong>Label</strong> is a technical identifier (use lowercase and hyphens) </li>
+                            <li>• <strong>Name</strong> is what users will see in the interface - short title</li>
+                            <li>• <strong>Description</strong> helps team members understand the project's purpose</li>
+                        </ul>
+                    </div>
+                </div>
+            </CardBox>
+        </SectionMain>
+    </LayoutAuthenticated>
+</template>

resources/js/Pages/Admin/Project/Edit.vue

@@ -0,0 +1,154 @@
+<script lang="ts" setup>
+import { Head, useForm } from '@inertiajs/vue3';
+import { mdiFolderEdit, mdiArrowLeftBoldOutline, mdiFormTextarea, mdiContentSave } from '@mdi/js';
+import LayoutAuthenticated from '@/Layouts/LayoutAuthenticated.vue';
+import SectionMain from '@/Components/SectionMain.vue';
+import SectionTitleLineWithButton from '@/Components/SectionTitleLineWithButton.vue';
+import CardBox from '@/Components/CardBox.vue';
+import FormField from '@/Components/FormField.vue';
+import FormControl from '@/Components/FormControl.vue';
+import BaseButton from '@/Components/BaseButton.vue';
+import BaseButtons from '@/Components/BaseButtons.vue';
+import { stardust } from '@eidellev/adonis-stardust/client';
+
+const props = defineProps({
+    project: {
+        type: Object,
+        required: true,
+    },
+});
+
+const form = useForm({
+    label: props.project.label,
+    name: props.project.name,
+    description: props.project.description,
+});
+
+const submit = async () => {
+    await form.put(stardust.route('settings.project.update', [props.project.id]));
+};
+</script>
+
+<template>
+    <LayoutAuthenticated>
+        <Head :title="`Edit ${project.label}`" />
+        <SectionMain>
+            <SectionTitleLineWithButton :icon="mdiFolderEdit" :title="`Edit: ${project.label}`" main>
+                <BaseButton
+                    :route-name="stardust.route('settings.project.index')"
+                    :icon="mdiArrowLeftBoldOutline"
+                    label="Back"
+                    color="white"
+                    rounded-full
+                    small
+                />
+            </SectionTitleLineWithButton>
+            
+            <CardBox form @submit.prevent="submit()" class="shadow-lg">
+                <div class="grid grid-cols-1 gap-6">
+                    <FormField 
+                        label="Label" 
+                        help="Project label (read-only)" 
+                    >
+                        <FormControl 
+                            v-model="form.label" 
+                            type="text" 
+                            :is-read-only=true                         
+                            class="bg-gray-100 dark:bg-slate-800 cursor-not-allowed opacity-75"
+                        />
+                    </FormField>
+
+                    <FormField 
+                        label="Name" 
+                        help="Required. Project identifier (slug)" 
+                        :class="{ 'text-red-400': form.errors.name }"
+                    >
+                        <FormControl 
+                            v-model="form.name" 
+                            type="text" 
+                            placeholder="Enter Name" 
+                            required 
+                            :error="form.errors.name"
+                            class="font-mono transition-all focus:ring-2 focus:ring-blue-500"
+                        >
+                            <div class="text-red-400 text-sm mt-1" v-if="form.errors.name">
+                                {{ form.errors.name }}
+                            </div>
+                        </FormControl>
+                    </FormField>
+
+                    <FormField
+                        label="Description"
+                        help="Optional. Detailed description of the project"
+                        :class="{ 'text-red-400': form.errors.description }"
+                    >
+                        <FormControl
+                            v-model="form.description"
+                            :icon="mdiFormTextarea"
+                            name="description"
+                            type="textarea"
+                            placeholder="Enter project description..."
+                            :error="form.errors.description"
+                            class="transition-all focus:ring-2 focus:ring-blue-500"
+                        >
+                            <div class="text-red-400 text-sm mt-1" v-if="form.errors.description">
+                                {{ form.errors.description }}
+                            </div>
+                        </FormControl>
+                    </FormField>
+                </div>
+
+                <template #footer>
+                    <BaseButtons class="justify-between">
+                        <BaseButton
+                            :route-name="stardust.route('settings.project.index')"
+                            label="Cancel"
+                            color="white"
+                            outline
+                        />
+                        <BaseButton
+                            type="submit"
+                            color="info"
+                            :icon="mdiContentSave"
+                            label="Save Changes"
+                            :class="{ 'opacity-25': form.processing }"
+                            :disabled="form.processing"
+                            class="transition-all hover:shadow-lg"
+                        />
+                    </BaseButtons>
+                </template>
+            </CardBox>
+
+            <!-- Project Info Card -->
+            <CardBox class="mt-6 bg-gradient-to-br from-gray-50 to-gray-100 dark:from-slate-800 dark:to-slate-900">
+                <div class="flex items-start gap-4">
+                    <div class="flex-shrink-0">
+                        <div class="w-12 h-12 rounded-lg bg-blue-500 dark:bg-blue-600 flex items-center justify-center">
+                            <span class="text-white text-xl font-bold">
+                                {{ project.label.charAt(0).toUpperCase() }}
+                            </span>
+                        </div>
+                    </div>
+                    <div class="flex-1 min-w-0">
+                        <h3 class="text-lg font-semibold text-gray-900 dark:text-white mb-1">
+                            {{ project.label }}
+                        </h3>
+                        <p class="text-sm font-mono text-gray-600 dark:text-gray-400 mb-2">
+                            {{ project.name }}
+                        </p>
+                        <div class="flex items-center gap-4 text-xs text-gray-500 dark:text-gray-500">
+                            <span>
+                                <span class="font-medium">Created:</span> 
+                                {{ new Date(project.created_at).toLocaleDateString() }}
+                            </span>
+                            <span>
+                                <span class="font-medium">Updated:</span> 
+                                {{ new Date(project.updated_at).toLocaleDateString() }}
+                            </span>
+                        </div>
+                    </div>
+                </div>
+            </CardBox>
+        </SectionMain>
+    </LayoutAuthenticated>
+</template>

resources/js/Pages/Admin/Project/Index.vue

@@ -0,0 +1,182 @@
+<script setup>
+import { Head, Link, useForm, usePage } from '@inertiajs/vue3';
+import { mdiFolderMultiple, mdiPlus, mdiSquareEditOutline, mdiTrashCan, mdiAlertBoxOutline } from '@mdi/js';
+import { computed, ref } from 'vue';
+import LayoutAuthenticated from '@/Layouts/LayoutAuthenticated.vue';
+import SectionMain from '@/Components/SectionMain.vue';
+import SectionTitleLineWithButton from '@/Components/SectionTitleLineWithButton.vue';
+import BaseButton from '@/Components/BaseButton.vue';
+import CardBox from '@/Components/CardBox.vue';
+import BaseButtons from '@/Components/BaseButtons.vue';
+import NotificationBar from '@/Components/NotificationBar.vue';
+import CardBoxModal from '@/Components/CardBoxModal.vue';
+import { stardust } from '@eidellev/adonis-stardust/client';
+
+const isModalDangerActive = ref(false);
+const deleteId = ref();
+
+const props = defineProps({
+    projects: {
+        type: Array,
+        default: () => [],
+    },
+    can: {
+        type: Object,
+        default: () => ({}),
+    },
+});
+
+const flash = computed(() => usePage().props.flash);
+
+const projectCount = computed(() => props.projects.length);
+
+const formDelete = useForm({});
+
+const destroy = (id) => {
+    deleteId.value = id;
+    isModalDangerActive.value = true;
+};
+
+const onConfirm = async (id) => {
+    await formDelete.delete(stardust.route('settings.project.destroy', [id]));
+    deleteId.value = null;
+};
+
+const onCancel = () => {
+    deleteId.value = null;
+};
+
+const truncate = (text, length = 30) => {
+    if (!text) return '';
+    return text.length > length ? text.substring(0, length) + '...' : text;
+};
+
+const getProjectColor = (index) => {
+    const colors = [
+        'bg-blue-100 text-blue-800 dark:bg-blue-900 dark:text-blue-300',
+        'bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-300',
+        'bg-purple-100 text-purple-800 dark:bg-purple-900 dark:text-purple-300',
+        'bg-orange-100 text-orange-800 dark:bg-orange-900 dark:text-orange-300',
+        'bg-pink-100 text-pink-800 dark:bg-pink-900 dark:text-pink-300',
+        'bg-indigo-100 text-indigo-800 dark:bg-indigo-900 dark:text-indigo-300',
+    ];
+    return colors[index % colors.length];
+};
+</script>
+
+<template>
+    <CardBoxModal
+        v-model="isModalDangerActive"
+        :delete-id="deleteId"
+        large-title="Delete Project"
+        button="danger"
+        button-label="Delete"
+        has-cancel
+        @confirm="onConfirm"
+        @cancel="onCancel"
+    >
+        <p>Are you sure you want to delete this project?</p>
+        <p>This action cannot be undone.</p>
+    </CardBoxModal>
+
+    <LayoutAuthenticated>
+        <Head title="Projects" />
+        <SectionMain>
+            <SectionTitleLineWithButton :icon="mdiFolderMultiple" title="Projects" main>
+                <div class="flex items-center gap-3">
+                    <span class="text-sm text-gray-500 dark:text-gray-400 font-medium">
+                        {{ projectCount }} {{ projectCount === 1 ? 'project' : 'projects' }}
+                    </span>
+                    <BaseButton
+                        v-if="can.create"
+                        :route-name="stardust.route('settings.project.create')"
+                        :icon="mdiPlus"
+                        label="New Project"
+                        color="info"
+                        rounded-full
+                        small
+                        class="shadow-md hover:shadow-lg transition-shadow"
+                    />
+                </div>
+            </SectionTitleLineWithButton>
+            
+            <NotificationBar v-if="flash.message" color="success" :icon="mdiAlertBoxOutline">
+                {{ flash.message }}
+            </NotificationBar>
+
+            <CardBox class="mb-6" has-table>
+                <table>
+                    <thead>
+                        <tr>
+                            <th>Label</th>
+                            <th>Name</th>
+                            <th v-if="can.edit || can.delete">Actions</th>
+                        </tr>
+                    </thead>
+
+                    <tbody>
+                        <tr v-if="projects.length === 0">
+                            <td colspan="3" class="text-center py-12">
+                                <div class="flex flex-col items-center justify-center text-gray-500 dark:text-gray-400">
+                                    <mdiFolderMultiple class="w-16 h-16 mb-4 opacity-50" />
+                                    <p class="text-lg font-medium mb-2">No projects yet</p>
+                                    <p class="text-sm mb-4">Get started by creating your first project</p>
+                                    <BaseButton
+                                        v-if="can.create"
+                                        :route-name="stardust.route('settings.project.create')"
+                                        :icon="mdiPlus"
+                                        label="Create Project"
+                                        color="info"
+                                        small
+                                    />
+                                </div>
+                            </td>
+                        </tr>
+                        <tr v-for="(project, index) in projects" :key="project.id" class="hover:bg-gray-50 dark:hover:bg-slate-800 transition-colors">
+                            <td data-label="Label">
+                                <!-- <Link
+                                    :href="stardust.route('settings.project.show', [project.id])"
+                                    class="no-underline hover:underline"
+                                > -->
+                                    <span 
+                                        class="inline-flex items-center px-3 py-1 rounded-full text-sm font-medium transition-all hover:shadow-md"
+                                        :class="getProjectColor(index)"
+                                        :title="project.label"
+                                    >
+                                        {{ truncate(project.label, 30) }}
+                                    </span>
+                                <!-- </Link> -->
+                            </td>
+                            <td data-label="Name">
+                                <span 
+                                    class="text-gray-700 dark:text-gray-300 font-mono text-sm"
+                                    :title="project.name"
+                                >
+                                    {{ truncate(project.name, 40) }}
+                                </span>
+                            </td>
+                            <td v-if="can.edit || can.delete" class="before:hidden lg:w-1 whitespace-nowrap">
+                                <BaseButtons type="justify-start lg:justify-end" no-wrap>
+                                    <BaseButton
+                                        v-if="can.edit"
+                                        :route-name="stardust.route('settings.project.edit', [project.id])"
+                                        color="info"
+                                        :icon="mdiSquareEditOutline"
+                                        small
+                                    />
+                                    <BaseButton
+                                        v-if="can.delete"
+                                        color="danger"
+                                        :icon="mdiTrashCan"
+                                        small
+                                        @click="destroy(project.id)"
+                                    />
+                                </BaseButtons>
+                            </td>
+                        </tr>
+                    </tbody>
+                </table>
+            </CardBox>
+        </SectionMain>
+    </LayoutAuthenticated>
+</template>

resources/js/Pages/Admin/Role/Index.vue

@@ -1,7 +1,7 @@
-<script setup>
+<script lang="ts" setup>
 import { Head, Link, useForm, usePage } from '@inertiajs/vue3';
 import { mdiAccountKey, mdiPlus, mdiSquareEditOutline, mdiTrashCan, mdiAlertBoxOutline } from '@mdi/js';
-import { computed, ref } from 'vue';
+import { computed, ref, ComputedRef } from 'vue';
 import LayoutAuthenticated from '@/Layouts/LayoutAuthenticated.vue';
 import SectionMain from '@/Components/SectionMain.vue';
 import SectionTitleLineWithButton from '@/Components/SectionTitleLineWithButton.vue';
@@ -9,18 +9,23 @@ import BaseButton from '@/Components/BaseButton.vue';
 import CardBox from '@/Components/CardBox.vue';
 import BaseButtons from '@/Components/BaseButtons.vue';
 import NotificationBar from '@/Components/NotificationBar.vue';
-import Pagination from '@/Components/Admin/Pagination.vue';
+import CardBoxModal from '@/Components/CardBoxModal.vue';
 import Sort from '@/Components/Admin/Sort.vue';
 import { stardust } from '@eidellev/adonis-stardust/client';
-import CardBoxModal from '@/Components/CardBoxModal.vue';
+
+interface Role {
+    id: number;
+    name: string;
+    description: string;
+}
 
 const isModalDangerActive = ref(false);
 const deleteId = ref();
 
 const props = defineProps({
     roles: {
-        type: Object,
+        type: Array<Role>,
-        default: () => ({}),
+        default: () => [],
     },
     filters: {
         type: Object,
@@ -32,88 +37,89 @@ const props = defineProps({
     },
 });
 
-const flash = computed(() => {
+const flash: ComputedRef<any> = computed(() => usePage().props.flash);
-    // let test = usePage();
-    // console.log(test);
-    return usePage().props.flash;
-});
 
-const form = useForm({
+// const form = useForm({
-    search: props.filters.search,
+//     search: props.filters.search,
-});
+// });
+
+const roleCount = computed(() => props.roles.length);
 
 const formDelete = useForm({});
-const destroy = (id, e) => {
+
-    // console.log(id);
+const destroy = (id: number) => {
     deleteId.value = id;
     isModalDangerActive.value = true;
 };
 
-const onConfirm = async (id) => {
+const onConfirm = async (id: number) => {
-    // let id = 6;
     await formDelete.delete(stardust.route('settings.role.destroy', [id]));
     deleteId.value = null;
 };
 
-const onCancel = (id) => {
+const onCancel = () => {
-    // console.log('cancel');
     deleteId.value = null;
 };
+
+const getRoleColor = (index: number) => {
+    const colors = [
+        'bg-purple-100 text-purple-800 dark:bg-purple-900 dark:text-purple-300',
+        'bg-blue-100 text-blue-800 dark:bg-blue-900 dark:text-blue-300',
+        'bg-pink-100 text-pink-800 dark:bg-pink-900 dark:text-pink-300',
+        'bg-indigo-100 text-indigo-800 dark:bg-indigo-900 dark:text-indigo-300',
+        'bg-teal-100 text-teal-800 dark:bg-teal-900 dark:text-teal-300',
+        'bg-orange-100 text-orange-800 dark:bg-orange-900 dark:text-orange-300',
+    ];
+    return colors[index % colors.length];
+};
+
+const truncate = (text: string, length = 50) => {
+    if (!text) return '-';
+    return text.length > length ? text.substring(0, length) + '...' : text;
+};
 </script>
 
 <template>
     <CardBoxModal
         v-model="isModalDangerActive"
         :delete-id="deleteId"
-        large-title="Please confirm"
+        large-title="Delete Role"
         button="danger"
         button-label="Delete"
         has-cancel
-        v-on:confirm="onConfirm"
+        @confirm="onConfirm"
-        v-on:cancel="onCancel"
+        @cancel="onCancel"
     >
-        <p>Lorem ipsum dolor sit amet <b>adipiscing elit</b></p>
+        <p>Are you sure you want to delete this role?</p>
-        <p>This is sample modal</p>
+        <p>This action cannot be undone.</p>
     </CardBoxModal>
 
     <LayoutAuthenticated>
         <Head title="Roles" />
         <SectionMain>
             <SectionTitleLineWithButton :icon="mdiAccountKey" title="Roles" main>
-                <BaseButton
+                <div class="flex items-center gap-3">
-                    v-if="can.create"
+                    <span class="text-sm text-gray-500 dark:text-gray-400 font-medium">
-                    :route-name="stardust.route('settings.role.create')"
+                        {{ roleCount }} {{ roleCount === 1 ? 'role' : 'roles' }}
-                    :icon="mdiPlus"
+                    </span>
-                    label="Add"
+                    <BaseButton
-                    color="info"
+                        v-if="can.create"
-                    rounded-full
+                        :route-name="stardust.route('settings.role.create')"
-                    small
+                        :icon="mdiPlus"
-                />
+                        label="New Role"
+                        color="info"
+                        rounded-full
+                        small
+                        class="shadow-md hover:shadow-lg transition-shadow"
+                    />
+                </div>
             </SectionTitleLineWithButton>
+
             <NotificationBar v-if="flash.message" color="success" :icon="mdiAlertBoxOutline">
                 {{ flash.message }}
             </NotificationBar>
+
             <CardBox class="mb-6" has-table>
-                <!-- <form @submit.prevent="form.get(stardust.route('role.index'))">
-					<div class="py-2 flex">
-						<div class="flex pl-4">
-							<input
-								type="search"
-								v-model="form.search"
-								class="rounded-md shadow-sm border-gray-300 focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50"
-								placeholder="Search"
-							/>
-							<BaseButton
-								label="Search"
-								type="submit"
-								color="info"
-								class="ml-4 inline-flex items-center px-4 py-2"
-							/>
-						</div>
-					</div>
-				</form> -->
-            </CardBox>
-            <CardBox class="mb-6" has-form-data>
                 <table>
                     <thead>
                         <tr>
@@ -128,17 +134,42 @@ const onCancel = (id) => {
                     </thead>
 
                     <tbody>
-                        <tr v-for="role in roles" :key="role.id">
+                        <tr v-if="roles.length === 0">
+                            <td colspan="3" class="text-center py-12">
+                                <div class="flex flex-col items-center justify-center text-gray-500 dark:text-gray-400">
+                                    <p class="text-lg font-medium mb-2">No roles yet</p>
+                                    <p class="text-sm mb-4">Get started by creating your first role</p>
+                                    <BaseButton
+                                        v-if="can.create"
+                                        :route-name="stardust.route('settings.role.create')"
+                                        :icon="mdiPlus"
+                                        label="Create Role"
+                                        color="info"
+                                        small
+                                    />
+                                </div>
+                            </td>
+                        </tr>
+                        <tr
+                            v-for="(role, index) in roles"
+                            :key="role.id"
+                            class="hover:bg-gray-50 dark:hover:bg-slate-800 transition-colors"
+                        >
                             <td data-label="Name">
-                                <Link
+                                <Link :href="stardust.route('settings.role.show', [role.id])" class="no-underline hover:underline">
-                                    :href="stardust.route('settings.role.show', [role.id])"
+                                    <span
-                                    class="no-underline hover:underline text-cyan-600 dark:text-cyan-400"
+                                        class="inline-flex items-center px-3 py-1 rounded-full text-sm font-medium transition-all hover:shadow-md"
-                                >
+                                        :class="getRoleColor(index)"
-                                    {{ role.name }}
+                                        :title="role.name"
+                                    >
+                                        {{ role.name }}
+                                    </span>
                                 </Link>
                             </td>
                             <td data-label="Description">
-                                {{ role.description }}
+                                <span class="text-gray-700 dark:text-gray-300 text-sm" :title="role.description">
+                                    {{ truncate(role.description, 50) }}
+                                </span>
                             </td>
                             <td v-if="can.edit || can.delete" class="before:hidden lg:w-1 whitespace-nowrap">
                                 <BaseButtons type="justify-start lg:justify-end" no-wrap>
@@ -149,21 +180,12 @@ const onCancel = (id) => {
                                         :icon="mdiSquareEditOutline"
                                         small
                                     />
-                                    <!-- <BaseButton
+                                    <BaseButton v-if="can.delete" color="danger" :icon="mdiTrashCan" small @click="destroy(role.id)" />
-                                        v-if="can.delete"
-                                        color="danger"
-                                        :icon="mdiTrashCan"
-                                        small
-                                        @click="($event) => destroy(role.id, $event)"
-                                    /> -->                                   
                                 </BaseButtons>
                             </td>
                         </tr>
                     </tbody>
                 </table>
-                <!-- <div class="py-4">
-					<Pagination v-bind:data="roles.meta" />
-				</div> -->
             </CardBox>
         </SectionMain>
     </LayoutAuthenticated>

resources/js/Pages/Dashboard.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { Head, usePage } from '@inertiajs/vue3';
-import { computed } from 'vue';
+import { computed, ref } from 'vue';
 import { MainService } from '@/Stores/main';
 import {
     mdiAccountMultiple,
@@ -10,6 +10,7 @@ import {
     mdiMonitorCellphone,
     mdiReload,
     mdiChartPie,
+    mdiTrendingUp,
 } from '@mdi/js';
 import LineChart from '@/Components/Charts/LineChart.vue';
 import SectionMain from '@/Components/SectionMain.vue';
@@ -18,47 +19,37 @@ import CardBox from '@/Components/CardBox.vue';
 import TableSampleClients from '@/Components/TableSampleClients.vue';
 import LayoutAuthenticated from '@/Layouts/LayoutAuthenticated.vue';
 import SectionTitleLineWithButton from '@/Components/SectionTitleLineWithButton.vue';
-// import SectionBannerStarOnGitHub from '@/Components/SectionBannerStarOnGitea.vue';
 import CardBoxDataset from '@/Components/CardBoxDataset.vue';
 import type { User } from '@/Dataset';
-const mainService = MainService()
 
-// const chartData = ref();
+const mainService = MainService();
+
+const isLoadingChart = ref(false);
+
 const fillChartData = async () => {
-    await mainService.fetchChartData();
+    isLoadingChart.value = true;
-    // chartData.value = chartConfig.sampleChartData();
+    try {
-    // chartData.value = mainService.graphData;
+        await mainService.fetchChartData();
+    } finally {
+        isLoadingChart.value = false;
+    }
 };
+
 const chartData = computed(() => mainService.graphData);
-// onMounted(async () => {
+const authors = computed(() => mainService.authors);
-//     await mainService.fetchChartData("2022");
+const datasets = computed(() => mainService.datasets);
-// });
+const datasetBarItems = computed(() => mainService.datasets.slice(0, 5));
-
+const submitters = computed(() => mainService.clients);
-// mainService.fetch('clients');
+const user = computed(() => usePage().props.authUser as User);
-// mainService.fetch('history');
-
-// mainService.fetchApi('authors');
-// mainService.fetchApi('datasets');
-
-// const clientBarItems = computed(() => mainService.clients.slice(0, 4));
-// const transactionBarItems = computed(() => mainService.history);
 
+// Initialize data
 mainService.fetchApi('clients');
 mainService.fetchApi('authors');
 mainService.fetchApi('datasets');
 mainService.fetchChartData();
 
-// const authorBarItems = computed(() => mainService.authors.slice(0, 5));
-const authors = computed(() => mainService.authors);
-const datasets = computed(() => mainService.datasets);
-const datasetBarItems = computed(() => mainService.datasets.slice(0, 5));
-const submitters = computed(() => mainService.clients);
-const user = computed(() => {
-    return usePage().props.authUser as User;
-});
-
 const userHasRoles = (roleNames: Array<string>): boolean => {
-    return user.value.roles.some(role => roleNames.includes(role.name));
+    return user.value.roles.some((role) => roleNames.includes(role.name));
 };
 </script>
 
@@ -67,18 +58,13 @@ const userHasRoles = (roleNames: Array<string>): boolean => {
         <Head title="Dashboard" />
 
         <SectionMain>
-            <SectionTitleLineWithButton v-bind:icon="mdiChartTimelineVariant" title="Overview" main>
+            <SectionTitleLineWithButton :icon="mdiChartTimelineVariant" title="Dashboard Overview" main>
-                <!-- <BaseButton
+                <div class="text-sm text-gray-500 dark:text-gray-400">
-                    href=""
+                    Welcome back, <span class="font-semibold">{{ user.login }}</span>
-                    target="_blank"
+                </div>
-                    :icon="mdiGithub"
-                    label="Star on GeoSphere Forgejo"
-                    color="contrast"
-                    rounded-full
-                    small
-                /> -->
             </SectionTitleLineWithButton>
 
+            <!-- Stats Grid -->
             <div class="grid grid-cols-1 gap-6 lg:grid-cols-3 mb-6">
                 <CardBoxWidget
                     trend="12%"
@@ -87,25 +73,28 @@ const userHasRoles = (roleNames: Array<string>): boolean => {
                     :icon="mdiAccountMultiple"
                     :number="authors.length"
                     label="Authors"
-                />              
+                    class="hover:shadow-lg transition-shadow duration-300"
-                <CardBoxWidget                    
+                />
+                <CardBoxWidget
                     trend-type="info"
                     color="text-blue-500"
                     :icon="mdiDatabaseOutline"
                     :number="datasets.length"
                     label="Publications"
-                />               
+                    class="hover:shadow-lg transition-shadow duration-300"
-                <CardBoxWidget                    
+                />
+                <CardBoxWidget
                     trend-type="up"
                     color="text-purple-500"
                     :icon="mdiChartTimelineVariant"
                     :number="submitters.length"
                     label="Submitters"
+                    class="hover:shadow-lg transition-shadow duration-300"
                 />
             </div>
 
-            <div class="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-6">
+                 <!-- <div class="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-6">
-                <!-- <div class="flex flex-col justify-between">
+               <div class="flex flex-col justify-between">
                     <CardBoxClient
                         v-for="client in authorBarItems"
                         :key="client.id"
@@ -116,7 +105,7 @@ const userHasRoles = (roleNames: Array<string>): boolean => {
                         :count="client.dataset_count"
                         
                     />
-                </div> -->
+                </div>  <!-- 
                 <div class="flex flex-col justify-between">
                     <CardBoxDataset
                         v-for="(dataset, index) in datasetBarItems"
@@ -124,22 +113,63 @@ const userHasRoles = (roleNames: Array<string>): boolean => {
                        :dataset="dataset"
                     />
                 </div>
+            </div> 
+
+            <!-- Recent Datasets Section -->
+            <div v-if="datasetBarItems.length > 0" class="mb-6">
+                <SectionTitleLineWithButton :icon="mdiTrendingUp" title="Recent Publications">
+                    <span class="text-sm text-gray-500 dark:text-gray-400"> Latest {{ datasetBarItems.length }} publications </span>
+                </SectionTitleLineWithButton>
+
+                <div class="grid grid-cols-1 gap-4">
+                    <CardBoxDataset
+                        v-for="(dataset, index) in datasetBarItems"
+                        :key="index"
+                        :dataset="dataset"
+                        class="hover:shadow-md transition-all duration-300"
+                    />
+                </div>
             </div>
 
             <!-- <SectionBannerStarOnGitHub /> -->
 
-            <SectionTitleLineWithButton :icon="mdiChartPie" title="Trends overview: Publications per month" ></SectionTitleLineWithButton>
+            <!-- Chart Section -->
-            <CardBox title="Performance" :icon="mdiFinance" :header-icon="mdiReload" class="mb-6" @header-icon-click="fillChartData">
+            <SectionTitleLineWithButton :icon="mdiChartPie" title="Trends Overview" class="mt-8">
-                <div v-if="chartData">
+                <span class="text-sm text-gray-500 dark:text-gray-400"> Publications per month </span>
+            </SectionTitleLineWithButton>
+
+            <CardBox
+                title="Performance"
+                :icon="mdiFinance"
+                :header-icon="mdiReload"
+                class="mb-6 shadow-lg"
+                @header-icon-click="fillChartData"
+            >
+                <div v-if="isLoadingChart" class="flex items-center justify-center h-96">
+                    <div class="flex flex-col items-center gap-3">
+                        <div class="animate-spin rounded-full h-12 w-12 border-b-2 border-blue-500"></div>
+                        <p class="text-sm text-gray-500 dark:text-gray-400">Loading chart data...</p>
+                    </div>
+                </div>
+                <div v-else-if="chartData" class="relative">
                     <line-chart :data="chartData" class="h-96" />
                 </div>
+                <div v-else class="flex items-center justify-center h-96 text-gray-500 dark:text-gray-400">
+                    <p>No chart data available</p>
+                </div>
             </CardBox>
 
-            <SectionTitleLineWithButton v-if="userHasRoles(['administrator'])" :icon="mdiAccountMultiple" title="Submitters" />
+            <!-- Admin Section -->
-            <!-- <NotificationBar color="info" :icon="mdiMonitorCellphone"> <b>Responsive table.</b> Collapses on mobile </NotificationBar> -->
+            <template v-if="userHasRoles(['administrator'])">
-            <CardBox v-if="userHasRoles(['administrator'])" :icon="mdiMonitorCellphone" title="Responsive table" has-table>
+                <SectionTitleLineWithButton :icon="mdiAccountMultiple" title="Submitters Management" class="mt-8">
-                <TableSampleClients />
+                    <span class="text-sm text-gray-500 dark:text-gray-400"> Administrator view </span>
-            </CardBox>
+                </SectionTitleLineWithButton>
+
+                <CardBox :icon="mdiMonitorCellphone" title="All Submitters" has-table class="shadow-lg">
+                    <TableSampleClients />
+                </CardBox>
+            </template>
+
         </SectionMain>
     </LayoutAuthenticated>
 </template>

resources/js/menu.ts

@@ -12,7 +12,7 @@ import {
     mdiShieldCrownOutline,
     mdiLicense,
     mdiFileDocument,
-    mdiLibraryShelves 
+    mdiFolderMultiple, 
 } from '@mdi/js';
 
 export default [
@@ -92,6 +92,12 @@ export default [
                 label: 'Licenses',
                 roles: ['administrator'],
             },
+             {
+                route: 'settings.project.index',
+                icon: mdiFolderMultiple,
+                label: 'Projects',
+                roles: ['administrator'],
+            },
         ],
     },
 

start/routes.ts

@@ -34,6 +34,7 @@ import DatasetController from '#app/Controllers/Http/Submitter/DatasetController
 import PersonController from '#app/Controllers/Http/Submitter/PersonController';
 import EditorDatasetController from '#app/Controllers/Http/Editor/DatasetController';
 import ReviewerDatasetController from '#app/Controllers/Http/Reviewer/DatasetController';
+import ProjectsController from '#app/controllers/projects_controller';
 import './routes/api.js';
 import { middleware } from './kernel.js';
 import db from '@adonisjs/lucid/services/db'; // Import the DB service
@@ -234,6 +235,19 @@ router
             .where('id', router.matchers.number())
             .use(middleware.can(['settings']));
 
+        // Project routes
+        // List all projects
+        router.get('/projects',  [ProjectsController, 'index']).as('project.index');
+        // Show create form
+        router.get('/projects/create', [ProjectsController, 'create']).as('project.create').use(middleware.can(['settings']));;
+        // Store new project
+        router.post('/projects', [ProjectsController, 'store']).as('project.store').use(middleware.can(['settings']));;
+        // Show edit form
+        router.get('/projects/:id/edit',[ProjectsController, 'edit']).as('project.edit').use(middleware.can(['settings']));;
+        // Update project
+        router.put('/projects/:id',[ProjectsController, 'update']).as('project.update').use(middleware.can(['settings']));;
+      
+
         // Mimetype routes
         router.get('/mimetype', [MimetypeController, 'index']).as('mimetype.index');
         router