src/pages/Worker/Card/WorkerTimeControl.vue

@@ -573,6 +573,7 @@ onMounted(async () => {
                                 v-for="(hour, ind) in day.dayData?.hours"
                                 :key="ind"
                                 :hour="hour.timed"
+                                :manual="hour.manual"
                                 :direction="hour.direction"
                                 :id="hour.id"
                                 @on-hour-entry-deleted="updateData()"

src/pages/Worker/Card/WorkerTimeHourChip.vue

@@ -12,6 +12,10 @@ const $props = defineProps({
         type: Number,
         required: true,
     },
+    manual: {
+        type: Boolean,
+        required: true,
+    },
     hour: {
         type: String,
         required: true,
@@ -67,7 +71,12 @@ const showWorkerTimeForm = () => emit('showWorkerTimeForm');
         <QIcon class="direction-icon" :name="directionIconName" size="sm">
             <QTooltip>{{ directionIconTooltip }}</QTooltip>
         </QIcon>
-        <QBadge rounded class="chip" @click="showWorkerTimeForm()">
+        <QBadge
+            rounded
+            class="chip"
+            :class="{ '--manual': manual }"
+            @click="showWorkerTimeForm()"
+        >
             <QIcon name="edit" size="sm" class="fill-icon">
                 <QTooltip>{{ t('Edit') }}</QTooltip></QIcon
             >
@@ -93,10 +102,15 @@ const showWorkerTimeForm = () => emit('showWorkerTimeForm');
 <style scoped lang="scss">
 .chip {
     height: 28px;
-    color: var(--vn-accent-color);
     cursor: pointer;
-    background-color: $primary;
     opacity: 0.8;
+    color: #eee;
+    background-color: #222;
+
+    &.--manual {
+        color: var(--vn-accent-color);
+        background-color: $primary;
+    }
 
     &:hover {
         opacity: 1;