@apptimate/ui 6.9.0 → 7.1.0

package/package.json

@@ -1,10 +1,11 @@
 {
   "name": "@apptimate/ui",
-  "version": "6.9.0",
+  "version": "7.1.0",
   "main": "src/index.tsx",
   "types": "src/index.tsx",
   "dependencies": {
     "@apptimate/core-lib": "*",
+    "ably": "^2.27.0",
     "apexcharts": "^5.15.2",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",

package/src/base-components/ImageDropzone.tsx

@@ -1,80 +1,80 @@
-"use client";
-
-import React, { useRef } from "react";
-import { Upload } from "lucide-react";
-
-export interface ImageDropzoneProps {
-  onDrop: (files: File[]) => void;
-  maxSizeMB?: number;
-  maxFiles?: number;
-  accept?: string;
-  className?: string;
-  title?: string;
-  subtitle?: string;
-  isLoading?: boolean;
-}
-
-export function ImageDropzone({
-  onDrop,
-  maxSizeMB = 5,
-  maxFiles = 10,
-  accept = "image/*",
-  className = "",
-  title = "Drop images here or click to upload",
-  subtitle = "JPEG, PNG, WebP — max 5MB each, up to 10 images",
-  isLoading = false,
-}: ImageDropzoneProps) {
-  const fileInputRef = useRef<HTMLInputElement>(null);
-
-  const handleFileDrop = (e: React.DragEvent) => {
-    e.preventDefault();
-    if (isLoading) return;
-    const files = Array.from(e.dataTransfer.files).filter((f) => f.type.startsWith("image/"));
-    if (files.length) {
-      onDrop(files.slice(0, maxFiles));
-    }
-  };
-
-  const handleFileSelect = (e: React.ChangeEvent<HTMLInputElement>) => {
-    if (isLoading) return;
-    const files = Array.from(e.target.files || []);
-    if (files.length) {
-      onDrop(files.slice(0, maxFiles));
-    }
-    if (fileInputRef.current) {
-      fileInputRef.current.value = "";
-    }
-  };
-
-  return (
-    <div
-      onDragOver={(e) => e.preventDefault()}
-      onDrop={handleFileDrop}
-      onClick={() => fileInputRef.current?.click()}
-      className={`border-2 border-dashed border-gray-200 hover:border-primary-300 rounded-xl p-6 flex flex-col items-center justify-center cursor-pointer transition-all hover:bg-primary-50/30 group ${
-        isLoading ? "opacity-50 cursor-not-allowed" : ""
-      } ${className}`}
-    >
-      <div className="w-10 h-10 rounded-full bg-gray-100 group-hover:bg-primary-100 flex items-center justify-center mb-2 transition-colors">
-        {isLoading ? (
-          <div className="w-5 h-5 rounded-full border-2 border-gray-200 border-t-primary-500 animate-spin" />
-        ) : (
-          <Upload size={18} className="text-gray-400 group-hover:text-primary-500" />
-        )}
-      </div>
-      <p className="text-[13px] font-medium text-gray-500 group-hover:text-primary-600">
-        {isLoading ? "Uploading..." : title}
-      </p>
-      <p className="text-[11px] text-gray-400 mt-0.5">{subtitle}</p>
-      <input
-        ref={fileInputRef}
-        type="file"
-        accept={accept}
-        multiple={maxFiles > 1}
-        className="hidden"
-        onChange={handleFileSelect}
-        disabled={isLoading}
-      />
-    </div>
-  );
-}
+"use client";
+
+import React, { useRef } from "react";
+import { Upload } from "lucide-react";
+
+export interface ImageDropzoneProps {
+  onDrop: (files: File[]) => void;
+  maxSizeMB?: number;
+  maxFiles?: number;
+  accept?: string;
+  className?: string;
+  title?: string;
+  subtitle?: string;
+  isLoading?: boolean;
+}
+
+export function ImageDropzone({
+  onDrop,
+  maxSizeMB = 5,
+  maxFiles = 10,
+  accept = "image/*",
+  className = "",
+  title = "Drop images here or click to upload",
+  subtitle = "JPEG, PNG, WebP — max 5MB each, up to 10 images",
+  isLoading = false,
+}: ImageDropzoneProps) {
+  const fileInputRef = useRef<HTMLInputElement>(null);
+
+  const handleFileDrop = (e: React.DragEvent) => {
+    e.preventDefault();
+    if (isLoading) return;
+    const files = Array.from(e.dataTransfer.files).filter((f) => f.type.startsWith("image/"));
+    if (files.length) {
+      onDrop(files.slice(0, maxFiles));
+    }
+  };
+
+  const handleFileSelect = (e: React.ChangeEvent<HTMLInputElement>) => {
+    if (isLoading) return;
+    const files = Array.from(e.target.files || []);
+    if (files.length) {
+      onDrop(files.slice(0, maxFiles));
+    }
+    if (fileInputRef.current) {
+      fileInputRef.current.value = "";
+    }
+  };
+
+  return (
+    <div
+      onDragOver={(e) => e.preventDefault()}
+      onDrop={handleFileDrop}
+      onClick={() => fileInputRef.current?.click()}
+      className={`border-2 border-dashed border-gray-200 hover:border-primary-300 rounded-xl p-6 flex flex-col items-center justify-center cursor-pointer transition-all hover:bg-primary-50/30 group ${
+        isLoading ? "opacity-50 cursor-not-allowed" : ""
+      } ${className}`}
+    >
+      <div className="w-10 h-10 rounded-full bg-gray-100 group-hover:bg-primary-100 flex items-center justify-center mb-2 transition-colors">
+        {isLoading ? (
+          <div className="w-5 h-5 rounded-full border-2 border-gray-200 border-t-primary-500 animate-spin" />
+        ) : (
+          <Upload size={18} className="text-gray-400 group-hover:text-primary-500" />
+        )}
+      </div>
+      <p className="text-[13px] font-medium text-gray-500 group-hover:text-primary-600">
+        {isLoading ? "Uploading..." : title}
+      </p>
+      <p className="text-[11px] text-gray-400 mt-0.5">{subtitle}</p>
+      <input
+        ref={fileInputRef}
+        type="file"
+        accept={accept}
+        multiple={maxFiles > 1}
+        className="hidden"
+        onChange={handleFileSelect}
+        disabled={isLoading}
+      />
+    </div>
+  );
+}

package/src/common-components/DashboardLayout.tsx

@@ -7,6 +7,7 @@ import { Dropdown, DropdownItem } from '../base-components/Dropdown';
 import Link from 'next/link';
 import { usePathname, useRouter } from 'next/navigation';
 import { cn, getProjectConstructionGroups } from '@apptimate/core-lib';
+import { NotificationsPopover } from './NotificationsPopover';
 
 export type DashboardMenuConfig = {
   id: string;
@@ -285,7 +286,8 @@ export function DashboardLayout({
           })}
         </nav>
 
-        <div className="mt-auto flex flex-col items-center">
+        <div className="mt-auto flex flex-col items-center gap-4">
+          <NotificationsPopover user={user as any} />
           <Dropdown
             align="left"
             valign="top"
@@ -335,7 +337,7 @@ export function DashboardLayout({
                     <h3 className="px-2 text-xs font-bold text-gray-400 uppercase tracking-wider mb-2 empty:hidden">{group.label}</h3>
                   )}
                   <nav className="flex flex-col gap-1">
-                    {group.items.map((item) => {
+                    {group.items.map((item: any) => {
                       // Find the longest matching path in this group to avoid parent paths being active
                       const allGroupItems = activeMenu.groups.flatMap(g => g.items);
                       const matchingItems = allGroupItems.filter(i => fullPath === i.path || fullPath.startsWith(`${i.path}/`));
@@ -495,7 +497,7 @@ export function DashboardLayout({
                           <span className="text-xs font-bold text-gray-400 uppercase tracking-wider mb-1 px-3">
                             {group.label}
                           </span>
-                          {group.items.map(item => {
+                          {group.items.map((item: any) => {
                             const allMenuItems = menu.groups.flatMap(g => g.items);
                             const matchingItems = allMenuItems.filter(i => fullPath === i.path || fullPath.startsWith(`${i.path}/`));
                             const longestMatch = matchingItems.sort((a, b) => b.path.length - a.path.length)[0];

package/src/common-components/NotificationsModal.tsx

@@ -0,0 +1,173 @@
+"use client";
+
+import React, { useState, useEffect } from 'react';
+import { Modal } from '../base-components/Modal';
+import { Pagination } from '../base-components/Pagination';
+import { sendRequest, IApiResponse, cn } from '@apptimate/core-lib';
+import { Bell, Check, Search } from 'lucide-react';
+import { NotificationItem } from './NotificationsPopover';
+import toast from 'react-hot-toast';
+import { Input } from '../base-components/Input';
+
+interface NotificationsModalProps {
+  isOpen: boolean;
+  onClose: () => void;
+}
+
+export function NotificationsModal({ isOpen, onClose }: NotificationsModalProps) {
+  const [notifications, setNotifications] = useState<NotificationItem[]>([]);
+  const [isLoading, setIsLoading] = useState(false);
+  const [currentPage, setCurrentPage] = useState(1);
+  const [totalItems, setTotalItems] = useState(0);
+  const [searchQuery, setSearchQuery] = useState("");
+  const [debouncedSearch, setDebouncedSearch] = useState("");
+  const itemsPerPage = 10;
+
+  // Debounce search
+  useEffect(() => {
+    const timer = setTimeout(() => {
+      setDebouncedSearch(searchQuery);
+    }, 500);
+    return () => clearTimeout(timer);
+  }, [searchQuery]);
+
+  // Reset to page 1 on new search
+  useEffect(() => {
+    setCurrentPage(1);
+  }, [debouncedSearch]);
+
+  const fetchNotifications = async (page: number, search: string) => {
+    setIsLoading(true);
+    try {
+      const response = await sendRequest({ 
+        url: `${process.env.NEXT_PUBLIC_API_URL}/api/notifications?page=${page}&per_page=${itemsPerPage}&search=${encodeURIComponent(search)}`, 
+        method: 'GET' 
+      });
+      const resData = response.responseData as IApiResponse;
+      if (resData.is_success && resData.result) {
+        setNotifications(resData.result.data || []);
+        setTotalItems(resData.result.meta?.total || 0);
+      }
+    } catch (e) {
+      console.error("Failed to fetch notifications", e);
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  useEffect(() => {
+    if (isOpen) {
+      fetchNotifications(currentPage, debouncedSearch);
+    }
+  }, [isOpen, currentPage, debouncedSearch]);
+
+  const markAsRead = async (id: string) => {
+    setNotifications(prev => prev.map(n => n.id === id ? { ...n, read_at: new Date().toISOString() } : n));
+    try {
+      await sendRequest({ url: `${process.env.NEXT_PUBLIC_API_URL}/api/notifications/${id}/read`, method: 'PATCH' });
+    } catch (e) {
+      console.error("Failed to mark notification as read", e);
+    }
+  };
+
+  const markAllAsRead = async () => {
+    setNotifications(prev => prev.map(n => ({ ...n, read_at: new Date().toISOString() })));
+    try {
+      await sendRequest({ url: `${process.env.NEXT_PUBLIC_API_URL}/api/notifications/read-all`, method: 'POST' });
+      toast.success("All notifications marked as read");
+    } catch (e) {
+      console.error("Failed to mark all as read", e);
+      toast.error("Failed to mark all as read");
+    }
+  };
+
+  return (
+    <Modal
+      isOpen={isOpen}
+      onClose={onClose}
+      title="All Notifications"
+      size="md"
+      className="max-h-[85vh] flex flex-col"
+    >
+      <div className="px-4 py-3 border-b border-gray-100 bg-gray-50/30">
+        <Input 
+          placeholder="Search notifications..."
+          value={searchQuery}
+          onChange={(e) => setSearchQuery(e.target.value)}
+          icon={<Search size={16} className="text-gray-400" />}
+          className="bg-white"
+        />
+      </div>
+      <div className="flex-1 overflow-y-auto px-4 py-2 min-h-[300px]">
+        {isLoading && notifications.length === 0 ? (
+          <div className="flex justify-center items-center py-8 text-sm text-gray-400">Loading notifications...</div>
+        ) : notifications.length === 0 ? (
+          <div className="flex flex-col items-center justify-center py-16 px-4 text-center">
+            <div className="w-12 h-12 bg-gray-50 rounded-full flex items-center justify-center mb-3">
+              <Bell className="text-gray-300" size={24} />
+            </div>
+            <p className="text-sm font-medium text-gray-800">No notifications yet</p>
+            <p className="text-xs text-gray-500 mt-1">When you get notifications, they'll show up here</p>
+          </div>
+        ) : (
+          <div className="divide-y divide-gray-50 border border-gray-100 rounded-lg overflow-hidden">
+            {notifications.map((notif) => (
+              <div
+                key={notif.id}
+                className={cn(
+                  "p-4 transition-colors group flex items-start gap-3",
+                  !notif.read_at ? "bg-primary-50/30" : "bg-white hover:bg-gray-50/50"
+                )}
+              >
+                <div className={cn(
+                  "w-10 h-10 rounded-full flex items-center justify-center shrink-0 mt-0.5",
+                  notif.data.type === 'finance_alert' ? "bg-warning-100 text-warning-600" : "bg-primary-100 text-primary-600"
+                )}>
+                  <Bell size={16} />
+                </div>
+                <div className="flex-1 min-w-0">
+                  <div className="flex justify-between items-start mb-1">
+                    <p className={cn("text-[14px] font-semibold pr-2", !notif.read_at ? "text-gray-900" : "text-gray-700")}>
+                      {notif.data.title || 'Notification'}
+                    </p>
+                    <span className="text-[11px] font-medium text-gray-400 shrink-0 whitespace-nowrap">
+                      {new Date(notif.created_at).toLocaleString()}
+                    </span>
+                  </div>
+                  <p className="text-[13px] text-gray-500 leading-relaxed">
+                    {notif.data.message || ''}
+                  </p>
+                </div>
+                {!notif.read_at && (
+                  <button
+                    onClick={() => markAsRead(notif.id)}
+                    className="p-1.5 rounded-md hover:bg-gray-200 text-gray-400 hover:text-gray-600 ml-1 shrink-0"
+                    title="Mark as read"
+                  >
+                    <Check size={16} />
+                  </button>
+                )}
+              </div>
+            ))}
+          </div>
+        )}
+      </div>
+
+      <div className="border-t border-gray-100 px-4 py-3 bg-gray-50 flex items-center justify-between">
+        <button 
+          onClick={markAllAsRead}
+          disabled={notifications.length === 0}
+          className="text-sm font-medium text-primary-600 hover:text-primary-700 disabled:opacity-50 disabled:cursor-not-allowed"
+        >
+          Mark all as read
+        </button>
+        <Pagination
+          currentPage={currentPage}
+          totalItems={totalItems}
+          itemsPerPage={itemsPerPage}
+          onPageChange={setCurrentPage}
+        />
+      </div>
+    </Modal>
+  );
+}

package/src/common-components/NotificationsPopover.tsx

@@ -0,0 +1,224 @@
+"use client";
+
+import React, { useState, useEffect, useRef } from 'react';
+import { Bell, Check, X } from 'lucide-react';
+import * as Ably from 'ably';
+import { cn, sendRequest, IApiResponse } from '@apptimate/core-lib';
+import toast from 'react-hot-toast';
+import { NotificationsModal } from './NotificationsModal';
+
+export interface NotificationItem {
+  id: string;
+  type: string;
+  data: any;
+  read_at: string | null;
+  created_at: string;
+}
+
+export function NotificationsPopover({ user }: { user?: { id?: number } }) {
+  const [isOpen, setIsOpen] = useState(false);
+  const [isModalOpen, setIsModalOpen] = useState(false);
+  const [notifications, setNotifications] = useState<NotificationItem[]>([]);
+  const [unreadCount, setUnreadCount] = useState(0);
+  const [isLoading, setIsLoading] = useState(false);
+  const dropdownRef = useRef<HTMLDivElement>(null);
+
+  const ablyApiKey = process.env.NEXT_PUBLIC_ABLY_API_KEY;
+
+  // Close on outside click
+  useEffect(() => {
+    const handleClickOutside = (event: MouseEvent) => {
+      if (dropdownRef.current && !dropdownRef.current.contains(event.target as Node)) {
+        setIsOpen(false);
+      }
+    };
+    document.addEventListener("mousedown", handleClickOutside);
+    return () => document.removeEventListener("mousedown", handleClickOutside);
+  }, []);
+
+  // Fetch initial notifications
+  const fetchNotifications = async () => {
+    setIsLoading(true);
+    try {
+      const response = await sendRequest({ url: `${process.env.NEXT_PUBLIC_API_URL}/api/notifications?per_page=50`, method: 'GET' });
+      const resData = response.responseData as IApiResponse;
+      if (resData.is_success && resData.result) {
+        setNotifications(resData.result.data || []);
+        setUnreadCount(resData.result.unread_count || 0);
+      }
+    } catch (e) {
+      console.error("Failed to fetch notifications", e);
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  useEffect(() => {
+    if (user?.id) {
+      fetchNotifications();
+    }
+  }, [user?.id]);
+
+  // Ably Realtime integration
+  useEffect(() => {
+    if (!user?.id || !ablyApiKey) return;
+
+    const ably = new Ably.Realtime({ key: ablyApiKey });
+    const channelName = `private:App.Models.User.${user.id}`;
+    const channel = ably.channels.get(channelName);
+
+    channel.subscribe((message) => {
+      // The event name from Laravel is usually the class name of the notification
+      const data = message.data;
+
+      const newNotification: NotificationItem = {
+        id: data.id || Math.random().toString(),
+        type: message.name || 'Notification',
+        data: data,
+        read_at: null,
+        created_at: new Date().toISOString()
+      };
+
+      setNotifications(prev => [newNotification, ...prev]);
+      setUnreadCount(prev => prev + 1);
+    });
+
+    return () => {
+      channel.unsubscribe();
+      ably.close();
+    };
+  }, [user?.id, ablyApiKey]);
+
+  const markAsRead = async (id: string) => {
+    setNotifications(prev => prev.map(n => n.id === id ? { ...n, read_at: new Date().toISOString() } : n));
+    setUnreadCount(prev => Math.max(0, prev - 1));
+    try {
+      await sendRequest({ url: `${process.env.NEXT_PUBLIC_API_URL}/api/notifications/${id}/read`, method: 'PATCH' });
+    } catch (e) {
+      console.error("Failed to mark notification as read", e);
+    }
+  };
+
+  const markAllAsRead = async () => {
+    setNotifications(prev => prev.map(n => ({ ...n, read_at: new Date().toISOString() })));
+    setUnreadCount(0);
+    try {
+      await sendRequest({ url: `${process.env.NEXT_PUBLIC_API_URL}/api/notifications/read-all`, method: 'POST' });
+    } catch (e) {
+      console.error("Failed to mark all as read", e);
+    }
+  };
+
+  return (
+    <div className="relative" ref={dropdownRef}>
+      <button
+        onClick={() => setIsOpen(!isOpen)}
+        className="relative w-10 h-10 rounded-full flex items-center justify-center text-gray-500 hover:bg-gray-100 hover:text-gray-900 transition-all focus:outline-none focus:ring-2 focus:ring-primary-500 focus:ring-offset-1"
+      >
+        <Bell size={20} />
+        {unreadCount > 0 && (
+          <span className="absolute top-2 right-2.5 flex h-2 w-2">
+            <span className="animate-ping absolute inline-flex h-full w-full rounded-full bg-red-400 opacity-75"></span>
+            <span className="relative inline-flex rounded-full h-2 w-2 bg-red-500 ring-2 ring-white"></span>
+          </span>
+        )}
+      </button>
+
+      {isOpen && (
+        <div className="absolute left-full bottom-0 ml-4 mb-2 w-80 sm:w-96 bg-white rounded-2xl shadow-xl shadow-gray-200/50 border border-gray-100 z-[100] overflow-hidden">
+          <div className="flex items-center justify-between px-4 py-3 border-b border-gray-50 bg-gray-50/50">
+            <div className="flex items-center gap-2">
+              <h3 className="font-bold text-[14px] text-gray-800 tracking-tight">Notifications</h3>
+              {unreadCount > 0 && (
+                <span className="bg-primary-100 text-primary-700 text-[10px] font-bold px-2 py-0.5 rounded-full">
+                  {unreadCount} New
+                </span>
+              )}
+            </div>
+            {unreadCount > 0 && (
+              <button
+                onClick={markAllAsRead}
+                className="text-[11px] font-medium text-primary-600 hover:text-primary-700 hover:bg-primary-50 px-2 py-1 rounded-md transition-colors"
+              >
+                Mark all read
+              </button>
+            )}
+          </div>
+
+          <div className="max-h-[400px] overflow-y-auto">
+            {isLoading && notifications.length === 0 ? (
+              <div className="flex justify-center items-center py-8 text-sm text-gray-400">Loading...</div>
+            ) : notifications.length === 0 ? (
+              <div className="flex flex-col items-center justify-center py-10 px-4 text-center">
+                <div className="w-12 h-12 bg-gray-50 rounded-full flex items-center justify-center mb-3">
+                  <Bell className="text-gray-300" size={24} />
+                </div>
+                <p className="text-sm font-medium text-gray-800">No notifications yet</p>
+                <p className="text-xs text-gray-500 mt-1">When you get notifications, they'll show up here</p>
+              </div>
+            ) : (
+              <div className="divide-y divide-gray-50">
+                {notifications.map((notif) => (
+                  <div
+                    key={notif.id}
+                    className={cn(
+                      "p-4 transition-colors hover:bg-gray-50/80 group cursor-default flex items-start gap-3",
+                      !notif.read_at ? "bg-primary-50/30" : "bg-white"
+                    )}
+                  >
+                    <div className={cn(
+                      "w-8 h-8 rounded-full flex items-center justify-center shrink-0 mt-0.5",
+                      notif.data.type === 'finance_alert' ? "bg-warning-100 text-warning-600" : "bg-primary-100 text-primary-600"
+                    )}>
+                      <Bell size={14} />
+                    </div>
+                    <div className="flex-1 min-w-0">
+                      <div className="flex justify-between items-start mb-1">
+                        <p className={cn("text-[13px] font-semibold truncate pr-2", !notif.read_at ? "text-gray-900" : "text-gray-700")}>
+                          {notif.data.title || 'Notification'}
+                        </p>
+                        <span className="text-[10px] font-medium text-gray-400 shrink-0 whitespace-nowrap">
+                          {new Date(notif.created_at).toLocaleDateString()}
+                        </span>
+                      </div>
+                      <p className="text-[12px] text-gray-500 leading-relaxed">
+                        {notif.data.message || ''}
+                      </p>
+                    </div>
+                    {!notif.read_at && (
+                      <button
+                        onClick={() => markAsRead(notif.id)}
+                        className="opacity-0 group-hover:opacity-100 transition-opacity p-1.5 rounded-md hover:bg-gray-200 text-gray-400 hover:text-gray-600 ml-1 shrink-0"
+                        title="Mark as read"
+                      >
+                        <Check size={14} />
+                      </button>
+                    )}
+                  </div>
+                ))}
+              </div>
+            )}
+          </div>
+          {notifications.length > 0 && (
+            <div className="p-3 border-t border-gray-50 bg-gray-50/50 text-center">
+              <button 
+                onClick={() => {
+                  setIsOpen(false);
+                  setIsModalOpen(true);
+                }}
+                className="text-[12px] font-semibold text-gray-500 hover:text-gray-800 transition-colors"
+              >
+                View all notifications
+              </button>
+            </div>
+          )}
+        </div>
+      )}
+      
+      <NotificationsModal 
+        isOpen={isModalOpen} 
+        onClose={() => setIsModalOpen(false)} 
+      />
+    </div>
+  );
+}