@team-codeme/crud-forge 0.0.0-stage → 1.0.0

package/fuse-starter-pack/fuse-v21.1/src/app/domains/admin/layout/ui/notifications.ts

@@ -0,0 +1,252 @@
+import { CdkConnectedOverlay, CdkOverlayOrigin } from '@angular/cdk/overlay';
+import { Component, signal } from '@angular/core';
+import { MatButton, MatIconButton } from '@angular/material/button';
+import { MatDivider } from '@angular/material/divider';
+import { MatIcon } from '@angular/material/icon';
+import { MatMenu, MatMenuItem, MatMenuTrigger } from '@angular/material/menu';
+import { formatDistance, sub } from 'date-fns';
+
+@Component({
+  selector: 'notifications',
+  imports: [
+    MatIconButton,
+    MatIcon,
+    CdkConnectedOverlay,
+    CdkOverlayOrigin,
+    MatButton,
+    MatDivider,
+    MatMenuTrigger,
+    MatMenu,
+    MatMenuItem,
+  ],
+  template: `
+    <button
+      matIconButton
+      cdkOverlayOrigin
+      (click)="toggle()"
+      #trigger="cdkOverlayOrigin"
+    >
+      <mat-icon svgIcon="bell" />
+    </button>
+
+    <ng-template
+      cdkConnectedOverlay
+      [cdkConnectedOverlayOrigin]="trigger"
+      [cdkConnectedOverlayOpen]="open()"
+      [cdkConnectedOverlayHasBackdrop]="true"
+      [cdkConnectedOverlayBackdropClass]="'transparent'.split(' ')"
+      (detach)="toggle(false)"
+      (backdropClick)="toggle(false)"
+    >
+      <div
+        class="z-10 flex max-h-120 w-full max-w-xs flex-col overflow-y-auto rounded-lg bg-white shadow-(--mat-sys-level2) dark:bg-neutral-800"
+      >
+        <!-- Header -->
+        <div class="flex flex-col bg-neutral-100 dark:bg-neutral-800">
+          <div class="flex items-center p-4 pb-0 pl-6">
+            <div class="flex items-center gap-x-3">
+              <mat-icon
+                class="size-4.5"
+                svgIcon="bell"
+              />
+              <div class="text-xl font-semibold tracking-tighter">
+                Notifications
+              </div>
+            </div>
+            <div class="flex-auto"></div>
+            <button
+              matIconButton
+              [matMenuTriggerFor]="notificationsMenu"
+            >
+              <mat-icon svgIcon="ellipsis-vertical" />
+            </button>
+            <mat-menu #notificationsMenu="matMenu">
+              <button mat-menu-item>
+                <mat-icon svgIcon="check-check" />
+                Mark all as read
+              </button>
+              <button mat-menu-item>
+                <mat-icon svgIcon="settings" />
+                Notification settings
+              </button>
+            </mat-menu>
+          </div>
+
+          <!-- Filters -->
+          <div class="flex items-center gap-x-2 px-6 pt-3 pb-4">
+            @for (filter of filters; track filter.value) {
+              <button
+                [matButton]="
+                  currentFilter().value === filter.value ? 'filled' : 'text'
+                "
+                class="small"
+                (click)="currentFilter.set(filter)"
+              >
+                {{ filter.label }}
+              </button>
+            }
+          </div>
+          <mat-divider />
+        </div>
+
+        <!-- List -->
+        <div class="flex flex-col">
+          @for (
+            notification of notifications;
+            track notification.id;
+            let last = $last
+          ) {
+            <div class="flex gap-x-2 py-3 pr-4 pl-6">
+              <div class="flex-auto">
+                @if (notification.title) {
+                  <div class="font-semibold">{{ notification.title }}</div>
+                }
+                <div class="line-clamp-2">{{ notification.description }}</div>
+                <div class="mt-1 text-xs text-neutral-500">
+                  {{ timeAgo(notification.time) }}
+                </div>
+              </div>
+              <button
+                matIconButton
+                [matMenuTriggerFor]="notificationActions"
+              >
+                <mat-icon svgIcon="ellipsis-vertical" />
+              </button>
+              <mat-menu #notificationActions="matMenu">
+                <button mat-menu-item>
+                  <mat-icon svgIcon="list-check" />
+                  Mark as read
+                </button>
+                <button mat-menu-item>
+                  <mat-icon svgIcon="trash" />
+                  Delete
+                </button>
+              </mat-menu>
+            </div>
+
+            @if (!last) {
+              <mat-divider
+                class="[--mat-divider-color:var(--color-neutral-200)] dark:[--mat-divider-color:var(--color-neutral-700)]"
+              />
+            }
+          }
+        </div>
+      </div>
+    </ng-template>
+  `,
+})
+export class Notifications {
+  // State
+  private now = new Date();
+  protected open = signal(false);
+  protected filters = [
+    {
+      value: 'all',
+      label: 'All',
+    },
+    {
+      value: 'system',
+      label: 'System',
+    },
+    {
+      value: 'archive',
+      label: 'Archive',
+    },
+  ];
+  protected currentFilter = signal<{ value: string; label: string }>({
+    value: 'all',
+    label: 'All',
+  });
+
+  // Data
+  protected notifications = [
+    {
+      id: '4q7Z8REBhn9kLBZMJE6p6',
+      title: 'Daily challenges',
+      description: 'Your submission has been accepted',
+      time: sub(this.now, { minutes: 25 }), // 25 minutes ago
+      read: false,
+      type: 'system',
+    },
+    {
+      id: 'eeeihQ6qGUtFFp7UkPqPJ',
+      title: null,
+      description:
+        'Leo Gill added you to "Top Secret Project" group and assigned you as a "Project Manager"',
+      time: sub(this.now, { minutes: 50 }), // 50 minutes ago
+      read: true,
+      type: 'archive',
+    },
+    {
+      id: 'X6f4gm4J7BfjwPTtttWze',
+      title: 'Mailbox',
+      description: 'You have 15 unread mails across 3 mailboxes',
+      time: sub(this.now, { hours: 3 }), // 3 hours ago
+      read: false,
+      type: 'system',
+    },
+    {
+      id: '99zrJ4pjchkmaB9V3npXZ',
+      title: 'Cron jobs',
+      description: 'Your Container is ready to publish',
+      time: sub(this.now, { hours: 5 }), // 5 hours ago
+      read: false,
+      type: 'system',
+    },
+    {
+      id: 'FjFRcXm9xtaVeqVtdV7MV',
+      title: null,
+      description: 'Roger Murray accepted your friend request',
+      time: sub(this.now, { hours: 7 }), // 7 hours ago
+      read: true,
+      type: 'archive',
+    },
+    {
+      id: 'PSSIjTGLtmHGRentSxFYj',
+      title: null,
+      description: 'Sophie Stone sent you a direct message',
+      time: sub(this.now, { hours: 9 }), // 9 hours ago
+      read: true,
+      type: 'system',
+    },
+    {
+      id: 'ltJWASIsKGO8cckmL4Pih',
+      title: 'Mailbox',
+      description: 'You have 3 new mails',
+      time: sub(this.now, { days: 1 }), // 1 day ago
+      read: true,
+      type: 'system',
+    },
+    {
+      id: 'vM0pgpCTOSDuLYzcGX1YW',
+      title: 'Daily challenges',
+      description:
+        'Your submission has been accepted and you are ready to sign-up for the final assigment which will be ready in 2 days',
+      time: sub(this.now, { days: 3 }), // 3 days ago
+      read: true,
+      type: 'system',
+    },
+    {
+      id: '3SCmoGzdD2jLaehkuSVf5',
+      title: 'Cron jobs',
+      description: 'Your Container is ready to download',
+      time: sub(this.now, { days: 4 }), // 4 days ago
+      read: true,
+      type: 'system',
+    },
+  ];
+
+  toggle(force: boolean | null = null) {
+    this.open.update((value) => {
+      if (force === null) {
+        return !value;
+      }
+
+      return force;
+    });
+  }
+
+  timeAgo(time: Date) {
+    return formatDistance(time, this.now, { addSuffix: true });
+  }
+}

package/fuse-starter-pack/fuse-v21.1/src/app/domains/admin/layout/ui/scheme-switcher.ts

@@ -0,0 +1,58 @@
+import { Component, computed, inject } from '@angular/core';
+import { MatIconButton } from '@angular/material/button';
+import { MatPseudoCheckbox } from '@angular/material/core';
+import { MatIcon } from '@angular/material/icon';
+import { MatMenu, MatMenuItem, MatMenuTrigger } from '@angular/material/menu';
+import { Scheme, Theming } from '@/app/core/theming';
+
+@Component({
+  selector: 'scheme-switcher',
+  imports: [
+    MatIcon,
+    MatIconButton,
+    MatMenu,
+    MatMenuItem,
+    MatPseudoCheckbox,
+    MatMenuTrigger,
+  ],
+  template: `
+    <button
+      matIconButton
+      [matMenuTriggerFor]="schemeMenu"
+    >
+      <mat-icon svgIcon="sun-moon" />
+    </button>
+    <mat-menu #schemeMenu>
+      @for (item of schemes; track item.value) {
+        <button
+          mat-menu-item
+          (click)="updateScheme(item.value)"
+        >
+          <span class="flex items-center gap-x-1">
+            <span class="flex-auto">{{ item.label }}</span>
+            <mat-pseudo-checkbox
+              appearance="minimal"
+              [state]="scheme() === item.value ? 'checked' : 'unchecked'"
+            />
+          </span>
+        </button>
+      }
+    </mat-menu>
+  `,
+})
+export class SchemeSwitcher {
+  // Dependencies
+  private theming = inject(Theming);
+
+  // State
+  protected scheme = computed(() => this.theming.scheme());
+  protected schemes: { label: string; value: Scheme }[] = [
+    { label: 'Light', value: 'light' },
+    { label: 'Dark', value: 'dark' },
+    { label: 'System', value: 'system' },
+  ];
+
+  updateScheme(scheme: Scheme) {
+    this.theming.scheme.set(scheme);
+  }
+}

package/fuse-starter-pack/fuse-v21.1/src/app/domains/admin/layout/ui/sidebar.ts

@@ -0,0 +1,31 @@
+import { Component } from '@angular/core';
+import { Navigation } from '@/app/domains/admin/layout/ui/navigation';
+import { User } from '@/app/domains/admin/layout/ui/user';
+
+@Component({
+  selector: 'admin-sidebar',
+  imports: [Navigation, User],
+  host: {
+    class: 'flex w-full h-full flex-col bg-white text-slate-900 dark:bg-transparent dark:text-slate-100',
+  },
+  template: `
+    <!-- Header -->
+    <div class="relative flex items-center gap-x-3 px-5 pt-5 pb-2">
+      <!-- CRUDForge logo (wordmark) -->
+      <img
+        src="/images/logo/logo.png"
+        class="h-10 w-auto max-w-[11rem] object-contain object-left"
+        alt="CRUDForge logo"
+      />
+    </div>
+
+    <!-- Navigation -->
+    <navigation class="mt-8 flex-auto min-h-0 overflow-y-auto [overflow-anchor:none] [scrollbar-width:none] [&::-webkit-scrollbar]:hidden" />
+
+    <!-- Footer: user chip + power logout -->
+    <div class="flex h-14 shrink-0 items-center border-t border-neutral-200 pl-2 pr-0 dark:border-neutral-800">
+      <user />
+    </div>
+  `,
+})
+export class AdminSidebar {}

package/fuse-starter-pack/fuse-v21.1/src/app/domains/admin/layout/ui/user.ts

@@ -0,0 +1,132 @@
+import { Component, computed, inject } from '@angular/core';
+import { MatPseudoCheckbox } from '@angular/material/core';
+import { MatIcon } from '@angular/material/icon';
+import { MatDivider } from '@angular/material/list';
+import { MatMenu, MatMenuItem, MatMenuTrigger } from '@angular/material/menu';
+import { RouterLink } from '@angular/router';
+import { Scheme, Theming } from '@/app/core/theming';
+
+@Component({
+  selector: 'user',
+  imports: [
+    MatDivider,
+    MatIcon,
+    MatMenu,
+    MatMenuItem,
+    MatPseudoCheckbox,
+    MatMenuTrigger,
+    RouterLink,
+  ],
+  template: `
+    <button
+      class="flex w-full cursor-pointer items-center gap-x-3 rounded-xl p-2 text-left hover:bg-neutral-700/10 dark:hover:bg-neutral-300/10"
+      [matMenuTriggerFor]="userMenu"
+    >
+      <img
+        class="size-9 rounded-lg object-contain"
+        src="/images/logo/logo-mark.png"
+        alt="User avatar"
+      />
+      <div class="flex min-w-0 flex-auto flex-col select-none">
+        <div class="truncate font-medium">CRUDForge User</div>
+        <div class="text-on-surface-variant truncate text-sm">
+          demo&#64;crudforge.com
+        </div>
+      </div>
+      <mat-icon
+        class="size-4"
+        svgIcon="ellipsis-vertical"
+      />
+    </button>
+
+    <mat-menu
+      class="min-w-60"
+      xPosition="before"
+      yPosition="above"
+      #userMenu="matMenu"
+    >
+      <button
+        class="py-2 [&>span]:flex [&>span]:items-center"
+        mat-menu-item
+      >
+        <img
+          class="size-9 rounded-lg object-contain"
+          src="/images/logo/logo-mark.png"
+          alt="User avatar"
+        />
+        <div class="ml-3 flex min-w-0 flex-auto flex-col select-none">
+          <div class="truncate font-medium">CRUDForge User</div>
+          <div class="text-on-surface-variant truncate text-xs">
+            demo&#64;crudforge.com
+          </div>
+        </div>
+      </button>
+      <mat-divider />
+      <button mat-menu-item>
+        <mat-icon svgIcon="sparkles" />
+        Upgrade to Pro
+      </button>
+      <mat-divider />
+      <button mat-menu-item>
+        <mat-icon svgIcon="user-round" />
+        Account
+      </button>
+      <button mat-menu-item>
+        <mat-icon svgIcon="wallet" />
+        Billing
+      </button>
+      <button mat-menu-item>
+        <mat-icon svgIcon="bell" />
+        Notifications
+      </button>
+      <mat-divider />
+      <button
+        mat-menu-item
+        [matMenuTriggerFor]="appearanceMenu"
+      >
+        <mat-icon svgIcon="sun-moon" />
+        Appearance
+      </button>
+      <mat-divider />
+      <button
+        mat-menu-item
+        routerLink="/auth/sign-in"
+      >
+        <mat-icon svgIcon="log-out" />
+        Sign out
+      </button>
+    </mat-menu>
+
+    <mat-menu #appearanceMenu="matMenu">
+      @for (item of schemes; track item.value) {
+        <button
+          mat-menu-item
+          (click)="updateScheme(item.value)"
+        >
+          <mat-pseudo-checkbox
+            appearance="minimal"
+            class="mr-2"
+            [state]="scheme() === item.value ? 'checked' : 'unchecked'"
+          />
+          <span>{{ item.label }}</span>
+        </button>
+      }
+    </mat-menu>
+  `,
+})
+export class User {
+  // Dependencies
+  private theming = inject(Theming);
+
+  // State
+  protected scheme = computed(() => this.theming.scheme());
+  protected schemes: { label: string; value: Scheme }[] = [
+    { label: 'Light', value: 'light' },
+    { label: 'Dark', value: 'dark' },
+    { label: 'System', value: 'system' },
+  ];
+
+  updateScheme(scheme: Scheme) {
+    this.theming.scheme.set(scheme);
+  }
+}