improve modal and field group spacing for project modal layout

e2e/projects.spec.ts

@@ -6,6 +6,7 @@ import { formatCentsWithOrganizationDefaults } from './utils/money';
 import {
     createProjectViaApi,
     createPublicProjectViaApi,
+    createProjectMemberViaApi,
     createTaskViaApi,
     createClientViaApi,
     createTimeEntryViaApi,
@@ -217,6 +218,59 @@ test('test that creating a non-billable project works', async ({ page }) => {
     await expect(page.getByTestId('project_table')).toContainText(newProjectName);
 });
 
+test('test that creating a public project via the modal works', async ({ page }) => {
+    const newProjectName = 'Public Project ' + Math.floor(1 + Math.random() * 10000);
+    await goToProjectsOverview(page);
+    await page.getByRole('button', { name: 'Create Project' }).click();
+    await page.getByLabel('Project Name').fill(newProjectName);
+
+    // Visibility defaults to Private — switch it to Public
+    await expect(page.getByRole('dialog').locator('#visibility')).toContainText('Private');
+    await page.getByRole('dialog').locator('#visibility').click();
+    await page.getByRole('option', { name: 'Public' }).click();
+
+    await Promise.all([
+        page.getByRole('button', { name: 'Create Project' }).click(),
+        page.waitForResponse(
+            async (response) =>
+                response.url().includes('/projects') &&
+                response.request().method() === 'POST' &&
+                response.status() === 201 &&
+                (await response.json()).data.is_public === true
+        ),
+    ]);
+
+    await expect(page.getByTestId('project_table')).toContainText(newProjectName);
+});
+
+test('test that changing a project to public via the edit modal works', async ({ page, ctx }) => {
+    const newProjectName = 'Edit Visibility Project ' + Math.floor(1 + Math.random() * 10000);
+    await createProjectViaApi(ctx, { name: newProjectName });
+
+    await goToProjectsOverview(page);
+    await expect(page.getByText(newProjectName)).toBeVisible({ timeout: 10000 });
+
+    const projectRow = page.getByRole('row').filter({ hasText: newProjectName }).first();
+    await projectRow.getByRole('button').click();
+    await page.locator(`[aria-label='Edit Project ${newProjectName}']`).click();
+
+    // Loaded as Private — switch it to Public
+    await expect(page.getByRole('dialog').locator('#visibility')).toContainText('Private');
+    await page.getByRole('dialog').locator('#visibility').click();
+    await page.getByRole('option', { name: 'Public' }).click();
+
+    await Promise.all([
+        page.getByRole('button', { name: 'Update Project' }).click(),
+        page.waitForResponse(
+            async (response) =>
+                response.url().includes('/projects/') &&
+                response.request().method() === 'PUT' &&
+                response.status() === 200 &&
+                (await response.json()).data.is_public === true
+        ),
+    ]);
+});
+
 test('test that switching from custom rate to default rate clears billable rate', async ({
     page,
     ctx,
@@ -925,6 +979,39 @@ test.describe('Employee Projects Restrictions', () => {
             employee.page.locator(`[aria-label='Delete Project ${projectName}']`)
         ).not.toBeVisible();
     });
+
+    test('employee does not see private projects they are not a member of', async ({
+        ctx,
+        employee,
+    }) => {
+        const publicName = 'EmpPublicVisible ' + Math.floor(Math.random() * 10000);
+        const privateName = 'EmpPrivateHidden ' + Math.floor(Math.random() * 10000);
+        await createPublicProjectViaApi(ctx, { name: publicName });
+        // createProjectViaApi defaults to is_public: false (private); the employee is not a member
+        await createProjectViaApi(ctx, { name: privateName });
+
+        await employee.page.goto(PLAYWRIGHT_BASE_URL + '/projects');
+        await expect(employee.page.getByTestId('projects_view')).toBeVisible({ timeout: 10000 });
+
+        // The public project is visible — confirms the list has loaded
+        await expect(employee.page.getByText(publicName)).toBeVisible({ timeout: 10000 });
+
+        // The private project the employee is not a member of must not appear
+        await expect(employee.page.getByText(privateName)).not.toBeVisible();
+    });
+
+    test('employee can see a private project they are a member of', async ({ ctx, employee }) => {
+        const projectName = 'EmpPrivateMember ' + Math.floor(Math.random() * 10000);
+        const project = await createProjectViaApi(ctx, { name: projectName });
+        // Add the employee as a project member so the private project becomes visible to them
+        await createProjectMemberViaApi(ctx, project.id, { member_id: employee.memberId });
+
+        await employee.page.goto(PLAYWRIGHT_BASE_URL + '/projects');
+        await expect(employee.page.getByTestId('projects_view')).toBeVisible({ timeout: 10000 });
+
+        // The private project is visible because the employee is a member
+        await expect(employee.page.getByText(projectName)).toBeVisible({ timeout: 10000 });
+    });
 });
 
 test.describe('Employee Billable Rate Visibility', () => {

resources/js/Components/Common/Project/ProjectEditModal.vue

@@ -19,6 +19,7 @@ import { Field, FieldGroup, FieldLabel } from '@/packages/ui/src/field';
 import ProjectBillableRateModal from '@/packages/ui/src/Project/ProjectBillableRateModal.vue';
 import { getOrganizationCurrencyString } from '@/utils/money';
 import ProjectEditBillableSection from '@/packages/ui/src/Project/ProjectEditBillableSection.vue';
+import ProjectVisibilitySelect from '@/packages/ui/src/Project/ProjectVisibilitySelect.vue';
 import { isAllowedToPerformPremiumAction } from '@/utils/billing';
 import { useOrganizationQuery } from '@/utils/useOrganizationQuery';
 import { getCurrentOrganizationId } from '@/utils/useUser';
@@ -44,6 +45,7 @@ const project = ref<CreateProjectBody>({
     billable_rate: props.originalProject.billable_rate,
     is_billable: props.originalProject.is_billable,
     estimated_time: props.originalProject.estimated_time,
+    is_public: props.originalProject.is_public,
 });
 
 async function submit() {
@@ -126,6 +128,7 @@ async function submitBillableRate() {
                     v-if="isAllowedToPerformPremiumAction()"
                     v-model="project.estimated_time"
                     @submit="submit()"></EstimatedTimeSection>
+                <ProjectVisibilitySelect v-model="project.is_public"></ProjectVisibilitySelect>
             </FieldGroup>
         </template>
         <template #footer>

resources/js/Components/Common/Project/ProjectTable.vue

@@ -13,7 +13,8 @@ export type SortColumn =
     | 'spent_time'
     | 'progress'
     | 'billable_rate'
-    | 'status';
+    | 'status'
+    | 'visibility';
 export type SortDirection = 'asc' | 'desc';
 import { canCreateProjects } from '@/utils/permissions';
 import type { CreateProjectBody, Project, Client, CreateClientBody } from '@/packages/api/src';
@@ -102,6 +103,10 @@ const columns = computed(() => [
         id: 'status',
         accessorFn: (row: Project) => (row.is_archived ? 1 : 0),
     },
+    {
+        id: 'visibility',
+        accessorFn: (row: Project) => (row.is_public ? 1 : 0),
+    },
 ]);
 
 // Columns with sortDescFirst get desc as default direction on first click.
@@ -149,7 +154,7 @@ async function createClient(client: CreateClientBody): Promise<Client | undefine
 }
 
 const gridTemplate = computed(() => {
-    return `grid-template-columns: minmax(300px, 1fr) minmax(150px, auto) minmax(140px, auto) minmax(130px, auto) ${props.showBillableRate ? 'minmax(130px, auto)' : ''} minmax(120px, auto) 80px;`;
+    return `grid-template-columns: minmax(300px, 1fr) minmax(150px, auto) minmax(140px, auto) minmax(130px, auto) ${props.showBillableRate ? 'minmax(130px, auto)' : ''} minmax(120px, auto) minmax(120px, auto) 80px;`;
 });
 </script>
 
@@ -171,7 +176,7 @@ const gridTemplate = computed(() => {
                     :sort-direction="props.sortDirection"
                     :desc-first-columns="descFirstColumns"
                     @sort="handleSort"></ProjectTableHeading>
-                <div v-if="sortedProjects.length === 0" class="col-span-5 py-24 text-center">
+                <div v-if="sortedProjects.length === 0" class="col-span-full py-24 text-center">
                     <FolderPlusIcon class="w-8 text-icon-default inline pb-2"></FolderPlusIcon>
                     <h3 class="text-text-primary font-semibold">
                         {{

resources/js/Components/Common/Project/ProjectTableHeading.vue

@@ -86,6 +86,14 @@ function isChevronUp(column: SortColumn): boolean {
             <ChevronUpIcon v-else-if="isChevronUp('status')" class="w-4 h-4" />
             <span v-else class="w-4 h-4"></span>
         </div>
+        <div
+            class="px-3 py-1.5 text-left text-text-tertiary cursor-pointer hover:bg-secondary hover:text-text-primary transition-colors select-none flex items-center gap-1"
+            @click="handleSort('visibility')">
+            Visibility
+            <ChevronDownIcon v-if="isChevronDown('visibility')" class="w-4 h-4" />
+            <ChevronUpIcon v-else-if="isChevronUp('visibility')" class="w-4 h-4" />
+            <span v-else class="w-4 h-4"></span>
+        </div>
         <div class="relative py-1.5 pl-3 pr-4 sm:pr-6 lg:pr-8 3xl:pr-12">
             <span class="sr-only">Edit</span>
         </div>

resources/js/Components/Common/Project/ProjectTableRow.vue

@@ -7,6 +7,8 @@ import {
     PencilSquareIcon,
     ArchiveBoxIcon as ArchiveBoxIconSolid,
     TrashIcon,
+    GlobeAltIcon,
+    LockClosedIcon,
 } from '@heroicons/vue/20/solid';
 import { useClientsQuery } from '@/utils/useClientsQuery';
 import { useTasksQuery } from '@/utils/useTasksQuery';
@@ -141,6 +143,17 @@ const showEditProjectModal = ref(false);
                         <span>Active</span>
                     </template>
                 </div>
+                <div
+                    class="whitespace-nowrap px-3 py-4 text-sm text-text-primary flex space-x-1.5 items-center font-medium">
+                    <template v-if="project.is_public">
+                        <GlobeAltIcon class="w-4 text-icon-default"></GlobeAltIcon>
+                        <span>Public</span>
+                    </template>
+                    <template v-else>
+                        <LockClosedIcon class="w-4 text-icon-default"></LockClosedIcon>
+                        <span>Private</span>
+                    </template>
+                </div>
                 <div
                     class="relative whitespace-nowrap flex items-center pl-3 text-right text-sm font-medium pr-4 sm:pr-6 lg:pr-8 3xl:pr-12">
                     <ProjectMoreOptionsDropdown

resources/js/Components/Common/Project/ProjectVisibilityFilterBadge.vue

@@ -0,0 +1,46 @@
+<script setup lang="ts">
+import { computed } from 'vue';
+import { GlobeAltIcon } from '@heroicons/vue/16/solid';
+import { DropdownMenuItem } from '@/packages/ui/src';
+import BaseFilterBadge from './BaseFilterBadge.vue';
+
+type VisibilityValue = 'public' | 'private' | 'all';
+
+const props = defineProps<{
+    value: VisibilityValue;
+}>();
+
+const emit = defineEmits<{
+    remove: [];
+    'update:value': [value: VisibilityValue];
+}>();
+
+const visibilityOptions = [
+    { id: 'public' as const, name: 'Public' },
+    { id: 'private' as const, name: 'Private' },
+];
+
+const label = computed(() => {
+    return visibilityOptions.find((opt) => opt.id === props.value)?.name ?? 'Visibility';
+});
+
+function updateVisibility(visibility: VisibilityValue) {
+    emit('update:value', visibility);
+}
+</script>
+
+<template>
+    <BaseFilterBadge
+        :icon="GlobeAltIcon"
+        :label="label"
+        filter-name="Visibility"
+        @remove="emit('remove')">
+        <DropdownMenuItem
+            v-for="option in visibilityOptions"
+            :key="option.id"
+            :class="[value === option.id && 'bg-accent text-accent-foreground']"
+            @click="updateVisibility(option.id)">
+            {{ option.name }}
+        </DropdownMenuItem>
+    </BaseFilterBadge>
+</template>

resources/js/Components/Common/Project/ProjectsFilterDropdown.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { computed, ref } from 'vue';
-import { UserGroupIcon, CheckCircleIcon } from '@heroicons/vue/16/solid';
+import { UserGroupIcon, CheckCircleIcon, GlobeAltIcon } from '@heroicons/vue/16/solid';
 import ListFilterIcon from '@/packages/ui/src/Icons/ListFilterIcon.vue';
 import {
     DropdownMenu,
@@ -19,6 +19,7 @@ import { NO_CLIENT_ID } from './constants';
 
 export interface ProjectFilters {
     status: 'active' | 'archived' | 'all';
+    visibility: 'public' | 'private' | 'all';
     clientIds: string[];
 }
 
@@ -36,6 +37,11 @@ const statusOptions = [
     { id: 'archived' as const, name: 'Archived' },
 ];
 
+const visibilityOptions = [
+    { id: 'public' as const, name: 'Public' },
+    { id: 'private' as const, name: 'Private' },
+];
+
 const open = ref(false);
 
 function updateStatus(status: 'active' | 'archived' | 'all') {
@@ -46,6 +52,14 @@ function updateStatus(status: 'active' | 'archived' | 'all') {
     open.value = false;
 }
 
+function updateVisibility(visibility: 'public' | 'private' | 'all') {
+    emit('update:filters', {
+        ...props.filters,
+        visibility,
+    });
+    open.value = false;
+}
+
 function toggleClient(clientId: string) {
     const clientIds = props.filters.clientIds.includes(clientId)
         ? props.filters.clientIds.filter((id) => id !== clientId)
@@ -69,7 +83,11 @@ function toggleNoClient() {
 }
 
 const hasActiveFilters = computed(() => {
-    return props.filters.status !== 'all' || props.filters.clientIds.length > 0;
+    return (
+        props.filters.status !== 'all' ||
+        props.filters.visibility !== 'all' ||
+        props.filters.clientIds.length > 0
+    );
 });
 </script>
 
@@ -102,6 +120,25 @@ const hasActiveFilters = computed(() => {
                 </DropdownMenuSubContent>
             </DropdownMenuSub>
 
+            <!-- Visibility Filter -->
+            <DropdownMenuSub>
+                <DropdownMenuSubTrigger class="gap-2">
+                    <GlobeAltIcon class="h-4 w-4 text-icon-default" />
+                    <span>Visibility</span>
+                </DropdownMenuSubTrigger>
+                <DropdownMenuSubContent>
+                    <DropdownMenuItem
+                        v-for="option in visibilityOptions"
+                        :key="option.id"
+                        :class="[
+                            filters.visibility === option.id && 'bg-accent text-accent-foreground',
+                        ]"
+                        @click="updateVisibility(option.id)">
+                        {{ option.name }}
+                    </DropdownMenuItem>
+                </DropdownMenuSubContent>
+            </DropdownMenuSub>
+
             <!-- Client Filter -->
             <DropdownMenuSub v-if="clients.length > 0">
                 <DropdownMenuSubTrigger class="gap-2">

resources/js/Pages/ProjectShow.vue

@@ -109,7 +109,7 @@ const shownTasks = computed(() => {
                         </div>
                     </li>
                 </ol>
-                <div class="px-4">
+                <div class="px-4 space-x-1">
                     <Badge v-if="project?.billable_rate">
                         {{ billableRateFormatted }}
                         / h
@@ -118,6 +118,7 @@ const shownTasks = computed(() => {
                         Default Rate
                     </Badge>
                     <Badge v-if="!project?.is_billable"> Non-Billable </Badge>
+                    <Badge>{{ project?.is_public ? 'Public' : 'Private' }}</Badge>
                 </div>
             </nav>
             <div>

resources/js/Pages/Projects.vue

@@ -20,6 +20,7 @@ import { isAllowedToPerformPremiumAction } from '@/utils/billing';
 import { useStorage } from '@vueuse/core';
 import ProjectsFilterDropdown from '@/Components/Common/Project/ProjectsFilterDropdown.vue';
 import ProjectStatusFilterBadge from '@/Components/Common/Project/ProjectStatusFilterBadge.vue';
+import ProjectVisibilityFilterBadge from '@/Components/Common/Project/ProjectVisibilityFilterBadge.vue';
 import ProjectClientFilterBadge from '@/Components/Common/Project/ProjectClientFilterBadge.vue';
 import { NO_CLIENT_ID } from '@/Components/Common/Project/constants';
 import type { SortColumn, SortDirection } from '@/Components/Common/Project/ProjectTable.vue';
@@ -36,6 +37,7 @@ interface ProjectTableState {
     filters: {
         clientIds: string[];
         status: 'active' | 'archived' | 'all';
+        visibility: 'public' | 'private' | 'all';
     };
 }
 
@@ -47,6 +49,7 @@ const tableState = useStorage<ProjectTableState>(
         filters: {
             clientIds: [],
             status: 'all',
+            visibility: 'all',
         },
     },
     undefined,
@@ -69,6 +72,14 @@ const filteredProjects = computed(() => {
             return false;
         }
 
+        // Visibility filter
+        if (tableState.value.filters.visibility === 'public' && !project.is_public) {
+            return false;
+        }
+        if (tableState.value.filters.visibility === 'private' && project.is_public) {
+            return false;
+        }
+
         // Client filter
         const hasClientFilter = tableState.value.filters.clientIds.length > 0;
         if (hasClientFilter) {
@@ -91,6 +102,10 @@ function removeStatusFilter() {
     tableState.value.filters.status = 'all';
 }
 
+function removeVisibilityFilter() {
+    tableState.value.filters.visibility = 'all';
+}
+
 function removeClientFilter() {
     tableState.value.filters.clientIds = [];
 }
@@ -152,6 +167,15 @@ const showBillableRate = computed(() => {
                         tableState.filters.status = $event as 'active' | 'archived' | 'all'
                     " />
 
+                <ProjectVisibilityFilterBadge
+                    v-if="tableState.filters.visibility !== 'all'"
+                    data-testid="visibility-filter-badge"
+                    :value="tableState.filters.visibility"
+                    @remove="removeVisibilityFilter"
+                    @update:value="
+                        tableState.filters.visibility = $event as 'public' | 'private' | 'all'
+                    " />
+
                 <ProjectClientFilterBadge
                     v-if="tableState.filters.clientIds.length > 0"
                     data-testid="client-filter-badge"

resources/js/packages/ui/src/Project/ProjectCreateModal.vue

@@ -15,6 +15,7 @@ import { UserCircleIcon } from '@heroicons/vue/20/solid';
 import EstimatedTimeSection from '@/packages/ui/src/EstimatedTimeSection.vue';
 import { Field, FieldGroup, FieldLabel } from '../field';
 import ProjectEditBillableSection from '@/packages/ui/src/Project/ProjectEditBillableSection.vue';
+import ProjectVisibilitySelect from '@/packages/ui/src/Project/ProjectVisibilitySelect.vue';
 import type { Client } from '@/packages/api/src';
 
 const show = defineModel('show', { default: false });
@@ -41,6 +42,7 @@ const project = ref<CreateProjectBody>({
     billable_rate: null,
     is_billable: false,
     estimated_time: null,
+    is_public: false,
 });
 
 async function submit() {
@@ -53,6 +55,7 @@ async function submit() {
         billable_rate: null,
         is_billable: false,
         estimated_time: null,
+        is_public: false,
     };
 }
 
@@ -123,6 +126,7 @@ const currentClientName = computed(() => {
                     v-if="enableEstimatedTime"
                     v-model="project.estimated_time"
                     @submit="submit()"></EstimatedTimeSection>
+                <ProjectVisibilitySelect v-model="project.is_public"></ProjectVisibilitySelect>
             </FieldGroup>
         </template>
         <template #footer>

resources/js/packages/ui/src/Project/ProjectVisibilitySelect.vue

@@ -0,0 +1,39 @@
+<script setup lang="ts">
+import { computed } from 'vue';
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '..';
+import { Field, FieldDescription, FieldLabel } from '../field';
+import { GlobeAltIcon } from '@heroicons/vue/20/solid';
+
+const isPublic = defineModel<boolean>({ default: false });
+
+const visibility = computed({
+    get: () => (isPublic.value ? 'public' : 'private'),
+    set: (value: string) => {
+        isPublic.value = value === 'public';
+    },
+});
+
+const description = computed(() =>
+    isPublic.value
+        ? 'This project is visible to all members of the organization.'
+        : 'This project is only visible to its project members.'
+);
+</script>
+
+<template>
+    <Field>
+        <FieldLabel :icon="GlobeAltIcon" for="visibility">Visibility</FieldLabel>
+        <Select v-model="visibility">
+            <SelectTrigger id="visibility">
+                <SelectValue />
+            </SelectTrigger>
+            <SelectContent>
+                <SelectItem value="private">Private</SelectItem>
+                <SelectItem value="public">Public</SelectItem>
+            </SelectContent>
+        </Select>
+        <FieldDescription>{{ description }}</FieldDescription>
+    </Field>
+</template>
+
+<style scoped></style>

resources/js/packages/ui/src/dialog/DialogContent.vue

@@ -31,7 +31,7 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits);
         <div
             :class="
                 cn(
-                    'fixed top-0 left-0 z-50 pointer-events-none w-screen h-screen flex items-start px-2 pt-3 md:pt-20 xl:pt-32 justify-center overflow-auto'
+                    'fixed top-0 left-0 z-50 pointer-events-none w-screen h-screen flex items-start px-2 pt-3 md:pt-14 xl:pt-24 justify-center overflow-auto'
                 )
             ">
             <DialogContent

resources/js/packages/ui/src/field/FieldGroup.vue

@@ -12,7 +12,7 @@ const props = defineProps<{
         data-slot="field-group"
         :class="
             cn(
-                'group/field-group @container/field-group flex w-full flex-col gap-7 data-[slot=checkbox-group]:gap-3 [&>[data-slot=field-group]]:gap-4',
+                'group/field-group @container/field-group flex w-full flex-col gap-6 data-[slot=checkbox-group]:gap-3 [&>[data-slot=field-group]]:gap-4',
                 props.class
             )
         ">

tests/Unit/Endpoint/Api/V1/ProjectEndpointTest.php

@@ -308,6 +308,22 @@ class ProjectEndpointTest extends ApiEndpointTestAbstract
         $response->assertForbidden();
     }
 
+    public function test_show_endpoint_fails_if_employee_tries_to_access_public_project(): void
+    {
+        // Arrange
+        // Employees do not have the projects:view:all permission that the show endpoint requires,
+        // so they are forbidden even from public projects (they list them via the index endpoint instead).
+        $data = $this->createUserWithRole(Role::Employee);
+        $publicProject = Project::factory()->forOrganization($data->organization)->isPublic()->create();
+        Passport::actingAs($data->user);
+
+        // Act
+        $response = $this->getJson(route('api.v1.projects.show', [$data->organization->getKey(), $publicProject->getKey()]));
+
+        // Assert
+        $response->assertForbidden();
+    }
+
     public function test_store_endpoint_fails_if_user_has_no_permission_to_create_projects(): void
     {
         // Arrange
@@ -327,6 +343,29 @@ class ProjectEndpointTest extends ApiEndpointTestAbstract
         $response->assertForbidden();
     }
 
+    public function test_store_endpoint_fails_if_user_is_employee(): void
+    {
+        // Arrange
+        $data = $this->createUserWithRole(Role::Employee);
+        $projectFake = Project::factory()->forOrganization($data->organization)->make();
+        Passport::actingAs($data->user);
+
+        // Act
+        $response = $this->postJson(route('api.v1.projects.store', [$data->organization->getKey()]), [
+            'name' => $projectFake->name,
+            'color' => $projectFake->color,
+            'client_id' => null,
+            'is_billable' => $projectFake->is_billable,
+        ]);
+
+        // Assert
+        $response->assertForbidden();
+        $this->assertDatabaseMissing(Project::class, [
+            'name' => $projectFake->name,
+            'organization_id' => $data->organization->getKey(),
+        ]);
+    }
+
     public function test_store_endpoint_highest_possible_billable_rate_can_be_stored_in_database(): void
     {
         // Arrange
@@ -668,6 +707,124 @@ class ProjectEndpointTest extends ApiEndpointTestAbstract
         ]);
     }
 
+    public function test_store_endpoint_creates_public_project(): void
+    {
+        // Arrange
+        $data = $this->createUserWithPermission([
+            'projects:create',
+        ]);
+        $projectFake = Project::factory()->forOrganization($data->organization)->make();
+        Passport::actingAs($data->user);
+
+        // Act
+        $response = $this->postJson(route('api.v1.projects.store', [$data->organization->getKey()]), [
+            'name' => $projectFake->name,
+            'color' => $projectFake->color,
+            'client_id' => null,
+            'is_billable' => $projectFake->is_billable,
+            'is_public' => true,
+        ]);
+
+        // Assert
+        $response->assertStatus(201);
+        $response->assertJson(fn (AssertableJson $json) => $json
+            ->has('data')
+            ->where('data.is_public', true)
+            ->etc()
+        );
+        $this->assertDatabaseHas(Project::class, [
+            'name' => $projectFake->name,
+            'organization_id' => $projectFake->organization_id,
+            'is_public' => true,
+        ]);
+    }
+
+    public function test_store_endpoint_creates_private_project_if_is_public_is_false(): void
+    {
+        // Arrange
+        $data = $this->createUserWithPermission([
+            'projects:create',
+        ]);
+        $projectFake = Project::factory()->forOrganization($data->organization)->make();
+        Passport::actingAs($data->user);
+
+        // Act
+        $response = $this->postJson(route('api.v1.projects.store', [$data->organization->getKey()]), [
+            'name' => $projectFake->name,
+            'color' => $projectFake->color,
+            'client_id' => null,
+            'is_billable' => $projectFake->is_billable,
+            'is_public' => false,
+        ]);
+
+        // Assert
+        $response->assertStatus(201);
+        $response->assertJson(fn (AssertableJson $json) => $json
+            ->has('data')
+            ->where('data.is_public', false)
+            ->etc()
+        );
+        $this->assertDatabaseHas(Project::class, [
+            'name' => $projectFake->name,
+            'organization_id' => $projectFake->organization_id,
+            'is_public' => false,
+        ]);
+    }
+
+    public function test_store_endpoint_creates_private_project_by_default_if_is_public_is_not_given(): void
+    {
+        // Arrange
+        $data = $this->createUserWithPermission([
+            'projects:create',
+        ]);
+        $projectFake = Project::factory()->forOrganization($data->organization)->make();
+        Passport::actingAs($data->user);
+
+        // Act
+        $response = $this->postJson(route('api.v1.projects.store', [$data->organization->getKey()]), [
+            'name' => $projectFake->name,
+            'color' => $projectFake->color,
+            'client_id' => null,
+            'is_billable' => $projectFake->is_billable,
+        ]);
+
+        // Assert
+        $response->assertStatus(201);
+        $response->assertJson(fn (AssertableJson $json) => $json
+            ->has('data')
+            ->where('data.is_public', false)
+            ->etc()
+        );
+        $this->assertDatabaseHas(Project::class, [
+            'name' => $projectFake->name,
+            'organization_id' => $projectFake->organization_id,
+            'is_public' => false,
+        ]);
+    }
+
+    public function test_store_endpoint_fails_if_is_public_is_not_boolean(): void
+    {
+        // Arrange
+        $data = $this->createUserWithPermission([
+            'projects:create',
+        ]);
+        $projectFake = Project::factory()->forOrganization($data->organization)->make();
+        Passport::actingAs($data->user);
+
+        // Act
+        $response = $this->postJson(route('api.v1.projects.store', [$data->organization->getKey()]), [
+            'name' => $projectFake->name,
+            'color' => $projectFake->color,
+            'client_id' => null,
+            'is_billable' => $projectFake->is_billable,
+            'is_public' => 'public',
+        ]);
+
+        // Assert
+        $response->assertStatus(422);
+        $response->assertJsonValidationErrors(['is_public']);
+    }
+
     public function test_update_endpoint_fails_if_user_is_not_part_of_project_organization(): void
     {
         // Arrange
@@ -713,6 +870,30 @@ class ProjectEndpointTest extends ApiEndpointTestAbstract
         $response->assertForbidden();
     }
 
+    public function test_update_endpoint_fails_if_user_is_employee(): void
+    {
+        // Arrange
+        $data = $this->createUserWithRole(Role::Employee);
+        $project = Project::factory()->forOrganization($data->organization)->isPublic()->create();
+        $this->assertBillableRateServiceIsUnused();
+        Passport::actingAs($data->user);
+
+        // Act
+        $response = $this->putJson(route('api.v1.projects.update', [$data->organization->getKey(), $project->getKey()]), [
+            'name' => 'Employee Updated Name',
+            'color' => $project->color,
+            'client_id' => null,
+            'is_billable' => $project->is_billable,
+        ]);
+
+        // Assert
+        $response->assertForbidden();
+        $this->assertDatabaseMissing(Project::class, [
+            'id' => $project->getKey(),
+            'name' => 'Employee Updated Name',
+        ]);
+    }
+
     public function test_update_endpoint_can_update_project_if_project_name_already_exists_in_organization_but_with_different_client(): void
     {
         // Arrange
@@ -957,6 +1138,120 @@ class ProjectEndpointTest extends ApiEndpointTestAbstract
         $this->assertFalse($project->is_archived);
     }
 
+    public function test_update_endpoint_can_make_a_private_project_public(): void
+    {
+        // Arrange
+        $data = $this->createUserWithPermission([
+            'projects:update',
+        ]);
+        $project = Project::factory()->forOrganization($data->organization)->isPrivate()->create();
+        $this->assertBillableRateServiceIsUnused();
+        Passport::actingAs($data->user);
+
+        // Act
+        $response = $this->putJson(route('api.v1.projects.update', [$data->organization->getKey(), $project->getKey()]), [
+            'name' => $project->name,
+            'color' => $project->color,
+            'is_billable' => $project->is_billable,
+            'client_id' => null,
+            'is_public' => true,
+        ]);
+
+        // Assert
+        $response->assertStatus(200);
+        $response->assertJson(fn (AssertableJson $json) => $json
+            ->has('data')
+            ->where('data.is_public', true)
+            ->etc()
+        );
+        $project->refresh();
+        $this->assertTrue($project->is_public);
+    }
+
+    public function test_update_endpoint_can_make_a_public_project_private(): void
+    {
+        // Arrange
+        $data = $this->createUserWithPermission([
+            'projects:update',
+        ]);
+        $project = Project::factory()->forOrganization($data->organization)->isPublic()->create();
+        $this->assertBillableRateServiceIsUnused();
+        Passport::actingAs($data->user);
+
+        // Act
+        $response = $this->putJson(route('api.v1.projects.update', [$data->organization->getKey(), $project->getKey()]), [
+            'name' => $project->name,
+            'color' => $project->color,
+            'is_billable' => $project->is_billable,
+            'client_id' => null,
+            'is_public' => false,
+        ]);
+
+        // Assert
+        $response->assertStatus(200);
+        $response->assertJson(fn (AssertableJson $json) => $json
+            ->has('data')
+            ->where('data.is_public', false)
+            ->etc()
+        );
+        $project->refresh();
+        $this->assertFalse($project->is_public);
+    }
+
+    public function test_update_endpoint_keeps_project_visibility_if_is_public_is_not_given(): void
+    {
+        // Arrange
+        $data = $this->createUserWithPermission([
+            'projects:update',
+        ]);
+        $project = Project::factory()->forOrganization($data->organization)->isPublic()->create();
+        $this->assertBillableRateServiceIsUnused();
+        Passport::actingAs($data->user);
+
+        // Act
+        $response = $this->putJson(route('api.v1.projects.update', [$data->organization->getKey(), $project->getKey()]), [
+            'name' => $project->name,
+            'color' => $project->color,
+            'is_billable' => $project->is_billable,
+            'client_id' => null,
+        ]);
+
+        // Assert
+        $response->assertStatus(200);
+        $response->assertJson(fn (AssertableJson $json) => $json
+            ->has('data')
+            ->where('data.is_public', true)
+            ->etc()
+        );
+        $project->refresh();
+        $this->assertTrue($project->is_public);
+    }
+
+    public function test_update_endpoint_fails_if_is_public_is_not_boolean(): void
+    {
+        // Arrange
+        $data = $this->createUserWithPermission([
+            'projects:update',
+        ]);
+        $project = Project::factory()->forOrganization($data->organization)->isPublic()->create();
+        Passport::actingAs($data->user);
+
+        // Act
+        $response = $this->putJson(route('api.v1.projects.update', [$data->organization->getKey(), $project->getKey()]), [
+            'name' => $project->name,
+            'color' => $project->color,
+            'is_billable' => $project->is_billable,
+            'client_id' => null,
+            'is_public' => 'public',
+        ]);
+
+        // Assert
+        $response->assertStatus(422);
+        $response->assertJsonValidationErrors(['is_public']);
+        $project->refresh();
+        $this->assertTrue($project->is_public);
+    }
+
     public function test_update_endpoint_ignores_estimated_time_if_pro_features_are_disabled(): void
     {
         // Arrange
@@ -1175,6 +1470,23 @@ class ProjectEndpointTest extends ApiEndpointTestAbstract
         $response->assertForbidden();
     }
 
+    public function test_destroy_endpoint_fails_if_user_is_employee(): void
+    {
+        // Arrange
+        $data = $this->createUserWithRole(Role::Employee);
+        $project = Project::factory()->forOrganization($data->organization)->isPublic()->create();
+        Passport::actingAs($data->user);
+
+        // Act
+        $response = $this->deleteJson(route('api.v1.projects.destroy', [$data->organization->getKey(), $project->getKey()]));
+
+        // Assert
+        $response->assertForbidden();
+        $this->assertDatabaseHas(Project::class, [
+            'id' => $project->getKey(),
+        ]);
+    }
+
     public function test_destroy_endpoint_fails_if_project_is_still_in_use_by_a_task(): void
     {
         // Arrange