使用 KendoReact 的产品到期追踪器 AI

我建造了什么

产品到期追踪器 AI 是一款基于 React 构建的应用程序，可帮助用户监控产品的有效期。它可以广泛应用于超市、药店和商场，帮助用户实时评估产品详情。货架上产品过期的问题日益严峻，因此购买这款应用程序至关重要。这款到期追踪器 AI 是一款解决实际问题的应用，它由 React 驱动，并包含至少 10 个 KendoReact 免费组件。该项目是在本次挑战赛的期限内从零开始构建的。

该项目整合了人工智能技术，提供库存产品详情摘要，并提供可操作的措施，以防止产品过期。人工智能还可以扫描产品详情，并自动将产品添加到库存中，无需填写表格。

一个关键功能是“过期产品”页面，其中列出了即将在两个月或更长时间后过期的产品，帮助客户追踪即将过期的商品。该页面使用 Kendo React 网格组件，提供分页和筛选选项。用户可以打印和导出产品列表为 PDF 文件，并通过复选框选择特定列。

演示

此应用程序使用身份验证，但可以随意使用虚拟数据（电子邮件和密码）进行注册和登录。

该应用程序基于 React 构建前端，包含 10 个或更多 KendoReact 免费组件，我将在下面列出

公共网址：
Github代码：

应用程序截图

视频演示

KendoReact 体验

KendoReact 免费组件是一款颠覆性的 React 商业应用设计和开发工具。它拥有 50 多个免费组件，我在这个项目中使用了以下列出的组件。它出色的 UI 真正改变了我的用户体验，并且在这个项目中大量使用，帮助我用很少的代码完成了大量工作。我只需要选择合适的组件并自定义 props 以适应项目即可。

使用的 KendoReact 免费组件

1 Kendo 标签和输入组件

import { Label } from "@progress/kendo-react-labels";
import { Input } from "@progress/kendo-react-inputs";

<Label className="font-medium" editorId="firstName">
 First Name&nbsp;
</Label>
<Input
  id="firstName"
  disabled
  name="firstName"
  type="text"
  value={firstName}
  onChange={}
/>

2剑道日期选择器

import { DatePicker } from "@progress/kendo-react-dateinputs";
<DatePicker
  className=""
  name="dob"
  value={dob}
  onChange={}
/>

3剑道下拉列表

import { DropDownList } from "@progress/kendo-react-dropdowns";
<DropDownList
  style={{
  width: "390px",
 }}
 data={sex}
 value={gender}
 defaultValue="Male"
 onChange={}
 name="gender"
/>

4剑道通知

import { Notification } from "@progress/kendo-react-notification";
<Notification closable={true} type={{ style: "error", icon: true }}>
 {error}
</Notification>

5 Kendo 工具栏、ToolbarSeperator、按钮和 ButtonGroup

import {
  Toolbar,
  ToolbarSeparator,
  Button,
  ButtonGroup,
} from "@progress/kendo-react-buttons";
<Toolbar>
  <ButtonGroup>
    <Button
      className="k-toolbar-button"
      svgIcon={boldIcon}
      title="Bold"
      onClick={() => onFormat("bold")}
    />
</ButtonGroup>
</Toolbar>

6剑道网格、GridColumn

import { Grid, GridColumn as Column } from "@progress/kendo-react-grid";
<Grid>
   <Column field="id" title="ID" filterable={false} width="40px" />
   <Column field="productName" title="Product Name" width="240px" />
</Grid>

7 Kendo 对话框、DialogActionBar

import { Dialog, DialogActionsBar } from "@progress/kendo-react-dialogs";
<Dialog title={"Please confirm"} onClose={toggleDialog}>
  <p style={{ margin: "25px", textAlign: "center" }}>
    Actions for {selectedProduct.productName}
  </p>
 <DialogActionsBar>
    <Button themeColor="info">
     Edit
    </Button>
</DialogActionsBar>
</Dialog>

8剑道复选框

import { Checkbox } from "@progress/kendo-react-inputs";
 <Checkbox
    type="checkbox"
    id={}
    name={}
    defaultChecked={}
    onChange={}
    label={}
 />

9剑道卡、卡片标题、卡片主体

import { Card, CardBody, CardTitle } from "@progress/kendo-react-layout";
<Card style={{ width: 300 }} type="info">
  <CardBody>
    <CardTitle>Total Products</CardTitle>
       <p>Number of products in the system.</p>
    </CardTitle>
  </CardBody>
</Card>

10剑道进度条

import { ProgressBar } from "@progress/kendo-react-progressbars";
<ProgressBar value={productLength} />

11 Kendo 浮动操作按钮

import { FloatingActionButton } from "@progress/kendo-react-buttons";
<FloatingActionButton
   svgIcon={open ? cancelIcon : homeIcon}
   items={navLinks}
   item={CustomItem}
   positionMode="absolute"
   modal={true}
   onOpen={handleOpen}
   onClose={handleClose}
/>

旨在给人留下深刻印象

我把AI技术与OpenAI进行整合。

在这里，用户可以向 AI 询问与库存/数据库中的产品相关的问题，例如获取所有产品的到期日期、总结即将到期的产品、可操作的步骤，并借助产品数量预测下次购买时库存不足或库存过剩的产品。
用户还可以使用摄像头扫描产品详情，AI 将从图像中推断出产品信息。此外，系统还添加了一个“Kendo”按钮，如果用户对 AI 的输出结果满意，产品就会被保存到数据库中。这可以避免用户逐一填写“添加产品”表单的压力。