first commit

source-code/ERP(A-b)-倉庫管理/src/components/shared/SearchToolbar.tsx

@@ -0,0 +1,34 @@
+/**
+ * 搜尋工具列元件
+ * 提供搜尋輸入框功能
+ */
+
+import { Search } from "lucide-react";
+import { Input } from "../ui/input";
+
+interface SearchToolbarProps {
+  value: string;
+  onChange: (value: string) => void;
+  placeholder?: string;
+  className?: string;
+}
+
+export default function SearchToolbar({
+  value,
+  onChange,
+  placeholder = "搜尋...",
+  className = "",
+}: SearchToolbarProps) {
+  return (
+    <div className={`relative ${className}`}>
+      <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 h-4 w-4 text-gray-400" />
+      <Input
+        type="text"
+        placeholder={placeholder}
+        value={value}
+        onChange={(e) => onChange(e.target.value)}
+        className="pl-10"
+      />
+    </div>
+  );
+}

source-code/ERP(A-b)-倉庫管理/src/components/shared/StatsCard.tsx

@@ -0,0 +1,30 @@
+/**
+ * 統計卡片元件
+ * 用於顯示各種統計資訊
+ */
+
+import { LucideIcon } from "lucide-react";
+
+interface StatsCardProps {
+  label: string;
+  value: string | number;
+  icon?: LucideIcon;
+  valueClassName?: string;
+}
+
+export default function StatsCard({
+  label,
+  value,
+  icon: Icon,
+  valueClassName = "text-primary-main",
+}: StatsCardProps) {
+  return (
+    <div className="bg-white rounded-lg shadow-sm border p-5">
+      <div className="flex items-center gap-2 text-grey-2 mb-1">
+        {Icon && <Icon className="h-4 w-4" />}
+        <span>{label}</span>
+      </div>
+      <div className={valueClassName}>{value}</div>
+    </div>
+  );
+}