skillverse 0.1.0

package/client/src/lib/api.ts

@@ -0,0 +1,196 @@
+import axios from 'axios';
+import type {
+    Skill,
+    Workspace,
+    MarketplaceSkill,
+    DashboardStats,
+    ApiResponse,
+    PaginatedResponse,
+    CreateSkillFromGitDto,
+    CreateWorkspaceDto,
+    UpdateSkillDto,
+    UpdateWorkspaceDto,
+    PublishSkillDto,
+    SkillWorkspace,
+    UpdateCheckResponse,
+} from '@skillverse/shared';
+
+const API_BASE_URL = import.meta.env.VITE_API_URL || 'http://localhost:3001/api';
+
+const api = axios.create({
+    baseURL: API_BASE_URL,
+    headers: {
+        'Content-Type': 'application/json',
+    },
+});
+
+// Response interceptor for error handling
+api.interceptors.response.use(
+    (response) => response,
+    (error) => {
+        const message = error.response?.data?.error || error.message || 'An error occurred';
+        console.error('API Error:', message);
+        return Promise.reject(new Error(message));
+    }
+);
+
+// Skills API
+export const skillsApi = {
+    getAll: async (): Promise<Skill[]> => {
+        const { data } = await api.get<ApiResponse<Skill[]>>('/skills');
+        return data.data || [];
+    },
+
+    getById: async (id: string): Promise<Skill> => {
+        const { data } = await api.get<ApiResponse<Skill>>(`/skills/${id}`);
+        return data.data!;
+    },
+
+    createFromGit: async (dto: CreateSkillFromGitDto): Promise<Skill> => {
+        const { data } = await api.post<ApiResponse<Skill>>('/skills/from-git', dto);
+        return data.data!;
+    },
+
+    createFromLocal: async (name: string, file: File, description?: string): Promise<Skill> => {
+        const formData = new FormData();
+        formData.append('name', name);
+        formData.append('file', file);
+        if (description) formData.append('description', description);
+
+        const { data } = await api.post<ApiResponse<Skill>>('/skills/from-local', formData, {
+            headers: { 'Content-Type': 'multipart/form-data' },
+        });
+        return data.data!;
+    },
+
+    update: async (id: string, dto: UpdateSkillDto): Promise<Skill> => {
+        const { data } = await api.put<ApiResponse<Skill>>(`/skills/${id}`, dto);
+        return data.data!;
+    },
+
+    delete: async (id: string, removeFiles = true): Promise<void> => {
+        await api.delete(`/skills/${id}?removeFiles=${removeFiles}`);
+    },
+
+    linkToWorkspace: async (skillId: string, workspaceId: string): Promise<SkillWorkspace> => {
+        const { data } = await api.post<ApiResponse<SkillWorkspace>>(`/skills/${skillId}/link`, {
+            workspaceId,
+        });
+        return data.data!;
+    },
+
+    unlinkFromWorkspace: async (skillId: string, workspaceId: string): Promise<void> => {
+        await api.delete(`/skills/${skillId}/unlink/${workspaceId}`);
+    },
+
+    checkUpdate: async (id: string): Promise<UpdateCheckResponse> => {
+        const { data } = await api.get<ApiResponse<UpdateCheckResponse>>(`/skills/${id}/check-update`);
+        return data.data!;
+    },
+
+    upgrade: async (id: string): Promise<Skill> => {
+        const { data } = await api.post<ApiResponse<Skill>>(`/skills/${id}/upgrade`);
+        return data.data!;
+    },
+
+    checkUpdates: async (ids?: string[]): Promise<Record<string, UpdateCheckResponse>> => {
+        const { data } = await api.post<ApiResponse<Record<string, UpdateCheckResponse>>>('/skills/check-updates', { ids });
+        return data.data!;
+    },
+
+    getSkillMd: async (id: string): Promise<{ exists: boolean; content: string | null }> => {
+        const { data } = await api.get<ApiResponse<{ exists: boolean; content: string | null }>>(`/skills/${id}/skill-md`);
+        return data.data!;
+    },
+};
+
+// Workspaces API
+export const workspacesApi = {
+    getAll: async (): Promise<Workspace[]> => {
+        const { data } = await api.get<ApiResponse<Workspace[]>>('/workspaces');
+        return data.data || [];
+    },
+
+    getById: async (id: string): Promise<Workspace> => {
+        const { data } = await api.get<ApiResponse<Workspace>>(`/workspaces/${id}`);
+        return data.data!;
+    },
+
+    create: async (dto: CreateWorkspaceDto): Promise<Workspace> => {
+        const { data } = await api.post<ApiResponse<Workspace>>('/workspaces', dto);
+        return data.data!;
+    },
+
+    update: async (id: string, dto: UpdateWorkspaceDto): Promise<Workspace> => {
+        const { data } = await api.put<ApiResponse<Workspace>>(`/workspaces/${id}`, dto);
+        return data.data!;
+    },
+
+    delete: async (id: string): Promise<void> => {
+        await api.delete(`/workspaces/${id}`);
+    },
+
+    detectSkills: async (id: string): Promise<{ name: string; hasSkillMd: boolean; path: string }[]> => {
+        const { data } = await api.post<ApiResponse<{ name: string; hasSkillMd: boolean; path: string }[]>>(`/workspaces/${id}/detect-skills`);
+        return data.data || [];
+    },
+
+    migrateSkills: async (id: string, skillNames: string[]): Promise<{ success: boolean; migrated: string[]; errors: string[] }> => {
+        const { data } = await api.post<ApiResponse<{ success: boolean; migrated: string[]; errors: string[] }>>(`/workspaces/${id}/migrate-skills`, { skillNames });
+        return data.data!;
+    },
+};
+
+// Marketplace API
+export const marketplaceApi = {
+    getSkills: async (
+        page = 1,
+        pageSize = 20,
+        search?: string
+    ): Promise<PaginatedResponse<MarketplaceSkill>> => {
+        const params = new URLSearchParams({
+            page: page.toString(),
+            pageSize: pageSize.toString(),
+        });
+        if (search) params.append('search', search);
+
+        const { data } = await api.get<ApiResponse<PaginatedResponse<MarketplaceSkill>>>(
+            `/marketplace/skills?${params}`
+        );
+        return data.data!;
+    },
+
+    getSkillById: async (id: string): Promise<MarketplaceSkill> => {
+        const { data } = await api.get<ApiResponse<MarketplaceSkill>>(`/marketplace/skills/${id}`);
+        return data.data!;
+    },
+
+    publish: async (dto: PublishSkillDto): Promise<MarketplaceSkill> => {
+        const { data } = await api.post<ApiResponse<MarketplaceSkill>>('/marketplace/publish', dto);
+        return data.data!;
+    },
+
+    install: async (id: string): Promise<Skill> => {
+        const { data } = await api.post<ApiResponse<Skill>>(`/marketplace/install/${id}`);
+        return data.data!;
+    },
+
+    unpublish: async (skillId: string): Promise<void> => {
+        await api.delete(`/marketplace/unpublish/${skillId}`);
+    },
+};
+
+// Dashboard API
+export const dashboardApi = {
+    getStats: async (): Promise<DashboardStats> => {
+        const { data } = await api.get<ApiResponse<DashboardStats>>('/dashboard/stats');
+        return data.data!;
+    },
+
+    getActivity: async (): Promise<any[]> => {
+        const { data } = await api.get<ApiResponse<any[]>>('/dashboard/activity');
+        return data.data || [];
+    },
+};
+
+export default api;

package/client/src/main.tsx

@@ -0,0 +1,10 @@
+import { StrictMode } from 'react'
+import { createRoot } from 'react-dom/client'
+import './index.css'
+import App from './App.tsx'
+
+createRoot(document.getElementById('root')!).render(
+  <StrictMode>
+    <App />
+  </StrictMode>,
+)

package/client/src/pages/Dashboard.tsx

@@ -0,0 +1,209 @@
+import { useEffect } from 'react';
+import { useAppStore } from '../stores/appStore';
+import { Package, FolderOpen, Link2, Store, TrendingUp, Clock } from 'lucide-react';
+import { LoadingPage } from '../components/LoadingSpinner';
+import Tooltip from '../components/Tooltip';
+import { clsx } from 'clsx';
+
+export default function Dashboard() {
+    const { stats, statsLoading, fetchStats } = useAppStore();
+
+    useEffect(() => {
+        fetchStats();
+    }, [fetchStats]);
+
+    if (statsLoading && !stats) {
+        return <LoadingPage />;
+    }
+
+    const statCards = [
+        {
+            label: 'Total Skills',
+            value: stats?.totalSkills || 0,
+            icon: Package,
+            color: 'from-primary-500 to-primary-600',
+            bgColor: 'bg-primary-500/10',
+        },
+        {
+            label: 'Workspaces',
+            value: stats?.totalWorkspaces || 0,
+            icon: FolderOpen,
+            color: 'from-accent-500 to-accent-600',
+            bgColor: 'bg-accent-500/10',
+        },
+        {
+            label: 'Active Links',
+            value: stats?.totalLinks || 0,
+            icon: Link2,
+            color: 'from-green-500 to-green-600',
+            bgColor: 'bg-green-500/10',
+        },
+        {
+            label: 'Published',
+            value: stats?.marketplaceSkills || 0,
+            icon: Store,
+            color: 'from-orange-500 to-orange-600',
+            bgColor: 'bg-orange-500/10',
+        },
+    ];
+
+    return (
+        <div className="space-y-6 sm:space-y-8 animate-fade-in">
+            {/* Header */}
+            <div>
+                <h1 className="text-2xl sm:text-3xl font-bold text-dark-100">Dashboard</h1>
+                <p className="text-dark-400 mt-1 text-sm sm:text-base text-justified">
+                    Overview of your skill management system
+                </p>
+            </div>
+
+            {/* Stats Grid - Responsive */}
+            <div className="grid grid-cols-2 lg:grid-cols-4 gap-3 sm:gap-6">
+                {statCards.map((stat) => (
+                    <div
+                        key={stat.label}
+                        className="card hover:scale-[1.02] transition-transform p-4 sm:p-6"
+                    >
+                        <div className="flex items-start justify-between">
+                            <div className="min-w-0 flex-1">
+                                <p className="text-xs sm:text-sm text-dark-400 truncate">{stat.label}</p>
+                                <p className="text-xl sm:text-3xl font-bold text-dark-100 mt-1">
+                                    {stat.value}
+                                </p>
+                            </div>
+                            <div
+                                className={clsx(
+                                    'w-10 h-10 sm:w-12 sm:h-12 rounded-xl flex items-center justify-center shrink-0 ml-2',
+                                    stat.bgColor
+                                )}
+                            >
+                                <stat.icon
+                                    className={clsx(
+                                        'w-5 h-5 sm:w-6 sm:h-6 bg-gradient-to-r bg-clip-text',
+                                        stat.color.replace('from-', 'text-').split(' ')[0]
+                                    )}
+                                />
+                            </div>
+                        </div>
+                        <div className="mt-3 sm:mt-4 flex items-center gap-1 text-xs text-dark-500">
+                            <TrendingUp className="w-3.5 h-3.5 text-green-400" />
+                            <span className="text-green-400">Active</span>
+                        </div>
+                    </div>
+                ))}
+            </div>
+
+            {/* Recent Skills */}
+            <div className="card">
+                <div className="flex items-center justify-between mb-4 sm:mb-6">
+                    <h2 className="text-base sm:text-lg font-semibold text-dark-100">Recent Skills</h2>
+                    <Clock className="w-5 h-5 text-dark-400" />
+                </div>
+
+                {stats?.recentSkills && stats.recentSkills.length > 0 ? (
+                    <div className="space-y-2 sm:space-y-3">
+                        {stats.recentSkills.map((skill: any) => (
+                            <div
+                                key={skill.id}
+                                className="flex items-center justify-between p-3 sm:p-4 rounded-xl bg-dark-750 hover:bg-dark-700 transition-colors gap-3"
+                            >
+                                <div className="flex items-center gap-3 sm:gap-4 min-w-0 flex-1">
+                                    <div
+                                        className={clsx(
+                                            'w-8 h-8 sm:w-10 sm:h-10 rounded-lg flex items-center justify-center shrink-0',
+                                            skill.source === 'git'
+                                                ? 'bg-primary-500/10 text-primary-400'
+                                                : 'bg-accent-500/10 text-accent-400'
+                                        )}
+                                    >
+                                        <Package className="w-4 h-4 sm:w-5 sm:h-5" />
+                                    </div>
+                                    <div className="min-w-0 flex-1">
+                                        <Tooltip content={skill.name} position="top">
+                                            <p className="font-medium text-dark-100 text-sm sm:text-base truncate max-w-[200px] sm:max-w-none">
+                                                {skill.name}
+                                            </p>
+                                        </Tooltip>
+                                        <p className="text-xs sm:text-sm text-dark-500">
+                                            {skill.source === 'git' ? 'Git Repository' : 'Local Upload'}
+                                        </p>
+                                    </div>
+                                </div>
+                                <div className="text-right shrink-0">
+                                    <p className="text-xs sm:text-sm text-dark-400">
+                                        {new Date(skill.installDate).toLocaleDateString()}
+                                    </p>
+                                    <p className="text-xs text-dark-500">
+                                        {skill.linkedWorkspaces?.length || 0} linked
+                                    </p>
+                                </div>
+                            </div>
+                        ))}
+                    </div>
+                ) : (
+                    <div className="text-center py-6 sm:py-8">
+                        <Package className="w-10 h-10 sm:w-12 sm:h-12 mx-auto text-dark-600 mb-3" />
+                        <p className="text-dark-400 text-sm sm:text-base">No skills yet</p>
+                        <p className="text-xs sm:text-sm text-dark-500 mt-1">
+                            Add your first skill to get started
+                        </p>
+                    </div>
+                )}
+            </div>
+
+            {/* Quick Actions - Responsive */}
+            <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4 sm:gap-6">
+                <a
+                    href="/skills"
+                    className="card group cursor-pointer hover:border-primary-500/50 transition-all"
+                >
+                    <div className="flex items-center gap-3 sm:gap-4">
+                        <div className="w-10 h-10 sm:w-12 sm:h-12 rounded-xl bg-primary-500/10 flex items-center justify-center group-hover:scale-110 transition-transform shrink-0">
+                            <Package className="w-5 h-5 sm:w-6 sm:h-6 text-primary-400" />
+                        </div>
+                        <div className="min-w-0 flex-1">
+                            <p className="font-medium text-dark-100 group-hover:text-primary-400 transition-colors text-sm sm:text-base">
+                                Manage Skills
+                            </p>
+                            <p className="text-xs sm:text-sm text-dark-500 truncate">View and organize your skills</p>
+                        </div>
+                    </div>
+                </a>
+
+                <a
+                    href="/workspaces"
+                    className="card group cursor-pointer hover:border-accent-500/50 transition-all"
+                >
+                    <div className="flex items-center gap-3 sm:gap-4">
+                        <div className="w-10 h-10 sm:w-12 sm:h-12 rounded-xl bg-accent-500/10 flex items-center justify-center group-hover:scale-110 transition-transform shrink-0">
+                            <FolderOpen className="w-5 h-5 sm:w-6 sm:h-6 text-accent-400" />
+                        </div>
+                        <div className="min-w-0 flex-1">
+                            <p className="font-medium text-dark-100 group-hover:text-accent-400 transition-colors text-sm sm:text-base">
+                                Workspaces
+                            </p>
+                            <p className="text-xs sm:text-sm text-dark-500 truncate">Configure your workspaces</p>
+                        </div>
+                    </div>
+                </a>
+
+                <a
+                    href="/marketplace"
+                    className="card group cursor-pointer hover:border-orange-500/50 transition-all sm:col-span-2 lg:col-span-1"
+                >
+                    <div className="flex items-center gap-3 sm:gap-4">
+                        <div className="w-10 h-10 sm:w-12 sm:h-12 rounded-xl bg-orange-500/10 flex items-center justify-center group-hover:scale-110 transition-transform shrink-0">
+                            <Store className="w-5 h-5 sm:w-6 sm:h-6 text-orange-400" />
+                        </div>
+                        <div className="min-w-0 flex-1">
+                            <p className="font-medium text-dark-100 group-hover:text-orange-400 transition-colors text-sm sm:text-base">
+                                Marketplace
+                            </p>
+                            <p className="text-xs sm:text-sm text-dark-500 truncate">Browse and share skills</p>
+                        </div>
+                    </div>
+                </a>
+            </div>
+        </div>
+    );
+}