.397395619494580:80ba9807d8ed254a4cf52a54e7ad8ee1_69e0d9a5fac8151dc4953e82.69e0ea2447ca93f26a602302.69e0ea2494d8064ab5e653b6:Trae CN.T(2026/4/16 21:54:44)

package.json

@@ -9,13 +9,13 @@
   ],
   "scripts": {
     "prepublish": "npm run build",
-    "storybook": "start-storybook -p 9002",
+    "storybook": "set NODE_OPTIONS=--openssl-legacy-provider && start-storybook -p 9002",
     "test": "jest",
     "test:watch": "jest --watch",
     "test:cover": "istanbul cover -x *.test.js _mocha -- -R spec --require tests/config/setup 'tests/**/*.test.js'",
     "test:report": "cat ./coverage/lcov.info | codecov && rm -rf ./coverage",
     "build": "babel src --out-dir dist --copy-files",
-    "docs": "build-storybook -o docs",
+    "docs": "set NODE_OPTIONS=--openssl-legacy-provider && build-storybook -o docs",
     "commit": "git cz",
     "deploy-storybook": "storybook-to-ghpages",
     "format": "pretty-quick \"src/**/*.js\"",

src/components/Card.js

@@ -7,7 +7,8 @@ import {
   CardRightContent,
   CardTitle,
   Detail,
-  Footer
+  Footer,
+  DueDate
 } from 'rt/styles/Base'
 import InlineInput from 'rt/widgets/InlineInput'
 import Tag from './Card/Tag'
@@ -19,6 +20,20 @@ class Card extends Component {
     e.stopPropagation()
   }
 
+  isOverdue(dueDate) {
+    if (!dueDate) return false
+    const today = new Date()
+    today.setHours(0, 0, 0, 0)
+    const due = new Date(dueDate)
+    return due < today
+  }
+
+  formatDate(dateString) {
+    const date = new Date(dateString)
+    const options = { year: 'numeric', month: 'short', day: 'numeric' }
+    return date.toLocaleDateString('en-US', options)
+  }
+
   render()  {
     const {
       showDeleteButton,
@@ -33,6 +48,7 @@ class Card extends Component {
       label,
       description,
       tags,
+      dueDate,
       cardDraggable,
       editable,
       t
@@ -42,6 +58,8 @@ class Card extends Component {
       onChange({...card, id})
     }
 
+    const isOverdue = this.isOverdue(dueDate)
+
     return (
       <MovableCardWrapper
         data-id={id}
@@ -61,6 +79,21 @@ class Card extends Component {
         <Detail>
           {editable ? <InlineInput value={description} border placeholder={t('placeholder.description')} resize='vertical' onSave={(value) => updateCard({description: value})} /> : description}
         </Detail>
+        {dueDate && (
+          <DueDate isOverdue={isOverdue}>
+            {editable ? (
+              <InlineInput 
+                value={dueDate} 
+                border 
+                placeholder={t('placeholder.dueDate')} 
+                resize='none' 
+                onSave={(value) => updateCard({dueDate: value})} 
+              />
+            ) : (
+              `Due: ${this.formatDate(dueDate)}`
+            )}
+          </DueDate>
+        )}
         {tags && tags.length> 0 && (
           <Footer>
             {tags.map(tag => (
@@ -85,6 +118,7 @@ Card.propTypes = {
   label: PropTypes.string,
   description: PropTypes.string,
   tags: PropTypes.array,
+  dueDate: PropTypes.string,
 }
 
 Card.defaultProps = {
@@ -97,7 +131,8 @@ Card.defaultProps = {
   description: '',
   label: '',
   tags: [],
-  className: ''
+  className: '',
+  dueDate: ''
 }
 
 export default Card

src/components/NewCardForm.js

@@ -6,7 +6,8 @@ import {
   CardRightContent,
   CardTitle,
   CardWrapper,
-  Detail
+  Detail,
+  DueDate
 } from 'rt/styles/Base'
 import {AddButton, CancelButton} from 'rt/styles/Elements'
 import EditableLabel from 'rt/widgets/EditableLabel'
@@ -36,6 +37,9 @@ class NewCardForm extends Component {
           <Detail>
             <EditableLabel placeholder={t('placeholder.description')} onChange={val => this.updateField('description', val)} />
           </Detail>
+          <DueDate>
+            <EditableLabel placeholder={t('placeholder.dueDate')} onChange={val => this.updateField('dueDate', val)} />
+          </DueDate>
         </CardWrapper>
         <AddButton onClick={this.handleAdd}>{t('button.Add card')}</AddButton>
         <CancelButton onClick={onCancel}>{t('button.Cancel')}</CancelButton>

src/locales/en/translation.json

@@ -11,6 +11,7 @@
   "placeholder": {
     "title": "title",
     "description": "description",
-    "label": "label"
+    "label": "label",
+    "dueDate": "due date"
   }
 }

src/locales/pt-br/translation.json

@@ -11,6 +11,7 @@
   "placeholder": {
       "title": "título",
       "description": "descrição",
-      "label": "etiqueta"
+      "label": "etiqueta",
+      "dueDate": "data de vencimento"
   }
 }

src/locales/ru/translation.json

@@ -11,6 +11,7 @@
   "placeholder": {
     "title": "Название",
     "description": "Описание",
-    "label": "Метка"
+    "label": "Метка",
+    "dueDate": "срок выполнения"
   }
 }

src/styles/Base.js

@@ -207,6 +207,18 @@ export const Footer = styled.div`
   flex-wrap: wrap;
 `
 
+export const DueDate = styled.div`
+  font-size: 11px;
+  color: ${props => (props.isOverdue ? '#c9302c' : '#4d4d4d')};
+  margin-top: 4px;
+  padding: 2px 0;
+  ${props =>
+    props.isOverdue &&
+    `
+    font-weight: bold;
+  `}
+`
+
 export const TagSpan = styled.span`
   padding: 2px 3px;
   border-radius: 3px;

stories/data/base.json

@@ -10,19 +10,22 @@
           "id": "Milk",
           "title": "Buy milk",
           "label": "15 mins",
-          "description": "2 Gallons of milk at the Deli store"
+          "description": "2 Gallons of milk at the Deli store",
+          "dueDate": "2026-04-20"
         },
         {
           "id": "Plan2",
           "title": "Dispose Garbage",
           "label": "10 mins",
-          "description": "Sort out recyclable and waste as needed"
+          "description": "Sort out recyclable and waste as needed",
+          "dueDate": "2026-04-15"
         },
         {
           "id": "Plan3",
           "title": "Write Blog",
           "label": "30 mins",
-          "description": "Can AI make memes?"
+          "description": "Can AI make memes?",
+          "dueDate": "2026-04-16"
         },
         {
           "id": "Plan4",
@@ -42,7 +45,8 @@
           "id": "Wip1",
           "title": "Clean House",
           "label": "30 mins",
-          "description": "Soap wash and polish floor. Polish windows and doors. Scrap all broken glasses"
+          "description": "Soap wash and polish floor. Polish windows and doors. Scrap all broken glasses",
+          "dueDate": "2026-04-30"
         }
       ]
     },
@@ -63,7 +67,8 @@
           "id": "Completed1",
           "title": "Practice Meditation",
           "label": "15 mins",
-          "description": "Use Headspace app"
+          "description": "Use Headspace app",
+          "dueDate": "2026-04-10"
         },
         {
           "id": "Completed2",
@@ -83,7 +88,8 @@
           "id": "Repeat1",
           "title": "Morning Jog",
           "label": "30 mins",
-          "description": "Track using fitbit"
+          "description": "Track using fitbit",
+          "dueDate": "2026-05-01"
         }
       ]
     },
@@ -97,7 +103,8 @@
           "id": "Archived1",
           "title": "Go Trekking",
           "label": "300 mins",
-          "description": "Completed 10km on cycle"
+          "description": "Completed 10km on cycle",
+          "dueDate": "2026-03-20"
         }
       ]
     },
@@ -125,7 +132,8 @@
           "id": "Archived3",
           "title": "Go Cycling",
           "label": "300 mins",
-          "description": "Completed 10km on cycle"
+          "description": "Completed 10km on cycle",
+          "dueDate": "2026-04-01"
         }
       ]
     }