init: SR System — Helpdesk & ITAM Portal

src/components/ui/Badge.tsx

@@ -0,0 +1,31 @@
+'use client';
+
+import React from 'react';
+
+interface BadgeProps {
+  variant?: 'open' | 'in-progress' | 'resolved' | 'closed' | 'critical';
+  children: React.ReactNode;
+  className?: string;
+}
+
+const variantStyles = {
+  open: 'bg-[#EFF6FF] text-[#3B82F6]',
+  'in-progress': 'bg-[#FFFBEB] text-[#F59E0B]',
+  resolved: 'bg-[#ECFDF5] text-[#10B981]',
+  closed: 'bg-[#F9FAFB] text-[#6B7280]',
+  critical: 'bg-[#FEF2F2] text-[#EF4444] font-semibold',
+};
+
+export default function Badge({
+  variant = 'closed',
+  children,
+  className = '',
+}: BadgeProps) {
+  return (
+    <span
+      className={`inline-flex items-center px-2.5 py-1 rounded-full text-xs font-medium ${variantStyles[variant]} ${className}`}
+    >
+      {children}
+    </span>
+  );
+}

src/components/ui/Button.tsx

@@ -0,0 +1,49 @@
+'use client';
+
+import React from 'react';
+
+interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+  variant?: 'primary' | 'secondary' | 'outline' | 'ghost' | 'danger';
+  size?: 'sm' | 'md' | 'lg';
+  loading?: boolean;
+  children: React.ReactNode;
+}
+
+export default function Button({
+  variant = 'primary',
+  size = 'md',
+  loading = false,
+  disabled,
+  children,
+  className = '',
+  ...props
+}: ButtonProps) {
+  const baseStyles = 'inline-flex items-center justify-center font-semibold rounded-xl transition-all disabled:opacity-60 disabled:cursor-not-allowed';
+  
+  const variantStyles = {
+    primary: 'bg-[#4F46E5] hover:bg-[#4338CA] text-white',
+    secondary: 'bg-[#8a4cfc] hover:bg-[#712AE2] text-white',
+    outline: 'border border-[#4F46E5] text-[#4F46E5] hover:bg-[#4F46E5]/10',
+    ghost: 'text-text-main hover:bg-[#F3F4F6]',
+    danger: 'bg-[#EF4444] hover:bg-[#DC2626] text-white',
+  };
+
+  const sizeStyles = {
+    sm: 'px-3 py-1.5 text-xs',
+    md: 'px-5 py-2.5 text-sm',
+    lg: 'px-6 py-3 text-base',
+  };
+
+  return (
+    <button
+      className={`${baseStyles} ${variantStyles[variant]} ${sizeStyles[size]} ${className}`}
+      disabled={disabled || loading}
+      {...props}
+    >
+      {loading && (
+        <span className="w-4 h-4 border-2 border-current border-t-transparent rounded-full animate-spin mr-2" />
+      )}
+      {children}
+    </button>
+  );
+}

src/components/ui/Card.tsx

@@ -0,0 +1,25 @@
+'use client';
+
+import React from 'react';
+
+interface CardProps {
+  children: React.ReactNode;
+  className?: string;
+  hover?: boolean;
+}
+
+export default function Card({
+  children,
+  className = '',
+  hover = false,
+}: CardProps) {
+  return (
+    <div
+      className={`bg-white rounded-2xl border border-[#E5E7EB] p-6 ${
+        hover ? 'hover:shadow-float transition-shadow' : 'shadow-card'
+      } ${className}`}
+    >
+      {children}
+    </div>
+  );
+}

src/components/ui/Input.tsx

@@ -0,0 +1,47 @@
+'use client';
+
+import React from 'react';
+
+interface InputProps extends React.InputHTMLAttributes<HTMLInputElement> {
+  label?: string;
+  error?: string;
+  icon?: React.ReactNode;
+}
+
+export default function Input({
+  label,
+  error,
+  icon,
+  className = '',
+  ...props
+}: InputProps) {
+  return (
+    <div className="w-full">
+      {label && (
+        <label className="block text-sm font-medium text-text-main mb-1.5">
+          {label}
+        </label>
+      )}
+      <div className="relative">
+        {icon && (
+          <div className="absolute left-3 top-1/2 -translate-y-1/2 text-text-muted">
+            {icon}
+          </div>
+        )}
+        <input
+          className={`w-full px-4 py-2.5 rounded-xl border bg-white text-text-main text-sm focus:outline-none focus:ring-2 focus:ring-[#4F46E5] focus:border-transparent transition-all ${
+            icon ? 'pl-10' : ''
+          } ${
+            error
+              ? 'border-[#EF4444] focus:ring-[#EF4444]'
+              : 'border-[#E5E7EB]'
+          } ${className}`}
+          {...props}
+        />
+      </div>
+      {error && (
+        <p className="mt-1 text-xs text-[#EF4444]">{error}</p>
+      )}
+    </div>
+  );
+}

src/components/ui/index.ts

@@ -0,0 +1,4 @@
+export { default as Button } from './Button';
+export { default as Input } from './Input';
+export { default as Badge } from './Badge';
+export { default as Card } from './Card';